*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
	margin: 0;
	padding: 0;
}

body{
 	overflow: auto;
	padding-bottom: 80px;
}

#container{
	width: 100%;
	height: 100%;
}

/* ---------------------- Hamburger Menu ----------------------------------- */
.hanburger-menu{
	border: none;
}
/* ---------------------- End Hamburger Menu ----------------------------------- */

/* ---------------------- App nav (shared by logged-in layout: header.php) --------- */
/* Lives here (not in dashboard.css/account.css) because header.php is the SHARED
   layout for every logged-in page, but each page only loads its OWN page CSS —
   app.css is the one stylesheet header.php loads on every app page, so this is
   the only place a rule can live and still apply on both /dashboard and
   /users/account. Active state matches activateMenu()'s emitted class: 'active'. */
.app-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.app-nav__link{color:var(--color-text-muted);font-weight:600;padding:.35rem .2rem;border-bottom:2px solid transparent}
.app-nav__link:hover{color:var(--color-text-strong)}
.app-nav__link.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
/* ---------------------- End App nav ----------------------------------- */

/* ---------------------- error msg ----------------------------------- */
#errors{
	color: var(--color-danger);
	font-weight: bolder;
}
/* ---------------------- end error msg ----------------------------------- */

/* ---------------------- error msg ----------------------------------- */
#success{
	color: var(--color-success);
	font-weight: bolder;
}
/* ---------------------- end error msg ----------------------------------- */

/* -------------------- Login/Index View --------------------------------- */
#login-container{
	width: 450px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* -------------------- End Login/Index View --------------------------------- */




/**
* --------------- text colors --------------------
**/
.text-red{
    color: red;
}

.text-green{
    color: green;
}

.text-black{
    color: black;
}
/**
* --------------- END text colors --------------------
**/

/* ============================================================
   CUSTOMIZE THIS PAGE  -  edit below
   NOTE: GLOBAL styles - affects ALL pages. To customize ONE page, edit that page's CSS file instead.
   These rules load LAST, so they override the Skeleton framework.
   Target an element by its id/class. Buttons need NO !important.
   (Element ids live in this page's view file.)
   ============================================================ */

/* Example - restyle this page's main button (uncomment & tweak):
#your-button-id {
    background-color: #2e7d32;
    border-color:     #2e7d32;
    color:            #fff;
    text-transform:   none;
}
#your-button-id:hover { background-color: #1b5e20; }
*/