
/* hide uid */
.take-main .kques-item .uid {
    display: none;
}


/* control panel */
.take-main .control-panel {
	text-align: center;
    padding: 5px;
}
    .take-main .control-panel button.kques-control {
    	margin: 0px 10px;
    }


    /* sn list */
    .take-main .control-panel .sn-list {
    	display: inline-block;
    	text-align: center;
    }
    .take-main .control-panel .sn-list .dropdown-toggle  {
    	padding: 7px; /* expand clickable area */
    }


    /* align center */
    .take-main .control-panel .sn-list .dropdown-menu {
        left: 50%;
        right: initial;
        transform: translateX(-50%);
    }

    /* sn list in controlpanel triangle position */
    .take-main .control-panel .sn-list .dropdown-menu:before {left: 34px;}
    .take-main .control-panel .sn-list .dropdown-menu:after  {left: 35px;}


/* sn list style */

.take-main .sn-list .dropdown-menu {
    max-height: 250px;
    min-width: initial;
    overflow: auto;
}
.take-main .sn-list .dropdown-menu .sn-list-opt {
	position: relative;
    width: 30px;
    box-sizing: content-box;
    text-align: center;
    padding: 6px 32px;
    font-size: 16px;
}

.take-main .sn-list .dropdown-menu .sn-list-opt:before {
    content: "";
    position: absolute;
    margin: auto;
    top: 0px;
    bottom: 0px;
    left: 20px;
    width: 12px;
    height: 12px;
    background-position: center;
    background-size: contain;
}

 /* correct sn option */

.take-main .sn-list .dropdown-menu .sn-list-opt[state="correct"] {
	font-weight: bold;
    color: #66cc99;
}
.take-main .sn-list .dropdown-menu .sn-list-opt[state="correct"]:before {
    background-image: url("/sys/res/icon/correct.png");

}

 /* wrong sn option */

.take-main .sn-list .dropdown-menu .sn-list-opt[state="wrong"] {
	font-weight: bold;
    color: #ccc;
    
}
.take-main .sn-list .dropdown-menu .sn-list-opt[state="wrong"]:before {
    background-image: url("/sys/res/icon/wrong.png");
}

 /* done sn option */

.take-main .sn-list .dropdown-menu .sn-list-opt[state="done"] {
    /*color: #AAA;*/
}
.take-main .sn-list .dropdown-menu .sn-list-opt[state="done"]:before {
    background-image: url("/sys/res/icon/gray_check_xs.png");
}

.kques-item textarea[id^="essay_Ans"] {
    min-height: 100px;
    resize: vertical;
}