:root {

    --new: #ffbf00;
    --new-back: #fff8e0;
        --new-back-excel: #fff4d2;
    
    --black: #000a0d;
    --gray0: #10171a;
    --gray1: #1e2a2f;
    --gray2: #2b363c;
    --gray3: #3b464c;
    --gray4: #4c575e; /* start-bar */
    --gray5: #858f95; /* table header i end-bar */
    --gray6: #bac4ca; /* bordery i podświetlenie zaznaczenia */
        --gray6b: #d3dee3;  /* hover przycisków #d0dee3*/
                        --gray6c: #cad4db;  /* disabled*/
    --gray7: #e5edf0; 
    --gray8b: #e6ecf0; /* minimalnie ciemniejszy akcent */
    --gray8: #f3f8fb; /* co drugi wiersz tabel */
    --gray9: #f7f7f7; /* minimal */

    --white: #ffffff; /* backdrop */

    --color1: #00394c;
    --color1b: #4d8a9e;
    --color2: #006687;
    --color3: #0098cb;
    --color4: #00c9bc; /* frame highlight */
        --color4b:#009288; /* frame highlight */
        --color4c:#00ff9f;
        --color4-back: #e1fffd;
    --color5: #62e2ff;
    --color6: #9eedff;
    --color7: #d8f8ff;
        --color8: #effffe; /* edited */

    --font1: #ed0077; /* katalog */
        --font1b: #e67cb1; /* katalog */
    --font2: #308d33; /* discounts */
    --font2b: #52b700; /* discounts background #4daa00;*/
    --font3: rgb(255, 119, 0); /* special price */
    --font4: #009384; /* minimal price */

    --error: #ff3c00; /* err */
    --error2:rgb(178, 41, 0);
    --warning: #ffa200; /* warn */
    --warning-back: #fffeef; /* warn */
         --warning-back-hov: #fffdde; /* warn */
    --error-back: #fff5f1;
        --error-back-hov: #ffefe9;

    --log1: #9fb3b9; /* log gray6 */
    --log2: #00778f; /* log color3 */
    --log3: #00778f; /* log color3 */
    --log4: #2ec0c5; /* log repair color4*/
    --log5: #ffa200; /* log error */
    --log6: #ff5100; /* log crashed */

        --back1: #d8ffef; /* back success */
        --back2: #ffeada; /* back error */
        --back3: #fffeda; /* back alert */

        --col1: #004860;
        --col2: #0098cb;
        --col3: #00caa8;
        --col4: #31814c;
        --col5: #ff9100;
        --col6: #bf2f2f;
        --col7: #9238a2;
        --col8: #5b00cb;
        --col9: #383838;
        --col10: #383838;

}

    .tableheader{
        padding: 4px 7px !important;
        text-align: center;
        font-weight: 500;
        font-size: 11px;
        color: var(--white);
        background: var(--color2);
        position: relative;
        line-height: 1.1;
        border-right: 0px solid var(--gray6);
        min-height: 14px;
        height: 20px;
    }

        .tableheader:hover{
            background: var(--color1);
            cursor: pointer;
        }
    /* Styles dla Connect Bar */
#connbar {
    background: linear-gradient(to right, var(--color1), var(--color2), var(--color3), var(--color2),  var(--color1));
    padding: 0;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

#framework-leftframe-navigation li.active a {
    background-color: var(--gray7);
}

#framework-leftframe-navigation li.active img {
    filter: invert(1);
}

#framework-leftframe-navigation li.active.no-invert img {
    filter: none;
}
.connbar-nav a.active img{
    filter: invert(1);
}
.connbar-nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
}
.connbar-nav .admin a{
text-decoration: none;
}
.dropdown-content {
    background-color: var(--color1);
    border: 1px solid var(--color3);
}
.dropdown-content a:hover {
    background-color: var(--color3);
}
.dropdown-content a {
    border-bottom: 1px solid var(--color2);
}
#toolbox-content{
    backdrop-filter: blur(3px);
    background: rgba(255, 255, 255, 0.5)
}
#framework-center-content.bg-pricelist {
    background: transparent;
}
#framework-center-content.bg-catalog {
}

#framework-center-content h1{
font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 50px;
  color: var(--color1);
  margin: 0;
  padding: 0;
    padding-bottom: 0px;
  padding-bottom: 12px;
  width: auto;
  text-align: left;
  padding-right: 25px;
  padding-left: 150px;
  line-height: 50px;
}
#framework-center-content.bg-office {
    background-image: url('../sysgraph/drop1.jpg');
    background-size: 250px auto;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.blurback {
    backdrop-filter: blur(3px);
    background: rgba(255, 255, 255, 0.5);
}