html,body {
  height: 100%;
  color: #999999;
}
/*-- SHOW HIDE --*/
.landlordno{display: none !important;}
.tenantno{display: none !important;}
.applicantno{display: none !important;}

.displayLettingsno{display: none;}
.displaySalesno{display: none;}
.propertyTabsyesno, .propertyTabsnoyes{display: none;}
.tab-content > .tab-pane.propertyListLettingsyesno{display: block !important; opacity: 1 !important;}
.tab-content > .tab-pane.propertyListSalesyesno{display: none !important; opacity: 1 !important;}
.tab-content > .tab-pane.propertyListLettingsnoyes{display: none !important; opacity: 1 !important;}
.tab-content > .tab-pane.propertyListSalesnoyes{display: block !important; opacity: 1 !important;}

.hideBoth{display: none !important;}
.hideLettings{display: none !important;}
.hideSales{display: none !important;}
/*-- SHOW end --*/

/*-- SIDEBAR --*/
.sidebarWrap{
  min-height: calc(100vh);
  background-color:white;
  border-right: 1px solid #d5d5d5;
}
.sidebar{
  padding:0 16px;
  min-height: calc(100vh);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.logoWrap{
  border-bottom: 1px solid #d5d5d5;
  display: flex;
  justify-content: center;
  padding:32px 0;
  margin-bottom: 32px;
}
.logoWrap img{
  width: 100%;
}
.logo{
  max-width: 150px;
  max-height: 150px;
}
.contactDetails{
  font-size: 12px;
  margin-bottom: 16px;
}
.nav a.nav-link{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 32px;
  padding: 0;
  margin-bottom: 16px;
  color: #999999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.nav a.nav-link:hover{
  color: #000;
}
.nav .nav-link i{
  margin-right:8px;
}
/*-- SIDEBAR end--*/

/*-- TOP BAR --*/
.topBar{
  border-bottom: 1px solid #d5d5d5;
  height: 56px;
  margin: 0 -15px;
  padding: 0 24px;
  background-color:#f2f1eb;
}
.topBar h2{
  margin:0;
  color: #000;
}
.topBar a{
  color: #999999;
  font-size: 14px;
}
.topBar a:hover{
  color: #000;
  text-decoration: none;
}
.topBar a i{
  margin-right: 8px;
}

/*-- TOP BAR end--*/

/*-- MAIN CONTENT --*/
.contentWrap{
  margin: 0 -15px;
  padding: 56px;
  background-color:#f2f1eb;
  min-height: calc(100vh - 56px);
}
/*-- MAIN CONTENT end--*/

/*-- TABLE --*/
.table{
  margin-bottom: 0;
  color: #999999;
}
.table thead th{
  border: none;
  font-weight: normal;
  color: #000;
  padding: 24px 16px;
}
.table td{
  border-top:1px solid #d5d5d5;
  border-bottom: none;
  padding: 16px;
}
.table td ul{
  margin: -16px;
  padding: 0;
}
.table td li{
  margin: 0;
  padding: 16px;
  border-top:1px solid #d5d5d5;
  list-style: none;
}
.table td li:first-child{
  border-top:none;
}
.table.documentsTable td li::before {
  font-family: "Font Awesome 5 Pro"; font-weight: light; font-size: 18px; content: "\f0ed"; color: #999999; margin-right: 8px;
}
/*-- TABLE end--*/

/*-- TABS --*/
.nav-tabs{
  border-bottom: 1px solid #d5d5d5;
  margin-bottom: 24px;
}
.nav-tabs a.nav-link{
  height:48px;
  padding: 0 24px;
  margin-bottom: 0;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  border-color: #d5d5d5;
}
/*-- TABS end--*/

/*-- PROPERTY LOOP --*/
.propertyImgWrap{
  background-position: center;
  background-size: cover;
}
.property-img{
  width: 100%;
}
.propertyImgStatus{
  position: absolute;
  top: 16px;
  right:16px;
}
a.card{
  text-decoration: none;
}
.propertyAdress{
  color: #999999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
}
/*-- PROPERTY LOOP end--*/

/*-- CARD --*/
.card{
  margin-bottom: 32px;
  border: 1px solid #d5d5d5;
}
.card-body{
  padding: 16px;
}
.cardBadge{
  position: absolute;
  top: 16px;
  right:16px;
}
/*-- CARD end--*/

/*-- Date picker --*/
.statementDatePicker{
  display: flex;
  flex-direction: row;
  border-top: 1px solid #d5d5d5;
  align-items: center;
  padding: 16px;
}
.statementDatePicker table td:last-child{
  display:none;
}
.statementDatePicker table td{
  border-top: none;
  padding: 0;
}
.statementDatePicker table{
  width:150px;
  margin-right: 8px;
}
.rentStatementDatePicker{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.rentStatementDatePicker input{
  margin-right: 8px;
}
.rentStatementDatePicker a{
  display: none;
}

/*-- Date picker end--*/

/*-- PORTFOLIO --*/
.protfolioDetails{
  padding: 24px 24px 24px 0;
}
.portfolioRef{
  margin-bottom: 16px;
}
/*-- PORTFOLIO end--*/

/*-- STEPS --*/

/* Cart steps  */
.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
  content: counter(stepNum);
  font-family: inherit;
  font-weight: 700;
}
.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
  background-color: #d5d5d5;
}

.multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: -22px 0 32px;
}
.multi-steps > li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color: #000000;
}
/*-- The content needs to be preceeded by back slash that is stripped out by CMS --*/
.multi-steps > li:before {
  content: "\f00c";
  content: "\2713;";
  content: "\10003";
  content: "\10004";
  content: "\2713";
  display: block;
  margin: 0 auto 4px;
  background-color: #fff;
  width: 36px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #000000;
  border-radius: 50%;
}
.multi-steps > li:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: #000000;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: 18px;
}
.multi-steps > li:last-child:after {
  display: none;
}
.multi-steps > li.is-active:before {
  background-color: #fff;
}
.multi-steps > li.is-active ~ li {
  color: #808080;
}
.multi-steps > li.is-active ~ li:before {
  background-color: #d5d5d5;;
  border-color: #d5d5d5;;
}
/* end  Cart steps  */
/*-- STEPS end--*/

/*-- STAPS SHOW HIDE --*/
.showStep1Awaiting, .showStep1Coming, .showStep1New{display: block !important;}
.showStep2For, .showStep2Price, .showStep2Exclusive, .showStep2To, .showStep2Price, .showStep2Exclusive, .showStep2Short{display: block !important;}
.showStep3Under{display: block !important;}
.showStep4Sold, .showStep4Let, .showStep4Managed, .showStep4Withdrawn, .showStep4Property{display: block !important;}
/*-- STAPS SHOW HIDE --*/

/*-- BOOK VIEWING --*/
.calLeft i, .calRight i{
  font-size: 20px;
}
a.calLeft:hover, a.calRight:hover{
  background-color: #f2f1eb;
  text-decoration: none;
}
.calLeft{
  position: absolute;
  left: -1px;
  top: 0;
  background: white;
  border: 1px solid #d5d5d5;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  width: 28px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calRight{
  position: absolute;
  right: -1px;
  top: 0;
  background: white;
  border: 1px solid #d5d5d5;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  width: 28px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bookViewingWrap table{
  border-bottom: 1px solid #d5d5d5;
}
.bookViewingWrap table{
  width: 100%;
}
.bookViewingWrap > div{
  padding: 0 16px;
  margin: -16px 0;
}
.bookViewingWrap > div a{
  display: none;
}
.bookViewingWrap table tr td{
  padding: 4px;
  height: 32px;
  text-align: center;
  border-right: 1px solid #d5d5d5;
  font-size: 12px;
}
.bookViewingWrap table tr td:last-child{
  border-right: 0;
}

.bookViewingWrap table tr td b{
  font-size: 12px;
  color: #999999;
  font-weight: normal;
}
.bookViewingWrap table tr:first-child td b{
  font-size: 16px;
  font-weight: normal;
  color: #999999;
  display: block;
  margin: 16px 0;
}
.bookViewingWrap table tr:first-child td{
  border-bottom: 1px solid #d5d5d5;
  border-right: 0px;
}
.bookViewingWrap table tr:nth-child(2) td{
  PADDING-top: 16px;
}
.bookViewingWrap table tr:first-child td.today b{
  font-weight: bold;
}

/* Customize the label (the container) */
.viewing-slots .container {
 display: block;
 position: relative;
 margin-bottom: 0;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 padding: 0;
}

/* Hide the browser's default checkbox */
.bookViewingWrap .container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

/* Create a custom checkbox */
.bookViewingWrap .checkmark {
 height: 28px;
 text-align: center;
 font-size: 16px;
 border-radius: 99px;
 max-width: 100px;
 background-color:#f2f1eb;
 align-items: center;
 display: flex;
 padding: 0 8px;
 margin: auto;
 justify-content: center;
 position: relative;
 cursor: pointer;
}
.bookViewingWrap tr:nth-child(2) .checkmark {
 font-size: 14px;
 margin-bottom: 8px;
}
.bookViewingWrap .container .available {
 display:block;
 font-style: 14px;
 color: #999;
}
.bookViewingWrap .container .booked {
 display:none;
 font-weight: bold;
}

/* On mouse-over, add a grey background color */
.bookViewingWrap .container:hover input ~ .checkmark {
 background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.bookViewingWrap .container input:checked ~ .checkmark {
 background-color: #2196F3;
 color: #fff;
}
.bookViewingWrap .container input:checked ~ .checkmark .available {
 display:none;
}
.bookViewingWrap .container input:checked ~ .checkmark .booked {
 display:block;
}

/* Create the checkmark/indicator (hidden when not checked) */
.bookViewingWrap .checkmark:after {
 content: "";
 position: absolute;
 display: none;
}



/*-- BOOK VIEWING end --*/

/*-- Badges --*/
.badgePending{
  background: transparent;
  border: 1px solid #d5d5d5;
}
.badgeAccepted{
  background: #4ecb3a;
  color: #fff;
}
.badgeRejected{
  background: red;
  color: #fff;
}
/*-- Badges end--*/

/*-- Buttons --*/
.dotMenu{
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  width: 35px;
}
.dotMenu i{
  font-size: 8px;
}
.dotMenu:hover, .dotMenu:focus{
  text-decoration: none;
}
.btn-primary{
  border: none;
}
/*-- Buttons end--*/

/*-- TITLES --*/
h1{
  font-size: 24px;
  font-weight: normal;
}
h2{
  font-size: 18px;
  font-weight: normal;
}
/*-- TITLES end--*/

/*-- HELPER CLASSES --*/
.relative{
  position: relative;
}
.green{
  color: green;
}
.white{
  color: white;
}
.orange{
  color: orange;
}
.marRight8{
  margin-right: 8px;
}
/*-- HELPER CLASSES end--*/

/*-- PROPERTY DETAILS --*/
.propertyDetailsTop{
  padding: 24px 24px 24px 0;
}
.propertyDetailsTop .propertyImgStatus{
  right:32px;
}
.propertyDetailsTop .propertyAdress{
  font-size: 16px;
}
.propertyDetailsTop .propertyAdress i{
  font-size: 18px;
}
.propetyIconsWrap{
  margin-bottom: -16px;
  margin-top: 24px;
}
.propetyIconsWrap .col-lg-4{
  margin-bottom: 16px;
}
.propertyDetails h1, .propertyDetails h2, .propertyDetails h3, .propertyDetails h4, .propertyDetails h5{
  color: #000;
  font-size: 18px;
  margin: 0 0 16px;
  font-weight: normal;
}
.propertyDetails p{
  margin: 0 0 16px;
}
/*-- PROPERTY DETAILS end--*/

/*-- DASHBOARD --*/
.dashIcon{
  position: absolute;
  top:24px;
  right:-46px;
  font-size: 32px;
  border-radius: 999px;
  width: 72px;
  height: 72px;
  color: #fff;
  background-color:#c4c9dc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashCircleIcon .dashTitle{
  margin-top: 4px;
}
.dashCircleIcon{
  border-radius: 999px;
  width: 170px;
  height: 170px;
  color: #fff;
  background-color:#c4c9dc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
}
.dashCircle{
  border-radius: 999px;
  width: 170px;
  height: 170px;
  border: 2px solid #d5d5d5;
  text-align: center;
  font-size: 90px;
  color: #999999;
  position: relative;
  line-height: 150px;
  background-color:#f2f1eb;
}
.number{
  border-radius: 999px;
  width: 50px;
  height: 50px;
  border: 1px solid #d5d5d5;
  background-color:#f2f1eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
a.dashCard{
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: center;
  color: #999999;
}
a.dashCardSplit{
  display: flex;
  flex-direction: column;
  height: 400px;
  color: #999999;
}
a.dashCard:hover, a.dashCardSplit:hover, a.dashCard:hover .dashCircle, a.dashCardSplit:hover .dashCircle{
  color: #000;
}
.dashCardTop{
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 0;
}
.dashCircleIcon i{
  font-size: 80px;
  color: #fff;
}
.dashCardBot{
  display: flex;
  flex-direction: row;
  padding: 0 16px 16px;
}
.dashCardBot > div{
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 16px 0;
  font-size: 20px;
}
.dashTitleSmall{
  font-size: 12px;
  text-align: center;
  line-height: 13px;
}
.dashTitle{
  margin-top: 16px;
  text-align: center;
}
/*-- DASHBOARD end--*/

/*-- SALES PROGRESS --*/
.progressList .card-header i{
  margin-right: 8px;
}
.progressList tr:first-child td{
  border-top: 0;
}
.progressList .done i{
  color: #4ecb3a;
}
.progressList .pending{
  color: #c2c2c2;
}
/*-- SALES PROGRESS end--*/

/*-- LOG IN --*/
.loginImage{
   background-image: url("http://design1.gnomen-europe.com/media/design1.gnomen-europe.com/images/login-bg.jpg");
   background-size: cover;
}
.loginImage img{
   height:600px;
   width: 100%;
}
.contentWrapLogin{
  margin: 0 -15px;
  padding: 56px;
  background-color:#f2f1eb;
  min-height: calc(100vh);
}
.loginWrap{
  margin: auto;
  padding: 32px 32px 32px 0;
}
.loginWrap form{
  margin-bottom: 56px;
}
.loginWrap .btn{
  margin-right: 8px;
}
.loginWrap p{
  margin-bottom: 8px;
}
.carousel{
  background-color: rgba(50, 115, 220, 0.3);
}
/*-- LOG IN end--*/

/*-- VIEWING SLOTS --*/
.viewing-slots tr td{
  padding: 4px;
  height: 32px;
  text-align: center;
  border-right: 1px solid #d5d5d5;
}
.viewing-slots tr:last-child td{
  border-bottom: 1px solid #d5d5d5;
}
.viewing-slots tr td:last-child{
  border-right: 0;
}
.viewing-slots tr th{
  width: 100px;
  border-right: 1px solid #d5d5d5;
}
.viewing-slots tr th:last-child{
  border-right: 0;
}
.viewing-slots tr:first-child th{
  font-weight: normal;
  font-style: 14px;
  text-align: center;
  height: 56px;
}
.viewing-slots tr:last-child td{
  padding-bottom: 24px;
}
/* Customize the label (the container) */
.viewing-slots .container {
 display: block;
 position: relative;
 margin-bottom: 0;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 padding: 0;
}

/* Hide the browser's default checkbox */
.viewing-slots .container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

/* Create a custom checkbox */
.viewing-slots .checkmark {
 height: 28px;
 text-align: center;
 font-size: 16px;
 border-radius: 99px;
 max-width: 100px;
 background-color:#f2f1eb;
 align-items: center;
 display: flex;
 padding: 0 8px;
 margin: auto;
 justify-content: center;
 position: relative;
}
.viewing-slots tr:nth-child(2) .checkmark {
 font-size: 14px;
 margin-bottom: 8px;
}
.viewing-slots .checkmark .minute {
 font-size: 12px;
}

/* On mouse-over, add a grey background color */
.viewing-slots .container:hover input ~ .checkmark {
 background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.viewing-slots .container input:checked ~ .checkmark {
 background-color: #2196F3;
 color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.viewing-slots .checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.viewing-slots .container input:checked ~ .checkmark:after {
 display: block;
 position: absolute;
 right: 8px;
 content: "\f00c";
 font-family: "Font Awesome 5 Pro"; font-weight: 500; content: "\f00c"; color: #fff;
}
/*-- VIEWING SLOTS end--*/

/*-- TENANT PROFILE --*/
.additionalTenant h6{
  margin: 0 0 0 8px;
  color: #000000;
}
.additionalTenant h5{
  margin:8px 0 16px;
}
.card.additionalTenant{
  margin: 24px 0 0;
}
/*-- TENANT PROFILE end--*/

/*-- ALERT MESSAGE--*/
.info, .diverror{
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 3rem;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: .25rem;
}
/*-- ALERT MESSAGE end--*/

/*-- FORM PAGE--*/
.cardBodyForm{
  padding: 32px;
}
/*-- FORM PAGE end--*/

/*-- SHOW HIDE FIXFLO PAGE--*/
.showFixFlono{display: none !important;}
.hideFixFloyes{display: none !important;}
/*-- SHOW HIDE FIXFLO PAGE end--*/

/*-- SHOW HIDE VIEWINGS SLOTS & SALES PROGRESS-*/
.showWhenLandlordDoingViewingnone{display: none !important;}
.hideWhenLandlordDoingViewings{display: none !important;}
.hideWhenLandlordDoingViewingsnone{display: block !important;}
/*-- SHOW HIDE VIEWINGS SLOTS & SALES PROGRESS end--*/

/*-- SHOW HIDE SALES LET PROPERTIES--*/
.displayVendorno{display: none !important;}
.displayLandlordno{display: none !important;}
.displayNoProperties0{display: block !important;}
/*-- SHOW HIDE SALES LET PROPERTIES end--*/

/*-- SHOW HIDE COMMERCIAL--*/
.hideCommercial2{display: none !important;}
/*-- SHOW HIDE COMMERCIAL end--*/

/*-- RESPONSIVE --*/
@media (max-width: 1199.98px) {
  .contentWrap, .contentWrapLogin{
    padding: 24px;
  }
  .viewing-slots .container input:checked ~ .checkmark:after{
    display: none;
  }
  .multi-steps {
    margin: 0 0 32px;
  }
  /* Show the checkmark when checked */
  .bookViewingWrap .container input:checked ~ .checkmark:after {
   display: block;
   content: "\f00c";
   font-family: "Font Awesome 5 Pro"; font-weight: 500; content: "\f00c"; color: #fff;
  }
  .bookViewingWrap .container .available, .bookViewingWrap .container .booked, .bookViewingWrap .notAvailable{
    display: none;
  }
  .bookViewingWrap .container input:checked ~ .checkmark .booked {
   display:none;
  }
}
@media (max-width: 991.98px) {
  .loginImage img{
     height:200px;
  }
  .loginWrap{
    margin: auto;
    padding: 32px;
  }
  .protfolioDetails{
    padding: 24px;
  }
}

@media (max-width: 575.98px) {
  .logoWrap, .nav .nav-link span, .contactDetails {
    display: none;
  }
  .sidebar{
    padding:24px 0;
    align-items: center;
  }
  .nav .nav-link i{
    margin-right:0;
  }
  .contentWrap, .contentWrapLogin{
    padding: 0;
    margin: -1px 0 -1px -1px;
    background: transparent;
  }
  .card{
    border-radius: 0;
    margin-bottom: -1px;
  }
  .topBar a i{
    margin-right: 4px;
  }
  .topBar{
    padding: 0 16px;
    margin: 0;
  }
  .rightBody{
    padding: 0;
    overflow-x: hidden;
  }
  .propertyDetailsTop{
    padding: 24px;
  }
  .multi-steps {
    margin: 32px 0 32px;
  }
}
/*-- RESPONSIVE end--*/

/*-- COULORS --*/
.main-color, .btn-link, .btn-link:hover, .nav a.nav-link.active, .nav a.nav-link.active:hover, .nav .nav-link.active i, a, a:hover, .bookViewingWrap table tr:first-child td.today b{
  color: #3db6bf;

}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .viewing-slots tr:nth-child(2) .container input:checked ~ .checkmark{
  background: #3db6bf !important;
}
.multi-steps > li.is-active:before {
  border-color: #3db6bf !important;
}
/*-- COULORS end--*/