:root {
	--color-primary: #65cbac;
	--color-primary-transparent: rgba(0, 150, 136, 0.05);
	--color-primary-transparent-darker: rgba(0, 150, 136, 0.08);
	--color-primary-light: #86e7c9;
	--color-secondary: #e33e7f;
	--color-light-blue: #4fc3f7;
	--gray-light: #eaecf2;
	--gray-lighter: #f2f3f6;
	--default-text-color: #212329;
	--lighter-text-color: rgb(90, 92, 105);
	--shadow-light: rgba(0, 0, 45, 0.08);
	--header-height: 56px;
	--font-family: 'Inter', 'Roboto', 'Helvetica Neue', -apple-system,
		BlinkMacSystemFont, 'Arial', sans-serif;
	--wrapper-border-radius: 10px;
	--chat-bg: #e8e0dc;
	--chat-icon: #645652;
	--chat-icon-dark: #463732;
	--red-dark: #961414;
}

* {
	margin: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 45, 0.2) transparent;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

/* width */
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background: transparent;
}

/* Track */
::-webkit-scrollbar-track {
	background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 45, 0.2);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 45, 0.6);
}


html,
body {
	overflow: hidden;
	margin: 0;
	height: 100%;
}

body {
	margin: 0;
	font-weight: 400;
	line-height: 1.5;
	color: var(--default-text-color);
	text-align: left;
	font-size: 16px;
	font-family: var(--font-family) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

input[type='text'],
textarea {
	line-height: 1.5rem;
}

.app {
	display: grid;
	place-items: center;
	background: linear-gradient(
		0deg,
		rgb(240, 241, 246) 45%,
		rgba(201, 205, 223, 1) 100%
	);
	height: 100vh;
}

.app__body {
    z-index: 1;
    background-color: var(--gray-light);
    height: calc(100vh - 40px);
    width: 90vw;
    box-shadow: 0 4px 10px -6px rgba(0, 0, 45, 0.7);
    max-width: 1400px;
    border-radius: var(--wrapper-border-radius);
    overflow: hidden;
}

@media only screen and (max-width: 1500px) {
	.app__body {
		height: 100vh;
		width: 100vw;
		max-width: none;
	}
}

.mobileOnly {
	display: none;
}