.tab {
        position: relative;
        margin: 2px;
        max-width: 700px;
    }
    /* [THE LABEL] */
    
    .tab input {
		display:none;
    }
    
    .tab label {
        display: block;
		font-size: 14px;
        color: #000000;
        font-weight: bold;
        padding: 6px;
        cursor: pointer;
    }
	
    .tab label::after {
        content: "\25b6";
        position: absolute;
        right: 10px;
        top: 10px;
        display: block;
        transition: all 0.4s;
    }
    
    .tab input[type=checkbox]:checked + label::after,.tab input[type=radio]:checked + label::after {
		color: #ffffff;
        transform: rotate(90deg);
    }
	
	.tab input[type=checkbox]:checked + label,.tab input[type=radio]:checked + label {
		color: #ffffff;
		background-color: #ff0000;
    }
	
    /* [THE CONTENTS] */
    
    .tab-content {
        overflow: auto;
        background: #FFFFFF;
		font-size: 14px;
        /* CSS animation will not work with auto height */
        /* This is why we use max-height */
        transition: max-height 0.4s;
        max-height: 0;
    }
    
    .tab-content p {
        margin: 10px;
    }
    
    .tab input:checked ~ .tab-content {
        /* Set the max-height to a large number */
        /* Or 100% viewport height */
        max-height: 100vh;
    }
    /* [DOES NOT MATTER] */
    
    html,
    body {
        font-family: Verdana;
    }
	
	.tab label:hover {
		color: #ff0000;
	}