/*
 *  CSS is designed with the presumption of
 *               Mobile First
 *  So first we have the mobile css classes,
 *  and then we have the desktop css classes
 *  that are wrapped in css media queries.
 *
 */

/*
 The keepfactor logo in the navbar
*/

.keepfactor-logo { height: auto; /* margin-top: 7px; */}
.keepfactor-logo > img { margin-left: 7px; }

@media only screen and (min-width: 768px) {
  /* .keepfactor-logo {margin-top: 12px;} */
  .keepfactor-logo > img { margin-left: 0px; }
}

/*
  Menu for the potfolios, buildings and tenants
*/
.main-menu-wrapper {
  margin-top: 42px;
  z-index: 999;
}

.main-menu {
  margin-top: 10px;
  padding-top: 10px;
  font-size: 12px;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
}

.main-menu > div {
  border-bottom: 5px solid #bcbcbc;
  width: 100%;
}

.main-menu > div.active {
  border-bottom: 5px solid #344723;
}

.main-menu a {
  color: #333333;
  text-decoration: none;
}

.main-menu a:hover {
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  .main-menu-wrapper {
    margin-top: 51px;
  }

  /*
  .main-menu {
    padding-top: 20px;
  }
  */
}

@media only screen and (min-width: 992px) and (max-width: 1200px)  {
  .main-menu {
    flex-direction: column !important;
    /* padding-top: 14px; */
  }
}

@media only screen and (min-width: 1200px) {
    .main-menu {
        /* padding-top: 14px; */
    }
}



/*
  The scroll-spy menu for the current page sections
*/
.scroll-spy-wrapper {
  margin-top: 82px;
  background-color: #ffffff;
  z-index: 998;
  overflow-x: auto;
}

.scroll-spy {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  font-size: 12px;
  border-bottom: 5px solid #bcbcbc;
  white-space: nowrap;
}

.scroll-spy > li { margin-bottom: -5px; border-bottom: 5px solid #bcbcbc;}
.scroll-spy > li > a { padding: 0px 5px; color: #333333; text-decoration: none;}
.scroll-spy > li > a:hover { color: #567d38; text-decoration: none; background-color: unset;}
.scroll-spy > li > a:focus { color: #567d38; text-decoration: none; background-color: unset;}
/* .scroll-spy > li > a.active { padding-bottom: 2px; border-bottom: 5px solid #344723; } */
.scroll-spy > li.active { margin-bottom: -5px; border-bottom: 5px solid #344723; }

@media only screen and (min-width: 768px) {
  .scroll-spy-wrapper {
    margin-top: 94px;
  }

  .scroll-spy { /* padding-top: 20px; */ }
}

@media only screen and (min-width: 992px) {
  .scroll-spy-wrapper {
    margin-top: 61px;
  }
}

/*
  Side menu with different widgets
*/
.side-menu {
    padding-right: 16px;
    position: relative;
    font-size: 12px;
    /* padding-top: 30px; */
}

.side-menu:hover {
  overflow-x: auto;
}

/* .side-menu:not( :hover ) {
  overflow-x: hidden;
} */

@media only screen and (min-width: 992px) {
  .side-menu {
    position: fixed;
    height: auto;
    top: 118px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: scroll !important;
    /* scroll is aways visible, Otherwise it breaks the gradient */
  }

  .side-menu:hover {
    overflow-x: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .side-menu {
    position: fixed;
    height: auto;
    top: 70px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: scroll !important;
    /* scroll is aways visible, Otherwise it breaks the gradient */
  }
}

.side-menu > div > div {
  /* margin-top: 4px; */
  /* border-bottom: 4px solid #344723; */
  margin-bottom: 6px;

}

.side-menu .hr-grey {
  margin: 0px 20%;
  border-top: 2px solid #bcbcbc !important;
}

.side-menu .hr-green {
  margin:0px;
  margin-top: 6px;
  margin-bottom: 4px;
  border-top: 4px solid #344723 !important;
}

.side-menu .hr-black {
  margin-top: 18px;
  margin-bottom: 20px;
  border: 0;
  border-top: 4px solid #000000;
}

.side-menu-gradient {
  position: fixed;
  width: 22px;
  height: 100%;
  display: flex;
  flex-direction: row;
  left: -15px;
  padding: 0px;
  top: 0px;
  z-index: 999;
}

@media only screen and (max-width: 991px) {
    .side-menu-gradient {
        display: none;
    }
}

.side-menu-gradient > div:first-child {
  width: 12px;
  background-color: #FFFFFF;
}

.side-menu-gradient > div:last-child {
  background: rgb(255,255,255);
  background: linear-gradient(90deg, #a8a8a8 0%, #ffffff 100%);
  width: 10px;
}


/* The scrollable containers */
.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #344723 #bcbcbc;   /* KF Green, BG Color */
}
.scrollable::-webkit-scrollbar {
  width: 5px;
}
.scrollable::-webkit-scrollbar-track {
  background: #131313;    /* BG color */
}
.scrollable::-webkit-scrollbar-thumb {
  background-color: #344723;  /* KF Green */
  border-radius: 2px;
  border: 1px solid #bcbcbc; /* BG color */
}
.scrollable:hover {
  overflow-y: auto;
}
.scrollable:not( :hover ){
  overflow-y: hidden;
}


/*
  Main content
*/
.main-content { margin-top: 120px; }

@media only screen and (min-width: 768px) {
  .main-content { margin-top: 150px; }
}

@media only screen and (min-width: 992px) {
  .main-content { margin-top: 120px; }
}