/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root{
    --formBackgroundColor: rgba(100,100,100,0.8);
    --closeButtonColor: #424242;
    --closeButtonHoverColor: #dedede;

}
#formTable td{
    text-align: right;
    padding-top: 2vh;
    max-width: 50%;
    min-width: 40%;

}
input, select {
    font-size: 3vh;
    max-width: 40vw;
}
textarea {
    font-size: 2vh;
}

#formTable {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    font-size: 3vh;
    max-height: 70vh;
    overflow: scroll;

}
form {
    width: 100%;
    height: 100%;
    text-align: center;
}
#message{
    width: 50%;
}

#formBackground {
    display: none;
    position: fixed;
    width: 100%;
    height: 150vh;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: var(--formBackgroundColor);


}


#submitForm {
    margin-top: 6vh;
    margin-bottom: 5vh;
    width: 40%;
    left: 30%;
    height: 6vh;
    font-size: 3vh;
    border-radius: 4vh;
    border: none;
    background-color: #abfeff;
    border: 0.5vh solid #ababab;
}

#submitForm:hover{
    background-color: #e6fffe;
}

#formArea {
    position: absolute;
    left: 25%;
    width: 50%;
    max-height: 90vh;
    top: 5vh;
    z-index: 101;
    background-color: #e6e6e6;
    border-radius: 2%;
    border: 0.3vh solid black;
    text-align: center;
    font-size: 4vh;
    font-weight: bold;
    max-height: 90vh;
    overflow: scroll;
}

#closeButton {
    position: absolute;
    background-color: var(--closeButtonColor);
    border-radius: 50%;
    top: calc(5vh - 1.5vw);
    right: calc(25% - 1.5vw);
    width: 3vw;
    height: 3vw;
    z-index: 102;
    font-size: large;
    color: white;
    border-color: var(--closeButtonColor);
    
    font-weight: bold;

}

#closeButton:hover {
    background-color: var(--closeButtonHoverColor);
    
}


@media (max-width: 1024px) {
    
    input, select {
        font-size: 2.5vh;
        
    }
    #formTable {
        
        font-size: 2.5vh;
    }
    #formTable td{
        min-width: 30vw;
    }
    
    #submitForm {
        width: 80%;
        max-width: 80vw;
        height: 8vh;
        left: 10%;

    }

    #formArea {
        top: 2vh;
        font-size: 2.5vh;
        left: 5%;
        width: 90%;
        max-height: 85vh;
    }
    #closeButton {
        width: 5vh;
        height: 5vh;
        top: calc(2vh - 2vh);
        right: calc(5% - 2vh);
    }
}


@media (min-width: 600px) and (max-width: 1300px){
    #formArea {
        left: 15%;
        width: 70%;
    }
    #closeButton {
        right: calc(15% - 2vh)
    }

}