:root {
	/* These don't change in dark mode */
	--yellow: #fed800;
	--green: hsl(87, 71%, 35%);
	--light-green: #f1ffdc;
	--lightest-green: #e7ede4;
	--lightest-yellow: #e7ede4;
	--red: #d10000;
	--red-2: rgb(234, 51, 35);
	--gray: #c5c5c5;
	--lightest-gray: #ebeef1;
	--light-red: #ffdada;
	--lightest-red: #e9dbde;
	--light-blue: #ebf0f5;
	--lightest-blue: #f0f2f5;
	--lightest-blue-inverse: #23313d;
	--blue-gray: #222e40;
	--always-black: #16202c;
	--always-white: #fff;
	--light-yellow: #fed80026;
	--non-active-state: #98a9bc;
	--dt-black-3: #28323e;
	--subtle-dark-background: #d8d8d8;
	--line-11-dark: #2d4458;
	--notification-widget-success-bg: #1A7F37;
	--notification-widget-warning-bg: #F7B228;
	--notification-widget-error-bg: #CF222E;
	--notification-widget-default-bg: #183045;
	--notification-widget-info-bg: #31708f;
	--notification-widget-success-color: #FFFFFF;
	--notification-widget-warning-color: #183045;
	--notification-widget-error-color: #FFFFFF;
	--notification-widget-default-color: #FFFFFF;
	--notification-widget-info-color: #FFFFFF;



	/* These change in dark mode */
	--main-bg-color: #ffffff;
	--black-light: #f6fbff;
	--white: #ffffff;
	--white-2: #f2f4f6;
	--white-darken-1: #fafafa;
	--black: #16202c;
	--light-black: rgba(0, 0, 0, 0.7);
	--lightest-black: rgba(0, 0, 0, 0.5);
	--dark-blue: #1d2638;
	--light-dark-blue: #6f8094;
	--light-dark-blue-1: #5c6979;
	--light-gray: #e8e8e8;
	--scrollbar-color: #dedede;
	--active-state: #374957;
	--gray-100: #e1e1e1;
	--light-gray-border: #e8e8e8;
	--dark-gray-border: transparent;
	--black-dark-10: #ffffff;
	--line-11: #e8e8e8;
	--lighter-gray: #f8fafb;
	--black-dark-20: #ffffff;
	--black-light-10: #f2f4f6;
	--green-inverse: #2d4458;
	--line-22: #e8e8e80b;
	--line-33: #e8ecef;
	--toast-bg: #f2f4f6;
	--line-11-1: rgba(232, 232, 232, 0.4);
	--black-dark-20: #ffffff;
	--dropdown-shadow-outer: rgba(207, 207, 207, 0.16);
	--dropdown-shadow-inner: rgba(207, 207, 207, 0.23);
	--box-shadow-1: rgba(16, 24, 40, 0.05);
	--box-shadow-2: rgba(16, 24, 40, 0.03);
	--box-shadow-3: rgba(16, 24, 40, 0.08);
	--gray-50: #F9FAFB;
	--gray-300: #D0D5DD;
	--gray-200: #EAECF0;
	--gray-600: #475467;
	--gray-700: #344054;
	--success-50: #ECFDF3;
	--success-200: #ABEFC6;
	--success-700: #067647;
	--highlighted: #E7ECF0;
	--selected: #2D4458;
	--hover: #c3c8cb;


	--margin-top: 80px;
	--margin-top-without-nav: 44px;
	--margin-top-dropdown-offset: 119px;
	--margin-top-jackpot-offset: 36px;
	--margin-bottom: 65px;
	--padding-bottom: 70px;
	--padding-bottom-mobile: 55px;
	--padding-bottom-medium: 35px;
	--padding-bottom-small: 15px;
	--padding-top-tiny: 5px;
	--base-padding-edges: 20px;
	--base-margin: 5px;
	--base-padding: 10px;
	--base-radius: 4px;
	--desktop-header-offset: 0px;

	/*Mobile Layout Variables*/
	--mobile-top-container-height: 49px;
	--mobile-sports-list-container-height: 54px;
	--mobile-routerview-container-height: 200px;
	--mobile-bottom-container-height: 65px;
	/*Mobile Layout Variables*/

	--font: "Inter";
	--font-massive: 24px;
	--font-largest: 18px;
	--font-large: 16px;
	--font-medium: 14px;
	--font-normal: 14px;
	--font-small: 12px;
	--font-smallest: 10px;
	--font-tiny: 8px;

	--font-weight-lighter: 300;
	--font-weight-normal: normal;
	--font-weight-medium: 500;
	--font-weight-bold: bold;

	--shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);

	--notifications-info-color: #31708f;
	--notifications-info-bg: #bce8f1;
	--notifications-info-border: #bce8f1;

	--notifications-success-color: #3c763d;
	--notifications-success-bg: #dff0d8;
	--notifications-success-border: #d6e9c6;

	--notifications-warning-color: #8a6d3b;
	--notifications-warning-bg: #fcf8e3;
	--notifications-warning-border: #faebcc;

	--notifications-error-color: #a94442;
	--notifications-error-bg: #f2dede;
	--notifications-error-border: #ebccd1;

	--input-border-darkgray: #e4e4e4;

	--avatar-info-bg: #9ed2de;
	--avatar-success-bg: #d6e9c6;
	--avatar-warning-bg: #faebcc;
	--avatar-error-bg: #ebccd1;
}

html.dark {
	--main-bg-color: #16202c;
	--black-light: #23313d;
	--white: #16202c;
	--white-2: #16202c;
	--white-darken-1: #192433;
	--black: #ffffff;
	--light-black: rgba(255, 255, 255, 0.7);
	--lightest-black: rgba(255, 255, 255, 0.5);
	--dark-blue: #f0f2f5;
	--light-dark-blue: rgba(240, 242, 245, 0.7);
	--light-dark-blue-1: rgba(161, 167, 176, 0.7);
	--light-gray: #23313d;
	--lightest-gray: #374957;
	--light-blue: #23313d;
	--lightest-blue: #23313d;
	--lightest-blue-inverse: #f0f2f5;
	--active-state: #ffffff;
	--gray-100: #6f8094;
	--lightest-green: #374957;
	--lightest-red: #dff0d8;
	--light-gray-border: initial;
	--dark-gray-border: #0f141b;
	--black-dark-10: #15202d;
	--black-dark-20: #23313d;
	--black-light-10: #23313d;

	--line-11: #2d4458;
	--lighter-gray: #23313d;
	--green-inverse: hsl(87, 71%, 35%);
	--line-22: #2d4458;
	--line-33: #2d4458;
	--toast-bg: #365169;
	--line-11-1: rgba(45, 68, 88, 0.4);
	--dropdown-shadow-outer: rgba(68, 103, 134, 0.05);
	--dropdown-shadow-inner: rgba(68, 103, 134, 0.15);
	--box-shadow-1: rgba(0, 0, 0, 0.5);
	--box-shadow-2: rgba(12, 12, 12, 0.5);
	--box-shadow-3: rgba(12, 12, 12, 0.8);
	--gray-50: #34495a;
	--gray-300: #23313d;
	--gray-200: #23313d;
	--gray-600: rgba(255, 255, 255, 0.7);
	--gray-700: #f0f2f5;
	--highlighted: #377db269;
	--selected: #007fef;
	--hover: #6f8694;

	--scrollbar-color: #34495a;

	--notifications-info-color: #31708f;
	--notifications-info-bg: #23313d;
	--notifications-info-border: #23313d;

	--notifications-success-color: #3c763d;
	--notifications-success-bg: #23313d;
	--notifications-success-border: #23313d;

	--notifications-warning-color: #8a6d3b;
	--notifications-warning-bg: #23313d;
	--notifications-warning-border: #23313d;

	--notifications-error-color: #a94442;
	--notifications-error-bg: #23313d;
	--notifications-error-border: #23313d;

	--avatar-info-bg: #1d2731;
	--avatar-success-bg: #1a281b;
	--avatar-warning-bg: #2c271e;
	--avatar-error-bg: #312020;
}

@media (min-width: 1023px) {
	:root {
		--margin-top: 0;
		--margin-top-without-nav: 0;
		--margin-bottom: 0;
		--desktop-header-offset: 86px;
		/* --font-massive: 24px;
		--font-largest: 18px;
		--font-large: 16px;
		--font-medium: 12px;
		--font-normal: 12px;
		--font-small: 12px;
		--font-smallest: 10px;
		--font-tiny: 8px; */
	}
}