/* Variables */

/* All the new themes variables must be added in:
	Ignite.Framework\Constants\IgniteConfiguration\IgniteConfigurationKeys.cs
	WebApp\Views\Shared\_Theme.cshtml
	WebApp\WebTools\Theme.cs
 */
* {
	--primary-color-dark: #3950DD;
	--primary-color: var(--user-primary-color, #4862ff);
	--primary-color-lightest: var(--user-primary-color-lightest, #6799c3);
	--primary-color-extra-light: var(--user-primary-color-extra-light, #99bbd7);
	--secondary-color: var(--user-secondary-color, #bcbcbc);

	/* warning colors */
	--warning-color-dark: #dc2626;
	--warning-color: var(--user-warning-color, #ef4444);
	--warning-text-color: var(--user-warning-text-color, #fee2e2);
	--warning-color-inverted: var(--user-warning-color-inverted, #fee2e2);
	--warning-text-color-inverted: var(--user-warning-text-color-inverted, #ef4444);
	--warning-color-light: var(--user-warning-color-light, #f1988b);

	/* Success colors */
	--success-color: var(--user-success-color, #10b981);
	--success-text-color: var(--user-success-text-color, #d1fae5);
	--success-color-inverted: var(--user-success-color-inverted, #d1fae5);
	--success-text-color-inverted: var(--user-success-text-color-inverted, #10b981);

	--success-color-dark: var(--user-success-color-dark, #00A7B3);
	--success-color-light: var(--user-success-color-light, #85cba0);
	--sidebar-color: var(--user-sidebar-color, black);
	--inactive-color: var(--user-inactive-color, #1a202c);
	--inactive-light-color: var(--user-inactive-light-color, #d7dbec);
	--disabled-color: var(--user-disabled-color, #646269);
	--placeholder-color: var(--user-placeholder-color, #bbbbbb);
	--serenity-card-bg-color: rgba(243, 243, 244, 0.2);
	--serenity-card-bg-hover-color: rgba(237, 237, 237, 0.2);
	--serenity-card-border-color: #EEEEEE;
	--serenity-deep-blue: #050A2B;
}

/* Topbar styles */

.topbar {
	background: var(--primary-color);
}

.topbar .navbar-header {
	background-color: var(--primary-color);
}

.topbar ul.dropdown-user li a:hover {
	color: var(--primary-color);
}

/* Sidebar styles */

.left-sidebar,
.mini-sidebar .sidebar-nav .sidebarnav>li:hover>a,
.mini-sidebar .sidebar-nav .sidebarnav>li>ul {
	background-color: var(--sidebar-color);
}

.sidebar-nav {
	background-color: var(--sidebar-color);
}

/*.sidebar-nav>ul>li>a,
.sidebar-nav>ul>li>a i {
	color: white !important;
}

.sidebar-nav>ul>li>a.active,
.sidebar-nav>ul>li>a:hover {
	background-color: #1c1c1c;
}*/

.sidebar-nav .has-arrow::after {
	border-color: white;
}

.sidebar-nav>ul>li.active>a {
	border-color: var(--warning-color);
}

.sidebarnav li a {
	color: white;
}

/* Forms styles */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.floating-labels .bar::before,
.floating-labels .bar::after {
	background: var(--primary-color);
}

.form-control:focus {
	box-shadow: 0 0 0 .2rem rgba(61, 0, 229, .25);
}


/* Login styles */

#external-body-wrapper {
	background-color: var(--secondary-color);
}


/* ------------- Success Styles ------------- */
.text-success,
.label-light-success {
	color: var(--success-color) !important;
}

.bg-success,
.round.round-success,
.label-success,
.badge-success,
.jq-icon-success,
.pagination-circle li.active a,
.pagination-circle li a:hover,
.custom-control-input:checked~.custom-control-indicator,
.color-table.success-table thead th,
.color-bordered-table.success-bordered-table thead th,
.full-color-table.full-success-table thead th,
.full-color-table.full-success-table tr:hover {
	background-color: var(--success-color) !important;
	color: var(--success-text-color);
}

.btn-success.disabled,
.btn-success.disabled:hover {
	background: var(--success-color);
	border: 1px solid var(--success-color);
}

.btn-outline-success {
	color: var(--success-color);
	border-color: var(--success-color);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
	background: var(--success-color);
	border-color: var(--success-color);
}

.validate .form-control {
	border-color: var(--success-color);
}

.color-bordered-table.success-bordered-table {
	border: 2px solid var(--success-color);
}


/* ------------- Danger Styles ------------- */
.text-danger,
.label-light-danger {
	color: var(--warning-color) !important;
}

.bg-danger,
.round.round-danger,
.label-danger,
.badge-danger,
.notify .point,
.jq-icon-error,
.color-table.danger-table thead th,
.color-bordered-table.danger-bordered-table thead th,
.full-color-table.full-danger-table thead th,
.full-color-table.full-danger-table tr:hover {
	background-color: var(--warning-color) !important;
	color: var(--warning-text-color);
}

.notify .heartbit {
	border: 5px solid var(--warning-color);
}

.btn-danger.disabled,
.btn-danger.disabled:hover {
	background: var(--warning-color);
	border: 1px solid var(--warning-color);
}

.btn-outline-danger {
	color: var(--warning-color);
	border-color: var(--warning-color);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
	background: var(--warning-color);
	border-color: var(--warning-color);
}

.error .form-control {
	border-color: var(--warning-color);
}

.color-bordered-table.danger-bordered-table {
	border: 2px solid var(--warning-color);
}

.required:after {
	color: var(--warning-color);
}

/* ------------- Primary Styles ------------- */
.btn-themecolor,
.btn-themecolor.disabled {
	background: var(--primary-color);
	color: #ffffff;
	border: 1px solid var(--primary-color);
}

.btn-themecolor:hover,
.btn-themecolor.disabled:hover {
	background: var(--primary-color);
	opacity: 0.7;
	border: 1px solid var(--primary-color);
}

.btn-themecolor.active,
.btn-themecolor:focus,
.btn-themecolor.disabled:active,
.btn-themecolor.disabled:focus {
	background: var(--primary-color-dark);
}

.btn-link {
	color: var(--primary-color);
}

.btn-link:hover,
.btn-link.disabled:hover {
	color: var(--primary-color);
	opacity: 0.8;
}

.btn-link.active,
.btn-link:focus,
.btn-link.disabled:active,
.btn-link.disabled:focus {
	color: var(--primary-color-dark);
}

.text-themecolor {
	color: var(--primary-color-dark) !important;
}

html body .text-primary,
.label-light-primary {
	color: var(--primary-color) !important;
}

.bg-primary,
.round.round-primary,
.twitter-typeahead .tt-menu .tt-suggestion:hover,
.label-primary,
.badge-primary,
.paging_simple_numbers .pagination .paginate_button.active a,
.paging_simple_numbers .pagination .paginate_button:hover a,
.color-table.primary-table thead th,
.color-bordered-table.primary-bordered-table thead th,
.full-color-table.full-primary-table thead th,
.full-color-table.full-primary-table tr:hover {
	background-color: var(--primary-color) !important;
}

.btn-primary.disabled,
.btn-primary.disabled:hover {
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.btn-outline-primary {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.select2-container--default .select2-selection--multiple {
	border: 1px solid #d9d9d9;
}

.btn-outline-primary:hover,
.btn-outline-primary.focus,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	color: var(--primary-color);
	font-weight: 400;
	background-color: rgba(72, 98, 255, 0.2);
}

/* Info Styles */

a.text-info, a.text-info:focus, a.text-info:hover {
	color: var(--primary-color) !important;
}

/* Select2 */

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--primary-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: rgba(255, 255, 255, 0.8);
}

.color-bordered-table.primary-bordered-table {
	border: 2px solid var(--primary-color);
}

/* Dev Extreme - DataGrid action buttons */
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit-with-icons .dx-link,
.dx-treelist .dx-treelist-content .dx-treelist-table .dx-row .dx-command-edit-with-icons .dx-link {
	padding: 2px;
	width: auto;
	height: auto;
	color: white
}

.dx-appointment-icon {
	padding: 3px;
	width: auto;
	height: auto;
}

.btn-secondary {
	background-color: #fff;
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.multivalue-lookup-badge,
.dx-tag-content {
	color: white;
	background-color: var(--primary-color);
}

.multivalue-lookup-badge, .dx-tag-content {
	color: var(--primary-color);
	background-color: rgba(72, 98, 255, 0.2);
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 6px;
	padding-right: 19px;
}

.multivalue-lookup-badge, .dx-tag-container {
	gap: 4px;
	padding-bottom: 1px !important;
	padding-top: 1px !important;
}

.dx-tag-content .dx-tag-remove-button::before,
.dx-tag-content .dx-tag-remove-button::after {
	background: var(--primary-color);
}

.dx-tag-content .dx-tag-remove-button::before {
	right: 9px;
}
.dx-tag-content .dx-tag-remove-button::after {
	right: 5px;
}

/* Dev Extreme - Switch */
.dx-switch.dx-state-focused .dx-switch-container,
.dx-switch.dx-state-hover .dx-switch-container {
	border-color: rgb(215, 219, 236);
}

.dx-switch-handle::before,
.dx-switch.dx-state-focused .dx-switch-handle::before,
.dx-switch.dx-state-hover .dx-switch-handle::before,
.dx-switch.dx-state-focused.dx-state-active .dx-switch-handle::before,
.dx-switch.dx-state-focused.dx-switch-on-value .dx-switch-handle::before,
.dx-switch.dx-state-hover.dx-switch-on-value .dx-switch-handle::before {
	background-color: white;
}

.dx-switch.dx-state-focused .dx-switch-container {
	border: var(--primary-color) thin solid;
}

.dx-switch.dx-state-hover .dx-switch-container {
	background-color: rgb(215, 219, 236);
}

.dx-switch.dx-state-hover.dx-switch-on-value .dx-switch-container {
	background-color: var(--primary-color);
}

.dx-switch-on-value .dx-switch-handle::before {
	background-color: white;
}

.dx-switch-on-value .dx-switch-container {
	background-color: var(--primary-color);
}

.dx-switch.dx-state-readonly .dx-switch-container {
	border: none;
	background-color: var(--inactive-light-color);
	cursor: not-allowed;
}

.dx-switch.dx-state-readonly.dx-switch-on-value .dx-switch-container {
	background-color: rgba(72, 98, 255, 0.7);
}


/* dev ex calendar customizations */

.dx-scheduler-header-panel-cell.dx-scheduler-header-panel-current-time-cell,
.dx-scheduler-time-panel-cell.dx-scheduler-time-panel-current-time-celle {
	color: var(--primary-color);
}

.dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content,
.dx-calendar-navigator-next-view.dx-button .dx-icon,
.dx-calendar-navigator-previous-view.dx-button .dx-icon {
	color: var(--primary-color);
}

.dx-scheduler-date-time-indicator::before {
	color: var(--primary-color-lightest);
}

.dx-scheduler-header-panel-cell.dx-scheduler-header-panel-current-time-cell::before,
.dx-scheduler-time-panel-cell.dx-scheduler-time-panel-current-time-cell::before {
	background-color: var(--primary-color);
}

.dx-scheduler-appointment,
.dx-scheduler-appointment-collector.dx-button,
.dx-scheduler-appointment-collector.dx-button.dx-state-active,
.dx-scheduler-appointment-collector.dx-button.dx-state-focused,
.dx-scheduler-appointment-collector.dx-button.dx-state-hover {
	background-color: var(--primary-color);
}

.dx-scheduler-date-time-indicator,
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused,
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active {
	background-color: var(--primary-color-lightest);
}

.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-contoured-date,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today.dx-calendar-contoured-date {
	-webkit-box-shadow: inset 0 0 0 1px #bebebe, inset 0 0 0 1000px var(--primary-color);
	box-shadow: inset 0 0 0 1px #bebebe, inset 0 0 0 1000px var(--primary-color);
}

.dx-scheduler-date-table-cell.dx-scheduler-focused-cell {
	box-shadow: inset 0 0 0 1px var(--primary-color);
}

.dx-scheduler-date-table-cell.dx-state-focused {
	background-color: var(--primary-color-extra-light);
	opacity: 1;
}

.dx-calendar-cell.dx-calendar-selected-date,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today {
	box-shadow: inset 0 0 0 1000px var(--primary-color);
}

.dx-timeview-minutearrow {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2210%22%20height%3D%2266%22%20viewBox%3D%220%200%2010%2066%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%223%22%20width%3D%224%22%20height%3D%2264%22%20rx%3D%222%22%20fill%3D%22%236832FC%22%2F%3E%0A%3Ccircle%20cx%3D%225%22%20cy%3D%2261%22%20r%3D%223.5%22%20fill%3D%22%23fff%22%20stroke%3D%22%236832FC%22%20stroke-width%3D%223%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.dx-timeview-hourarrow {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%2248%22%20viewBox%3D%220%200%206%2048%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%226%22%20height%3D%2244%22%20rx%3D%223%22%20fill%3D%22%236832FC%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.dx-popup-wrapper.dx-scheduler-appointment-tooltip-wrapper .dx-tooltip-appointment-item .dx-tooltip-appointment-item-marker-body,
.dx-scheduler-overlay-panel .dx-tooltip-appointment-item .dx-tooltip-appointment-item-marker-body {
	background: var(--primary-color);
}

/* end dev ex calendar customizations */

/* bootstrap datetimepicker*/
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
	background-color: var(--primary-color);
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
	background: var(--primary-color);
}

/* end bootstrap datetimepicker */