@font-face {
	font-family: "roboto";
	src:
	  local("roboto"),
	  url(./fonts/Roboto-Regular.ttf) format("truetype");
	font-display: swap;
  }
  
  
  @font-face {
	font-family: "roboto-semibold";
	src:
	  local("roboto-semibold"),
	  url(./fonts/Roboto-SemiBold.ttf) format("truetype");
	font-display: swap;
  }



:root {

	--theme-font-regular: "roboto";
	--theme-font-semibold: "roboto-semibold";


	--site-bg: #0e1015;
	--sidebar-bg:#181c24;
	--sidebar-logo-height:28px;

	--primary-color: #8ab4f8;
	--text-color: #faf5f7;
	--text-color-dim: #8e929c;

	--form-bg: #ffffff00;
	--form-border: #3f5d62;
	--form-error-state: #f50808;
	--select-highliht-color: #7d724a;
	
	--box-border-color: #434343;
	--disabled-fill: #2d343f;
	--disabled-text: #4b4f55;
	--box-background: #142939;
	--secondary-box-background: #223e46;
	--form-warning-text: #dd931a;
	--form-image-drag: #3140b143;
	--button-bg-dark: #0c111d;
	--button-bg-light: #ffffff;
	--progress-bg: #293a52;
	--tooltip-bg: #0c111d;
	--tooltip-text: #faf5f7;

	--modal-backdrop: #000000cf;

	--context-help-text: #000000;
	--context-help-bg: #48c5bb;
	--context-help-shadow: #ffffff88;
	--context-help-scrollbar-thumb: #082b14;
	--context-help-scrollbar-track: #ffffff00;

	--datepicker-bg: #fff;
	--datepicker-header-bg: #fff;
	--datepicker-top-triangle: #fff;

	--spinner-color: var(--primary-color);
	--spinner-secondary-color: #ffffff20;
	
	--field-border-radius: 0.25rem;
	--border-width: 0.35rem;
  }