html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, form, input, button, textarea, table, th, td, label {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.content_container {
    max-width: 650px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    font-size: 120%;
    font-weight: bold;
}

.input_container {
    margin-top: 25px;
}

.input_container > div {
    text-align: left;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"] {
    width: 75%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 1s;
}

input[type="text"].highlight {
    background-color: rgb(245, 216, 182);
    transition-duration: 0s;
}

button {
    width: 20%;
    padding: 10px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.accordion_toggle {
    display: none;
}

.accordion_label {
    display: block;
    cursor: pointer;
    /* background-color: #ccc; */
}

.accordion_label::before {
    content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}

.accordion_label,
.accordion_content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.5s;
}

.accordion_content {
	height: 0;
	margin-bottom: 10px;
	padding: 0px 0px;
	overflow: hidden;
}

.accordion_toggle:checked + .accordion_label + .accordion_content {
	height: auto;
	padding: 5px 0px ;
	transition: all 0.5s;
}

.accordion_label > span:nth-child(2){
    display: none;
}
.accordion_toggle:checked + .accordion_label > span:nth-child(1) {
    display: none;
}
.accordion_toggle:checked + .accordion_label > span:nth-child(2) {
    display: inline;
}

.accordion_toggle:checked + .accordion_label::before {
    transform: rotate(-45deg) !important;
}

.ac_table th {
    font-weight: bold;
    padding: 5px 20px;
    text-align: center;
}

.ac_table td {
    padding: 5px 20px;
    text-align: center;
}

.ac_table tr:nth-child(odd) {
    background-color: #efefef;
}

.ac_table tr:nth-child(1) {
    background-color: #ddd !important;
}

.footer {
    margin-top: 30px;
    text-align: center;
    font-size: 80%;
}

@media screen and (max-width: 600px) {
    .input_container > div {
        text-align: center;
    }
    input[type="text"] {
        width: 95%;
    }
    button {
        margin-top: 10px;
        width: 100%;
    }
}