@charset "utf-8";
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400&display=swap);
/* CSS Document */
* {
    box-sizing: border-box;
	
}
body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  background-color :#b0a3cf;
  font-weight: bold;
}
input[type=tel], input[type=text]{	
    width: 100%;
    padding: 2px 5px 2px 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
	font-size: 20px; 
	color:#5a316b;
	background-color :#dbe0e4;
	margin-top: -30;
}
.labelpurple{
    padding: 12px 12px 10px 0px;
    display: inline-block;
	margin-top: -35;
	font-size: 20px;
    color:#5a316b;	
    
}
.labelgray{
    padding: 12px 12px 10px 0px;
    margin-top: -50;
    display: inline-block;
	font-size: 20px;
    color:#6d6e72;	
}
.labelgray2{
   
    margin-top: -40;
    display: inline-block;
	font-size: 18px;
    color:#6d6e72;	
}
input[type=submit] {
	
    background-color: #dbe0e4;
    color: #5a316b;
    padding: 4px 30px 4px 30px;
	border: 1px solid #ccc;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    float: right;
	font-size: 22px; 
	margin-top: -40;
    font-weight: bold;

}
input[type=submit]:hover {
    background-color: #cbd3d9;
}

.container {
	
    background-color :#b0a3cf;
    padding: 20px 20px 20px 20px;
    margin: -5px 0px 0px 0px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 5px;
	margin-right : -12px;
}
.col-35 {
    float: left;
    width: 35%;
    margin-top: 5px;
}
.col-50 {
    float: left;
    width: 50%;
    margin-top: 5px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {
    .col-25, .col-35,.col-50 , input[type=submit] {
        width: 100%;
    }
}