@charset "utf-8";
:root{ --doc-height: 100%;}

/* -- Footer Navbar styles setup -- */
.mobile-nav {  height: 56px; width: 100%; display: flex; justify-content: space-around;}
.bloc-icon { display: flex; justify-content: center; align-items: center; flex: 1; }
.bloc-icon img { width: 20px; filter: brightness(0) invert(1);}
.bloc-icon.active{position: relative; }
.bloc-icon.active::before{content: ''; position: absolute; width: 80%; height: 3px; border-radius: 0 0 2px 2px; top: 0px;}
.bloc-icon i{/*color: #cee7ff;*/}
.bloc-icon.active i{/*color: var(--bs-white);*/ transform: scale(1.3);}
.mobile-nav .hb_menu, .mobile-nav .hb_close{background-color: #cee7ff;}
.mobile-nav .active .hb_menu, .mobile-nav .active .hb_close{background-color: var(--bs-white);}
@media screen and (min-width: 767px)  {.mobile-nav {/* display: none;*/ }}

/* -- Header Navbar styles setup -- */
.navbar .navbar-collapse{max-height: calc(100vh - 112px); overflow-y: overlay; position: relative;} /*position: relative; -> here very very important for dropdown class functionality, overscroll-behavior-y: contain; not works in browsesr view of actual device simply we dont need overscroll-behavior-y property here - #imrudeen */
.navbar .dropdown-toggle::after{content: none;}
.navbar .dropdown-menu, .navbar .dropdown-menu .dropdown-menu { margin: 0; padding: 5px; }
.navbar .dropdown-menu .dropdown-menu li{}

.navbar .nav-item.dropdown > .nav-link.dropdown-toggle.show > .icon:last-child{transform: rotate(90deg);}
.navbar .nav-item.dropdown > .nav-link.dropdown-toggle.show{border-radius: 10px 10px 0 0; margin-bottom: 0; }
.navbar .nav-item .nav-link.dropdown-toggle.show + .dropdown-menu.show{border-radius: 0 0 10px 10px; /*border-color: #efefef; background-color: var(--bs-gray-500);*/}
.navbar .nav-item .nav-link.dropdown-toggle.show + .dropdown-menu.show .nav-item .nav-link{/*background-color: var(--bs-light-bg-subtle); box-shadow: var(--bs-box-shadow-inset);*/}

.navbar .navbar-brand{color: var(--bs-black); font-size: 20px; font-weight: 700;}
.navbar .navbar-brand.navbar-brand-title{font-size: 1.05rem; font-weight: 600; margin: 0; white-space: normal; padding: 0; text-align: center;}
.navbar .nav-item .nav-link{ font-size: 1.10rem; font-weight: 500; padding: 5px; margin: 5px 0 5px 0; display: flex; justify-content: space-between; align-items: center; border-radius: 10px;}
.navbar .nav-item .nav-link > .nav-link-caption{margin-right: auto; white-space: normal;}
.navbar .icon{padding: 10px; font-size: 0.75rem;}
.navbar .btn-logout{ width: 100%; font-size: 16px; font-weight: 600; padding: 5px; margin: 5px 0 5px 0; display: flex; justify-content: center; align-items: center;}

.profile{display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 10px}
.profile .profile-holder{width: 80px; height: 80px; border-radius: 50px; /*background-color: #AAAAAA;*/ display: flex; align-items: center; justify-content: center; position: relative; z-index:var(--bs-profile-holder-z-index);} /*background-color: #AAAAAA; -> dont use bg-color for theming*/
.profile .profile-edit{width: 20px; height: 20px; border-radius: 50px; background-color: #2A5F73; display: flex; align-items: center; justify-content: center; position: absolute; right: 0px; top: 0; z-index: var(--bs-profile-edit-z-index); cursor: pointer;}
.profile .profile-edit .icon{ padding: 0;}

/* --- only enable if we need desktop view too --- */
/*@media all and (min-width: 992px) {
  .navbar .dropdown-menu li { position: relative; }
  .navbar .nav-item .submenu { display: none; position: absolute; left: 100%; top: -7px;  }
  .navbar .nav-item .submenu-left { right: 100%; left: auto;  }
  .navbar .dropdown-menu > li:hover { background-color: #f1f1f1  }
  .navbar .dropdown-menu > li:hover > .submenu { display: block;  }
}
@media (max-width: 991px) {
  .navbar .dropdown-menu .dropdown-menu { margin-left: 0.7rem; margin-right: 0.7rem; margin-bottom: .5rem;  }
}*/

.bid_submitted, .payment_received, .invoiced{background: #000082 !important;color: var(--wht) !important;}
.assigned {background: #657abc !important;color: #fff !important;}
.on_hold, .cancelled {background: #ffff00 !important;color: var(--drk) !important;}
.unassigned {background: #9250d0 !important;color: var(--wht) !important;}
.bid_received {background: #7beefd !important;color: var(--drk) !important;}
.reassigned {background: #791616 !important;color: var(--wht) !important;}
.project_completed {background: #00b050 !important;color: var(--wht) !important;}
.invoice_review, .client_pending_corrections { background: #ffc000 !important;color: var(--drk) !important;}

/* branding and poweredby styles setup */
.brand_cta{display: flex; align-items: center; justify-content: space-around; flex: 1; max-width: calc(100% - 90px);}
.brand_cta .navbar-brand{display: flex; flex-direction: column; align-items: center; justify-content: center; max-height: 40px; max-width: 50%; margin: 0; padding: 0;}
.brand_cta .navbar-brand-logo{ max-height: 40px; margin: 0 0 3px 0px; padding: 0;}
.brand_cta .navbar-brand-logo.portal-logo{max-height: 30px;}
.brand_cta .portal-type{font-size: 8px; font-weight: 500; text-transform: uppercase; color: var(--bs-primary)}
.brand_cta .navbar-brand-title{max-width: calc(100% - 10px);}

.poweredby{display: flex; align-items: end; justify-content: center; margin-top: 0.5rem;}
.poweredby-title{font-size: 8px; font-weight: 500; text-transform: uppercase; }
.poweredby-logo{ max-height: 30px; margin: 0 0 0 3px; padding: 0; max-width: 120px;}

.btn-hamburger, .page_back_button{flex-shrink: 0; display: grid; place-content: center;}

/* onscroll show/hide header styles setup */
html {/*  overflow: hidden; */ width: 100%;}
body {  height: 100vh;  /*position: fixed;*/  overflow-y: scroll;  -webkit-overflow-scrolling: touch;}
.hb_menu_open .layout_header{height: 100vh; }
.hb_menu_open .layout_header .navbar .navbar-collapse{max-height: calc( var(--doc-height) - 56px); transition: max-height 0.3s ease-in-out;}

.layout_header{position: fixed; top: 0; left: 0; right: 0; z-index: var(--bs-layout-header-z-index); transform: none; transition: transform 0.4s;}
.scroll-down .layout_header{transform: translate3d(0, -66px, 0); transition: transform 0.4s; }
.layout_footer{position: fixed; bottom: 0; left: 0; right: 0; z-index:  var(--bs-layout-footer-z-index);} 
main{padding-top: 60px;padding-bottom: 56px;}
body.hb_menu_open{/*overflow: hidden;*/}
body.hb_menu_open.scroll-down .layout_header{transform: none; transition: transform 0.4s; }
.navbar .navbar-collapse{max-height: calc(100vh - 50px); /* min-height: calc(100vh - 56px);*/ }
.navbar .navbar-collapse.show{display: flex; flex-direction: column; align-items: stretch;}
nav.sticky-top{padding: 5px; background-color: var(--bs-body-bg);}
nav.sticky-top, .scroll-up nav.sticky-top{top:50px; transition: top 0.4s; }
.scroll-down nav.sticky-top{top: 0; transition: top 0.4s; }

/*.layout_header{transform: none; }
.scroll-down .layout_header{transform: translate3d(0, -56px, 0); transition: transform 0.4s; }
.scroll-up:not(.hb_menu_open) .layout_header{transform: none; transition: transform 0.1s; position: fixed; top: 0; left: 0; right: 0; z-index: 1030;}
main{padding-top: 0px; transition: padding-top 0.4s ease;}
.scroll-down main{padding-top: 0px; transition: padding-top 0.4s ease;}
.scroll-up main{padding-top: 56px; transition: padding-top 0.1s ease;}*/
.sticky-top{transition: top 0.1s ease;}

/* -- scroll to top styles setup -- */
.scrollTop{position: fixed; bottom: 66px; right: 0; z-index: var(--bs-scrolltop-z-index); transform: translate3d(56px, 0, 0); transition: transform 0.4s;} 
.scroll-down .scrollTop{transform: translate3d(-16px, 0, 0); transition: transform 0.4s; }
.os-ios .scrollTop{bottom: 86px;}

/* -- btn-hamburger styles setup -- */
.hb_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}
/* menu start */
.hb_menu {
    position: absolute;
    width: 20px;
    height: 0.1rem;
    display: flex;
    justify-content: center;
}

.hb_animate.hb_menu{
  animation-name: hb_menu-menu;
  animation-duration: 0.3s;
}

@keyframes hb_menu-menu {
  0% {
    width:0px;
    height:0px;
  }
  50% {
    width:15px;
    height:1px;
  }
  100%{
    position: absolute;
    background-color: inherit;
    width: 20px;
    height: 2px;
  }
}

.hb_menu:after {
  content: "";
  position: absolute;
  background-color: inherit;
  width: 15px;
  height: 0.1rem;
  margin-top: -5px;
}

.hb_animate.hb_menu:after {
  animation-name: hb_menu-after;
  animation-duration: 0.3s;
}

@keyframes hb_menu-after {
  0% {
  transform: rotate(-45deg);
  margin-top:0px;
  }
  50% {
  transform: rotate(0deg);
  margin-top:0px;
  }
  100%{
    transform: rotate(0deg);
    margin-top:-5px;
  } 
}

.hb_menu:before {
  content: "";
  position: absolute;
  background-color: inherit;
  width: 15px;
  height: 0.1rem;
  margin-top: 5px;
}

.hb_animate.hb_menu:before{
  animation-name: hb_menu-before;
  animation-duration: 0.3s;
}
@keyframes hb_menu-before {
  0% {
  transform: rotate(45deg);
  margin-top:0px;
  }
  50% {
  transform: rotate(0deg);
  margin-top:0px;
  }
  100%{
    transform: rotate(0deg);
    margin-top:5px;
  }
}
/* menu end */

/* close start */
.hb_close {
  position: absolute;
  margin-left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.hb_close.hb_animate{
  animation-name: hb_close-close;
  animation-duration: 0.3s;
}

@keyframes hb_close-close {
  0% {
    position: absolute;
    width: 20px;
    height: 2px;
    margin-top:5px;
  }
  50% {
    display:none;
    width: 15px;
    height: 1px;
  }
  100%{
    width:0px;
    height:0px;
  }
}

.hb_close:after {
  content: "";
  position: absolute;
  background-color: inherit;
  width: 15px;
  height: 0.1rem;
  transform: rotate(45deg);
}

.hb_animate.hb_close:after {
  animation-name: hb_close-after;
  animation-duration: 0.3s;
}

@keyframes hb_close-after {
  0% {
    transform: rotate(0deg);
    margin-top: 5px;
  }
  50% {
    transform: rotate(0deg);
    margin-top: 0px;
  }
  100%{
    transform: rotate(45deg);
  }
}

.hb_close:before {
  content: "";
  position: absolute;
  background-color: inherit;
  width: 15px;
  height: 0.1rem;
  transform: rotate(-45deg);
}

.hb_animate.hb_close:before {
  animation-name: hb_close-before;
  animation-duration: 0.3s;
}

@keyframes hb_close-before {
  0% {
    transform: rotate(0deg);
    margin-top:-5px;
  }
  50% {
    transform: rotate(0deg);
    margin-top:0px;
  }
  100%{
    transform: rotate(-45deg);
  }
}
/* close end */

/* responsive styles setup start */
@media screen and (min-width: 992px)  {
  .layout_footer{display: none;}
  .navbar-expand-lg .navbar-nav{gap: 0.50325rem;}
  .navbar .nav-item{display: flex; }
  .navbar > .nav-item > .nav-link{ display: flex; align-items: center; }
  .navbar .navbar-nav > .nav-item .nav-link{padding: 5px 15px;}
  .navbar .navbar-nav > .nav-item.dropdown > .nav-link{padding: 5px 5px 5px 15px;}
  .navbar .nav-item:not(.dropdown) .nav-link i{display: none;}
  .navbar .icon{transform: rotate(90deg); transition: all 0.3s ease-in;}
  .navbar .nav-item.dropdown > .nav-link.dropdown-toggle.show > .icon:last-child{transform: rotate(-90deg);}
  .navbar .nav-item.dropdown > .nav-link.dropdown-toggle.show{margin-bottom: 5px; border-radius: 10px;}
  .navbar .nav-item .nav-link.dropdown-toggle.show + .dropdown-menu.show{border-radius: 10px; }
  .offcanvas .fab{position: static;}
  .offcanvas .fabVertical .fabNav{position: absolute; top: 100%; }
  .offcanvas-body .navbar-nav{padding-right: 3rem;}
}
@media screen and (max-width: 992px)  {
  .offcanvas .fab{position: absolute; top: 20px; right: 60px;}
}
/* responsive styles setup end */