/* TABLE HTML */
.t_header {
    font-size: 48px;
    font-weight: bold;
    height: 105px;
    text-align: center;
    text-transform: uppercase;
    background: #444444;
    color: #FFFF00;
}

.t_data_head {
    font-size: 1.2rem;
    font-weight: bold;
   /* text-transform: uppercase;*/
    padding-left:2em;
    letter-spacing: 0.08em;
    height: 2.5rem;
    box-shadow: inset 0 -0.1em 0 0 #e4f746; /* Inset powoduje, że cień pojawia się wewnątrz */
    vertical-align: middle;
    text-align: left;
    background: #444444;
    color: #e4f746;
}

.t_data_head_small {
    font-size: 0.7rem;
    font-weight: normal;
    white-space: normal;
    height: 1.8rem;
    text-align: center;
    background: #666666;
    color: #F5F5F5;
}

.t_data {
    font-size: 1rem;
    font-weight:normal;
    vertical-align:middle;
    height: 2.2rem;
}

.t_data_w {
    font-size: 1rem;
    font-weight:normal;
    vertical-align:middle;
    height: 2.2rem;
    padding: 0.15rem;
    background:#FFFFFF;
    color:#000000;
}

.t_data_b {
    font-size: 1rem;
    font-weight:normal;
    vertical-align:middle;
    text-align:left;
    height: 2.2rem;
    padding: 0.15rem;
    background:#E8E8E8;
    color:#000000;
}

.t_tooltip {
    font-size:24px;
    height:45px;
}

.t_data_edit {
    background:#CCCCCC;
    color:#444444;
}

.t_data_red {
    color:#FF0000;
}

.t_frame_head {
    border-style:solid;
    border-width:1px;
    border-color:#CCCCCC
}

.t_frame {
    border-style:solid;
    border-width:1px;
    border-color:#CCCCCC
}

.t_padding {
    padding: 0.1em 0.2em 0.1em 0.2em;
}

.t_hover_w:hover {
    background:lightgreen
}

.t_hover_b:hover {
    background:lightgreen
}

.field_label_v {
    font-size:33px;
    font-weight:normal;
    text-align:left;
    vertical-align:bottom;
    color:#444444;
}

.field_label_h {
    font-size:33px;
    font-weight:normal;
    text-align:left;
    vertical-align:middle;
    color:#444444;
}

/* TABLE CSS GRID */

.tb_data_b {
    font-size: 1rem;
    font-weight:normal;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    /*min-height: 2.2rem;*/
    padding: 0.4rem;
    background:#E8E8E8;
    color:#000000;
}

.tb_data_head {
    font-size: 1.2rem;
    font-weight: bold;
    /* text-transform: uppercase;*/
    padding-left:2em;
    letter-spacing: 0.08em;
    height: 2.5rem;
    box-shadow: inset 0 -0.1em 0 0 #e4f746; /* Inset powoduje, że cień pojawia się wewnątrz */
    align-items: center;
    justify-content: flex-start;
    background: #444444;
    color: #e4f746;
}

.tb_data_head_small {
    font-size: 0.7rem;
    font-weight: normal;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    /*min-height: 2.2rem;*/
    padding: 0.2rem;
    align-items: center;
    justify-content: center;
    background: #666666;
    color: #F5F5F5;
}

.tb_data_head_normal {
    font-size: 1rem;
    font-weight: bold;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    /*min-height: 2.2rem;*/
    padding: 0.4rem;
    align-items: center;
    justify-content: center;
    background: #666666;
    color: #F5F5F5;
}

.tb_data_w {
    font-size: 1rem;
    font-weight:normal;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    /*min-height: 2.2rem;*/
    padding: 0.4rem;
    background:#FFFFFF;
    color:#000000;
}

.tb_data_h {
    font-size: 1rem;
    font-weight:normal;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    /*min-height: 2.2rem;*/
    padding: 0.15rem;
    background:#666666;
    color:#F5F5F5;
}

.tb-align-l  { justify-content: flex-start; }
.tb-align-c  { justify-content: center; }
.tb-align-r  { justify-content: flex-end; }

.tb-valign-t { align-items: flex-start; }
.tb-valign-m { align-items: center; }
.tb-valign-b { align-items: flex-end; }


/* Tabela w wersji mobilnej */
.mobile-view .tile {
    display: block; /* Kafelki w jednej kolumnie */
    width: 100%;
    border: 1px solid #ddd;
    padding: 0.3em;
    margin: 1em 0;
    border-radius: 0.4em;
    background-color: #f9f9f9;
    box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1);
}

/* Każdy wiersz w kafelku jest w jednej kolumnie */
.mobile-view .tile-row {
    display: flex;
    flex-direction: column; /* Ustawiamy nagłówek i treść jeden pod drugim */
    margin-bottom: 0.7em;
}

/* Nagłówki w kafelkach */
.mobile-view .tile-header {
    font-family: 'Kanit', sans-serif;
    font-size: 0.8em;
    font-weight: 400;
    text-align: left;
}

/* Komórki w kafelkach */
.mobile-view .tile-content {
    margin-bottom: 0.4em;
    text-align: left !important;
}



.red_light {
    background-image: linear-gradient(rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0.15));
    background-blend-mode: multiply;
}

.green_light {
    background-image: linear-gradient(rgba(0, 255, 0, 0.15), rgba(0, 255, 0, 0.15));
    background-blend-mode: multiply;
}

.yellow_light {
    background-image: linear-gradient(rgba(255, 255, 0, 0.15), rgba(255, 255, 0, 0.15));
    background-blend-mode: multiply;
}

.red {
    background-image: linear-gradient(rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 0.6));
    background-blend-mode: multiply;
}

.green {
    background-image: linear-gradient(rgba(0, 255, 0, 0.6), rgba(0, 255, 0, 0.6));
    background-blend-mode: multiply;
}

.yellow {
    background-image: linear-gradient(rgba(255, 255, 0, 0.6), rgba(255, 255, 0, 0.6));
    background-blend-mode: multiply;
}


.tb_hover {
    background-image: linear-gradient(rgba(0, 255, 0, 0.4), rgba(0, 255, 0, 0.4)) !important;
    background-blend-mode: multiply !important;
}

.tb_frame {
    border-style:solid;
    border-width:1px;
    border-color:#CCCCCC
}

.tb_pagination {
    background-color: #FFFFFF;
}


/* TITLE FIELD */

.tf_main {
    background: none;
}

/* gdy kontener jest aktywny */
.tf_main.active {
    border-color: rgba(0, 123, 255, 0.8);
    animation: tf-flickerEffect 2s infinite; /* Migotanie */
}

@keyframes tf-flickerEffect {
    0%, 100% {
        box-shadow: 0 0 0.7em rgba(0, 123, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 1em rgba(0, 123, 255, 0.8);
    }
    75% {
        box-shadow: 0 0 0.85em rgba(0, 123, 255, 0.6);
    }
}

/* gdy kontener jest nieaktywny */
.tf_main.inactive {
    background: #f9f9f9; /* Jaśniejszy odcień w stanie */
    border: 1px solid #ccc; /* Przygaszone obramowanie */
    opacity: 0.8; /* Lekkie przygaszenie */
}


.tf_header {
    font-size: 1.2rem;
    font-weight: normal;
    white-space: normal;
    text-align: left;
    padding: 0.2em 2.6em 0.2em 2.4em;
    background: #666666;
    color: #F5F5F5;
    position: relative;
}

.tf_header_status {
    font-weight: bold;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translate(50%, -50%);
    opacity: 0.6;
}

.tf-icon {
    display: block;
    text-align: center;
    width: 1.2em;
    height: 1.2em;
    background: none;
    position: absolute;
    top: 50%;
    left: 0.6em;
    transform: translate(0%, -50%);
}

.tf_body {
    font-size: 1rem;
    font-weight: normal;
    white-space: normal;
    text-align: left;
    vertical-align: top;
    background: #F0F0F0;
    color: #000000;
    padding: 0.3em 0.3em 0.7em 0.3em;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #666666;
    border-radius: 0 0 0.7em 0.7em;
}

.tf_tbody {
    margin: 0;
    padding: 0;
}

.tf_bbody {
    margin: 0;
    padding: 0;
}

.tf_bbody1 {
    margin: 0;
    padding: 0;
}

.tf_bbody2 {
    margin: 0;
    padding: 0;
}

/* Input File */
.if-drop-zone {
    border: 2px dashed #ccc;
    text-align: center;
    cursor: pointer;
    color: #666;
}

.if-drop-zone.dragover {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.if-file-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.if-file-header {
    position: relative;
    border: 1px solid lightgrey;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.5em;
    padding: 0 0.5em 0 0.5em;
}

.if-file-header progress {
    border: none;
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.if-file-header progress::-webkit-progress-bar {
    background-color: transparent; /* Kolor tła paska */
}

.if-file-header progress::-webkit-progress-value {
    background-color: lightblue; /* Kolor wypełnienia paska (zielony) */
}

.if-file-header progress::-moz-progress-bar {
    background-color: lightblue; /* Kolor wypełnienia paska (dla Firefoksa) */
}

.if-file-header span {
    z-index: 1;
}

/* SIMPLE FORM */

/* Układ pionowy */
.v-form {
    position: relative;
    width: 100%;
}

/* etykieta */
.v-form label {
    font-family: 'Kanit', sans-serif;
    display: block;
    font-weight: 400;
    text-align: left;
}

/* error */
.v-form small {
    display: block;
    color: red;
    font-size: 0.8rem;
    text-align: left;
}

/* help */
.ButtonHelp-v {
    position: absolute;
    top: 0px;
    right: 0px;
}

.ButtonHelp-mf {
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
}

.ButtonHelp-tf {
    position: absolute;
    top: 50%;
    right: 2.5em;
    transform: translateY(-50%);
}

/* Układ poziomy */
.h-form {

}

/* etykieta */
.h-form div div label {
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: left;
    width:100%;
    height:100%;

}

/* Input */
.h-form div div {
    display: flex;
    align-items: center;
}

.h-form-bottom {
    position: relative;
}

/* Stylizacja komunikatów błędów */
.h-form-bottom small {
    display: block;
    color: red;
    font-size: 0.8rem;
    min-height: 1.1rem;
    text-align: left;
    vertical-align: middle;
}

/* help */
.ButtonHelp-h {
    position: absolute;
    top: 0px;
    left: 0px;
}


/* input text z jednostka symulujący input number */
.input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #CCCCCC;
    border-radius: 0.25em;
    background: #F5F5F5;
}
.input-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1 1 auto;          /* <-- input się rozciąga */
    min-width: 0;            /* fix dla przeglądarek */
}
.input-wrap .unit {
    display:inline-block;
    margin-right: 0.8em;
    text-align:left;
    color: #888;
    user-select: none;
    cursor: text;
    white-space: nowrap;     /* <-- nie zawija jednostki */
    flex-shrink: 0;          /* jednostka nie zmniejsza się */
}
.input-wrap:focus-within {
    border-color: #000000;
}



.field-not-saved .input-wrapper,    /* brak zapisu dla checkbox */
.field-not-saved input,             /* brak zapisu dla pole input */
.field-not-saved .input-wrap,       /* brak zapisu dla pole input */
.field-not-saved select,            /* brak zapisu dla pole select */
.field-not-saved .ModalSelect,      /* brak zapisu dla ModelSelect */
.field-not-saved .mSelect {         /* brak zapisu dla multi select */
    background-color: #FFFFCC;
    box-shadow: 0 0 0.8em 0.1em rgba(255, 255, 100, 0.5);
}


.field-active{         /* brak zapisu dla multi select */
    border-color: rgba(0, 123, 255, 0.8);
    box-shadow: 0 0 0.3em 0.1em rgba(0, 123, 255, 0.8);

}

/* Umożliwia pozycjonowanie spinnera absolutnie względem inputu */
.input-wrapper {
    position: relative;
}

/* Styl dla spinnera w formie kropek */
.dots-spinner {
    display: inline-block;
    position: absolute; /* Absolutne pozycjonowanie spinnera względem input-wrapper */
    top: 50%; /* Wyśrodkowanie w pionie */
    left: 50%; /* Wyśrodkowanie w poziomie */
    transform: translate(-50%, -50%); /* Przesunięcie na środek */
    pointer-events: none; /* Spinner nie blokuje interakcji z input */
    z-index: 5;
}

/* Każda kropka spinnera */
.dot {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 0.2em;
    background-color: black;
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
    opacity: 0.5;
}

/* Animacja dla kropek */
@keyframes bounce {
    0%, 100% {
        transform: scale(0.6);
    }
    50% {
        transform: scale(1.0);
    }
}

/* Każda kolejna kropka zaczyna animację w innym momencie */
.dot:nth-child(1) {
    animation-delay: 0s;
}
.dot:nth-child(2) {
    animation-delay: 0.2s;
}
.dot:nth-child(3) {
    animation-delay: 0.4s;
}


/* Pozycjonowanie ikony */
.input-icon {
    position: absolute;
    right: 0.3em; /* Odstęp od prawej krawędzi */
    top: 50%;
    transform: translateY(-50%); /* Wyśrodkowanie w pionie */
    width: 1.5em;
    height: 1.5em;
    background-size: cover; /* Dopasowanie tła do rozmiaru ikony */
    pointer-events: none; /* Zapewnia, że ikona nie blokuje interakcji z input */
}

/* tworzy miejsce na wstawienie ikony do input */
.input-icon-space {
    padding-right: 2em;
}

/* Ikona sukcesu (ustawiona jako tło) */
.input-icon-success {
    background-image: url('icon/ok_b.png');
}

/* Ikona błędu (ustawiona jako tło) */
.input-icon-error {
    background-image: url('icon/error_b.png');
}


/* FORM VERTICAL */

.FORM_V_Label{
    font-size: 1.2rem;
    font-weight: bold;
    white-space: normal;
    text-align: left;
    padding: 0.2em;
    color:#888888;
    background:#DDDDDD;
}

.FORM_V_Label_clear{
    height:51px;
}


/* NOTYFIKACJE */

/* Pasek postępu */
.progress-bar {
    position: absolute;
    bottom: 0;                                  /* Pasek pokazuje się na dole notyfikacji */
    left: 0;
    height:100%;
    background-color: rgba(0, 0, 0, 0.1);   /* Na przykład biały */
    transition: width 0.1s linear;              /* Animacja zmiany szerokości */
    transform-origin: right;                    /* Punkt startowy animacji */
    border-radius: 0.5em;

}


/* Kontener na wszystkie notyfikacje */
.notification-container {
    position: fixed;
    top: 5em; /* Odległość od góry */
    left: 50%; /* Pozycjonowanie centralne w osi X */
    transform: translateX(-50%); /* Przesunięcie o 50% szerokości, aby wycentrować */
    z-index: 1000;
    width: 80vw;
    max-width: 1000px;
}

/* Styl podstawowy notyfikacji */
.notification {
    position: relative;
    background-color: #4CAF50; /* domyślnie sukces */
    color: white;
    padding: 1.3em;
    margin-top: 0.8em;
    border-radius: 0.5em;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 1s ease;
}

.notification.open {
    opacity: 1;
}

/* Kolor dla wiadomości o sukcesie */
.notification .message {
    z-index: 99;
}

/* Kolor dla wiadomości o sukcesie */
.notification.success {
    background-color: #4CAF50;
}

/* Kolor dla wiadomości o błędzie */
.notification.error {
    background-color: #f44336;
}

/* Kolor dla ostrzeżeń */
.notification.warning {
    background-color: #ff9800;
}

/* Wygaszanie tekstu */
.fade-out-text {
    opacity: 0; /* Stopniowe zmniejszanie widoczności tekstu */
    transition: opacity 0.3s ease; /* Płynne wygaszanie tekstu */
}

/* do płynnego pojawiania się i znikania */
.fade {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fade.visible {
    opacity: 1;
    visibility: visible;
}


/* Animacja zmniejszania wysokości */
.slide-up {
    opacity: 0;
    height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}


/* loadContent */

/* Stylowanie dla spinera i nakładki */
.lc-spinner-overlay {
    position: absolute; /* Pozycjonowanie wewnątrz elementu */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lc-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    animation: lc-spin 1s linear infinite;
}

@keyframes lc-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.lc-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #F0F0F0; /* Jasny czerwony kolor tła, symbolizujący błąd */
    color: #000000;           /* Kolor tekstu */
    padding: 1.667rem;
    border: 1px solid #CCCCCC;
    border-radius: 0.334rem;
    box-shadow: 0px 0.334rem 0.834rem rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Upewniamy się, że jest nad innymi elementami */
    width: 80%;    /* Opcjonalnie, aby komunikat nie był zbyt szeroki */
    max-width: 33rem; /* Ograniczenie szerokości */
}

/* Stylizacja wiadomości o błędzie */
.lc-error-message {
    color: red;
    font-weight: bold;
}

/* Stylowanie przycisku ponownej próby */
.lc-retry-button {
    display: inline-block;
    font-size: 1rem;
    margin-top: 0.834rem;
    padding: 0.834em 1.667em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 0.417em;
    cursor: pointer;
    text-align: center;
}

.lc-retry-button:hover {
    background-color: #0056b3;
}

.form-container {
    position: relative;
}

.form-tabs-conteiner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 0.2em solid #ccc;
    background-color: #FFF;
    gap: 0.4em;
    font-size: 1.5em;

    position: sticky;
    top: 0;
    z-index: 10;
}

.form-tab {
    padding: 0.4em 1.5em;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    flex: 1 1 auto;
    text-align: center;
}

.form-tab::after {
    content: '';
    display: block;
    height: 0.2em;
    width: 0;
    background: #007bff;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s;
}

.form-tab.active::after { width: 100%; }