.ctnr {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}



.exercise-time-body {
    position: fixed;
    justify-content: center;
    font-size: 20px;
    right: 20px;
    top: 20px;
    z-index: 10000;
}

.timer-message {
    display: block;
    width: 100%;
    font-size: 14px;
    margin-bottom: 5px;
}

.countitem {
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #e9ecef;
}

.countitem .countdown {
    position: absolute;
    height: 5px;
    border-radius: 5px;
    background-color: #056cb7;
    z-index: 2;
    left: 0;
    top: 0;
    background-size: 40px 40px;
    animation: progress_bar_fill 2s linear infinite;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
}

.timer-view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.exercise{
    margin-top: 30px;
}

.exercise-ttl {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.exercise-sub {
    margin-bottom: 10px;
}

.exercise .audio {
    margin-bottom: 10px;
}

.audio .play-button.playing .play-icon path {
    d: path("M192 128h64v256h-64V128zm128 0h64v256h-64V128z");
}

.exercise .audio {
    position: relative;
}

.exercise .play-button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
}

.exercise-desc .audio svg {
    width: 18px;
}

.answer-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 30px;
}

.answer-list__item label {
    position: relative;
    border: 1px solid #84c5fe;
    background: aliceblue;
    padding: 8px 15px;
    margin: 7px;
    font-size: 20px;
    cursor: pointer;
    margin: 0;
    display: block;
    width: 100%;
    min-height: 41px;
}

.answer-list__item label input {
    position: absolute;
}

.answer-list__item {
    list-style: none;
    width: 100%;
}

.answer-list__item input {
    position: absolute;
    top: 13px;
    left: -13px;
    transform: translateX(50%);
}
.exercise-desc textarea{
	width: 100%;
	padding: 10px;
}
.exercise-desc .error{
	margin-top: 10px;
	color: red;
	font-size: 14px;
}
@media (max-width: 992px) {
    .answer-list {
        grid-template-columns: 1fr;
    }
}

.pl-30 {
    padding-left: 30px !important;
}