@import './normalize.css';
@import '../Light/fontawesome-7.0.1/css/all.min.css';
@import './faktury-list.css';

:root {
    color-scheme: light;

    --layout-width: 1440px;

    --bg-html: #fafaf9;

    --white: #ffffff;
    --black: #000000;

    --stone-50: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;

    --blue-800: #1e40af;


    --sky-50: #f0f9ff;
    --sky-100: #e0f2fe;
    --sky-200: #bae6fd;
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;
    --sky-600: #0284c7;
    /* --sky-600: var(--blue-800); */
    --sky-700: #0369a1;

    --violet-100: #ede9fe;

    --red-100: #fee2e2;
    --red-300: #fca5a5;

    --orange-100: #ffedd5;
    --orange-300: #fdba74;

    --yellow-100: #fef9c3;
    --yellow-alt-bg: #ebebad;
    --yellow-300: #fde047;

    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    --fuchsia-100: #fae8ff;
    --fuchsia-200: #f5d0fe;

    --color-error: #cc0000;
    --color-warning: #ff6000;
    --color-touroperator: #c00000;

    --filtr-text: #ffff00;
    --filtr-plus: #eeffdd;
    --filtr-minus: #ffeedd;

    --whatsapp: #25d366;
    --whatsapp-in: #dcf8c6;
    --whatsapp-out: #e7e7e7;
}

/* =========================================================
   DARK PALETTE
   Activate: document.documentElement.setAttribute('data-theme', 'dark')
   ========================================================= */

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-html: #0f0e0d;

    --white: #1c1917;
    --black: #f5f5f4;

    --stone-50:  #1c1917;
    --stone-100: #292524;
    --stone-200: #3c3835;
    --stone-300: #57534e;
    --stone-400: #78716c;
    --stone-500: #a8a29e;
    --stone-600: #d6d3d1;
    --stone-700: #e7e5e4;
    --stone-800: #fafaf9;

    --blue-800: #93c5fd;

    --sky-50:  #082f49;
    --sky-100: #0c4a6e;
    --sky-200: #075985;
    --sky-300: #0369a1;
    --sky-400: #0284c7;
    --sky-500: #0ea5e9;
    --sky-600: #38bdf8;
    --sky-700: #7dd3fc;

    --violet-100: #2e1065;

    --red-100: #450a0a;
    --red-300: #991b1b;

    --orange-100: #431407;
    --orange-300: #9a3412;

    --yellow-100:   #3b2f00;
    --yellow-alt-bg: #2d2800;
    --yellow-300:   #a16207;

    --green-100: #1a2e05;
    --green-200: #1e3a08;
    --green-300: #3f6212;
    --green-500: #4d7c0f;
    --green-600: #65a30d;
    --green-700: #84cc16;

    --fuchsia-100: #4a044e;
    --fuchsia-200: #701a75;

    --color-error:        #f87171;
    --color-warning:      #fb923c;
    --color-touroperator: #fca5a5;

    --filtr-text:  #fef08a;
    --filtr-plus:  #bbf7d0;
    --filtr-minus: #fed7aa;

    --whatsapp:     #25d366;
    --whatsapp-in:  #0d2b1a;
    --whatsapp-out: #2a2a2a;
}


/* 13" laptops: 1280–1440px */
@media (max-width: 1499px) {
    :root { --layout-width: calc(100vw - 40px); }
}

/* 17" laptops / FHD desktops: 1920px */
@media (min-width: 1920px) {
    :root { --layout-width: 1600px; }
}

/* 2K / QHD desktops: 2560px */
@media (min-width: 2560px) {
    :root { --layout-width: 1800px; }
}




body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* BASE */

html {
    overflow-y: scroll; /* zapobiega skakaniu ekranu */
}

html, body, select, input {
    font-size: 13px;
    line-height: 17px;
}

html, body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    color: var(--stone-800);
    background-color: var(--stone-200) !important;
}

b, strong {
    font-weight: 600;
}

/* LAYOUT — HEADER / MENU */

div.nheader {
    /* background-color: #525453; */
    padding: 8px 0 0 0;
}

div.nmenu {
    width: var(--layout-width);
    box-sizing: border-box;
    margin: 10px auto 20px auto;
    padding: 10px;
    color: var(--black);
    background-color: var(--stone-50);
    border: 1px solid var(--stone-200);
    border-radius: 2px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.nmenu-active{
    background-color: var(--stone-300);
}

div.icons {
    display: flex;
    width: var(--layout-width);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 10px 10px 0;
    font-size: 18px;
    color: var(--black);
}

div.icons a,
div.icons a:visited {
    color: var(--stone-600);
}

div.nmenu_touroperator {
    color: var(--color-touroperator);
    font-weight: bold;
    padding: 1px 1px 1px 15px;
}

/* LAYOUT — CONTAINER */

div.ncontainer {
    box-sizing: border-box;
    width: var(--layout-width);
    margin: 0 auto;
    padding: 12px 12px 4px 12px;
    min-height: calc(100vh - 132px);
    color: var(--black);
    background-color: var(--white);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
}

div.ncontainer-fluid {
    box-sizing: border-box;
    width: auto;
    margin: 0;
    padding: 12px 12px 4px 12px;
    min-height: 600px;
    color: var(--black);
    background-color: var(--stone-200);
}

/* LAYOUT — FOOTER */

div.nfooter {
    box-sizing: border-box;
    width: var(--layout-width);
    margin: 50px auto 16px auto;
    padding: 20px 10px 4px 10px;
    min-height: 10px;
    color: var(--stone-600);
    display: flex;
    align-items: center;
}

div.nfooter > div {
    flex: 1;
}

div.nfooter > div:nth-child(1) {
    display: flex;
    justify-content: flex-start;
}

div.nfooter > div:nth-child(2) {
    display: flex;
    justify-content: center;
}

div.nfooter > div:nth-child(3) {
    display: flex;
    justify-content: flex-end;
}




div.nfooter_langs a,
div.nfooter_copyright a {
    color: var(--stone-600);
    font-weight: bold;
}

div.nfooter_langs a {
    text-decoration: none;
}



/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {
    color: var(--sky-700);
    margin: 5px 0;
}

h1 { font-size: 140%; }
h2 { font-size: 120%; }
h3 { font-size: 100%; font-style: italic; }
h4 { font-size: 90%; }
h5 { font-size: 95%; font-style: italic; }
h6 { font-size: 80%; }

a, a:visited {
    color: var(--sky-600);
}

fieldset {
    margin-bottom: 12px;
    padding: 4px 6px;
    border: 1px solid var(--sky-700);
    border-radius: 4px;
}

legend {
    margin: 0 6px;
    padding: 0 6px;
}

fieldset.help {
    margin: 10px 0;
    color: var(--stone-700);
}

fieldset.help legend {
    color: var(--stone-700);
}

span.prompt {
    color: var(--stone-500);
    padding-left: 5px;
    padding-right: 10px;
}

/* FORM ELEMENTS */

input[type=text],
input[type=password],
input[type=date],
input[type=time],
span.input_text,
span.input_text_readonly,
span.input_text_disabled,
textarea {
    text-align: left;
    vertical-align: baseline;
    margin: 0;
    padding: 2px 3px;
    border: 1px solid var(--stone-300);
    border-radius: 3px;
    color: var(--black);
    background-color: var(--white);
}

input[readonly],
input.pseudo_readonly,
span.input_text_readonly {
    background-color: var(--stone-100) !important;
}

input[disabled],
input.pseudo_disabled,
span.input_text_disabled {
    color: var(--stone-500) !important;
    background-color: var(--stone-100) !important;
}

input[type=text].dark,
input[type=password].dark,
textarea.dark {
    background-color: var(--stone-300);
}

input[type=checkbox]{
    margin: 3px 3px 3px 4px;
}

select {
    text-align: left;
    vertical-align: baseline;
    padding: 2px 3px;
    border: 1px solid var(--stone-300);
    border-radius: 3px;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=time]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--black);
    box-shadow: 0 0 0 1px var(--black);
}

/* BUTTONS */

input[type=submit],
input[type=button],
.Button {
    height: 22px;
    max-height: 22px;
    min-height: 22px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    vertical-align: baseline;
    margin: 0 5px;
    padding: 0 5px;
    border: none;
    border-radius: 4px;
    color: var(--white);
    background-color: var(--sky-600);
    cursor: pointer;
}

input[type=submit].Enter {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.ColorCButton           { color: var(--sky-700); }
.ColorBgButton          { background-color: var(--sky-600); }
.ColorFontButton        { color: var(--white); }

.ColorCButtonPassive    { color: var(--sky-300); }
.ColorBgButtonPassive   { background-color: var(--sky-300); }
.ColorFontButtonPassive { color: var(--white); }

.dark, .dark2, .dark3, .dark4 {
    background-color: var(--stone-300);
}

/* GRID — HEADER */

.Header {
    width: 100%;
    margin-top: 0;
}

table.Grid span.info1{
    background-color: var(--sky-600) !important;
}

table.Grid caption,
table.Record caption,
table.Grid caption span,
.Header th,
.Header td,
.group-header {
    background-color: var(--sky-600);
    padding: 5px 8px !important;
    color: var(--white);
    text-align: left;
    border: none;
}

table.Grid caption strong,
table.Record caption strong {
    font-weight: 500 !important;
}

table.Grid caption span[style*="color:#888"],
table.Record caption span[style*="color:#888"],
.Header th span[style*="color:#888"],
.Header td span[style*="color:#888"] {
    color: var(--white) !important;
    opacity: 0.8;
}

table.Grid caption a,
table.Record caption a {
    color: var(--white);
}

.oddzial{
color: var(--stone-800) !important;
}

.HeaderLeft,
.HeaderRight {
    display: none;
}

div.HeaderNavigator {
    display: inline;
    float: right;
    margin-right: 1em;
}

div.HeaderNavigator a {
    color: var(--white);
    text-decoration: none;
    padding: 0 0.3em;
}

div.HeaderNavigator span {
    color: var(--sky-500);
    padding: 0 0.3em;
}

/* GRID — LAYOUT OVERRIDES */

.Grid {
    width: 100%;
    margin-bottom: 12px;
    border: 1px solid var(--stone-300);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.Grid[style*="width: 1182px;table-layout:fixed;"] {
    width: 100% !important;
}

div#result_search {
    width: 100%;
}

table#grid_swirez {
    border: 1px solid var(--stone-300);
}

table#grid_swirez .GridRow td {
    background-color: var(--white);
}

table#grid_swirez .GridRow tr:nth-child(odd) td {
    background-color: var(--stone-200);
}

table#grid_swirez thead {
    background-color: var(--white);
}

#grid_swirez td {
    padding: 8px 2px !important;
}

.swi_td div.swi_div {
    background-color: transparent !important;
    border: none !important;
    border-top: 1px solid var(--black) !important;
}

td[style*="width: 35px; vertical-align: top; background-color: rgb(0, 255, 0);"] {
    background-color: var(--green-300) !important;
}

/* GRID — CAPTION */

.Caption tbody {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.Caption th,
.Caption td {
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    text-align: left;
    padding: 2px 2px;
    background-color: var(--bg-html);
    border-top: 1px solid;
    border-right: 1px solid;
    border-color: var(--stone-300);
    color: var(--stone-600);
}

.Caption a {
    color: var(--stone-600);
}

.Caption th a {
    text-decoration: none;
}

/* GRID — ROWS (base) */

.Row > td,
.AltRow > td,
.RowRed > td,
.AltRowRed > td,
.RowOrange > td,
.AltRowOrange > td,
.RowYellow > td,
.AltRowYellow > td,
.RowGreen > td,
.AltRowGreen > td,
.RowBlue > td,
.AltRowBlue > td,
.RowViolet > td,
.AltRowViolet > td,
.RowBlack > td,
.AltRowBlack > td {
    padding: 6px 5px;
    text-align: left;
    vertical-align: middle;
    background-color: var(--white);
}

tr.Row td:nth-child(2)[style*="TEXT-ALIGN: right"] {
    min-width: fit-content;
}

tr.Row td:nth-child(2) br {
    display: none;
    text-wrap: nowrap;
}

.Row > td,
.RowRed > td,
.RowOrange > td,
.RowYellow > td,
.RowGreen > td,
.RowBlue > td,
.RowViolet > td,
.RowBlack > td {
    color: var(--stone-800);
    border-top: 1px solid var(--stone-200);
    border-right: 1px solid var(--stone-200);
}

.AltRow > td,
.AltRowRed > td,
.AltRowOrange > td,
.AltRowYellow > td,
.AltRowGreen > td,
.AltRowBlue > td,
.AltRowViolet > td,
.AltRowBlack > td {
    color: var(--stone-800);
    background: var(--stone-100);
    border-top: 1px solid var(--stone-300);
    border-right: 1px solid var(--stone-200);
}

td[style*="background-color:#DDE"]{
    background-color: var(--violet-100) !important;
}

/* GRID — ROWS (colors) */

tr:has(.redrow) {
    background-color: var(--red-100) !important;
    border-color: var(--red-300) !important;
}

.RowRed > td,
.AltRowRed > td {
    background-color: var(--red-100);
    border-color: var(--red-300);
}

.RowOrange > td,
.AltRowOrange > td {
    background-color: var(--orange-100);
    border-color: var(--orange-300);
}

.RowYellow > td {
    background-color: var(--yellow-100);
    border-color: var(--yellow-300);
}

.AltRowYellow > td {
    background-color: var(--yellow-alt-bg);
    border-color: var(--yellow-300);
}

.RowGreen > td,
.AltRowGreen > td {
    background-color: var(--green-100);
    border-color: var(--green-300);
}

.RowBlue > td,
.AltRowBlue > td {
    background-color: var(--sky-100);
    border-color: var(--sky-400);
}

.RowViolet > td,
.AltRowViolet > td {
    background-color: var(--fuchsia-100);
    border-color: var(--fuchsia-200);
}

.RowBlack > td,
.AltRowBlack > td {
    color: var(--stone-100);
    background-color: var(--stone-700);
    border-color: var(--stone-500);
}

.Row td[style*="text-align:right;white-space:nowrap;background-color:#FFD0B0;"] {
    background-color: var(--orange-100) !important;
}

/* GRID — ROWS (lowprio labels) */

.Row span.lowprio,
.AltRow span.lowprio,
.RowRed span.lowprio,
.AltRowRed span.lowprio,
.RowOrange span.lowprio,
.AltRowOrange span.lowprio,
.RowYellow span.lowprio,
.AltRowYellow span.lowprio,
.RowGreen span.lowprio,
.AltRowGreen span.lowprio,
.RowBlue span.lowprio,
.AltRowBlue span.lowprio,
.RowViolet span.lowprio,
.AltRowViolet span.lowprio {
    color: var(--stone-500);
}

.RowBlack span.lowprio  { color: var(--stone-400); }
.AltRowBlack span.lowprio { color: var(--stone-500); }

/* GRID — SPECIAL ROWS */

table.Grid tr.Error > td,
table.Grid tr.Warning > td {
    padding: 10px 3px;
    text-align: left;
    vertical-align: top;
    background-color: var(--stone-100);
    border-top: 1px solid var(--stone-200);
    border-right: 1px solid var(--stone-200);
}

td.belka {
    font-weight: 700;
}

.td_ID {
    color: var(--stone-300) !important;
}

.NoRecords > td {
    padding: 3px 2px;
    text-align: center;
    vertical-align: baseline;
    color: var(--stone-600);
    background-color: var(--stone-200);
    border-top: 1px solid var(--stone-400);
    border-right: 1px solid var(--stone-400);
}

.Footer > td {
    line-height: 2.7;
    padding: 3px 2px;
    text-align: center;
    vertical-align: baseline;
    color: var(--black);
    border-top: 1px solid var(--stone-300);
    background: var(--stone-50);
}

.Footer img,
.Footer a img {
    vertical-align: middle;
}

/* RECORD FORM */

.Record {
    width: 100%;
    margin-bottom: 12px;
    padding: 30px 10px 10px 10px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--stone-300);
    background-color: var(--stone-50);
}

.Error td,
.Warning td {
    font-weight: bold;
    padding: 0 5px 10px 5px;
    text-align: left;
    vertical-align: top;
}

.Error td {
    color: var(--color-error);
}

.Warning td {
    color: var(--color-warning);
}

div.ignoreWarnings {
    font-weight: normal;
}

#Login .Error td {
    text-align: center;
}

.Controls td {
    padding: 3px 5px 5px 3px;
    text-align: left;
    vertical-align: baseline;
}

.Controls td.th {
    font-weight: normal;
    text-align: right;
}

.Bottom td {
    text-align: right;
    padding: 30px 0 0;
}

.RecordBar td {
    padding: 5px 0;
    text-align: left;
    vertical-align: baseline;
}

div.RecordBar {
    font-size: 15px;
    font-weight: 600;
    background-color: var(--stone-200);
    border: 1px solid var(--stone-300);
    padding: 5px 8px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 

    color: var(--stone-800);
    text-align: left;
    /* border: none; */
}

/* CALENDAR */

table.CalendarControls {
    width: 100%;
}

.CalendarControls td {
    vertical-align: middle;
    line-height: 1.25;
    padding: 2px;
    background-color: var(--stone-50);
}

.CalendarWeekdayName,
.CalendarToday,
.CalendarDay,
.CalendarSelectedDay,
.CalendarWeekend {
    width: 2.5em;
    text-align: center;
    padding: 3px;
    color: var(--stone-700);
    border: 1px solid var(--stone-400);
}

.CalendarToday      { background-color: var(--sky-200); }
.CalendarDay        { background-color: var(--stone-50); }

.CalendarSelectedDay {
    font-weight: bold;
    color: var(--black);
    background-color: var(--sky-300);
}

.CalendarWeekdayName,
.CalendarWeekend {
    background-color: var(--stone-100);
}

/* SEARCH */

div.search {
    margin-bottom: 12px;
    padding: 2px 6px;
    background-color: var(--bg-html);
    border: 1px solid var(--stone-300);
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

div.search .Button {
    margin: 0;
}

div.search span.fname {
    padding: 0 4px 0 12px !important;
    display: inline-block;
    text-align: right;
}

div.search span.fname2 {
    padding: 0 4px 0 6px !important;
    display: inline-block;
    text-align: right;
}

div.search table {
    width: 100%;
}

div.search td,
div.search div.td {
    font-size: 13px;
    padding: 2px;
    vertical-align: baseline;
}

div.search td.bttn {
    width: 10%;
    text-align: right;
    vertical-align: middle;
}

/* FILTR */

table.filtr_kontener {
    box-sizing: border-box;
    width: 100%;
    border: none;
}

td.filtr_etykieta {
    width: 1em;
    white-space: nowrap;
    text-align: left;
    padding: 0 4px 0 12px !important; /* skorelowane z span.fname */
    margin: 0;
    border: none;
}

td.filtr_filtry {
    text-align: left;
    padding: 0;
    margin: 0;
    border: none;
}

span.filtr_filtr {
    display: inline-block;
    font-size: 13px;
    vertical-align: baseline;
    padding: 0;
    margin: 0 6px 2px 0;
    color: var(--filtr-text);
    background-color: var(--sky-700);
    border: 2px solid var(--sky-700);
    border-radius: 10px;
}

a.filtr_link_nazwa {
    color: var(--white);
    line-height: 1;
    padding: 0;
    margin: 0 6px;
    text-decoration: none;
}

a.filtr_link_plus,
a.filtr_link_minus {
    line-height: 1;
    text-decoration: none;
    padding: 0;
    margin: 0 1px 0 2px;
}

a.filtr_link_plus  { color: var(--filtr-plus); }
a.filtr_link_minus { color: var(--filtr-minus); }

a.filtr_link_dodaj {
    margin-left: 1em;
}

/* NAV TABS (ddcolortabs) */

.ddcolortabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.ddcolortabs a[href="#"] {
    cursor: default;
}

.ddcolortabs ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    font-size: 14px;
}

.ddcolortabs li {
    float: left;
    display: inline;
    margin: 0;
    padding: 0;
}

.ddcolortabs a {
    float: left;
    font-weight: 600;
    margin: 0;
    padding: 6px 15px;
    text-decoration: none;
    border-right: 1px solid var(--stone-100);
    color: var(--stone-800);
    transition: all 0.2s ease-in-out;
}

.ddcolortabs a:hover {
    color: var(--stone-800);
    text-decoration: none;
    background-color: var(--stone-200);
}

.ddcolortabsline {
    clear: both;
    padding: 0;
    width: 100%;
    height: 8px;
    line-height: 8px;
    background: var(--stone-500);
    border-top: 1px solid var(--stone-500); /* remove to hide border between bar and tabs */
}

.zalogowany {
    text-align: right;
    text-wrap: nowrap;
}

/* DROPDOWN MENU */

.dropmenudiv_a {
    position: absolute;
    top: 0;
    border: 1px solid var(--stone-200);
    line-height: 160%;
    z-index: 100;
    background-color: var(--stone-50);
    width: 250px;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dropmenudiv_a a {
    text-decoration: none;
    color: var(--stone-800);
    text-align: left;
    font-weight: 600;
    width: auto;
    padding: 2px 2px 2px 10px;
    display: block;
    text-indent: 5px;
    transition: background 0.2s ease;
    font-size: 14px;
}

.dropmenudiv_a a.separator {
    padding: 0;
    margin: 0;
    height: 2px;
    line-height: 0;
    background: var(--stone-100);
}

.dropmenudiv_a a:hover,
.dropmenudiv_a a.separator:hover {
    color: var(--stone-800);
    text-decoration: none;
    background-color: var(--stone-200);
}

/* JQUERY UI TABS */

.ui-widget-content.ui-tabs {
    background-color: transparent;
    border: none;
    min-height: 60vh;
}

.ui-widget-header {
    border: none;
    border-bottom: 2px solid var(--sky-600);
    background: transparent;
    border-radius: 0;
}

.ui-tabs .ui-tabs-nav {
    padding: .2em 0 0;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border-color: var(--sky-600) !important;
    background-color: var(--white) !important;
    transition: background 0.2s ease-in-out;
    border: none;
}

.ui-state-default a:link {
    color: var(--sky-600) !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border-color: var(--sky-600) !important;
    background-color: var(--sky-100) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 2px solid var(--sky-600);
    background: var(--white);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 1px;
    margin-bottom: -2px;
    background-color: var(--white) !important;
}

.ui-tabs .ui-tabs-panel {
    padding: 1em;
    border: 2px solid var(--sky-600);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

/* MENU3 */

div.menu3 ul {
    display: flex;
    flex-direction: row;
    margin: 0 0 10px 0;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    background-color: var(--stone-200);
}


div.menu3 li a {
    color: var(--stone-800);
    font-weight: 600;
    text-decoration: none;
    padding: 5px 10px;
    transition: background 0.2s ease;
}

#link_menuklient_main,
#link_menuklient_main:hover {
    color: var(--stone-800) !important;
    background-color: var(--stone-300);
}

div.menu3 li a:hover {
    background-color: var(--stone-300);
}

/* UTILITIES */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}