@import "normalize.css";
@import "reset.css";



/* --- kolory & style dla plików svg --- */

body {
    background-color: #ffffff;
}

.cls-1 {
    fill: #c63102;
    fill-rule: evenodd;
    opacity: 0.85;
}

.cls-2 {
    fill: #46de8a;
    fill-rule: evenodd;
    filter: url(#filter);
}

.cls-3 {
    fill: #2f2f2f;
    fill-rule: evenodd;
}

.cls-4 {
    fill: #e4e4e4;
    fill-rule: evenodd;
}

.cls-5 {
    fill: #898989;
    fill-rule: evenodd;
}

.cls-6 {
    fill: #e1555e;
    fill-rule: evenodd;
}

.cls-7 {
    fill: #64c2f0;
    fill-rule: evenodd;
}

.cls-8 {
    fill: #fff;
    fill-rule: evenodd;
}

.cls-9 {
    fill: #fb5151;
    fill-rule: evenodd;
    filter: url(#filter2);
}

.cls-10 {
    fill: #575757;
    fill-rule: evenodd;
}

.cls-11 {
    fill: #64c2f0;
    fill-rule: evenodd;
}

.cls-12 {
    fill: #d9d9d9;
    fill-rule: evenodd;
}

.cls-13 {
    fill: #b7350b;
    fill-rule: evenodd;
}

.cls-14 {
    fill: #fff;
}

.cls-15 {
    fill: #b9b9b9;
    fill-rule: evenodd;
}

.cls-16 {
    fill: #ff7332;
    fill-rule: evenodd;
}

.cls-17 {
    fill: #898989;
}

/* --- desktop --- */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #64c2f0;
}


html {
    scrollbar-color: #64c2f0 #f1f1f1;
    scrollbar-width: thin;
}


#desktop {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: url(../grafika/tlo.jpg) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

#telefon {
    /*padding: 10px 0 0;*/
    width: 415px;
    height: 650px;
    overflow-x: auto;
    background-color: #ea5b0c;
    border-radius: 30px;
    border: none;
    box-shadow: 0 30px 54px 0 rgba(0, 0, 0, 0.42);


}


/* --- nagłowek - top --- */

#top {
    position: relative;
    background-color: #ea5b0c;
    width: 100%;
    height: auto;
    padding: 15px 25px 0;
    color: #fff;
    border-radius: 0 0 25px 25px;
    z-index: 1;
}

#top.small {
    padding: 15px 25px 50px;
}


#top:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 47px;
    background: url(../grafika/top_gradient.png) repeat-x;
    border-radius: 0 0 25px 25px;
    z-index: -1;
}

#top > .line1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#top .nazwa_domu {
    font: 600 24px/30px 'Montserrat', sans-serif;
    width: calc(100% - 78px);
    margin: 0 0 5px;
}

#top .logo_lazar {
    width: 63px;
    margin: 7px 0 0;
}

#top .miejscowosc {
    font: 400 16px/22px 'Montserrat', sans-serif;
    margin: 0 0 15px;
}

#top .pogoda {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    overflow-x: auto;
    margin: 0 0 15px;
    color: #fff;
    font: 400 14px/16px 'Montserrat', sans-serif;
    padding: 0 0 10px;
}

#top .pogoda .separator {
    width: 1px;
    height: 9px;
    background: #d03d07;
    margin: 0 15px;
    flex: 0 0 auto;
}

#top .pogoda .box {
    display: flex;
    align-items: center;
}

#top .pogoda .box img {
    width: 24px;
    height: auto;
    margin: 0 12px;
}

/* --- tryb pracy --- */

#tryb_pracy {
    background-color: #efefef;
    padding: 15px 20px 0 30px;
    border-radius: 25px 25px 0 0;
    color: #2f2f2f;
    cursor: pointer;
    height: auto;
}

#tryb_pracy.close {
    overflow: hidden;
    height: 0;
    padding: 0 20px;
}

#tryb_pracy .line1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px;
}

#tryb_pracy .line1 .tekst {
    font: 500 14px/30px 'Montserrat', sans-serif;
    border-bottom: 1px solid #dddddd;
}

#tryb_pracy.open .line1 .tekst {
    border-bottom: none;
}

#tryb_pracy .temperatura {
    color: #ea5b0c;
    font: 600 37px/30px 'Montserrat', sans-serif;
}

#tryb_pracy .line2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#tryb_pracy.open .line2 {
    display: none;
}

#tryb_pracy .line2 .tekst {
    font: 500 14px/16px 'Montserrat', sans-serif;
    width: 180px;
}

#tryb_pracy .line2 .tekst span {
    color: #ea5b0c;
    font: 600 20px/30px 'Montserrat', sans-serif;
    text-transform: uppercase;
}

#tryb_pracy .line2 .wlacz {
    width: 82px;
    height: 82px;
    border-radius: 100%;
    background-color: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 0 -20px;
}

#tryb_pracy .line2 .ico_wlacz {
    width: 58px;
}

#tryb_pracy .line2 .ico_wlacz2 {
    display: none;
    width: 58px;
}

#tryb_pracy .line2 .wlacz.off .ico_wlacz {
    display: none;
}

#tryb_pracy .line2 .wlacz.off .ico_wlacz2 {
    display: block;
}

#tryb_pracy .line3 {
    display: none;
    margin: 0 10px 0 0;
    width: calc(100% - 10px);
    flex-direction: column;
    align-items: center;
}

#tryb_pracy.open .line3 {
    display: flex;
}

#tryb_pracy .line3 form {
    width: 100%;
}

#tryb_pracy .line3 .naglowek {
    color: #898989;
    font: 500 13px/15px 'Montserrat', sans-serif;
    margin: 15px 0;
    text-align: center;
}

#tryb_pracy .line3 .tryby {
    background-color: #fff;
    margin: 0 0 30px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#tryb_pracy .line3 .separator_poziomy {
    width: 90%;
    height: 1px;
    background-color: #efefef;
}

#tryb_pracy .tryby .box {
    position: relative;
    padding: 20px 15px 20px 70px;
    cursor: pointer;
    border-radius: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    color: #575757;
    font: 500 16px/20px 'Montserrat', sans-serif;
    text-transform: uppercase;
}

#tryb_pracy .tryby .box.active {
    background-color: #46de8a;
    color: #fff;
    font: 700 16px/20px 'Montserrat', sans-serif;
    box-shadow: 0 6px 6px 0 rgba(0, 255, 126, 0.24);
}

#tryb_pracy .tryby .box input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

#tryb_pracy .tryby .checkmark {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translate(0, -50%);
    height: 24px;
    width: 24px;
    margin: 0 4px;
    background-color: #fff;
    border: 2px solid #efefef;
    border-radius: 100%;
}

#tryb_pracy .tryby .box.active .checkmark {
    border-color: #16cf83;
    background-color: #46de8a;
    height: 32px;
    width: 32px;
    margin: 0;
}

#tryb_pracy .tryby .box .ico_ptaszek {
    display: none;
    position: absolute;
    top: 50%;
    left: 21px;
    transform: translate(0, -50%);
    width: 26px;
}

#tryb_pracy .tryby .box.active .ico_ptaszek {
    display: block;
}

/* --- tryb pracy - włączanie/wyłączanie --- */

#wlacz_wylacz {
    border-radius: 25px;
    border: 1px solid #d9d9d9;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 30px;
}

#wlacz_wylacz .tekst {
    color: #2f2f2f;
    text-transform: uppercase;
    font: 500 14px/14px 'Montserrat', sans-serif;
}

#wlacz_wylacz .pole {
    position: relative;
    width: 74px;
    height: 30px;
    border-radius: 15px;
    background-color: #d5d5d5;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.06) inset;
    margin: 0 35px;
}

#wlacz_wylacz .pole .kolko {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-35%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: #46de8a;
    box-shadow: 0 6px 6px 0 rgba(0, 255, 126, 0.24);
}

#wlacz_wylacz .pole.wylacz .kolko {
    left: 100%;
    transform: translate(-65%, -50%);
    background-color: #fb5151;
    box-shadow: 0 6px 6px 0 rgba(251, 81, 81, 0.24);
}


#wlacz_wylacz .pole .ico_wlacz {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
}

/* --- sekcja z boxami --- */

#sekcja_boxy {
    padding: 30px 25px 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#sekcja_boxy .box {
    width: 48.3%;
    padding: 4%;
    color: #575757;
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.13);
    margin: 0 0 4%;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#sekcja_boxy .box .line_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#sekcja_boxy .line_top .strona_lewa,
#sekcja_boxy .line_top .strona_prawa {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#sekcja_boxy .line_top .ico_termometr {
    width: 16px;
    margin: 0 6px 0 0;
}

#sekcja_boxy .box .kolko {
    width: 23px;
    height: 23px;
    background-color: #efefef;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 12px/12px 'Montserrat', sans-serif;
    margin: 0 10px 0 0;
}

#sekcja_boxy .line_top .tekst {
    font: 500 10px/20px 'Montserrat', sans-serif;
}

#sekcja_boxy .line_top .temp {
    position: relative;
    color: #ea5b0c;
    font: 600 20px/20px 'Montserrat', sans-serif;
}

#sekcja_boxy .line_top .temp .arrow_skos {
    width: 15px;
    position: absolute;
    bottom: -5px;
    left: -5px;
    transform: translate(-100%, 100%);
}

#sekcja_boxy .line_bottom {
    position: relative;
    display: flex;
    align-items: flex-end;
}

#sekcja_boxy .line_bottom .ikona_obieg,
#sekcja_boxy .line_bottom .ikona_cwu {
    width: 40px;
    flex: 0 0 auto;
}

#sekcja_boxy .line_bottom .ikona_pompa {
    width: 44px;
    margin: 0 0 0 -32px;
    flex: 0 0 auto;
}

#sekcja_boxy .line_bottom .temp2 {
    font: 600 46px/46px 'Montserrat', sans-serif;
    margin: 0 0 0 -20px;
}

#sekcja_boxy .line_bottom .procent {
    font: 600 20px/20px 'Montserrat', sans-serif;
}

#sekcja_boxy .line_bottom .kolumna {
    display: flex;
    flex-direction: column;
}

#sekcja_boxy .line_bottom .temp3 {
    font: 600 27px/30px 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
}

#sekcja_boxy .temp3 .arrow_poziom {
    width: 10px;
    margin: 0 5px;
    flex: 0 0 auto;
}

#sekcja_boxy .temp3:last-of-type .arrow_poziom {
    transform: rotate(180deg);
}

/* --- sekcja z boxami otwarta --- */

.box_big {
    display: none;
    background-color: #fff;
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.13);
    border-radius: 20px;
    padding: 10px 10px 25px;
    margin: -50px 25px 0;
    height: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
    flex-direction: column;
}

.box_big.open {
    height: auto;
    display: flex;
}

.box_big .start {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.box_big .start.open {
    display: flex;
}

.box_big .naglowek {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 15px;
    width: 100%;
}

.box_big .naglowek .kolko {
    background-color: #efefef;
    height: 38px;
    width: 38px;
    border-radius: 100%;
    margin: 0 15px 0 0;
    color: #2f2f2f;
    font: 500 20px/20px 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box_big .start .naglowek .kolko svg {
    width: 18px;
}

.box_big .naglowek .nazwa {
    color: #898989;
    font: 500 16px/18px 'Montserrat', sans-serif;
}

.box_big .start .line1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 15px;
    padding: 0 20px;
}

#box_cwu_big .start .line1,
#box_pompa_big .start .line1 {
    justify-content: space-between;
}

.box_big .start .line1 .tryb {
    width: 62%;
}

.box_big .start .line1 .tryb > div {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 25px 0 15px;
    border-radius: 20px;
    border: 2px solid #efefef;
    height: 37px;
    width: auto;
    cursor: pointer;
}

.box_big .start .line1 .tryb > .comfort {
    display: none;
}

.box_big .start .line1 .tryb.active .eco {
    display: none;
}

.box_big .start .line1 .tryb.active .comfort {
    display: inline-flex;
}

.box_big .start .line1 .ico_eco {
    width: 18px;
    margin: 0 10px 0 0;
}

.box_big .start .line1 .ico_comfort {
    width: 20px;
    margin: 0 10px 0 0;
}

.box_big .start .line1 .tryb span {
    text-transform: uppercase;
    color: #575757;
    font: 600 12px/12px 'Montserrat', sans-serif;
}

.box_big .start .line1 .temp1 {
    display: flex;
    align-items: center;
    color: #ea5b0c;
    font: 600 42px/42px 'Montserrat', sans-serif;
}

.box_big .start .line1 .temp1 .ico_termometr {
    width: 30px;
    margin: 0 10px 0 0;
}

.box_big .start .line2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0 0 30px;
    padding: 0 20px;
    height: 138px;
}

.box_big .start .line2 .temp2 {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: calc(100% - 70px);
}

.box_big .start .line2 .temp2 .ikona_obieg,
.box_big .start .line2 .temp2 .ikona_cwu {
    width: 83px;
    flex: 0 0 auto;
}

.box_big .start .line2 .temp2 .ikona_pompa {
    width: 93px;
    flex: 0 0 auto;
}

.box_big .start .line2 .temp2 .procent {
    color: #575757;
    font: 600 42px/42px 'Montserrat', sans-serif;
    margin: 0 -65px 0 0;
}

.box_big .start .line2 .temp2 span {
    color: #575757;
    font: 600 90px/90px 'Montserrat', sans-serif;
    margin: 0 0 0 -55px;
}

.box_big .start .line2 .temp2 .arrow_skos {
    width: 31px;
    position: absolute;
    top: 0;
    right: 30px;
}

.box_big .start .line2 .regulacja_temp {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 10px;
}

.box_big .start .line2 .kolko {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 100%;
    border: 4px solid #ea5b0c;
    background-color: transparent;
    cursor: pointer;
}

.box_big .start .line2 .kolko:after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 105%;
    height: 105%;
    border-radius: 100%;
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 10px 0 rgba(0, 0, 0, 0.2);
}


.box_big .start .line2 .kolko_plus {
    margin: 0 0 20px;
}

.box_big .start .line2 .kreska {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ea5b0c;
}

.box_big .start .line2 .kreska_pozioma {
    width: 20px;
    height: 4px;
}

.box_big .start .line2 .kreska_pionowa {
    width: 4px;
    height: 20px;
}

.box_big .start .ustawienia,
.box_big .start .harmonogram {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 40px);
    background-color: #f4f4f4;
    border-radius: 20px;
    padding: 9px 17px;
    cursor: pointer;
}

.box_big .start .ustawienia {
    margin: 0 0 15px;
}

.box_big .start .ustawienia .arrow2,
.box_big .start .harmonogram .arrow2 {
    width: 9px;
}

.box_big .start .ustawienia .ico_ustawienia,
.box_big .start .harmonogram .ico_harmonogram {
    width: 19px;
}

.box_big .start .ustawienia span,
.box_big .start .harmonogram span {
    text-align: center;
    margin: 0 15px;
    color: #575757;
    font: 500 15px/15px 'Montserrat', sans-serif;
}

.box_big .start .line2 .kolumna {
    display: flex;
    flex-direction: column;
}

.box_big .start .line2 .temp3 {
    font: 600 55px/60px 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
}

.box_big .start .line2 .arrow_poziom {
    width: 21px;
    margin: 0 10px;
    flex: 0 0 auto;
}

.box_big .start .line2 .temp3:last-of-type .arrow_poziom {
    transform: rotate(180deg);
}

/* --- box duży u stawienia --- */

.box_big .box_ustawienia {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.box_big .box_ustawienia.open {
    display: flex;
}

.box_ustawienia .naglowek .ico_ustawienia {
    width: 19px;
}

.box_ustawienia .temp_chlodzenia,
.box_ustawienia .temp_ogrzewania {
    width: 100%;
}

.box_ustawienia .temp_chlodzenia {
    margin: 0 0 25px;
}

.box_ustawienia .tytul {
    text-align: center;
    color: #898989;
    font: 500 13px/13px 'Montserrat', sans-serif;
    margin: 0 0 20px;
}

.box_ustawienia .tytul span {
    text-transform: uppercase;
    color: #575757;
    font-weight: 600;
}

.box_ustawienia .separator {
    width: 100%;
    height: 1px;
    background-color: #efefef;
    margin: 20px 0;
}

.box_ustawienia .ico_comfort {
    width: 20px;
}

.box_ustawienia .ico_eco {
    width: 18px;
}

.box_ustawienia .regulacja_comfort,
.box_ustawienia .regulacja_eco {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.box_ustawienia .regulacja_comfort {
    margin: 0 0 20px;
}

.box_ustawienia .kolumna1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
}

.box_ustawienia .kolumna1 span {
    text-transform: uppercase;
    font: 600 13px/13px 'Montserrat', sans-serif;
    color: #575757;
}

.box_ustawienia .kolumna2 {
    display: flex;
    align-items: center;
}

.box_ustawienia .kolumna2 .kolko {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 3px solid #ea5b0c;
    background-color: transparent;
    cursor: pointer;
}

.box_ustawienia .kolumna2 .kolko:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 105%;
    height: 105%;
    border-radius: 100%;
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.box_ustawienia .kolumna2 .kreska {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ea5b0c;
}

.box_ustawienia .kolumna2 .kreska_pozioma {
    width: 12px;
    height: 3px;
}

.box_ustawienia .kolumna2 .kreska_pionowa {
    width: 3px;
    height: 12px;
}

.box_ustawienia .kolumna2 span {
    color: #575757;
    font: 600 42px/42px 'Montserrat', sans-serif;
    margin: 0 10px 0 15px;
}

.box_ustawienia .btn_zapisz,
.box_harmonogram .btn_opcje {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 40px);
    height: 37px;
    background-color: #f4f4f4;
    border-radius: 20px;
    padding: 9px 17px;
    cursor: pointer;
}

.box_ustawienia .btn_zapisz span,
.box_harmonogram .btn_opcje span {
    text-align: center;
    margin: 0 15px;
    color: #575757;
    font: 500 15px/15px 'Montserrat', sans-serif;
}

.box_ustawienia .btn_zapisz span:first-of-type {
    width: 9px;
    margin: 0;
}

.box_ustawienia .btn_zapisz .arrow2,
.box_harmonogram .btn_opcje .arrow2 {
    width: 9px;
}

/* --- box duży harmonogram - tydzień --- */


.box_big .box_harmonogram {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.box_big .box_harmonogram.open {
    display: flex;
}

.box_big .naglowek .ico_harmonogram {
    width: 18px;
}

.box_harmonogram .btn_dodaj_zmiane {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 40px);
    height: 37px;
    border-radius: 20px;
    padding: 9px 17px;
    border: 2px solid #efefef;
    margin: 0 0 20px;
    cursor: pointer;
}

.box_harmonogram .btn_dodaj_zmiane span {
    text-align: center;
    text-transform: uppercase;
    margin: 0 15px;
    color: #575757;
    font: 600 15px/15px 'Montserrat', sans-serif;
}

.box_harmonogram, .btn_dodaj_zmiane span:last-of-type {
    width: 16px;
    margin: 0;
}

.box_harmonogram .btn_dodaj_zmiane .ico_plus {
    width: 16px;
}

.box_harmonogram .btn_opcje .ico_opcje {
    width: 19px;
}


.box_harmonogram .btn_opcje .arrow2 {
    margin: 0 0 0 10px;
}

.box_harmonogram .tydzien {
    width: calc(100% - 10px);
    margin: 0 10px 10px 0;
}

.box_harmonogram .tydzien .wiersz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px;
}

.box_harmonogram .tydzien .wiersz.naglowek {
    margin: 0 0 15px;
}

.box_harmonogram .tydzien .dzien {
    width: 50px;
    flex: 0 0 auto;
    text-align: right;
    text-transform: uppercase;
    color: #2f2f2f;
    font: 500 14px/14px 'Montserrat', sans-serif;
}

.box_harmonogram .tydzien .ustawienia_trybu {
    width: calc(100% - 89px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 12px;
    height: 10px;
}

.box_harmonogram .tydzien .naglowek .ustawienia_trybu {
    width: calc(100% - 65px);
    margin: 0;
    height: auto;
}

.box_harmonogram .ustawienia_trybu span {
    color: #898989;
    font: 500 11px/11px 'Montserrat', sans-serif;
    border-radius: 5px;
    height: 100%;
}

.box_harmonogram .wiersz:not(.naglowek) {
    cursor: pointer;
}

.box_harmonogram .ustawienia_trybu .eco,
.box_harmonogram_dzien .line2 .eco,
.box_harmonogram_dzien .wiersz.eco .kropka {
    background-color: #64c2f0;
}

.box_harmonogram .ustawienia_trybu .comfort,
.box_harmonogram_dzien .line2 .comfort,
.box_harmonogram_dzien .wiersz.comfort .kropka {
    background-color: #ff7332;
}

/* --- box duży harmonogram - dzień --- */

.box_harmonogram_dzien {
    display: none;
    flex-direction: column;
    align-items: center;
}

.box_harmonogram_dzien.open {
    display: flex;
}

.box_harmonogram_dzien .line1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #898989;
    font: 500 11px/11px 'Montserrat', sans-serif;
    margin: 0 0 10px;
    padding: 0 5px;
}

.box_harmonogram_dzien .line1 .kolumna {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box_harmonogram_dzien .line1 span {
    width: 1px;
    height: 20px;
    background-color: #efefef;
    margin: 10px 0 0;
}

.box_harmonogram_dzien .line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 18px;
    padding: 0 20px;
    width: 100%;
    margin: 0 0 20px;
}

.box_harmonogram_dzien .line2 span {
    height: 100%;
    border-radius: 9px;
}

.box_harmonogram_dzien .tryby_pracy_dzien {
    position: relative;
    padding: 10px 20px;
    margin: 0 0 30px;
}

.box_harmonogram_dzien .tryby_pracy_dzien:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    height: 100%;
    width: 1px;
    background-color: #efefef;
    z-index: -1;
}

.box_harmonogram_dzien .tryby_pracy_dzien .wiersz {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
}

.box_harmonogram_dzien .wiersz .nazwa,
.box_harmonogram_dzien .wiersz .godzina {
    width: 80px;
}

.box_harmonogram_dzien .wiersz .nazwa {
    text-align: right;
    text-transform: uppercase;
    font: 500 14px/14px 'Montserrat', sans-serif;
}

.box_harmonogram_dzien .wiersz.comfort .nazwa {
    color: #ff7332;
}

.box_harmonogram_dzien .wiersz.eco .nazwa {
    color: #64c2f0;
}

.box_harmonogram_dzien .wiersz .godzina {
    font: 500 14px/14px 'Montserrat', sans-serif;
    color: #2f2f2f;
}

.box_harmonogram_dzien .wiersz .kropka {
    width: 7px;
    height: 7px;
    border-radius: 100%;
    margin: 0 15px;
}

.box_harmonogram_dzien .line_last,
.box_harmonogram_zmiana .line_last {
    width: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box_harmonogram_dzien .line_last .btn_dodaj,
.box_harmonogram_dzien .line_last .btn_usun,
.box_harmonogram_zmiana .line_last .btn_dodaj,
.box_harmonogram_zmiana .line_last .btn_usun {
    display: flex;
    align-items: center;
    height: 37px;
    color: #575757;
    text-transform: uppercase;
    width: 115px;
    border-radius: 20px;
    border: 2px solid #efefef;
    padding: 0 0 0 12px;
    font: 600 15px/15px 'Montserrat', sans-serif;
    cursor: pointer;
}

.box_harmonogram_dzien .line_last .ico_plus,
.box_harmonogram_dzien .line_last .ico_minus,
.box_harmonogram_zmiana .line_last .ico_plus,
.box_harmonogram_zmiana .line_last .ico_minus {
    width: 16px;
}

.box_harmonogram_dzien .line_last .ico_plus,
.box_harmonogram_zmiana .line_last .ico_plus {
    margin: 0 15px 0 0;
}

.box_harmonogram_dzien .line_last .ico_minus,
.box_harmonogram_zmiana .line_last .ico_minus {
    margin: 0 20px 0 0;
}

/* --- box duży harmonogram - zmiana --- */

.box_harmonogram_zmiana {
    display: none;
    flex-direction: column;
    align-items: center;
}

.box_harmonogram_zmiana.open {
    display: flex;
}

.box_harmonogram_zmiana .zmiana_godzin {
    margin: 0 0 10px;
    padding: 0 20px;
    width: 100%;
}

.box_harmonogram_zmiana .zmiana_godzin .wiersz {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 15px;
}

.box_harmonogram_zmiana .zmiana_godzin .godzina {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 144px;
    height: 48px;
    border-radius: 15px;
    flex: 0 0 auto;
}

.box_harmonogram_zmiana .zmiana_godzin .godzina:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    width: 9px;
    height: 9px;
}

.box_harmonogram_zmiana .zmiana_godzin .comfort .godzina:before {
    background-color: #ea5b0c;
}

.box_harmonogram_zmiana .zmiana_godzin .eco .godzina:before {
    background-color: #64c2f0;
}


.box_harmonogram_zmiana .zmiana_godzin .godzina input {
    width: calc(100% - 37px);
    height: 100%;
    border-radius: 15px 0 0 15px;
    border: none;
    color: #2f2f2f;
    font: 500 22px/22px 'Montserrat', sans-serif;
    padding: 0 10px;
    text-align: right;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.19) inset;
    background-color: #f9f9f9;
    flex: 0 0 auto;
}

.box_harmonogram_zmiana .zmiana_godzin .godzina span {
    height: 100%;
    width: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #575757;
    border-radius: 0 15px 15px 0;
    flex: 0 0 auto;
}

.box_harmonogram_zmiana .zmiana_godzin .ico_zegar2 {
    width: 21px;
}

.box_harmonogram_zmiana .wiersz .nazwa {
    text-align: right;
    font: 500 17px/17px 'Montserrat', sans-serif;
    text-transform: uppercase;
    margin: 0 20px 0 0;
}

.box_harmonogram_zmiana .zmiana_godzin .comfort .nazwa {
    color: #ea5b0c;
}

.box_harmonogram_zmiana .zmiana_godzin .eco .nazwa {
    color: #64c2f0;
}


.box_harmonogram_zmiana .dni_tygodnia {
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 10px;
}

.box_harmonogram_zmiana .dni_tygodnia .dzien {
    width: 30%;
    height: 40px;
    background-color: #efefef;
    border-radius: 20px;
    padding: 0 10px;
    color: #2f2f2f;
    font: 500 13px/13px 'Montserrat', sans-serif;
    margin: 0 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.box_harmonogram_zmiana .dni_tygodnia .dzien.active {
    color: #fff;
    background-color: #ea5b0c;
}

.box_harmonogram_zmiana .dzien span {
    width: 32px;
    text-align: center;
}

.box_harmonogram_zmiana .dzien div {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 2px solid #ffffff;
    margin: 0 0 0 6px;
}

.box_harmonogram_zmiana .dzien.active div {
    width: 0;
    height: 0;
    border-radius: 2px;
    border: none;
    margin: 0;
}

.box_harmonogram_zmiana .dzien .ico_ptaszek {
    width: 0;
    margin: 0;
}

.box_harmonogram_zmiana .dzien.active .ico_ptaszek {
    width: 18px;
    margin: 0 0 0 5px;
}


/* --- pasek (belka) dolna --- */

#pasek_dolny {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 38px;
    width: 100%;
    background-color: #efefef;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
}

#pasek_dolny .tekst {
    color: #898989;
    font: 500 11px/13px 'Montserrat', sans-serif;
}

#pasek_dolny .strona_prawa .tekst {
    margin: 0 5px 0 0;
}

#pasek_dolny .strona_lewa,
#pasek_dolny .strona_prawa {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#pasek_dolny .btn_historia,
#pasek_dolny .btn_wroc {
    display: flex;
    align-items: center;
}

#pasek_dolny .btn_wroc,
#pasek_dolny .btn_wroc2 {
    display: none;
}

#pasek_dolny .strona_lewa.active .btn_historia {
    display: none;
}


#pasek_dolny .strona_lewa.active .btn_wroc {
    display: flex;
}

#pasek_dolny .ico_zegar {
    width: 22px;
    margin: 0 10px 0 0;
}

#pasek_dolny .arrow_poziom {
    width: 10px;
    margin: 0 10px 0 0;
    transform: rotate(180deg);
}

#pasek_dolny .kropki {
    display: flex;
    align-items: center;
}

#pasek_dolny .kropki span {
    display: inline-block;
    background-color: #2f2f2f;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    margin: 0 0 0 5px;
}

/* --- menu --- */

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-100%, 0);
    z-index: 4;
    width: 100vw;
    height: 100vh;
    padding: 60px 0 40px;
    background-color: #ea5b0c;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#overlay.open {
    transform: translate(0, 0);
}

#overlay .ico_krzyzyk {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 25px;
    cursor: pointer;
}

#menu {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 50px;
    overflow-x: hidden;
}

#menu .menu1 {

}

#menu .menu1 li {
    margin: 0 0 40px;
}

#menu .menu1 > li:last-of-type,
#menu .menu2 > li:last-of-type {
    margin: 0;
}

#menu .menu1 li a {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: pointer;
}

#menu .menu1 li a svg {
    width: 27px;
    margin: 0 40px 0 0;
}

#menu .menu1 li a {
    color: #ffffff;
    text-transform: uppercase;
    font: 600 20px/25px 'Montserrat', sans-serif;
}

#menu .menu2 {
    background-color: #d04806;
    width: calc(100% + 100px);
    margin: 20px 0 -10px -50px;
    padding: 15px 50px;
}

#menu .menu2 li {
    margin: 0 0 10px;
}

#menu .menu2 li a {
    font: 600 14px/18px 'Montserrat', sans-serif;
    padding: 5px 0;
}

/* --- historia --- */

#historia {
    color: #2f2f2f;
    display: none;
    padding: 0 25px;
    position: relative;
    margin: -15px 0 0;
    z-index: 1;
}

#historia.open {
    display: block;
}

#historia .naglowek {
    margin: 0 0 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#historia .naglowek .kolko {
    width: 66px;
    height: 66px;
    border-radius: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#historia .naglowek .ico_zegar {
    width: 37px;
    margin: 0 4px 0 0;
}

#historia .naglowek .nazwa {
    text-align: center;
    color: #898989;
    font: 500 16px/16px 'Montserrat', sans-serif;
    margin: -10px 0 0;
}

#historia .rok {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

}

#historia .rok span {
    font: 500 25px/20px 'Montserrat', sans-serif;
    flex: 0 0 auto;
    margin: 0 15px 0 0;
}

#historia .rok div {
    background-color: #efefef;
    width: 100%;
    height: 1px;
}

#historia .zb_wpisow {
    margin: 5px 0 5px 3px;
    border-left: 1px solid #efefef;
    padding: 20px 0 25px 20px;
}

#historia .wpis {
    margin: 0 0 25px;
}

#historia .zb_wpisow .wpis:last-of-type {
    margin: 0;
}

#historia .wpis .czas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font: 500 15px/15px 'Montserrat', sans-serif;
    margin: 0 0 15px;
}

#historia .wpis .czas:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -24px;
    transform: translate(0, -50%);
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #ec6608;
}

#historia .wpis .ico_zegar2 {
    width: 15px;
    margin: 0 10px;
}

#historia .wpis .tresc {
    font: 400 13px/17px 'Montserrat', sans-serif;
}

#historia .wpis .tresc li {
    position: relative;
    padding: 0 0 0 20px;
    margin: 0 0 5px;
}

#historia .wpis .tresc li:last-of-type {
    margin: 0;
}

#historia .wpis .tresc li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #cdcdcd;
}

#historia .separator_historia {
    width: 100%;
    height: 1px;
    background-color: #efefef;
    margin: 15px 0 0 4px;
}

/* --- logowanie --- */
#logowanie {
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #ea5b0c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#logowanie .ico_krzyzyk {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 24px;
    cursor: pointer;
}

#logowanie .ico_logowanie {
    width: 45px;
    margin: 11vh 0 20px;
}

#logowanie .naglowek {
    color: #ffffff;
    font: 600 32px/36px 'Montserrat', sans-serif;
    margin: 0 0 20px;
}

#logowanie .box_input {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 20px 0 0;
}

#logowanie.zle .box_input {
    background-color: #cd4607;
}

#logowanie label {
    display: block;
    width: 250px;
    height: 48px;
    margin: 0 0 20px;
}

#logowanie input {
    width: 100%;
    height: 100%;
    color: #898989;
    font: 400 15px/19px 'Montserrat', sans-serif;
    padding: 0 25px;
    border: none;
    border-radius: 15px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.19) inset;
}

#logowanie .tekst {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font: 500 13px/15px 'Montserrat', sans-serif;
    letter-spacing: 1px;
    margin: 0 0 45px;
}

#logowanie.zle .tekst {
    margin: 20px 0;
}

#logowanie .tekst span {
    margin: 0 15px 0 0;
}

#logowanie .arrow_poziom_2 {
    width: 9px;
}

::placeholder {
    color: #898989;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #898989;
}

::-ms-input-placeholder {
    color: #898989;
}

input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder {
    line-height: normal !important;
}

#logowanie .btn_zaloguj {
    color: #ffffff;
    font: 600 17px/19px 'Montserrat', sans-serif;
    text-transform: uppercase;
    border-radius: 25px;
    border: 2px solid #ffffff;
    text-align: center;
    width: 250px;
    height: 50px;
}

#logowanie .stopka {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    width: 100%;
    transform: translate(-50%, 0);
    color: #ffffff;
    font: 700 13px/15px 'Montserrat', sans-serif;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#logowanie .stopka .tekst1 {
    color: #ad2e03;
    font-weight: 500;
}

#logowanie .stopka .tekst2 {
    text-transform: uppercase;
    margin: 0 15px 0 8px;
}

#logowanie .tekst3 {
    color: #ffffff;
    font: 500 13px/15px 'Montserrat', sans-serif;
    letter-spacing: 1px;
    margin: 0 0 20px;
    text-align: center;
}

#logowanie .tekst3 span {
    text-transform: uppercase;
    display: block;
}