/* filter */
.kques-container .filter-panel {
    margin-bottom: 10px;
    text-align: right;
}
.kques-container .filter-panel .filter-item {
    display: inline-block;
    width: 50%;
}

.kques-container .filter-panel .filter-name {
    display: inline-block;
    float: left;
    padding: 6px;
    width: 70px;
    font-size: 12px;
}
.kques-container .filter-panel .filter-selectWrapper {
    overflow: hidden;
}

.kques-container .filter-panel .filter-hint {
    height: 0px;
    overflow: hidden;
    transition-timing-function: ease;
    transition-duration: .3s;
    transition-property: height margin;
}
.kques-container.filtering .filter-panel .filter-hint {
    margin-top: 6px;
    height: 18px;
}

.kques-container .filter-panel a[role="filter-showAll"] {
    margin-left: 6px;
}

.kques-container {
    min-height: 350px;
    position: relative;
    overflow: hidden;
}

.kques-container.processing .kques-item {
    transition: opacity .1 linear;
    opacity: 0.5;
}
.kques-container.processing:after {
    background-image: url(/sys/res/icon/loading.gif);
    top: 150px;
    bottom: initial;
}

.kques-container .container-msg {
    height: 350px;
    padding: 160px 0px;
    color: #BBB;
    font-size: 16px;
    text-align: center;
}

/* kques item */
.kques-item,
.kques-container > .placeholder {
    padding-bottom: 10px;
}

/* avoid set child tool cover over parent tool*/
.kques-container > .kques-item > .tool {
    z-index: 11;
}

/* show kques border in kques list */
.kques-item {
    border-top: 1px solid #DDD;
}
.kques-item:last-child {
    border-bottom: 1px solid #DDD;
}
.sub-container .kques-item {
    border: none;
    border-bottom: 1px dotted #CCC;
    border-radius: 0;
}

/* grab */
.kques-item > .grab {
    position: absolute;
    top: 1px;
    left: -17px;
    opacity: 0;
}
.kques-item:hover > .grab {
    opacity: 1;
}

/* hide tool, show when hovering kques item */
.kques-item > .tool {
    opacity: 0;
}

.kques-item:hover > .tool, .kques-listEdit .kques-item .tool.active {
    opacity: 1;
}

/* sortable style */

.kques-container.ui-sortable {
    overflow: auto; /* fix helper position error bug */
    overflow-x: hidden;
}

.kques-item:before { /* prepend transparent area to avoid grab flashing */
    content: "";
    display: block;
    width: 16px;
    height: 100%;
    position: absolute;
    right: 100%;
}

.kques-item.sorting {
    min-height: 80px;
}
.kques-item.sorting .tool {
    display: none;
}

.kques-item.sorting .content > * {
    overflow: hidden;
}

.kques-container > .placeholder {
    border-radius: 4px;
}

.kques-item.ui-sortable-helper {
    box-shadow: 0px 8px 20px 2px rgba(0, 0, 0, 0.3);
    left: 16px !important; /* keep helper align */
}

.kques-item.ui-sortable-helper .grab {
    opacity: 1; /* keep grab visible */
}

.kques-item.kques-item-has-error{
    border: 1px solid #ff006d;
}

.question-alert{
    color: red;
}

.kques-item.kques-item-group{
    border: none;
    margin-bottom: 10px;
}
.kques-item.kques-item-group .content{
    padding:0;
}

.kques-item .essay-answer-area{
    border:1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    background-color: #f8f8f8;
}

.kques-item .text-answer-area{
    border: 0;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    border-radius: 0px;
    border-bottom: 3px solid #ccc;
    transition: all .15s ease-in-out;
}

/* hide grab, tool in small window, filtering mode, editing mode */
.kques-container .kques-item > .grab,
.kques-container .kques-item > .tool,
.kques-container.filtering .kques-item > .grab,
.kques-container.editing .kques-item > .grab,
.kques-container.editing .kques-item > .tool {
    display: none;
}

@media (min-width: 768px) { /* larger than 768 */



    /* right align filter */
    .kques-container .filter-panel .filter-item {
        display: inline-block;
        margin-left: 10px;
        width: initial;
    }
    .kques-container .filter-panel .filter-name {
        width: initial;
    }
    .kques-container .filter-panel .filter-selectWrapper {
        display: inline-block;
    }

    .kques-container .filter-panel select.form-control {
        display: inline-block;
        min-width: 120px;
        width: auto;
    }

    /* show kques border in kques list */
    .kques-item {
        border: 1px solid #DDD;
        border-radius: 5px;
    }

    .kques-item,
    .kques-container > .placeholder {
        padding-bottom: 0px;
        margin-bottom: 20px;
    }




}



@media (min-width: 992px) { /* larger than 992 */
    .kques-container .kques-item > .grab,
    .kques-container .kques-item > .tool {
        display: block;
    }

    .kques-container.ui-sortable {
        padding: 0px 16px; /* space for grab */
    }

}