@CHARSET "ISO-8859-1";
.cwp_container {
	position: relative;
	width: 100%;
	height: 100%;
}

.cwp_p_container {
	display: inline-block;
	position: absolute;
	width: 550px;
	min-width: 550px;
	height: 550px;
	border: thick;
	border-color: black;
	border-style: double;
}

.cwp_q_container {
	display: inline-block;
	position: absolute;
	width: 39%;
	height: 600px;
	left: 45%;
}

.cwp_b_container {
	display: block;
	position: absolute;
	width: 60%;
	height: 50px;
	top: 550px;
	width: 550px;
}

.cwp_h2_main {
	color: graytext;
	margin-top: 0px;
	margin-bottom: 10px;
}

.cwp_h4_q {
	margin-top: 10px;
}

.cwp_h5_q {
	position: relative;
	width: 15%;
	left: 15%;
	margin-top: 15px;
	margin-bottom: 5px;
	left: 15%;
}

.cwp_q_span {
	position: relative;
}

.cwp_b_button {
	width: 46%;
	height: 30px;
	margin-left: 1.8%;
	margin-right: 1.8%;
	margin-top: 20px;
	margin-bottom: 10px;
	border-radius: 16px;
}

.cwp_p_button {
	width: 40%;
	height: 40%;
	margin-top: 30%;
	margin-bottom: 30%;
	margin-left: 30%;
	margin-right: 30%;
	border-radius: 10px;
	font-size: medium;
}

.cwp_cell_wrapper {
	position: relative;
}

.cwp_cell {
	width: 4.27%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-size: medium;
	font-weight: bold;
	text-transform: uppercase;
	cursor: crosshair;
}

.cwp_cell_row {
	height: 4.96%;
}

.cwp_cell_disable {
	border: hidden;
	padding: 1.99px;
	background-color: rgb(220, 220, 220);
	border-color: rgb(220, 220, 220);
	cursor: default;
}

.cwp_cell_enable {
	border-color: white;
} 

.cwp_q_index_span {
	position: absolute;
	left: 3px;
	z-index: 2;
	font-size: x-small;
	z-index: 2;
}

.cwp_cell_sol_true {
	color: green;
}

.cwp_cell_sol_false {
	color: red;
}

/* Media Queries untuk Mobile dan Tablet */
@media screen and (max-width: 1023px) {
    .cwp_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        padding: 10px;
    }
    
    .cwp_p_container {
        position: relative; /* Ubah ke relative */
        width: 100%;
        max-width: 550px;
        height: auto;
        aspect-ratio: 1/1; /* Menjaga rasio aspek 1:1 */
        margin: 0 auto 20px;
    }
    
    .cwp_q_container {
        position: relative; /* Ubah ke relative */
        width: 100%;
        max-width: 550px;
        height: auto;
        left: 0;
        margin: 20px auto;
    }
    
    .cwp_b_container {
        position: relative; /* Ubah ke relative */
        width: 100%;
        max-width: 550px;
        height: auto;
        top: 0;
        margin: 20px auto;
    }

    /* Penyesuaian ukuran sel untuk mobile */
    .cwp_cell {
        font-size: 14px;
    }

    /* Penyesuaian tombol untuk mobile */
    .cwp_b_button {
        width: 45%;
        height: 40px;
        margin: 10px 2.5%;
    }
}

/* Media Queries untuk Desktop */
@media screen and (min-width: 1024px) {
    .cwp_container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .cwp_p_container {
        position: absolute;
        width: 550px;
        height: 550px;
    }
    
    .cwp_q_container {
        position: absolute;
        width: 39%;
        height: 600px;
        left: 45%;
    }
    
    .cwp_b_container {
        position: absolute;
        width: 550px;
        height: 50px;
        top: 550px;
    }
}

/* Optimisasi untuk perangkat touchscreen */
@media (hover: none) {
    .cwp_cell {
        cursor: pointer;
    }
    
    .cwp_cell_enable:active {
        background-color: rgba(0, 0, 0, 0.1);
    }
}