@font-face {
  font-family: "Bravura";
  src: url("/fonts/Bravura.woff2") format("woff2"),
       url("/fonts/Bravura.otf") format("opentype");
  font-display: swap;
}

@font-face{
  font-family:"NotoMusicSubset";
  src:url("https://fonts.gstatic.com/s/notomusic/v27/LYjYdG7XMJg6A96E1HNt6L3CkA.woff2") format("woff2");
  unicode-range: U+1D100-1D1FF;
  font-display:swap;
}

/* SMuFL (PUA) – mordent, pralltriller, acciaccatura stb.  */
@font-face{
  font-family:"BravuraTextFix";
  src:
    local("Bravura Text"),
    url("/fonts/BravuraText.woff2") format("woff2"),
    url("/fonts/Bravura Text.otf") format("opentype");
  unicode-range: U+E000-F8FF;
  font-display:swap;

  /* >>> EZ SZELÍDÍTI A KURZOR MAGASSÁGÁT <<< */
  ascent-override: 90%;
  descent-override: 18%;
  line-gap-override: 0%;
}

button.symbols
{ 
	font-family: "Noto Music","Bravura","FreeSerif","Segoe UI Symbol",sans-serif; 
	line-height: 1.4 ;
	font-size:22px ;
	width: 40px ;
	height: 40px ;
	padding-top:5px ;
}

textarea.symbols
{
  font-family:
    "Inter","Segoe UI", Arial,
    "BravuraTextFix",     /* SMuFL glifek → már „leszabott” metrikákkal */
    "NotoMusicSubset",    /* Unicode Musical Symbols */
    "Segoe UI Symbol", sans-serif;

  font-size:16px;
  line-height:20px;       /* FIX px!  (próbáld 18–22 px között) */
  
}

td.symbols
{
  font-family:
    "Inter","Segoe UI", Arial,
    "BravuraTextFix",     /* SMuFL glifek → már „leszabott” metrikákkal */
    "NotoMusicSubset",    /* Unicode Musical Symbols */
    "Segoe UI Symbol", sans-serif;
	font-size: 16px;
  line-height: 20px;       /* hogy ne legyen „ugráló” sor */
  vertical-align: middle;  /* centrálja a jelet */
}

html, body 
{
    margin: 0;
    padding: 0;
	background-color: black ;
	width: 99% ;
	height: 100vh;
/*	overflow:hidden ;  */
}

table.song
{
	/* border-collapse: collapse; */
	border-spacing: 0;
}

td.acc
{
	padding: 0;
	margin: 0;
	white-space: pre ;
	color: yellow ;
	font-weight: bold ;
	font-style: italic ;
	font-size:16px ;
}

td.lyr
{
	padding: 0;
	margin: 0;
	white-space: pre ;
	color: white ;
	font-weight: bold ;
	font-size:16px ;
}

div.part
{
	color: beige ;
	font-weight: bold ;
	font-size:20px ;
}

div.song
{
	color: white ;
	font-weight: bold ;
	font-size:25px ;
}


	/* A teljes képernyős háttér */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

/* A felugró ablak */
.modal {
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	width: 600px;
	display: flex;
	flex-direction: column;
}

/* A textarea formázása */
.modal textarea {
	width: 100%;
	height: 250px;
	margin-bottom: 10px;
	font-size:18px ;
}

/* Gombok */
.modal-buttons {
	display: flex;
	justify-content: space-between;
}

.modal-buttons button {
	padding: 8px 12px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
}

.save-btn {
	background-color: #28a745;
	color: white;
}

.close-btn {
	background-color: #dc3545;
	color: white;
}

div.hidden{
	display:none ;
}

.song_container 
{
}

.song_head 
{
	display:block ;
	color: yellow ;
}

.song 
{
		
}

.top-div {
    width: 100%;
    min-height: 50px;
    max-height: 300px;
    padding: 5px;
    /* background-color: lightblue; */
    box-sizing: border-box;
    text-align: left;
}

.bottom-div
{
    width: 100%;
    /* background-color: lightgray; */
    overflow-y: auto;
}

.inner-div {
    /* background-color: lightgreen; */
    border: 2px solid beige;
    padding: 5px ;
    white-space: nowrap;
    width: max-content;
    height: max-content;
	margin-bottom:10px ;
	color: yellow ;
	font-size:18px ;
	font-weight: bold ;
	border-radius:5px ;
}
.column-div 
{
	display: inline-block;
	vertical-align:top ;
	width: max-content;
	padding: 10px ;
}
.part_head
{
	color: black ;
	font-size:18px ;
	font-weight: bold ;
	background-color: beige ;
	padding: 2px ;
	font-style: italic ;
}


/* Menü konténer */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            padding: 10px 20px;
			width: 96vw ;
        }

        /* Menü elemek (nagy képernyőn) */
        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin: 0 10px;
        }

        .nav-links a {
            text-decoration: none;
            color: white;
            padding: 8px 12px;
            transition: background 0.3s;
        }

        .nav-links a:hover {
            background: #555;
            border-radius: 5px;
        }

        /* Hamburger ikon (alapból elrejtve) */
        .menu-icon {
            display: none;
            font-size: 24px;
            color: white;
            cursor: pointer;
        }

        /* Reszponzív design (kis képernyőn hamburger menü) */
        @media screen and (max-width: 768px) {
            .nav-links {
                display: none;
                flex-direction: column;
                background-color: #333;
                position: absolute;
                top: 50px;
                left: 0;
                width: 100%;
                text-align: center;
                padding: 10px 0;
            }

            .nav-links li {
                margin: 10px 0;
            }

            .menu-icon {
                display: block;
            }

            .nav-links.active {
                display: flex;
            }
        }







/* Login konténer */
        .login-container {
            background: linear-gradient(to left, black, #333);
            padding: 25px;
			border: 2px solid beige ;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 350px;
            text-align: center;
            animation: fadeIn 0.8s ease-in-out;
			margin: auto ;
			margin-top: 20px ;
			
        }

        /* Cím */
        .login-container h2 {
            margin-bottom: 15px;
            color: white;
        }

        /* Input mezők */
        .input-group {
            width: 100%;
            margin: 10px 0;
            position: relative;
        }

        .input-group input {
            width: 80%;
            padding: 10px;
            padding-left: 40px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        .input-group i {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
        }

        /* LOGIN gomb */
        .login-btn {
            width: 100%;
            background: linear-gradient(to right, black, #333);
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            transition: 0.3s;
            margin-top: 10px;
        }

        .login-btn:hover {
            background: #333;
        }

        /* Reszponzív design */
        @media screen and (max-width: 400px) {
            .login-container {
                width: 90%;
            }
        }

        /* Belépő animáció */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

table.mysongs_list
{
	color: yellow ;
	font-size:16px ;
	font-weight: bold ;
	
	border-collapse: collapse;
	background-color: #1e1e1e;
	border-radius: 8px;
	overflow: auto;
	width: 100% ;
}

thead.mysongs_list
{
	background-color: #292929;
}

th.mysongs_list
{
	padding: 0px;
	text-align: center;
	font-weight: bold;
	border-bottom: 2px solid #3a3a3a;
	color: #ffffff;
}

tr.mysongs_list:nth-child(odd) 
{
	background-color: #252525; /* Sötétebb sor */
}

tr.mysongs_list:nth-child(even) 
{
	background-color: #2e2e2e; /* Világosabb sor */
}

        /* Sorok kiemelése hover esetén */
tr.mysongs_list:hover 
{
	background-color: #3a3a3a;
	transition: background 0.3s;
}

        /* Cellák */
td.mysongs_list
{
	padding: 10px;
	border-bottom: 1px solid #3a3a3a;
	color: #e0e0e0;
	text-align: left ;
	cursor: pointer ;
}

table.mysongs
{
	width:100% ;
	vertical-align:top ;
}

th.mysongs1
{
	height: 30vh ;
}

td.mysongs1
{
	border: 5px solid beige ;
	color: white ;
	vertical-align:top ;
	overflow-y: auto ;
	width: 40% ;
}
td.mysongs2
{
	border: 5px solid beige ;
	width: 60%;
	color: white ;
	vertical-align:top ;
}
td.mysongs3
{
	border: 5px solid beige ;
	color: white ;
	vertical-align:top ;
}



td.selected_song
{
	background : gray !important;
	color: yellow !important;
}

div.mysongs1
{
    height: 30vh; /* Max magasság */
    overflow-y: auto; /* Görgetés engedélyezése */
}

div.songtab_container
{
	width: 96vw ;
	height:96vh ;
	margin-left:13px ;
	margin-right:13px ;
}

img.login
{
	width:90%;
	border: 1px solid beige ;
	padding:5px ;
	border-radius: 5px ;
}

div.hidden
{
	display: hidden ;
}

div.chordArrow
{
	cursor: pointer ;
	display: inline-block ;
}

div.chordNr
{
	display: inline-block ;
}

div.CHORD 
{
	margin-left: 10px ;
}

datbel.chords
{
	display: inline-block ;
}

img.accord
{
	height: 120px ;
}

a
{
	cursor:pointer ;
}

div.LIST_CONTAINER_TOP
{
    width: 100%;
    /* background-color: lightgray; */
    overflow-y: auto;
	vertical-align:top ;
	overflow-y: auto ;
	height: 30vh ;
}

div.LIST_CONTAINER_BOTTOM
{
    width: 100%;
    /* background-color: lightgray; */
    overflow-y: auto;
	vertical-align:top ;
	overflow-y: auto ;
	min-height: 50vh ;
}

#container_head
{
	color:yellow ;
	font-size:30px ;
	text-align: center ;
	padding:20px ;
}

#container
{
	text-align: center ;
}

img.flag
{
	height:30px ;
	display: inline-block ;
	cursor:pointer ;
}