@import url(https://fonts.googleapis.com/css?family=DM+Sans:100,200,300,400,500,600);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:100,200,300,400,500,600);

:root {
  --primary-color: #02263C;
  --primary-lite-color: #ddd6d0;
  --primary-color-9: #02263C99;
  --secondary-color: #ffffff;
  --main-background-color:#FAFAFB;
  --accent-color-lite: #F7F0B5;
  --accent-color-gold: #C39427;
  --accent-color-gold-70: #C3942770;
  --error-color: #e64545;
  --valid-color:#00d54f;
  --valid-color-70:#00d54f70;
  --error-color-70: #e6454570;
  --accent-color-grey: #7c8fa0;
  --accent-color-blue: #95b0c5;
  --font-color-dark:#232323;
  --background-color-grey:#f9f7f6;
  --border-color:#f6f6f6;
  --accent-color-blue-70: #95b0c570;
  --accent-color-blue-20: #95b0c520;
  --underline-color:#62778a;
  --accent-color-brown:#652f15;
  --primary-font: "DM Sans", sans-serif;
  --accent-font: "Playfair Display", sans-serif;
  
  --overlay:#567C9399;
  
  --bar-w: 10px;
  --tower-w: 8px;
  --sun: 20px;
  /* AE-style controls */
  --speed: 0.8;
  --amp: 12px;
  --bird-amp: 2px;
  --phaseStep: 0.18s;

  --grey: #c4d6e1;
  --dark:  #62778a;
  --sunCol:#f2c94c;
}

*{ box-sizing:border-box; }

/*body{
  margin:0;
  display:grid;
  place-items:center;
  min-height:100vh;
  background: transparent;
}*/

/* stage */
.loading-container{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 400px;
  width: 325px;
}
.city-loader{
  display: flex;
  width: 300px;
  height: 200px;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.login-container:not(.loading) .loading-container,.tfa-setup:not(.loading) .loading-container{
   display: none;
}

/* sun */
.sun{
  position:absolute;
  width: var(--sun);
  height: var(--sun);
  border-radius: 50%;
  background: var(--sunCol);
  top: 40%;
  left: 40%;
}

/* bird */
.bird{
  position:absolute;
  left: 100px;
  top: 125px;
  width: 10px;
  height: 5px;
  animation:
    breathe 3.6s ease-in-out infinite,
    birdFloat calc(1s / var(--speed)) linear infinite;
}
.bird.two{
  left: 175px;
  top: 120px;
}
.bird.three{
  left: 125px;
  top: 95px;
}
.bird::before,
.bird::after{
  content:"";
  position:absolute;
  width: 20px;
  background: #fff;
  border-radius: 999px;
  /*! top: -3px; */
  height: 5px;
}
.bird::after{
  content:"";
  position:absolute;
  height: 11px;
  width: 13px;
}
.bird::before{ left:0; }
.bird::after { right:-7px;top:-5px;}

/* skyline */
.city{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:5px; /* increased spacing */
}

/* shared float */
.float{
  animation: floatBars calc(1s / var(--speed)) linear infinite;
}

/* phase offsets */
.p1{ animation-delay: calc(-1 * var(--phaseStep) * 0); }
.p2{ animation-delay: calc(-1 * var(--phaseStep) * 1); }
.p3{ animation-delay: calc(-1 * var(--phaseStep) * 2); }
.p4{ animation-delay: calc(-1 * var(--phaseStep) * 3); }
.p5{ animation-delay: calc(-1 * var(--phaseStep) * 4); }
.p6{ animation-delay: calc(-1 * var(--phaseStep) * 5); }

/* bars */
.bar{
  width: var(--bar-w);
  border-radius: 28px;
}

/* tower */
.tower{
  width: var(--tower-w);
  height: 80px;
  background: var(--grey);
  border-radius: 40px;
  position: relative;
}
.tower.blue{
  background: var(--dark);
}
/* tower caps */
.cap{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background: var(--dark);
  border-radius: 16px;
  z-index: 10;
}
.cap-1{ width:15px; height:10px; top:0; }   /* middle -tip */
.cap-2{ width: 15px; height:5px; top:-5px; }  /* top cap - 10px above cap 1 */
.cap-3{ width:20px; height:8px; top:0px; }   /* 10px below cap 1 */
.cap-4{width: 5px;height: 8px;top: -10px;background: var(--grey);z-index: 1;}
/* heights */
.h500{ height:50px; }
.h420{ height:30px; }

/* colors */
.grey{ background: var(--grey); }
.dark { background: var(--dark); }

.verify-message{
  color:var(--background-color-grey);
  font-size: 14px;
  font-family: var(--primary-font);
  position:absolute;
  left:0;
  right: 0;
  bottom: 40px;
}
/* animations */
@keyframes floatBars{
  0%   { transform: translateY(0); }
  25%  { transform: translateY(calc(var(--amp) * -0.7)); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(calc(var(--amp) * 0.7)); }
  100% { transform: translateY(0); }
}

@keyframes birdFloat{
  0%   { transform: translateY(0); }
  25%  { transform: translateY(calc(var(--bird-amp) * -1)); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(var(--bird-amp)); }
  100% { transform: translateY(0); }
}

@keyframes breathe{
  0%,100%{ opacity:.85; }
  50%{ opacity:1; }
}
body{
  font-family: var(--primary-font);
  color:var(--primary-color);
  font-size: 14px;
}
body.lite-bg{
  background-color: var(--primary-lite-color);
}
body:not(.print-true,.lite-bg){
  background-color: var(--main-background-color);
}
a{
  color:var(--accent-color-blue);
}
.print-only{
  display: none!important;
}
.login-logo{
	height: 50px;
}
input{
	background-color: var(--background-color-grey);
	color:var(--primary-font);
	padding: 10px;
	border: none;
	border-radius: 10px;
	box-sizing: border-box;
	font-family: var(--primary-font);
}
input::-webkit-date-and-time-value {
    text-align: left;
}
textarea{
  background-color: var(--background-color-grey);
  color:var(--primary-font);
  padding: 10px;
  border: none;
  border-radius: 10px;
  box-sizing: border-box;
  font-family: var(--primary-font);
  resize: vertical;
  height: 275px;
}
input.with-border{
  border:1px solid var(--border-color);
}
input::placeholder,option.placeholder {
  color:var(--underline-color);
	font-family: var(--primary-font);
}
select{
  background-color: var(--background-color-grey);
	color:var(--primary-font);
	padding: 10px;
	border: none;
	border-radius: 10px;
	box-sizing: border-box;
	font-family: var(--primary-font);
  -webkit-appearance: none;
  cursor: pointer;
}
select.dark{
  background-color: var(--primary-color);
  color:var(--secondary-color);
}
 label b{
  color:var(--underline-color);
  font-weight: bold;
  padding-left: 10px;
  padding-right: 5px;
}
.application-form{
  min-width: 320px;
}
.application-form svg.flip{
  cursor: pointer;
  transform: rotate(180deg);
  animation: all 0.2s ease-out;
  -webkit-animation: all 0.2s ease-out;
  -moz-animation: all 0.2s ease-out;
}
.application-form:has(form.hide-me) svg.flip{
  cursor: pointer;
  transform: rotate(0deg);
}
ul.requirements{
  padding-left: 15px;
}
.application-form hr{
  border-color: var(--primary-lite-color);
  border-radius: 10px;
}
.application-form hr:last-child {
  display: none;
}
.trm-ack{
  width: 120px!important;
  text-align: center;
  border:2px solid var(--accent-color-blue)!important;
}
.trm-ack.attention{
  background-color: var(--error-color)!important;
}
.expand-button{
  background-color: transparent;
	color:var(--primary-color);
	border: none;
	box-sizing: border-box;
	font-family: var(--primary-font);
	cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  font-weight: 600;
}
.expand-button.on::before{
  content: attr(data-on);
}
.expand-button:not(.on)::before{
  content: attr(data-off);
}
.ll-button{
  background-color: var(--secondary-color);
	color:var(--primary-color);
	padding: 10px;
	border-radius: 10px;
	border: none;
	box-sizing: border-box;
	font-family: var(--primary-font);
	cursor: pointer;
  font-size: 13px;
  text-transform: capitalize;
}
.ll-button.dark,.ll-button.dark.selected{
  background-color: var(--primary-color);
  color:var(--secondary-color);
}
.ll-button.dark.view-type:not(.selected){
  background-color: var(--secondary-color);
	color:var(--primary-color);
}
.ll-button.gold{
  background-color: var(--accent-color-gold);
  color:var(--secondary-color);
}
.ll-button.gold:hover{
  background-color: var(--accent-color-gold-70);
}
.ll-button.cancel{
  background-color: var(--error-color);
  color:var(--secondary-color);
}
.ll-button.dark:hover{
  background-color: var(--accent-color-blue);
}
.insurance-table tr:hover .ll-button{
  background-color: transparent;
}
.nested-link:hover .ll-button{
  font-weight: 600;
}
.not-employed{
  box-sizing: border-box;
  padding:5px 10px;
  border: 1px solid var(--accent-color-blue);
  border-radius: 10px;
}
.message-box{
  border-radius: 10px;
  padding: 10px;
	box-sizing: border-box;
}
.border-box{
  box-sizing: border-box;
}
.border-bottom{
  border-bottom:1px solid var(--accent-color-blue-20);
}
.with-border-left{
  border-left:1px solid var(--accent-color-blue-20);
}
.client-portal-grid{
  background-color: var(--main-background-color);
}
.page-heading{
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  margin-left:5px;
}
.page-heading span{
	color: var(--accent-color-blue);
}
.page-heading.no-margin-left{
  margin-left:0;
}
h3.secondary-header{
	font-family: var(--accent-font);
	color:var(--secondary-color);
  	font-weight: 100;
  	font-style: italic;
	margin:25px!important;
}
.letter-head{
  margin:25px 0px;
}
.letter-head img{
  height: 50px;
}
.letter-head .page-heading{
  font-size: 26px;
  font-weight: 300;
}
.letter-head .page-heading span{
    font-size: 12px;
    color:var(--accent-color-blue);
}
.lite-grey{
  color:var(--accent-color-grey);
}
.italic{
  font-style: italic;
}
.message{
  font-family: var(--primary-font);
  color: var(--primary-color);
}
.message.lite{
  color: var(--secondary-color);
}
.message a{
  color: var(--accent-color-lite);
}
.tooltip div{
  display: none;
  position: absolute;
  background-color: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 8px -8px #000000; 
  box-shadow:0px 3px 8px -8px #000000;
  padding: 5px;
  font-family: var(--primary-font);
  width: 300px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  font-size: 12px;
}
.tooltip{
  position: relative;
}
.tooltip div strong,.tooltip div b{
  display: block;
  font-size: 14px;
  text-transform: capitalize;
  font-weight: 600;
  color:var(--primary-color);
  margin:5px 0px;
}
.tooltip:hover div{
  display: inline-block;
  cursor:help;
}
.with-underline{
  border-bottom: 1px solid var(--underline-color);
  padding-bottom: 5px;
}
.card .with-underline{
  border-bottom: 1px solid var(--accent-color-blue-70);
}
.card-table .with-underline{
  border-bottom: 1px solid var(--border-color);
}
.with-border-top{ 
  border-top: 1px solid var(--underline-color);
  padding-top: 5px;
}
.gold-gradient-underline{
  padding-bottom:2px;
  background: /* gradient can be an image */
    linear-gradient(
      to right, 
      var(--accent-color-gold), 
      var(--accent-color-lite)
    )
    left 
    bottom
    #fff    
    no-repeat; 
  background-size:100% 2px ;/* if linear-gradient, we need to resize it */
}
.card-heading{
  font-size: 14px;
  text-transform: capitalize;
  font-weight: 600;
  margin:0;
}
.card-heading.no-caps{
  text-transform: lowercase;
}
.card-heading span{
  font-size: 11px;
}
.card-heading b{
  color:var(--accent-color-grey)
}
.metric-card-heading{
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 100;
}
.table-headings{
  font-size: 14px;
  text-transform: capitalize;
  font-weight: 600;
}
.col-3 .widget{
  max-width: calc((100vw/3) - 110px);
}
.widget .body-text{
  height: 225px;
  overflow: auto;
}
.definition-text{
  font-size: 12px;
  color:var(--accent-color-grey);
}
.tags > div,.tag{
  border-radius: 20px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 5px 20px;
  min-width: 50px;
  font-size: 10px;
  text-align: center;
  text-transform: capitalize;
   overflow: hidden;
  word-break: inherit;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tag.new-doc{
    background-color: var(--valid-color);
    border-color: var(--valid-color);
    color: #fff;
}
.tag{
  border: 1px solid var(--border-color);
}
.tags > div:not(.flex-spacer){
  background-color: var(--secondary-color);
  border: 1px solid var(--primary-color);
  min-width: 75px;
}
.info > ul{
  padding-left: 12.5px;
}
.info table > *{
  text-align: left;
}
.report-item-table{
  border-collapse: collapse;
}
.report-item-table tr th,.report-item-table tr td{
  text-align: left;
}
.report-item-table tr td{
  border-bottom: 1px solid var(--border-color);
}
.item-condition.D{
  color: var(--accent-color-gold);
}
.item-condition.W,.item-condition.T{
  color:var(--error-color);
}
.item-condition.DE{
  color:var(--accent-color-grey);
}
.body-text{
  font-family: var(--primary-font);
  color:var(--font-color-dark);
  font-size: 14px;
}
.opt-in{
  font-weight: 600;
  font-size: 11px;
  color: var(--valid-color);
  text-transform: lowercase;
}
.opt-out{
  font-weight: 600;
  font-size: 11px;
  color: var(--error-color);
  text-transform: lowercase;
}
.items{
  margin-bottom: 10px;
  position: relative;
}
.items > div{
  border-radius: 10px;
  background-color: var(--secondary-color);
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 5px;
  -webkit-box-shadow: 0px 3px 8px -8px #000000; 
  box-shadow:0px 3px 8px -8px #000000;
}
.items > div span,.notification span{
  font-size: 11px;
  color:var(--accent-color-blue);
}
.items.clickable > div{
  cursor: pointer;
}
.items.clickable > div:hover{
  background-color: var(--accent-color-blue-70);
}
.status-container{
	box-sizing: border-box;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--border-color);
}
.card{
  border-radius: 10px;
  background-color: var(--secondary-color);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  padding: 25px;
  -webkit-box-shadow: 0px 3px 8px -8px #000000;
  box-shadow: 0px 3px 8px -8px #000000;
  height: auto;
  margin-bottom: auto;
}
.capitalized{
  text-transform: capitalize;
}
.card.property{
  max-width: 350px;
}
.card.force-width-350{
  min-width: unset;
  width: 350px;
}
.card.with-colored-header{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card.pad-5{
  padding: 5px!important;
}
.disabled{
  pointer-events: none;
  opacity: 0.1;
}
.gold-border-left{
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
  border-image: 
    linear-gradient(
      to bottom, 
      var(--accent-color-gold), 
      var(--accent-color-lite)
    ) 1 100%;
  border-right: none;
}
.green-border-left{
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
  border-image: 
    linear-gradient(
      to bottom, 
      var(--valid-color), 
      var(--valid-color-70)
    ) 1 100%;
  border-right: none;
}
.red-border-left{
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
  border-image: 
    linear-gradient(
      to bottom, 
      var(--error-color), 
      var(--error-color-70)
    ) 1 100%;
  border-right: none;
}
.card-table{
  border-collapse: collapse;
}
.card-table th{
  text-align: left;
  border-bottom: 1px solid var(--accent-color-blue-70);
  padding: 10px;
}
.card-table tr td{
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
  padding: 10px;
}
.card-table tr.has-future td{
  border-bottom: none;
}
.card-table tr td.no-width{
  max-width: unset;
}
.nowrap{
  white-space: nowrap;
}
.nowrap-ellipsis{
  overflow: hidden;
  word-break: inherit;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 170px;
}
.card-table.tr-mxw-150 tr td{
  max-width: 150px;
}
.card-table.underlined-rows tr td{
  border-bottom: 1px solid var(--border-color);
}
.card-table.padded-rows tr td{
  padding: 10px 0px;
}
.card-table.card-row th{
  padding: 10px;
}
.card-table.card-row td{
  background-color: #fff;
  color:var(--accent-color-grey);
  padding: 10px;
}
.card-table.card-row{
  border-collapse: unset;
  border-spacing: 0px 10px;
}
.card-table.card-row td:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.card-table.card-row td:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.dynamic-height{
  height: calc(50vh - 120px);
  overflow: auto;
}
.selectable{
  cursor: pointer;
}
.selectable:hover > *{
  background-color: var(--accent-color-blue-70);
}
.control-option.selected{
  background-color: var(--accent-color-blue-70);
  fill:#fff;
  border-radius: 50%;
  padding: 5px;
}
.link-container{
  cursor: pointer;
  border-radius: 10px;
}
.link-container:hover{
  background-color: var(--accent-color-blue-70);
}
.insurance-table tr td:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.insurance-table tr td:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.insurance-table tr.selected td{
  background-color: var(--accent-color-blue);
  color:#fff;
  border-bottom: 2px;
  border-image: 
    linear-gradient(
      to bottom, 
      var(--accent-color-gold), 
      var(--accent-color-lite)
    ) 1 100%;
}
#insurance-details > div{
  min-width: 350px;
}
.warning-text{
  font-weight: 600;
  color:var(--error-color);
}
.warning-text::after{
    content: "\26A0";
    font-weight: 300;
    margin-left: 10px;
}
.min-width-750{
  min-width: 750px;
}
.valid{
  color: var(--valid-color);
}
.in-valid{
  color: var(--error-color);
}
.user-contact svg,svg.success{
  fill: var(--valid-color)!important;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
.loader {
  border-radius: 50%!important;
  display: inline-block;
  position: relative;
  border-color: var(--accent-color-lite) var(--border-color) var(--accent-color-blue) var(--accent-color-blue-70)!important;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  background-color: transparent!important;
}
.loader.small{
    width: 20px;
    height: 20px;
    border: 2.5px solid;
}
.loader.med{
    width: 50px;
    height: 50px;
    border: 10px solid;
}
.loader.big{
    width: 150px;
    height: 150px;
    border: 10px solid;
}
/*bar */
.bar-loader {
  width: 100%;
  height: 22px;
  border-radius: 20px;
  color: var(--accent-color-blue);
  border: 2px solid;
  position: relative;
}
.bar-loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: var(--accent-color-blue-70);
  animation: l6 10s infinite;
}
@keyframes l6 {
    100% {inset:0}
}
.items > .loader{
  margin: 0 auto;
}
.card.col-2{
  max-width: calc(50vw - 175px);
}
.card.no-width{
  min-width: unset;
}
.card.min-width-two-hundred{
  min-width: 200px!important;
}
.card.small{
    width:250px;
}
.card.medium{
    width:350px;
}
.card .image{
  width: 35%;
  margin:10px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  background-image: url(/resources/img/buildingDefaultImage.png);
  background-size: cover;
  background-position: center;
}
.building-image{
  aspect-ratio: 1/1;
  border-radius: 10px;
  background-image: url(/resources/img/buildingDefaultImage.png);
  background-size: cover;
  background-position: center;
  width: 98%;
  height: 350px;
}
.portfolio-stats{
  min-width: 350px;
}
.property-stats > div:not(.flex-gap){
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px
}
.property-stats h6,.inspection-stats h6{
  font-weight: 300;
  font-size: 14px;
  margin: 0;
}
.property-stats strong{
  font-size: 18px;
}
.inspection-stats strong{
  font-size: 24px;
}
.print-stat{
  background-color: var(--background-color-grey);
  border-radius: 10px;
  padding: 10px;
}
.v-bar{
  height: 25px;
  border-left: 1px solid var(--accent-color-grey);
  border-right: 1px solid var(--accent-color-grey);
}
.stat{
  height: auto!important;
}
.stat p{
  margin: 0;
}
.stat strong{
  font-size: 28px;
  padding: 10px;
}
.client-content svg{
  font-family: var(--primary-font);
  fill: var(--accent-color-grey);
}
.overlay{
	display: none;
	position: fixed;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	background-color: var(--overlay);
}
.overlay .display-message{
	display: flex;
	flex-direction: column;
	width:50%;
	background:#fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50%), -50%);
	overflow: auto;
  border-radius: 10px;
   -webkit-box-shadow: 0px 3px 8px 0px #666; 
  box-shadow:0px 3px 8px 0px #666;
}
.overlay .display-message.with-side-menu{
	transform: translate(calc(-50% + 150px), -50%);
}
.overlay .form{
	display: flex;
	flex-direction: column;
	background:#fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 150px), -50%);
	overflow: auto;
  border-radius: 10px;
  padding: 0 25px;
  max-height: 80vh;
  overflow-y: auto;
}
.overlay .table{
	display: flex;
	flex-direction: column;
	background:#fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 150px), -50%);
	overflow: auto;
  border-radius: 10px;
  padding: 0 25px;
}
.overlay.image-upload-container .display-message{
  width: unset;
}
.overlay.image-upload-container .form input,.overlay.image-upload-container .form select{
  width: 100%;
}
.overlay.overlay.image-upload-container .dropzone{
  background-color: var(--border-color)!important;
  border-radius: 10px!important;
  border:none!important;
  
}
.dropzone.dz-clickable .dz-message{
  font-family: var(--primary-font)!important;
  color:var(--accent-color-grey)!important;
  font-size: 12px!important;
}
.dropzone.dz-clickable .dz-message svg{
  margin: 10px 0px;
}
.overlay .form fieldset{
  border-radius: 10px;
}
.overlay .form h3{
  font-size: 21px;
  font-weight: 300;
  margin:0;
}
.overlay .form span:not(.slider){
  text-align: right;
  cursor: pointer;
}
.overlay .form input,.overlay .form select{
	background-color: var(--border-color);
	color:var(--primary-color);
	padding: 10px;
	border-radius: 10px;
	border: none;
	width: 80%;
	height: 55px;
	box-sizing: border-box;
  text-align: left;
	font-family: var(--primary-font);
}
.overlay .form input[type="checkbox"]{
  padding: 0;
  height: unset;
  width: unset;
}
.overlay .form input::placeholder,.overlay .form select option[disabled="true"]{
  color:var(  --accent-color-blue);
	font-family: var(--primary-font);
}
.overlay .form > div,.overlay .form > form{
  padding: 25px;
  box-sizing: border-box;
}
.overlay .display-message > div{
  padding: 10px;
}
.overlay-container,.disclaimer{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color: var(--overlay);
	display: none;
	z-index: 999999;
}
.overlay-container .loader-container{
	text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.flip{
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}
.warning{
  padding: 10px;
  border: 1px solid var(--error-color);
  border-radius: 10px;
  margin: 10px 0px;
  color: var(--error-color);
}
.warning svg{
  fill: var(--error-color);
}
#alert-message h3{
  margin: 0;
  background-color: var(--accent-color-blue);
  color:var(--primary-color);
  padding: 5px 10px;
}
#alert-message h3.error{
  margin: 0;
  background-color: var(--error-color);
  color:var(--secondary-color);
}
#alert-message h3::after{
  content: '\0021';
  border: 2px solid;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
}
#alert-message h3.error::after{
  content: '\0021';
}
#alert-message p{
  padding: 20px 10px;
}
#request-submittion .close-dialog{
  position: absolute;
  top: 10px;
  right: 10px;
}
#request-submittion p.warning-true{
  color:var(--error-color);
  font-style: italic;
}
#request-submittion p svg{
  display: none;
}
#request-submittion p.warning-true svg{
  display: inline-block;
  fill:var(--error-color);
  margin-bottom: -5px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 38px;
  border-radius: 3px;
}
.switch.small{
	width: 50px;
	height: 25px;
	border-radius: 15px;
}
.switch-container input{
	width: calc(96% - 80px)!important;
}
/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--underline-color);
  -webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;
  border-radius: 3px;

}
.switch.small .slider{
  border-radius: 15px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;
  border-radius: 3px;

}
.switch.small .slider:before{
	height: 19px;
  	width: 20px;
  	left: 4px;
  	bottom: 3px;
  	border-radius: 15px;
}
input:checked + .slider {
  background: var(--valid-color);
}
.delete-contact input:checked + .slider {
  background: var(--error-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--valid-color);
}
input:checked + .slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}
.switch.small input:checked + .slider:before {
  -webkit-transform: translateX(22.5px);
  -ms-transform: translateX(22.5px);
  transform: translateX(22.5px);
}
.invisible{
  opacity: 0;
  pointer-events: none;
}
.clickable{
  cursor: pointer;
}
.no-click{
  pointer-events: none;
}
.client-content{
  container-type: inline-size;
  container-name: client-content;
}
.property-details{
  container-type: inline-size;
  container-name: property-details;
}
.resources{
  container-type: inline-size;
  container-name: resources;
}
.grid.three-col{
display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:5px;
}
.grid.two-col,.grid.two-by-two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:5px;
}
.grid.two-by-two{
  gap:0!important;
}
.grid.two-by-two > div{
  box-sizing: border-box;
  padding: 5px;
}
.grid.four-col{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:5px;
}
.property-stats.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:5px;
}
.inspection-stats.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:5px;
}
.card{
  container-type: inline-size;
  container-name: card;
}
.inspection-report{
  container-type: inline-size;
  container-name: inspection-report;
}
.two-col-container-one-third-two-thrid > div:first-child{
  max-width: 33.3%;
  min-width: unset!important;
}
.two-col-container-two-third-one-thrid > div:last-child{
  max-width: 33.3%;
  min-width: unset!important;
}
.two-col-even > div{
  max-width: 50%;
  min-width: unset!important;
  min-height: 125px;
  margin: 2.5px 0px;
}
.flex.two-col > div{
  width: 50%;
}
.card-table.client-contacts{
  min-width: 580px;
}
.auto-overflow{
  overflow: auto;
}
.user-details input,.user-details select,.user-details input,.user-details textarea{
  background-color: var(--border-color);
	padding: 10px;
	border-radius: 10px;
	border: none;
	height: 35px;
	box-sizing: border-box;
  text-align: left;
	font-family: var(--primary-font);
}
.user-details input.error,.user-details select.error,.user-details input.error{
  background-color: var(--error-color-70);
}
.delete-contact{
  border-radius: 10px;
  border: 1px solid var(--error-color);
  background-color: var(--error-color-70);
}
.user-details textarea{
  height: auto;
}
.user-details:not(.editable) input{
    background: transparent;
    border: none;
    text-align: right;
    font-family: 'DM Sans',sans-serif;
    pointer-events: none;
  }
.user-details:not(.editable) select{
    background: transparent;
    border: 1px solid var(--accent-color-blue);
    color:var(--accent-color-blue);
    padding:5px;
    font-family: 'DM Sans',sans-serif;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    text-align: center;
}
.user-details:not(.editable) #save-user-details,.user-details:not(.editable) #get-code{
  display: none;
}
.user-details:not(.editable) .tfa-setup,.user-details:not(.editable) [name="country_code"]{
  width: 35px;
  display: none;
}
.user-details.editable #edit-user-details{
  background-color: var(--error-color);
}
.user-details [name="country_code"]{
  width: 75px;
}
.user-details [name="country_code"]::placeholder {
  font-size: 12px;
}
[data-channel="totp"] #phone,[data-channel="totp"] #get-code{
    display: none!important;
}
[data-channel="sms"] #totp,[data-channel="call"] #totp{
    display: none!important;
}
.country-code-list{
  max-width: 300px;
}
.country-code-list .ui-menu-item{
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
   -webkit-justify-content: space-between;
    align-items: center;
   -webkit-align-items: center;
}
.country-code-list .ui-menu-item img{
  width: 50px;
}
.user-details.editable .tfa-selection{
  flex-direction: column!important;
}
.tabs > .tab{
  border-radius: 10px;
  background-color: #fff;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  width: 150px;
  position: relative;
}
.tab:not([data-count=""])::after{
  content: attr(data-count);
  background-color: var(--accent-color-blue);
  color: #fff;
  font-size: 10px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  right: 10px;
  height: 18.5px;
  width: 18.5px;
  line-height: 19px;
}
.tabs > .tab:hover{
  background-color: var(--accent-color-blue);
}
.tabs > .tab.selected{
  background-color: var(--primary-color);
  color: #fff;
}
.notification{
  border-left:5px solid var(--primary-color);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.notification.important{
 border-left:5px solid var(--error-color);
}
.notification a{
  color: var(--underline-color);
  font-family: var(--primary-font);
  text-transform: uppercase;
  font-weight:600;
}
.financial-reports{
  container-type: inline-size;
  container-name: financial-reports;
}
.financial-report-description{
  width: calc(100%/4 - 15px);
}
.financial-report-description p{
  font-family: var(--primary-font);
  color:var(--accent-color-grey);
  font-size: 14px;
}
.financial-report-description select,.financial-report-description button{
  height: 38px;
}
.financial-report-description button,.financial-report-description select{
  margin-top: auto;
  flex:0;
}
.news-banner{
  background-image: url('/resources/img/news-banner.png');
  padding:25px 10px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}
.news-banner strong{
  color: #fff;
  font-weight: 300;
}
.news-banner h3{
  font-family: 'Playfair Display', sans-serif;
  color:#fff;
}
.posts .post{
  cursor: pointer;
}
.posts .post:hover{
  background-color: var(--accent-color-blue-70);
  border-radius: 10px;
}
.posts .post .post-img{
  height: 75px;
  width: 75px;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  background-color: #f8f8f8;
}
.post h3{
  margin:0;
  font-family: var(--accent-font);
  font-weight: 300;
}
.post strong{
  color:var(--accent-color-grey);
  font-family: var(--accent-font);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 12px;
}
.post span{
  font-size: 12px;
  color:var(--accent-color-grey);
}
.property-setup-card .card  h4{
  margin: 0;
}
.property-setup-card .card strong{
  color:#00d54f;
}
.property-setup-card .card img{
  width: 75%;
  max-width: 375px;
}
.no-properties .property-setup-card{
  position: absolute;
  left:5%;
  right: 5%;
  top:50%;
  transform: translate(0,-50%);
  z-index: 9999;
}
.client-content:not(.no-properties) .property-setup-card .portal-logo{
    display: none;
}
.no-properties .property-setup-card .portal-logo{
    width: 150px;
}
.no-properties .property-setup-card .transparent-bg h3,.no-properties .property-setup-card .transparent-bg p,.no-properties .property-setup-card .transparent-bg strong{
    color: #fff;  
    margin-left: 0;
}
#charges .increase{
  padding: 5px;
  border-radius: 10px;
}
#charges .increase:not(.eligible),#charges .increase:not(.not-eligible){
  background: var(--valid-color-70);
}
#charges .increase.eligible{
  background: var(--accent-color-blue-70);
}
#charges .increase.not-eligible{
  background: var(--accent-color-gold-70);
}
.payments tbody tr td{
  border-bottom: 1px solid var(--border-color);
}
.document.card{
  padding: 10px !important;
}
.items .document,.items .app{
  cursor: pointer;
}
.document .file-name{
  width: 150px;
}
.seceret-container{
  position: relative;
}
.seceret-container input{
  width: 100%!important;
}
.seceret-container span{
  position: absolute;
  top:50%;
  left: 90%;
  transform: translate(-10%,-50%);
  line-height: 12px;
}
.seceret-container span.show svg{
  fill: var(--valid-color);
}

.videos > div {
  border-radius: 10px;
  background-color: var(--accent-color-grey);
  height: 175px;
  width: 300px;
  background-position: center;
  background-size: cover;
  position: relative;
}
.videos > div .video-overlay{
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.videos > div:hover .video-overlay{
  background-color: var(--primary-color-9);
}
.videos > div svg{
  fill: var(--border-color)!important;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.property-type-filter{
    border:2px solid var(--accent-color-blue);
    color:var(--accent-color-blue);
    padding: 5px 15px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
  }
  .property-type-filter.selected{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color:var(--secondary-color);
  }
.listing{
  -webkit-box-shadow: 0px 3px 8px -8px #000000;
  box-shadow: 0px 3px 8px -8px #000000;
}
.listing .listing-image {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-size: cover;
  background-position: center;
  height: 175px;
  width: 285px;
}
.listing-label,.listing-label-filter{
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 10px;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid var(--accent-color-blue);
  color: var(--accent-color-blue);
}
.listing-label-filter{
  border-radius: 10px;
}
.listing-details{
  background-color: #fff;
  border-top: 2.5px solid #333;
  border-image: linear-gradient(to right,#c39427,#f7f0b5,#c39427) 1;
  box-sizing: border-box;
  padding: 10px;
  margin-top: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.listing-details span{
  color:var(--accent-color-blue);
}
.listing-details h3{
  margin: 0;
}
.listing-label.active,.listing-label-filter.selected.active{
  background-color: var(--primary-color);
  color:var(--border-color);
  border-color: var(--primary-color);
}
.listing-label.sold,.listing-label-filter.selected.sold{
  background-color: var(--accent-color-brown);
  color:var(--border-color);
  border-color: var(--accent-color-brown);
}
.download-options{
  color:var(--accent-color-blue);
  font-weight: 600;
}
.financials-table,.dashboard-table{
  border-collapse: collapse;
}
.financials-table tr td,.financials-table tr th,.dashboard-table tr td,.dashboard-table tr th{
  padding: 10px 5px;
}
.financials-table tbody tr:not(.totals) td,.financials-table tr th{
  border-bottom: 1px solid var(--accent-color-blue-70);
}
.financials-table tbody.t-body-scroll{
  display: block;
  overflow: auto;
}
.financials-table tbody.t-body-scroll tr{
  display: table;
}
.financials-table tbody.max-height-50vh{
  max-height: 50vh;
}
 tr td.currency, tr th.currency{
    text-align: right;
}
.financials-table tr td.currency span{
  float: right;
}
.financials-table tbody tr:not(.totals) td{
  border-top: 1px solid var(--border-color);
}
.financials-table tbody tr.transaction:nth-child(2n+1) td{
  background-color: var(--accent-color-blue-20);
}
.dashboard-table tr th{
  background-color: var(--accent-color-blue-20);
  border-bottom: 2px solid var(--accent-color-gold-70);
}
.financials-table tbody tr.date-row td {
  padding: 2.5px 5px;
  color: #fff;
  background-color: var(--primary-color-9);
}
.financials-table tr.totals:first-child td{
  border-top: 2px solid #666;
}
.financials-table tr.totals td.total{
  background-color: var(--primary-color);
  color:#fff;
}
.financials-table tr td a{
  color:var(--accent-color-gold);
}
.financials-table tr td.currency[data-value^="0.00"]{
  color: transparent!important;
}
.financials-table .narrow{
  display: none;
}
.summary-section .financials-table tr td.summary-section:nth-child(1), .summary-section .financials-table tr th:nth-child(1){
  width: 15%;
}
.summary-section .financials-table tr td.summary-section:nth-child(2), .summary-section .financials-table tr th:nth-child(2){
  width: 15%;
}
.summary-section .financials-table tr td.summary-section:nth-child(3), .summary-section .financials-table tr th:nth-child(3){
  width: 40%;
}
.summary-section .financials-table tr td.summary-section:nth-child(4), .summary-section .financials-table tr th:nth-child(4){
  width: 10%;
}
.summary-section .financials-table tr td.summary-section:nth-child(5), .summary-section .financials-table tr th:nth-child(5){
  width: 10%;
}
.summary-section .financials-table tr td.summary-section:nth-child(6), .summary-section .financials-table tr th:nth-child(6){
  width: 10%;
}
.single-underline{
  border-bottom: 1px solid var(--accent-color-blue-70);
  padding: 5px 0px!important;
}
.double-underline{
  border-top: 1px solid var(--accent-color-blue-70);
  border-bottom: 1px solid var(--accent-color-blue-70);
  padding: 5px 0px!important;
}
.balance-sheet .currency{
  width: 150px;
  text-align: right;
}
.download-option,.print-format-option{
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    color:var(--underline-color);
    border:5px solid var(--underline-color);
}
.download-option.selected,.print-format-option.selected{
    background-color: var(--underline-color);
    color:#fff;
}
.download-option.selected svg,.print-format-option.selected svg{
    fill:#fff;
}
table.maintain-cell-width th,table.maintain-cell-width td{
  padding-right: 5px;
  white-space: nowrap;
}
.attention-text{
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #666;
  margin-top: 25px;
}
.full-item-details > div{
  border-bottom: 1px solid var(--border-color);
}
.report-image-container{
  height: auto;
  max-height: 350px;
  min-height: 300px;
  position: relative;
}
.image-window{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 10px;
}
.image-window >  div{
  flex: 0 0 100%; /* two images visible at a time */
}
.image-window:not(.single-image) > div{
  flex: 0 0 50%; /* two images visible at a time */
  scroll-snap-align: left;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}
.image-window.snap-center > div{
  scroll-snap-align: center!important;
}
.report-image-container figure{
  border-radius: 10px;
  background-image: url(/resources/img/buildingDefaultImage.png);
  background-color: var(--border-color);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin:0px 5px;
  position: relative;
}
.report-image-container .image-window:not(.single-image) figure{
  background-size: cover;
}
.report-image-container figure .controls{
  padding: 5px 10px;
}
.report-image-container .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7);
    border: none;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    height: 35px;
    width: 35px;
    z-index: 9999;
  }

.report-image-container .nav-btn:hover,.control-button:hover {
    background: white;
  }

.report-image-container .prev {
    left: 10px;
  }

.report-image-container .next {
  right: 10px;
}
.image-window:not(.single-image) .image-info{
  margin-top:auto;
}
.full-screen-image{
  position: fixed;
  inset:0;
  background-color: var(--primary-color-9);
  z-index: 99999;
}
.full-screen-image button{
  position: absolute;
  top:25px;
  right:25px;
}
.full-screen-image img{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.control-button{
  background: rgba(255,255,255,0.7);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  height: 35px;
  width: 35px;
}
.control-button.no-click{
  pointer-events: none;
}
.control-button.attention{
  background:rgba(230, 69, 69, 0.7);
}
.control-button.attention svg{
  fill:#fff;
}
.ui-widget-content {
  border: 1px solid var(--border-color)!important;
  background:var(--background-color-grey)!important;
  color:var(--primary-color);
}
.ui-widget-header{
  border: 1px solid var(--primary-color)!important;
  background: var(--primary-color)!important;
  color: #ffffff!important;
  font-weight: bold!important;
  font-family: var(--primary-font)!important;
}
.ui-widget {
  font-family: var(--primary-font)!important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: 1px solid var(--border-color)!important;
  color: var(--accent-color-grey)!important;
  text-align: center!important;
}
.ui-state-default:hover, .ui-widget-content .ui-state-default:hover, .ui-widget-header .ui-state-default:hover {
  border: 1px solid var(--accent-color-blue)!important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: 1px solid var(--accent-color-gold)!important;
  font-weight: bold!important;
  color: var(--primary-color-9)!important;
}
.financial-analytics .data-container{
    width: 345px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    -webkit-box-shadow: 0px 3px 8px -8px #000000;
    box-shadow: 0px 3px 8px -8px #000000;
}
.financial-analytics .data-container > div{
    box-sizing: border-box;
    padding: 10px;
}
.financial-analytics .data-container .chart{
    height: 200px;
}
.financial-analytics .data-container h3{
    text-align: center;
    font-size: 14px!important;
    text-transform: uppercase!important;
    font-weight: 300!important;
    margin:0!important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px;
    background-color: var(--primary-color);
    color:var(--secondary-color);
}
.financial-analytics .data-container hr{
    width: 100%;
    margin: 0;
    border:none;
    padding-bottom:2px;
    background: /* gradient can be an image */
    linear-gradient(
      to right, 
      var(--accent-color-gold), 
      var(--accent-color-lite)
    )
    left 
    bottom
    #fff    
    no-repeat; 
  background-size:100% 2px ;/* if linear-gradient, we need to resize it */
}
.financial-analytics .data-container .data-set-selection > div{
    box-sizing: border-box;
    width: calc(100% / 3);
    padding: 5px 0px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
}
.financial-analytics .data-container .data-set-selection > div:hover{
   background-color: var(--accent-color-blue);
}
.financial-analytics .data-container .data-set-selection > div.selected{
    background-color: var(--primary-color);
    color:var(--secondary-color);
}
.financial-analytics .data-container .grid.two-by-two > div:nth-child(1){
    border-right: 0.5px solid var(--border-color);
    border-bottom: 0.5px solid var(--border-color);
}
.financial-analytics .data-container .grid.two-by-two > div:nth-child(2){
    border-left: 0.5px solid var(--border-color);
    border-bottom: 0.5px solid var(--border-color);
}
.financial-analytics .data-container .grid.two-by-two > div:nth-child(3){
    border-right: 0.5px solid var(--border-color);
    border-top: 0.5px solid var(--border-color);
}
.financial-analytics .data-container .grid.two-by-two > div:nth-child(4){
    border-left: 0.5px solid var(--border-color);
    border-top: 0.5px solid var(--border-color);
}
.financial-analytics .data-container .charge-amount.negative,.financial-analytics .data-container .variance-amount.negative{
    color:var(--error-color);
}
.financial-analytics .data-container .charge-amount.positive,.financial-analytics .data-container .variance-amount.positive{
    color:var(--valid-color);
}
.metrics-container h3{
  font-size: 14px!important;
  text-transform: uppercase!important;
  font-weight: 300!important;
  margin:0!important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  background-color: var(--primary-color);
  color:var(--secondary-color);
}
.metrics-container hr{
    width: 100%;
    margin: 0;
    border:none;
    padding-bottom:2px;
    background: /* gradient can be an image */
    linear-gradient(
      to right, 
      var(--accent-color-gold), 
      var(--accent-color-lite)
    )
    left 
    bottom
    #fff    
    no-repeat; 
  background-size:100% 2px ;/* if linear-gradient, we need to resize it */
}
.colored-header {
  font-size: 14px!important;
  text-transform: uppercase!important;
  font-weight: 300!important;
  margin:0!important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  background-color: var(--primary-color);
  color:var(--secondary-color);
}
hr.gold-gradient{
    width: 100%;
    margin: 0;
    border:none;
    padding-bottom:2px;
    background: /* gradient can be an image */
    linear-gradient(
      to right, 
      var(--accent-color-gold), 
      var(--accent-color-lite)
    )
    left 
    bottom
    #fff    
    no-repeat; 
  background-size:100% 2px ;/* if linear-gradient, we need to resize it */
}
.financial-analytics .metrics h1{
    display: none!important;
}
.financial-analytics .metrics .title-container{
  flex-basis: 100%;
}
.financial-analytics .table-view .metrics{
    box-sizing: border-box;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    -webkit-box-shadow: 0px 3px 8px -8px #000000;
    box-shadow: 0px 3px 8px -8px #000000;
    margin-bottom: 25px;
    padding: 10px;
}
.financial-analytics .table-view.hide .metrics{
  display: none;
}
/*overide existing layouts for new portal*/
.financial-analytics .table-view .metrics > div > div.flex.dir-row{
  flex-direction: column!important;
  width: 100%;
}
.financial-analytics .metrics .dashboard-table{
  width: 100%;
}
.financial-analytics .metrics .dashboard-table tr td{
    text-align: center;
}
.financial-analytics .metrics .dashboard-table tr td.positive{
    color: var(--valid-color);    
}
.financial-analytics .metrics .dashboard-table tr td.negative{
    color: var(--error-color);
}
.nr-status-box{
  border:2px solid var(--border-color);
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  color:var(--accent-color-blue);
}
.nr-status-box .not-complete{
  color:var(--error-color);
}
.nr-status-box .not-complete svg{
  fill:var(--error-color);
}
.nr-status-box .in-progress{
  color:var(--accent-color-blue);
}
.nr-status-box .in-progress svg{
  fill:var(--accent-color-blue);
}
.nr-status-box .submitted{
  color:var(--valid-color);
}
.nr-status-box .submitted svg{
  fill:var(--valid-color);
}
.nr-status-box .filed{
  color:var(--primary-color);
}
.nr-status-box .filed svg{
  fill:var(--primary-color);
}
.lease-details .lease-stat > div:first-child{
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
}
.lease-details .lease-stat > div:last-child{
  margin-left: 30px;
  padding: 10px 0;
}

@container client-content (width > 450px){
  .financial-filters .controls input{
    width: 100px;
  }
  
}
@container client-content (width < 918px){
  .property-details.flex.dir-row{
    flex-direction: column!important;
  }
  .property-details.flex.dir-row > div{
    margin-bottom: 25px;
  }
  .two-col-container-two-third-one-thrid.flex.dir-row{
    flex-direction: column!important;
  }
  .two-col-container-two-third-one-thrid > div{
    max-width: unset!important;
  }
  .grid.four-col{
    grid-template-columns: 1fr 1fr;
  }
}
@container client-content (width < 600px){
  .financials-table{

  }
}
@container property-details (width < 500px){
  .property-stats.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
  }
}
@container card (width < 500px){
  .inner-two-col.flex.dir-row{
    flex-direction: column!important;
  }
  .inner-two-col.flex.dir-row > div{
    margin-bottom: 25px;
  }
}

@container client-content (width < 640px){
  .financials-table .wide{
    display: none;
  }
  .financials-table .date-row.narrow{
    display: table-row;
  }
  .financials-table tr:not(.date-row) .narrow{
    display: table-cell;
  }
}


@container client-content (width < 1005px){
  /*
  .two-col-container-one-third-two-thrid > div:first-child{
    max-width: unset;
  }
  .two-col-container-one-third-two-thrid.flex.dir-row{
    flex-direction: column!important;
  }
  .two-col-even{
    flex-direction: column!important;
  }
  .two-col-even.reverse-on-mobile{
    flex-direction: column-reverse!important;
    align-items: unset;
  }
  .financial-filters .controls-container{
    flex-direction: column!important;
  }
    */
}
@container inspection-report (width < 695px){
    .image-window > div {
      flex: 0 0 100%;
    }
}
@container inspection-report (width < 460px){
    .two-col > div{
      width: 100%;
    }
    .two-col{
      flex-direction: column!important;
    }
    .report-image-container{
      margin-top: 10px;
      min-height: 50vh;
    }
}
@container financial-reports (width < 1155px){
  .financial-report-description{
    width: calc(100%/3 - 15px);
  }
}
@container financial-reports (width < 865px){
  .financial-report-description{
    width: calc(100%/2 - 15px);
  }
}
@container financial-reports (width < 575px){
  .financial-report-description{
    width: unset;
  }
}
@media screen and (max-width: 1280px) {
  .overlay .form,.overlay .table {
    width: 65%;
    transform: translate(calc(-50% + 25px), -50%);
  }
}
@media screen and (max-width: 1100px) {
  .property-info-container{
    flex-direction: column-reverse!important;
  }
 
}

@media screen and (max-width: 1000px) {
  .financial-filters.ms{
    flex-direction: column!important;
    align-items: unset!important;
    -webkit-align-items:unset!important;
  }
  .financial-filters.soa{
    flex-direction: column!important;
    justify-content: center;
    -webkit-justify-content: center;
  }
  .financial-filters > div{
    margin-bottom: 10px;
  }
  .financial-filters .controls-container > label:first-child{
    flex:1;
  }
}
@media screen and (max-width: 850px) {
  .overlay .form,.overlay .table {
    width: 80%;
  }
  .portfolio-stats{
    flex-basis: 100%;
  }
  .portfolio-stats .body-text > div:last-child{
    flex-direction: row;
  }
  #last-inspection > div.flex.align-center:last-child{
    flex-direction: column!important;
    align-items: unset!important;
    -webkit-align-items:unset!important;
  }
  #insurance-expiring-soon > div.flex.align-center:last-child{
    flex-direction: column!important;
    align-items: unset!important;
    -webkit-align-items:unset!important;
  }
  #last-inspection .with-border-left.dir-col,#insurance-expiring-soon .with-border-left.dir-col{
    flex-direction: unset!important;
  }
 
}
@media screen and (max-width: 809px) {
  .two-col-even.reverse-on-mobile{
    flex-direction: column-reverse!important;
    align-items: unset!important;
    -webkit-align-items:unset!important;
  }
  .two-col-even > div{
    max-width: unset!important;
  }
  .financial-filters.ye > div:first-child{
    flex-basis: 100%;
  }
  .financial-filters.ye .controls,.financial-filters.ye .controls > *{
    flex:1;
  }
  .financial-filters.analytics > label:first-child{
    flex-basis: 100%;
  }
  .financial-filters.analytics > label{
    flex:1;
    margin-bottom: 10px;
  }
   .lease-details .lease-stat > div{
    flex-basis: 100%;
   }
}
@media screen and (max-width: 600px) {
  .controls-container svg{
    display: none;
  }
  .download-options{
    flex-basis: 100%;
  }
  .download-options > div{
    flex: 1;
  }
}
@media screen and (max-width: 500px) {
  .page-heading{
    margin-top: 50px;
  }
  .card{
    width: 100%!important;
    min-width: unset!important;
    max-width: unset!important;
  }
  .overlay{
    z-index: 999999;
  }
  .overlay .form,.overlay .table {
    transform: translate(-50%, -50%);
    width: 95%!important;
    z-index: 9999999;
    overflow-y: auto;
    max-height: 90vh;
    padding-bottom: 10px;
  }
  .overlay .form > div, .overlay .form > form {
    padding: 0px;
  }
  .overlay .form input, .overlay .form select{
    width:100%;
  }
  .overlay .form label.align-center{
      align-items: unset!important;
      -webkit-align-items: unset!important;
  }
  .overlay .form span:not(.slider) {
    text-align: left;
  }
  .property-stats > div.flex-shrink{
    flex:1!important;
    flex-basis: 100%!important;
    margin-top: 5px;
  }
  .overlay .display-message{
    transform:translate(-50%,-50%)!important;
    width: 95%;
  }
  .posts .post .post-img{
    height: 200px;
    width: 100%;
  }
  .report-filters{
    align-items: unset;
    -webkit-align-items: unset;
  }
   .report-filters label input, .report-filters label select{
    width: 100%;
   }
    .lease-details .lease-stats.flex-grow{
      flex: unset;
      align-items: unset;
      -webkit-align-items: unset;
      justify-content: space-between;
      -webkit-justify-content: space-between;
    }
  .align-center.align-start-on-mobile{
      align-items: start;
      -webkit-align-items: start; 
  }
  .align-center.no-align-on-mobile{
      align-items: unset;
      -webkit-align-items: unset; 
  }
  .grow-all-on-mobile,.grow-all-on-mobile > *{
    flex:1;
  }
    .grid.four-col{
      grid-template-columns: 1fr;
    }
    .financial-filters .controls-container > *{
      margin-top: 10px;
    }
    .financial-filters.ye .ll-button{
      flex-basis: 100%;
      margin-top:10px;
    }
    .portfolio-stats .body-text > div:last-child{
      flex-direction: col;
    }
    .widget .body-text{
      height: unset;
      max-height: 225px;
      overflow: auto;
    }
    .property-controls, .property-controls > .align-center{
      align-items: unset;
      -webkit-align-items: unset;
    }
    .property-controls .controls-container > label{
      flex:1;
    }
    .property-controls input{
      width:100%;
    }
    .financial-filters .controls input{
      width:100%;
    }
    .property-controls svg,.controls-container svg{
      flex:0;
      display: none;
    }
    .property.card .card-heading{
      text-align: center;
    }
    .tooltip{
      position: unset;
    }
    .tooltip p{
      width: 80vw;
      position: fixed;
      top:25px;
    }
    .card-table.tenants tr th:last-child,.card-table.tenants tr td:last-child{
      display: none;
    }
    .card-table.payments tr th:nth-child(2),
    .card-table.payments tr td:nth-child(2){
      display: none;
    }
    .two-col-container-one-third-two-thrid > div:first-child{
      max-width: unset!important;
    }
    .download-options svg{
      display: none;
    }
    .financial-analytics .table-view .metrics > div.dir-col{
      flex-direction: unset!important;
    }
    .financial-analytics .table-view .metrics.flex-wrap{
      flex-wrap: nowrap;
    }
    .tag{
      max-width: 100px;
    }
    .inspection-stats h6{
      word-spacing: 20px;
    }
    .items .property svg{
      display: none;
    }
    .videos > div{
      width: 100%;
    }
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select:focus,
    textarea {
      font-size: 16px!important;
    }
}
@media print{
  .no-print{
    display: none!important;
  }
  .print-only{
    display: inherit!important;
  }
  .financials-table tr th{
    background-color: var(--primary-color);
    color:#fff;
  }
  .financials-table tr.totals td{
    overflow: auto;
    white-space: nowrap;
  }
}