* {font-family:Arial,sans-serif;}
html,body,div{margin:0;padding:0;}
html,body{height:100%;overflow:auto;}
body{font-size:12px;}
div#page{min-height:100%;}

:root{
    --mainGap: 30px;
    --mainColor: rgb(3, 31, 48);
    --accentColor: rgb(85, 65, 158);
}

* html div#page{
    height:100%;
}

div#page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 1fr 20px;
}

div#page_header{
    grid-row: 1;
    height: 50px;
    background: none repeat scroll 0% 0% var(--mainColor);
    background: var(--mainColor);

    #logo{
        float:left;
        border:none;
        position:relative;
    }
}

div#page_footer{
    grid-row: 3;
    background: none repeat scroll 0% 0% rgb(245, 245, 245);

    div#page_copyr{
        float:center;
        padding:6px 0 0 6px;
        font-size:11px;
        text-align: center;
    }

    #page_info{
        float:right;
        padding:7px 7px 0 0;
        font-size:9px;

        button{margin-top:-7px;}
    }
}

.vdesk-logo{height:auto;top:5px;left:5px;}
div#dashboardPanelContainer{height:100%;}

div#page_middle{
    grid-row: 2;
    display:block;
    height:auto;
    color: rgb(88, 89, 91);

    div#page_contents {
        margin:0!important;
        padding:0!important;


    }

}


div#page_contents{
    overflow:hidden!important;

    h1 {
        text-align: center;
    }

    div#formularz {
        padding-top: calc(var(--mainGap) + 20px);
        width:600px;
        margin: 0 auto;

        div.input_box {
            width: 80%;
            display: flex;
            flex-direction: column;
            gap: var(--mainGap);
            margin: 0 auto;

            div.input_wrapper {
                width: 100%;
                margin: 0 auto;

                input {
                    height: 40px;
                    width: 80%;
                    padding: 10px 20px;
                    margin-right: 5px;
                    border: solid 1px rgb(3, 31,48);
                    border-radius: 10px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                }

                input:placeholder,
                input::placeholder,
                input::-moz-placeholder,
                input:-moz-placeholder,
                input::-webkit-input-placeholder {
                    font-style: italic;
                }

                span {
                    font-size: 20px;

                    &.star {
                        color: var(--accentColor);
                    }
                }
            }
        }

        div.info_panel {
            padding-top: var(--mainGap);
            margin-top: 30px;

            span {
                display:block;
                padding-bottom: 10px;

                input[type="checkbox"]:checked + label:before; {
                    background: var(--accentColor);
                }
            }
            span#przycisk{
                display: none;
                padding-top: var(--mainGap);

                input{
                    background: var(--mainColor);
                    color: white;
                    border-radius: 5px;
                    padding: 15px 25px;
                }

                input:hover{
                    background: var(--accentColor);
                }
            }
        }
    }
}