.part-start, .part-finish {
    height: calc(100vh - 100px); 
}

.part-start header p, .part-finish header p {
    margin: 0;
    color: rgba(135,166,191,1) !important;
    font-weight: 600 !important;
}

#part-start-content h1, #part-finish-content h1  {
    color: #0f4d80 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

#part-start-content h2, #part-finish-content h2 {
    color: #0f4d80 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

#part-start-content p, #part-finish-content p {
    color: rgb(243,240,238) !important;
}

#part-start-content button, #part-start-content button a, #part-finish-content button, #part-finish-content button a, #pobierz-pdf, .clear_callendar {
    background-color: #0f4d80 !important;
    color: rgb(243,240,238) !important; 
    font-weight: 600  !important; 
    text-decoration: underline  !important; 
    text-transform: uppercase !important;
    border: none !important;
}

#part-start-content button, #part-finish-content button {
    padding: 5px 25px !important;
}

#part-start-content button:hover, #part-start-content button:hover a, #part-finish-content button:hover, #part-finish-content button:hover a {
    background-color: rgb(243,240,238) !important; 
    color: #0f4d80 !important;
    transition: 1s;
}

#part-start-content img, #part-finish-content img {
    width: 100%;
    height: auto;
}

#part-start-content>div, #part-start header, #part-finish-content>div, #part-finish header {
    padding: 25px;
}

.part-control > * > button {
    text-align: center;
    flex-direction: column;
    justify-content: center;
}

.part-control > * > p { 
    width: 100%;
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}

.part-pre-form {
    font-size: 24px;
    text-align: center;
    font-weight: 500;
}

.part-form {
    box-shadow: 8px 8px 20px -8px rgba(27, 51, 86, 1);
    background-color: #fff;
}

h2 {
    margin: 20px;
    color: #114C81 !important;
    font-size: 25px;
    text-transform: uppercase;
}

label {
    color: #114C81 !important;
    text-transform: uppercase;
}

.form-check label {
    color: rgb(100, 100, 100) !important;
}

*::placeholder {
    color: lightgray !important;
}

input[type=text]:focus, select:focus, textarea:focus {
    outline: 3px solid rgb(255, 127, 127) !important;
}

input[type=checkbox]:focus {
    outline: 0 !important;
}

.part-previous, .part-next, .part-end, .dodaj_plik, .usun_plik {
    position: relative;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #fff;
    text-align: center;
    border: none;
    background-color: #114C81;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 1rem;
    text-align: center;
}

.part-previous::after {
    position: absolute;
    content: "";
    top: 0;
    left: -36px;
    width: 0;
    height: 0;
    display: inline-block;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid transparent;
    border-right: 18px solid #114C81;
}

.part-next::after {
    position: absolute;
    content: "";
    top: 0;
    right: -36px;
    width: 0;
    height: 0;
    display: inline-block;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid #114C81;
    border-right: 18px solid transparent;
}

.part-end {

}

input[type="radio"], input[type="checkbox"] {
    height: 18px !important;
    width: 18px !important;
    border-radius: 1px !important;
    border: 1px solid lightgray;;
}

input[type="radio"]:hover, input[type="checkbox"]:hover {
    background: #1b85e1;
}

input[type="radio"]:checked, input[type="checkbox"]:checked {
    background: #114C81;
}

.form-control {
    border-radius: 1px !important;
    border: 1px solid lightgray;
    background-color: #fff !important;
}




@media only screen and (max-width: 991px) {
    #part-start, #part-finish {
        background: rgba(135,166,191,1);     
    }

    .part-control > * > button {
        width: 100%;
    }

    .part-form {
        padding: 0 15px !important;
    }

    .part-control {
        padding: 0 35px !important;
    }

    .main {
        padding: 20px 0;
    }

    .part-start header p, .part-finish header p {
        font-size: 25px;
    }

    #part-start-content h1, #part-finish-content h1  {
        font-size: 35px !important;
    }

    #part-finish-content h2, #part-finish-content h2 {
        font-size: 24px !important;
    }
    
    #part-start-content p, #part-finish-content p {
        font-size: 18px !important;
    }
    
    #part-start-content button, #part-start-content button a, #part-finish-content button, #part-finish-content button a{
        font-size: 22px !important;
    }

    .part-start header img, .part-finish header img {
        height: auto;
        width: 100%;
    }

    .part-start header, .part-finish header {
        background-color: rgb(243,240,238) !important; 
    }

    .callendar-container {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {
    #part-start, #part-finish {
        background: rgb(243,240,238);
        background: linear-gradient(180deg, rgba(243,240,238,1) 0%, rgba(243,240,238,1) 45%, rgba(135,166,191,1) 45%, rgba(135,166,191,1) 100%);
        box-shadow: 8px 8px 20px -8px rgba(27, 51, 86, 1);
    }

    .part-control > * > button {
        width: 33%;
    }

    .main {
        padding: 30px;
    }

    .part-start header p, .part-finish header p {
        font-size: 35px;
    }

    #part-start-content h1, #part-finish-content h1  {
        font-size: 75px !important;
    }

    #part-start-content h2, #part-finish-content h2 {
        font-size: 62px !important;
        margin-top: -10px !important;
    }
    
    #part-start-content p, #part-finish-content p {
        font-size: 18px !important;
    }
    
    #part-start-content button, #part-finish-content button a{
        font-size: 22px !important;
    }

    .part-start header img, .part-finish header img {
        height: 100px;
        width: auto;
    }

    .callendar-container {
        width: 500px;
    }
}

.finish * {
    white-space: pre-wrap
}

.focus_error * {
    color: red !important;
}

.focus_error .form-control {
    border-color: red !important;
}

.focus_error {
    padding: 5px 10px;
    background: pink;
}

.zalaczniki {
    margin-bottom: 5px;
}

.loader {
    width: 120px;
    aspect-ratio: 1;
    display: grid;
    grid: 50%/50%;
    color: #25b09b;
    --_g: no-repeat linear-gradient(currentColor 0 0);
    background: var(--_g),var(--_g),var(--_g);
    background-size: 50.1% 50.1%;
    animation: 
        l6-0   1.5s infinite steps(1) alternate,
        l6-0-0 3s   infinite steps(1);
}
.loader::before {
    content: "";
    background: currentColor;
    transform: perspective(150px) rotateY(0deg) rotateX(0deg);
    transform-origin: bottom right; 
    animation: l6-1 1.5s infinite linear alternate;
}
@keyframes l6-0 {
    0%  {background-position: 0    100%,100% 100%,100% 0}
    33% {background-position: 100% 100%,100% 100%,100% 0}
    66% {background-position: 100% 0   ,100% 0   ,100% 0}
}
@keyframes l6-0-0 {
    0%  {transform: scaleX(1)  rotate(0deg)}
    50% {transform: scaleX(-1) rotate(-90deg)}
}
@keyframes l6-1 {
    16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
    33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
    66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
    100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}

svg > g:not([onclick]) {
    pointer-events: none; /* Wyłączamy pointer-events dla wszystkich elementów SVG */
}

.additional-inputs {
    padding-top: 25px;
}

.callendar-container {
    display: inline-block;
    margin: 0 0 20px 0;
}
.callendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    gap: 5px;
    margin-top: 10px;
    font-size: 16px;
}
.callendar-nav button {
    text-align: center;
    padding: 5px 0;
    border: 1px solid rgb(166, 166, 166);
    background-color: rgb(166, 166, 166);
    cursor: pointer;
    user-select: none;
    width: 35px;
    color: white;
    border-radius: 1px !important;
}
.callendar-nav button:hover {
    border: 1px solid #114C81 !important;
    background-color: #114C81 !important;
}
.callendar-day:hover {
    background: #f0f8ff;
}
.callendar-selected {
    background: #114C81 !important;
    color: white;
    font-weight: bold;
}
.callendar-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    align-items: center;
}
.callendar-header {
    font-weight: bold;
    text-align: center;
}
.callendar-error {
    color: red;
    font-size: 0.9em;
}
.callendar-day {
    text-align: center;
    padding: 4px 0;
    border: 1px solid #ccc;
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1px !important;
}
.callendar-day span {
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 50%;
}
.callendar-selected span {
    background: #114C81 !important;
    color: #fff;
    font-weight: bold;
}
.callendar-inrange span {
    border: 2px solid #114C81 !important;
    color: #000;
    background: #114C81 !important;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.callendar-disabled {
    background: #eee;
    color: #999;
    pointer-events: none;
    cursor:not-allowed
}