/*******************
Main sidebar
******************/
.left-sidebar {
  position: fixed;
  width: 80px;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 20;
  background: #fff; 
  overflow: hidden;box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.4), 0px -2px 6px 0px rgba(0,0,0,0.4);
  }


/*******************
use profile section
******************/
.sidebar-nav .user-profile > a img {
  width: 30px;
  border-radius: 100%;
  margin-right: 10px; }

.sidebar-nav .user-profile > ul {
  padding-left: 40px; }

/*******************
sidebar navigation
******************/
.scroll-sidebar {
  height: 100% }
  .scroll-sidebar.ps .ps__scrollbar-y-rail {
    left: 2px;
    right: auto;
    background: none;
    width: 6px;
    /* If using `left`, there shouldn't be a `right`. */ }

.collapse.in {
  display: block; }

.sidebar-nav {
  background: #fff;
  padding: 15px 0 0 0px; }
  .sidebar-nav ul {
    margin: 0px;
    padding: 0px; }
    .sidebar-nav ul li {
      list-style: none; }
      .sidebar-nav ul li a {
        color: #687384;
        padding: 8px 35px 8px 15px;
        display: block;
        font-size: 14px;
        font-weight: 400; }
        .sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {
          color: #398bf7; }
          .sidebar-nav ul li a.active i, .sidebar-nav ul li a:hover i {
            color: #398bf7; }
        .sidebar-nav ul li a.active {
          font-weight: 500;
          color: #398bf7; }
      .sidebar-nav ul li ul {
        padding-left: 28px; }
        .sidebar-nav ul li ul li a {
          padding: 7px 35px 7px 15px; }
        .sidebar-nav ul li ul ul {
          padding-left: 15px; }
      .sidebar-nav ul li.nav-small-cap {
        font-size: 12px;
        margin-bottom: 0px;
        padding: 14px 14px 14px 20px;
        color: #263238;
        font-weight: 500; }
      .sidebar-nav ul li.nav-devider {
        height: 0px;
        background: rgba(120, 130, 140, 0.13);
        display: block;
        margin: 15px 0; }
  .sidebar-nav > ul > li > a i {
    width: 31px;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    color: #555f6d; }
  .sidebar-nav > ul > li > a .label {
    float: right;
    margin-top: 6px; }
  .sidebar-nav > ul > li > a.active {
    font-weight: 400;
    background: #242933;
    color: #26c6da; }
  .sidebar-nav > ul > li {
    margin-bottom: 10px; }
    
   .sidebar-nav > ul > li > ul > li {
    margin-bottom: 8px; } 
    
    .sidebar-nav > ul > li.active > a {
      color: #398bf7;
      font-weight: 500; }
      .sidebar-nav > ul > li.active > a i {
        color: #398bf7; }
  .sidebar-nav .waves-effect {
    transition: none;
    -webkit-transition: none;
    -o-transition: none; }

.sidebar-nav .has-arrow {
  position: relative; }
  .sidebar-nav .has-arrow::after {
    position: absolute;
    content: '';
    width: 7px;
    height: 7px;
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color: #687384;
    right: 1em;
    -webkit-transform: rotate(135deg) translate(0, -50%);
    -ms-transform: rotate(135deg) translate(0, -50%);
    -o-transform: rotate(135deg) translate(0, -50%);
    transform: rotate(135deg) translate(0, -50%);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    top: 47%;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out; }

.sidebar-nav .active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after,
.sidebar-nav .has-arrow[aria-expanded="true"]::after {
  -webkit-transform: rotate(-135deg) translate(0, -50%);
  -ms-transform: rotate(-135deg) translate(0, -50%);
  -o-transform: rotate(-135deg) translate(0, -50%);
  top: 45%;
  width: 7px;
  transform: rotate(-135deg) translate(0, -50%); }

/****************
When click on sidebar toggler and also for tablet
*****************/
@media (min-width: 768px) {
  .mini-sidebar .sidebar-nav #sidebarnav li {
    position: relative; }
  .mini-sidebar .sidebar-nav #sidebarnav > li > ul {
    position: absolute;
    left: 70px;
    top: 46px;
    width: 220px;
    padding-bottom: 10px;
    z-index: 1001;
    background: #edf0f5;
    display: none;
    padding-left: 1px; }
  .mini-sidebar .user-profile .profile-img {
    width: 45px; }
    .mini-sidebar .user-profile .profile-img .setpos {
      top: -35px; }
  .mini-sidebar.fix-sidebar .left-sidebar {
    position: fixed; }
  .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul {
    height: auto !important;
    overflow: auto; }
  .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul,
  .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul.collapse {
    display: block; }
  .mini-sidebar .sidebar-nav #sidebarnav > li > a.has-arrow:after {
    display: none; }
  .mini-sidebar .left-sidebar {
    width: 70px; }
  .mini-sidebar .sidebar-nav #sidebarnav .user-profile > a {
    padding: 12px 20px; }
  .mini-sidebar .scroll-sidebar {
    padding-bottom: 0px;
    position: absolute; }
  .mini-sidebar .hide-menu,
  .mini-sidebar .nav-small-cap,
  .mini-sidebar .sidebar-footer,
  .mini-sidebar .user-profile .profile-text,
  .mini-sidebar > .label {
    display: none; }
  .mini-sidebar .nav-devider {
    width: 70px; }
  .mini-sidebar .sidebar-nav {
    background: transparent; }
  .mini-sidebar .sidebar-nav #sidebarnav > li > a {
    padding: 12px 24px;
    width: 70px; }
  .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
    width: 290px;
    background: #edf0f5; }
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .hide-menu {
      display: inline; }
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .label {
      display: none; } }

   



#sidebarnav .sidebar-logo{
  text-align: center;
}
      
#sidebarnav .sidebar-logo img{
  max-width: 90%;
  margin: auto;
  padding: 5px;
}   

@media (min-width: 768px) {
  #page, .app-fixed-navbar{
    margin-left: 76px;
  } 
  
}


@media (max-width: 767px) {
  #page, .app-fixed-navbar{
    margin-left: 0px;
  } 
  
  .left-sidebar{
    width: 0px;
  }
  
}


  
  .app-menu{
    display: none !important;
  }
  
  
  

@media (max-width: 767px) {
  .mini-sidebar .left-sidebar {
    position: fixed; }
  .mini-sidebar .left-sidebar,
  .mini-sidebar .sidebar-footer {
    left: -240px; }
  .mini-sidebar.show-sidebar .left-sidebar,
  .mini-sidebar.show-sidebar .sidebar-footer {
    left: 0px; } 
    
    .left-sidebar{
      width: 0px;
    }
    #page, .app-fixed-navbar{
    margin-left: 0px;
  }
}


.main-container .sidebar-essentials{
  position: fixed !important;
  overflow-x: scroll; 
  left: 84px !important;
  right: auto;
}

.main-container{
  margin-top: 20px;
} 
.module-nav{
  display: none;
}
.module-nav.settingsNav{
  display: block;
  position: fixed;
  right: 0;
  top: 100px;
  bottom: 0;
  background-color: white;    border-left: 1px solid #ddd;
}

.settingsPageDiv{
  width: calc(100% - 230px) !important;
}
.main-container .content-area{
	padding-left: 2px !important;
}
.main-container #listViewContent.full-width{
	padding-left: 10px !important;
	padding-right: 0px !important;
}	
.main-container.main-container-MailManager #listViewContent .essentials-toggle {
    position: fixed !important;
    left: auto !important;
    top: 120px !important;
    border-right: 0 !important;
    z-index: 999;right: 0px!important;
}	
.main-container #listViewContent .essentials-toggle{
	position: fixed !important;
	left: 313px !important;
  right: auto !important;
	top: 120px !important;
	border-left: 0 !important;
	z-index: 999;
}

.main-container #listViewContent.full-width .essentials-toggle{
	position: fixed !important;
	left: 80px !important;
	right: auto !important;
	top: 120px !important;
	border-right: 0 !important;
	z-index: 999;
}

.main-container #listViewContent.full-width .essentials-toggle span.fa-chevron-left{
  transform: rotate(180deg);
}

@media (max-width: 425px){
#mycalendar .essentials-toggle{right: 0px !important;}
.sidebar-menu{background: #fff;}}

#mycalendar .essentials-toggle{
  position: fixed !important;left: auto !important;
 right: 230px ;top: 120px !important;border-right: 0 !important;z-index: 999;}
.full-width #mycalendar .essentials-toggle{
  position: fixed !important;left: auto !important;
  right: 0px !important;top: 120px !important;
  border-right: 0 !important;  z-index: 999;}
#sharedcalendar .essentials-toggle{
  position: fixed !important;left: auto !important;
 right: 230px !important;top: 120px !important;border-right: 0 !important;z-index: 999;}
.full-width #sharedcalendar .essentials-toggle{
  position: fixed !important;left: auto !important;
  right: 0px !important;top: 120px !important;
  border-right: 0 !important;  z-index: 999;}

.with-childs .module-icon{
	font-size: 18px;
}

.app-fixed-navbar {
	height: auto !important;
	background-color: #fff !important;
	padding: 5px;
}
.main-container .sidebar-essentials{
	top:120px !important;
}
.app-navigator, #appnavigator{
	background-color: white !important; 
	top: 0px;
}
.app-navigator .app-icon{
	color: #398bf7 !important;
}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{border-radius:10px; background:#eee; 
  -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.1);}
::-webkit-scrollbar-thumb{border-radius:10px; background:#ddd;}


.dropdown-menu > li > div > a{
	padding: 4px 6px;
}

.tippy-tooltip.ctcrmtiger-theme {
  font-size: 12px;
}

.tab-item .numberCircle{
    position: absolute;
    left: 0px;
    right: 0px;
    text-align: center;
    bottom: 0px;
    border-radius: .25rem;
    padding: 0px;
    min-height: auto;
    margin-bottom: 3px;
}

.related-tabs .tab-icon{
    margin-bottom: 4px;
}

.tab-item{
	padding: 0 5px!important;
}


.numberCircle.disabled{
	background-color: #cccccc;
}

.detailview-content .details.row .relatedHeader{
	border-radius: 0px;
}



/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps__rail-x:hover,
.ps__rail-y:hover,
.ps__rail-x:focus,
.ps__rail-y:focus {
  background-color: white;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: white;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: white;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x {
  background-color: white;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y {
  background-color: #67757c;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}

#page, html, body{
	overflow: hidden;
}

#page{
	max-height: 100%;
}

.sidebar-nav{
	overflow: hidden !important;
	padding: 5px;
}

.sidebar-essentials{
	overflow: hidden !important;
}
.sidebar-menu{
	padding-bottom: 20px;
}

#listViewContent{
	width: calc(100% - 240px);
  float: right;
}
#listViewContent.full-width{
	width: 100% !important;
}
@media (max-width: 768px) {#listViewContent, .settingsPageDiv {  width: 100%!important;}}

.settingsgroup{
	overflow-x: scroll !important;
	padding-top: 15px;
	margin-top: 20px;
}
.main-container #listViewContent .essentials-toggle .fa-chevron-right {
  transform: rotate(180deg);
}