:root {
	--color-comfama-pink: #df1c6f;
	--color-comfama-pink-dark: #b02982;
	--color-comfenalco-lime: #c4d600;
	--color-comfenalco-green: #005744;
}

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

html {
	font-family: sans-serif;
}

/* BADGES */
.badge {
	padding: 0.1rem 0.2rem;
	font-size: 0.8rem;
	border: 1px solid #888;
	border-radius: 0.2rem;
	background-color: #eee;
	text-transform: uppercase;
}

.badge.comfama {
	background-color: var(--color-comfama-pink);
	color: #fff;
	border-color: var(--color-comfama-pink);
}

.badge.comfenalco {
	background-color: var(--color-comfenalco-lime);
	color: var(--color-comfenalco-green);
	border-color: var(--color-comfenalco-green);
}


/* MODAL */
.modal-wrapper {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: #000;
	background: rgba(0, 0, 0, 0.8);

	display: flex;
	flex-direction: column;
	justify-content: center;

	transition: opacity 100ms;
	transition-timing-function: ease-in;

	z-index: 9999;
}
.modal-wrapper[closed] {
	opacity: 0;
}
.modal-wrapper .modal-content {
	margin: 0 auto;
	padding: 10px;
	width: 80vw;
	max-width: 600px;
	background: #fff;
	min-height: 100px;
	max-height: 80vh;
	box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.5);
	border-radius: 5px;
	overflow: hidden;
	overflow-y: auto;
}

#ModalWrapper {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9999999;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#ModalBox {
	width: 80vw;
	max-height: 80vh;
	background: #fff;
	padding: 1rem;
	border-radius: 0.5rem;
}

/* DISABLED LINKS */
.disabled a,
a.disabled {
	pointer-events: none;
}

hr.separator {
	margin: 1rem 0;
	border: none;
	border-top: 1px solid #ccc;
}