@charset "utf-8";

body{
	background-color: #fff;
}

article#main_article{
	text-align: left;
	width: 60%;
	border:none;
	border-radius: 0;
	padding-top: 13%;
}

section.logo_section{
	display: block;
	box-sizing: border-box;
	position: relative;
	text-align: left;
}

section.input_section{
	display: block;
	margin-top: 1em;
	padding: 1.5em 3em 1em 3em;
	box-sizing: border-box;
	border: 1px solid #ddd;
	border-radius: 0.5em;
	position: relative;
}

section.input_section:after{
	content: "";
	clear: both;
	display: block;
}

div.input_row, div.control_row{
	display: block;
    box-sizing: border-box;
	padding: 0.5em;
	clear: both;
    width: 100%;
}

div.input_name{
	text-align: right;
	padding-right: 0.5em;
	float: left;
	width: 7em;
}

div.input_name:after{
	content: " : ";
}

div.input_value{
	float: left;
    box-sizing: border-box;
}

div.input_value input{
    width: 20em;
}

div.control_row > button{
    float: right;
	margin-right: 1em;
}

section.message_section{
    margin: 0.8em;
    font-size: 0.8em;
    color: #aaa;
}

section.error_message_section{
    font-size: 0.8em;
    color: #f70710;
}

p.errorMessage{
    font-size: 0.72em;
    color: #f70710;
}

@media screen and (max-width: 980px) {
    article#main_article{
        width: 80%;
    }
}

@media screen and (max-width: 750px) {
    
    div.input_name, div.input_value{
        box-sizing: border-box;
        float: none;
        width: 100%;
        text-align: left;
    }

    div.input_value input{
        width: 100%;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 600px) {
    article#main_article{
        padding-top: 5%;
        width: 100%;
    }

    section.input_section{
        border: none;
    }
}