/* css of all types of kques */

.kques-item {
    background-color: #FFF;
    position: relative;
}

/* uid */
.kques-item .uid {
    position: absolute;
    right: 5px;
    bottom: 0px;
    padding: 5px;
    font-size: 0.8em;
    color: #ccc;
}

.kques-item .sn {
    position: absolute;
    left: 0;
    top: 10px;
    width: 30px;
    padding: 1px 3px 1px 3px;
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    color: #fff;
    border-radius: 0 10px 10px 0;
    /*background: #001eb9;*/
    background: #2e76b4;
}
.sub-container .kques-item .sn {
    font-size: 0.9em;
    color: #000;
    border-radius: 0;
    background: transparent;
}

.kques-item input[type=checkbox],
.kques-item input[type=radio] {
    margin-right: 10px;
}



.kques-item .content {
    padding: 12px 36px;
}

.kques-item .question {
    margin-bottom: 4px;
}
.kques-item .question-hint {
    margin-bottom: 8px;
}
.kques-item .option-container {
    padding-left: 0px;  /* 修改 ul 預設會 padding 的樣式，讓選項靠左對齊 */
}

.kques-item .optionSn {
    box-sizing: content-box;
    display: inline-block;
    padding-left: 4px;
    padding-right: 4px;
}



/* selection */
.kques-item .option-item {
    display: block;
    padding: 4px 0px;
}

.kques-item .option-item input[type=checkbox],
.kques-item .option-item input[type=radio] {
    float: left;
}

.kques-item .option-item .optionSn {
    float: left;

}

.kques-item .option-item .option {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kques-item .option-item input.other-input{
    margin:5px 0;
}

/* gapfill input */
.kques-item input.other-input {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0px;
    margin: 0px 2px;
    width: 100%;
}

.kques-item input.other-input:focus{
    outline: none;
}

.kques-item input.other-input:disabled {
    background-color: white;
}

/* selection option image */
img.optionImg {
    vertical-align: top;
}

/* gapfill */
.kques-item .gap-preview {
    padding: 0px 8px;
    border-bottom: 1px solid #AAA;
}

/* gapfill input */
.kques-item input.gap-input {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0px;
    text-align: center;
    margin: 0px 2px;
    max-width: 100%;
}

.kques-item input.gap-input:focus{
    outline: none;
}

.kques-item input.gap-input:disabled {
    background-color: white;
    /*cursor: not-allowed;*/
}



/* gapfill answer */
.kques-item .gap-answer {
    display: inline-block;
    border-bottom: 1px solid #000;
    padding: 1px 8px;
}

/* corrext gap answer */
.kques-item input.gap-input.is-correct,
.kques-item .gap-answer.is-correct {
    background-color: #e6f3e6;
}

/* wrong gap answer */
.kques-item input.gap-input.is-wrong,
.kques-item .gap-answer.is-wrong {
    background-color: #ffeeee;
}
.kques-item .gap-answer.is-wrong .user-answer,
.kques-item .gap-answer.is-wrong .right-answer {
    margin: 0px 2px; /* space between user-answer and right-answer*/
}

.kques-item .gap-answer.is-wrong .user-answer {
    /* red circle */
    border: 2px solid rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    padding: 3px 6px;
}

.kques-item[state="wrong"] .answer .right-answer, /* show right answer in true/false and selection */
.kques-item .gap-answer.is-wrong .right-answer { /* show right answer in gapfill */
    font-weight: bold;
    color: #e97a7a;
}

/* answer */
.kques-item .answer {
    margin-bottom: 10px;
}


/* explaination */
.kques-item div.explaination {
    background-color: #F8F8F8;
    margin-bottom: 20px;
    padding: 10px 12px;
}
.kques-item div.explainVideo {
    margin: 6px 0px;

}

/* property */
.kques-item .property {
    border-top: 1px solid #DDD;
    padding-top: 10px;
}
.kques-item .property-key {
    font-weight: bold;
    margin-right: 4px;
}

.kques-item .property-value {
}

/* override bootstrap */
.kques-item label {
    font-weight: normal;
}

/* increase space between tf and selection options */
.kques-item .option-item label {
    /* padding: 2px 10px; 因為 option-item 已經有 space 了 */
    width: 100%;
}

/* answer panel */
.kques-item .answer-panel {
    position: relative;
    border-top: 1px solid #EEE;
    padding: 10px;
    text-align: center;

    height: 56px; /* as high as state-panel */
}
.kques-item .answer-panel [role="submit-answer"].shake {
    animation-name: shakeYaxis;
    animation-duration: 0.8s;
    animation-iteration-count: 1;
}
.kques-item .answer-panel .show-answer {
    position: absolute;
    top: 18px;
    right: 16px;
    font-size: 0.8em;
}
.kques-item .not-answered-msg {
    position: absolute;
    margin: auto;
    top: -24px;
    left: 0px;
    right: 0px;
    text-align: center;
    z-index: 10;

    animation-name: floatUp;
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.kques-item .not-answered-msg > .glyphicon {
    color: #AAA;
}


/* state panel, show correct or wrong when kques is completed */
.kques-item .state-panel {
    display: none; /* hide when not-completed and state isn't defined */
    position: relative;
    border-top: 1px solid #EEE;
    padding: 10px;
    text-align: center;
    height: 56px;
}
.sub-container .kques-item .state-panel {
    border-top: none;
}

/* hide answer panel when kques is completed */
.kques-item.completed .answer-panel {
    display: none;
}

.kques-item.completed .state-panel {
    display: block;
}

/* correct / wrong */
.kques-item.completed[state="wrong"] .state-panel:after,
.kques-item.completed[state="correct"] .state-panel:after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    right: calc(50% - 16px);
    top: 10px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;

    animation-name: zoomin;
    animation-duration: .2s;
    animation-iteration-count: 1;
}
.kques-item.completed[state="correct"] > .state-panel:after {
    background-image: url("/sys/res/icon/correct.png");
}
.kques-item.completed[state="wrong"] > .state-panel:after {
    background-image: url("/sys/res/icon/wrong.png");
}

.kques-item.completed[type="4"] > .state-panel:after {
    background-image: none;
}
.kques-item.completed[type="4"] > .state-panel .stateHint {
    color: #FF6600;
}

.kques-item.completed[type="5"] > .state-panel {
    display: none;
}


.kques-item .essayAuditField {
    width:80px;
}

.kques-item .kq-required{
    border-left: 5px solid #ff006d;
}

/*matrx*/
.matrix-table input[type=radio] {
    margin-right: 0px;
}

.matrix-table {
    padding-right: 30px;
}

.matrix-table thead th{
    text-align: center;
}

.matrix-table tbody td{
    text-align: center;
}
.matrix-table tbody th,
.matrix-table tbody td {
    border-top: 0px;
}

@media (min-width: 768px) { /* larger than 768 */
    .kques-item .sn {
        width: 45px;
        font-size: 1.2em;
    }

    .kques-item .content {
        padding: 14px 60px;
    }
    .sub-container .kques-item .content {
        padding-left: 40px;
        padding-right: 40px;
    }

@media (min-width: 992px) { /* larger than 992 */
    .matrix-table thead .quesCol{
        width: 47%;
    }
    .matrix-table .record thead .quesCol{
        width: 25%;
    }
}


@keyframes shakeYaxis {
    0%      { transform: rotateY(40deg) translate(0px, 0); }
    10%     { transform: rotateY(-40deg) translate(24px, 0); }
    20%     { transform: rotateY(35deg) translate(-24px, 0); }
    30%     { transform: rotateY(-35deg) translate(14px, 0); }
    40%     { transform: rotateY(30deg) translate(-14px, 0); }
    50%     { transform: rotateY(-30deg) translate(6px, 0); }
    60%     { transform: rotateY(25deg) translate(-6px, 0); }
    70%     { transform: rotateY(-25deg) translate(3px, 0); }
    80%     { transform: rotateY(20deg) translate(-3px, 0); }
    90%     { transform: rotateY(-20deg) translate(1px, 0); }
    100%    { transform: rotateY(0deg) translate(0px, 0); }
}

@keyframes floatUp {
    0% {
        transform: translate(0, 30px) scale(0.3);
        opacity: 0.3;

    }
    100% {
        transform: translate(0, 0px) scale(1);
        opacity: 1;
    }
}

@keyframes zoomin {
    0% {
        transform: scale(0.5);
    }
    80% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}