@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import '~bootstrap/scss/bootstrap';
@import '~ngx-toastr/toastr';
@import '~ngx-toastr/toastr-bs4-alert';
@import '~@ctrl/ngx-emoji-mart/picker';

/* Main Styles */
@import 'abstracts/variables';

$font-family-sans-serif: $font-family-book !default;
$font-family-monospace: $font-family-book !default;
$font-family-base: $font-family-sans-serif !default;

@import 'bootstrap/bootstrap';
@import './customize-material.scss';
@import '~ngx-toastr/toastr-bs4-alert';

@import 'base/background';
@import 'base/border';
@import 'base/cursor';
@import 'base/font';
@import 'base/layout';
@import 'base/spacing';

@import 'component/button';
@import 'component/sidenav';
@import 'component/toolbar';
@import 'component/input';
@import 'component/flow-builder';
@import 'component/multichat';
@import 'component/table';
@import 'component/pagination';
@import 'component/filter';
@import 'component/toastr';
@import 'component/slide-toggle';

@import 'themes/theme';

html,
body {
	height: 100%;
	font-family: $font-family-book !important;
}

body {
	height: 100%;
	background-color: $bg-color;

	::-webkit-scrollbar {
		width: 5px;
		background-color: #f5f5f5;
	}

	::-webkit-scrollbar-track {
		border-radius: 10px;
		background-color: #f5f5f5;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	}

	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.87);
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	}
}

/* Style the form - display items horizontally */
.form-inline {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.form-inline-field {
	width: 20% !important;
	margin-right: 5px;
}

.top-content {
	display: flex;
	margin-bottom: 10px;
}
.top-right-content {
	margin-left: auto;
}

.inline-radio {
	margin-top: 4px;
	margin-left: 10px;
}

.grid-cards {
	border-radius: 10px;
}

.row {
	display: flex; /* equal height of the children */
}

.col {
	flex: 1; /* additionally, equal width */
	padding: 1em;
}

.color1 {
	background: #cdd0ec;
	border: solid;
	border-color: #6177c4;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
	.form-inline input {
		margin: 10px 0;
	}

	.form-inline {
		flex-direction: column;
		align-items: stretch;
	}

	.form-inline-field {
		width: 100% !important;
		margin-right: 0px;
	}
}

.font-subtitle {
	font-family: $font-secondary;
	color: $dark-color;
	margin-bottom: 0;
	font-weight: 400;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type='number'] {
	-moz-appearance: textfield;
}