/*========== GOOGLE FONTS ==========*/
@import url("/css/fonts.css");

/*========== VARIABLES CSS ==========*/
:root {
	/*========== Font and typography ==========*/
	--h1-font-size: 1.2rem;
    --h2-font-size: 1.1rem;
    --h3-font-size: 1rem;
    --body-font-size: 0.9rem;
	--body-margin: 8px;
	--border-radius: 0.2rem;

	/*========== z index ==========*/
	--z-fixed: 100;

	/*=======================================================*/
	/*========== Light Mode Colors ==========*/
	/*=======================================================*/
    --body-text: #23414e;
    --body-bg: #fefefe;

	--header-bg: var(--body-bg);
	--header-text:var(--body-text);
    --header-border: #75afcc;
	
	--container-bg: #e5eff4;
    --container-border: var(--header-border);
	--container-text: #23414e;

	/* Color for Navigation */
	--dropdown-bg: var(--body-bg);
	--dropdown-text:var(--body-text);
	--dropdown-text-hover:rgba(100, 102, 109, 0.651);

	/* Background color and text color tables and class table */
	--table-hd:#1091D0;
	--table-odd-bg: var(--body-bg);
	--table-even-bg:#f2f2f2;
	--table-text: var(--body-text);
	--table-border: #DFDCDC;
    --help-bg: var(--container-bg);
    --nav-bg: #1091D0;
    --nav-text: #fefefe;

	/* Color Variables for for field  */
	--form-field-bg: rgb(255 250 250);
	--form-field-bg-edited: #f8fbaa;
	--form-field-bg-unreliable: pink;
	
	--form-field-border:  #B5B0B0;
	--form-field-border-focus:  #837e7e;
	--form-text: var(--body-text);
	--input-disabled: #cecece;

	--anchor-color: #698fa2;
    --hover-color: #0e5b81;
    --active-color: #77c055;
	--active-color-light: #a3c593;

	/* Variable for button */
	--button-bg1: #008ccf;
    /* --button-bg2: #75afcc88; */
    --button-border: #afc6d1;
	--button-text: var(--body-bg);

	--bs-body-font-family: 'Poppins', sans-serif;
	--bs-body-font-size: 1rem;
	--bs-body-bg: var(--body-bg);
	--bs-primary-rgb: var(--header-bg);
	--bs-secondary-rgb: var(--input-disabled);
    --bs-nav-link-color: var(--anchor-color);
	--bs-nav-link-hover-color: var(--hover-color);
    --bs-info-rgb: var(--container-border);
	--bs-info-rgb-50: rgba(117 ,175, 204, 0.5);
    --bs-body-color: var(--body-text);
    --bs-heading-color: var(--container-text);

	--border-color: #d6d5d5;
	--section-bg-transparent-color: #eeec;
	--section-bg-color: #eee;
	--popup-bg-color: #eee;
}

/*=======================================================*/
/*========== Dark Mode Colors ==========*/
/*=======================================================*/
[data-theme="dark"] {
    --body-text:#B5B0B0;
    --body-bg: #343434;
  
    --header-text:#eee;
    --header-bg:#3D3D3D;
    --header-border: #ccc;

    --container-text:var(--header-text);
    --container-bg: #121212;
    --container-border: #555353;   
    --help-bg: var(--body-text);
    --nav-bg: var(--container-bg);
	--nav-text: var(--body-text);
	
    --dropdown-text:#ccc;
    --dropdown-text-hover:rgba(100, 102, 109, 0.651);
    --dropdown-bg: #fff;
    
    --table-bg:  #343434;
    --table-odd-bg: #2E2F34;
    --table-even-bg:#232429;
    --table-border: #121212;

    /* Color Variables for for field  */
    --form-field-bg:#61686a;
	--form-field-bg-edited: #838900;
    --active-color: #838900;
	--active-color-light: #888b4d;
    --anchor-color: #9bd9f8;
    --form-field-border:  rgb(10, 14, 29);
    --form-text: var(--header-text);
    --hover-color: #def0f9;
	--input-disabled: #928c8c;

	--button-bg2: #3E3E3E;
    --button-bg1: #595959;
    --button-border: #595959;
	--button-text: var(--header-text);
}

input::-webkit-input-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder,
input::-moz-placeholder,
input:placeholder,
input::placeholder {
	color: var(--container-bg);
}