:root {
	/* main colors */
	--dls-blue: #0014dc !important;
	--dls-dark-blue: #000b9e !important;
	--dls-red: #d11f1f !important;
	--dls-dark-red: #ab2222 !important;
	--dls-green: #168244 !important;
	--dls-yellow: #ea910d !important;

	/* incorrect name but widely used now */
	--dark-blue: var(--dls-dark-blue) !important;
	--dark-red: var(--dls-dark-red) !important;
	--dls-blue-hover: var(--dls-dark-blue) !important;
	--dls-blue-active: var(--dls-dark-blue) !important;

	/* grayscale */
	--gray-0: #080912 !important;
	--gray-1: #22263d !important;
	--gray-2: #505575 !important;
	--gray-3: #8b90ad !important;
	--gray-4: #adb1c7 !important;
	--gray-5: #cccfde !important;
	--gray-6: #ebecf2 !important;
	--black: #000 !important;
	--white: #fff !important;

	/* validation colors */
	--red: var(--dls-red) !important;
	--blue: var(--dls-blue) !important;
	--green: var(--dls-green) !important;
	--yellow: var(--dls-yellow) !important;
	--blue-gray: #1946a2 !important;
	--bright-yellow: #ffd200 !important;

	/* wrong name */
	--blue-grey: var(--blue-grey) !important;

	/* data visualization colors */
	--bright-blue: #75cdff !important;
	--pale-violet: #95a3ff !important;
	--bright-green: #4ce393 !important;
	--lime-green: #03a678 !important;
	--violet: #af76ed !important;
	--bright-purple: #dc8fdc !important;
	--lime: #dbe011 !important;
	--swamp: #b2a637 !important;
	--bright-red: #eb8180 !important;
	--mauve: #d25299 !important;
	--sand: #ead090 !important;
	--brown: #c49a6c !important;
	--medium-blue: #28b1da !important;
	--cyan: #638bb3 !important;
	--peach: #ffbb8b !important;
	--burnt-orange: #d47500 !important;
	--mango-yellow: #fdb913 !important;

	/* nav color */
	--slb-dark-blue: #051464 !important;
	--silver: #99a6b5 !important;

	/* RGB */
	/* main colors */
	--dls-blue-rgb: 0, 20, 220 !important;
	--dls-dark-blue-rgb: 0, 11, 158 !important;
	--dls-red-rgb: 209, 31, 31 !important;
	--dls-dark-red-rgb: 171, 34, 34 !important;
	--dls-green-rgb: 22, 130, 68 !important;
	--dls-yellow-rgb: 234, 145, 13 !important;

	/* wrong variable name */
	--blue-rgb: var(--dls-blue-rgb) !important;
	--dark-blue-rgb: var(--dls-dark-blue-rgb) !important;
	--blue-grey-rgb: var(--blue-gray-rgb) !important;

	/* grayscale */
	--gray-0-rgb: 8, 9, 18 !important;
	--gray-1-rgb: 34, 38, 61 !important;
	--gray-2-rgb: 80, 85, 117 !important;
	--gray-3-rgb: 139, 144, 173 !important;
	--gray-4-rgb: 173, 177, 199 !important;
	--gray-5-rgb: 204, 207, 222 !important;
	--gray-6-rgb: 235, 236, 242 !important;
	--white-rgb: 255, 255, 255 !important;
	--black-rgb: 0, 0, 0 !important;

	/* validation colors */
	--red-rgb: 209, 31, 31 !important;
	--green-rgb: 22, 130, 68 !important;
	--yellow-rgb: 234, 145, 13 !important;
	--blue-gray-rgb: 25, 70, 162 !important;
	--bright-yellow-rgb: 255, 210, 0 !important;

	/* data visualization colors */
	--bright-blue-rgb: 117, 205, 255 !important;
	--pale-violet-rgb: 149, 163, 255 !important;
	--bright-green-rgb: 76, 227, 147 !important;
	--lime-green-rgb: 3, 166, 120 !important;
	--violet-rgb: 175, 118, 237 !important;
	--bright-purple-rgb: 220, 143, 220 !important;
	--lime-rgb: 219, 224, 17 !important;
	--swamp-rgb: 178, 166, 55 !important;
	--bright-red-rgb: 235, 129, 128 !important;
	--mauve-rgb: 210, 82, 153 !important;
	--sand-rgb: 234, 208, 144 !important;
	--brown-rgb: 196, 154, 108 !important;
	--medium-blue-rgb: 40, 177, 218 !important;
	--cyan-rgb: 99, 139, 179 !important;
	--peach-rgb: 255, 187, 139 !important;
	--burnt-orange-rgb: 212, 117, 0 !important;
	--mango-yellow-rgb: 253, 185, 19 !important;

	/* nav color */
	--slb-dark-blue-rgb: 211, 76, 75 !important;
	--silver-rgb: 141, 192, 88 !important;

	/* DLS 3.0 colors */
	--dls-grey-01: #080912 !important;
	--dls-grey-02: #131629 !important;
	--dls-grey-03: #22263d !important;
	--dls-grey-04: #383d5c !important;
	--dls-grey-05: #505575 !important;
	--dls-grey-06: #6c7191 !important;
	--dls-grey-07: #8b90ad !important;
	--dls-grey-08: #adb1c7 !important;
	--dls-grey-09: #cccfde !important;
	--dls-grey-10: #ebecf2 !important;

	/* Control colors */
	--control-default-border-color: var(--dls-grey-08) !important;
	--control-dark-border-color: var(--dls-grey-08) !important;
	--control-active-border-color: var(--dls-blue) !important;
	--control-default-background-color: var(--white) !important;
	--control-dark-background-color: var(--dls-grey-08) !important;
	--control-active-background-color: var(--dls-blue) !important;
	--control-disabled-background-color: var(--dls-grey-10) !important;
	--command-background-default: var(--white) !important;
	--command-color-default: var(--dls-blue) !important;
	--command-color-active: var(--dls-blue-hover) !important;
	--command-color-disabled: var(--dls-grey-08) !important;
	--validation-error-color: var(--dls-red) !important;
	--validation-warning-color: var(--dls-yellow) !important;

	/* Legacy shades of grey */
	--light-gray-3: #f0f0f0 !important;
	--light-gray-6: #e5e5e5 !important;
	--light-gray-7: #eee !important;
	--medium-gray-3: #c1c1c1 !important;
	--medium-gray-5: #c7d0d8 !important;
	--medium-gray-6: #8a8a8a !important;
	--medium-gray-7: #b0b0b0 !important;
	--medium-gray-8: #8b8b8b !important;
	--dark-gray: #242424 !important;
	--dark-gray-2: #373737 !important;
	--dark-gray-4: #575757 !important;
	--night-sky: #39414c !important;
	--night-sky-1: #39414d !important;

	/* there are some random uses: */
	--divider: 1px solid rgba(0, 0, 0, 10%) !important;
	--pale-grass: #75cd86 !important;
	--purple: #bc6ebe !important;
	--sky-blue: #75cde6 !important;
	--dove-blue: #9b8fcd !important;
	--dls-yellow-active: #fabb42 !important;
	--purple-rgb: 188, 110, 190 !important;
	--dove-blue-rgb: 155, 143, 205 !important;

	/* Font */

	--common-text-font: 'SLB Sans Medium', 'Noto Sans Regular', 'Noto Sans CJK SC Regular', sans-serif !important;
	--common-text-font-medium: 'SLB Sans Bold', 'Noto Sans Bold', 'Noto Sans CJK SC Bold', sans-serif !important;
	--common-text-font-bold: 'SLB Sans Bold', 'Noto Sans Bold', 'Noto Sans CJK SC Bold', sans-serif !important;
	--common-text-font-black: 'SLB Sans Bold', 'Noto Sans Bold', 'Noto Sans CJK SC Bold', sans-serif !important;
	--common-text-font-light: 'SLB Sans Medium', 'Noto Sans Regular', 'Noto Sans CJK SC Regular', sans-serif !important;
	--common-text-font-italic: 'SLB Sans Medium', 'Noto Sans Regular', 'Noto Sans CJK SC Regular', sans-serif !important;
	--lc: 0.03em !important;

	letter-spacing: 0.02em;
}

@font-face {
	font-family: 'SLB Sans Bold';
	font-display: swap;
	src: url('/webdrillplan/assets/fonts/SLBSans-Bold.woff') format('woff'), url('/webdrillplan/assets/fonts/SLBSans-Bold.otf') format('opentype');  
}

@font-face {
	font-family: 'SLB Sans Medium';
	font-display: swap;
	src: url('/webdrillplan/assets/fonts/SLBSans-Medium.woff') format('woff'), url('/webdrillplan/assets/fonts/SLBSans-Medium.otf') format('opentype');
}

@font-face {
	font-family: 'Noto Sans Bold';
	font-display: fallback;
	src:
		local("Noto Sans Bold")
}

@font-face {
	font-family: 'Noto Sans Regular';
	font-display: fallback;
	src:
		local("Noto Sans Regular")
}

@font-face {
	font-family: 'Noto Sans CJK SC Bold';
	font-display: fallback;
	src:
		local("Noto Sans CJK SC Bold")
}

@font-face {
	font-family: 'Noto Sans CJK SC Regular';
	font-display: fallback;
	src:
		local("Noto Sans CJK SC Regular")
}