#left {
	border: 0px;
}

#main_top h1 {
	background-color: #e1edf9;
	font-weight: bold;
	font-size: 20px;
	margin: 0px;
	padding: 10px 0px 10px 20px;
	border-bottom: 1px #CCCCCC solid;
	color: #006699;
	font-family: Georgia;
}

#utonevkereso h3 {
	font-size: 1em;
}

#utonevkereso .head .inside {
	background-color: #BBD0D7;
	padding: 1rem 1rem 1rem 1.75rem;
	border: 1px #CCCCCC solid;
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	font-weight: bold;
	min-height: 80px;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.fortune-container {
	--loader-time: 1.5s;
	/* --list-delay: calc(var(--loader-time) + 1.25s); */
	--list-delay: calc(var(--loader-time) + .55s);
	position: relative;
}
.fortune-container.is-session-list-content {
	--loader-time: 0s;
	--list-delay: 0s;
}

.fortune-opener {
	font-weight: normal;
	color: var(--color-font);
	background-color: var(--color-primary);
	border-radius: 0.5rem;
	display: inline-flex;
	flex-direction: row;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	text-align: center;
	line-height: 1.2;
}

.fortune-opener .button {
	font-size: 0.9rem;
	font-weight: 600;
	position: relative;
	overflow: visible;
	z-index: 1;
	padding: 0.4rem!important;
	padding-left: 1.5em!important;
}

.fortune-opener .button::before {
    position: absolute;
    display: block;
    z-index: 0;
    content: "";
    width: 120%;
    height: 6rem;
    margin: -1.8em -1.3rem;
    opacity: 0.5;
    transform: scale(0.75);
    transform-origin: 13%;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    background-image: url(images/utonevkereso-sorsolas-star.svg),
		url(images/utonevkereso-sorsolas-star.svg),
		url(images/utonevkereso-sorsolas-star.svg);
    background-position: 0.75em 0.9em,
  -0.15em 2em,
  1.05em 2.55em;
    background-size: 2.3em 2.3em, 2.3em 2.3em, 2.3em 2.3em;
    background-repeat: no-repeat;
}
@keyframes button-star-pulse {
	0% { transform: scale(0.75); opacity: 0.5; }
	50% { transform: scale(1); opacity: 1; }
	100% { transform: scale(0.75); opacity: 0.5; }
}
/* @keyframes button-star-enter {
	0% { opacity: 0; transform: scale(0.75); }
	100% { opacity: 0.5; transform: scale(0.85); }
} */
.fortune-opener .button:hover::before {
    opacity: 0.5;
    animation: 
        /* button-star-enter 0.2s ease-out forwards, */
        button-star-pulse 2s ease-in-out 0.2s infinite;
}

#fortune-bg-all {
	display: block;
	width: 100%;
	height: auto;
}
#fortune-bg-center {
	transform-origin: center;
	transition: transform 1s ease-in-out;
	animation: fortune-bg-center 1s ease-in-out var(--loader-time) forwards;
}

#fortune-bg-leftbottom,
#fortune-bg-righttop,
#fortune-bg-lefttop,
#fortune-bg-rightbottom {
	opacity: 0;
	animation: fortune-fade-in 0.5s ease-in-out forwards;
}
/* #fortune-bg-leftbottom { animation-delay: 0.25s; }
#fortune-bg-lefttop { animation-delay: 0.5s; }
#fortune-bg-righttop { animation-delay: 0.75s; }
#fortune-bg-rightbottom { animation-delay: 1s; } */
#fortune-bg-leftbottom { animation-delay: 0.25s; }
#fortune-bg-lefttop { animation-delay: 0.25s; }
#fortune-bg-righttop { animation-delay: 0.25s; }
#fortune-bg-rightbottom { animation-delay: 0.25s; }

@keyframes loader-fade-out {
	to { opacity: 0.2; }
}

@keyframes loader-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

#fortune-loader {
	position: absolute;
	display: block;
	width: 40%;
	height: auto;
	top: 49%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(5deg);
	overflow: visible;
	animation: 
		loader-fade-in 1s ease-out 0s forwards,
		loader-fade-out 1s ease-in-out var(--list-delay) forwards;
}

@keyframes star-orbit {
	0% {transform: rotate(0deg) scale(1);}
	25% {transform: rotate(90deg) scale(0.85);}
	50% {transform: rotate(180deg) scale(0.85);}
	75% {transform: rotate(270deg) scale(0.85);}
	100% {transform: rotate(360deg) scale(1);}
}

@keyframes fortune-fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

#fortune-loader-star-1 {
	opacity: 0;
	transform-origin: 407px 1379px;
	animation: 
		/* var(--loader-time) linear star-orbit infinite, */
		0.5s linear fortune-fade-in forwards;
}

#fortune-loader-star-2 {
	opacity: 0;
	transform-origin: 471px 1536px;
	animation: 
		/* var(--loader-time) linear star-orbit infinite, */
		0.5s linear fortune-fade-in forwards;
}

#fortune-loader-star-3 {
	opacity: 0;
	transform-origin: 121px 1486px;
	animation: 
		/* var(--loader-time) linear star-orbit infinite, */
		0.5s linear fortune-fade-in forwards;
}

@keyframes star-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(270deg); }
}

.star-rotator {
	transform-origin: center;
	transform-box: fill-box;
	animation: star-spin var(--star-spin-speed) ease-out;
}

@keyframes star-pulse {
	0% { transform: scale(1); opacity: 1; }
	/* 25% { transform: scale(1); opacity: 1; } */
	50% { transform: scale(0.65); opacity: 0.5; }
	/* 75% { transform: scale(1); opacity: 1; } */
	100% { transform: scale(1); opacity: 1; }
}

#fortune-loader-star-1 path {
	opacity: 1;
	transform: scale(1);
	transform-origin: center;
	transform-box: fill-box;
	animation: star-pulse var(--star-pulse-speed) ease-in-out var(--star-pulse-delay) infinite;
}
#fortune-loader-star-2 path {
	opacity: 1;
	transform: scale(1);
	transform-origin: center;
	transform-box: fill-box;
	animation: star-pulse var(--star-pulse-speed) ease-in-out var(--star-pulse-delay) infinite;
}
#fortune-loader-star-3 path {
	opacity: 1;
	transform: scale(1);
	transform-origin: center;
	transform-box: fill-box;
	animation: star-pulse var(--star-pulse-speed) ease-in-out var(--star-pulse-delay) infinite;
}

.fortune-results-list {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    line-height: 0.5em;
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* flex-direction: column; */
    /* align-content: center; */
    /* align-items: center; */
	gap: 1em;
	/* opacity: 0; */
	/* animation: fortune-results-list 1s ease-in-out var(--list-delay) forwards; */
}

@keyframes result-appear {
	0% { opacity: 0; transform: scale(0); }
	75% { transform: scale(1.15); }
	100% { opacity: 1; transform: scale(1); }
}

.fortune-results-list a {
	padding: 0.2rem;
	transform: scale(0);
	opacity: 0;
	animation: result-appear 0.7s ease-in-out forwards;
}

.fortune-results-list a.ferfinev-1:not(.noinev-1) {
	color: var(--color-first-dark);
}
.fortune-results-list a.noinev-1:not(.ferfinev-1) {
	color: var(--color-second-dark);
}

@keyframes fortune-results-list {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.fortune-results-list a:nth-child(1) {
	animation-delay: var(--list-delay);
}
.fortune-results-list a:nth-child(2) {
	animation-delay: calc(var(--list-delay) + 0.2s);
}
.fortune-results-list a:nth-child(3) {
	animation-delay: calc(var(--list-delay) + 0.4s);
}

@media (max-width: 768px) {
	#utonevkereso .head .inside {
		flex-direction: column;
		gap: 0.5rem;
	}
	.fortune-results-list {
		gap: 0.6em;
	}
	#utonevkereso .head .search input, #utonevkereso .head .search select, #utonevkereso .fortune-opener .button {
		border-radius: 0.5em;
		border: 0;
	}
}


h2 {
	color: #44798E;
}

#utonevkereso .head {
	padding: 0px;
	margin: 0px;
}

#utonevkereso .head .gender-selector {
	background-color: #FFFFFF;
	padding: 0.5rem;
	margin-right: 5px;
	width: 100%;
	max-width: 120px;
	box-sizing: border-box;
	border-radius: 0.5rem;
	min-width: 80px;
}

#utonevkereso .head .inside label {
	color: #44798f;
	font-size: 0.9em;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	display: block;
	padding: 0.1em 0.5em;
	border-radius: 0.5rem;
}

#utonevkereso .head .inside label:hover {
	background-color: var(--color-first-light);
	color: #006699;
}

#utonevkereso .head .inside label input {
	position: relative;
	margin-right: 0.25em;
	top: 1px;
}

#utonevkereso .head table {
	width: 100%;
	max-width: 48%;
	border-collapse: separate;
	border-spacing: 6px;
}

#utonevkereso .head table td.search {
	/* padding: 0 10px 10px 0; */
}

#utonevkereso .head table tr.th td:first-child {
	width: 92px;
}

#utonevkereso .head table tr.th td {
	vertical-align: bottom;
}

#utonevkereso .head table td.submit {
	width: 100px;
}

#utonevkereso .head .search input, #utonevkereso .head .search select, #utonevkereso .fortune-opener .button {
	width: 100%;
	min-width: 80px;
	padding: 0.5rem;
	box-sizing: border-box;
}

#utonevkereso .search .button,
#utonevkereso .search button,
#utonevkereso .search input[type=submit] {
	font-size: unset;
}

#utonevkereso .head .letters {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	/* justify-content: space-between; */
	flex-wrap: wrap;
	margin: 1rem 0rem;
}

@media screen and (max-width: 600px) {
	#utonevkereso .head .letters {
		margin-left: 4%;
		margin-right: 4%;
	}
}

#utonevkereso .head .letters a {
	padding: 0.5em 0.6em;
	margin-right: 1px;
	background-color: #E3B6C0;
	font-weight: bold;
	color: #FFFFFF;
	border: 1px #FFFFFF solid;
}

#utonevkereso .head .letters a.akt {
	background-color: #8EB2BE;
	color: #FFFFFF;
}

#utonevkereso .head .letters a:hover {
	background-color: #FFFFFF;
	border: 1px #44ABBC solid;
	color: #44ABBC;
}

#utonevkereso .content {
	padding: 10px 12px 10px 12px;
	margin: 0px 20px 0px 12px;
	line-height: 18px;
}

#utonevkereso h1 {
	font-size: 1.85em;
	margin: 1rem 0 0.5rem 0;
}

#utonevkereso h1 .jelentese {
	font-size: 1rem;
	font-weight: bold;
	margin-top: 0.9rem;
	color: var(--color-font);
	display: block;
}

#utonevkereso h1~h3 {
	margin-top: 1.2em;
}

#utonevkereso .list_title {
	padding: 3px 12px 10px 12px;
	margin: 5px 20px 0px 12px;
	clear: both;
	font-size: 12px;
	color: #777777;
}

#utonevkereso .list_title,
#utonevkereso .list_title b {
	text-align: center;
	color: #777777;
	background-color: #F5F5F5;
}

#utonevkereso .list {
	padding: 12px 12px 12px 12px;
	background-color: #F5F5F5;
	line-height: 17px;
	overflow: auto;
	padding-left: 1em;
	padding-right: 0.5em;
	margin-bottom: 1em;
}

#utonevkereso .list a {
	font-size: 16px;
	float: left;
	width: 20%;
	padding: 3px 0;
}

#utonevkereso .pager a.item {
	background-color: #e3f1fa;
	/* font-weight: bold; */
	color: #1080d6;
	border: 1px #FFFFFF solid;
}

#utonevkereso .pager a.akt {
	font-weight: bold;
	color: #1080d6;
	background-color: #FFFFFF;
	border: 1px #a3d1e8 solid;
}

@media (max-width: 1000px) {

	#utonevkereso .head .gender-selector,
	#utonevkereso .head table {
		max-width: unset;
	}

	#utonevkereso .head .gender-selector,
	#utonevkereso .head table {
		display: block;
		width: auto;
	}

	#utonevkereso .head .gender-selector label {
		display: inline-block;
	}
}

@media (max-width: 500px) {
	#utonevkereso .list a {
		width: 25%;
	}
}

@media (max-width: 370px) {
	#utonevkereso .list a {
		width: 33%;
	}
}