/************************************
 To overwrite css properties, uncomment/edit them.
 If you decide to change the size of elements,
 please keep in mind both mobile and desktop layouts (media queries)
************************************/

/************************************
        Buttons
*************************************/
.flashlight-dragdropcategorysort .selection-tag{
    padding-left: 8px;
    /*color: #ffffff;*/
    /*border: 1px solid black;*/
}
/************************************
        Draggable areas
*************************************/
.flashlight-dragdropcategorysort h4{
    /*color: #da5124;*/
}
.flashlight-dragdropcategorysort .flashlight-draggable-wrapper{
    /*border: 1px dashed #b1b1b1;*/
}
.flashlight-dragdropcategorysort .flashlight-draggable-wrapper.hover {
    /*background-color: #eaeaea;*/
}

/************************************
        Opt Out
*************************************/
.flashlight-dragdropcategorysort .optout label span.absoluteLabel {
    /*color: #2b542c;*/
}
.flashlight-dragdropcategorysort .optout > i.shown-when-not-selected  {
    /*color: #0f8045;*/
}
.flashlight-dragdropcategorysort .optout > i.shown-when-selected  {
    /*color: #5bc0de;*/
}

/************************************
        Custom question CSS rules

It is not recommended to edit this part.
*************************************/
.flashlight-dragdropcategorysort-container {
    padding-bottom: 10px;
}
.flashlight-dragdropcategorysort .generic-dropdown{
    width: 200px;
    position: absolute;
}
.flashlight-dragdropcategorysort .flashlight-dragdropcategorysort-container{
    border-radius: 5px;
}
.flashlight-dragdropcategorysort .table-targets-wrapper{
    overflow-x: auto;
    position: relative;
    display: block;
}
.flashlight-dragdropcategorysort .table-targets{
    margin-top: 10px;
    width: 100%;
}
.flashlight-dragdropcategorysort .table-targets h4{
    white-space: break-spaces;
}
.flashlight-dragdropcategorysort .table-targets li{
    white-space: unset;
    padding-left: 8px;
    word-break: break-word;
}
.flashlight-dragdropcategorysort .flashlight-dragdropcategorysort-container .multiple-results-wrapper,
.flashlight-dragdropcategorysort .table-targets ul{
    margin-left: 0px;
}
.flashlight-dragdropcategorysort .table-targets td{
    padding: 5px;
    vertical-align: top;
}
.flashlight-dragdropcategorysort .flashlight-draggable-wrapper{
    position:relative;
}
.flashlight-question.flashlight-dragdropcategorysort .input-group {
    display: flex;
}

.flashlight-question.flashlight-dragdropcategorysort .flashlight-dragdropcategorysort-container {
    background: rgba(0, 0, 0, 0.5);    
}

.flashlight-question.flashlight-dragdropcategorysort .flashlight-dragdropcategorysort-container.possible-result {
    width: 50%;
    margin-right: 16px;
    background: unset;
}

.flashlight-question.flashlight-dragdropcategorysort .table-targets-wrapper {
    width: 50%;
    display: block;
    overflow: unset;
}

.flashlight-question.flashlight-dragdropcategorysort .table-targets-wrapper .table-targets {
    margin-top: -20px;
    display: block;
}

.flashlight-question.flashlight-dragdropcategorysort .table-targets-wrapper .table-targets > tbody {
    display: block;
}

.flashlight-question.flashlight-dragdropcategorysort .table-targets-wrapper .table-targets > tbody > tr {
    display: flex;
    flex-direction: column;
}

.flashlight-question.flashlight-dragdropcategorysort .table-targets-wrapper .table-targets .flashlight-draggable-wrapper {
    width: 100% !important;
}