:root {
    --color-white: oklch(1 0 0 );
    --color-white1: oklch(.93 0 0 );
    --color-white2: oklch(.9 0 0 );
    --color-green1: oklch(.648 .2 131.684);
    --color-green2:oklch(.768 .233 130.85);
    --color-blue1: oklch(.5 .134 242.749);
    --color-blue2: oklch(.588 .158 241.966);
    --color-blue3: oklch(.398 .07 227.392);
    --color-orange1: oklch(.646 .222 41.116);
    --color-orange2: oklch(.705 .213 47.604);
    --color-red1: oklch(.514 .222 16.935);
    --color-red2: oklch(.586 .253 17.585);
    --color-purple1: oklch(.518 .253 323.949);
    --color-purple2: oklch(.591 .293 322.896);
    --color-gray1: oklch(.279 .041 260.031);
    --color-gray2: oklch(.372 .044 257.287);
    --color-gray3: oklch(.554 .046 257.417);
    --color-gray4: oklch(.704 .04 256.788);
    --color-gray5: oklch(.929 .013 255.508);

    --color-stone100: oklch(.97 .001 106.424);
    --color-stone200: oklch(.923 .003 48.717);
    --color-stone300: oklch(.869 .005 56.366);
    --color-stone400: oklch(.709 .01 56.259);

    --color-slate500: oklch(.554 .046 257.417);
    --color-slate700: oklch(.372 .044 257.287);
    --color-slate950: oklch(.129 .042 264.695);


    --workshop-info-color: oklch(.554 .046 257.417); /* kolor tabelek wyświetlanych na warsztacie w szczegółach zlecenia */

    --main-font: 'Barlow Semi Condensed', sans-serif;
}

.bg_white { background-color: var(--color-white) }
.bg_green { background-color: var(--color-green1) }
.bg_blue { background-color: var(--color-blue1) }
.bg_orange { background-color: var(--color-orange1) }
.bg_red { background-color: var(--color-red1) }
.bg_purple { background-color: var(--color-purple1) }
.bg_gray1 { background-color: var(--color-gray1) }
.bg_gray2 { background-color: var(--color-gray4) }
.bg_gray3 { background-color: var(--color-stone200) }
.bg_gray4 { background-color: var(--color-stone300) }
.bg_gray5 { background-color: var(--color-stone400) }

[x-cloak] {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--main-font);
    color: var(--color-gray1);
    background-color: var(--color-gray3);
}

ul, ol {
    padding: 0;
    margin: 0;
}

ul li {
    list-style-type: disc;
    margin: 0;
    padding: 0;
    list-style-position: inside;
}

ol li {
    list-style-type: decimal;
    margin: 0;
    padding: 0;
    list-style-position: inside;
}


/* FILTER PANEL ----------------------------------------------------------------------------------------------------- */

/* FILTER PANEL ----------------------------------------------------------------------------------------------------- */


/* HEADER - top ----------------------------------------------------------------------------------------------------- */
#header {
    @apply fixed top-0 left-0 w-full shadow-md z-[12] transition-transform duration-300;
    background-color: var(--color-gray2);
}
#header div.header {
    /* @apply lg:container mx-auto flex justify-between items-center py-1 px-4 lg:px-0; */
    @apply mx-auto flex justify-between items-center py-1 px-8;
}
/*#header h1 {*/
/*    color: var(--color-green2);*/
/*}*/
/*#header div button {*/
/*    @apply lg:hidden text-white px-3 py-1 rounded border-1 border-white;*/
/*    cursor: pointer;*/
/*}*/
#header div.header div.page_title {
    @apply text-left;
    color: var(--color-green2);
}
#header div.header div.user_name {
    @apply text-right;
    color: var(--color-gray5);
}

/* KONIEC - HEADER - top -------------------------------------------------------------------------------------------- */



/* NAWIGACJA - górna ------------------------------------------------------------------------------------------------ */
nav.nav-top {
    @apply sticky top-0 px-4 lg:px-0 py-2 mt-8 block z-[10] hidden lg:block;
    background-color: var(--color-gray1);
}
nav.nav-top div {
    /* @apply lg:container mx-auto flex justify-between items-center; */
    @apply mx-auto px-8 flex justify-between items-center;
}
nav.nav-top ul.ul-main {
    @apply flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4;
}
nav.nav-top ul.ul-main li {
    list-style-type: none;
    padding: 0 20px;
    border-left: solid 1px var(--color-gray3);
}
nav.nav-top ul.ul-main li:first-child {
    padding-left: 0;
    border-left: 0 none;
}
nav.nav-top ul.ul-main li a, nav.nav-top ul.ul-main li button {
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: var(--color-white);
}
nav.nav-top ul.ul-main li a, nav.nav-top ul.ul-main li button {
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: var(--color-white);
}

nav.nav-top ul.ul-main li a:hover, nav.nav-top ul.ul-main li button:hover {
    color: var(--color-green2);
}
nav.nav-top ul.submenu {
    background-color: var(--color-gray2);
    padding: 5px 0;
    border: solid 1px var(--color-gray3);
    -webkit-border-radius: 0 10px 10px 10px;
    border-radius: 0 10px 10px 10px;

    -webkit-box-shadow: 1px 1px 2px 0 #000000;
    box-shadow: 1px 1px 2px 0 #000000;
}
nav.nav-top ul.submenu li {
    text-wrap: nowrap;
    border: 0 none;
    border-bottom: solid 1px var(--color-gray4);
    padding: 2px 0 !important;
    margin: 0 !important;
}
nav.nav-top ul.submenu li:last-child {
    border-bottom: 0 none;
}
nav.nav-top ul.submenu li a {
    @apply block py-1 w-full pl-4 min-w-28;
    font-size: 0.9em;
}

/* MENU MOBILNE ********************************************************************** */

nav.nav-top-mobile {
    background-color: var(--color-gray1);
    @apply sticky top-0 px-2 py-2 mt-8 block z-[10] lg:hidden;
}

/* KONIEC - NAWIGACJA - górna --------------------------------------------------------------------------------------- */




div.main-container {
    /* @apply mx-auto lg:container; */
    @apply mx-auto px-4;
}



/* FOOTER - top ----------------------------------------------------------------------------------------------------- */
footer {
    @apply sticky bottom-0 text-center;
    background-color: var(--color-gray1);
}
footer p {
    font-family: 'Barlow Semi Condensed', sans-serif;
    color: var(--color-gray4);
}
/* KONIEC - FOOTER - top -------------------------------------------------------------------------------------------- */