* { box-sizing: border-box; margin: 0; padding: 0; }

html,body { font-size: 15px; font-family: "Poppins", sans-serif; background: #fff; color: #161616; }

a { text-decoration: none; color: unset; }
ul { list-style: none; }
img { vertical-align: middle; }

p { font-size: ; }

h1,h2,h3,h4,h5,h6 { color: #000; line-height: 1.4; }
section { overflow: hidden; }
 
.container { max-width: 1140px; margin: auto; }
.widget_section { display: block; padding: 60px 16px; position: relative; }

button { border: 0; outline: 0; font-weight: 500; font-family: unset; }


:root {
	--flight : brightness(0) invert(1);
	--fred : invert(12%) sepia(100%) saturate(5549%) hue-rotate(352deg) brightness(98%) contrast(88%);

	--c1 : #118c4f;
	--c2 : #002c60;
	--c3 : #e8edf4;
	--c4 : #cee0ff;

	--bs  : 0px 0px 35px 0px #00000026;
	--bs1 : 0px 0px 30px 0px #0000001a;
	--bs2 : 0 3.4px 2.7px -30px #0000000f, 0 8.2px 8.9px -30px #00000012, 0 25px 40px -30px #00000033;
	--bs3 : 0px 0px 16px 0px #00000026;
	--bs4 : 0px 0px 20px #0000001a;
	--ts  : all 0.5s ease-in-out;
	--fa  : "Font Awesome 6 Pro";
	--ff : "Antonio", sans-serif;
	--ff2 : "Montserrat", Sans-serif;

	--bgG1 : linear-gradient(to right, #09A7A7, #00B45A);

	--cg : linear-gradient(to right, #FFA800, #F09030);
	--cgh : linear-gradient(to right, #F09030, #FFA800);
}



/* ---------- ----- Login ----- ---------- */
.login_area { width: 100%; height: 86vh; display: flex; justify-content: space-around; align-items: center; }
.login_form { max-width: 400px; width: 100%; padding: 30px; background: #fff; box-shadow: 0px 2px 4px #ddd; border-radius: 4px; }
.login_form h3 { display: block; text-align: center; font-size: 32px; color: #6747c7; }
.login_form form { display: block; margin-top: 16px; }
.input_group { position: relative; margin-bottom: 16px; }
.input_group label { display: inline-block; position: relative; font-weight: 600; margin-bottom: 6px; color: #000; }
.input_group input { width: 100%; padding: 12px 16px; border-radius: 4px; border: 1px solid #b7b7b7; outline: 0;  }
.input_group i { display: block; width: 42px; height: 42px; line-height: 42px; text-align: center; position: absolute; top: 30px; right: 0; font-size: 16px; }
.input_group button { width: 100%; padding: 14px 16px; background: #6747c7; color: #fff; border-radius: 4px; border: 0; outline: 0; }



/* ========== ========== ========== ========== ========== ========== ========== ==========
										Database
========== ========== ========== ========== ========== ========== ========== ========== */

/* ---------- ----- Header ----- ---------- */
.header { display: block; width: 100%; position: relative; background: #fff; padding: 16px; box-shadow: var(--bs); }
.header_row { display: flex; justify-content: space-between; align-items: center; }
.header_row h3 { font-size: 32px; color: #2196F3; }
.header_row a  { display: inline-flex; align-items: center; gap: 9px; padding: 12px 32px; background: #2196F3; color: #fff; transition: var(--ts); }
.header_row a:hover { background: #0b7dda;  }

@media all and (max-width: 480px) {
	.header_row h3 { font-size: 24px; }
	.header_row a { padding: 10px 16px; }
}


/* ----- Tabs ----- */
.tab_btns { width: 100%; display: block; text-align: center; }
.tab_btns button { display: inline; padding: 14px 16px; font-size: 16px; transition: 0.3s; }
.tab_btns button:hover { background: #2196F3; color: #fff; }
.tab_btns button.active { background: #0b7dda; color: #fff; }

.tab_area { display: none; width: 100%; padding: 16px 0px; }

/* ----- Data Table ----- */
.data_table { width: 100%; border-collapse: collapse; }
.data_table td, .data_table th { border: 1px solid #dddddd; text-align: left; padding: 8px; }
.data_table td i { color: red; text-align: center!important; }
.data_table tr:nth-child(1) { background: #2196F3!important; color: #fff; }
.data_table tr:nth-child(odd) { background: #dddddd; }

@media all and (max-width: 480px) {
	.data_table { display: block;  overflow-x: auto; }
}


/* ----- Footer ----- */
.footer { display: block; width: 100%; position: fixed; bottom: 0; background: #2196F3; color: #fff; }
.footer_row { display: block; padding: 16px; text-align: center; }
.footer_row p span { font-weight: 600; font-style: italic; }

@media all and (max-width: 480px) {
	.footer_row p span { display: block; }
}