:root {
	/* Primary Color Scheme */
	--primary-180: #0f0b0f;
	--primary-160: #1e161f;
	--primary-150: #261c26;
	--primary-140: #2e222e;
	--primary-130: #352736;
	--primary-120: #3d2d3e;
	--primary-115: #413041;
	--primary-110: #443245;
	--primary-101: #4B384C;
	--primary-100: #4C384D;
	--primary-95: #574058;
	--primary-90: #624863;
	--primary-85: #6C506E;
	--primary-80: #725E73;
	--primary-70: #958395;
	--primary-65: #938794;
	--primary-60: #9e7ca0;
	--primary-50: #ae92b0;
	--primary-40: #bea8bf;
	--primary-30: #cfbecf;
	--primary-25: #d7c8d7;
	--primary-20: #DFD3DF;
	--primary-10: #EFE9EF;
	--primary-5: #F7F4F7;

	/* Secondary Color Scheme */
	--secondary-195: #0e0401;
	--secondary-180: #371105;
	--secondary-150: #8b2b0d;
	--secondary-120: #de4415;
	--secondary-115: #e94c1c;
	--secondary-110: #EA5527;
	--secondary-100: #ED6B43;
	--secondary-95: #ee724c;
	--secondary-90: #ef7a56;
	--secondary-85: #f0815f;
	--secondary-80: #f18969;
	--secondary-70: #f2977b;
	--secondary-60: #f4a68e;
	--secondary-50: #f6b5a1;
	--secondary-40: #f8c4b4;
	--secondary-30: #fad3c7;
	--secondary-20: #fbe1d9;
	--secondary-10: #fdf0ec;
	--secondary-5: #fef8f6;

	/* General */
	--navbar-bg: #F1F3F8;
	--form-control-focus: 0 0 0 0.2rem rgba(76 56 77 / 25%);
	--dash-btn-shadow: 1px 0px 6px 0px rgba(237 107 67 / 25%);
	--btn-outline-focus-shadow: 0 0 0 0.2rem rgba(237 107 67 / 35%);
	--toggle-shadow: 0 0 0 0.2rem rgba(76 56 77 / 25%);
}

.text-steam-primary {
	color: var(--primary-100) !important;
}
.navbar.bg-light {
	background-color: var(--navbar-bg) !important;
}

.navbar form.customers {
	background-color: #fff;
	border-color: #BBC6C3 !important;
}
.navbar #searchInput {
	border-color: #BBC6C3;
}
.navbar #searchInput ~ .input-group-append .fa-search {
	color: var(--primary-100);
}
.navbar #searchInput ~ .input-group-append .input-group-text {
	background-color: #D6DDDB;
	border-color: #BBC6C3;
}
.custom-select:focus,
.form-control:focus {
	border-color: var(--primary-80);
	box-shadow: var(--form-control-focus);
}
.badge-primary,
.notification-badges [data-badge]:after,
#countInfo,
#countWarning,
#countAneeded {
	background-color: var(--secondary-100);
	border-color: var(--secondary-100);
}
.breadcrumb-item.active,
.breadcrumb-item a {
	color: var(--primary-100);
}
.btn-primary {
	color: var(--secondary-100);
	background-color: #fff;
	border-color: var(--secondary-100);
}
.dash-btn-shadow {
	box-shadow: var(--dash-btn-shadow);
}
.btn-primary:hover {
	background-color: var(--secondary-110);
	border-color: var(--secondary-110);
}
.page-link,
.page-link:hover {
	color: var(--primary-120);
}
.page-item.active .page-link {
	background-color: var(--primary-100);
	border-color: var(--primary-100);
}
.custom-control-input:checked~.custom-control-label::before {
	background-color: var(--primary-100);
	border-color: var(--primary-100);
}
.custom-control-input:not(:disabled):active~.custom-control-label::before {
	background-color: var(--primary-60);
	border-color: var(--primary-60);
}
.custom-control-input:focus~.custom-control-label::before {
	box-shadow: var(--toggle-shadow);
}
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
	border-color: var(--primary-60);
}
#actionNeededList .btn-link:hover {
	color: #000;
	text-decoration: none;
}
.breadcrumb-wrapper {
	padding-left: 45px;
}
.ring {
	color: var(--secondary-100);
	text-shadow: 0 0 10px var(--secondary-100);
}
.ring:before {
	border-top-color: var(--secondary-100);
	border-right-color: var(--secondary-100);
}
.ring span:before {
	background: var(--secondary-100);
	box-shadow: 0 0 20px var(--secondary-100);
}
.nav-menu-wrapper {
	background-color: var(--primary-100);
}
.nav-menu-wrapper .list-group-item-action {
	color: #fff;
}
.nav-menu-wrapper .list-group-item {
	color: #fff;
	background-color: var(--primary-95);
	border-color: var(--primary-100);
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}
.nav-menu-wrapper .list-group-item.active {
	background-color: var(--primary-80);
	border-color: var(--primary-80);
}
.nav-menu-wrapper .list-group-item-action:focus,
.nav-menu-wrapper .list-group-item-action:hover {
	color: #fff;
	background-color: var(--primary-80) !important;
}
.nav-menu-wrapper .dropdown-item:focus,
.nav-menu-wrapper .dropdown-item:hover {
	color: #fff;
	background-color: var(--primary-80);
}
.nav-menu-wrapper .menu-item-icon,
.nav-menu-wrapper .dropdown-item i {
	color: #fff;
}
#notifsBadge i.fa-envelope {
	color: var(--primary-100);
}
a i.fas,
a i.fa {
	color: var(--primary-100);
}
.btn-info:not(.disabled):not(:disabled),
.btn-outline-secondary:not(.disabled):not(:disabled) {
	color: var(--secondary-100);
	background-color: #fff;
	border: 1px solid var(--secondary-100);
}
.btn-info:hover:not(.disabled):not(:disabled),
.btn-info:active:not(.disabled):not(:disabled),
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:hover:not(.disabled):not(:disabled) {
	color: #fff;
	background-color: var(--secondary-100);
	border: 1px solid var(--secondary-100);
}
.btn-info:focus:not(.disabled):not(:disabled),
.btn-outline-secondary:focus:not(.disabled):not(:disabled) {
	box-shadow: var(--btn-outline-focus-shadow);
}
.btn-outline-secondary:not(.disabled):not(:disabled) i.fa,
.btn-outline-secondary:not(.disabled):not(:disabled) i.fas {
	color: var(--secondary-100);
}
.btn-outline-secondary:hover:not(.disabled):not(:disabled) i.fa,
.btn-outline-secondary:hover:not(.disabled):not(:disabled) i.fas {
	color: #fff;
}
.btn-outline-secondary:disabled,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
	color: #6c757d;
	background-color: #ededed;
	border: 1px solid #6c757d;
	cursor: not-allowed;
}
.btn-outline-secondary .fill-color {
	fill: var(--secondary-100);
}
.btn-outline-secondary:hover .fill-color {
	fill: #fff;
}
.btn-outline-primary {
	color: var(--primary-100);
	background-color: #fff;
	border: 1px solid var(--primary-100);
}
.btn-outline-primary:not(.disabled):not(:disabled):hover {
	color: #fff;
	background-color: var(--primary-100);
	border: 1px solid var(--primary-100);
}
.btn-outline-primary:focus {
	box-shadow: 0 0 0 0.2rem rgb(76 56 77 / 25%);
}
table.dataTable tbody tr.selected {
	background-color: var(--primary-30);
}
.alert-primary {
	color: var(--secondary-110);
	background-color: var(--secondary-10);
	border-color: var(--secondary-100);
}
.nav.nav-tabs .nav-link {
	color: var(--primary-100);
}
.product.selected .card {
	border-color: var(--secondary-100);
}
.product .fa-check {
	color: var(--secondary-100);
	border-color: var(--secondary-100);
}
#accordionProductOrder .btn-link:hover {
	color: var(--secondary-100);
}
.recording-search-btn {
	padding: 6px 14px !important;
	border-radius: 4px !important;
}
.btn-outline-cancel {
	color: #464646;
	border-color: #808080;
}
.btn-outline-cancel:hover {
	color: #464646;
	border-color: #808080;
	background-color: #eeeeee;
}
.btn-outline-cancel:focus {
	box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.20);
}
.profile i {
	color: var(--secondary-100);
}
.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--primary-20);
	color: #000;
}
.menu-item-name {
	color: #fff;
	white-space: nowrap;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avatar-info-name {
	display: flex;
	flex-direction: column;
}
#navbarDropdownProfile {
	display: flex;
	align-items: center;
	column-gap: 8px;
}
.btn-top-wrapper {
	display: flex;
	column-gap: 6px;
	justify-content: right;
	margin-bottom: 12px;
}
.main-content {
	flex-grow: 1;
	max-width: calc(100% - 285px);
	margin-left: 270px;
	transition-property: margin-left;
	transition-duration: .25s;
	transition-timing-function: linear;
}
.sidenav-collapsed .main-content {
	max-width: calc(100% - 104px);
	margin-left: 82px;
}
.content-wrapper {
	display: flex;
}
.side-nav-collapse button {
	border: none;
	outline: none;
	width: 100%;
	padding: 0px;
	height: 42px;
	background-color: var(--primary-100);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 8px;
	cursor: pointer;
	border-top: 1px solid var(--primary-80);
	font-size: 0.875rem;
}
.toolbar-wrapper .avatar {
	width: 38px;
	height: 38px;
}
.custom-datatable-search-input,
.dataTables_filter input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 30.109 30'%3E%3Cpath d='M 26.109,30 H 0 V 0 h 26.109 a -4,-4 0 0 1 4,4 v 22 a -4,-4 0 0 1 -4,4 z' fill='%234c384d' /%3E%3Cpath d='m 23.198,22.149 -4.141,-4.307 a 7.048,7.048 0 1 0 -1.353,1.237 l 4.173,4.34 a 0.919,0.919 0 0 0 1.3,0.026 0.918,0.918 0 0 0 0.026,-1.3 M 13.685,8.13 A 5.192,5.192 0 1 1 8.493,13.322 5.2,5.2 0 0 1 13.685,8.13' fill='%23ffffff' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	width: 220px !important;
}
.dataTables_filter input:focus {
	box-shadow: none;
}
.generated-btns {
	margin-right: 10px;
	display: flex;
	align-items: center;
	column-gap: 10px;
}
.add-widget {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}
.btn_mark_all {
	margin-right: 10px;
}
.table.dataTable thead th {
	border-top: none !important;
	border-bottom: none !important;
}
.nav-menu-wrapper {
	position: fixed;
	display: grid;
	grid-template-rows: 1fr auto;
	min-width: 270px;
	transition-property: min-width;
	transition-duration: .25s;
	transition-timing-function: linear;
	z-index: 30;
}
.sidenav-collapsed .nav-menu-wrapper {
	min-width: 64px;
}
.side-nav-wrapper {
	overflow: auto;
}
.side-nav-wrapper::-webkit-scrollbar {
	width: 8px;
}
.side-nav-wrapper::-webkit-scrollbar-track {
	background-color: var(--primary-90);
}
.side-nav-wrapper::-webkit-scrollbar-thumb {
	background-color: var(--primary-70);
	border-radius: 80px;
}
.badge {
	padding: 2px 4px;
	padding-top: 5px;
}
.datepicker.datepicker-dropdown {
	font-size: 14px;
	z-index: 2000 !important;
}
.datepicker table tr td.highlighted {
	background-color: var(--secondary-30) !important;
	border-color: none !important;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
	background-color: var(--secondary-100) !important;
}
.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus {
	background-color: var(--primary-100) !important;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--primary-70)), to(var(--primary-70)));
	background-image: linear-gradient(to bottom, var(--primary-70), var(--primary-70));
}
.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
	background-image: linear-gradient(to bottom, var(--primary-80), var(--primary-80));
}
.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-image: linear-gradient(to bottom, var(--secondary-60), var(--secondary-60));
}
.datepicker table tr td.today.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today.disabled:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today[disabled] {
	background-color: var(--secondary-40);
}
.table-hover tbody tr:hover {
	color: #212529;
	background-color: #f5f5f5;
}
.btn-default {
	color: #4e4e4e;
	background-color: #fff;
	border-color: #cacaca;
}
.btn-default:hover {
	box-shadow: 0 0 0 0.2rem rgb(0 0 0 / 12%);
}
.nav-tabs .nav-link.text-danger {
	font-weight: 600;
}
.alert-tfa,
.alert-env {
	position: relative;
	padding: .75rem 1.25rem;
	border-radius: 0rem;
}
.alert-tfa {
	color: #721c24;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
}
.alert-env {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
	border: 1px solid transparent;
	margin-bottom: 1rem;
}
.move-option-arrow-btn {
	width: 70px !important;
	height: 30px !important;
	padding: 6px 12px !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.arrows {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dt-paging .pagination {
	justify-content: flex-end;
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left;
}

table.dataTable thead>tr>th:hover {
    outline: none !important;
}

.apexcharts-toolbar {
	top: -28px !important;
    right: 30px !important;
}

.termination_price span.small {
	display: block;
}

svg#sim {
    overflow: visible;
    width: 25px;
    height: auto;
	margin-left: 4px;
}

svg#sim path {
    fill: var(--secondary-100);
    stroke: var(--secondary-100);
    stroke-width: 1px;
}

svg#sim text {
    fill: white;
    font: 22px;
    font-size: 4.89rem;
}

.dt-search {
	float: right;
}

#recordingDates .form-control {
	padding: 0px 14px !important;
	height: 34px;
}

#orderTable > tbody > tr > td.discount_fixed_rate > input, 
#orderTable > tbody > tr > td.discount_recurring_rate > input {
	padding: 0.3em !important;
    height: calc(1em + .5rem + 2px);
}