/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.gap-50 {
	gap: 0.5rem;
}
.gap-1 {
	gap: 1rem;
}
.gap-2 {
	gap: 1.5rem;
}

.btn-primary,
.btn-primary:hover {
	color: unset;
}

/* LOGO */
.main-menu .navbar-header .navbar-brand .brand-logo .logo {
	width: 220px;
}

/* MAIN MENU */
.main-menu {
	top: 0;
}

.main-menu ul.navigation-main {
	/* height: calc(100vh - 140px); */
	height: calc(100vh - 90px);
	overflow-y: auto;
}
.main-menu.menu-light .navigation > li a.active {
	background: -webkit-linear-gradient(332deg, var(--primary), rgba(var(--primary-rgb), 0.7));
	background: linear-gradient(118deg, var(--primary), rgba(var(--primary-rgb), 0.7));
	box-shadow: 0 0 10px 1px rgba(var(--primary-rgb), 0.7);
	/*color: #FFFFFF;*/
	font-weight: 400;
	border-radius: 4px;
}
/* https://blazor-university.com/routing/navigating-our-app-via-html/ */

/* MAIN MENU NEW VERSION - CA-593 */
.main-menu .main-menu-content {
	display: flex;
	flex-direction: row-reverse;
	box-shadow: 0px -5px 12px 0 rgba(0, 0, 0, 0.05);
}
.main-menu .navbar-header {
	/* box-shadow: -5px 8px 12px 0 rgba(0, 0, 0, 0.05); */
	/* border-bottom: 1px solid #eaeaea; */
}
.main-menu .navbar-header .navbar-brand {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.main-menu .main-menu-content .nav-tabs {
	display: flex;
	flex-direction: column;
	/* margin-top: 1rem; */
	margin-bottom: 0;
	/* border-right: 1px solid #eaeaea; */
	/* border-top: 1px solid #eaeaea; */
}
.main-menu .main-menu-content .nav-tabs .nav-item {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
}
.main-menu .main-menu-content .nav-tabs .nav-item .nav-link {
	padding: 0.75rem 1rem;
	font-size: 1.55rem;
	color: var(--primary);
}
.main-menu .main-menu-content .nav-tabs .nav-item .nav-link:hover::before {
	background-color: #f4f4f4;
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 4px;
	z-index: -1;
}
.main-menu .main-menu-content .nav-tabs .nav-item .nav-link.active {
	color: #626262;
}
.main-menu .main-menu-content .nav-tabs .nav-item .nav-link.active::after {
	height: 100%;
	width: 3px;
	top: 0;
	bottom: unset;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i,
body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content > li > a > i {
	margin-right: 0.5rem;
}

.main-menu .main-menu-content .navigation-main {
	width: 100%;
	box-shadow: -5px 0 12px 0 rgba(0, 0, 0, 0.05);
}
.main-menu .main-menu-content .navigation-main .navigation-header {
	margin-left: 1.2rem;
}
.main-menu .main-menu-content .navigation-main .navigation-header:first-of-type {
	margin-top: 1rem;
}
.main-menu .main-menu-content .navigation-main .navigation-header span {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
.main-menu .main-menu-content .navigation-main .nav-item {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.main-menu .main-menu-content .navigation-main .nav-item a {
	padding-left: 0.55rem;
	padding-right: 0.5rem;
	font-size: 1rem;
}
.main-menu .main-menu-content .navigation-main .nav-item.hover a {
	padding-left: 1rem;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:not(.mm-next):after {
	right: 15px;
}


/* HEADER */
.header-navbar.sticky-nav {
	position: sticky;
	top: 0;
}
.header-navbar.floating-nav {
	margin: 1rem 1.25rem 0;
	width: calc( 100vw - (100vw - 100%) - calc(1.25rem * 2) - 260px);
}
html body .content .content-wrapper {
	margin-top: 4.75rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
html body.navbar-sticky .app-content .content-wrapper {
	margin-top: 0;
	padding: 1.5rem;
}
html body.navbar-sticky .navbar-container {
	padding-left: 1rem;
}

.header-navbar .navbar-container ul.nav .CultureSwitcher,
.header-navbar .navbar-container ul.nav .LoginDisplay {
	display: flex;
	align-items: center;
}
.navbar-nav .nav-link .user-nav {
	justify-content: center;
}
.avatar .avatar-content {
	line-height: initial;
}
.breadcrumbs-top .breadcrumb {
	border-left: none;
}

@media (max-width: 1200px) {
	.header-navbar.floating-nav {
		width: calc(100vw - (100vw - 100%) - calc(2.2rem * 2));
	}
}

/* SEARCHBAR */
.search-bar .form-control {
	border: none;
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14);
}
.search-bar-wrapper .search-bar .search-input .search-btn {
	/* search-bar button */
	position: absolute;
	top: 6px;
	right: 5px;
}
@media (max-width: 575px) {
	.search-bar-wrapper .search-bar .search-input .search-btn {
		top: 2px;
		align-items: center;
	}
}

/* CONTENT */
html body .content.app-content {
	min-height: calc(100vh - 4rem);
}
@media (max-width: 1199.98px) {
	html body .content.app-content {
		min-height: calc(100vh - 8.5rem);
	}
}

/* PROIZVODI */
#SalesItemsListViewGrid .e-gridheader {
	border: none;
}
#SalesItemsListViewGrid .card-footer {
	background-color: #fff;
}

.e-grid .e-table {
	background-color: #f8f8f8;
}

/* TODO / ZADACI /ProjectManagment/List */
.todo-app-area .app-fixed-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.todo-app-area .app-fixed-search fieldset.form-group,
.todo-app-area .app-fixed-search .todo-sort-wrapper {
	display: contents;
}
.todo-app-area .app-fixed-search fieldset.form-group input {
	max-width: 160px;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
@media (max-width: 991.98px) {
	.todo-app-area .app-fixed-search fieldset.form-group input {
		padding-left: 0;
	}
}
.todo-app-area .app-fixed-search fieldset.form-group button {
	white-space: nowrap;
	padding-left: 1.2rem;
	padding-right: 1.2rem;
}
.todo-app-area .app-fixed-search fieldset.form-group button i {
	position: relative;
	top: 2px;
}
.todo-application .content-area-wrapper .sidebar .todo-sidebar .todo-app-menu .sidebar-menu-list {
	overflow-x: hidden;
	overflow-y: auto;
}
.todo-application .content-area-wrapper .content-right .sidebar-toggle {
	margin: 0;
	padding: 0.5rem 0.75rem;
}
.todo-application .content-area-wrapper .content-right .app-fixed-search {
	border: none;
}

/* FOOTER */
@media (max-width: 1199.98px) {
	body.vertical-layout.vertical-menu-modern.menu-expanded .footer {
		margin-left: 0;
	}
}

/* CA-601 - Grid Ikonice ? */
.e-rowcell .bx,
.e-row .bx {
	font-size: 1.25rem;
	padding: 0.25rem;
	color: #626262;
	cursor: pointer;
}
.e-rowcell .bx:hover,
.e-row .bx:hover {
	color: #333;
}
.green-icon {
	background: green;
	border-radius:50%;

}
.red-icon {
	background: red;
	border-radius: 50%;
}
	.red-icon .bx {
		color: white;
	}
.green-icon .bx {
	color: var(--success);
	border-radius: 50%;
}
.orange-icon .bx {
	color: var(--warning);
}
.light-blue-icon {
	background: white;
	border-radius: 50%;
}

.light-blue-icon .bx {
	color: var(--info);
}
.bx-show {
	background: var(--primary);
	border-radius: 50%;
}
/* (+ badges) */
.badge.badge-light-primary {
	background-color: var(--primary-light);
	color: black !important;
}

/* tables viewport dependent max-height */
.e-grid .e-content {
	max-height: calc(100vh - 386px);
	overflow: auto;
}

/* SF form controls over-overwrite */
.categories-dropdown.e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.categories-dropdown.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
.filter-menu-list.e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.filter-menu-list.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
.sort-menu-dropdown.e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.sort-menu-dropdown.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
.report-form .form-control {
	border: 1px solid #d9d9d9;
	color: #5f5f5f;
	border-radius: 5px;
	font-size: 0.96rem;
	line-height: 1.25;
	min-height: 39px;
	font-family: 'Montserrat', Helvetica, Arial, serif;
	padding-top: 0;
	padding-bottom: 0;
	&:hover {
		border-color: #d9d9d9 !important;
	}
	&:focus {
		border-color: var(--primary);
	}
	& input {
		font-size: inherit;
		line-height: inherit;
		padding-left: 0;
		height: 100%;
	}
}
.categories-dropdown.e-popup {
	overflow: hidden;

	& .e-dropdown {
		max-height: calc(300px - 1.5rem) !important;
	}
}

.filter-menu-list > .e-multi-select-wrapper {
	display: flex;
	align-items: center;
}
.filter-menu-list > .e-multi-select-wrapper .e-clear-icon,
.filter-menu-list > .e-multi-select-wrapper .e-input-group-icon {
	margin-top: unset !important;
	top: unset !important;
}

.list-filtering .col-12 > label {
	font-weight: 500;
	font-size: 0.975rem;
	flex: 0 0 160px;
	text-align: right;
}

.todo-application .card-header > .input-group {
	width: calc(100% - 2rem);
}
.todo-application .card-header > .heading-elements {
	top: unset;
}
.todo-application .card-header > .heading-elements .list-inline {
	display: block !important;
}