/*	################################################################
    This file attempt to override mailwizz styling
################################################################# */

/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
	font-family: SourceSansPro-Regular;
	src: url("../fonts/source-sans-pro/SourceSansPro-Regular.ttf");
}

@font-face {
	font-family: SourceSansPro-Bold;
	src: url("../fonts/source-sans-pro/SourceSansPro-Bold.ttf");
}

@font-face {
	font-family: SourceSansPro-SemiBold;
	src: url("../fonts/source-sans-pro/SourceSansPro-SemiBold.ttf");
}

/*//////////////////////////////////////////////////////////////////
  [ RESTYLE TAG ]*/

body,
html {
	height: 100%;
	font-family: SourceSansPro-Regular, sans-serif;
}
body {
	--mz-primary: var(--primary-light);
	--mz-light-primary: var(--primary-light-faint);
}

body.dark {
	--mz-primary: var(--primary-dark);
	--mz-light-primary: var(--primary-dark-faint);
}

/*---------------------------------------------*/

a {
	font-family: SourceSansPro-Regular;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	color: var(--primary-light);
}

a:hover,
a:active,
a:focus {
	color: var(--primary-dark);
}

p {
	font-family: SourceSansPro-Regular;
}

.boxes-mw-wrapper.row .col-lg-1 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-10 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-11 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-12 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-2 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-3 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-4 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-5 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-6 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-7 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-8 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-9 .small-box .icon,
.boxes-mw-wrapper.row .col-md-1 .small-box .icon,
.boxes-mw-wrapper.row .col-md-10 .small-box .icon,
.boxes-mw-wrapper.row .col-md-11 .small-box .icon,
.boxes-mw-wrapper.row .col-md-12 .small-box .icon,
.boxes-mw-wrapper.row .col-md-2 .small-box .icon,
.boxes-mw-wrapper.row .col-md-3 .small-box .icon,
.boxes-mw-wrapper.row .col-md-4 .small-box .icon,
.boxes-mw-wrapper.row .col-md-5 .small-box .icon,
.boxes-mw-wrapper.row .col-md-6 .small-box .icon,
.boxes-mw-wrapper.row .col-md-7 .small-box .icon,
.boxes-mw-wrapper.row .col-md-8 .small-box .icon,
.boxes-mw-wrapper.row .col-md-9 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-1 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-10 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-11 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-12 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-2 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-3 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-4 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-5 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-6 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-7 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-8 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-9 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-1 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-10 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-11 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-12 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-2 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-3 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-4 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-5 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-6 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-7 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-8 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-9 .small-box .icon {
	color: var(--primary-light-faint);
}

.box-dashboard .progress-box .info .name a,
.box-dashboard .progress-box .info .number a,
.box-dashboard ul.custom-list li span.cl-span a {
	color: var(--primary-light);
}

.modal-info .modal-header,
.modal-info .modal-footer {
	background-color: var(--primary-light) !important;
	border-color: var(--primary-light-faint) !important;
}

.bg-blue,
.popover .popover-title {
	background-color: var(--primary-light) !important;
}

.wizard ul li.complete {
	color: var(--primary-light);
	background-color: var(--primary-light);
}

.wizard ul li.complete .chevron:before {
	border-left: 14px solid var(--primary-light);
}

/*---------------------------------------------*/

input::-webkit-input-placeholder {
	color: var(--primary-dark) !important;
}

input:-moz-placeholder {
	color: var(--primary-dark) !important;
}

input::-moz-placeholder {
	color: var(--primary-dark) !important;
}

input:-ms-input-placeholder {
	color: var(--primary-dark) !important;
}

textarea::-webkit-input-placeholder {
	color: var(--primary-dark) !important;
}

textarea:-moz-placeholder {
	color: var(--primary-dark) !important;
}

textarea::-moz-placeholder {
	color: var(--primary-dark) !important;
}

textarea:-ms-input-placeholder {
	color: var(--primary-dark) !important;
}

.text-capitalize {
	text-transform: capitalize;
}

/*------------------------------------------------------------------
[ Input ]*/

input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="number"] {
	font-family: SourceSansPro-Bold;
	font-size: 16px;
	color: var(--primary-dark);
	line-height: 1.2;
	display: block;
	width: 100%;
	height: 62px;
	background: transparent;
	padding: 0 20px 0 23px;
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="number"] input[type="file"],
textarea,
.form-control {
	border-radius: 20px;
	color: var(--primary-dark);
}

select {
	border-radius: var(--input-radius);
}

input.focus-visible:focus {
	border-color: var(--primary-light);
	box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
}

/*//////////////////////////////////////////////////////////////////
  [ buttons ]*/

.btn {
	padding-right: 20px;
	padding-left: 20px;
	border-radius: var(--button-radius) !important;
}

.btn.btn-primary,
.btn-primary {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--primary-light);
	font-family: SourceSansPro-SemiBold;
	font-size: 14px;
	color: #fff;
	line-height: 1.2;
	text-transform: uppercase;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	box-shadow: 0 10px 30px 0px var(--primary-dark-gradient);
	-moz-box-shadow: 0 10px 30px 0px var(--primary-dark-gradient);
	-webkit-box-shadow: 0 10px 30px 0px var(--primary-dark-gradient);
	-o-box-shadow: 0 10px 30px 0px var(--primary-dark-gradient);
	-ms-box-shadow: 0 10px 30px 0px var(--primary-dark-gradient);
}

.btn.btn-primary:hover,
.btn-primary:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
	background-color: var(--primary-dark);
	box-shadow: 0 10px 30px 0px var(--primary-light-gradient);
	-moz-box-shadow: 0 10px 30px 0px var(--primary-light-gradient);
	-webkit-box-shadow: 0 10px 30px 0px var(--primary-light-gradient);
	-o-box-shadow: 0 10px 30px 0px var(--primary-light-gradient);
	-ms-box-shadow: 0 10px 30px 0px var(--primary-light-gradient);
}

.btn-group.dropup.dropdown-button-column
	ul.dropdown-menu
	li
	a.btn.btn-primary:hover,
.nav-tabs > li.active:before {
	background-color: var(--primary-dark);
}

.nav-tabs > li > a:hover {
	color: var(--primary-dark);
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
	border-bottom-left-radius: var(--button-radius);
	border-top-left-radius: var(--button-radius);
}

.btn.btn-danger,
.btn.btn-primary {
	border-radius: var(--button-radius);
}

/*//////////////////////////////////////////////////////////////////
  [ login ]*/

.login-flex {
	height: 100vh;
	overflow: auto;
	align-items: center;
	display: flex;
}

.login-billboard {
	width: 100% !important;
	min-height: 100vh;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 15px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	z-index: 1;
}

.login-billboard::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--secondary-light);
	background: -webkit-linear-gradient(
		var(--gradient-dir-left),
		var(--secondary-light),
		var(--primary-dark-gradient)
	);
	background: -o-linear-gradient(
		var(--gradient-dir-left),
		var(--secondary-light),
		var(--primary-dark-gradient)
	);
	background: -moz-linear-gradient(
		var(--gradient-dir-left),
		var(--secondary-light),
		var(--primary-dark-gradient)
	);
	background: linear-gradient(
		var(--gradient-dir-left),
		var(--secondary-light),
		var(--primary-dark-gradient)
	);
	pointer-events: none;
}

.login-form {
	width: 390px !important;
	height: max-content !important;
	background: var(--light);
	border-radius: 10px;
	overflow: hidden;
	z-index: 10;
	margin: 0 auto;
	box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
}

body.ctrl-guest.act-index div.login-flex > div.login-form > div.login-box-body {
	margin: 0 auto;
	padding: 80px 55px 80px 55px;
	overflow: hidden;
}

body.ctrl-guest.act-index
	div.login-flex
	> div.login-form
	> div.login-box-body
	.col-lg-12
	> .pull-left {
	margin-bottom: 10px;
}

body.ctrl-guest.act-index
	div.login-flex
	> div.login-form
	> div.login-box-body
	.col-lg-12
	> .pull-right {
	text-align: center;
	float: none !important;
}

body.ctrl-guest.act-index
	.login-flex
	.login-form
	.login-box-body
	.login-box-msg {
	display: block;
	font-family: SourceSansPro-Bold;
	font-size: 30px;
	color: var(--primary-dark);
	line-height: 1.2;
	text-align: center;
}

/*//////////////////////////////////////////////////////////////////
  [ Responsive ]*/

@media (max-width: 480px) {
	.login-form {
		margin: 0 20px;
	}

	body.ctrl-guest.act-index
		div.login-flex
		> div.login-form
		> div.login-box-body {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.mt-30 {
	margin-top: 30px;
}

.mt-60 {
	margin-top: 60px;
}

td img.img-thumbnail {
	max-width: 100px;
}

/*------------------------------------------------------------------
  [ Alert validate ]*/

.errorMessage {
	font-family: SourceSansPro-Bold;
}

/*//////////////////////////////////////////////////////////////////
  [ Sidebar default]*/

.wrapper,
.main-sidebar,
.left-side,
.wrapper nav {
	background-color: var(--light) !important;
	box-shadow: var(--primary-box-shadow) var(--primary-box-shadow-color);
}

.sidebar {
	background-color: transparent !important;
}

.sidebar ul {
	padding-top: 1.45rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.sidebar ul li {
	margin: var(--side-bar-spacing);
}

.sidebar .sidebar-menu > li > a,
.sidebar .user-panel > .info > p {
	color: var(--light);
	font-family: SourceSansPro-Regular, sans-serif;
	padding: 0.8125rem 1.937rem 0.8125rem 1rem;
	background-image: linear-gradient(
		var(--gradient-dir-left),
		var(--primary-light),
		var(--primary-dark),
		var(--secondary-light)
	);
	-webkit-background-clip: text;
	color: transparent;
}

/* big user panel */

.sidebar .user-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: none;
	box-shadow: var(--primary-box-shadow) var(--primary-box-shadow-color);
	padding-top: 40px;
	padding-bottom: 20px;
}

.sidebar .user-panel > div {
	float: none !important;
}

.sidebar .user-panel > .info {
	position: unset;
}

/* big user panel end */

.sidebar .user-panel > .info {
	padding-top: 5px;
}

.sidebar .sidebar-menu li a i,
.sidebar .sidebar-menu li a i {
	color: var(--primary-dark);
}

.sidebar li.active,
.sidebar li:hover,
.sidebar .sidebar-menu > li > .treeview-menu {
	background: var(--secondary-light);
	background: -webkit-linear-gradient(
		var(--gradient-dir-left),
		var(--primary-light),
		var(--primary-dark-gradient)
	);
	background: -o-linear-gradient(
		var(--gradient-dir-left),
		var(--primary-light),
		var(--primary-dark-gradient)
	);
	background: -moz-linear-gradient(
		var(--gradient-dir-left),
		var(--primary-light),
		var(--primary-dark-gradient)
	);
	background: linear-gradient(
		var(--gradient-dir-left),
		var(--primary-light),
		var(--primary-dark-gradient)
	);
	border-radius: var(--active-nav-radius);
}

.sidebar .sidebar-menu > li:hover > a,
.sidebar .sidebar-menu > li.active > a,
.sidebar .sidebar-menu > li > .treeview-menu li a {
	color: var(--light);
	font-size: var(--big-text-size);
	font-weight: 900;
	background: transparent;
	border: none;
	white-space: break-spaces;
}

.sidebar .sidebar-menu li:hover a i,
.sidebar .sidebar-menu li.active > a i,
.sidebar .sidebar-menu > li > .treeview-menu li a i:first-child {
	color: var(--light) !important;
}

.sidebar .sidebar-menu li a i:first-child,
.sidebar .sidebar-menu > li > .treeview-menu li a i:first-child {
	margin-right: 1rem;
}

.sidebar .sidebar-menu li a > i:first-child {
	font-size: var(--big-text-size);
}

/*//////////////////////////////////////////////////////////////////
  [ Sidebar deep ]*/

.ruby-sidebar-dark .wrapper,
.ruby-sidebar-dark .main-sidebar,
.ruby-sidebar-dark .left-side {
	background: var(--secondary-light);
	background: -webkit-linear-gradient(
		var(--gradient-dir-left),
		var(--secondary-light),
		var(--primary-dark-gradient)
	);
	background: -o-linear-gradient(
		var(--gradient-dir-left),
		var(--secondary-light),
		var(--primary-dark-gradient)
	);
	background: -moz-linear-gradient(
		var(--gradient-dir-left),
		var(--secondary-light),
		var(--primary-dark-gradient)
	);
	background: linear-gradient(
		var(--gradient-dir-left),
		var(--secondary-light),
		var(--primary-dark-gradient)
	);
}

.ruby-sidebar-dark .sidebar .sidebar-menu > li > a {
	color: var(--light);
}

.ruby-sidebar-dark .sidebar li.active,
.ruby-sidebar-dark .sidebar li:hover {
	background: var(--light);
}

.ruby-sidebar-dark .sidebar .sidebar-menu > li:hover > a,
.ruby-sidebar-dark .sidebar .sidebar-menu > li.active > a,
.ruby-sidebar-dark .sidebar .sidebar-menu > li > .treeview-menu li a {
	color: var(--primary-dark);
	font-size: var(--big-text-size);
	font-weight: 900;
}

.ruby-sidebar-dark .sidebar .sidebar-menu li:hover a i,
.ruby-sidebar-dark .sidebar .sidebar-menu li.active > a i,
.sidebar .sidebar-menu > li > .treeview-menu li a i:first-child {
	color: var(--primary-dark) !important;
}

/*//////////////////////////////////////////////////////////////////
  [ Sidebar mini ]*/

@media (min-width: 768px) {
	.sidebar-mini.sidebar-collapse .main-sidebar {
		width: var(--side-bar-mini-width) !important;
	}

	.sidebar-mini.sidebar-collapse .content-wrapper,
	.sidebar-mini.sidebar-collapse .right-side,
	.sidebar-mini.sidebar-collapse .main-footer,
	.sidebar-mini.sidebar-collapse .main-header .navbar {
		margin-left: var(--side-bar-mini-width) !important;
	}

	.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
		background-color: var(--primary-dark) !important;
	}

	.sidebar-mini.sidebar-collapse .sidebar-menu > li {
		margin: 0;
		margin-bottom: 10px;
	}

	.sidebar-mini.sidebar-collapse .sidebar-menu li a i:first-child,
	.sidebar-mini.sidebar-collapse
		.sidebar-menu
		> li
		> .treeview-menu
		li
		a
		i:first-child {
		margin-right: 0;
	}

	.sidebar-mini.sidebar-collapse .sidebar-menu > li > a,
	.sidebar-mini.sidebar-collapse .user-panel > .info > p {
		padding: 1rem;
		border: none;
		text-align: center;
	}

	.sidebar-mini.sidebar-collapse .sidebar-menu .treeview-menu,
	.sidebar-mini.sidebar-collapse .sidebar-menu > li a span {
		text-align: left;
	}

	.sidebar-mini.sidebar-collapse
		.sidebar-menu
		li.treeview
		a
		.pull-right-container {
		display: none;
	}

	.sidebar-mini.sidebar-collapse
		.sidebar-menu
		> li:hover
		> a
		> span:not(.pull-right):not(.pull-right-container),
	.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
		border-left: 17px solid var(--light);
		margin-left: -10px;
		color: var(--light);
		z-index: 3;
	}

	.sidebar-mini.sidebar-collapse
		.sidebar-menu
		> li:not(.treeview):hover
		> a
		> span:not(.pull-right):not(.pull-right-container) {
		padding-top: 10px;
		padding-bottom: 14px;
	}

	.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
		border-radius: 0px;
	}

	.sidebar-mini.sidebar-collapse .sidebar .user-panel {
		padding: 9px 0;
	}

	/*dark sidebar */
	.ruby-sidebar-dark.sidebar-mini.sidebar-collapse
		.sidebar-menu
		> li:hover
		> a
		> span:not(.pull-right):not(.pull-right-container) {
		border-left: 20px solid var(--primary-light);
		margin-left: -15px;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}

	.ruby-sidebar-dark.sidebar-mini.sidebar-collapse
		.sidebar-menu
		> li:hover
		> .treeview-menu {
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		border-width: 20px;
		margin-left: -15px;
		border-color: var(--primary-light);
	}
}

@media (max-width: 768px) {
	.sidebar-mini.sidebar-open .main-header .navbar {
		margin-left: 230px;
		width: auto;
	}
}

/*sidebar mini center */

.ruby-sidebar-mini-center.sidebar-mini.sidebar-collapse .sidebar {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ruby-sidebar-mini-center.sidebar-mini.sidebar-collapse
	.sidebar
	ul.sidebar-menu {
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

/*//////////////////////////////////////////////////////////////////
  [ Nav and color ]*/

header.main-header .navbar .sidebar-toggle,
header.main-header .navbar .nav > li > a {
	color: var(--primary-dark) !important;
}

header.main-header .navbar .sidebar-toggle:hover,
header.main-header .navbar .nav > li:hover,
.bg-light-blue,
.label-primary,
.modal-primary .modal-body {
	background-color: var(--primary-dark-gradient) !important;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	color: var(--primary-dark);
}

.table-hover > tbody > tr:hover td,
header.main-header .navbar .nav > li > a:hover,
header.main-header .navbar .nav > li > a:active,
header.main-header .navbar .nav > li > a:focus,
header.main-header .navbar .nav .open > a,
header.main-header .navbar .nav .open > a:hover,
header.main-header .navbar .nav .open > a:focus,
header.main-header .navbar .nav > .active > a,
.modal,
.modal.modal-search {
	background-color: var(--primary-light-faint) !important;
}

/*//////////////////////////////////////////////////////////////////
  [ content ]*/

.content .box-header .pull-right {
	display: flex;
	flex-wrap: wrap;
}

.content .box-header .pull-right,
.content .box-header .pull-left {
	margin-bottom: 20px;
}

.content .box-header .pull-right > * {
	margin-right: 5px;
	margin-bottom: 5px;
	justify-content: space-between;
}

.content .box-header .pull-right a > i:first-child {
	margin-right: 1rem;
}

.content .box.box-primary {
	box-shadow: 0px 18px 20px -2px rgb(0 0 0 / 15%);
	border: none;
	margin-top: 20px;
}

/*//////////////////////////////////////////////////////////////////
  [ footer ]*/

footer.main-footer {
	border: none;
}

/*//////////////////////////////////////////////////////////////////
  [ boxes ]*/

.boxes-mw-wrapper.row {
	border: none;
}

.boxes-mw-wrapper.row .small-box,
.price-plan-box-wrapper .box {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
	margin: 5px;
}

.boxes-mw-wrapper.row .small-box:hover,
.price-plan-box-wrapper .box:hover {
	box-shadow: 0 8px 16px 0 var(--primary-light-faint) !important;
	transition: 0.3s;
	transform: translate3d(0px, -2px, 0px);
}

.boxes-mw-wrapper.row > div[class^="col-"] {
	border-right: none !important;
}

/**
//////////////////////////////////////////////////////////////////
*Dark mode customs 
* Controls for dark mode specific settings
*/

.ruby-dark *,
.ruby-dark :root,
.ruby-dark :before,
.ruby-dark :after {
	--light: var(--dark-mode-light) !important;
	--primary-dark: var(--dark-mode-primary-dark) !important;
	--primary-dark-gradient: var(--dark-mode-primary-dark-gradient) !important;
	--primary-light: var(--dark-mode-primary-light) !important;
	--primary-light-faint: var(--dark-mode-primary-light-faint) !important;
	--primary-light-gradient: var(
		--dark-mode-primary-light-gradient
	) !important;
	--secondary-light: var(--dark-mode-secondary-light) !important;
	--primary-box-shadow-color: var(
		--dark-mode-primary-box-shadow-color
	) !important;
}

.ruby-dark .content .box {
	background-color: var(--dark-mode-secondary-dark);
	box-shadow: 0px 18px 20px -2px rgb(0 0 0);
}

.ruby-dark .content-wrapper,
.ruby-dark body,
.ruby-dark html,
.ruby-dark .main-header .navbar,
.ruby-dark .wrapper,
.ruby-dark .main-sidebar,
.ruby-dark .left-side,
.ruby-dark footer,
.ruby-dark nav,
.ruby-dark .modal-content {
	background-color: var(--dark-mode-light) !important;
}

.ruby-dark input,
.ruby-dark select,
.ruby-dark .box-footer,
.ruby-dark .wizard,
.ruby-dark .form-control,
.ruby-dark .select2-container--default .select2-selection--single,
.ruby-dark .select2-selection .select2-selection--single {
	background-color: var(--dark-mode-primary-light-faint) !important;
}

@media (max-width: 991px) {
	.ruby-dark .content-header > .breadcrumb {
		background-color: var(--dark-mode-primary-light-faint);
	}
}

.ruby-dark .wizard ul li .chevron,
.ruby-dark .wizard ul li .chevron:before {
	border-left-color: var(--dark-mode-secondary-light);
}

.ruby-dark .wizard ul li.active {
	color: var(--primary-light-faint);
}

.ruby-dark .box .box-header .btn.btn-primary,
.ruby-dark .box .box-header .btn.btn-danger {
	color: var(--dark-mode-light);
}

.ruby-dark.ruby-sidebar-dark .sidebar .sidebar-menu > li > a,
.ruby-dark.ruby-sidebar-dark .sidebar li.active,
.ruby-dark.ruby-sidebar-dark .sidebar li:hover,
.ruby-dark.ruby-sidebar-dark .sidebar .sidebar-menu > li:hover > a,
.ruby-dark.ruby-sidebar-dark .sidebar .sidebar-menu > li.active > a,
.ruby-dark.ruby-sidebar-dark
	.sidebar
	.sidebar-menu
	> li
	> .treeview-menu
	li:hover
	> a {
	color: var(--dark-mode-primary-light);
}

.ruby-dark.ruby-sidebar-dark .sidebar .sidebar-menu > li > .treeview-menu li a {
	color: var(--dark-mode-primary-dark);
}

.ruby-dark.ruby-sidebar-dark .sidebar li.active,
.ruby-dark.ruby-sidebar-dark .sidebar li:hover,
.ruby-dark .wizard ul li {
	background: var(--dark-mode-primary-box-shadow-color);
}

.ruby-dark .table > thead > tr > th,
.ruby-dark .box .box-header,
.ruby-dark .table > thead > tr > th,
.table > tbody > tr > th,
.ruby-dark .table > tfoot > tr > th,
.table > thead > tr > td,
.ruby-dark .table > tbody > tr > td,
.table > tfoot > tr > td,
.ruby-dark .wizard,
.ruby-dark .nav-tabs > li.active > a,
.ruby-dark .nav-tabs {
	border-color: var(--dark-mode-primary-light-faint) !important;
}

.ruby-dark .modal,
.ruby-dark .modal.modal-search,
.ruby-dark .nav-tabs > li.active > a {
	background-color: var(--dark-mode-secondary-light) !important;
}

.ruby-dark .callout.callout-info,
.ruby-dark .nav-tabs > li > a:hover {
	color: var(--dark-mode-primary-light) !important;
	background-color: var(--dark-mode-primary-light-faint) !important;
	border-color: var(--dark-mode-primary-dark);
}

/*//////////////////////////////////////////////////////////////////
  [ theming ]
  [ side setting panel ]
  */

.btn-theme {
	position: fixed;
	bottom: 40px;
	right: 30px;
	height: 45px;
	width: 45px;
	z-index: 99;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	border-radius: 100%;
}

.btn-theme i {
	margin-right: 0px !important;
}

.settings-panel {
	border-left: 1px solid var(--dark-mode-primary-light-faint);
	display: block;
	position: fixed;
	right: 0px;
	bottom: 0;
	width: 300px;
	height: 100vh;
	overflow: auto;
	min-height: 100%;
	background: var(--light);
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	-o-transition-duration: 0.25s;
	transition-duration: 0.25s;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	transition-timing-function: ease;
	-webkit-transition-property: right, box-shadow;
	-moz-transition-property: right, box-shadow;
	-o-transition-property: right, box-shadow;
	transition-property: right, box-shadow;
	z-index: 9999;
}

.settings-panel.close {
	display: none;
	transition: 3s;
}

.settings-panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10px;
	border-bottom: 1px solid var(--dark-mode-primary-light-faint);
	border-top: 1px solid var(--dark-mode-primary-light-faint);
}

.settings-panel-header .close {
	font-size: 28px;
}

.sidebar-bg-options {
	display: flex;
	align-items: center;
	padding: 10px 10px;
	font-weight: 900;
	border-bottom: 1px solid var(--dark-mode-primary-light-faint);
	justify-content: space-between;
	gap: 10px;
}

.sidebar-bg-options > div:first-child {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.sidebar-bg-options > div:not(:first-child) {
	display: flex;
	flex-direction: column;
}

.sidebar-bg-options.settings-block input {
	width: 100%;
}

.settings-panel .color-box {
	width: 20px;
	height: 20px;
	border-radius: 100%;
	padding: 5px;
	border: 1px solid var(--dark-mode-primary-light-faint);
	display: inline-block;
}

.settings-panel input[type="range"] {
	width: 80px;
}

#ruby-style {
	flex-direction: column;
}

#ruby-style > div {
	border-bottom: 1px solid var(--dark-mode-primary-light-faint);
	padding: 10px 5px;
}

#ruby-style .flex-row {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 100%;
	vertical-align: middle;
	align-items: center;
}

#ruby-style label {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-bottom: 0;
}

/*Chrome*/

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	input[type="range"] {
		overflow: hidden;
		-webkit-appearance: none;
		background-color: var(--primary-light-faint);
		border-radius: 10px;
		margin: 5px auto;
	}

	input[type="range"]::-webkit-slider-runnable-track {
		height: 10px;
		-webkit-appearance: none;
		color: var(--primary-light);
		margin-top: -1px;
	}

	input[type="range"]::-webkit-slider-thumb {
		width: 10px;
		-webkit-appearance: none;
		height: 15px;
		cursor: ew-resize;
		background: var(--primary-dark);
		box-shadow: -80px 0 0 80px var(--primary-light);
	}
}

/** FF*/

input[type="range"]::-moz-range-progress {
	background-color: var(--primary-light);
}

input[type="range"]::-moz-range-track {
	background-color: var(--primary-light-faint);
}

/* IE*/

input[type="range"]::-ms-fill-lower {
	background-color: var(--primary-light);
}

input[type="range"]::-ms-fill-upper {
	background-color: var(--primary-light-faint);
}

#ruby-theme-settings.frontend #ruby-style,
#ruby-theme-settings.frontend .text-template,
#ruby-theme-settings.frontend div.settings-block[id*="--dark-mode"] {
	display: none;
}

#hero-basedata-image-form-group img {
	max-width: 250px;
}

.boxes-mw-wrapper.row .col-lg-1 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-10 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-11 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-12 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-2 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-3 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-4 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-5 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-6 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-7 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-8 .small-box .icon,
.boxes-mw-wrapper.row .col-lg-9 .small-box .icon,
.boxes-mw-wrapper.row .col-md-1 .small-box .icon,
.boxes-mw-wrapper.row .col-md-10 .small-box .icon,
.boxes-mw-wrapper.row .col-md-11 .small-box .icon,
.boxes-mw-wrapper.row .col-md-12 .small-box .icon,
.boxes-mw-wrapper.row .col-md-2 .small-box .icon,
.boxes-mw-wrapper.row .col-md-3 .small-box .icon,
.boxes-mw-wrapper.row .col-md-4 .small-box .icon,
.boxes-mw-wrapper.row .col-md-5 .small-box .icon,
.boxes-mw-wrapper.row .col-md-6 .small-box .icon,
.boxes-mw-wrapper.row .col-md-7 .small-box .icon,
.boxes-mw-wrapper.row .col-md-8 .small-box .icon,
.boxes-mw-wrapper.row .col-md-9 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-1 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-10 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-11 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-12 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-2 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-3 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-4 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-5 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-6 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-7 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-8 .small-box .icon,
.boxes-mw-wrapper.row .col-sm-9 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-1 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-10 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-11 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-12 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-2 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-3 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-4 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-5 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-6 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-7 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-8 .small-box .icon,
.boxes-mw-wrapper.row .col-xs-9 .small-box .icon {
	color: var(--primary-light-faint) !important;
	/*background-color: var(--primary-light-faint) !important;*/
}

.ruby-dark .box-dashboard ul.custom-list li span.cl-span,
.ruby-dark .box-dashboard .progress-box .bar {
	background: var(--dark-mode-primary-light-faint);
}

body.ruby-dark h3 {
	color: inherit;
}