@font-face {
    font-family: russo_one;
    src: url('/resources/fonts/russo_one.ttf') format('truetype')
}

@font-face {
	font-family: 'DSDigital';
	src: url('/resources/fonts/DigitalDisplay.ttf') format('truetype')
}

img {
	width: 100%;
	transition: all .3s ease-out 0s
}

.c-pointer {
	cursor: pointer !important
}

.c-default {
	cursor: default !important
}

.c-copy {
	cursor: copy !important
}

.justify-center {
	justify-content: center !important
}

.justify-right {
	justify-content: right !important
}

.justify-spacebetween {
	justify-content: space-between !important
}

.align-center {
	align-items: center !important
}

.align-flex-end {
	align-items: flex-end !important
}

.flex {
	display: flex
}

.d-flex {
	display: flex !important
}

.d-none-h {
	display: none !important;
	opacity: 0 !important
}

.flex-d-column {
	flex-direction: column !important	
}

.flex-d-row {
	flex-direction: row !important	
}

.flex-g-1 {
	gap: 5px !important
}

.flex-g-2 {
	gap: 10px !important
}

.d-block {
	display: block !important
}

.d-grid {
	display: grid !important
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr) !important
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr) !important
}

.grid-4 {
	grid-template-columns: repeat(4, 1fr) !important
}

.grid-5 {
	grid-template-columns: repeat(5, 1fr) !important
}

.grid-6 {
	grid-template-columns: repeat(6, 1fr) !important
}

.grid-7 {
	grid-template-columns: repeat(7, 1fr) !important
}

.grid-gap-1 {
	grid-gap: .5rem !important
}

.grid-gap-2 {
	grid-gap: 1rem !important
}

.grid-gap-3 {
	grid-gap: 1.5rem !important
}

.grid-gap-4 {
	grid-gap: 2rem !important
}

.grid-gap-5 {
	grid-gap: 2.5rem !important
}

.p-relative {
	position: relative !important
}

.p-absolute {
	position: absolute !important
}

.p-fix {
	position: fixed !important
}

.over-x-scroll {
	overflow-x: scroll 
}

.over-y-scroll {
	overflow-y: scroll
}

.w-100 {
	width: 100% !important
}

.hideScroll {
	-ms-overflow-style: none; /* For IE and Edge */
	scrollbar-width: none; /* For Firefox */
}

.hideScroll::-webkit-scrollBar {
	display: none; /* For Chrome, Safari and Opera */
}

.hideScroll:-ms-scrollBar {
	display: none
}

.hideScroll::-o-scrollBar {
	display: none
}

.hideScroll::scrollBar {
	display: none
}

.a-self-center {
	-ms-flex-item-align: center !important;
	align-self: center !important
}

.a-items-center {
	-ms-flex-align: center !important;
	align-items: center !important
}

.load-gif {
	content: url('/resources/images/load-indicator.gif')
}

.load-gif.w-15 {
	width: 15px !important;
	height: 15px !important
}

.load-gif.w-30 {
	width: 30px !important;
	height: 30px !important
}

.load-gif.w-40 {
	width: 40px !important;
	height: 40px !important
}

.font-12 {
	font-size: 12px
}

.font-14 {
	font-size: 14px
}

.font-16 {
	font-size: 16px
}

.font-600 {
	font-weight: 600 !important
}

.font-italic {
	font-style: italic !important
}

.text-uppercase {
	text-transform: uppercase !important
}

.text-ellipsis {
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
    overflow: hidden !important
}

.f-gray {
	filter: grayscale(1);
	-webkit-filter: grayscale(1)	
}

.hide {
	display: none !important;
	opacity: 0 !important
}

.opacity-0 {
	opacity: 0
}

.top-0 {
	top: 0 !important
}

.bottom-0 {
	bottom: 0 !important
}

.user-profile-pic {
	content: url('/resources/images/user.png')
}

.cursor-pointer {
	cursor: pointer
}

.empty-block-40 {
	width: 40px !important;
	height: 40px !important;
	opacity: 0 !important
}