*:focus-visible {
  outline: 2px dashed #64ab97;
  outline-offset: 2px;
  transition: outline 0.1s ease, box-shadow 0.1s ease;
  z-index: 9999;
}

body {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=1 );
    color: #000000;
    font-family: 'Inter';
    text-align: center;
    letter-spacing: -0.2px;
    cursor: default;
}

.nicEdit-main::selection {
    background: #0086c3 !important;
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
}

p,
span,
div,
ol,
ul,
li,
td,
button,
input,
textarea,
form {
    margin: 0;
    padding: 0;
}

img {
    margin: 0 auto;
}

a {
    color: #c8d7eb;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
}
a:active {
    color: #c8d7eb;
}
a:hover,
a:focus {
    color: #376bad;
    text-decoration: none;
}

.box5 {
    position: relative;
    width: 3%;
    padding: 1%;
    min-height: 10px;
    float: left;
    box-sizing: border-box;
}
.box10 {
    position: relative;
    width: 8%;
    padding: 1%;
    min-height: 10px;
    float: left;
    box-sizing: border-box;
}
.box20 {
    padding: 1%;
    text-transform: none;
    color: #090223;
}
.box25 {
    position: relative;
    width: 23%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}
.box33 {
    position: relative;
    width: 31%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}

.box50 {
    position: relative;
    width: 48%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}
.box60 {
    position: relative;
    width: 58%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}
.box66 {
    position: relative;
    width: 64%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}
.box70 {
    position: relative;
    width: 68%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}
.box75 {
    position: relative;
    width: 73%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}
.box80 {
    position: relative;
    width: 78%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}
.box90 {
    position: relative;
    width: 88%;
    padding: 1%;
    min-height: 20px;
    float: left;
    box-sizing: border-box;
}
.box100 {
    display: flex;
    justify-content: space-around;
    padding: 0.5%;
}

.sekcja {
    width: 100%;
    display: inline-block;
}

.box_aktualnosci {
    min-height: 60px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
    padding: 1% 3%;
    margin-bottom: 12px;
    background: #fff url(https://pascal.edu.pl/newstlo.png) no-repeat scroll
        left bottom;
    border-style: solid;
    border-color: #f9f9f9;
    border-width: 2px;
    overflow: hidden;
}

.box_aktualnosci > .box100 {
    min-height: 60px;
    padding-bottom: 20px;
    z-index: 1;
}
.box_aktualnosci > .box100 > h4 {
    font-size: 24px;
    letter-spacing: -1px;
    color: #0086c3;
    width: calc(100% - 114px);
    margin: 12px 10px 20px 0px;
    text-align: left;
    line-height: 30px;
    float: left;
}
.box_aktualnosci > .tresc {
    left: 0px;
    background: none;
}
.box_aktualnosci > .tresc > img,
.box_aktualnosci > .tresc > p > img,
.box_aktualnosci > .tresc > div img {
    max-width: 250px !important;
    height: auto !important;
    background-size: 100px 100px;
    border-radius: 5px;
    margin: 10px;
    transition-duration: 0.6s;
    animation-timing-function: ease;
}
.box_aktualnosci > .tresc > img:hover,
.box_aktualnosci > .tresc > p > img:hover,
.box_aktualnosci > .tresc > div img:hover {
    transform: scale(1.7);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    transition-duration: 0.3s;
}

.box_aktualnosci > .box100 > .data {
    width: 75px;
    height: 90px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    float: right;
    border-radius: 10px;
    background: red;
    color: #fff;
    overflow: hidden;
    font-size: 12px;
    padding: 4px 0px 0px 0px;
}

.box_aktualnosci > .box100 > .data > .kalendarzdol {
    background-image: linear-gradient(#fff, #ccc);
    color: #646464;
    padding: 4px 0px 10px 0px;
}

.zamknij-okno {
    background-image: url('grafika/zamknij.png');
    width: 18px;
    height: 18px;
    background-repeat: none;
    background-size: contain;
    background-position: center center;
    display: block;
    cursor: pointer;
    float: right;
    margin: 2px;
}

.zamknij-baner-reklama {
    width: 20px;
    height: 20px;
    background: lightgray;
    border-radius: 9999px;
    color: #797979;
    position: fixed;
    right: 4px;
    bottom: 47px;
    z-index: 1000;
    cursor: pointer;
}

.baner-reklama {
    background: white;
    width: 350px;
    height: 60px;
    position: fixed;
    z-index: 999;
    right: 10px;
    bottom: 0px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px 0px 0px 0px;
    background-size: contain;
}
.baner-reklama:hover,
.baner-reklama:focus {
    filter: brightness(1.1);
}

textarea {
    font-family: inherit;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition-duration: 0.1s;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='number'],
input[type='datetime-local'],
input[type='radio'],
input[type='file'],
input[type='search'],
select {
    font-family: inherit;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition-duration: 0.1s;
}

#aktywny,
#nieaktywny {
    width: auto;
    margin: 5px 20px 0;
}

input[type='text']:hover,
input[type='text']:focus,
input[type='textarea'],
input[type='password']:hover,
input[type='password']:focus,
select:hover,
select:focus {
    transform: scale(1);
}

input[type='text']:focus,
input[type='textarea'],
input[type='password']:focus,
select:focus {
    transform: scale(0.97);
}

input[type='submit'] {
    position: relative;
    min-width: 150px;
    text-decoration: none;
    display: inline-block;
    height: 44px;
    margin: 5px 0px;
    border-radius: 4px;
    transition-duration: 0.1s;
    font-size: 18px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    margin: 25px auto 15px;
    padding: 0 1rem;
    background-color: #3f3dec;
    color: #ececfd;
    text-transform: none;
    font-weight: 500;
    box-shadow: none;
}

input[type='submit']:hover,
input[type='submit']:focus {
    background-color: #ececfd;
    color: #3f3dec;
}

input[type='radio']:checked {
    min-width: auto;
    display: inline-block;
    color: #000;
    background: #88dd11;
    padding: 9px 7px;
    text-align: center;
    cursor: pointer !important;
    border-radius: 4px;
    margin: 3px 5px;
}

#pesel {
    text-align: center;
    font-size: 26px;
}

.radio input[type='radio'] {
    display: none;
    /*removes original button*/
}

.radio label:before {
    /*styles outer circle*/
    content: ' ';
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    background-color: transparent;
}

.radio label {
    position: relative;
    float: left;
    min-width: 59px;
    display: inline-block;
    margin: 2px;
    cursor: pointer !important;
    background: #ffb700;
    color: #fff;
    padding: 4px 15px;
    line-height: 21px;
    border-radius: 2px;
    text-shadow: 0px 1px 0px #5f5f5f;
    box-shadow: 0px 2px 0px #8c6500;
}

.radio label:hover,
.radio label:focus {
    filter: contrast(0.8);
}

.radio label input[type='radio']:checked + span {
    /*styles inside circle*/
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    background-image: url('https://sluchacz.pascal.edu.pl/grafika/ikony/checkb.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 0;
    box-shadow: 0px 2px 0px white inset, 0px 3px 0px #ffd466;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 134, 194);
    z-index: 9999999;
    background: white;
}
#preloader > .logo {
    display: block;
    width: 100%;
    height: 100px;
    background: url('/grafika/nowe-logo-dark-duze.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: fixed;
    top: 25%;
}
#preloader #preloaderobraz {
    position: relative;
    margin: 0 auto;
    top: calc(50% + 60px);
    left: 0px;
    border: 10px solid #fff;
    border-top-color: rgb(255, 255, 255);
    border-top-style: solid;
    border-top-width: 10px;
    border-top: 10px solid #6ec1a4;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: ladowanie 1s linear infinite;
}

@keyframes ladowanie {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.preloadertext {
    position: relative;
    top: 55%;
    margin: 0 auto;
    font-size: 40px;
    font-weight: 300;
    text-align: center;
}

.formularz-klienta {
    margin-bottom: 150px;
    display: flex;
    justify-content: center;
}

#loginModal {
    width: 100%;
    height: 100%;
    padding-top: 120px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    overflow: auto;
    display: none;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.tresc {
    width: 100%;
    position: relative;
}

#tresc {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin: 0 45px;*/
}

.stopka {
    font-size: 12px;
    text-align: left;
    padding: 2px 76px;
    margin-top: 60px;
}
.stopka2 {
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    padding: 20px 76px 4px;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: #ddd;
    margin: 21px auto 5px;
}

.naglowek_tresc {
    position: sticky;
    display: block;
    width: 100%;
    height: 40px;
    text-align: left;
    line-height: 37px;
    box-sizing: border-box;
    top: 50px;
    z-index: 10;
}

.naglowek_tresc > img {
    width: 35px;
    height: auto;
    float: left;
    margin: 0px 16px 0px 10px;
    padding: 5px 0;
}

.img-fluid.atto_image_button_text-bottom {
    width: 150px;
    object-fit: contain;
}

.naglowek_wiersz {
    background-color: #0086c3;
    border-radius: 10px 10px 0px 0px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    border-width: 0px;
    color: #fff;
    height: 45px;
    margin-top: 30px;
}

.grafika_upload {
    background-image: url('grafika/upload.png');
    width: 35px;
    height: 35px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin: 0px 20px;
}
.przycisk_upload {
    padding: 8px 15px 4px 15px;
    color: #555;
    border-color: #ccc;
    background: #f6f6f6;
    box-shadow: 0 1px 0 #ccc;
    margin: 0px 7px;
    font-size: 14px;
    font-weight: 800;
}

.nicEdit-main {
    cursor: text;
}

.wiersz {
    width: 100%;
    padding: 0px;
    min-height: 60px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #ccc;
    background-color: #fff;
    overflow: hidden;
}
.wiersz:last-child {
    border-radius: 0px 0px 10px 10px;
}

.wiersz > .box5 {
    padding: 10px;
    text-align: left;
}
.wiersz > .box10 {
    padding: 10px;
    text-align: left;
}
.wiersz > .box60 {
    padding: 10px;
}
.wiersz > .box60 > a > img {
    height: 28px;
    margin: 0px 10px 0px 3px;
}
.wiersz > .box60 > a {
    color: #27446a;
    float: left;
    letter-spacing: -0.7px;
}

.wiersz > .box70 {
    padding: 10px;
}
.wiersz > .box70 > a > img {
    height: 28px;
    margin: 0px 10px 0px 3px;
}
.wiersz > .box70 > a {
    color: #27446a;
    float: left;
    letter-spacing: -0.7px;
}

.przyciskpanel {
    width: 100%;
    height: 50px;
    background-color: white;
    font-weight: 500;
    cursor: pointer;
    color: #292d32;
    display: flex;
    justify-content: start;
    align-items: center;
    text-transform: none;
    font-size: 18px;
    line-height: normal;
    margin: 10px 0;
    overflow: hidden;
    transition: all 0.1s linear;
}

.przyciskpanel span {
    margin-left: 20px;
}

.przyciskpanel > img {
    display: block;
    transition-duration: 0.1s;
    margin: 0;
    position: relative;
    left: 5px;
}

.przyciskpanel:hover,
.przyciskpanel:focus {
    color: #70c1a4;
}

.przyciskpanel:hover .panel-category-img,
.przyciskpanel:focus .panel-category-img {
    filter: hue-rotate(298deg) saturate(0.6) brightness(2.8);
}

.glebokosc_hierarchia1 {
    margin-left: 30px;
    width: calc(100% - 30px);
}
.glebokosc_hierarchia2 {
    margin-left: 60px;
    width: calc(100% - 60px);
}
.glebokosc_hierarchia3 {
    margin-left: 90px;
    width: calc(100% - 90px);
}

.przyciskmaly {
    display: inline-block;
    cursor: pointer;
    padding: 6px 9px 3px 31px;
    color: #ffffff;
    font-weight: 300;
    background-color: #0086c3;
    border: none;
    font-family: inherit;
    text-transform: uppercase;
    font-size: 16px;
    width: auto;
    background-position: 9px;
    background-size: 15px;
    background-repeat: no-repeat;
    border-radius: 3px;
    font-weight: 700;
    box-shadow: 0px 2px 0px rgb(90, 90, 90);
}

.przyciskmaly:hover,
.przyciskmaly:focus {
    filter: brightness(1.1);
}

.usun {
    background-image: url('grafika/ikony/usun.png');
    background-color: #ff6634;
}
.zapisz {
    background-image: url('grafika/ikony/zapisz.png');
    background-color: #88d833;
}
.dodaj {
    background-image: url('grafika/ikony/dodaj.png');
    background-color: #fbce17;
}
.przyciskwtabeli {
    cursor: pointer;
    transition-duration: 0.1s;
    position: relative;
    font-size: 7px;
    color: #000;
    width: 60px;
    height: 34px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    background-color: white;
    border-color: #888;
    border-radius: 2px;
    display: inline-block;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
}
.przyciskwtabeli-ikona {
    font-size: 11px;
}
.przyciskwtabeli:hover,
.przyciskwtabeli:focus {
    transform: scale(1.3);
    filter: brightness(1.3);
    position: relative;
}

.liczbapowiadomien {
    width: auto;
    height: auto;
    min-width: 19px;
    background: red;
    border-radius: 999px;
    text-align: center;
    box-sizing: border-box;
    right: 0px;
    position: absolute;
    display: none;
    top: 0px;
    z-index: 5;
    color: white;
    font-weight: bold;
    padding: 5px 6px 4px;
}

.menu_boczne {
    position: absolute;
    top: 20px;
    width: 80px;
    left: 0;
    height: auto;
    padding: 17px 15px;
    -webkit-transition: width 0.4s cubic-bezier(0.08, 0.33, 0, 1.19);
    transition: width 0.4s cubic-bezier(0.08, 0.33, 0, 1.19);
    z-index: 10;
    background-color: #ffffff;
    box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    margin-bottom: 30px;
}

.menu_boczne::after {
    position: absolute;
    content: '';
    bottom: -40px;
    height: 40px;
    width: 1px;
}

#materials-small:after {
    position: absolute;
    content: '';
    bottom: -40px;
    height: 40px;
    width: 1px;
}

.menu_boczne ul {
    margin-bottom: 0;
}

.menu_boczne:hover,
.menu_boczne:focus {
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
    width: 430px;
}

.ikona_pomoc {
    text-transform: uppercase;
    border: 1px;
    border-style: solid;
    width: auto;
    display: inline-block;
    padding: 0px 10px;
    font-weight: 500;
    background-color: #efefef;
    line-height: 24px;
    border-color: #fff;
}
.ikona_pomoc > img {
    width: 20px;
    margin-right: 5px;
    top: 5px;
    position: relative;
}

.naglowek_panelu {
    /*position: fixed;
  top: 0px;
  width: 94%;
  left: 0px;*/
    position: relative;
    top: 0px;
    width: 100%;
    right: 0;
    height: 58px;
    background-color: #fff;
    text-align: right;
    color: #000;
    font-size: 12px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    padding: 12px 10px;
    box-sizing: border-box;
    -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    margin: 14px 0 40px 0;
    border-radius: 6px;
    z-index: 100;
}

.naglowek_panelu > a {
    color: #000;
    margin: 2px 5px;
    font-size: 16px;
    padding: 5px 10px;
    box-sizing: border-box;
    display: inline-block;
}

.naglowek_panelu > a:hover,
.naglowek_panelu > a:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

.naglowek_panelu_przyciski {
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

.naglowek_panelu_przyciski > form > input[type='submit'] {
    color: white;
    margin: 6px 10px;
    font-size: 16px;
    padding: 0px 10px;
    box-sizing: border-box;
    display: inline-block;
    background: none;
    text-shadow: none;
    box-shadow: none;
    min-width: 100px;
    height: auto;
}

.logo_white {
    background-image: url('grafika/logo_w.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 23px;
    width: 130px;
    margin: 0px 10px;
    top: 4px;
    left: 20px;
    position: absolute;
    background-position: center center;
}

.logo_blue {
    background-image: url('grafika/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 47px;
    width: 130px;
    margin: 0px 10px;
    top: 4px;
    left: 20px;
    position: absolute;
    background-position: center center;
}

.logostart {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+16,0+39 */
    background: -moz-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 16%,
        rgba(255, 255, 255, 0) 39%,
        rgba(255, 255, 255, 0) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 16%,
        rgba(255, 255, 255, 0) 39%,
        rgba(255, 255, 255, 0) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 16%,
        rgba(255, 255, 255, 0) 39%,
        rgba(255, 255, 255, 0) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    width: 600px;
    height: 500px;
    position: fixed;
    top: 0px;
    left: 0px;
}
.logostart > img {
    width: 184px;
    left: 37px;
    top: 30px;
    position: absolute;
}

.tlowideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}
.tlozdjecie {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.loginform {
    position: relative;
    width: 465px;
    margin: auto;
    padding: 50px 23px;
    border-style: solid;
    border-width: 4px;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25),
        0px 0px 30px rgba(255, 255, 255, 0.7) inset;
    color: #00496c;
    background-color: #fff;
    border-radius: 8px;
    font-size: 16px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

.closeLoginModal {
    color: #090223;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 15px;
    cursor: pointer;
}

.infoglowna {
    width: 480px;
    min-height: 130px;
    margin: 0 auto;
    padding: 34px;
    border-style: solid;
    border-width: 6px;
    border-color: #fff;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25),
        0px 0px 30px rgba(255, 255, 255, 0.5) inset;
    color: #fff;
    position: absolute;
    left: 8%;
    top: 58%;
    box-sizing: border-box;
    background-color: rgba(0, 137, 205, 0.9);
    transition-duration: 0.5s;
    font-weight: 300;
    text-shadow: 1px 1px 0px #465491;
    border-radius: 50px 50px 50px 0px;
}

.g-recaptcha > div {
    margin: 0 auto;
}

.stopkastart {
    background: #0089cd;
    position: absolute;
    left: 0px;
    bottom: 0px;
    min-height: 45px;
    color: #ffffff;
    font-size: 14px;
}

.komunikat_pelny {
    position: fixed;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #4b4c51;
    box-sizing: border-box;
    color: #ffffff;
    opacity: 0.97;
    box-shadow: 0px 0px 410px rgba(0, 0, 0, 0.5);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 30px;
    top: 0px;
    z-index: 10000000;
    padding: 20% 10%;
}

p.success {
    background: #cf9;
    border: 1px solid #060;
    width: 500px;
    margin: 5px;
    color: black;
    font-weight: bold;
    padding: 2px;
}

p.error {
    color: #c00;
    /*position: absolute;*/
    z-index: 9;
    font-size: 12px;
    text-transform: none;
    margin: 0;
    bottom: 120px;
    text-align: center;
    left: 112px;
}

#client-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

label {
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

label.form-input-label {
    text-align: left;
    width: 500px;
}

footer#footer {
    font-size: 0.8em;
    text-align: center;
    clear: both;
    width: 100%;
}

.folder {
    cursor: pointer;
    color: #292d32;
    text-align: left;
    min-height: 60px;
    overflow: hidden;
    margin: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    background: none;
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
    padding: 15px 35px;
}

.folder:last-child {
    border-bottom: none;
}

.folder > big {
    transform: rotate(0deg);
    display: inline-block;
    margin-right: 10px;
    transition-duration: 0.3s;
}
.folder:hover,
.folder:focus {
    filter: brightness(1.05);
}
.folder > .bloker {
    width: 100%;
    height: 30px;
}
.folder.rozwiniety {
    font-weight: 800;
    color: #6ec1a4;
    height: 100px;
}
.folder.rozwiniety > big {
    transform: rotate(90deg);
    display: inline-block;
    margin-right: 30px;
}

.category-1 a,
.kat2 a,
.kat3 a {
    color: #292d32;
    text-transform: none;
    font-weight: 500;
}

.main-mat,
.material-doc {
    cursor: pointer;
    color: #292d32;
    text-align: left;
    min-height: 60px;
    overflow: hidden;
    margin: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    background: none;
    line-height: 29px;
    padding: 15px 35px;
    font-weight: 400;
    font-size: 16px;
}

.doc-icon {
    display: inline-block;
    margin-right: 20px;
}

.doc-icon img {
    width: 28px;
    height: auto;
}

.box_ramka_dokument {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background: rgba(20, 20, 20, 0.9);
    z-index: 110;
    cursor: zoom-out;
}

.box_ramka_dokument_close {
    position: fixed;
    right: 14px;
    top: 12px;
    border: none;
    border-radius: 50%;
    background: none;
}

.ramka_dokument {
    position: fixed;
    width: 90%;
    height: 95%;
    left: 5%;
    top: 5%;
    border: none;
}

.box_dokument {
    width: auto;
    min-height: 50px;
    padding: 15px 30px;
    display: inline-block;
    margin: 5px;
    box-sizing: border-box;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.7px;
    border-radius: 10px;
    box-shadow: 0px 3px 0px #cbcbcb;
    transition-duration: 0.2s;
    text-shadow: 0px 1px 0px #5c5c5c;
}
.box_dokument:hover,
.box_dokument:focus {
    transform: scale(1.05);
    color: #fff;
}

.box_pobierzplik {
    width: 20%;
    height: 240px;
    display: inline-block;
    cursor: pointer;
    background: #a0cee4;
    color: #0089b2;
    box-shadow: 0px 5px 0px #224067;
    padding-top: 100px;
    box-sizing: border-box;
    min-width: 220px;
    padding: 40px 10px 10px 10px;
    transition-duration: 0.2s;
    background: -moz-radial-gradient(
        center,
        ellipse cover,
        #fdffff 1%,
        #e6f8fd 30%,
        #c8eefb 93%
    ); /* FF3.6-15 */
    background: -webkit-radial-gradient(
        center,
        ellipse cover,
        #fdffff 1%,
        #e6f8fd 30%,
        #c8eefb 93%
    ); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(
        ellipse at center,
        #fdffff 1%,
        #e6f8fd 30%,
        #c8eefb 93%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdffff', endColorstr='#c8eefb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.box_pobierzplik:hover .box_pobierzplik:focus {
    transform: scale(1.05);
    box-shadow: 0px 3px 0px #224067;
}

.box_pobierzplik > img {
    width: 40%;
    margin-bottom: 20px;
    filter: hue-rotate(-32deg);
}

#box_pomoc {
    position: absolute;
    z-index: 50;
    width: 600px;
    height: 300px;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.6);
    background-color: #fff;
    font-size: 13px;
    line-height: 22px;
}
#box_pomocheader {
    cursor: move;
    z-index: 51;
    background-color: #2196f3;
    color: #fff;
    font-weight: bold;
    height: 10%;
    padding: 6px 15px;
    text-align: left;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 16px;
}
#box_pomocheader > img {
    float: right;
    cursor: pointer;
    width: 18px;
    height: auto;
}
#box_pomoctresc {
    overflow-y: scroll;
    height: auto;
    height: 90%;
    text-align: center;
    text-transform: none;
    color: #000;
    padding: 10px;
    box-sizing: border-box;
}

#box_pomoctresc > section > h3 {
    background: #dde9ee;
    color: #002333;
    padding: 11px 5px 3px;
    font-size: 16px;
    border-radius: 5px 5px 0px 0px;
    margin: 0px 10px 10px;
}
.info_plany_zajec {
    padding: 15px;
    background: #d1f1ff;
    margin-bottom: 50px;
    border-style: solid;
    border-color: #d0e0e7;
    border-width: 2px;
    border-radius: 5px;
    box-shadow: 0px 0px 15px #b2e0f7 inset;
}

/*////// STRONA GLOWNA /////////*/

.glowna-box1 {
    min-height: 400px;
    overflow: hidden;
}

.glowna-box1-info {
    padding: 45px 60px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border-radius: 7px;
    width: 360px;
    height: 350px;
    left: 150px;
    position: relative;
    top: 50px;
    color: #fff;
    text-align: left;
    font-size: 18px;
}
.glowna-box1-info > img {
    width: 220px;
}
.glowna-box1-tresc1 {
    font-weight: bold;
    position: relative;
    top: 20px;
    text-transform: none;
    font-size: 18px;
}
.glowna-box1-tresc2 {
    position: relative;
    top: 40px;
    text-transform: none;
    font-size: 18px;
}

.glowna-tlowideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.glowna-box2 {
    min-height: 400px;
    overflow: hidden;
    background: #f2f4f6;
    color: #000;
    padding: 80px 20px;
}

.glowna-box2-tresc1 {
    margin-bottom: 30px;
    font-size: 3rem;
    text-align: center;
    color: #212121;
    font-weight: 700;
    margin-top: 80px;
}

.glowna-box2-tresc2 {
    font-size: 1.25rem;
    color: #212121;
}

.glowna-box3 {
    min-height: 400px;
    overflow: hidden;
    background: #f2f4f6;
    color: #000;
    padding: 80px 20px;
}

.box33.recenzja {
    font-size: 22px;
    line-height: 32px;
}
.box33.recenzja > .podpis {
    font-size: 14px;
    margin-top: 20px;
}
.box33.recenzja > .logo {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 120px;
    height: 80px;
    position: relative;
    margin: 0 auto;
}

.glowna-box4 {
    min-height: 400px;
    overflow: hidden;
    background: #f2f4f6;
    color: #000;
    padding: 80px 20px;
}

.box33.boxopisowy {
    font-size: 16px;
    line-height: 20px;
    text-align: left;
}
.box33.boxopisowy > .piktogram {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 120px;
    height: 80px;
    position: relative;
    margin: 0 auto;
}
.box33.boxopisowy > .naglowek {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

/*/////////////////////////////*/
/*///////// KONTAKT //////////*/
/*/////////////////////////////*/

.uzytkownikwiadomosci > input {
    display: none;
}

.kontakt_rozmowa {
    font-family: inherit;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition-duration: 0.1s;
    min-height: 100px;
    background: #fff;
}

.uzytkownikwiadomosci {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    background-color: #d0eaff;
    margin: 4px 0px;
    border-radius: 3px;
    padding: 11px 14px;
    text-align: left;
    text-transform: uppercase;
    font-weight: 300;
    color: #081f4e;
    box-shadow: 0px 2px 0px rgb(218, 218, 218);
    font-size: 12px;
    cursor: pointer;
}
.uzytkownikwiadomosci.nieprzeczytana {
    padding: 8px 14px;
    font-weight: 800;
    background-color: #ffcf00;
    box-shadow: 0px 2px 0px rgb(117, 103, 0);
    color: #332f26;
    font-size: 16px;
}

.uzytkownikwiadomosci > .data {
    font-size: 10px;
    font-weight: 300;
    float: right;
}

.kontakt_rozmowa_okno {
    font-family: inherit;
    width: 100%;
    margin: 0px;
    display: inline-block;
    border: 2px solid #0086c3;
    border-radius: 4px;
    box-sizing: border-box;
    transition-duration: 0.1s;
    background: #fff;
    position: relative;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    height: auto;
    overflow-x: hidden;
    max-height: 300px;
    min-height: 200px;
    overflow-y: scroll;
}

.kontakt_rozmowa_okno_naglowek {
    width: 100%;
    background: #0086c3;
    position: sticky;
    z-index: 5;
    color: #fff;
    font-weight: 300;
    left: 0px;
    top: 0px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}

.wiadomosc {
    width: 80%;
    border-radius: 10px;
    padding: 7px 12px;
    box-sizing: border-box;
    display: inline-block;
    line-height: 17px;
}

.nieodczytana {
    filter: brightness(1.1);
}
.nieodczytana::before {
    display: block;
    content: 'NOWA';
    position: absolute;
    background: yellow;
    color: black;
    padding: 0px 6px;
    border-radius: 2px;
    font-size: 8px;
    right: -6px;
    top: -10px;
}

.odebrane {
    float: left;
    background: #94c2d8;
    margin: 6px 16% 6px auto;
    color: #45494e;
    text-align: left;
    left: 4%;
    position: relative;
}

.wyslane.nowe {
    filter: brigtness(1.1);
}

.odebrane::after {
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    content: '';
    border-right: 9px solid #94c2d8;
    position: relative;
    left: -20px;
    float: left;
    clear: both;
    top: -10px;
}

.wiadomosc.odebrane > .data {
    float: right;
    font-size: 10px;
    color: #6c8cab;
}

.wyslane {
    float: right;
    background: #0086c3;
    margin: 6px auto 6px 16%;
    color: #fff;
    text-align: right;
    right: 4%;
    position: relative;
}

.wyslane::after {
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    content: '';
    border-left: 8px solid #0086c3;
    position: relative;
    right: -19px;
    float: right;
    bottom: -4px;
}

.wiadomosc.wyslane > .data {
    float: left;
    font-size: 10px;
    color: #92c7d5;
}

.wysylanie {
    bottom: inherit;
    width: 100%;
    background: white;
    min-height: 45px;
    margin: 0;
    padding: 2px 3px 0px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    clear: both;
    position: sticky;
}

.wysylanie > input {
    font-family: inherit;
}

.wysylanie > input[type='text'],
select {
    font-family: inherit;
    width: 66%;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 5px;
    border-style: none;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}

.wysylanie > input[type='submit'] {
    font-family: inherit;
    width: 21%;
    min-height: 25px;
    padding: 4px 10px;
    border-radius: 5px;
    border-style: none;
    box-shadow: 0px 2px 0px rgb(0, 0, 0);
    background-color: #fbce17;
    font-weight: 500;
    min-width: 100px;
    height: 32px;
    color: #000 !important;
    text-shadow: none;
    font-size: 14px;
}

/*/////////////////////////////*/
/*///////// /KONTAKT //////////*/
/*/////////////////////////////*/

@media (min-width: 1600px) {
    .logostart {
        transform: scale(1.5);
        left: 7%;
        top: 11%;
    }
    .stopkastart {
        font-size: 24px;
    }
    .infoglowna {
        transform: scale(1.5);
        left: 16%;
    }

    .tlozdjecieblur {
        top: 29%;
    }

    .tlozdjecieblur {
        background-position: 80% 40%;
        transform: scale(1.5);
    }
}

@media (min-width: 480px) and (max-width: 1080px) {
    .infoglowna {
        left: 45%;
        width: 360px;
        top: 14%;
    }

    .tlozdjecieblur {
        left: 45%;
        top: 31%;
    }

    .tlozdjecie {
        background-position: 29% center;
    }
    .tlozdjecieblur {
        background-position: 44% 27%;
    }
}

@media (max-width: 480px) {
    .logo_blue {
        height: 23px;
        width: 100px;
        margin: 0px 10px;
        top: 4px;
        left: 2px;
        position: absolute;
    }

    .czas {
        display: none;
    }

    .box33,
    .box66 {
        width: 98%;
    }

    .menu_boczne {
        padding: 0px;
        width: 114%;
        height: auto;
        position: relative;
        left: -7%;
    }
    .menu_boczne:hover,
    .menu_boczne:focus {
        width: 100%;
    }
    .przyciskpanel {
        padding: 38px 4px 26px 4px;
        border-radius: 4px;
        margin: 1%;
        text-align: left;
        word-break: break-word;
        text-transform: none;
        width: 18%;
        min-width: 60px;
        word-break: break-all;
        line-height: 10px;
        font-size: 9px;
        text-transform: uppercase;
    }

    .przyciskpanel > img {
        left: 4px;
        top: 4px;
    }

    .naglowek_panelu {
        height: auto;
    }

    .naglowek_panelu_przyciski {
        width: 100%;
    }
    .naglowek_panelu_przyciski > form > input[type='submit'] {
        margin: 6px 2px 6px 10px;
    }

    .logo_white {
        left: 0px;
        top: 0px;
        position: relative;
        width: 105px;
        float: left;
    }

    .infoglowna {
        left: 5%;
        top: 100px;
        width: 90%;
        min-height: 60px;
        margin: 0 auto;
        padding: 20px 22px;
        border-radius: 25px 25px 0px;
    }

    .loginform form .box100 {
        flex-direction: column;
    }

    p.error {
        left: 30px;
    }

    .box100 .box20 {
        line-height: 18px !important;
        position: static;
        width: 100%;
        min-height: 20px;
    }

    .box100 .box80 {
        position: static;
        width: 100%;
    }

    .logostart {
        width: 100%;
    }
    .logostart > img {
        width: 60%;
        left: 0px;
        top: 30px;
        margin: 0 auto;
        display: block;
        position: relative;
    }

    .stopkastart {
        padding: 14px;
        line-height: 17px;
        width: 100%;
        box-sizing: border-box;
        top: 660px;
        min-height: 140px;
    }
    .stopkastart > .box50 {
        width: 98%;
        margin: 2px 0px 6px;
    }
    .stopkastart > .box50 > a {
        width: 98%;
        display: inline-block;
    }

    #preloader > .logo {
        width: 60%;
        top: 16%;
        left: 20%;
    }

    .loginform {
        width: 90%;
        font-size: 18px;
    }
    .tlozdjecieblur {
        display: none;
    }
    .tlozdjecie {
        filter: blur(10px);
    }

    .tresc:not(#loginModal) {
        margin-top: 30px;
    }

    .ramka_dokument {
        width: 90%;
        height: 93%;
        left: 5%;
        top: 7%;
        overflow: scroll;
        position: fixed;
        overflow-x: scroll;
    }

    .naglowek_tresc > img {
        width: 20%;
        height: auto;
        float: left;
        margin: 0px 40% 10px 40%;
    }

    .naglowek_tresc {
        width: 100%;
        min-height: 100px;
        text-align: center;
        line-height: 23px;
        top: 30px;
        margin: 0px auto 20px;
    }

    #preloader #preloaderobraz {
        top: 45%;
        left: 0px;
    }

    .preloadertext {
        left: 0px;
        top: 40%;
        font-size: 26px;
    }

    .box_aktualnosci > .box100 > .data {
        width: 25%;
        height: 90px;
    }
    .box_aktualnosci > .box100 > h4 {
        width: 70%;
        line-height: 25px;
        font-size: 22px;
    }
    .box_aktualnosci > .tresc {
        left: 0px;
        background: none;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        margin: 0px 0px 20px 0px;
    }

    .wiersz {
        width: 100%;
        min-height: 170px;
    }

    .wiersz > .box10 {
        padding: 1% 4%;
        text-align: left;
        float: left;
        width: 96%;
        box-sizing: border-box;
    }

    .wiersz > .box60 {
        padding: 6px;
        width: 100%;
        box-sizing: border-box;
        font-size: 13px;
    }

    .wiersz > .box60 > a {
        color: #27446a;
        float: left;
        letter-spacing: -0.7px;
        text-align: left;
    }

    .wiersz {
        width: 100%;
        padding: 30px 0px;
    }

    .naglowek_wiersz {
        display: none;
    }

    #pesel {
        font-size: 26px;
    }

    /*/////////////////////////////////////*/
    /*/////////  PLANY LEKCJI CRM //////////*/
    /*/////////////////////////////////////*/

    .plan_lekcji_crm div {
        display: inline-block;
        box-sizing: border-box;
    }
    .plan_lekcji_crm .tytul_duzy {
        width: 100%;
        font-weight: bold;
        text-align: center;
        background: #ccc;
        padding: 15px;
        margin-bottom: 20px;
    }

    .plan_lekcji_crm .wiersz {
        width: 100%;
        padding: 15px;
        min-height: inherit;
        padding-left: 0px;
        padding-right: 0px;
    }
    .plan_lekcji_crm .separator {
        height: 2px;
        background: #666;
        padding: 0px !important;
    }

    .plan_lekcji_crm .tytul {
        font-weight: bold;
    }

    .plan_lekcji_crm .data {
        width: auto;
        float: right;
        margin: 4px 7px;
        font-style: italic;
    }
    .plan_lekcji_crm .dzien {
        width: auto;
        float: right;
        margin: 4px 5px;
        font-style: italic;
    }
    .plan_lekcji_crm .lp {
        background: #0086c3;
        border-radius: 999px;
        position: absolute;
        left: 2%;
        height: 24px;
        width: 24px;
        color: #fff;
        padding: 5px 0px 0px;
    }
    .plan_lekcji_crm .godziny {
        width: 50%;
        text-align: right;
        padding: 2px 8px 2px 6px;
        background: #0086cb;
        margin-left: 50%;
        color: #fff;
        border-radius: 5px 0px 0px 6px;
        font-size: 18px;
    }
    .plan_lekcji_crm .przedmiot {
        width: 96%;
        font-weight: 800;
        padding: 11px 2%;
    }
    .plan_lekcji_crm .sala {
        width: 100%;
        color: #b3b3b3;
    }
    .plan_lekcji_crm .adres {
        width: 100%;
        color: #b3b3b3;
    }
    .plan_lekcji_crm .naglowek {
        width: 100%;
        font-size: 20px;
        text-align: center;
        font-weight: bold;
        margin-top: 20px;
    }
    .plan_lekcji_crm .last_change {
        color: rgb(237, 0, 7);
        font-weight: normal;
    }

    /*/////////////////////////////////////*/
    /*///////// /PLANY LEKCJI CRM //////////*/
    /*/////////////////////////////////////*/
}

.layout-container {
    display: flex;
    height: 100vh;
}

header.main-header {
    width: 352px;
    height: 100%;
    background-color: #2c4258;
    overflow: auto;
    overflow-x: hidden;
    padding-top: 26px;
}

.sidebar-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    min-height: 100px;
    padding: 0 26px;
}

.sidebar-content {
    flex-grow: 1;
    padding: 10px 0;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    padding: 50px 20px;
    justify-content: center;
}

.sidebar-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu-header {
    padding: 15px 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
    color: #f4f4f4;
}

.sidebar-menu-item .sidebar-menu-link {
    display: flex;
    align-items: center;
    height: 55px;
    padding: 0 40px;
    color: #f4f4f4;
    text-transform: none;
    transition: all 0.1s linear;
}

.sidebar-menu-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0.02em;
}

.sidebar-menu-icon {
    display: inline-block;
    margin-right: 17px;
}

.sidebar-menu-item .sidebar-menu-link:hover,
.sidebar-menu-item .sidebar-menu-link:focus {
    color: #70c1a4;
}

.sidebar-menu-item .sidebar-menu-link:hover .sidebar-menu-icon svg path,
.sidebar-menu-item .sidebar-menu-link:focus .sidebar-menu-icon svg path {
    fill: #70c1a4;
}

.active .sidebar-menu-title {
    color: #70c1a4;
}

.active .sidebar-menu-icon svg path {
    fill: #70c1a4;
}

.panel-layout-container {
    display: block;
    width: calc(100% - 250px);
}

#tresc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    min-height: 100%;
    overflow: auto;
    padding: 26px 45px;
}

.sidebar-footer-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
}

.logout-button {
    background: #3c5977;
    opacity: 0.75;
    border-radius: 6px;
    color: #fff;
    text-transform: none;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    padding: 10px 56px;
    position: relative;
    display: flex;
    align-items: center;
}

.logout-button:hover,
.logout-button:focus {
    opacity: 1;
    color: #fff;
}

.logout-button svg {
    position: absolute;
    right: 12px;
}

#kokpit {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 50px;
}

#kokpit .subjects-list li {
    padding-bottom: 0.3em;
    margin-bottom: 0.3em;
    margin-right: 0.5em;
    border-bottom: 1px solid #939393;
}

#kokpit .subjects-list li:last-child {
    border-bottom: none;
}

#kokpit .subjects-list a:hover,
#kokpit .subjects-list a:focus {
    cursor: default;
}

#help {
    display: flex;
    width: 100%;
}

#settings {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
}

#settings .settings-container {
    background-color: #fff;
    box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    padding: 32.79px;
    flex: 1;
}

#help .help-container {
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    padding: 32.79px;
}

#help .help-container p a {
    color: #292d32;
    text-transform: none;
}

#dictionary {
    width: 100%;
}

#dictionary .dictionary-container {
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    padding: 32.79px;
}

@media (max-width: 1270px) {
    #kokpit {
        flex-wrap: wrap-reverse;
    }
}

#kokpit .kokpit-container {
    background-color: #fff;
    box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    padding: 32.79px;
}

#kokpit .kokpit-container.subjects-list {
    flex: 1 1 300px;
}

#kokpit .kokpit-container.subjects-list ul {
    list-style: none;
    overflow-y: scroll;
    height: 500px;
    list-style: none;
}

#kokpit .kokpit-container.subjects-list li {
    color: #292d32;
    text-transform: none;
    font-weight: 500;
    font-size: 20px;
}

#kokpit .kokpit-container.subjects-list p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 28px;
}

#kokpit .business-card {
    background-color: #2c4258;
    color: #fff;
    padding: 39px 32.79px;
    background-image: url('/grafika/ikony/eduiko_sygnet.svg');
    background-position-x: right -6em;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
}

.business-card .contact-list {
    margin-bottom: 0;
}

.business-card h2,
.business-card a {
    font-size: 1em;
    color: #fff;
}

.business-card h2 {
    margin: .5em 0 1em 0;
}

.business-card img {
    filter: invert();
}

.business-card a {
    font-weight: normal;
}

.flex-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 300px;
}

#kokpit .kokpit-container.company-date {
    flex: 1 1 400px;
}

#kokpit .flex-column .docs-number {
    min-height: 300px;
    margin-bottom: 50px;
}

#kokpit .flex-column .docs-number p {
    color: #292d32;
    font-weight: 500;
    font-size: 16px;
}

#kokpit .flex-column .docs-number .number {
    font-size: 40px;
}

#kokpit .flex-column .pack {
    background-color: #2c4258;
    padding: 39px 32.79px;
    margin-top: auto;
}

#kokpit .flex-column .pack p {
    color: #fff;
    margin: 0;
    font-weight: 500;
}

#kokpit .flex-column .pack .pack-text {
    color: #fff;
    font-size: 24px;
    font-weight: initial;
    margin-bottom: 55px;
    text-transform: uppercase;
}

#kokpit .flex-column .pack .text-plan {
    margin-bottom: 10px;
}

.progress {
    background-color: #d9d9d9;
    width: 100%;
    display: block;
    border-radius: 8px;
}

.progress .progress-bar {
    border-radius: 8px;
    background-color: #70c1a4;
    height: 8px;
}

#kokpit .flex-column .pack button {
    width: 100%;
    border: none;
    background-color: #fff;
    border-radius: 6px;
    color: #292d32;
    font-weight: 500;
    font-size: 16px;
    padding: 13px 0;
    margin-top: 15px;
}

#kokpit .kokpit-container.company-date .company-first-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#kokpit .kokpit-container.company-date .company-first-box img {
    width: 200px;
}

#kokpit .kokpit-container.company-date p {
    color: #000;
    font-weight: 500;
    font-size: 16px;
}

#kokpit .kokpit-container.company-date .company-first-box .company-text {
    font-size: 24px;
    font-weight: initial;
    margin-top: 24px;
    margin-bottom: 13px;
}

#kokpit .kokpit-container.company-date .company-first-box .text {
    margin-bottom: 24px;
}

#kokpit .kokpit-container.company-date .company-first-box .text,
#kokpit .kokpit-container.company-date .company-second-box .text {
    font-weight: 300;
    opacity: 0.6;
}

#kokpit .kokpit-container.company-date .company-first-box a {
    background: linear-gradient(90deg, #70c1a4 0%, #2c4258 100%);
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 15px 45px;
    text-transform: none;
}

#kokpit .kokpit-container.company-date hr {
    margin: 40px 0;
    background-color: #f2f2f2;
}

#kokpit .kokpit-container.company-date .company-second-box .text {
    margin-right: 10px;
}

#kokpit .kokpit-container.company-date .company-second-box .sec-text {
    font-weight: 400;
}

#kokpit .kokpit-container.company-date .company-second-box .box-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

#container-1 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

#container-1 .materials-container-big {
    display: flex;
    position: relative;
}

#container-1 .materials-container-big .materials-container-small {
    width: calc(100% - 140px);
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 20px;
}

#container-1
    .materials-container-big
    .materials-container-small
    .mat-container {
    box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    background: #ffffff;
}

#container-1
    .materials-container-big
    .materials-container-small
    .mat-container
    .filters {
    display: flex;
    padding: 35px;
    border-bottom: 1px solid black;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: flex-start;
}

#container-1
    .materials-container-big
    .materials-container-small
    .mat-container
    .filters
    p {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    color: rgba(44, 66, 88, 0.4);
    margin-right: 20px;
}

#container-1
    .materials-container-big
    .materials-container-small
    .breadcrumbs
    a {
    color: #2c4258;
    text-transform: none;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 37px;
}

#go-back {
    color: #2c4258;
    text-transform: none;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    margin: 37px 35px 37px 0;
}

#go-back a {
    color: #2c4258;
    text-transform: none;
    font-size: 16px;
    font-weight: 500;
}

#go-back a svg {
    margin-right: 12px;
    margin-bottom: 3px;
}

.display,
.display1,
.display2 {
    display: inline;
}

.display1 a {
    margin-bottom: 0;
}

.display a {
    display: inline !important;
    background-color: transparent;
}

.display a span {
    margin-left: 0;
}

.display a.liczbapowiadomien,
.display a img {
    display: none;
}

/* ===== Scrollbar ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #f2f2f2 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #f2f2f2;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

/* Main */
/* Firefox */
#tresc {
    scrollbar-width: thin;
    scrollbar-color: #cecece #ffffff;
}

/* Chrome, Edge, and Safari */
#tresc::-webkit-scrollbar {
    width: 10px;
}

#tresc::-webkit-scrollbar-track {
    background: #ffffff;
}

#tresc::-webkit-scrollbar-thumb {
    background-color: #cecece;
    border-radius: 20px;
    border: 3px solid #ffffff;
}