body{
	background: white;
}

a{
	color: #087f12;
}
a:hover{
	color: #106948;
}

[v-cloak] {
  display: none;
}

button{
	border: 1px solid #aaa;
    border-radius: 3px;
    padding: 3px 20px;
}

@media (min-width: 992px){
	.container {
/* 	    max-width: 800px; */
	}
}

.illustration picture,
.illustration > img{
	display: block;
	width: 100%;
	height: 200px;
}

.illustration img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.illustration > img{
	height: 200px;
}

@media (min-width: 768px){
	.illustration picture,
	.illustration > img{
		height: 250px;
	}
}

@media (min-width: 992px){
	.illustration picture,
	.illustration > img{
		height: 300px;
	}
}

.navbar-light .navbar-toggler{
	border: none;
}

.search-form .only-icon .icon{
	height: 16px;
	width: 16px;
	display: inline-block;
	background-image:url("/img/search-icon.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
}

.illustration span.bottom-line{
	display: block;
    /* height: 50px; */
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    color: white;
    /* vertical-align: bottom; */
    top: -50px;
    font-size: 130%;
    font-weight: bold;
    line-height: 50px;
    position: relative;
}

.illustration span.label{
	float: right;
	font-size: 14px;	
	font-weight: normal;
	background-color: rgba(255,255,255,0.8);
	color: #000000;
	line-height: 15px;
	margin-top: 13px;
	margin-right: 10px;
	border-radius: 2px;
	padding: 4px 5px;
}

.content.below-illustration{
	margin-top: -20px;
}

.charts{
	text-align: center;
}

.date-tag{
	display: inline-block;
	font-weight: normal;
	color: #ffffff;
	border-radius: 6px;
    padding: 0px 5px;
    padding-bottom: 3px;
    line-height: 20px;
    margin-left: 5px;
}


.date-tag.yesterday{
	background-color: #ab8943;
}
.date-tag.today{
	background-color: #4382ab;
}
.date-tag.tomorrow{
	background-color: #80ab43;
}
.date-tag.datomorrow{
	background-color: #80ab43;
}

table.nameday-pop{
	margin-top: 15px;
}

table.nameday-pop td{
	padding: 0.35rem;
}

table.nameday-pop .main td{
	font-weight: bold;
}

table.nameday-pop .hidden-more td{
	font-size: 90%;
	color: #666666;
}

table.name-toplist{
	width: 100%;
	padding: 0px 10px;
	border: 1px solid #dddddd;
}

table.name-toplist thead{
	border-bottom: 2px solid #dddddd;
}

table.name-toplist td:nth-child(1){
	text-align: right;
	padding-right: 20px;
}

img.chart{
	max-width: 100%;
	height: auto;
}

h1{
	font-size: 22px;
}
h2{
	font-size: 19px;
}
h3{
	font-size: 17px;
}

.navbar{
	box-shadow: #00000073 0px 0px 10px;
}

footer{
	border-top: 1px solid #dddddd;
	margin-top: 80px;
	margin-bottom: 50px;
	text-align: center;
	font-size: 80%;
}

footer a{
	margin: 0px 6px;
}

.koszonto{
	margin-top: 40px;
    padding: 10px 10px 0px 10px;
    color: #333333;
    background-color: #f2f2f2;
    border-radius: 3px;
    border: 1px solid #dddddd;
}

.form-control-no-width{
	width: 150px;
}

.similar-names{
	
}

.similar-names .similar-name{
	border: 1px solid #dddddd;
	border-radius: 2px;
	background-color: #f5f5f5;
	padding: 6px 10px;
	display: block;
	margin-bottom: 10px;
}

.similar-names .similar-name:hover{
	border: 1px solid #666666;
	background-color: #f7f7f7;
	text-decoration:none;
}

.similar-names .similar-name .sex{
	display: inline-block;
	height: 24px;
	width: 24px;
	margin-right: 5px;
}
.similar-names .similar-name .label{
	display: inline-block;
}

.ratings, .email-notification{
	border: 1px solid #eeeeee;
	background-color: #fefefe;
	border-radius: 3px;
	padding: 10px;
}


.ratings .total{
	margin-top: 10px;
	font-size: 90%;
	color: #666666;
	text-align: right;
}


.rating{
	display: table-row;
	height: 30px;
}

.rating .label{
	display: table-cell;
	vertical-align: bottom;
}

.rating.non-voted .label{
	cursor: pointer;
}

.rating.non-voted .label:hover{
	text-decoration: underline;
}

.rating .left-label{
	padding-right: 10px;
	text-align: right;
}

.rating .right-label{
	padding-left : 10px;
}

.rating .bar-cell{
	vertial-align: middle;
	width: 100%;
	display: table-cell;
}

.rating .bar{
	margin-top: 10px;
	height: 25px;
	
	border: 1px solid #eeeeee;
	border-radius: 3px;
	
	background: rgb(245,245,245);
	background: -moz-linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f5",endColorstr="#ffffff",GradientType=1);
}

.rating .bar .status{
	height: 23px;
	
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;

background: rgb(221,221,221);
background: -moz-linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(238,238,238,1) 69%);
background: -webkit-linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(238,238,238,1) 69%);
background: linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(238,238,238,1) 69%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dddddd",endColorstr="#eeeeee",GradientType=1);
	
/* background: rgb(255,255,255); */
/* background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(237,250,255,1) 10%, rgba(237,250,255,1) 50%, rgba(237,250,255,1) 90%, rgba(255,255,255,0) 100%); */
/* background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(237,250,255,1) 10%, rgba(237,250,255,1) 50%, rgba(237,250,255,1) 90%, rgba(255,255,255,0) 100%); */
/* background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(237,250,255,1) 10%, rgba(237,250,255,1) 50%, rgba(237,250,255,1) 90%, rgba(255,255,255,0) 100%); */
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); */
	
}

.rating.voted .bar .status{
	background-image: url('/img/check-icon.png');
	background-position: center;
	background-size: 50%;
	background-repeat: no-repeat;
	background-color: #ffffff;
}
.rating.voting .bar .status{
	background-image: url('/img/vote-loading.gif');
	background-position: center;
	background-size: 50%;
	background-repeat: no-repeat;
	background-color: #ffffff;
}

.ajandek-otletek h2{
	border-top: 1px solid #dddddd;
}

.ajandek-otletek .items{
	display: flex;
	overflow: hidden;
}

.ajandek-otlet{
	flex: 0 0 100%;
	flex-shrink: 0;
	min-width: 0;
}

@media (min-width: 1024px){
	.ajandek-otlet{
		flex: 0 0 50%;
	}
}

.ajandek-otlet img{
	width: 128px;
	opacity: 0.8;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

@media (min-width: 768px){
	.ajandek-otlet img{
		width: 200px;
	}
}

.ajandek-otlet b{
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
}

.ajandek-otlet span{
	display: block;
	margin-right:10px;
}






/* HOME */
.home-3day-summary{
}
.home-3day-summary .block{
	border: 1px solid #dddddd;
	background-color: #fdfdfd;
	margin-bottom: 10px;	
}

.home-3day-summary .block .title{
	font-size: 130%;
	background-color: #f5f5f5;
	text-align: center;
	padding: 5px 5px 10px 5px;
}
.home-3day-summary .block .title small{
	display: block;
}

.home-3day-summary .block .body{
	margin-top: 10px;
}

.home-3day-summary .block .body li{
	font-weight: bold;
}

.home-3day-summary .block .footer{
	font-size: 90%;
	padding: 5px;
	border-top: 2px solid #dddddd;
}

.home-3day-summary .block .footer .footer-title{
	color: #666666;
}


/* MODAL */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 400px;
  margin: 0px auto;
  /*padding: 20px 30px;*/
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin: 0px;
  color: #087f12;
}

.modal-body {
  /*margin: 20px 0;*/
}

.modal-footer span{
	cursor: pointer;
	margin-left: 10px;
}

.modal-default-button {
  float: right;
  background-color: green;
  color: white;
  margin-left: 20px !important;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


.nameday-suggestion-modal .form{
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

.nameday-suggestion-modal .form select{
	padding: 3px;
	font-weight: bold;
	font-size: 110%;
}

.nameday-suggestion-modal .form label{
	margin: 0px;
	padding: 0px;
	margin-top: 16px;
	color: #666666;
	display: block;
	text-align: left;
	font-size: 90%;
}

.nameday-suggestion-modal .form textarea{
	width: 100%;
	height: 80px;
	border: 1px solid #dddddd;
}

.hiressegek .hiresseg img{
	height: 150px;
	width: 100%;
	object-fit: cover;
	margin-bottom: 5px;
}

.hiressegek .hiresseg span{
	color: #555555;
}

.hiressegek .hiresseg .title{
	font-weight: bold;
}
.hiressegek .hiresseg .desc{
	margin-top: 5px;	
}
.hiressegek .hiresseg a:hover{
	text-decoration: none;
}
/* Calendar grid */
.calendar-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.calendar-grid th {
	text-align: center;
	padding: 8px 4px;
	background: #f5f5f5;
	font-weight: 600;
	border: 1px solid #ddd;
}

.calendar-grid td {
	border: 1px solid #ddd;
	vertical-align: top;
	height: 80px;
	padding: 4px;
}

.calendar-grid td a {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.calendar-grid td a:hover {
	background: #f0f7ff;
}

.calendar-grid .day-num {
	display: block;
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 2px;
}

.calendar-grid .day-names {
	font-size: 11px;
	color: #666;
	line-height: 1.3;
}

.calendar-grid td.other-month {
	background: #fafafa;
}

.calendar-grid td.other-month .day-num,
.calendar-grid td.other-month .day-names {
	color: #666;
}

.calendar-grid td.today {
	background: #fff8e1;
}

.calendar-grid td.today .day-num {
	color: #995000;
}

@media (max-width: 767px) {
	.calendar-grid td {
		height: 60px;
		padding: 2px;
	}
	.calendar-grid .day-num {
		font-size: 14px;
	}
	.calendar-grid .day-names {
		font-size: 9px;
	}
}

/* ===== Sections added during the 2026-08 SEO work =====
   These markup blocks shipped without any styling; the day list on /naptar in
   particular rendered as an unseparated run of numbers. Palette follows the rest of
   the sheet: link green #087f12, accent #80ab43, hairlines #ddd. */

/* Calendar hub: every day of the month as a compact chip */
.calendar-day-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
	gap: 6px;
}
.calendar-day-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 5px 6px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
}
.calendar-day-links a:hover {
	background: #087f12;
	border-color: #087f12;
	color: #fff;
}

/* Calendar hub: month buttons. Previously a 4-column Bootstrap row, which left ~230px
   of dead space after each short month name and read as unfinished. */
.month-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
}
.month-index a {
	display: block;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fff;
	color: #333;
	font-weight: 600;
	text-decoration: none;
}
.month-index a:hover {
	background: #087f12;
	border-color: #087f12;
	color: #fff;
}

/* Névtár A-Z index */
.letter-index {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.letter-index a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fff;
	color: #333;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
}
.letter-index a small {
	font-weight: 400;
	font-size: 11px;
	color: #666;
}
.letter-index a:hover,
.letter-index a.current {
	background: #087f12;
	border-color: #087f12;
	color: #fff;
}
.letter-index a:hover small,
.letter-index a.current small {
	color: #f0f7e6;
}

.name-list a {
	display: block;
	padding: 3px 0;
	text-decoration: none;
}
.name-list a:hover {
	text-decoration: underline;
}

.breadcrumb-nav {
	font-size: 13px;
	color: #666;
	margin-bottom: 4px;
}

/* NyTK facts: label/value pairs from the official name register */
.nytk-block {
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fcfcfc;
}
.nytk-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 14px;
	margin: 0;
}
.nytk-facts dt {
	font-weight: 600;
	color: #666;
	font-size: 13px;
}
.nytk-facts dd {
	margin: 0;
}
.nytk-namedays a,
.nytk-related a {
	white-space: nowrap;
}
.nytk-source {
	margin-bottom: 0;
	color: #666;
}

/* Visitor-suggested dates for names with no official name day */
.community-suggestions {
	padding: 12px 14px;
	border: 1px solid #e6dfc4;
	border-radius: 4px;
	background: #fff8e1;
}
.suggested-dates {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}
.suggested-dates li {
	padding: 3px 0;
}
.suggested-dates small {
	color: #666;
}

/* Aggregated visitor opinion, rendered server-side */
.rating-summary {
	padding: 10px 12px;
	border-left: 3px solid #80ab43;
	background: #f7faf2;
}
.rating-summary p {
	margin-bottom: 0;
}
.rating-summary small {
	color: #666;
	display: block;
	margin-top: 2px;
}

/* Other names celebrating on the same day */
.same-day-names {
	line-height: 1.9;
}
.same-day-names a {
	white-space: nowrap;
}

/* Tudástár index */
.tudastar-index {
	list-style: none;
	padding: 0;
}
.tudastar-index li {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}
.tudastar-index li:last-child {
	border-bottom: none;
}
.tudastar-index p {
	margin: 0;
	color: #666;
	font-size: 14px;
}

@media (max-width: 576px) {
	.nytk-facts {
		grid-template-columns: 1fr;
		gap: 0 0;
	}
	.nytk-facts dd {
		margin-bottom: 8px;
	}
	/* 30x24 chips missed the 44px minimum tap target and were easy to mis-tap. */
	.calendar-day-links {
		grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	}
	.calendar-day-links a {
		min-height: 40px;
		font-size: 14px;
	}
}

.btn-success, .btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: #087f12;
    border-color: #087f12;
}
.btn-outline-success { color: #087f12; border-color: #087f12; }
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-success:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #087f12;
    border-color: #087f12;
}
.navbar-light .navbar-nav .nav-link { color: #666; }

/* Calendar day page: intro count and neighbouring-day navigation */
.calendar-intro {
	margin-bottom: 8px;
	color: #444;
}
.calendar-neighbours {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #ddd;
	font-size: 15px;
}
.calendar-neighbours a { color: #087f12; }

/* Weekly name days page */
.week-day {
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}
.week-day .badge-success { background-color: #087f12; }

/* Névnapi köszöntők page */
.greeting-verse {
	margin: 12px 0;
	padding: 12px 16px;
	background: #f6f8f6;
	border-left: 3px solid #087f12;
}
.greeting-verse p { margin: 0; line-height: 1.7; }

/* Gender name lists (fiú nevek / lány nevek) */
.popular-names { padding-left: 20px; }
.popular-names li { margin-bottom: 2px; }
.letter-group { margin-bottom: 16px; }
.letter-group h3 { border-bottom: 1px solid #eee; padding-bottom: 4px; }
.name-inline { line-height: 1.9; margin-bottom: 6px; }

/* Toplist redesign: medals for the top three, arrows for the yearly change */
.toplist-card { margin-bottom: 24px; }
table.name-toplist { border-collapse: collapse; }
table.name-toplist th {
	text-align: left;
	padding: 8px 10px;
	font-size: 13px;
	color: #555;
	background: #f6f8f6;
	border-bottom: 2px solid #ddd;
}
table.name-toplist td { padding: 7px 10px; border-bottom: 1px solid #eee; }
table.name-toplist tbody tr:nth-child(even) { background: #fafafa; }
table.name-toplist td.value,
table.name-toplist td.change { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.medal {
	display: inline-block;
	width: 26px;
	height: 26px;
	line-height: 26px;
	border-radius: 50%;
	text-align: center;
	font-weight: 700;
	color: #fff;
}
.medal-1 { background: #c9971c; }
.medal-2 { background: #9aa0a6; }
.medal-3 { background: #b06a3b; }
.top-row.top-1 { background: #fff8e6; }
.top-row.top-2 { background: #f4f5f6; }
.top-row.top-3 { background: #fbf1ea; }
.change-up { color: #087f12; font-weight: 600; }
.change-down { color: #b00020; font-weight: 600; }
.change-same { color: #666; }
.change-new { color: #555; font-size: 13px; }

/* Munkaszüneti napok page */
.holiday-table { max-width: 640px; }
.holiday-table td:nth-child(1) { text-align: left; padding-right: 10px; white-space: nowrap; }
.holiday-table td:nth-child(2) { color: #555; }
.public-holiday-note { background: #fff8e6; border-left: 3px solid #c9971c; padding: 8px 12px; }