html {margin: 0px; height: 100%;}
body {margin: 0px; padding: 0px; font-family: "Red Hat Display";}
header {margin: 0px; padding: 0px;}
#menu_glowne {margin: 0px; padding: 0px; list-style-type: none; list-style-position: inside;
    text-align: center;}
#menu_glowne li {display: inline-block; width: 150px; padding: 5px; text-align: center;}
#menu_glowne li a {font-size: 20px; color: #1D3469; text-decoration: none;}
#menu_glowne li.inna::after {content: ""; display: block; width: 100%; height: 3px; 
    background-color: white; transition: background 0.5s;}
#menu_glowne li.inna:hover::after {background-color: #64BBE8;}
#menu_glowne li.aktualna::after {content: ""; display: block; width: 100%; height: 5px; 
    background: linear-gradient(90deg, #1D3469 0%, #64BBE8 100%);}
h1 {font-size: 39px; color: black; text-align: center; font-weight: 700;
    margin-top: 20px; margin-bottom: 30px;}
#podtytul {font-size: 20px; color: black; text-align: center; 
    font-weight: 600; margin-top: 20px;}
footer {margin: 50px 0px; padding: 0px; text-align: center;}
.logotyp {height: 100px; display: inline-block;}
header.podkreslenie::after {content: ""; display: block; width: 100%; height: 15px; 
    background: linear-gradient(270deg, #1D3469 0%, #64BBE8 81.5%, #64BBE8 100%);}
#tresc_strony_div {margin: 20px auto; width: 900px; max-width: 100%;
    font-size: 19px; color: #1D3469; font-weight: 600;}
#tresc_strony_div h2 {text-align: center; font-size: 29px; color: #1D3469; font-weight: 600;}
#tresc_strony_div p, li {margin: 10px 0px;}
#tresc_strony_div.gradient {width: 100%; color: white; text-align: center;
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);}
#pole_wyszukiwania {width: 1050px; max-width: 90%; margin: 0px auto; display: grid;
    grid-template-columns: 1fr 4px 1fr 4px 1fr;}
.opcja_wyszukiwarki_ban a {width: 100%; text-decoration: none; color: black;}
.opcja_wyszukiwarki {height: 46px; display: flex; align-items: center; justify-content: center;
    width: 100%; font-size: 24px; text-decoration: none; font-weight: 700; 
    border-radius: 23px 23px 0px 0px;}
#szukaj_osoby {grid-row: 1; grid-column: 1;}
#pole_wyszukiwania.osoba #szukaj_osoby  .opcja_wyszukiwarki 
    {background: rgba(29, 52, 105, 1); color: white;}
#pole_wyszukiwania.utwor #szukaj_osoby  .opcja_wyszukiwarki, #pole_wyszukiwania.publikacja #szukaj_osoby  .opcja_wyszukiwarki 
    {background: linear-gradient(180deg, #D1EFFF 50%, #86B5CE 100%);}
#szukaj_utworu  {grid-row: 1; grid-column: 3;}
#pole_wyszukiwania.osoba #szukaj_utworu .opcja_wyszukiwarki, #pole_wyszukiwania.publikacja #szukaj_utworu .opcja_wyszukiwarki 
    {background: linear-gradient(180deg, #D1EFFF 50%, #86B5CE 100%);}
#pole_wyszukiwania.utwor #szukaj_utworu  .opcja_wyszukiwarki 
    {background: rgba(29, 52, 105, 1); color: white;}
#szukaj_publikacji  {grid-row: 1; grid-column: 5;}
#pole_wyszukiwania.osoba #szukaj_publikacji .opcja_wyszukiwarki, #pole_wyszukiwania.utwor #szukaj_publikacji .opcja_wyszukiwarki 
    {background: linear-gradient(180deg, #D1EFFF 50%, #86B5CE 100%);}
#pole_wyszukiwania.publikacja #szukaj_publikacji  .opcja_wyszukiwarki 
    {background: rgba(29, 52, 105, 1); color: white;}
#wyszukiwarka {grid-row: 2; grid-column-start: 1; grid-column-end: 6; text-align: center;
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);  border-radius: 0px 0px 23px 23px;}
#wyszukiwanie_proste {font-size: 21px; height: 60px; width: 750px; max-width: 90%; 
    border-radius: 30px; border: 0px; padding-left: 30px; margin-top: 60px; 
    font-family: "Red Hat Display"; color: #1D3469; font-weight: 600;}
#wyszukaj {font-size: 24px; height: 40px; width: 180px; text-align: center;
    border-radius: 30px; border: 0px; margin-top: 40px; background: rgba(209, 239, 255, 0.4);
    color: white; font-family: inherit; font-weight: 600; cursor: pointer; outline: none;}
#wyszukaj:hover {background: rgba(29, 52, 105, 0.6);}
.opc_zaaw {text-align: left; margin-top: 40px; margin-left: 75px; margin-bottom: 50px;}
.opc_zaaw a {text-decoration: none; font-size: 19px; color: white; font-weight: 600;}
#lista_warunkow {list-style-type: none; list-style-position: inside; margin-top: 50px; 
    padding: 0px;}
#lista_warunkow li {margin: 10px 0px 10px 0px; padding: 0px;}
.select_ban {display: inline-grid; grid-template-areas: "select"; width: 250px; margin: 5px;
    min-height: 40px; border-radius: 20px; padding: 0px; background-color: white;}
.select_ban:has(> #p1) {margin-left: 105px;}
.opcje {font-size: 21px; min-height: 40px; width: 100%;
    padding-left: 20px; color: #1D3469; font-weight: 600; font-family: inherit;
    appearance: none; outline: none; grid-area: select; position: relative; 
    background: transparent; border: none; text-wrap: wrap;}
.select_ban_i {display: inline-grid; grid-template-areas: "select"; width: 90px; margin: 5px;
        min-height: 40px; border-radius: 20px; padding: 0px; background-color: white;}
.opcje_i {font-size: 21px; min-height: 40px; width: 100%;
        padding-left: 20px; color: #1D3469; font-weight: 600; font-family: inherit;
        appearance: none; outline: none; grid-area: select; position: relative; 
        background: transparent; border: none; text-wrap: wrap;}
.select_ban::before {
    content: ""; width: 25px; height: 15px; background-color: #1D3469;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%); grid-area: select; justify-self: end;
    align-self: center; margin-right: 10px; border-radius: 3px;}
.select_ban_i::before {
        content: ""; width: 25px; height: 15px; background-color: #1D3469;
        clip-path: polygon(100% 0%, 0 0%, 50% 100%); grid-area: select; justify-self: end;
        align-self: center; margin-right: 10px; border-radius: 3px;}
/*.select_ban:focus-within::before {transform: rotate(180deg);}*/
#lista_warunkow input[type=text] {border-radius: 20px; margin: 0px 105px 0px 0px; width: 240px; 
    background-color: white; padding: 0px; padding-left: 15px; display: inline;}
#dodaj_linie {font-size: 21px; color: #1D3469; font-weight: 600; font-family: inherit;
    width: 250px; height: 40px; border-radius: 20px; background-color: white; border: 0px;}
.sortowanie_ban {
    font-size: 21px; color: white; font-weight: 600; margin-top: 15px;
}
#wyniki_h {
    margin-left: 75px; text-align: left;
    font-size: 23px; font-weight: 600; color: white;
}
#wyniki_wyszukiwania {
    width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;
    list-style-type: none; list-style-position: inside; margin: 0px; padding: 0px;
    justify-content: center; margin-bottom: 20px; font-size: 20px; font-weight: 600;
}
#drukuj_liste {
    display: block;
    color: #1D3469;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
}
#wyniki_wyszukiwania li {
    display: block; margin: 10px; padding: 5px; background-color: white; 
    font-size: 20px; border-radius: 18px;
}
.wynik_wyszukiwania_osoba {
    width: 370px;
}
.wynik_wyszukiwania_utwor {
    width: 780px;
}
#wyniki_wyszukiwania li a {
    text-decoration: none; color: #1D3469; display: block; width: 100%; height: 100%;
    font-weight: 600;
}
#wyswietlanie_info {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
}
#wyswietlanie_naglowek {
    width: 550px; display: flex; flex-direction: column; justify-content: space-evenly; 
    align-items: center; padding-left: 30px; height: 260px; margin: 20px;
}
#wyswietlanie_naglowek h2 {
    color: #1D3469; margin: 0px 10px; font-weight: 600; font-size: 29px;
}
#wyswietlanie_naglowek #publikacja_kategorie {
    color: #1D3469; font-size: 20px;
}
#utwor_autorzy {
    margin: 0px 10px; color: #64BBE8; font-size: 29px; text-align: center;
}
#utwor_autorzy a{
    color: #64BBE8
}
#utwor_tytuly {
    margin: 0px 10px; color:#1D3469; font-size: 19px;
}
#utwor_tytuly li{
    margin: 0px;
}
#utwor_podtytul {
    color: #1D3469; font-size: 20px;
}
#osoba_kategorie {
    margin: 0px 10px; color: #64BBE8; font-size: 29px; color: #64BBE8; text-align: center;
}
#wyswietlanie_info .kafelek_ban {
    height: 300px; overflow: visible;
}
#wyswietlanie_info .kafelek {
    width: 250px; min-height: 250px; max-height: fit-content; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; 
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);
    font-size: 19px; color: white; text-align: center; border-radius: 30px; 
    margin: 5px; padding: 10px; position: relative; border: 15px solid white;
    transition: height 1s;
}
#wyswietlanie_info .kafelek_overflow {
    justify-content: start; overflow: hidden;
}
#wyswietlanie_info .kafelek_overflow_max {
    z-index: 1;
}
#wyswietlanie_info .kafelek_overflow::after {
    content: url(grafika/arrow_white.png); width: 100%;
    display: flex; align-items: end; justify-content: center; border-radius: 0px 0px 15px 15px;
}
#wyswietlanie_info .kafelek_overflow_min::after {
    position: absolute; top: 160px; height: 100px; padding-bottom: 10px;
    background: linear-gradient(transparent, #64BBE8);
}
.kafelek_overflow_max::after {
    position: static; transform: rotate(180deg); background: transparent; margin: 10px;
}
#wyswietlanie_info .kafelek_obsada {
    width: 565px;
}
.kafelek_obsada_in {
    width: 100%; height: 100%; margin: 0px 15px; display: flex; flex-direction: column; 
    justify-content: start; align-items: center; border-radius: 15px;
    background-color: transparent; padding-top: 20px; transition: background-color 1s;
}
#wyswietlanie_info .kafelek_obsada.kafelek_overflow_max::after {
    height: 100px; margin-bottom: 0px; align-items: center;
}
#wyswietlanie_info .kafelek_biogram {
    width: 565px;
}
#wyswietlanie_info .kafelek a {
    color: white; display: inline;
}
#wyswietlanie_info .kafelek ul {
    list-style-type: none; list-style-position: inside; padding: 0px; margin: 0px;
}
#wyswietlanie_info .kafelek_obsada ul {
    list-style-type: disc;
    text-align: left;
    list-style-position: outside;
    padding-left: 20px;
}
a.druk {
    display: block;
    margin: 20px;
    font-size: 20px;
    color:rgba(29, 52, 105, 1);
    text-align: center;
}
#logowanie_ban {
    display: grid; grid-template-rows: 30px 40px 300px 70px;
    width: 740px; max-width: 90%; margin: 0px auto;
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);
    font-size: 24px; font-weight: 600; border-radius: 15px;
}
#formlog {
    grid-row: 3;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
#formlog div {margin: 20px;}
#formlog label {
    font-size: 24px; color: white;
}
#formlog input[type=text], #formlog input[type=password] {
    color: black; padding: 18px; background-color: white; font-size: 24px;
    border-radius: 30px; border: none; width: 450px;  margin-left: 10px;
}
#formlog input[type=submit] {
    color: white; padding: 8px; background: rgba(209, 239, 255, 0.4); 
    border-radius: 20px; border: none; width: 160px; font-size: 24px; margin: 30px;
}
#logowanie_ban #zaloz_konto {
    grid-row: 4; margin-left: 70px;
    text-decoration: none; color: white; 
}
#logowanie_ban .blad {
    grid-row: 2; color: white; width: 100%; text-align: center; margin: 0px; padding: 0px;
}
#zaloz_konto_ban {
    display: grid; grid-template-rows: 70px auto 40px 20px;
    width: 900px; max-width: 90%; margin: 0px auto;
    background: linear-gradient(180deg, #1D3469 0%, #64BBE8 100%);
    font-size: 24px; font-weight: 600; border-radius: 15px; color: white;
}
#zaloz_konto_ban form {
    grid-row: 2; text-align: right; padding-right: 120px; position: relative;
}
#zaloz_konto_ban form input[type=text]{
    color: black; padding: 18px; background-color: white; font-size: 21px;
    border-radius: 30px; border: none; width: 450px; margin: 10px; margin-left: 20px;
}
#zaloz_konto_ban form label {
    display: inline-block; position: relative;
}
#zaloz_konto_ban form .sublabel{
    font-size: 16px; position: absolute; right: -10px; text-wrap: nowrap;
}
#zaloz_konto_ban form label[for=motywacja] {
    margin-right: 100px;
}
#zaloz_konto_ban form #motywacja{
    width: 600px; margin: 10px;
}
#zaloz_konto_ban form label.check {
    display: flex; flex-direction: row; justify-content: right;
}
#zaloz_konto_ban form input[type=checkbox]{
    width: 26px; height: 26px; margin: 5px 20px;
}
#zaloz_konto_ban form label.check div {
    width: 630px; text-align: left;
}
#zaloz_konto_ban form label.check a {
    color: white;
}
#zaloz_konto_ban form .g-recaptcha {
    margin-left: 105px;
}
#zaloz_konto_ban form #submit_ban {
    margin-left: 120px; width: auto; text-align: center;
}
#zaloz_konto_ban form input[type=submit] {
    color: white; padding: 8px; background: rgba(209, 239, 255, 0.4); 
    border-radius: 20px; border: none; width: 160px; font-size: 24px; margin: 30px auto;
}
#zaloz_konto_ban #blad_form {
    display: none;
    grid-row: 3; color: white; width: 100%; text-align: center; margin: 0px; padding: 0px;
}
/* CMS */
h2 {margin: 10px; text-align: center; font-size: 30px;}
#opis_kompozytora {margin-bottom: 100px; padding-left: 30px; padding-right: 30px; font-size: 20px;}
#opis_kompozytora a {color: #1e2b62; text-decoration: none;}
#opis_kompozytora ul {list-style-type: none;}
#opis_utworu {margin-bottom: 100px; padding-left: 30px; padding-right: 30px; font-size: 20px;}
#opis_utworu a {color: #1e2b62; text-decoration: none;}
#opis_utworu ul {list-style-type: none;}
#opis_utworu ul.wew {list-style-type: disc;}
#opis_utworu ul.wew2 {list-style-type: square;}
#opis_utworu ul.wew3 {list-style-type: disc;}
#edycja input {font-size: 20px; width: 500px; margin-top: 10px;}
#edycja input[type=checkbox] {width: 20px; height: 20px;}
#edycja input[type=radio] {width: fit-content; margin: 15px; font-size: 20px;}
#edycja input[type=submit] {display: block; width: 150px;}
#edycja textarea {height:50px; width: 700px; font-size: 20px; margin-top: 10px; margin-bottom: 0px;}
table.edycja {border: 1px solid black; margin: 15px; font-size: 20px;}
table.edycja th, td {border: 1px solid black; text-align: center; width: 300px;}
table.edycja tr.naglowek {font-weight: bold}
table.edycja tr.naglowek2 {font-weight: bold}
table.edycja tr.naglowek td {border: 3px solid black;}
table.edycja tr.naglowek2 td {border: 3px dotted black;}
#usun_kompozytora, #anuluj, #usun_utwor {float: right; margin: 10px; font-size: 20px;}
#zakoncz_edycje {float: left; margin: 10px; font-size: 20px;}
#edycja {margin: 10px; font-size: 20px;}
a.cms_opcja {font-size: 20px; color: #1e2b62; display: block; margin: 10px; text-align: center;}
#wydruk_listy {
    margin: 20px 50px;
    font-size: 20px;
}
#wydruk_listy input[type=checkbox]{
    height: 15px;
    width: 15px;
    margin: 5px;
}
#wydruk_listy input[type=submit]{
    font-size: 20px;
    margin: 10px 0px;
}
.cms_info {
    font-size: 20px;
    margin: 20px 50px;
}
#lista_ban {
    margin: 50px;
    font-size: 20px;
}
#wyszukiwarka_cms {text-align: center; font-size: 20px;}
#wyszukiwarka_cms input {font-size: 20px;}
#wyniki {margin: 30px auto;}