:root {
    /*--main-color: red;*/
    --main-color: #f56b06;
    --main-dark: #222;
    --bs-dark: #212529;
    --white: #fff;
    --muted-links: gray;

    --top-bar-color: #fd8c00;
    --banner-background-light: #e96c0b;
    --banner-background: #e96709;
    --banner-dark: #cd5a06;
    --banner-light: #f56b06;
    --header-rectangle-width: 3px;
    --header-rectangle-height: 17px;
}

.main-text { color: var(--main-color) !important }
.wronba-bg{ background-color: var(--main-color) !important }
a{color: var(--main-dark);text-decoration: none;transition: all .2s;}
a:hover{ color: var(--main-color) !important; }
.wronba-font{font-family: 'Bree Serif', serif;text-transform: uppercase !important;font-weight: bold;letter-spacing: .25px;}
section.section{ margin-top: 3rem; margin-bottom: 1.5rem; }
/**
* screens
 */
@media (max-width: 992px) {
    h3 { font-size: 85%; }
    .mobile-to-right { display: flex; justify-content: flex-end; }
}
/*
* header
*/
header .img-logo {height: 70px;margin-top: 5px;margin-bottom: -7px;}
@media (min-width: 992px) {
    header{ margin-bottom: -12px; } /* w zależności od height dla header .img-logo   */
}
header{
    margin-top: 8px;
    margin-bottom: 5rem;
    background-image: linear-gradient(to left, var(--banner-background-light), var(--banner-light), var(--banner-dark));
}
header h1{
    font-size: 225%;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
}
@media (max-width: 1200px) { header h1 { font-size: 200%; }}
@media (max-width: 992px) { header h1 { font-size: 170%; }}
@media (max-width: 824px) { header h1 { font-size: 150%; }}
/*.container-xxl { overflow-x: hidden !important; }*/

header p.season{
    font-size: x-large;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
header .season-desc{
    background: var(--banner-dark);
    padding: 15px 50px;
    transform: skew(-4deg);
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    transition: .3s;
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.05);
}
header .season-desc:hover{
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.3);
    background: var(--bs-dark);
}

@media screen and (max-width: 768px) {
    header .container{ padding: 15px !important; }
    header .container .row{ padding: 10px !important; }
    header h1{ letter-spacing: 0px; }
    header .season-desc{ padding: 5px 20px; font-size: x-small }
    header .img-fluid { max-width: 130px !important }
    header .logo-container{ height: 164% !important; padding: 10px !important; }
    header .img-logo { height: 30px; }
    header h1 { font-size: 100%; }
    header .navbar-toggler { border: 2.5px solid var(--main-dark) !important;}
    header h1 > div { padding-bottom: 7px !important;}
}
@media screen and (max-width: 420px) {
    header { margin-top: 0; }
    header h1 { font-size: 75%; }
    header img{scale: .8; margin-left: 25px; margin-top: -5px !important}
}
.main-nav-sticky-top { position: absolute; top: 188px; left:0; right: 0; z-index:1041; /*z-index:1200 - modal, dod zaw*/ }
@media (max-width: 894px) { .main-nav-sticky-top { top: 186px; }}
@media (max-width: 768px) { .main-nav-sticky-top { top: 100px; }}
@media (max-width: 420px) { .main-nav-sticky-top { top: 90px; }}

header .left-section > div{ height: 100%; }
/*header .img-logo{ width: 250px; }*/
header .img-logo{ scale: 3.6; padding: 5px }
header .logo-container{
    background: var(--banner-light);
    transform: skew(-4deg);
    height: 110%; /*to powoduje pasek*/
    display: flex;
    align-items: center;
}
header .logo-container .img-logo{transform: skew(4deg)}

header .rectangle {position: relative;width: 100%;}
header .rectangle::before,
header .rectangle::after,
header .rectangle .top-left::before,
header .rectangle .top-left::after,
header .rectangle .bottom-left::before,
header .rectangle .bottom-left::after,
header .rectangle .top-right::before,
header .rectangle .top-right::after,
header .rectangle .bottom-right::before,
header .rectangle .bottom-right::after {
    content: "";
    position: absolute;
    background-color: white;
    z-index: 1000;
}
header .rectangle .top-left::before {
    top: 0;
    left: 0;
    height: var(--header-rectangle-width);
    width: var(--header-rectangle-height);
}
header .rectangle .top-left::after {
    top: 0;
    left: 0;
    height: var(--header-rectangle-height);
    width: var(--header-rectangle-width);
}
header .rectangle .bottom-left::before {
    height: var(--header-rectangle-width);
    width: var(--header-rectangle-height);
    bottom: 0;
    left: 0;
}
header .rectangle .bottom-left::after {
    bottom: 0;
    left: 0;
    height: var(--header-rectangle-height);
    width: var(--header-rectangle-width);
}
header .rectangle .top-right::before {
    top: 0;
    right: 0;
    height: var(--header-rectangle-width);
    width: var(--header-rectangle-height);
}
header .rectangle .top-right::after {
    height: var(--header-rectangle-height);
    width: var(--header-rectangle-width);
    top: 0;
    right: 0;
}
header .rectangle .bottom-right::before {
    bottom: 0;
    right: 0;
    height: var(--header-rectangle-width);
    width: var(--header-rectangle-height);
}
header .rectangle .bottom-right::after {
    bottom: 0;
    right: 0;
    height: var(--header-rectangle-height);
    width: var(--header-rectangle-width);
}

header .red-bar{
    background: var(--main-color);
    height: 8px;
    z-index: 1045;
}
header .red-bar-margin{
    margin-top: 8px;
}

header nav{
    border-bottom: 1px solid #666;
    margin-bottom: .5rem;
}

@media screen and (max-width: 992px) {
    header button.navbar-toggler {
        border-radius: 0 !important;
    }
}

/*
* main
*/
main{ margin-top: 55px;}
@media (max-width: 1199px) { main{ margin-top: 61px; }}
@media (max-width: 900px)  { main{ margin-top: 70px !important; }}
@media screen and (max-width: 500px) { main{ margin-top: 45px; }}

/*
* start site
*/
section.start-slider a{
    color: var(--muted-links);
    text-decoration: none;
}
section.start-slider span{
    color: var(--muted-links);
    text-decoration: none;
    font-size: smaller;
    margin-left: 10px;
}

@media (max-width: 1173px) {
    section#sponsoring a span { display: block; }
}
@media screen and (max-width: 767px) {
    section#sponsoring a span { display: initial;}
}

section#partnerzy .slide{
    padding: 3.5rem;
    display: inline-block;
    border: 1px solid black;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: .3s ease-in-out;
}
section#partnerzy .slide:hover{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
section#partnerzy .slide i{
    font-size: 4.5rem;
    border: none;
}
@media screen and (max-width: 1173px) {
    section#partnerzy .slide i{
        font-size: 3rem;
    }
    section#partnerzy .slide{
        padding: 2rem;
    }
}
@media screen and (max-width: 696px) {
    section#partnerzy{
        margin-top: 0rem !important;
        margin-bottom: 0rem !important;
        text-align: center !important;
    }

    section#partnerzy h2{
        margin-bottom: 10px !important;
    }

    section#partnerzy .slide svg{
        width: 75px;
        height: 75px;
    }

    section#partnerzy .slide{
        padding: 12%;
    }

    section#partnerzy > div{
        display: block !important;
        margin: 0 auto !important;
    }

    section#partnerzy .slide {
        margin-bottom: 15px !important;
    }
    section#partnerzy .slide:nth-child(odd) {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }
}
/*
* footer
*/
footer .red-bar{
    background: var(--main-color);
    height: 3px;
}
footer a{
    color: var(--white);;
}
ul.red-dots {
    padding-left: 0;
}
ul.red-dots li {
    list-style:none;
}
ul.red-dots li:before {
    color: var(--main-color);
    content:"\25AA";
    font-size: 15px;
    padding-right: 15px;
    position:relative;
    top: -2px;
}
footer .second-column{
    display: flex;
    justify-content: center;
}
footer .third-column{
    text-align: end;
}
footer .third-column p{
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    footer .first-column{
        text-align: center;
    }
    footer .first-column > p:nth-child(1),
    footer .first-column > p:nth-child(2){
        font-size: larger;
        font-weight: 1000;
    }
    footer .second-column{
        justify-content: start;
    }
    footer .second-column > div{
        width: 100%;
    }
    footer .third-column{
        text-align: initial;
    }
    footer .col-md-4{
        margin-bottom: 1rem;
    }
    footer .first-column::after,
    footer .third-column::before {
        content: '';
        display: block;
        height: 2px;
        background: var(--main-color);
        position: relative;
        width: 60%;
        left: 20%;
    }
    footer .first-column::after {
        top: -10px;
    }
    footer .third-column::before {
        top: -15px;
    }
    footer .cookies p{
        text-align: justify !important;
    }
}
/*
* aside
*/
aside h4{
    text-align: center;
    font-size: 1.25rem;
}
aside h4 a{
    color: var(--main-color);
}

aside.wronba ul li{
    border-left: none !important;
    border-right: none !important;
}
aside.wronba section.sponsorzy{
    text-align: end;
}
@media screen and (max-width: 991px) {
    section.sponsorzy{
        text-align: center;
    }
}
/*
* blog
*/
aside.blog h6, aside.blog h6 a, aside.blog a.btn, aside.blog label {
    color: var(--main-color) !important;
    font-family: 'Bree Serif', serif;
    text-transform: uppercase !important;
    font-weight: bold;
    letter-spacing: .25px;
    font-size: initial;
}
aside.blog a.btn{
    font-weight: normal;
    color: var(--main-dark) !important;
}
aside.blog a.btn:hover{
    color: var(--white) !important;
}
section.blog-images {
    font-family: 'Bree Serif', serif;
    text-transform: uppercase !important;
    font-weight: bold;
    letter-spacing: .25px;
}
section.posts_list {
    font-family: 'Bree Serif', serif;
    text-transform: uppercase !important;
    font-weight: bold;
    letter-spacing: .25px;
}
aside.blog form .btn{
    background-color: var(--main-dark) !important;
    color: var(--white);
    border: none;
}
aside.blog form .btn:hover {
    color: var(--white);;
}
aside.blog ul{
    font-family: 'Bree Serif', serif;
    letter-spacing: .25px;
    text-transform: uppercase !important;
}
aside.blog {
    border: 1px solid #444;
}
/*
 * aside
*/
aside.blog h6{
    text-transform: uppercase !important;
    margin-bottom: 0.3rem;
    z-index: 1;
    margin-top: 1rem;
    color: #444;
}
aside.blog label {
    font-size: larger;
    font-weight: 300;
}
aside.blog h6 a{
    text-decoration: none;
    color: #444;
}
aside.blog a{
    border-radius: 0 !important;
}
aside.blog h6 span::after {
    content: '';
    display: block;
    height: 14px;
    width: 105px;
    width: 84%;
    background: #ccc;
    position: relative;
    top: -14px;
    left: 12%;
    opacity: .185;
    margin-bottom: -18px;
}
aside.blog ul{
    font-size: smaller;
}
aside.blog ul li{
    border-left: none !important;
    border-right: none !important;
    display: flex !important;
    justify-content: space-between;
}
aside.blog ul li a{
    text-decoration: none;
    color: #444;
}

/*
* Blog image header
*/
.blog-header-image .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blog-header-image img {
    object-fit: cover;
    opacity: 0.6;
    width: 100%
}
.blog-header-image {
    position: relative;
    background: black;
    overflow: hidden;
}
article.blog-show .top-right {
    position: absolute;
    top: 0%;
    right: 0%;
}

/*
* blog images
* https://www.w3schools.com/howto/howto_css_image_text.asp
*/
section.blog-images .blog-header-image .top-right {
    position: absolute;
    top: 0%;
    right: 0%;
}
section.blog-images a:hover .title{
    opacity: 1 !important;

}
section.blog-images a:hover .tagi{
    opacity: 1 !important;
}
section.blog-images a:hover img{
    opacity: 1 !important;

}
section.blog-images .tagi,
article.blog-show .tagi  {
    background: var(--main-color);
    opacity: 1;
    padding: .6rem;
    color: white;
    font-weight: bolder;
    transition: .2s ease-in-out;
    margin-left: 5px;
}
@media screen and (max-width: 576px) {
    section.blog-images .tagi,
    article.blog-show .tagi {
        padding: .2rem;
        font-size: 80%;
    }
}
section.blog-images .tagi a,
article.blog-show .tagi a {
    color: white;
    margin-right: 10px;
}
section.blog-images .bottom {
    position: absolute;
    bottom: 0;
}
section.blog-images .title {
    background: #222;
    opacity: .8;
    display: block;
    width: 100%;
    padding: 1rem;
    color: white;
    transition: .2s ease-in-out;
}
section.blog-images  img {
    opacity: .9;
    transition: .2s ease-in-out;
}

/*
 * next / prev
*/
section.next-prev a span{
    color: white;
    line-height: 100%
}
section.next-prev a svg{
    color: white;
    min-width: 32px;;

}
section.next-prev a:hover {
    color: white !important;
}
section.next-prev a:hover {
    color: white !important;
}

section.next-prev a div {
    min-width: 250px;
    background-color: var(--main-color);
    padding: 8px 16px;
    height: 100%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 24px 24px;
}

section.next-prev a .left-section {
    transform: skew(3deg);
}
section.next-prev a .right-section {
    transform: skew(-3deg);
}

/*
* ELEMENTS
*/
.wronba-btn-dark
{
    display: inline-block;
    transform: skew(-4deg);
    padding: 10px 14px;
    background: var(--main-dark);
    color: var(--white);
}
@media screen and (max-width: 992px) {
    .wronba-btn-dark
    {
        padding: 6px 8px;
        margin: 1px;

    }
}
.wronba-btn-dark:hover{
    color: var(--white) !important;
}
.wronba-btn-red
{
    border: none;
    display: inline-block;
    transform: skew(-4deg);
    padding: 10px 14px;
    background: var(--main-color);
    color: var(--white);
}
@media screen and (max-width: 992px) {
    .wronba-btn-red
    {
        padding: 6px 8px;
        margin: 1px;
    }
}
.wronba-btn-red-sm
{
    border: none;
    display: inline-block;
    transform: skew(-4deg);
    padding: 6px 9px;
    background: var(--main-color);
    color: var(--white);
    font-size: 80% !important;
}
.wronba-btn-red:hover{
    color: var(--white) !important;
}
.wronba-btn-red-sm:hover{
    color: var(--white) !important;
}
.orange-border{
    border: 1px solid var(--main-color) !important;
}

/*
* DARK MOODE
*/
.dark-mode {
    background: #222;
    color: gray !important;
}
.dark-mode nav.navbar{
    background: black !important;
}
.dark-mode nav.navbar a{
    color: white !important;
}
.dark-mode nav.navbar a:hover{
    color: var(--main-color) !important;
}
.dark-mode nav a.dropdown-item{
    color: #222 !important;
}
.dark-mode nav .dropdown-menu{
    background: #777 !important;
}
.dark-mode header h1 span, .dark-mode header h1 .h1-title {
    color: var(--main-color) !important;
}
.dark-mode .carousel-caption{
    background: black;
}
.dark-mode .sponsoring a {
    color: var(--main-color) !important;
}
.dark-mode .sponsoring .icon-wrapper{
    border-color: #555 !important;
}
.dark-mode #partnerzy  svg {
    color: darkgray;
}
.dark-mode #partnerzy  h2 {
    color: darkgray !important;
}
.dark-mode .card {
    box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 16px !important;
    border: black
}
.dark-mode section {
    color: white;
}
.dark-mode .sponsoring{
    border: 1px solid gray;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 16px !important;
}
.dark-mode .card .card-footer {
    color: lightgray !important;
}
.dark-mode aside h4 , .dark-mode aside h4 a{
    color: var(--main-color) !important;
}
.dark-mode aside{
    background: #111 !important;
}
.dark-mode aside ul li{
    background: #111 !important;
}
.dark-mode aside div{
    color: white !important;
}
.dark-mode aside ul li a, .dark-mode aside ul li svg{
    color: white !important;
}
.dark-mode aside ul li a:hover{
    color: var(--main-color) !important;
}
.dark-mode aside ul li div {
    color: white !important;
}
.dark-mode aside ul li:hover div {
    color: var(--main-color) !important;
}
.dark-mode aside li {
    border-bottom: 1px solid #555;
}
.dark-mode .card {
    background: #333 !important;
    color: lightgray !important;
}
.dark-mode .card a {
    color: lightgray !important;
}
.dark-mode h2, .dark-mode a h2 {
    color: var(--main-color) !important;
}
.dark-mode h3 {
    color:  white;
}
.dark-mode .nav-tabs .nav-link{
    background: #222 !important;
}
.dark-mode .nav-tabs a.active{
    background: #111 !important;
    border: 1px solid #444;
}
.dark-mode textarea, .dark-mode input {
    background: #444 !important;
    color: lightgray !important;
}
.dark-mode table td {
    background: #333 !important;
    color: lightgray !important;
}
.dark-mode table th {
    background: #222 !important;
    color: lightgray !important;
}
.dark-mode table span{
    color: lightgray !important;

}
.dark-mode table thead tr th {
    background: #222 !important;
    color: lightgray !important;
}
.dark-mode .ui-datepicker td  {
    background-color: black !important;
}
.dark-mode .ui-datepicker .ui-state-default
{
    color: black !important;
    background-color: black !important;
}
.dark-mode .wronba-btn-red {
    color: white !important;
}
.dark-mode .btn-outline-dark {
    color: white !important;
    border-color: lightgrey;
}
.dark-mode .text-muted {
    color: lightgrey !important;
}

/* html {
    background-color: #171717 !important;
}
html {
    filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
    -webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
}
body {
    background-color: #FFF !important;
}
img,
video,
body * [style*="background-image"] {
    filter: hue-rotate(180deg) contrast(100%) invert(100%);
    -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
}

.dark-mode header, .dark-mode footer{
    background: white !important;
    color: black !important;
}
.dark-mode footer a{
    color: black !important;
}
.dark-mode .start-slider{
    background: white !important;

}
.dark-mode header .h1-title {
    color: red !important;
} */

/*
 * WRONBA - BOOTSTRAP CUSTOMIZE
 */

.carousel-caption {
    bottom: 0 !important;
    left: 0 !important;
    opacity: .85;
    width: 100% !important;
    background: #222;
}
.nav-tabs .nav-item button.nav-link{
   border-radius: 0;
}
.nav-tabs .nav-item button{
    color: #222 !important;
}
.nav-tabs .nav-item button.active{
    color:  var(--main-color) !important;
}
.wronba-table thead tr{
    border-radius: 3px !important;
    border-left: 3px solid  var(--main-color) !important;
}
.wronba-table thead tr th{
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: larger;
    font-family: 'Bree Serif', serif;
    text-transform: uppercase !important;
    font-weight: bold;
    letter-spacing: .25px;
}
.wronba-table tbody th{
    font-family: 'Bree Serif', serif;
    text-transform: uppercase !important;
    font-weight: bold;
    letter-spacing: .25px;
}

.statistics-table{
    overflow-x: auto;
}
.statistics-table th, td {
    vertical-align: middle;
}
.statistics-table th {
    font-weight: 800;
    font-size: small;
    color: var(--main-color) !important;
}
.stat-tbl-block-first-row th:nth-child(1), .stat-tbl-block-first-row td:nth-child(1)
{
    position:sticky;
    left:0px;
}
.stat-tbl-block-second-row th:nth-child(2), .stat-tbl-block-second-row td:nth-child(2)
{
    position:sticky;
    left:0px;
}
#main-nav {
    /* font-size: large; */
    /* transition: .2s ease-in-out; */
}
@media screen and (max-width: 992px) {
    #main-nav {
        /* margin-top: 138px; */
    }
}
.blink-item{
    color: #fff;
    border: 1px solid var(--main-color);
    width: 14px;
    height: 14px;
    /*display: inline-block;*/
    animation: blinkingBackground 1.5s infinite;
    /*margin-bottom: -2px;*/
}
@keyframes blinkingBackground{
    0%		{ background-color: var(--main-color);}
    25%		{ background-color: var(--main-color);}
    /*50%		{ background-color: white;}*/
    75%		{ background-color: white;}
    100%	{ background-color: white;}
}
.input-disabled {
    background-color: #e0e0e0;   /* Jasnoszary kolor tła */
    color: #a0a0a0;               /* Szary kolor tekstu */
    border: 1px solid #ccc;       /* Szara ramka */
    cursor: not-allowed;          /* Zmienia kursor na 'not-allowed' */
    pointer-events: none;         /* Blokuje interakcję z elementem */
}
.team-spadek-legend {
    height: 3px;
    width: 50px;
    background: var(--main-color);
    display: inline-block;
    margin-bottom: 3px;
}
.team-awans-legend {
    height: 3px;
    width: 50px;
    background: dodgerblue;
    display: inline-block;
    margin-bottom: 3px;
}
.score-scroll-btn-prev-next{
    width: 35px;
    height: 97% !important;
}
.score-scroll-btn-prev-next:focus{
    opacity: .4;
}
@media screen and (max-width: 768px) {
    .score-scroll-card-item {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

.page-item.active .page-link { background-color: var(--main-color);border-color: var(--main-color);color: #fff;}
.page-link { color: var(--main-color);}
.page-link:hover { background-color: var(--main-color);color: #fff !important;border-color: var(--main-color);}