html, body {
	font-family: 'Ubuntu', sans-serif;
	background-color: rgb(249, 249, 251);
}

body {
	overflow: auto;
	margin: 0;
	padding: 0;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #ffa557 !important;
}

h1:focus {
	outline: none;
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid #e50000;
}

.validation-message {
	color: #e50000;
}

.darker-border-checkbox.form-check-input {
	border-color: #929292;
}

/*
	Custom Styles
*/

.max-w-50 {
	max-width: 50%;
	overflow-x: hidden;
}

.pointer {
	cursor: pointer;
}

.w-11rem {
	width: 11rem;
}

.ql-size-large {
	font-size: 1.5rem;
}

.ql-size-huge {
	font-size: 2rem;
}

.ql-size-normal {
	font-size: 1rem;
}

.invisible {
	display: none;
}

.visible-on-hover {
	opacity: 0;
	transition: opacity 0.1s;
}

.visible-on-hover:hover {
	opacity: 1;
}

.error-message{
	color: var(--light-red);
	margin-left: .5rem;

}

.no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.fs-small{
	font-size: 0.8rem;
}

/*
	Modal
*/
.modal-header {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--white) !important;
	background-color: var(--orangered) !important;
}

/*
	Accordion
*/
.accordion {
	--bs-accordion-active-bg: var(--orangered) !important;
	--bs-accordion-btn-focus-box-shadow: var(--white);
	--bs-primary-text-emphasis: var(--white);
}

.accordion-button {
	height: 3.5rem;
}

.accordion-item > h2 > button:not(.collapsed) .fa-trash-can {
	color: var(--white);
}

/*
	Images
*/
.user-img-small {
	width: 2.5rem;
	border-radius: 50%;
}

.product-img-small {
	width: 3rem;
	height: 3rem;
	border-radius: 5%;
}

.product-img-medium {
	width: 4rem;
	border-radius: 5%;
}

/*
	Inputs
*/

.form-control:focus {
	border-color: var(--orangered);
	-webkit-box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
	-moz-box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
	box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
}

.form-check-input:focus {
	-webkit-box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
	-moz-box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
	box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
}

.form-check-input:checked {
	color: #fff;
	border-color: var(--orangered);
	background-color: var(--orangered);
}

.rz-chkbox .rz-state-active{
	background-color: var(--orangered) !important;
}

.form-check-input {
	border-color: var(--orangered);
}

.negative-border {
	border: 1px solid red;
}

/*
	Icons
*/

.fa-filter-circle-xmark, .fa-ban {
	cursor: pointer;
}

.fa-filter-circle-xmark:hover {
	color: var(--dark-grey);
}

.fa-trash-can, .fa-circle-exclamation {
	cursor: pointer;
	color: var(--orangered);
}

	.fa-trash-can:hover {
		color: var(--orangered);
	}

.fa-square-check:hover, .fa-circle-plus:hover, .fa-pen-to-square:hover, .fa-copy:hover, .fa-copy:hover {
	cursor: pointer;
	color: var(--dark-grey);
}

.icon-disabled {
	cursor: pointer;
	color: gray;
}

.icon-disabled:hover {
	cursor: default;
	color: gray;
}

.fa-money-bill-wave {
	color: darkgreen;
}

.fa-credit-card {
	color: darkblue;
}

.fa-house {
	color: var(--orangered);
}

/*
	Buttons
*/

.main-button {
	padding: 0.7rem 1.5rem 0.7rem 1.5rem;
	align-self:center;
}

.btn-orange {
	background-color: var(--orangered);
	color: var(--white);
	border: 1px solid var(--orangered);
}

	.btn-orange:hover {
		background-color: var(--white);
		color: var(--orangered);
		border: 1px solid var(--orangered);
	}

.btn-orange-inverted {
	background-color: var(--white);
	color: var(--orangered);
	border: 1px solid var(--orangered);
}

	.btn-orange-inverted:hover {
		background-color: var(--orangered);
		color: var(--white);
		border: 1px solid var(--orangered);
	}

.btn-orange, btn-orange-inverted:focus {
	-webkit-box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
	-moz-box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
	box-shadow: 0px 0px 33px -11px rgba(255,60,0,0.57);
}

.btn-purple {
	background-color: var(--purple);
	color: var(--white);
	border: 1px solid var(--purple);
}

	.btn-purple:hover {
		background-color: var(--white);
		color: var(--purple);
		border: 1px solid var(--purple);
	}

.btn-purple-inverted {
	background-color: var(--white);
	color: var(--purple);
	border: 1px solid var(--purple);
}

	.btn-purple-inverted:hover {
		background-color: var(--purple);
		color: var(--white);
		border: 1px solid var(--purple);
	}

.btn-check:not(:checked) + .btn-outline-primary {
	background-color: transparent;
	color: var(--orangered);
	border-color: var(--orangered);
	transition: all 0.2s ease-in;
}

.btn-success {
	background-color: var(--orangered);
	color: var(--white);
	border: 1px solid var(--orangered);
}

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

.btn-check:checked + .btn-outline-primary {
	background-color: var(--orangered);
	color: var(--white);
	border-color: var(--orangered);
	transition: all 0.2s ease-in;
}

.btn-no-style {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

/*
	Dropdown
*/

.dropdown-menu {
	--bs-dropdown-link-active-color: black;
	--bs-dropdown-link-active-bg: var(--white);
}

.dropdown-menu .selected {
	background-color: #ffa557;
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid transparent !important;
	border: none;
}

.rz-dropdown-item > span {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

/*
	Rich Text Editor
*/

.rz-html-editor {
	height: 20rem;
	--rz-editor-focus-outline: #ffa557;
}
.rz-html-editor-button.rz-selected {
	background-color: #ffa557;
}

/*
	Selects
*/

.rz-dropdown-panel {
	--rz-dropdown-item-selected-background-color: #F1F1F1;
	--rz-dropdown-item-hover-background-color: #F1F1F1;
	--rz-dropdown-item-selected-hover-background-color: #F1F1F1;
	--rz-dropdown-item-selected-color: black;
	--rz-dropdown-item-hover-color: black;
	--rz-dropdown-item-selected-hover-color: black;
}

.rz-multiselect-panel {
	--rz-dropdown-item-selected-background-color: #F1F1F1;
	--rz-dropdown-item-hover-background-color: #F1F1F1;
	--rz-dropdown-item-selected-hover-background-color: #F1F1F1;
	--rz-checkbox-checked-background-color: var(--orangered);
	--rz-dropdown-item-selected-color: black;
	--rz-dropdown-item-hover-color: black;
	--rz-dropdown-item-selected-hover-color: black;
}

/*
	Colors
*/
:root {
	--light-green: rgb(64, 168, 50);
	--dark-green: rgb(50, 128, 34);
	--light-red: rgb(222, 30, 20);
	--dark-red: rgb(140, 24, 18);
	--light-grey: rgb(105, 105, 105);
	--dark-grey: rgb(74, 74, 74);
	--orangered: #FE5000;
	--white: rgb(255,255,255);
	--purple: #392151;
}

/*
	Text
*/

.text-white {
	color: var(--white) !important;
}

.positive-text {
	color: green;
}

.negative-text {
	color: red;
}

.brand-text {
	color: var(--orangered);
}

.bold {
	font-weight: bold;
}


/*
	Modals
*/

.modal-header {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--orangered) !important;
	color: var(--white) !important;
	font-size: 1.5rem;
}

.modal-header i {
	margin: 0.5rem;
}

.modal-table-wrapper {
	max-height: 50vh;
	overflow-y: auto;
}

.modal-table th {
	font-size: .8rem;
	padding: .7rem 1rem;
	color: grey;
}

.modal-table tbody td {
	border-top: 0;
	border-bottom: 1px solid #e0e0e1;
	padding: 1rem;
	vertical-align: middle;
}

.modal-footer {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

/*
	Responsive Wrapper
*/
.responsive-wrapper{
	margin: 0 auto;
	width: 30%;
}


@media (min-width:1200px) {
	.modal-footer button {
		width: 10rem;
	}
}

@media (max-width: 2000px){
	html, body {
		font-size: 0.95rem;
	}

	.responsive-wrapper {
		width: 35%;
	}
}

@media (max-width: 1600px){
	html, body {
		font-size: 0.85rem;
	}

	.responsive-wrapper {
		width: 40%;
	}
}

@media (max-width:1200px) {
	.modal-footer button {
		width: 12rem;
	}

	.responsive-wrapper {
		width: 50%;
	}
}

@media (max-width:800px) {
	html, body {
		font-size: 0.8rem;
	}

	.modal-footer button {
		width: 10rem;
	}

	.responsive-wrapper {
		width: 60%;
	}
}

@media (max-width: 500px){
	.responsive-wrapper {
		width: 70%;
	}
}

@media (max-width:350px) {
	html, body{
		font-size: 0.7rem;
	}

	.modal-footer button {
		width: 8rem;
	}

	.responsive-wrapper{
		width: 80%;
	}
}

/*
	Scroll (Tables etc.)
*/

.horizontal-scroll {
	overflow-x: auto;
}

.horizontal-scroll::-webkit-scrollbar {
	height: 8px;
	background-color: transparent;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 4px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
	background-color: #aaa;
}

.horizontal-scroll::-webkit-scrollbar-button {
	display: none;
}

.horizontal-scroll::-webkit-scrollbar-track {
	background-color: transparent;
}

.vertical-scroll {
	overflow-y: auto;
}

.vertical-scroll::-webkit-scrollbar {
	width: 8px;
	background-color: transparent;
}

.vertical-scroll::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 4px;
}

.vertical-scroll::-webkit-scrollbar-thumb:hover {
	background-color: #aaa;
}

.vertical-scroll::-webkit-scrollbar-button {
	display: none;
}

.vertical-scroll::-webkit-scrollbar-track {
	background-color: transparent;
}

.tooltip {
	pointer-events: none;
}