/* form */
.formularzkontener .kontent {overflow: visible;}
.formularzkontener form {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.pole {display: table; width: 100%;}

/* form fields */
input, textarea, label  {border: none; border-bottom: 2px solid black; outline: none; margin: 0.8vh 0; background-color: unset; width: 100%; font-size: 1.6vh; font-family: 'FuturaPT-BookObl'; color: black; display: block; line-height: 2vh;}
input {height: 3.4vh;}
@media screen and (max-height: 650px) {
    input {font-size: 1.8vh;}
}
/* textarea */
textarea {resize: none; line-height: 3vh; height: 9.3vh; margin-top: 0;}
label {margin: 2vh 0 0; padding-bottom: 0.5vh;}
.pole.kon label:first-child::after, .pole.kon label:first-child::before {content: ""; display: block; width: 100%; height: 2px; background-color: white; position: absolute;}
label::after {bottom: -3.5vh;}
label::before {bottom: -6.5vh;}

/* błędy w formularzu */
.pole.wrong::after {
    transform: rotate(-45deg) translateY(8px);
}
.pole.wrong::before, .pole.wrong::after {
    left: 0;
    transform-origin: top left;
}
.pole.wrong::before, .pole.wrong::after {
    content: "";
    position: absolute;
    left: -20px;
    width: 8px;
    height: 1px;
    background-color: #e2887d;
    display: block;
    top: 50%;
}
.pole.wrong.kon::before, .pole.wrong.kon::after {
    top: 6.2vh;
}

.pole.wrong::before, .pole.wrong::before {
    transform: rotate(45deg) translateY(-8px);
}


/* komunikaty błędów */
.komunikat.blad, label.error {visibility: hidden; opacity: 0; transition: visibility 0s, opacity 350ms ease-in-out; z-index: 10;}
.komunikat.blad.show, label.error {visibility: visible; opacity: 1;}
.komunikat, label.error {width: 100%; box-sizing: border-box; padding: 1.8vh; border: 1px solid black; position: absolute; bottom: 100%; margin-bottom: 0.5vh; left: 0;
    background-color: #f2f2f2; color: black;  font-size: 1.6vh; line-height: 2vh;}
    
.komunikat::before, label.error::before {
    content: "";  
    height: 0;
    width: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 7px solid transparent;
    border-top: 6px solid black;
    position: absolute;
    bottom: -14px;
    left: 5%;
    background-color: none;
}

.komunikat::after, label.error::after {
    content: "";  
    height: 0;
    width: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 7px solid transparent;
    border-top: 6px solid #f2f2f2;
    position: absolute;
    bottom: -13px;
    left: 5%;
}

/* agreement */
.pole.zgoda {margin: 0.5vh 0; padding: 0.6vh 0;}
.pole.zgoda input {display: none;}
.pole.zgoda .komunikat.wiecej {visibility: hidden; opacity: 0; transition: visibility 0s, opacity 350ms ease-in-out;}
.pole.zgoda:hover .komunikat.wiecej {visibility: visible; opacity: 1;}
.checkbox-change {border: 1px solid black; width: 15px; height: 15px; float: left; margin: 0 10px 0 0;}
.pole.zgoda .agreement-text {font-size: 1.6vh;}

.pole.zgoda.active .checkbox-change::after, .pole.zgoda.active .checkbox-change::before {content: ""; position: absolute; background-color: black; width: 1px;}
.pole.zgoda.active .checkbox-change::after {height: 5px; transform: rotate(-30deg); top: 6px; left: 6px; transform-origin: right bottom;}
.pole.zgoda.active .checkbox-change::before {height: 10px; transform: rotate(35deg); top: 1px; left: 6px; transform-origin: left bottom;}

/* wysłano */
.section.wyslane .button:nth-child(1) {bottom: 0;}
.wyslane.section .wpole {
    width: 100%;
    display: table;
    margin: 0 0 20px;
}
.wyslane.section .nazwa {
    float: left;
    width: 28%;
    text-align: right;
    margin-right: 4%;
}
.wyslane.section .trescW {
    float: left; 
    width: 68%
}

.wyslane.section .wpole p {
    width: 100%; margin: 0;
}
.wyslane.section .pole4::before {content: ""; width: 150px; height: 1px; background-color: black; display: block;}
.wyslane.section .pole4 p {margin-top: 10px;}
.wyslane.section .pole4, .wyslane.section .pole5 {font-size: 0.85em; margin-bottom: 10px;}

@media screen and (max-width: 1400px) and (min-width: 980px) {
    @media screen and (min-height: 670px) {
        input, textarea, label {font-size: 14px; margin: 5px 0; line-height: 18px;}
        input {height: 22px;}
        .pole.zgoda .agreement-text {font-size: 11px;}
    }
}

@media screen and (max-width: 980px) {
    #section3 form {position: relative; padding: 0;}
    #section3 form .kontent {margin-bottom: 40px;}
}