html::-webkit-scrollbar {
	display: none;
}

html {
	scrollbar-width: none;
	height: 100%;
}

:root {
	--gray-color: #d8d8d8;
	--theme-color-1: #36a9e1;
	--theme-color-2: #5c8fcb;
	--theme-color-3: #27589c;
	--theme-color-4: #1b3258;
	--red-color: #CE100F;
	--green-color: #007B15;

	/*
	Pruebas de esquemas de color
	--theme-color-1: #36e169;
	--theme-color-2: #5ccb6b;
	--theme-color-3: #279c44;
	--theme-color-4: #1b582a;
	*/

	--bkg-color-primary: var(--gray-color);
	--fg-color-primary: var(--theme-color-4);
	--bkg-color-secondary: var(--theme-color-4);
	--fg-color-secondary: var(--gray-color);
	--bkg-color-warning: rgb(254, 186, 0);
	--fg-color-warning: black;
	--bkg-color-warning-secondary: rgb(188, 138, 0);
	--fg-color-warning-secondary: white;
	--bkg-color-danger: #ce100f;
	--fg-color-danger: white;
	--bkg-color-danger-secondary: #960a0a;
	--fg-color-danger-secondary: white;
	--bkg-color-success: #007B15;
	--fg-color-success: white;

	--responsive-breakpoint: 768px;
	--body-template: 1fr 3rem;
	
	--filter-blanco: invert(98%) sepia(2%) saturate(10%) hue-rotate(56deg) brightness(102%) contrast(104%);

	--filter-gris: invert(99%) sepia(0%) saturate(0%) hue-rotate(151deg) brightness(88%) contrast(95%);

	--filter-blue1: invert(56%) sepia(68%) saturate(498%) hue-rotate(157deg) brightness(92%) contrast(91%);

	--filter-blue2: invert(53%) sepia(39%) saturate(611%) hue-rotate(172deg) brightness(95%) contrast(85%);

	--filter-blue3: invert(29%) sepia(33%) saturate(1446%) hue-rotate(179deg) brightness(99%) contrast(93%);

	--filter-blue4: invert(13%) sepia(52%) saturate(1748%) hue-rotate(196deg) brightness(95%) contrast(88%);

}

/* filter for color BLACKS SVGs */
.filter-white {
	filter: var(--filter-blanco);
}

.filter-gray {
	filter: var(--filter-gris);
}

.filter-blue1 {
	filter: var(--filter-blue1);
}

.filter-blue2 {
	filter: var(--filter-blue2);
}

.filter-blue3 {
	filter: var(--filter-blue3);
}

.filter-blue4 {
	filter: var(--filter-blue4);
}
/**/

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	margin: 0;
	padding: 0px;
	box-sizing: border-box;
	font-family: Oswald, sans-serif;

}

html > body {
	display: grid;
	grid-template-columns: var(--body-template);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

@media (max-width: var(--responsive-breakpoint)) {
	html > body {
		grid-template-columns: 1fr;
	}
}	

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

.theme--light {
	background-color: transparent !important;
	display: flex;
	justify-content: center;
}

.card {
	padding: 10px; 
	background: #fff; 
	border-radius: 25px
}



ul {
	list-style: none;
}


/*  NAVIGATION STYLES  */
.nav-link {
	color: #f4f4f4;
	align-items: center;
	padding: 15px 20px;
	display: inline-flex;
	justify-content: center;
	width: 100%;
	cursor:pointer;
}

.nav-link:hover {
	background-color: #fff2;
	text-decoration: none;
	color: #f4f4f4;
}

.nav-link:focus {
  color: #f4f4f4;
}

.nav-link:visited {
  color: #f4f4f4;
}


input[type="number"] {
	-moz-appearance: textfield;
}

h1:hover {
	border: none;
}

td[colspan="100%"] {
	text-align: center;
}

.modal-body {
	overflow-y: auto;
}

@media screen and (max-width: 768px) and (min-width: 0px) {
	html > body {
		grid-template-columns: 1fr;
		height: 100vh;
	
	}

 }