/* 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: var(--user-primary-color-dark, #2d00ac);
		--primary-color: var(--user-primary-color, #3d00e5);
		--primary-color-light: var(--user-primary-color-light, #6832FC);
		--primary-color-lightest: var(--user-primary-color-lightest, #b4a3e4);
		--primary-color-extra-light: var(--user-primary-color-extra-light, #e2dbf5);
		--secondary-color: var(--user-secondary-color, #678dc9);
		--warning-color: var(--user-warning-color, #e5033d);
		--success-color: var(--user-success-color, #00D6DE);
		--sidebar-color: var(--user-sidebar-color, black);
		--inactive-color: var(--user-inactive-color, #1a202c);
		--disabled-color: var(--user-disabled-color, #646269);
		--placeholder-color: var(--user-placeholder-color, #bbbbbb);
}

/* 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; 
}

.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; 
}

.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-light);
  color: #ffffff;
  border: 1px solid var(--primary-color-light); 
}

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

.btn-themecolor.active, 
.btn-themecolor:focus,
.btn-themecolor.disabled:active,
.btn-themecolor.disabled:focus {
    background: 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);
}

.btn-outline-primary:hover, 
.btn-outline-primary.focus,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.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: var(--secondary-color);
		color: white;
}

/* Dev Extreme - Switch */
.dx-switch.dx-state-focused .dx-switch-container,
.dx-switch.dx-state-hover .dx-switch-container {
	border-color: var(--primary-color);
} 

.dx-switch-handle::before, 
.dx-switch.dx-state-focused .dx-switch-handle::before,
.dx-switch.dx-state-hover .dx-switch-handle::before {
	background-color: var(--disabled-color);
}

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

.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: var(--primary-color);
}



/* 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-light);
}

.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-light);
}

.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-light);
	box-shadow: inset 0 0 0 1px #bebebe,inset 0 0 0 1000px var(--primary-color-light);
}

.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-light);
}

.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-light);
}

/* 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-light);
}

/* end bootstrap datetimepicker */