body {
    font-family: var(--bs-font-sans-serif), sans-serif;
    color: var(--e-global-color-primary);
    font-size: var(--e-global-typography-normal-size);
    line-height: var(--e-global-typography-line-normal);
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--e-global-font-family-head); }

h1 {
    font-size: 200%;
}

h2 {
    font-size: 150%;
}

.ciop-footer {
    background-color: var(--e-global-color-secondary); font-size: var(--e-global-typography-small-size);
    /*
    min-height: 200px;
    */
}
.ciop-footer .logo img { width: 100%; max-width: 320px; }

.ciop-footer .social-wrapper { list-style: none; margin: 0; padding: 0; }
.ciop-footer .social-wrapper > li { display: inline; margin-right: 10px; }
.ciop-footer .social-wrapper > li a:hover path { fill: var(--e-global-color-accent2); }

.home-graphic-header > .row{
    background-image: url("/assets/fotki/strona-glowna.jpg"); background-repeat: no-repeat; background-size: cover;
    background-position: top center; min-height: 660px;
}
.home-graphic-header .witamy-zaloguj-sie {
    background-color: rgba(255,255,255,0.6);
    max-width: 445px;
}

.ciop.__btn { display: inline-block; text-decoration: none; }

.btn-primary span.label { text-transform: uppercase; }
.ciop.__btn.btn-primary {
    background-color: var(--e-global-color-accent1);
    border-color: var(--e-global-color-accent1); border-radius: 10px;
    padding: 10px 20px; vertical-align: top;
}
.ciop.__btn.btn-primary .ico {
    display: inline-block; margin-right: 10px;
    width: 25px; height: 23px; vertical-align: bottom;
    background-position: 50% 50%; background-repeat: no-repeat;
}
.ico-login {
    background-image: url("../img/ico-login.svg");
}
.ico-user {
    background-image: url("../img/ico-user.svg");
}
.teacher {
    background-image: url("../img/teacher.svg");
}

.ico-save {
    background-image: url("../img/ico-save-blue.svg");
}


.ciop.__btn.btn-primary:hover {
    background-color: var(--e-global-color-accent2); border-color: var(--e-global-color-accent2);
}

.ciop.__btn.btn-secondary {
    border: solid 2px var(--e-global-color-accent1);
    background-color: var(--e-global-color-white);
    border-color: var(--e-global-color-accent1); border-radius: 10px;
    padding: 6px 20px; border-width: 2px; min-width: 130px;
    text-align: center;
}
.ciop.__btn.btn-secondary.inverse {
    background-color: var(--e-global-color-accent1);
}
.ciop.__btn.btn-secondary.inverse .label {
    color: var(--e-global-color-white);
}
.ciop.__btn.btn-secondary.inverse:hover {
    background-color: var(--e-global-color-white);
}


.ciop.__btn.btn-secondary:hover {
    border-color: var(--e-global-color-accent2);
}
.ciop.__btn.btn-secondary .ico {
    display: inline-block; margin-right: 0px;
    width: 25px; height: 23px; vertical-align: bottom;
    background-position: 50% 50%; background-repeat: no-repeat;
}
.ciop.__btn.btn-secondary .label {
    color: var(--e-global-color-accent1);
    text-transform: uppercase;
}
.ico-return {
    background-image: url("../img/ico-return-blue.svg");
}
.ico-slownik {
    background-image: url("../img/ico-slownik-blue.svg");
}

.inverse .ico-slownik {
    background-image: url("../img/ico-slownik-white.svg");
}

.ciop.__btn.btn-secondary:hover .ico-return {
    background-image: url("../img/ico-return-green.svg");
}
.ciop.__btn.btn-secondary:hover .ico-slownik {
    background-image: url("../img/ico-slownik-green.svg");
}

.ciop.__btn.btn-secondary:hover .ico-save {
    background-image: url("../img/ico-save-green.svg");
}

.ciop.__btn.btn-secondary:hover .label {
    color: var(--e-global-color-accent2);
}

.ciop-naglowek ul {
    list-style: none; display: flex; padding: 0; margin: 0;
    justify-content: space-between; align-items: center;
}
.ciop-naglowek ul .name-wrapper {
    flex: 3;
    font-family: var(--e-global-font-family-head);
    font-size: 22px; font-weight: 600; margin-bottom: -12px;
}
.ciop-naglowek {
    padding-left: 0; padding-right: 0;
    background-color: var(--e-global-color-white);
    border-bottom: solid 2px #E2E1E1;
}
.container.ciop { padding-top: 80px; }

.title-and-nav .mian-wrapper {
    list-style: none; margin: 0; padding: 0;
    display: flex; justify-content: space-between;
}

.wyklady-lista .mian-wrapper { list-style: none; margin: 0; padding: 0; }
.wyklady-lista .item { margin-bottom: 20px; border: solid 1px #E2E1E1; border-radius: 10px; }
.wyklady-lista .item ul {
    list-style: none; margin: 0; padding: 0; display: flex;
}
.wyklady-lista .item > a { display: block; box-sizing: border-box; padding: 10px; text-decoration: none; color: inherit; }
.wyklady-lista .item > a:hover {
    background-color: var(--e-global-color-secondary);
}
.wyklady-lista .item .lp { align-self: center; padding: 20px;
    padding-right: 10px; padding-right: 40px; font-size: 30px; color: var(--e-global-color-accent1);
}
.wyklady-lista .item .title {
    flex: 3; align-self: center;
}
.wyklady-lista .item .title h2 { margin-bottom: 0; font-family: var(--e-global-font-family-primary); font-size: 133.33% }
.wyklady-lista .item .title p { margin-bottom: 0; text-transform: uppercase; font-size: var(--e-global-typography-small-size); }
.wyklady-lista .item .wyklad-postep {
    padding-right: 20px; align-self: center;
}
.wyklad-postep .green { color: var(--e-global-color-accent2); }
.ciop-body-01_sg .ciop-naglowek { border-bottom: none; }
.numer-cwiczenia { width: 100%; padding-top: 100%; position: relative; }
.numer-cwiczenia > span {
    position: absolute; width: 100%; height: 100%; top:0; left: 0;
    border-radius: 50%; box-sizing: border-box; border: solid 4px var(--e-global-color-accent1);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--e-global-font-family-head); font-size: 30px; line-height: 30px;
    color: var(--e-global-color-accent1); font-weight: 600;
}
.tresc-cwiczenia .float-left { float: left; }
.tresc-cwiczenia .float-right { float: right; }
.tresc-cwiczenia:after { content: ""; display: block; clear: both; }
.tresc-cwiczenia > h3 { font-family: var(--e-global-font-family-primary); font-weight: 600; font-size: 175%; }
.tresc-cwiczenia > .h2,
.tresc-cwiczenia > h2 { font-family: var(--e-global-font-family-primary); font-weight: 600; font-size: 175%; }

.tresc-cwiczenia > .h3 {
    font-family: var(--e-global-font-family-primary); font-weight: 600; font-size: 125%;
    text-transform: uppercase;
}

.strona-cwiczen .h1,
.strona-cwiczen .h2 { font-family: var(--e-global-font-family-primary); font-size: 200%; }
.breadcrumbs-wrapper a { text-decoration: none; color: var(--e-global-color-accent1); }
.breadcrumbs-wrapper a:hover { color: var(--e-global-color-accent2); }
.tresc-cwiczenia > h4 { font-family: var(--e-global-font-family-primary); font-weight: 600; text-transform: uppercase; }
.tresc-cwiczenia > ul.dot { list-style: disc; padding-left: 1em; }
.tresc-cwiczenia > ul.dot li:before { content: none; }
.tresc-cwiczenia > ul.dot li { padding-left: 1em; }
.tresc-cwiczenia p + ul { margin-top: 0; margin-bottom: 0; }

.tresc-cwiczenia .polecenie:before {
    content: ""; display: inline-block; width: 19px; height: 19px;
    margin-right: 1em; background-image: url("../img/ico-arrow.svg"); background-repeat: no-repeat;
    background-size: contain; background-position: 50% 50%;
}
.tresc-cwiczenia .polecenie {
    font-size: 125%; font-family: var(--e-global-font-family-primary); font-weight: 600;
    color: var(--e-global-color-accent1); text-transform: uppercase;
}

.form-check-input { background-color: var(--e-global-color-secondary); }
.form-check-input:checked { background-color: var(--e-global-color-accent1); border-color: var(--e-global-color-accent1); }
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e %3crect x='0' y='0' width='16' height='16' fill='%23094476'/%3e %3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 7l2 2 2-2'/%3e   %3c/svg%3e");
    background-size: 2.25rem 2.25rem;
    background-position: right 0 center;
}



.videoplayer {

}

.nawigaca-wykladow-wrapper {
    /*
    position: fixed; 
    */
    width: 100%; bottom: 0; left: 0;
}

.nawigaca-wykladow-wrapper .nawigaca-wykladow {
    width:96%; 
    /*
    max-width: 720px; 
    */
    margin-left: auto; margin-right: auto;
    background-color: var(--e-global-color-accent1); color: var(--e-global-color-white);
    border-top-left-radius: 10px; border-top-right-radius: 10px;
    box-sizing: border-box; padding: 10px;
}
.nawigaca-wykladow-wrapper .nawigaca-wykladow > ul {
    list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between;
    align-items: center;
}
.nawigaca-wykladow-wrapper .nawigaca-wykladow > ul > li {
    padding-left: 5px; padding-right: 5px; box-sizing: border-box;
}

.nawigaca-wykladow-wrapper .nawigaca-wykladow > ul > li.status {
    margin-left: 20px;
}

.nawigaca-wykladow .text { color: red; font-family: var(--e-global-font-family-primary); }
.current-info-element .numer {
    display: block; width: 44px; height: 44px;
    border-radius: 22px; border: solid 3px white;
    font-family: var(--e-global-font-family-head); font-size: 19px; font-weight: 600;
    line-height: 41px; text-align: center; margin-right: 20px;
}
.current-info-element { display: flex; align-items: center; flex: 2; justify-content: center; }
.current-info-element > span { box-sizing: border-box; padding-right: 5px; padding-left: 5px; }
.current-info-element > span.wartosc { font-size: 30px; font-weight: 500; }

.nawigaca-wykladow a:hover svg .text,
.nawigaca-wykladow a:hover svg polygon,
.nawigaca-wykladow a:hover svg rect,
.nawigaca-wykladow a:hover svg path {
    fill: var(--e-global-color-accent2);
}

.border-primary { border-color: var(--e-global-color-accent1) !important; }
.table > thead { background-color: var(--e-global-color-secondary); }

.materialy-dodatkowe {
    background-color: var(--e-global-color-secondary); padding: calc(var(--e-global-margin) * 0.5); box-sizing: border-box;
    color: var(--e-global-color-accent1); min-height: 200px;
}
.materialy-dodatkowe .__label {
    font-size: var(--e-global-typography-small-size); text-transform: uppercase;
}
.pliki-do-pobrania { list-style: none; }
.pliki-do-pobrania a { text-decoration: none; font-weight: bold; color: var(--e-global-color-accent1); }
.pliki-do-pobrania a:hover { color: var(--e-global-color-accent2); }
.dowload:before {
    content: ""; display: inline-block;
    background-image: url("../img/ico-doc-blue.svg"); background-repeat: no-repeat; background-position: 50% 50%;
    background-size: contain; width: 22px; height: 25px;
    vertical-align: middle; margin-right: 10px; margin-top: -3px;
}
.dowload:hover:before {
    background-image: url("../img/ico-doc-green.svg");
}

.sortable-list { list-style: none; margin: 0; padding: 0; }
.sortable-list > li { background-color: var(--e-global-color-white);
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 2px; cursor: move;
    border: dashed 1px var(--e-global-color-accent1);
}
.sortable-list > li:before {
    display: inline-block; margin-right: 10px;
    width: 9px; height: 21px;
    background-image: url("../img/ico-sorttable.svg"); background-repeat: no-repeat;
    background-position: 50% 50%; background-size: contain;
    content: "";

}

.tmp { border: solid 1px #00FF00 !important; box-sizing: border-box !important; }
label {
    display: inline;
}

.no-error, .no-error .select2-selection__rendered {
    border-color: green !important;
    color: green !important;
}

td.no-error {
    background: rgba(0,255,0,0.4);
}
td.has-error {
    background: rgba(255,0,0,0.4);
}

.has-error, .has-error .select2-selection__rendered {
    border-color: red !important;
    color: red !important;
}

select.form-control {apperance:auto;-moz-appearance: auto;}

.tresc-cwiczenia .pytanie-polecenie, .tresc-cwiczenia .pytanie-polecenie p {font-size: calc(var(--e-global-typography-normal-size)*1.5); line-height: calc(var(--e-global-typography-normal-size)*2.2)}
.tresc-cwiczenia .pytanie-polecenie  ul {margin: 20px 0;font-size: calc(var(--e-global-typography-normal-size)*1.5); line-height: calc(var(--e-global-typography-normal-size)*2.2)}

.tresc-cwiczenia .quiz-polecenie p {font-size: calc(var(--e-global-typography-normal-size)*1.5); line-height: calc(var(--e-global-typography-normal-size)*2.2)}