@font-face {
  font-family: "Toss";
  src: url(files/fonts/toss.otf);
}

.barlow-thin {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.barlow-extralight {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.barlow-light {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-medium {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-semibold {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-bold {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.barlow-extrabold {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.barlow-black {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.barlow-thin-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.barlow-extralight-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.barlow-light-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.barlow-regular-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.barlow-medium-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.barlow-semibold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.barlow-bold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.barlow-extrabold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.barlow-black-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body {
	/* Variables */
	--bor-rad: 0.5em;
	--col-bg1: #FAFAFA;
	--col-tx1: #280500;
	--col-hg1: FireBrick;
	
	background-color: var(--col-hg1);
	
	margin: 2em;
	font-family: "Barlow", sans-serif;
	font-weight: 500;
	color: var(--col-tx1);
	font-size: 16px;
}

i,b,strong,em { color: var(--col-hg1); }
b,strong { font-weight: 700; }

a {
	color: var(--col-hg1);
	text-decoration: none;
	font-weight: 600;
}

a::before {
	content: "\ea6f ";
	font-family: "Remixicon";
}

.grid-container-home {
	display: flex; gap: 1em;
	flex-direction: row;
	margin: auto; height: calc(100vh - 4em);
}

.grid-container-home:has(.card-full) {
	height: auto !important;
}

.card-title {
	font-size: 1.5em;
	font-weight: 700;
	position: sticky; top:-0.5em; width: 100%;
	z-index: 1;
	margin: -0.5em; padding: 0.5em; 
	background-color: var(--col-bg1);
}

.card {
	background-color: var(--col-bg1);
	border-radius: var(--bor-rad);
	padding: 1em;
	width: 25%; position: relative;
	overflow: scroll;
}

.card-body {
	position: absolute; bottom: 0; right: 0; padding: 1em;
	text-align: right; height: auto;
}

.card-full>.card-body { position: relative; top: 1em; text-align: left; padding: 0em; padding-bottom: 1em }

.card-full>.card-body>.read-table { width: 100%; }

.card-full { width: calc(100%); }

.status-emoji { font-family: "Toss" !important; display: inline;}

.status-title {
	font-weight: 700; color: var(--col-hg1);
}
.status-body { text-align: right; }

td { width: 100%; }

h1 { color: var(--col-hg1); margin: 0em; }
p { margin: 0;margin-top: 1em; }
ul { padding-left: 1em; list-style: "-   "; margin-bottom: 0; }

@media screen and (max-width: 720px) {

body {
	margin: 2em 1em;
}

.grid-container-home {
	width: calc(100% - 2em);
	flex-direction: column; height: auto;
}

.card {
	width: auto;
}

.card-body {
	position: relative; padding: 0 !important; top: 0;
}

.card-full>.card-body { top: 0em; }

.card-full>.card-body>.read-table {
	position: relative; padding-bottom: 0em; top: 0em;
}

.card-title { margin-bottom: 0; }

ul { margin-bottom: 0em; }

}