@font-face {
	font-family: ProductSansBold;
	src: url("../font/ProductSans-Bold.ttf");
}

@font-face {
	font-family: Inter;
	src: url("../font/Inter-Regular.ttf");
}


@font-face {
	font-family: Metropolis;
	src: url("../font/Metropolis-Regular.otf");
}

@font-face {
	font-family: Metropolis-Black;
	src: url("../font/Metropolis-Black.otf");
}

@font-face {
	font-family: Metropolis-Bold;
	src: url("../font/Metropolis-Bold.otf");
}

:root {
	--color-primary: #002f7d;
	--color-gold: #eebb05;
	--color-velvet: #781ea6;
	--color-blue-loto: #00a2d9;
	--color-red-loto: #ea3946;
	--color-green-joker: #68ba51;
	--color-velvet-loto: #b677b6;
	--color-green-loto: #00893e;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: #f0f0f0;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.brand-icon {
	background-color: white;
	border-radius: 12px;
}

h1 {
	font-size: 24px;
	color: var(--color-primary);
	font-weight: bold;
}

h2 {
	font-size: 22px;
	color: var(--color-primary);
	font-weight: bold;
}

h3 {
	font-size: 20px;
	color: var(--color-primary);
	font-weight: bold;
}

h4 {
	font-size: 18px;
	color: var(--color-primary);
	font-weight: bold;
}

.navbar {
    --bs-navbar-padding-x: -1px;
}

.nav-container {
	max-width: 1200px;
	color: white;
}

.nav-bg-gradient-primary {
	background-image: linear-gradient(to right, var(--color-velvet), var(--color-primary));
	/*border-top: 4px solid var(--color-red-loto);*/
	border-bottom: 2px solid var(--color-primary);
	box-shadow: var(--color-primary) 0px 1px 10px;
}

.navbar-brand {
	font-size: 26px;
	font-family: "ProductSansBold";
	font-weight: 900;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.4rem;
	font-weight: 900;
	color: white;
	letter-spacing: -0.02em;
}

.navbar-brand:hover  {
	color: white;
}

.navbar-brand img {
	border-radius: 12px;
	background: white;
}

.brand {
	text-shadow: 2px 2px 3px #000000;
}

/*.brand {
	font-weight: 700;
	background: linear-gradient(to right, var(--color-primary), var(--color-velvet));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}*/

.content {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding: 1rem 1rem;
	text-align: center;
}

.bg-lottery1 {
	background: linear-gradient(rgba(240, 240, 240, .9), rgba(240, 240, 240, .9)), url('../img/test.jpg');
	background-size: cover;

}

.card-welcome::before {
	content: "";
	background-image: url('/img/logo.png');
	background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 75%;
    opacity: 0.1;
}

.card {
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, .05) 0 3px 5px;
	border:0px;
	padding: 0.7rem;
	text-align: left;
	margin-bottom: 20px;
	height: stretch;
	height: -webkit-fill-available;
}

.card-title {
	color: var(--color-primary);
	font-weight: bold;
}

.bg-euromillions {
	background-image: linear-gradient(to right, #001367, #002ba0);
	color: white;
}

.bg-lotofr {
	background-image: linear-gradient(to right, #00a2d9, #00cfee);
	color: white;
}

.bg-eurodreams {
	background-image: linear-gradient(to right, #781ea6, #982ecf);
	color: white;
}

.homenav-jackpot {
	font-weight: bold;
	font-size: 40px;
	font-family: "Metropolis-Black", sans-serif;
}

.homenav-img {
	background-color:white; 
	border-radius: 20px; 
	padding: 10px;
}

.homenav-buttons {
 
}

.draw-result {
	padding-left: 0px !important;
}

.draw-result li {
	display: inline-block;
	margin-right: 5px;
	font-family: "Metropolis-Bold", sans-serif;
	font-weight: bold;
	font-size: 18px;
	padding-top: 2px;
}

.draw-result .number{
	width:10px;
	text-align: center;
}

.draw-ball {
	width: 40px;
	height: 40px;
	color: white;
	line-height: 40px;
	/*font-weight: bold;*/
	border-radius: 50px;
	text-align: center;
	margin-bottom: 5px;
}

.draw-ball .small {

}

.draw-ball.x-small {
	width: 20px;
	height: 20px;
	vertical-align: text-top;
}

.draw-euromillions-ball {
	background-color: var(--color-primary);

}

.draw-euromillions-star {
	background-image: url("../img/star.svg");
	background-size: cover;
}

.draw-eurodreams-ball {
	background-color: var(--color-velvet);
}

.draw-eurodreams-drop {
	background-image: url("../img/drop.svg");
	background-size: cover;
}

.draw-loto-ball {
	background-color: var(--color-blue-loto);
}

.draw-loto-luck {
	background-color: var(--color-red-loto);
}

.draw-loto-ball2nd {
	background-color: var(--color-velvet-loto);
}

.prize-breakdowns {
	width: 100%;
	font-weight: bold;
	border: 1px solid #dddddd;
	border-radius: 12px;
	border-spacing: 0;
	border-collapse: separate;
}

.prize-breakdowns thead {
	border-top-left-radius: 12px;
}

.prize-breakdowns th {
	/*background-color: var(--color-primary);*/
	color: white;
	height: 40px;
	padding: 15px;
}

.prize-breakdowns tbody tr:nth-child(even){
	background-color: #f2f2f2;
}

.prize-breakdowns th:first-child {
	border-top-left-radius: 12px;
}

.prize-breakdowns th:last-child {
	border-top-right-radius: 12px;
}

.prize-breakdowns tr:last-child>td:first-child {
	border-bottom-left-radius: 12px;
}

.prize-breakdowns tr:last-child>td:last-child {
	border-bottom-right-radius: 12px;
}

.prize-breakdowns td {
	padding: 0px 16px;
}

.prize-breakdowns ul {
	margin-top: revert;
}

@media (max-width: 920px) {
	.prize-breakdowns thead {
		display: none;
	}

	.prize-breakdowns tr:first-child td:first-child {
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}

	.prize-breakdowns tr:last-child td:last-child {
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}

	.prize-breakdowns th, .prize-breakdowns td {
		display: block;
		padding: 6px 16px;
	}

	.prize-breakdowns th:before, .prize-breakdowns td:before {
		content: attr(data-label) ": ";
	}

	.prize-breakdowns .draw-result {
		background-color: white;
        border-radius: 12px;
        width: fit-content;
        padding: 10px !important;
        margin: auto;
		color: black;
	}

	.history th:before, .history td:before {
		content: "";
	}

	.mobile-header:before{
		content: "" !important;
	}

	.mobile-header {
		background-image: linear-gradient(to right, #001367, #002ba0);
		color: white;
	}

	.prize-breakdowns tr:last-child>td:first-child {
		border-bottom-left-radius: 0;
	}

	.prize-breakdowns tbody tr:nth-child(even){
		background-color: white
	}
}

.btn-period, .btn-period:hover {
	background-color:#f2f2f2 !important;
	color: black !important;
	border-color: #ddd !important;
}

.mymillionnum {
	border-radius: 50px;
	color: var(--color-primary);
	border: var(--color-primary) solid 2px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.lotojoker {
	border-radius: 50px;
	color: black;
	border: var(--color-green-joker) solid 2px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.lotocode {
	border-radius: 50px;
	color: black;
	border: var(--color-blue-loto) solid 2px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.pill-blue {
	background-image: linear-gradient(to right, #06b6d4, #2563eb);
	padding: 8px;
	border-radius: 0.75rem;
	color: white;
}

.pill-red {
	background-image: linear-gradient(to right, #f97316, #dc2626);
	padding: 8px;
	border-radius: 0.75rem;
	color: white;
}

.pill-orange {
	background-image: linear-gradient(to right, #eab308, #ea580c);
	padding: 8px;
	border-radius: 0.75rem;
	color: white
}

.pill-green {
	background-image: linear-gradient(to right, #22c55e, #059669);
	padding: 8px;
	border-radius: 0.75rem;
	color: white
}

.pill-purple {
	background-image: linear-gradient(to right, #3b82f6, #9333ea);
	padding: 8px;
	border-radius: 0.75rem;
	color: white
}

.pill-pink {
	background-image: linear-gradient(to right, #a855f7, #db2777 );
	padding: 8px;
	border-radius: 0.75rem;
	color: white
}

.dropdown-menu {
  overflow: hidden;
  overflow-y: auto;
  max-height: calc(50vh - 150px);
}

footer {
	margin-top: auto;
	/* height: 50px; */
	background-color: white;
}

.footer-content {
	border-top: 2px solid #e4e4e4;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.footer-content a {
	text-decoration: none;
	color: var(--color-primary);
}

.footer-content a:hover {
	text-decoration: underline;
}

.footer-brand {
	background-image: linear-gradient(to left, var(--color-velvet), var(--color-primary));
	color: white;
}