MediaWiki:Common.css

/* Fanon Wiki Common CSS */ /* The styles here are to be asmlied on all skins, so it's preferrable to have things that are "universal", such as utilities, rather than specific styles */

/* The fonts can be uploaded later to the server. When done, please remove these imports */ @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,800;1,800&display=swap'); /* EXO-2 */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); /* Roboto */


 * root {

/* Colors */ /* Logo colors */ --red: #ff4242; --yellow: #f5ff42; --blue: #4292ff; --green: #42ff44; /* Layout colors */ --bg-color: #e8f5e8; --link-color: #015fde; /* Other colors */ --lightgray: #bebebe; /* Fonts */ /* Font definitions */ --sans-serif: 'Roboto', system-ui, sans-serif; --title: 'Exo 2', 'Roboto', serif; --monospace: monospace; --font-default: 13pt var(--sans-serif); }

/* Border box */ box-sizing: border-box; }
 * , *::after, *::before {

/* Grid system */ .row { display: flex; flex-wrap: wrap; }

/* Grid columns */ .col { flex: 1 0 0%; }	.col-auto { flex: 0 0 auto; width: auto; }	.col-1 { flex: 0 0 auto; width: 8.33333333%; }	.col-2 { flex: 0 0 auto; width: 16.66666667%; }	.col-3 { flex: 0 0 auto; width: 25%; }	.col-4 { flex: 0 0 auto; width: 33.33333333%; }	.col-5 { flex: 0 0 auto; width: 41.66666667%; }	.col-6 { flex: 0 0 auto; width: 50%; }	.col-7 { flex: 0 0 auto; width: 58.33333333%; }	.col-8 { flex: 0 0 auto; width: 66.66666667%; }	.col-9 { flex: 0 0 auto; width: 75%; }	.col-10 { flex: 0 0 auto; width: 83.33333333%; }	.col-11 { flex: 0 0 auto; width: 91.66666667%; }	.col-12 { flex: 0 0 auto; width: 100%; }	@media (min-width: 576px) { .col-sm { flex: 1 0 0%; }		.col-sm-auto { flex: 0 0 auto; width: auto; }		.col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }		.col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }		.col-sm-3 { flex: 0 0 auto; width: 25%; }		.col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }		.col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }		.col-sm-6 { flex: 0 0 auto; width: 50%; }		.col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }		.col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }		.col-sm-9 { flex: 0 0 auto; width: 75%; }		.col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }		.col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }		.col-sm-12 { flex: 0 0 auto; width: 100%; }	}		@media (min-width: 768px) { .col-md { flex: 1 0 0%; }		.col-md-auto { flex: 0 0 auto; width: auto; }		.col-md-1 { flex: 0 0 auto; width: 8.33333333%; }		.col-md-2 { flex: 0 0 auto; width: 16.66666667%; }		.col-md-3 { flex: 0 0 auto; width: 25%; }		.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }		.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }		.col-md-6 { flex: 0 0 auto; width: 50%; }		.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }		.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }		.col-md-9 { flex: 0 0 auto; width: 75%; }		.col-md-10 { flex: 0 0 auto; width: 83.33333333%; }		.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }		.col-md-12 { flex: 0 0 auto; width: 100%; }	}		@media (min-width: 992px) { .col-lg { flex: 1 0 0%; }		.col-lg-auto { flex: 0 0 auto; width: auto; }		.col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }		.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }		.col-lg-3 { flex: 0 0 auto; width: 25%; }		.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }		.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }		.col-lg-6 { flex: 0 0 auto; width: 50%; }		.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }		.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }		.col-lg-9 { flex: 0 0 auto; width: 75%; }		.col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }		.col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }		.col-lg-12 { flex: 0 0 auto; width: 100%; }	}

/* Gaps */ .gap-0 { gap: 0; }

.gap-1 { gap: .25rem; }

.gap-2 { gap: .5rem; }

.gap-3 { gap: 1rem; }

/* X-axis specific */ .gap-x-0 { column-gap: 0; }

.gap-x-1 { column-gap: .25rem; }	.gap-x-2 { column-gap: .5rem; }	.gap-x-3 { column-gap: 1rem; }

/* Y-axis specific */ .gap-y-0 { row-gap: 0; }

.gap-y-1 { row-gap: .25rem; }	.gap-y-2 { row-gap: .5rem; }	.gap-y-3 { row-gap: 1rem; }

/* Border radius */ .br-0 { border-radius: 0; }

.br-1 { border-radius: .25rem; }

.br-2 { border-radius: .5rem; }

.br-3 { border-radius: 1rem; }

.br-4 { border-radius: 50px; }

.br-5 { border-radius: 100%; }

/* Displays */ .d-inline { display: inline!important; }

.d-inline-block { display: inline-block!important; }

.d-block { display: block!important; }

.d-grid { display: grid!important; }

.d-table { display: table!important; }

.d-table-row { display: table-row!important; }

.d-table-cell { display: table-cell!important; }

.d-flex { display: flex!important; }

.d-inline-flex { display: inline-flex!important; }

.d-none { display: none!important; }

/* Different screen sizes */ @media (min-width: 576px) { .d-sm-inline { display: inline!important; }		.d-sm-inline-block { display: inline-block!important; }		.d-sm-block { display: block!important; }		.d-sm-grid { display: grid!important; }		.d-sm-table { display: table!important; }		.d-sm-table-row { display: table-row!important; }		.d-sm-table-cell { display: table-cell!important; }		.d-sm-flex { display: flex!important; }		.d-sm-inline-flex { display: inline-flex!important; }		.d-sm-none { display: none!important; }	}	@media (min-width: 768px) { .d-md-inline { display: inline!important; }		.d-md-inline-block { display: inline-block!important; }		.d-md-block { display: block!important; }		.d-md-grid { display: grid!important; }		.d-md-table { display: table!important; }		.d-md-table-row { display: table-row!important; }		.d-md-table-cell { display: table-cell!important; }		.d-md-flex { display: flex!important; }		.d-md-inline-flex { display: inline-flex!important; }		.d-md-none { display: none!important; }	}	@media (min-width: 992px) { .d-lg-inline { display: inline!important; }		.d-lg-inline-block { display: inline-block!important; }		.d-lg-block { display: block!important; }		.d-lg-grid { display: grid!important; }		.d-lg-table { display: table!important; }		.d-lg-table-row { display: table-row!important; }		.d-lg-table-cell { display: table-cell!important; }		.d-lg-flex { display: flex!important; }		.d-lg-inline-flex { display: inline-flex!important; }		.d-lg-none { display: none!important; }	}

/* Flex utilities */ .flex-wrap { flex-wrap: wrap; }

.flex-nowrap { flex-wrap: nowrap; }

.flex-wrap-reverse { flex-wrap: wrap-reverse; }

.justify-content-start { justify-content: flex-start !important; }

.justify-content-end { justify-content: flex-end !important; }

.justify-content-center { justify-content: center !important; }

.justify-content-between { justify-content: space-between !important; }

.justify-content-around { justify-content: space-around !important; }

.justify-content-evenly { justify-content: space-evenly !important; }

.align-items-start { align-items: flex-start !important; }

.align-items-end { align-items: flex-end !important; }

.align-items-center { align-items: center !important; }

.align-items-baseline { align-items: baseline !important; }

.align-items-stretch { align-items: stretch !important; }

.align-content-start { align-content: flex-start !important; }

.align-content-end { align-content: flex-end !important; }

.align-content-center { align-content: center !important; }

.align-content-between { align-content: space-between !important; }

.align-content-around { align-content: space-around !important; }

.align-content-stretch { align-content: stretch !important; }

.align-self-auto { align-self: auto !important; }

.align-self-start { align-self: flex-start !important; }

.align-self-end { align-self: flex-end !important; }

.align-self-center { align-self: center !important; }

.align-self-baseline { align-self: baseline !important; }

.align-self-stretch { align-self: stretch !important; }

/* Different screen sizes */ @media (min-width: 576px) { .justify-content-sm-start { justify-content: flex-start !important; }		.justify-content-sm-end { justify-content: flex-end !important; }		.justify-content-sm-center { justify-content: center !important; }		.justify-content-sm-between { justify-content: space-between !important; }		.justify-content-sm-around { justify-content: space-around !important; }		.justify-content-sm-evenly { justify-content: space-evenly !important; }		.align-items-sm-start { align-items: flex-start !important; }		.align-items-sm-end { align-items: flex-end !important; }		.align-items-sm-center { align-items: center !important; }		.align-items-sm-baseline { align-items: baseline !important; }		.align-items-sm-stretch { align-items: stretch !important; }		.align-content-sm-start { align-content: flex-start !important; }		.align-content-sm-end { align-content: flex-end !important; }		.align-content-sm-center { align-content: center !important; }		.align-content-sm-between { align-content: space-between !important; }		.align-content-sm-around { align-content: space-around !important; }		.align-content-sm-stretch { align-content: stretch !important; }		.align-self-sm-auto { align-self: auto !important; }		.align-self-sm-start { align-self: flex-start !important; }		.align-self-sm-end { align-self: flex-end !important; }		.align-self-sm-center { align-self: center !important; }		.align-self-sm-baseline { align-self: baseline !important; }		.align-self-sm-stretch { align-self: stretch !important; }	}	@media (min-width: 768px) { .justify-content-md-start { justify-content: flex-start !important; }		.justify-content-md-end { justify-content: flex-end !important; }		.justify-content-md-center { justify-content: center !important; }		.justify-content-md-between { justify-content: space-between !important; }		.justify-content-md-around { justify-content: space-around !important; }		.justify-content-md-evenly { justify-content: space-evenly !important; }		.align-items-md-start { align-items: flex-start !important; }		.align-items-md-end { align-items: flex-end !important; }		.align-items-md-center { align-items: center !important; }		.align-items-md-baseline { align-items: baseline !important; }		.align-items-md-stretch { align-items: stretch !important; }		.align-content-md-start { align-content: flex-start !important; }		.align-content-md-end { align-content: flex-end !important; }		.align-content-md-center { align-content: center !important; }		.align-content-md-between { align-content: space-between !important; }		.align-content-md-around { align-content: space-around !important; }		.align-content-md-stretch { align-content: stretch !important; }		.align-self-md-auto { align-self: auto !important; }		.align-self-md-start { align-self: flex-start !important; }		.align-self-md-end { align-self: flex-end !important; }		.align-self-md-center { align-self: center !important; }		.align-self-md-baseline { align-self: baseline !important; }		.align-self-md-stretch { align-self: stretch !important; }	}	@media (min-width: 768px) { .justify-content-lg-start { justify-content: flex-start !important; }		.justify-content-lg-end { justify-content: flex-end !important; }		.justify-content-lg-center { justify-content: center !important; }		.justify-content-lg-between { justify-content: space-between !important; }		.justify-content-lg-around { justify-content: space-around !important; }		.justify-content-lg-evenly { justify-content: space-evenly !important; }		.align-items-lg-start { align-items: flex-start !important; }		.align-items-lg-end { align-items: flex-end !important; }		.align-items-lg-center { align-items: center !important; }		.align-items-lg-baseline { align-items: baseline !important; }		.align-items-lg-stretch { align-items: stretch !important; }		.align-content-lg-start { align-content: flex-start !important; }		.align-content-lg-end { align-content: flex-end !important; }		.align-content-lg-center { align-content: center !important; }		.align-content-lg-between { align-content: space-between !important; }		.align-content-lg-around { align-content: space-around !important; }		.align-content-lg-stretch { align-content: stretch !important; }		.align-self-lg-auto { align-self: auto !important; }		.align-self-lg-start { align-self: flex-start !important; }		.align-self-lg-end { align-self: flex-end !important; }		.align-self-lg-center { align-self: center !important; }		.align-self-lg-baseline { align-self: baseline !important; }		.align-self-lg-stretch { align-self: stretch !important; }	}

/* Text utilities */ .text-start, .text-left { text-align: start; }

.text-end, .text-right { text-align: end; }

.text-center { text-align: center; }

.text-justify { text-align: justify; }

/* Different screen sizes */ @media (min-width: 576px) { .text-sm-start, .text-sm-left { text-align: start; }		.text-sm-end, .text-sm-right { text-align: end; }		.text-sm-center { text-align: center; }		.text-sm-justify { text-align: justify; }	}	@media (min-width: 768px) { .text-md-start, .text-md-left { text-align: start; }		.text-md-end, .text-md-right { text-align: end; }		.text-md-center { text-align: center; }		.text-md-justify { text-align: justify; }	}	@media (min-width: 576px) { .text-lg-start, .text-lg-left { text-align: start; }		.text-lg-end, .text-lg-right { text-align: end; }		.text-lg-center { text-align: center; }		.text-lg-justify { text-align: justify; }	}

/* Paddings */ .p-0 { padding: 0!important; }

.p-1 { padding: .25rem!important; }

.p-2 { padding: .5rem!important; }

.p-3 { padding: 1rem!important; }

.p-4 { padding: 2rem!important; }

/* Left paddings only */ .pl-0 { padding-left: 0!important; }	.pl-1 { padding-left: .25rem!important; }	.pl-2 { padding-left: .5rem!important; }	.pl-3 { padding-left: 1rem!important; }	.pl-4 { padding-left: 2rem!important; }	/* Right paddings only */ .pr-0 { padding-right: 0!important; }	.pr-1 { padding-right: .25rem!important; }	.pr-2 { padding-right: .5rem!important; }	.pr-3 { padding-right: 1rem!important; }	.pr-4 { padding-right: 2rem!important; }	/* Top paddings only */ .pt-0 { padding-top: 0!important; }	.pt-1 { padding-top: .25rem!important; }	.pt-2 { padding-top: .5rem!important; }	.pt-3 { padding-top: 1rem!important; }	.pt-4 { padding-top: 2rem!important; }	/* Bottom paddings only */ .pb-0 { padding-bottom: 0!important; }	.pb-1 { padding-bottom: .25rem!important; }	.pb-2 { padding-bottom: .5rem!important; }	.pb-3 { padding-bottom: 1rem!important; }	.pb-4 { padding-bottom: 2rem!important; }	/* Different screen sizes */ @media (min-width: 576px) { .p-sm-0 { padding: 0!important; }		.p-sm-1 { padding: .25rem!important; }		.p-sm-2 { padding: .5rem!important; }		.p-lg-3 { padding: 1rem!important; }		.p-lg-4 { padding: 2rem!important }			/* Left paddings only */ .pl-sm-0 { padding-left: 0!important; }			.pl-sm-1 { padding-left: .25rem!important; }			.pl-sm-2 { padding-left: .5rem!important; }			.pl-sm-3 { padding-left: 1rem!important; }			.pl-sm-3 { padding-left: 2rem!important }			/* Right paddings only */ .pr-sm-0 { padding-right: 0!important; }			.pr-sm-1 { padding-right: .25rem!important; }			.pr-sm-2 { padding-right: .5rem!important; }			.pr-sm-3 { padding-right: 1rem!important; }			.pr-sm-4 { padding-right: 2rem!important }			/* Top paddings only */ .pt-sm-0 { padding-top: 0!important; }			.pt-sm-1 { padding-top: .25rem!important; }			.pt-sm-2 { padding-top: .5rem!important; }			.pt-sm-3 { padding-top: 1rem!important; }			.pt-sm-4 { padding-top: 2rem!important }			/* Bottom paddings only */ .pb-sm-0 { padding-bottom: 0!important; }			.pb-sm-1 { padding-bottom: .25rem!important; }			.pb-sm-2 { padding-bottom: .5rem!important; }			.pb-sm-3 { padding-bottom: 1rem!important; }			.pb-sm-4 { padding-bottom: 2rem!important }	}	@media (min-width: 768px) { .p-md-0 { padding: 0!important; }		.p-md-1 { padding: .25rem!important; }		.p-md-2 { padding: .5rem!important; }		.p-lg-3 { padding: 1rem!important; }		.p-lg-4 { padding: 2rem!important }			/* Left paddings only */ .pl-md-0 { padding-left: 0!important; }			.pl-md-1 { padding-left: .25rem!important; }			.pl-md-2 { padding-left: .5rem!important; }			.pl-md-3 { padding-left: 1rem!important; }			.pl-md-3 { padding-left: 2rem!important }			/* Right paddings only */ .pr-md-0 { padding-right: 0!important; }			.pr-md-1 { padding-right: .25rem!important; }			.pr-md-2 { padding-right: .5rem!important; }			.pr-md-3 { padding-right: 1rem!important; }			.pr-md-4 { padding-right: 2rem!important }			/* Top paddings only */ .pt-md-0 { padding-top: 0!important; }			.pt-md-1 { padding-top: .25rem!important; }			.pt-p-2 { padding-top: .5rem!important; }			.pt-md-3 { padding-top: 1rem!important; }			.pt-md-4 { padding-top: 2rem!important }			/* Bottom paddings only */ .pb-md-0 { padding-bottom: 0!important; }			.pb-md-1 { padding-bottom: .25rem!important; }			.pb-p-2 { padding-bottom: .5rem!important; }			.pb-md-3 { padding-bottom: 1rem!important; }			.pb-md-4 { padding-bottom: 2rem!important }	}	@media (min-width: 992px) { .p-lg-0 { padding: 0!important; }		.p-lg-1 { padding: .25rem!important; }		.p-lg-2 { padding: .5rem!important; }		.p-lg-3 { padding: 1rem!important; }		.p-lg-4 { padding: 2rem!important }			/* Left paddings only */ .pl-lg-0 { padding-left: 0!important; }			.pl-lg-1 { padding-left: .25rem!important; }			.pl-lg-2 { padding-left: .5rem!important; }			.pl-lg-3 { padding-left: 1rem!important; }			.pl-lg-3 { padding-left: 2rem!important }			/* Right paddings only */ .pr-lg-0 { padding-right: 0!important; }			.pr-lg-1 { padding-right: .25rem!important; }			.pr-lg-2 { padding-right: .5rem!important; }			.pr-lg-3 { padding-right: 1rem!important; }			.pr-lg-4 { padding-right: 2rem!important }			/* Top paddings only */ .pt-lg-0 { padding-top: 0!important; }			.pt-lg-1 { padding-top: .25rem!important; }			.pt-lg-2 { padding-top: .5rem!important; }			.pt-lg-3 { padding-top: 1rem!important; }			.pt-lg-4 { padding-top: 2rem!important }			/* Bottom paddings only */ .pb-lg-0 { padding-bottom: 0!important; }			.pb-lg-1 { padding-bottom: .25rem!important; }			.pb-lg-2 { padding-bottom: .5rem!important; }			.pb-lg-3 { padding-bottom: 1rem!important; }			.pb-lg-4 { padding-bottom: 2rem!important }	}

/* Margins */ .m-0 { margin: 0!important; }

.m-1 { margin: .25rem!important; }

.m-2 { margin: .5rem!important; }

.m-3 { margin: 1rem!important; }

.m-4 { margin: 2rem!important; }

/* Left paddings only */ .ml-0 { margin-left: 0!important; }	.ml-1 { margin-left: .25rem!important; }	.ml-2 { margin-left: .5rem!important; }	.ml-3 { margin-left: 1rem!important; }	.ml-4 { margin-left: 2rem!important; }	/* Right paddings only */ .mr-0 { margin-right: 0!important; }	.mr-1 { margin-right: .25rem!important; }	.mr-2 { margin-right: .5rem!important; }	.mr-3 { margin-right: 1rem!important; }	.mr-4 { margin-right: 2rem!important; }	/* Top paddings only */ .mt-0 { margin-top: 0!important; }	.mt-1 { margin-top: .25rem!important; }	.mt-2 { margin-top: .5rem!important; }	.mt-3 { margin-top: 1rem!important; }	.mt-4 { margin-top: 2rem!important; }	/* Bottom paddings only */ .mb-0 { margin-bottom: 0!important; }	.mb-1 { margin-bottom: .25rem!important; }	.mb-2 { margin-bottom: .5rem!important; }	.mb-3 { margin-bottom: 1rem!important; }	.mb-4 { margin-bottom: 2rem!important; }	/* Different screen sizes */ @media (min-width: 576px) { .m-sm-0 { margin: 0!important; }		.m-sm-1 { margin: .25rem!important; }		.m-sm-2 { margin: .5rem!important; }		.m-lg-3 { margin: 1rem!important; }		.m-lg-4 { margin: 2rem!important }			/* Left paddings only */ .ml-sm-0 { margin-left: 0!important; }			.ml-sm-1 { margin-left: .25rem!important; }			.ml-sm-2 { margin-left: .5rem!important; }			.ml-sm-3 { margin-left: 1rem!important; }			.ml-sm-3 { margin-left: 2rem!important }			/* Right paddings only */ .mr-sm-0 { margin-right: 0!important; }			.mr-sm-1 { margin-right: .25rem!important; }			.mr-sm-2 { margin-right: .5rem!important; }			.mr-sm-3 { margin-right: 1rem!important; }			.mr-sm-4 { margin-right: 2rem!important }			/* Top paddings only */ .mt-sm-0 { margin-top: 0!important; }			.mt-sm-1 { margin-top: .25rem!important; }			.mt-sm-2 { margin-top: .5rem!important; }			.mt-sm-3 { margin-top: 1rem!important; }			.mt-sm-4 { margin-top: 2rem!important }			/* Bottom paddings only */ .mb-sm-0 { margin-bottom: 0!important; }			.mb-sm-1 { margin-bottom: .25rem!important; }			.mb-sm-2 { margin-bottom: .5rem!important; }			.mb-sm-3 { margin-bottom: 1rem!important; }			.mb-sm-4 { margin-bottom: 2rem!important }	}	@media (min-width: 768px) { .m-md-0 { margin: 0!important; }		.m-md-1 { margin: .25rem!important; }		.m-md-2 { margin: .5rem!important; }		.m-lg-3 { margin: 1rem!important; }		.m-lg-4 { margin: 2rem!important }			/* Left paddings only */ .ml-md-0 { margin-left: 0!important; }			.ml-md-1 { margin-left: .25rem!important; }			.ml-md-2 { margin-left: .5rem!important; }			.ml-md-3 { margin-left: 1rem!important; }			.ml-md-3 { margin-left: 2rem!important }			/* Right paddings only */ .mr-md-0 { margin-right: 0!important; }			.mr-md-1 { margin-right: .25rem!important; }			.mr-md-2 { margin-right: .5rem!important; }			.mr-md-3 { margin-right: 1rem!important; }			.mr-md-4 { margin-right: 2rem!important }			/* Top paddings only */ .mt-md-0 { margin-top: 0!important; }			.mt-md-1 { margin-top: .25rem!important; }			.mt-p-2 { margin-top: .5rem!important; }			.mt-md-3 { margin-top: 1rem!important; }			.mt-md-4 { margin-top: 2rem!important }			/* Bottom paddings only */ .mb-md-0 { margin-bottom: 0!important; }			.mb-md-1 { margin-bottom: .25rem!important; }			.mb-p-2 { margin-bottom: .5rem!important; }			.mb-md-3 { margin-bottom: 1rem!important; }			.mb-md-4 { margin-bottom: 2rem!important }	}	@media (min-width: 992px) { .m-lg-0 { margin: 0!important; }		.m-lg-1 { margin: .25rem!important; }		.m-lg-2 { margin: .5rem!important; }		.m-lg-3 { margin: 1rem!important; }		.m-lg-4 { margin: 2rem!important }			/* Left paddings only */ .ml-lg-0 { margin-left: 0!important; }			.ml-lg-1 { margin-left: .25rem!important; }			.ml-lg-2 { margin-left: .5rem!important; }			.ml-lg-3 { margin-left: 1rem!important; }			.ml-lg-3 { margin-left: 2rem!important }			/* Right paddings only */ .mr-lg-0 { margin-right: 0!important; }			.mr-lg-1 { margin-right: .25rem!important; }			.mr-lg-2 { margin-right: .5rem!important; }			.mr-lg-3 { margin-right: 1rem!important; }			.mr-lg-4 { margin-right: 2rem!important }			/* Top paddings only */ .mt-lg-0 { margin-top: 0!important; }			.mt-lg-1 { margin-top: .25rem!important; }			.mt-lg-2 { margin-top: .5rem!important; }			.mt-lg-3 { margin-top: 1rem!important; }			.mt-lg-4 { margin-top: 2rem!important }			/* Bottom paddings only */ .mb-lg-0 { margin-bottom: 0!important; }			.mb-lg-1 { margin-bottom: .25rem!important; }			.mb-lg-2 { margin-bottom: .5rem!important; }			.mb-lg-3 { margin-bottom: 1rem!important; }			.mb-lg-4 { margin-bottom: 2rem!important }	} /* Floats */ .f-none { float: none!important; }

.f-left { float: left!important; }

.f-right { float: right!important; }

/* Different screen sizes */ @media (min-width: 576px) { .f-sm-none { float: none!important; }		.f-sm-left { float: left!important; }		.f-sm-right { float: right!important; }	}	@media (min-width: 768px) { .f-md-none { float: none!important; }		.f-md-left { float: left!important; }		.f-md-right { float: right!important; }	}	@media (min-width: 992px) { .f-lg-none { float: none!important; }		.f-lg-left { float: left!important; }		.f-lg-right { float: right!important; }	} /* Font size */ .fs-1, .fs-normal { font-size: 13pt; }

.fs-2 { font-size: 14pt; }

.fs-3 { font-size: 16pt; }

.fs-4, .fs-big { font-size: 20pt; }

.fs-5, .fs-double { font-size: 200%; }

/* Panel */ .panel { --panel-color: var(--blue); border: 5px solid var(--panel-color); padding: .5rem; border-radius: .75rem; }

.panel-title { font-size: 13pt; text-align: center; background-color: var(--panel-color); padding: .25rem; border-radius: 1rem; font-weight: bold; }

/* Infoboxes */ .infobox { border: 4px solid #ff8100; padding: .25rem; border-radius: .75rem; display: grid; gap: .33rem; }

@media (min-width: 720px) { .infobox { float: right; margin: .25rem 0 .5rem .5rem; max-width: 420px; min-width: 300px; } }

@media (min-width: 1000px) { .infobox { max-width: 450px; } }

.infobox-head, .infobox-cell { border-radius: .25rem; }

.infobox-head { font-weight: bold; text-align: center; }

.infobox-cell:nth-child(4n+1) { background: rgba(0,0,0,.15); }

.infobox-head.infobox-split, .infobox-head.infobox-Split { grid-column: 1; }

.infobox-cell.infobox-split, .infobox-cell.infobox-Split { grid-column: span 3; }

.infobox-wide, .infobox-img, .infobox-Wide, .infobox-Img { grid-column: span 4; }

.infobox-img, .infobox-Img { text-align: center; color: #000!important; }

.infobox-head.infobox-img, .infobox-head.infobox-Img { background: none!important; }

.infobox-cell.infobox-img, .infobox-cell.infobox-Img { font-style: italic; }

/* Navboxes */ .navbox { border: 3px solid var(--red); }

.navbox { border-radius: 1rem; }

.navbox.mw-collapsed { border-radius: 100px!important; }

.navbox span.mw-collapsible-toggle { position: relative; top: .25rem; right: .75rem; font-weight: bold; }

.navbox table tr td ul { margin: 0!important; padding: .4rem!important; }

.navbox table tr td ul li { display: inline-block; }

.navbox table tr td ul li:not(:last-child)::after { content: "•"; padding: 0 .5rem; }

@media (max-width: 600px) { .navbox table { text-align: center; width: 100%; } }

/* Tables */ .table-responsive { margin-top: .25rem; }

.table-responsive th { padding: .5rem; }

.table-responsive td { width: 100%; padding: .5rem; }

.table-responsive tr:first-of-type th { border-radius: .5rem 0 0 0; }

.table-responsive tr:last-of-type th { border-radius: 0 0 0 .5rem; }

.table-responsive tr:last-of-type td { border-radius: 0 0 .5rem 0; }

.table-responsive tr:nth-child(even) td { background-color: rgba(0,0,0,.12); }

@media (max-width: 600px) { .table-responsive { text-align: center; width: 100%; }

.table-responsive th, .table-responsive td { display: block; }

.table-responsive tr:first-of-type th { border-radius: .5rem .5rem 0 0; }

.table-responsive tr:last-of-type th { border-radius: 0; }

.table-responsive tr:last-of-type td { border-radius: 0 0 .5rem .5rem; }

.table-responsive tr:nth-child(even) td { background-color: #fff; } }