/* ------ lists.css - styles that override bootstrap for system lists ------ */



/**** Checkbox List ****/
.checkboxlist {
    font-style: normal;
    font-weight: 400;
    color: var(--dtm-main-text);
}

.bootstrap-noDraggable-duallistbox-container {
	margin-inline: 1px;
}

.bootstrap-noDraggable-duallistbox-container option {
    min-height: 1.5em;
}

.bootstrap-noDraggable-duallistbox-container button {
	border: 1px solid var(--dtm-form-field-border) !important;
	border-bottom: none;
    border-radius: 4px 4px 0px 0px;
}

.bootstrap-noDraggable-duallistbox-container select {
    border-top: 0;
}

.bootstrap-noDraggable-duallistbox-container button:hover {
	border: 1px solid var(--dtm-form-field-border);
	border-bottom: none;
    border-radius: 4px 4px 0px 0px;
    background-color: var(--dtm-hover-bg);
}

.dual-list-listbox {
    border-radius: 0px 0px 4px 4px;
}

/* Multiplelist Component */
.bootstrap-duallistbox-container > div > .btn-group.buttons {
    width: 100%;
}

.bootstrap-duallistbox-container > div > .btn-group.buttons > button {
    background-color: var(--dtm-hover-bg);
    border: 1px solid var(--dtm-form-field-border);
    border-bottom: 0px;
}

.bootstrap-duallistbox-container > .box1 > .btn-group.buttons > button.btn.moveall,
.bootstrap-duallistbox-container > .box2 > .btn-group.buttons > button.btn.remove {
    border-radius: 4px 0 0 0;
}

.bootstrap-duallistbox-container > .box1 > .btn-group.buttons > button.btn.move,
.bootstrap-duallistbox-container > .box2 > .btn-group.buttons > button.btn.removeall {
    border-radius: 0 4px 0 0;
}

.bootstrap-duallistbox-container > div > select.form-control {
    border-radius: 0 0 4px 4px
}

.complex_duallist_layout .table-responsive,
.selected_items_container .complexduallist_selectedtable {
    margin-bottom: 0;
}

/* Bug 1966151: Fixed too long single selectbox fields */
#change_candidate_status .input-group{
	display: inline-flex;
}

.card-body ul.two-column-list {
    display: flex;
    flex-wrap: wrap;
}

.card-body ul.two-column-list li{
    flex: 50%;
}

@media (max-width: 600px) {
    .card-body ul.two-column-list li{
        flex: 100%;
    }
}