/* Final cascade fixes loaded after legacy responsive CSS. */

.modern-ui .header-nav {
	background: transparent !important;
	color: #fff !important;
}

.modern-ui .header-nav > ul.nav.pull-right,
.modern-ui .header-nav > ul.nav {
	width: auto;
}

.modern-ui footer p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.modern-ui footer .footer-left,
.modern-ui footer .footer-right {
	float: none !important;
	display: block;
}

.modern-ui footer .footer-left {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	white-space: nowrap !important;
}

.modern-ui footer .footer-left a,
.modern-ui footer .footer-left a.ltekst {
	display: inline !important;
	width: auto !important;
	max-width: none !important;
	white-space: nowrap !important;
}

.modern-ui .mobile-menu-toggle {
	display: none;
}

@media (max-width: 767px) {
	html,
	body.modern-ui {
		min-height: 100dvh;
	}

	body.modern-ui {
		margin: 0;
		padding: 0 !important;
		--mobile-header-offset: 92px;
	}

	.modern-ui .navbar {
		margin-bottom: 8px !important;
		width: auto !important;
	}

	.modern-ui .navbar-inner {
		padding: 0 !important;
		min-height: 0 !important;
		width: auto !important;
	}

	.modern-ui .navbar .container-fluid {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		align-content: flex-start !important;
		gap: 8px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		position: relative !important;
	}

	.modern-ui .btn.btn-navbar {
		display: none !important;
	}

	.modern-ui .mobile-menu-toggle {
		display: inline-flex !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 8px !important;
		min-width: 48px !important;
		max-width: 64px !important;
		height: 34px !important;
		flex: 0 0 auto !important;
		align-items: center !important;
		justify-content: center !important;
		background: rgba(255, 255, 255, 0.14) !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 9px !important;
		box-shadow: none !important;
		color: #fff !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		letter-spacing: 0.02em !important;
		text-transform: none !important;
		position: absolute !important;
		top: 10px !important;
		right: 18px !important;
		opacity: 1 !important;
		visibility: visible !important;
		z-index: 3 !important;
		appearance: none !important;
		-webkit-appearance: none !important;
	}

	.modern-ui .mobile-menu-toggle:hover,
	.modern-ui .mobile-menu-toggle:focus {
		background: rgba(255, 255, 255, 0.22) !important;
		color: #fff !important;
	}

	.modern-ui .navbar .brand,
	.modern-ui a.brand {
		order: 1 !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: calc(100% - 96px) !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	.modern-ui .navbar .brand span,
	.modern-ui a.brand span {
		display: block !important;
		white-space: normal !important;
		word-break: break-word !important;
		max-width: 100% !important;
	}

	.modern-ui .header-nav {
		order: 3 !important;
		flex: 0 0 100% !important;
		width: 100% !important;
		clear: both !important;
		padding: 2px 0 0 !important;
		margin: 0 !important;
		background: transparent !important;
	}

	.modern-ui .header-nav > ul.nav.pull-right {
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		display: flex !important;
		justify-content: flex-start !important;
		align-items: center !important;
		flex-wrap: wrap !important;
		gap: 4px !important;
		text-align: left !important;
	}

	.modern-ui .header-nav > ul > li {
		float: none !important;
		margin: 0 !important;
		position: relative !important;
	}

	.modern-ui .header-nav .btn,
	.modern-ui .header-nav a.btn.header-auth-btn,
	.modern-ui .header-nav .btn.header-user-btn,
	.modern-ui #dropdown-toggle-notifications {
		font-size: 12px !important;
		line-height: 14px !important;
		padding: 6px 8px !important;
		border-radius: 8px !important;
	}

	.modern-ui .header-nav a.btn.header-auth-btn,
	.modern-ui .header-nav .btn.header-user-btn {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: nowrap !important;
	}

	.modern-ui .header-nav .btn.header-user-btn .halflings-icon,
	.modern-ui .header-nav .btn.header-user-btn .caret {
		flex: 0 0 auto !important;
	}

	.modern-ui .header-nav .btn.header-user-btn .header-user-name {
		display: inline-block !important;
		flex: 0 1 auto !important;
		min-width: 0 !important;
		max-width: none !important;
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: nowrap !important;
		color: #fff !important;
	}

	.modern-ui .header-nav .btn.header-user-btn .caret {
		display: inline-block !important;
		margin: 0 !important;
		vertical-align: middle !important;
		align-self: center !important;
		position: relative !important;
		top: 0 !important;
	}

	.modern-ui .header-nav .dropdown-menu {
		position: fixed !important;
		top: var(--mobile-header-offset) !important;
		left: 12px !important;
		right: auto !important;
		min-width: 164px !important;
		width: auto !important;
		margin: 0 !important;
		z-index: 1250 !important;
		border-radius: 10px !important;
		box-shadow: 0 14px 28px rgba(8, 34, 54, 0.18) !important;
		background: #2b6f98 !important;
		border: 1px solid rgba(255, 255, 255, 0.14) !important;
		overflow: hidden !important;
	}

	.modern-ui .header-nav .dropdown-menu li,
	.modern-ui .header-nav .dropdown-menu li a {
		background: transparent !important;
		color: #fff !important;
	}

	.modern-ui .header-nav .dropdown-menu li a {
		padding: 10px 14px !important;
		font-size: 14px !important;
		line-height: 18px !important;
	}

	.modern-ui .header-nav .dropdown-menu li + li a {
		border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
	}

	.modern-ui .header-nav .dropdown-menu li a:hover,
	.modern-ui .header-nav .dropdown-menu li a:focus {
		background: rgba(255, 255, 255, 0.1) !important;
	}

	.modern-ui #sidebar-left,
	.modern-ui #content {
		width: 100% !important;
		float: none !important;
		clear: both !important;
	}

	.modern-ui #sidebar-left {
		display: none !important;
		margin: 0 !important;
		position: fixed !important;
		top: var(--mobile-header-offset) !important;
		left: 12px !important;
		right: auto !important;
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		bottom: 12px !important;
		z-index: 1200 !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	body.modern-ui.mobile-nav-open::before {
		content: "" !important;
		position: fixed !important;
		inset: 0 !important;
		background: rgba(10, 24, 39, 0.42) !important;
		z-index: 1190 !important;
	}

	body.modern-ui.mobile-nav-open #sidebar-left {
		display: block !important;
	}

	.modern-ui #sidebar-left .nav-collapse,
	.modern-ui #sidebar-left .nav-collapse.collapse,
	body.modern-ui.mobile-nav-open #sidebar-left .nav-collapse,
	body.modern-ui.mobile-nav-open #sidebar-left .nav-collapse.collapse,
	body.modern-ui.mobile-nav-open #sidebar-left .nav-collapse.in {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		overflow: auto !important;
		padding: 8px !important;
		border: 1px solid var(--ui-border) !important;
		border-radius: 14px !important;
		box-shadow: 0 18px 34px rgba(8, 34, 54, 0.18) !important;
		background: var(--ui-surface-soft) !important;
		box-sizing: border-box !important;
	}

	.modern-ui .sidebar-nav > ul {
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .sidebar-nav > ul > li {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .sidebar-nav > ul > li > a,
	.modern-ui .sidebar-nav > ul > li > ul > li > a {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 14px !important;
		box-sizing: border-box !important;
	}

	.modern-ui .sidebar-nav > ul > li > a > i,
	.modern-ui .sidebar-nav > ul > li > ul > li > a > i {
		flex: 0 0 auto !important;
	}

	.modern-ui .sidebar-nav > ul > li > a > span,
	.modern-ui .sidebar-nav > ul > li > ul > li > a > span {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	.modern-ui .sidebar-nav > ul .badge {
		position: static !important;
		transform: none !important;
		float: none !important;
		margin-left: auto !important;
		right: auto !important;
		top: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
	}

	.modern-ui #content {
		margin-left: 0 !important;
		padding: 8px !important;
		border-radius: 12px !important;
	}

	.modern-ui .row-fluid [class*="span"] {
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin-left: 0 !important;
		box-sizing: border-box !important;
	}

	.modern-ui .box-header h2,
	.modern-ui h1,
	.modern-ui h2,
	.modern-ui h3 {
		word-break: break-word !important;
	}

	.modern-ui .form-horizontal .control-label,
	.modern-ui .control-group > .control-label,
	.modern-ui .control-label {
		float: none !important;
		display: block !important;
		width: 100% !important;
		padding-top: 0 !important;
		margin-bottom: 6px !important;
		text-align: left !important;
	}

	.modern-ui .form-horizontal .controls,
	.modern-ui .control-group > .controls,
	.modern-ui .controls {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui input[type="text"],
	.modern-ui input[type="password"],
	.modern-ui input[type="email"],
	.modern-ui input[type="number"],
	.modern-ui input[type="search"],
	.modern-ui input[type="tel"],
	.modern-ui input[type="url"],
	.modern-ui input[type="date"],
	.modern-ui textarea,
	.modern-ui select,
	.modern-ui .uneditable-input,
	.modern-ui .input-xlarge,
	.modern-ui .input-large,
	.modern-ui .input-medium,
	.modern-ui .input-small {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .controls .checkbox,
	.modern-ui .controls .checkboxleft,
	.modern-ui .controls .radio {
		display: flex !important;
		align-items: flex-start !important;
		gap: 8px !important;
		padding-left: 0 !important;
	}

	.modern-ui .controls .checkbox input,
	.modern-ui .controls .checkboxleft input,
	.modern-ui .controls .radio input {
		flex: 0 0 auto !important;
		margin-top: 2px !important;
	}

	.modern-ui .input-append,
	.modern-ui .input-prepend,
	.modern-ui .input-append.date,
	.modern-ui .input-prepend.date {
		display: flex !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.modern-ui .input-append .add-on,
	.modern-ui .input-prepend .add-on {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
	}

	.modern-ui .input-append input,
	.modern-ui .input-prepend input,
	.modern-ui .input-append select,
	.modern-ui .input-prepend select {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	.modern-ui .cleditorMain,
	.modern-ui .cleditorToolbar,
	.modern-ui .cleditorMain iframe,
	.modern-ui .cleditorMain textarea,
	.modern-ui .chzn-container,
	.modern-ui .chzn-container-single,
	.modern-ui .chzn-container-multi {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .cleditorMain {
		height: auto !important;
		min-height: 320px !important;
	}

	.modern-ui .cleditorToolbar {
		display: flex !important;
		flex-wrap: wrap !important;
		height: auto !important;
	}

	.modern-ui .cleditorGroup {
		float: none !important;
	}

	.modern-ui .cleditorMain iframe,
	.modern-ui .cleditorMain textarea {
		min-height: 220px !important;
	}

	.modern-ui .form-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.modern-ui .form-actions .btn,
	.modern-ui .form-actions button,
	.modern-ui .form-actions input[type="submit"],
	.modern-ui .form-actions input[type="button"],
	.modern-ui .form-actions input[type="reset"] {
		width: 100% !important;
		margin-left: 0 !important;
		box-sizing: border-box !important;
	}

	.modern-ui .help-inline,
	.modern-ui .help-block {
		display: block !important;
		margin-left: 0 !important;
		margin-top: 6px !important;
	}

	.modern-ui #pageTabs.tab-menu.nav-tabs {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		margin-top: 10px !important;
		margin-right: 0 !important;
		margin-bottom: 10px !important;
		padding: 0 !important;
		width: 100% !important;
	}

	.modern-ui #pageTabs.tab-menu.nav-tabs > li {
		float: none !important;
		display: block !important;
		margin: 0 !important;
	}

	.modern-ui #pageTabs.tab-menu.nav-tabs > li > a {
		display: block !important;
		border-radius: 8px !important;
		margin: 0 !important;
		padding: 8px 12px !important;
	}

	.modern-ui #pageTabs.tab-menu.nav-tabs > .active > a,
	.modern-ui #pageTabs.tab-menu.nav-tabs > .active > a:visited {
		margin-top: 0 !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		border-radius: 8px !important;
	}

	.modern-ui .student-summary-toolbar,
	.modern-ui .student-summary-toolbar .student-summary-chips,
	.modern-ui .student-summary-chips {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .student-summary-chip {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .student-summary-chip__label,
	.modern-ui .student-summary-chip__hint {
		word-break: break-word !important;
	}

	.modern-ui .box {
		margin: 6px 0 !important;
	}

	.modern-ui .box .box-content > .btn,
	.modern-ui .box .box-content > a.btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		margin-bottom: 10px !important;
	}

	.modern-ui .grid-wrap {
		overflow: visible !important;
	}

	.modern-ui .grid-mobile-filters {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		margin-bottom: 12px !important;
	}

	.modern-ui .grid-mobile-filter-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 34px !important;
		padding: 0 12px !important;
		border: 1px solid rgba(16, 50, 73, 0.12) !important;
		border-radius: 999px !important;
		background: #fff !important;
		color: #2b5068 !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
	}

	.modern-ui .grid-mobile-filter-btn.is-active {
		background: #f6a623 !important;
		border-color: #f6a623 !important;
		color: #203544 !important;
	}

	.modern-ui .grid-table {
		border: 0 !important;
		background: transparent !important;
	}

	.modern-ui .grid-table thead {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		border: 0 !important;
	}

	.modern-ui .grid-table,
	.modern-ui .grid-table tbody,
	.modern-ui .grid-table tr.grid-row,
	.modern-ui .grid-table td.grid-cell {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .grid-table tbody {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}

	.modern-ui .grid-table tr.grid-row {
		padding: 12px !important;
		border: 1px solid rgba(16, 50, 73, 0.12) !important;
		border-radius: 12px !important;
		background: #fff !important;
		box-shadow: 0 8px 18px rgba(10, 24, 39, 0.08) !important;
	}

	.modern-ui .grid-table td.grid-cell {
		display: grid !important;
		grid-template-columns: minmax(96px, 118px) minmax(0, 1fr) !important;
		align-items: start !important;
		gap: 8px !important;
		padding: 8px 0 !important;
		border-top: 1px solid rgba(16, 50, 73, 0.08) !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: transparent !important;
		font-size: 13px !important;
		line-height: 1.4 !important;
		white-space: normal !important;
		word-break: break-word !important;
	}

	.modern-ui .grid-table tr.grid-row > td.grid-cell:first-child {
		border-top: 0 !important;
		padding-top: 0 !important;
	}

	.modern-ui .grid-table td.grid-cell::before {
		content: attr(data-column-title) !important;
		display: block !important;
		color: #587286 !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		line-height: 1.35 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.03em !important;
	}

	.modern-ui .grid-table td.grid-cell[data-column-title=""]::before,
	.modern-ui .grid-table td.grid-cell[data-column-title=" " ]::before {
		content: "Akcije" !important;
	}

	.modern-ui .grid-table td.grid-cell center {
		text-align: left !important;
	}

	.modern-ui .grid-table td.grid-cell .btn {
		width: auto !important;
		min-width: 78px !important;
	}

	.modern-ui .grid-dropdown {
		position: fixed !important;
		left: 12px !important;
		right: 12px !important;
		top: 96px !important;
		width: auto !important;
		max-width: none !important;
		z-index: 1300 !important;
	}

	.modern-ui .grid-dropdown .grid-dropdown-inner {
		padding: 12px !important;
		border-radius: 14px !important;
		box-shadow: 0 18px 34px rgba(8, 34, 54, 0.18) !important;
	}

	.modern-ui .grid-dropdown .grid-filter-input,
	.modern-ui .grid-dropdown .grid-filter-type,
	.modern-ui .grid-dropdown .btn {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .grid-dropdown .grid-filter-buttons {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
	}

	.modern-ui .grid-empty-text td {
		display: block !important;
		padding: 14px !important;
	}

	.modern-ui .grid-footer,
	.modern-ui .grid-footer .pagination {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 8px !important;
	}

	.modern-ui .grid-footer .pagination {
		margin: 0 !important;
		padding: 0 !important;
	}

	.modern-ui .grid-footer .pagination ul {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.modern-ui .grid-footer .pagination ul > li {
		float: none !important;
	}

	.modern-ui .grid-footer .pagination ul > li > a,
	.modern-ui .grid-footer .pagination ul > li > span {
		border-radius: 8px !important;
	}

	.modern-ui .quick-button,
	.modern-ui .quick-button-small {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	.modern-ui ul.messagesList {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
	}

	.modern-ui ul.messagesList li {
		padding: 10px 12px !important;
	}

	.modern-ui ul.messagesList li .pm {
		display: flex !important;
		flex-direction: column !important;
		gap: 6px !important;
	}

	.modern-ui ul.messagesList li span,
	.modern-ui ul.messagesList li span.from,
	.modern-ui ul.messagesList li span.title,
	.modern-ui ul.messagesList li span.date {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	.modern-ui .message .header .from,
	.modern-ui .message .header .date,
	.modern-ui .message .content pre {
		word-break: break-word !important;
		white-space: pre-wrap !important;
	}

	.modern-ui .message,
	.modern-ui .message .header,
	.modern-ui .message .content {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui .pagination-pos {
		padding-top: 16px !important;
		word-break: break-word !important;
	}

	.modern-ui > .container-fluid > .clearfix {
		display: none !important;
	}

	.modern-ui footer {
		margin-top: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 8px 10px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.modern-ui footer p {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 0 !important;
	}

	#cc-notification,
	#cc-notification.cc-mobile,
	#cc-notification.cc-bottom {
		display: none !important;
	}

	#cc-tag {
		display: none !important;
	}

	.modern-ui .profiler-results,
	.modern-ui .profiler-button {
		display: none !important;
	}
}

@media (max-width: 480px) {
	.modern-ui .navbar .brand,
	.modern-ui a.brand span {
		font-size: 16px !important;
		max-width: calc(100vw - 112px) !important;
	}

	.modern-ui .mobile-menu-toggle {
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		padding: 0 !important;
		font-size: 0 !important;
	}

	.modern-ui .mobile-menu-toggle::before {
		content: "\2630";
		font-size: 16px !important;
		line-height: 1 !important;
	}

	.modern-ui .header-nav .btn,
	.modern-ui .header-nav a.btn.header-auth-btn,
	.modern-ui .header-nav .btn.header-user-btn,
	.modern-ui #dropdown-toggle-notifications {
		font-size: 11px !important;
		padding: 6px 8px !important;
	}
}