/**
	Create by Hung 2022-11-23
	Define global variables to use for the whole application
*/


/* #Color */
:root {
	/* #Links */
	--primary-link-color: #3377DC;
	--primary-link-disabled-color: #526273;
	--primary-link-background: #0d6efd;


	/* #Buttons */
	--primary-button-color: white;
	--primary-button-background: #3377DC;
	--btn-primary-disabled-background: #3377DC;


	--primary-color: #397CD6;
	--success-color: #00b5a5;
	--inactive-color: #6C757D;
	--inactive-color2: #e0e0e0;


	/* #Progressbar */
	--done-background-color: #E6F5FA;
	--done-color: #2986AB;
	--active-background-color: #56BDDC;
	--active-color: white;

	/* #Card inside panel-body */
	--card-bgr-color: #F5F5F5

}


/* #Spacing */
:root {
	--main-padding-x: 20px;


	--s-space: 6px;  /* small margin, padding */
	--m-space: 12px; /* Medium margin, padding */
	--l-space: 18px; /* Large margin, padding */

	--padding-1: 20px;
	--padding-x-1: 20px;
	--padding-y-1: 20px;
	--padding-2: 24px;
	--padding-x-2: 24px;
	--padding-y-2: 24px;
}


/* #Border radius */
:root {
	--s-border-radius: 5px; /* small border radius */
	--m-border-radius: 10px; /* medium border radius */
	--l-border-radius: 15px; /* large border radius */
}


/* #Font */
:root {
	--heading-1: 24px;

	--font-size: 16px;
	--font-weight: 400;

	/* breadcrumb */
	--breadcrumb-font-size: 14px;
	--breadcrumb-font-weight: 400;

	/* Labels */
	--label-font-size: 14px;
	--label-font-weight: 400;
}