:root {
	--bg-color: #e8edf2;
	--btn-primary: #0f2344;
	--btn-secondary: #1f78ff;
	--secondary: #0f2344;
	--navbar-bg: #0f2344;
	--text-btn-color: white;
	--table-border-color: #1f78ff40;
	--btn-default-hover-bg: white;
	--sidebar-select-color: #1f78ff20;

	/* Precivian colors */
	--precivian-navy: #0f2344;
	--precivian-blue: #1f78ff;
	--precivian-green: #15b86a;
	--precivian-light: #eaf3ff;

	--precivian-gradient: linear-gradient(90deg, #0f2344 0%, #1f78ff 58%, #15b86a 100%);
	--precivian-gradient-hover: linear-gradient(90deg, #0a1a34 0%, #1767dd 58%, #0fa85f 100%);

	--checkbox-gradient: linear-gradient(90deg, #0f2344 0%, #1f78ff 58%, #15b86a 100%);
	--text-base: 14px;
}

/* login page */

[data-path="login"] .navbar-light {
	border-bottom: 1px solid var(--blue-400) !important;
	background: white;
}

[data-path="login"] .web-footer {
	border-top: 1px solid var(--blue-400) !important;
}

.for-login .page-card {
	border: 1px solid var(--blue-400) !important;
}

.for-login .btn-login {
	background: var(--precivian-gradient) !important;
	border: none !important;
	color: white;
}

.for-login .btn-login:hover {
	background: var(--precivian-gradient-hover) !important;
	border: none !important;
	color: white;
}

.for-login .page-card-head h4 {
	color: black !important;
}

.for-login .form-control,
.for-login .form-control {
	background-color: white !important;
	border: solid 1px var(--blue-400) !important;
}

.for-login .form-control:focus,
.for-login .form-control:hover {
	box-shadow: 0 0 0 1px var(--blue-300) !important;
}

.for-login .page-card .page-card-body .forgot-password-message > * {
	color: var(--precivian-blue) !important;
}

/* NAVBAR DESIGN */

.navbar,
.navbar.navbar-light {
	background: var(--precivian-gradient) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	box-shadow: 0 2px 10px rgba(15, 35, 68, 0.18) !important;
}

.navbar .navbar-expand span,
.navbar .navbar-expand li a,
#navbar-breadcrumbs a,
.navbar .nav-item button.nav-link,
.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .btn-reset,
.navbar .avatar,
.navbar svg,
.navbar use {
	color: #ffffff !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

#navbar-breadcrumbs li.disabled a {
	color: rgba(255, 255, 255, 0.65) !important;
}

.nav-tabs {
	border: none;
}

.search-bar span {
	color: #ffffff !important;
}

.navbar .search-bar input,
.navbar .form-control {
	background: rgba(255, 255, 255, 0.14) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	color: #ffffff !important;
	border-radius: 14px !important;
	min-height: 40px !important;
	box-shadow: none !important;
}

.navbar .search-bar input::placeholder,
.navbar .form-control::placeholder {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* top-right dropdown text visible */
.navbar .dropdown-menu,
.navbar .dropdown-menu a,
.navbar .dropdown-menu .dropdown-item,
.dropdown-menu,
.dropdown-menu a,
.dropdown-menu .dropdown-item {
	color: #334155 !important;
}

.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu .dropdown-item:hover,
.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover {
	background: #f5f8ff !important;
	color: #0f2344 !important;
}

/* PAGE DESIGN */

body,
.page-container {
	background-color: var(--bg-color) !important;
}

.page-head {
	background-color: white !important;
}

.es-icon {
	@extend .icon;
	fill: var(--precivian-navy) !important;
	stroke: var(--precivian-navy) !important;
}

.page-content .layout-main-section {
	background-color: white !important;
	border-radius: 18px !important;
}

.datatable .dt-cell {
	background-color: #fff !important;
}

/* DASHBOARD DESIGN */

.layout-side-section,
.standard-sidebar,
.desk-sidebar,
.desk-sidebar .sidebar-items {
	background: #ffffff !important;
	border-right: 1px solid #e8edf5 !important;
	box-shadow: none !important;
}

.layout-side-section {
	padding-top: 6px !important;
}

.sidebar-section-label,
.sidebar-group-label,
.layout-side-section .sidebar-label {
	color: #96a1b5 !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	font-weight: 600 !important;
	padding-left: 10px !important;
	margin: 2px 6px 6px !important;
}

.desk-sidebar-item,
.layout-side-section .desk-sidebar-item,
.layout-side-section .standard-sidebar-item,
.standard-sidebar-item,
.standard-sidebar-item .item-anchor,
.layout-side-section a.item-anchor {
	background: transparent !important;
	color: #52627a !important;
	border-radius: 16px !important;
	margin: 2px 8px !important;
	min-height: 34px !important;
	display: flex !important;
	align-items: center !important;
	padding: 4px 12px !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 1.1 !important;
	border: none !important;
	box-shadow: none !important;
	transition: all 0.18s ease !important;
}

.layout-side-section .desk-sidebar-item::before,
.layout-side-section .desk-sidebar-item::after,
.layout-side-section .standard-sidebar-item::before,
.layout-side-section .standard-sidebar-item::after,
.standard-sidebar-item::before,
.standard-sidebar-item::after {
	display: none !important;
	content: none !important;
}

.layout-side-section .desk-sidebar-item .sidebar-item-label,
.layout-side-section .standard-sidebar-item .sidebar-item-label,
.standard-sidebar-item .sidebar-item-label {
	margin-left: 8px !important;
	color: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}

.desk-sidebar-item:hover,
.layout-side-section .desk-sidebar-item:hover,
.layout-side-section .standard-sidebar-item:hover,
.standard-sidebar-item:hover,
.standard-sidebar-item .item-anchor:hover {
	background: #eef7ff !important;
	color: var(--precivian-blue) !important;
	transform: translateX(1px);
}

.desk-sidebar-item .icon,
.desk-sidebar-item svg,
.desk-sidebar-item use,
.desk-sidebar-item svg path,
.layout-side-section .desk-sidebar-item .icon,
.layout-side-section .desk-sidebar-item svg,
.layout-side-section .desk-sidebar-item use,
.layout-side-section .desk-sidebar-item svg path,
.layout-side-section .standard-sidebar-item .icon,
.layout-side-section .standard-sidebar-item svg,
.layout-side-section .standard-sidebar-item use,
.layout-side-section .standard-sidebar-item svg path,
.standard-sidebar-item .icon,
.standard-sidebar-item svg,
.standard-sidebar-item use,
.standard-sidebar-item svg path {
	color: #6b7280 !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	opacity: 1 !important;
}

.desk-sidebar-item svg,
.layout-side-section .desk-sidebar-item svg,
.layout-side-section .standard-sidebar-item svg,
.standard-sidebar-item svg {
	width: 15px !important;
	height: 15px !important;
	min-width: 15px !important;
	min-height: 15px !important;
}

/* selected sidebar item */
.desk-sidebar-item.selected,
.layout-side-section .desk-sidebar-item.selected,
.layout-side-section .standard-sidebar-item.selected,
.standard-sidebar-item.selected,
.standard-sidebar-item.active,
.layout-side-section .selected > .item-anchor,
.layout-side-section .desk-sidebar-item.router-link-active {
	background: var(--precivian-gradient) !important;
	color: #ffffff !important;
	border-radius: 18px !important;
	box-shadow: 0 8px 18px rgba(31, 120, 255, 0.2) !important;
	border: none !important;
	outline: none !important;
	transform: none !important;
}

.desk-sidebar-item.selected *,
.layout-side-section .desk-sidebar-item.selected *,
.layout-side-section .standard-sidebar-item.selected *,
.standard-sidebar-item.selected *,
.standard-sidebar-item.active *,
.layout-side-section .selected > .item-anchor *,
.layout-side-section .desk-sidebar-item.router-link-active * {
	color: #ffffff !important;
	background: transparent !important;
	box-shadow: none !important;
}

.desk-sidebar-item.selected .icon,
.desk-sidebar-item.selected svg,
.desk-sidebar-item.selected use,
.desk-sidebar-item.selected svg path,
.layout-side-section .desk-sidebar-item.selected .icon,
.layout-side-section .desk-sidebar-item.selected svg,
.layout-side-section .desk-sidebar-item.selected use,
.layout-side-section .desk-sidebar-item.selected svg path,
.layout-side-section .standard-sidebar-item.selected .icon,
.layout-side-section .standard-sidebar-item.selected svg,
.layout-side-section .standard-sidebar-item.selected use,
.layout-side-section .standard-sidebar-item.selected svg path,
.standard-sidebar-item.selected .icon,
.standard-sidebar-item.selected svg,
.standard-sidebar-item.selected use,
.standard-sidebar-item.selected svg path,
.standard-sidebar-item.active .icon,
.standard-sidebar-item.active svg,
.standard-sidebar-item.active use,
.standard-sidebar-item.active svg path {
	color: #ffffff !important;
	fill: #ffffff !important;
	stroke: #ffffff !important;
	opacity: 1 !important;
}

.layout-side-section .desk-sidebar-item .right-icon,
.layout-side-section .desk-sidebar-item .drop-icon,
.layout-side-section .standard-sidebar-item .right-icon,
.layout-side-section .standard-sidebar-item .drop-icon,
.layout-side-section .standard-sidebar-item .indicator {
	color: inherit !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

.widget.links-widget-box,
.widget.dashboard-widget-box {
	border: 1px solid rgba(31, 120, 255, 0.25);
	border-radius: 14px;
}

.widget.links-widget-box .widget-head .widget-label .widget-title {
	background-color: white;
	color: var(--precivian-navy) !important;
}

.widget-body .link-item {
	margin-bottom: 5px !important;
}

.icon-md {
	width: 30px;
	height: 30px;
}

.onboard-spotlight {
	color: var(--precivian-blue) !important;
}

a.onboard-spotlight .link-content:hover {
	color: var(--precivian-green) !important;
}

.dropdown-notifications .es-icon {
	@extend .icon;
	fill: white !important;
	stroke: white !important;
}

/* LIST GRID DESIGN */

.list-filters .form-control,
.standard-filter-section .form-control,
.standard-filter-section .form-control {
	box-shadow: 0 0 0 1px rgba(124, 124, 124, 0.25) !important;
}

.level.list-row-head,
.level.list-row-head .level-item {
	font-weight: bold;
	background-color: var(--gray-300);
}

.list-row-container .list-row:hover {
	background-color: var(--sidebar-select-color);
}

.list-filters .form-control:focus,
.list-filters .form-control:hover,
.standard-filter-section .form-control:focus,
.standard-filter-section .form-control:hover {
	box-shadow: 0 0 0 2px rgba(31, 120, 255, 0.18) !important;
}

/* FORM DESIGN */

.form-control,
.frappe-control .ql-editor:not(.read-mode) {
	box-shadow: 0 0 0 1px rgba(124, 124, 124, 0.25) !important;
}

.ace_editor {
	box-shadow: 0 0 0 1px rgba(124, 124, 124, 0.25) !important;
}

.ql-editor:focus,
.ace_editor:focus {
	box-shadow: 0 0 0 2px rgba(31, 120, 255, 0.2) !important;
}

.form-control:focus,
.form-control:hover {
	box-shadow: 0 0 0 2px rgba(31, 120, 255, 0.22) !important;
}

.form-control:focus {
	background-color: rgba(31, 120, 255, 0.06);
}

.frappe-control:not([data-fieldtype="MultiSelectPills"]):not([data-fieldtype="Table MultiSelect"]).has-error input:hover,
.frappe-control:not([data-fieldtype="MultiSelectPills"]):not([data-fieldtype="Table MultiSelect"]).has-error input:focus {
	box-shadow: 0 0 0 2px #eb909180 !important;
}

.frappe-control:not([data-fieldtype="MultiSelectPills"]):not([data-fieldtype="Table MultiSelect"]).has-error input {
	box-shadow: none !important;
}

option {
	background-color: white !important;
}

.grid-heading-row .filter-row,
.awesomplete [role="listbox"] {
	background-color: white !important;
}

.grid-row-open {
	box-shadow: 0 0 0 3px var(--precivian-blue) !important;
}

.awesomplete [role="option"]:hover,
.awesomplete li:hover {
	background-color: var(--gray-300) !important;
}

input[type="checkbox"]:checked {
	background-color: var(--precivian-blue) !important;
	background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"), var(--checkbox-gradient) !important;
}

.datepicker {
	background-color: var(--bg-color) !important;
}

/* BUTTONS DESIGN */

.btn {
	border-radius: 0.25rem !important;
}

.btn.btn-primary,
.btn-primary,
.page-actions .btn-primary,
.page-actions .btn.btn-primary,
.btn-new-doc,
.btn.btn-new-doc {
	background: var(--precivian-gradient) !important;
	border: none !important;
	color: var(--text-btn-color) !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 14px rgba(31, 120, 255, 0.24) !important;
	transition: all 0.2s ease !important;
}

.btn.btn-primary:hover,
.btn-primary:hover,
.page-actions .btn-primary:hover,
.btn-new-doc:hover,
.btn.btn-new-doc:hover {
	background: var(--precivian-gradient-hover) !important;
	border: none !important;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(31, 120, 255, 0.32) !important;
}

.standard-actions .btn.btn-secondary,
.custom-actions .btn.btn-default {
	background: var(--secondary) !important;
	border: solid 2px var(--secondary) !important;
	color: var(--text-btn-color);
}

.standard-actions .btn.btn-secondary:hover,
.custom-actions .btn.btn-default:hover {
	background: var(--btn-default-hover-bg) !important;
	border: solid 2px var(--secondary) !important;
	color: var(--text-color);
}

.btn.btn-secondary .es-icon {
	@extend .icon;
	fill: white !important;
	stroke: white !important;
}

.btn.btn-default,
.btn.grid-add-row {
	background: var(--btn-default-hover-bg) !important;
	border: solid 1px var(--precivian-blue) !important;
	color: var(--text-color);
}

.custom-actions .btn {
	font-size: 12px !important;
}

/* List View / active toggle button */
.btn-group .btn.active,
.view-switcher .btn.active,
.list-view-actions .btn.active {
	background: var(--precivian-gradient) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
}

.btn-group .btn,
.view-switcher .btn,
.list-view-actions .btn {
	border: 1px solid #dbe3ef !important;
	background: #ffffff !important;
	color: #52627a !important;
	border-radius: 10px !important;
}

.btn-group .btn:hover,
.view-switcher .btn:hover {
	background: #eef7ff !important;
	color: var(--precivian-blue) !important;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
div#driver-popover-item .driver-popover-footer .btn-group > button:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn,
div#driver-popover-item .driver-popover-footer .btn-group > .btn-group:not(:last-child) > button {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:not(:first-child),
div#driver-popover-item .driver-popover-footer .btn-group > button:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn,
div#driver-popover-item .driver-popover-footer .btn-group > .btn-group:not(:first-child) > button {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* POS DESIGN */

.point-of-sale-app section {
	min-height: 40rem !important;
}

.client-wrapper ul {
	padding-left: 22px;
	margin-top: 0;
	margin-bottom: 0;
}

.client-wrapper li {
	float: left;
	list-style-type: none;
}

.client-wrapper li a {
	display: inline-block;
	text-decoration: none;
	width: 100%;
	background-color: var(--gray-300) !important;
	color: black;
	text-align: center;
}

.client-wrapper li a.plus-pos,
.client-wrapper li a.plus-pos:focus,
.client-wrapper li a.plus-pos:hover {
	background-color: var(--gray-400) !important;
}

.client-wrapper li a.minus-pos,
.client-wrapper li a.minus-pos:focus,
.client-wrapper li a.minus-pos:hover {
	background-color: var(--red-400) !important;
}

.client-wrapper li a:focus,
.client-wrapper li a:hover {
	background-color: var(--gray-400) !important;
	color: black;
}

.client-wrapper li a.active {
	background-color: white !important;
	color: black;
}

/* MOBILE */

@media (max-width: 768px) {
	.layout-side-section .desk-sidebar-item,
	.layout-side-section .standard-sidebar-item,
	.standard-sidebar-item,
	.standard-sidebar-item .item-anchor,
	.desk-sidebar-item {
		min-height: 34px !important;
		font-size: 12px !important;
		padding: 4px 10px !important;
	}

	.navbar .search-bar input,
	.navbar .form-control {
		min-height: 36px !important;
	}
}