:root {
	/* main components color stops.. */
	--main-bg-color: linear-gradient(to top, #2B5095 0%, #1B325F 100%); /* linear-gradient(top, #2B4E72 0%,#182E43 100%);used in top nav bar */
	--main-bg-navButton:  #2B5095;
	--subcollpased-bg: #2B5095;
	--bulk-operations-hovered: #93a2ad;
	--color-hover-active:  #1B325F ;

	/* text colors for coponents.. */
	--color-text: #f3f3f3;
	--color-txt-components: #fff;
	--color-all-text: #000;
	--color-close-modal: #000;
	/* componenets colors.. */
	--btn-primary: #006494;
	--btn-primary-hovered: #0f7aad; 
}

/*Models and nav bar banner */
.sidebar,
.navbar-inverse,
.modal-header,
div.topnavbar-textdecor,
.side-filter,
.logolink{
	background:var(--main-bg-color)!important;
}

/*Sibar color Scheme  */

.SubCollapsedItems a.active{
	background: var(--subcollpased-bg)!important;
	color: var(--color-txt-components)!important;
}
#disabled-list, #enabled-list {
	color: var(--color-all-text)!important;
}

/* Nav button color scheme */
a.navButton {
  background-color: var(--main-bg-navButton) !important;
  color: var (--color-txt-components)!important;
  cursor: pointer;
}
/* Nav button hovered.. */
a.navButton:hover {
	background:var(--main-bg-color)!important;
	transition: transform .3s;
}

a.navButton:hover::after{
	margin-left: 10px;

}

/*Nav Button active */
a.navButton-active {
	background: var(--color-hover-active)!important;
}

/* Nav bar styling. */
.navbar-inverse .navbar-nav > li > a:hover,
.list-group-item.list-group-item-depth-2.active:hover {
    background:var(--main-bg-color)!important;
}

.navButton,
.navbar-nav li{
	box-shadow:0px 0px 0.3px 0  #242627c4;
}

.navbar-inverse .navbar-nav > li > a {
	color:var(--color-txt-components);
	
}

/* Sidebar items and links */

a.list-group-item:hover,
a.list-group-item:focus {
	background:var(--main-bg-color);
	transform: translateX(15px);
}

a.list-group-item{
	transition:all .5s ease-out;
}


.list-group-item.dropdown-active, 
.list-group-item.dropdown-active:hover, 
.list-group-item.dropdown-active:focus {
    background-color:var(--color-hover-active) !important;
}

.list-group-item.list-group-item-depth-2 {
    background-color: var(--color-hover-active)  !important;
}

.list-group-item.list-group-item-depth-2.active {
    background-color: var(--subcollpased-bg) !important;
}


/*Colors for sidebar labels  */
div.topnavbar-textdecor,
.side-filter,
.sidebar,
.logolink,
a.list-group-item {
    color: var(--color-txt-components);
}


.toolbar {
	background: rgba(102, 105, 112, .4)!important;
	color: #000;
}


/*Modals  */
.close {
    color: var(--color-close-modal);
}
.date-days{
	color: var(--color-all-text);
}
/* for the modal header Wrapper where background color stops overflowing */
.modal-content {
	/* overflow: hidden; */
}

/*filter-2(slide)  */
.call-duration-items,
.call-status-items,
.filter2-label {
    color: var(--color-txt-components);
    font-size: inherit;
}


.well-checkbox,
.well {
	color: #000;
}

/*Buttons  */
.footer-btn {
	border: 1px solid #2e34368a!important;
}
.label-primary,
.btn-primary {
	
	color: var(--color-txt-components);
	background-color: var(--btn-primary)!important;
}

.btn-primary:hover {
	color: var(--color-txt-components);
	background-color: var(--btn-primary-hovered) !important;
}


.dropdown-datatable li a:hover, .dropdown-menu.tags li a:hover, .dropdown-menu.tags li.active {
    color: var(--color-txt-components) !important;
	background-color: var(--bulk-operations-hovered);
	transition:background-color .5s ease-out;
}

/* for mobile devices.. */
.navbar-brand,
.mobileNavButton,
.offcanvas {
	background:var(--main-bg-color)!important;
	border-right: 1px solid #555;
	color: #fff;
}
.mobileNavButton{
	color: var(--color-txt-components);
	border-right: 1px solid #555;
	
}

.mobileNavButton:last-child {
	background: rgb(228, 78, 8) !important;
	border-radius: 5px;
}

#mobileSidebar > .navbar {
	margin-bottom: 0;
}
#onlyfilter1 label {
	color: var(--color-text);
}
#onlyfilter1 label:hover{
	background:var(--main-bg-color)!important;
	
}
#mobileFilters .list-group-title {
	background-color: var(--main-bg-color);
	color: var(--color-txt-components);
}
.select2-container {
    z-index: 100000;
    width: 100% !important;
  }