html {
  height: 100%; }

body {
  position: relative;
  min-height: 100%;
  transition: padding-top 0.5s; }


/*PROFILE SIDEBAR SETUP, EDITS HERE*/

.app-user {
    padding: 15px 10px;
    display: block;
    width: 100%;
    overflow: visible;
}

.app-user .media {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: visible;
    gap: 8px;
}

.app-user .media-left {

    position: static;
    vertical-align: middle;
    padding-top: 0;
}

.app-user .media-body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.app-user .avatar {
    position: static;
    margin: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
}

.app-user .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-header a,
.app-header span {
    color: #ffffff !important;
}

/*EMAIL PART OF PROFILE, ELLIPSIS*/

.app-user .username {
    display: block;
    width: 100%;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 3px;

    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user .user-email-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.app-user .user-email {
    display: block;
    width: 100%;
    color: #fff;
    font-size: 13px;

    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user .user-email-wrap::after {
    content: attr(data-full-email);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);

    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;

    /*white-space: nowrap;*/

    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);

    transition: all 0.5s ease;

    z-index: 9999;
    pointer-events: none;
}

.app-user .user-email-wrap:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*PROFILE BOX CONTAINER, EDIT HERE*/

body.menubar-left .menubar .app-user {
  margin-top: 10px;
  margin-bottom: 10px;
}

body.menubar-unfold .app-user .media-body {
  display: table-cell;
}


/* SIDEBAR WHOLE PANEl */
.menubar.light .app-user {
  background-color: #1a8c00;
  color: #ffffff;
}

.menubar.light .app-user .username,
.app-user .media-left a,
.app-user .media-left .fa,
.app-user p,
.app-user div:not(.media-left):not(.media-body) {
  color: inherit !important;
}

.menubar.light .app-user .usertitle {
  color: #f0f0f0 !important;
}

/* SIDEBAR BUTTONS */
.app-menu a {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: #ffffff;
  white-space: normal;
}

.app-menu .menu-icon {
  flex: 0 0 1rem;
  width: 1rem;
  margin-right: 12px;
  color: #ffffff;
  transition: margin-right 0.5s ease;
}

.app-menu .menu-text {
  display: block;
  flex: 1;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.app-menu .menu-caret {
  margin-left: auto;
  font-size: 1rem;
  backface-visibility: hidden;
  transition: transform 0.5s ease-in-out;
}

/*SIDEBAR CODE, can edit here*/

.menubar {
position: fixed;
left: 0;
top: 60px;
opacity: 0;
z-index: 999;
transition: opacity 0.5s, left 0.2s ease-in-out, top 0.5s;
background-color: #1a8c00 !important; 
}

.menubar.in {
opacity: 1;
}

body.menubar-unfold .menubar {
width: 220px;
}

body.menubar-left .menubar {
bottom: 0;
padding-top: 15px;
padding-bottom: 20px;
height: calc(100% - 60px);
}

body.menubar-left .app-menu .open > a > .menu-caret {
  transform: rotate(90deg);
}

body.menubar-left .app-menu > li {
  border-left: 3px solid transparent;
}

body.menubar-left .app-menu .menu-icon {
  margin-right: 15px;
}

body.menubar-left .app-menu > li > a {
    font-size: 16px;
    padding: 15px;
    padding-left: 20px;
        white-space: normal;   /* allow wrapping */

}

body.menubar-left .app-menu .more-items-li {
  display: none;
}

.app-menu .menu-text {
    white-space: normal;   /* allow wrapping */
    word-break: break-word;
}

.app-menu li.open > a,
.app-menu li.active > a,
.app-menu li:hover > a,
.app-menu li.menu-heading > a {
color: #ffffff;
}

.app-menu li.open > a,
.app-menu li.active > a,
.app-menu li:hover > a {
 color: #ffffff !important;
}

/*hover thing for the sidebar buttons*/
body.menubar-left .app-menu li.open,
body.menubar-left .app-menu li.active {
border-left-color: #c0f4c0;
}


/* HEADER CODE, EDIT HERE*/

.navbar{
    border: none;
    background-color: #1a8c00 !IMPORTANT;; 
    opacity: 2;
    transition: opacity 0.5s;
}

.navbar-header {
    display: flex;
    align-items: center;
    height: 60px;
    padding-left: 15px;
    padding-top: 20px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    padding: 0;
    margin: 0 !important;
    line-height: normal;
}

.navbar-brand .brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.0rem;
    margin: 0;
}

.navbar-brand .brand-name {
    font-size: 1.50rem;
    font-weight: 500;
    line-height: 1;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: #fff;
    text-decoration: none;
}

.navbar-toolbar {
    margin: 0;
}
.navbar-toolbar.navbar-toolbar-right {
    float: right;
}
.navbar-toolbar > li {
    float: left;
}
.navbar-toolbar > li > a {
    display: block;
    height: 60px;
    padding: 20px 15px;
    line-height: 20px;
    color: #fff; 
}

.navbar-toolbar > li > a:hover, .navbar-toolbar > li > a:focus, .navbar-toolbar > li > a[data-active="true"] {
    background-color: rgba(255, 255, 255, 0.1); /* Updated to White overlay for hover */
}

@media (max-width: 767px) {
    .navbar-toolbar > li > a {
        color: #76797c;
    }
    .navbar-toolbar > li > a:hover, .navbar-toolbar > li > a:focus, .navbar-toolbar > li > a[data-active="true"] {
        background-color: #f8fafb;
    }
    .navbar-toolbar > .open > a,
    .navbar-toolbar > .open > a:hover,
    .navbar-toolbar > .open > a:focus {
        background-color: #f8fafb;
    }
}


/**========= IMPORTANT MAIN WRAP ===========**/
.app-main {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.5s, transform 0.2s ease-in-out;
  padding-top: 60px !important;
  min-height: calc(100% - 60px); }
  .app-main.in {
    opacity: 1; }
  @media (min-width: 768px) {
    body.menubar-unfold .app-main {
      margin-left: 220px; }
    body.menubar-fold .app-main {
      margin-left: 5rem; } }
  @media (max-width: 767px) {
    body.menubar-in .app-main {
      transform: translate3d(220px, 0, 0);
      overflow: hidden; } }

.wrap {
  padding-top: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem; }
  @media (max-width: 767px) {
    .wrap {
      padding-left: .75rem;
      padding-right: .75rem; } }
  @media (min-width: 768px) {
    body.menubar-top .wrap {
      padding-right: 0;
      padding-left: 0; } }

/** MAIN WRAP END**/


/** CHARTS CSS, DON'T REMOVE **/

.box,
.widget {
  background-color: #fff;
  margin-bottom: 1.5rem;
  -webkit-box-shadow: 0 1px 2px #ccc;
  box-shadow: 0 1px 2px #ccc; }
  .box small,
  .widget small {
    font-size: 95%;
 }

.widget-header,
.widget-body,
.widget-footer {
  padding: 1rem; }

.widget-header:before, .widget-header:after,
.widget-footer:before,
.widget-footer:after,
.widget-header:before,
.widget-header:after,
.widget-footer:before,
.widget-footer:after {
  content: " ";
  display: table; }

.widget-header:after,
.widget-footer:after,
.widget-header:after,
.widget-footer:after {
  clear: both; }

.widget-title {
  font-size: 1rem;
  margin: 0;
  color: #333333; }

h3.widget-title {
  font-size: 20px;
  margin-bottom: 16px;
 }

/** charts css end **/