/* Ten CSS dodaje naturalny uklad dla wszystkich elementow - w skrocie jest wymagany w KAZDEJ STRONIE I APCE */
html {
    box-sizing: border-box;
    overscroll-behavior: none; /* Blokuje możliwość na telefonach przescrollowania strony ponad to co widac - przydatne w safari */
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

/* GLOBALNE KOLORY */
:root {
    --background: #f2f5ff;
    --white: #ffffff;
    --black: #000000;
    --graytext: #abb1c6;
    --grayicon: #b5c0e1;
    --violet: #5f3ef8;
    --darkviolet: #462cbf;
  }



/* WŁAŚCIWOŚCI BODY */
body
{
    overscroll-behavior: none; /* Blokuje możliwość na telefonach przescrollowania strony ponad to co widac - przydatne w safari */
    font-family: 'Roboto', sans-serif;
    font-size: 13px; /* Domyslny rozmiar jesli nie zdefiniowano inaczej */
    font-weight: 400;
    color: black;
    margin: 0;
    background-color: #f2f5ff;
    padding-bottom:140px; /* Dodaje automatyczny odstep by sticky header nie zakrywał treści - apka mobilna wiec wyjatkowo z dolu */
    /*padding-top:70px; /* Dodaje automatyczny odstep u gory - wyspy telefonow niestety przykrywaja tresci, kod zapobiega temu - normalnie bylby uzywany ale tu sam pilnuję elementów */
    display:flex;
    flex-direction: column;
    align-items: center;
}

h1{
    font-size: 30px;
    font-weight: 700;
    display: inline;
    margin-top: 5px;
    margin-bottom: 5px;
}
h2{
    font-size: 26px;
    font-weight: 700;
    display: inline;
    margin-top: 5px;
    margin-bottom: 5px;
}
h3{
    font-size: 22px;
    font-weight: 700;
    display: inline;
    margin-top: 5px;
    margin-bottom: 5px;
}
h4{
    font-size: 18px;
    font-weight: 700;
    display: inline;
    margin-top: 5px;
    margin-bottom: 5px;
}
h5{
    font-size: 16px;
    font-weight: 700;
    display: inline;
    margin-top: 5px;
    margin-bottom: 5px;
}
h6{
    font-size: 16px;
    font-weight: 500;
    display: inline;
    margin-top: 5px;
    margin-bottom: 5px;
}

p{
    font-size: 12px;
    font-weight: 500;
    display:inline;
    margin-top: 5px;
    margin-bottom: 5px;
}

.table-title{
    color:var(--graytext);
}
.table-item{
    color:var(--black);
    font-size: 14px;
    margin-top:2px;
    margin-bottom:2px;
}

.additional-info{
    color:var(--graytext);
    font-size:12px;
    font-weight:300;
}


a:link{
    color: inherit; /* nadaje kolor elementu nadrzędnego np. buttonu lub paragraph */
    text-decoration: none; /* usuwa domyślne podkreślenie linku */
}
a:visited{
    color: inherit; /* nadaje kolor elementu nadrzędnego np. buttonu lub paragraph */
    text-decoration: none; /* usuwa domyślne podkreślenie linku */
}
a:hover{
    color: inherit; /* nadaje kolor elementu nadrzędnego np. buttonu lub paragraph */
    text-decoration: none; /* usuwa domyślne podkreślenie linku */
}

/* style dla pól: tekstowych, email, daty, hasła, numerów, kolorów i pliku */
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input[type=number] , input[type=color], input[type=file] {
    width: 100%;
    font-size:16px;
    font-weight: 500;
    padding: 6px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid var(--graytext);
}

/* styl dla rozwijanych pól select */
select {
    width: 100%;
    font-size:16px;
    font-weight: 500;
    padding: 6px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid var(--graytext);
    background-color: var(--white);
}

/* styl dla pola tekstowego */
textarea{
    width: 100%;
    font-size:16px;
    font-weight: 500;
    padding: 6px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid var(--graytext);
}

/* styl etykiet */
label{
    font-weight: 500;
    color:var(--graytext);
    font-size: 16px;
}

/* Wymusza formularz na pełną szerokość kontenera z układem pionowym */
form{
    display: flex;
    width: 100%;
    flex-direction:column;
    align-items:flex-start;
    justify-content: center;

}

/* CSS dla menu nawigacyjnego */
.navbar{
    background-color: var(--white);
    height: 100px;
    display:flex;
    width:100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 90;
    position: fixed;
    bottom: 0px;
    overflow: hidden;
    padding-bottom:20px;
}

.navbar-element-active{
    max-width: 40px;
    object-fit: contain;
    filter: invert(29%) sepia(85%) saturate(5502%) hue-rotate(247deg) brightness(98%) contrast(98%); /* Niestety pliki csv ciezko sie edytuje - ten kod pozwala dobrac filtr zmianiajacy kolor https://codepen.io/sosuke/pen/Pjoqqp */

}
.navbar-element-inactive{
    max-width: 40px;
    object-fit: contain;
    filter: invert(84%) sepia(5%) saturate(1446%) hue-rotate(190deg) brightness(90%) contrast(95%);  /* Niestety pliki csv ciezko sie edytuje - ten kod pozwala dobrac filtr zmianiajacy kolor https://codepen.io/sosuke/pen/Pjoqqp */
}

/* WYSKAKUJĄCE ALERTY */
.alert-success{
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    width:95%;
    z-index: 80; /* Chowa sie pod navbar ale jest nad wszystkim */
    background-color: rgb(19, 170, 19);
    color: white;
    position:fixed;
    top: -40px;
    min-height: 45px;
    border-radius: 15px;
    opacity: 0;
    animation-name: alert; /* jaką animację zastosować */
    animation-duration: 5s; /* ile trwa  */
    animation-delay: 0s; /* opóźnienie uruchomienia  */
    animation-iteration-count: 1; /* ile razy wykonać */
    animation-timing-function: ease-in-out; /* styl ruchu */
}

.alert-error{
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    width:95%;
    z-index: 80; /* Chowa sie pod navbar ale jest nad wszystkim */
    background-color: rgb(212, 11, 11);
    color: white;
    position:fixed;
    top: -40px;
    min-height: 45px;
    border-radius: 15px;
    opacity: 0;
    animation-name: alert; /* jaką animację zastosować */
    animation-duration: 5s; /* ile trwa  */
    animation-delay: 0s; /* opóźnienie uruchomienia  */
    animation-iteration-count: 1; /* ile razy wykonać */
    animation-timing-function: ease-in-out; /* styl ruchu */
}

/* Animacja "alert" */
@keyframes alert {
    0% { opacity: 0; transform: translate(0px, -80px); }
    10% { opacity: 1; transform: translate(0px, 80px); }
    70% { opacity: 1; transform: translate(0px, 80px); }
    100% { opacity: 0; transform: translate(0px, -80px); }
  }

.alert-success-icon{
    max-width: 24px;
    object-fit: contain;
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(300deg) brightness(105%) contrast(101%); /* Niestety pliki csv ciezko sie edytuje - ten kod pozwala dobrac filtr zmianiajacy kolor https://codepen.io/sosuke/pen/Pjoqqp */

}


/* Kolumny - elementy układające treści w kolumny bez dodatkowego stylizowania, sluza do tworzenia siatki obiektow */
/* Dzięki temu jedna prosta klasa np. column100x-right tworzy kolumnę o szerokości 100% w układzie poziomym (X) z wyrównaniem do prawej */
/* Kolumny X - typ ROW */
.column50x-left{
    display:flex;
    flex-direction:row;
    width: 50%;
    align-items:flex-start;
    justify-content: flex-start;
}

.column50x-center{
    display:flex;
    flex-direction:row;
    width: 50%;
    align-items:flex-start;
    justify-content: center;
}

.column50x-right{
    display:flex;
    flex-direction:row;
    width: 50%;
    align-items:flex-start;
    justify-content: flex-end;
}

.column25x-left{
    display:flex;
    flex-direction:row;
    width: 25%;
    align-items:flex-start;
    justify-content: flex-start;
}

.column25x-center{
    display:flex;
    flex-direction:row;
    width: 25%;
    align-items:flex-start;
    justify-content: center;
}

.column25x-right{
    display:flex;
    flex-direction:row;
    width: 25%;
    align-items:flex-start;
    justify-content: flex-end;
}

.column75x-left{
    display:flex;
    flex-direction:row;
    width: 75%;
    align-items:flex-start;
    justify-content: flex-start;
}

.column75x-center{
    display:flex;
    flex-direction:row;
    width: 75%;
    align-items:flex-start;
    justify-content: center;
}

.column75x-right{
    display:flex;
    flex-direction:row;
    width: 75%;
    align-items:flex-start;
    justify-content: flex-end;
}

.column100x-left{
    display:flex;
    flex-direction:row;
    width: 100%;
    align-items:flex-start;
    justify-content: flex-start;
}

.column100x-center{
    display:flex;
    flex-direction:row;
    width: 100%;
    align-items:flex-start;
    justify-content: center;
}

.column100x-right{
    display:flex;
    flex-direction:row;
    width: 100%;
    align-items:flex-start;
    justify-content: flex-end;
}

/* KOLUMNY Y - Typ column */

.column50y-left{
    display:flex;
    flex-direction:column;
    width: 50%;
    align-items:flex-start;
    justify-content: center;
}

.column50y-center{
    display:flex;
    flex-direction:column;
    width: 50%;
    align-items:center;
    justify-content: center;
}

.column50y-right{
    display:flex;
    flex-direction:column;
    width: 50%;
    align-items:flex-end;
    justify-content: center;
}

.column25y-left{
    display:flex;
    flex-direction:column;
    width: 25%;
    align-items:flex-start;
    justify-content: center;
}

.column25y-center{
    display:flex;
    flex-direction:column;
    width: 25%;
    align-items:center;
    justify-content: center;
}

.column25y-right{
    display:flex;
    flex-direction:column;
    width: 25%;
    align-items:flex-end;
    justify-content: center;
}

.column75y-left{
    display:flex;
    flex-direction:column;
    width: 75%;
    align-items:flex-start;
    justify-content: center;
}

.column75y-center{
    display:flex;
    flex-direction:column;
    width: 75%;
    align-items:center;
    justify-content: center;
}

.column75y-right{
    display:flex;
    flex-direction:column;
    width: 75%;
    align-items:flex-end;
    justify-content: center;
}

.column100y-left{
    display:flex;
    flex-direction:column;
    width: 100%;
    align-items:flex-start;
    justify-content: center;
}

.column100y-center{
    display:flex;
    flex-direction:column;
    width: 100%;
    align-items:center;
    justify-content: center;
}

.column100y-right{
    display:flex;
    flex-direction:column;
    width: 100%;
    align-items:flex-end;
    justify-content: center;
}

/* Dodatkowe style dla kolumn nadajace im wygladu */
.whitebox{
    background-color: var(--white);
    border-radius: 15px;
    padding: 15px;
}


/* Przyciski - domyślny przycisk */
button {
    background-color: var(--violet);
    color: var(--white);
    width: 100%;;
    display: inline-flex;
    align-items: center; 
    border: none;
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 16px 8px 16px 8px;
    font-size:16px;
    font-weight:700;
    cursor: pointer;
}

/* Ikony wewnątrz przycisków - dodaj lekki odstęp między ikoną a tekstem, zakladamy ze ikona jest zawsze z lewej */
button i{
    margin-right:7px;
}

/* Przyciski - specjalne klasy dodatkowe */

.button-default{
    background-color: var(--akcent);
    color: var(--textwhite);
    display: inline-flex;
    align-items: center; 
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 5px 15px 5px 15px;
    font-size:13px;
    width: fit-content;
    cursor: pointer;
}

.button-inactive{
    background-color: transparent;
    color: var(--akcent);
    display: inline-flex;
    align-items: center; 
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 4px 15px 4px 15px;
    font-size:13px;
    width: fit-content;
    cursor: pointer;
    border: 1px solid var(--akcent);
}

.button-inactive i{
    margin-right:7px;
}

.button-default i{
    margin-right:7px;
}

.button-default-big{
    background-color: var(--akcent);
    color: var(--textwhite);
    display: inline-flex;
    align-items: center; 
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 10px 25px 10px 25px;
    font-size:13px;
    width: fit-content;
    cursor: pointer;
}

.button-default-big i{
    margin-right:7px;
}

.button-fullwidth{
    background-color: var(--akcent);
    color: var(--textwhite);
    display: inline-flex;
    align-items: center; 
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 5px 15px 5px 15px;
    width: 100%;
    font-size: 13px;
    cursor: pointer;
}

.button-fullwidth i{
    margin-right:7px;
}

.button-square{
    background-color: var(--akcent);
    color: var(--textwhite);
    display: inline-flex;
    align-items: center; 
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 0px;
    width: 30px;
    height: 30px;
    font-size: 13px;
    cursor: pointer;
}

.button-square i{
}


.button-square:hover{
    background-color: var(--akcent-hover);
}
.button-fullwidth:hover{
    background-color: var(--akcent-hover);
}
.button-default:hover{
    background-color: var(--akcent-hover);
}
.button-default-big:hover{
    background-color: var(--akcent-hover);
}