/**
* multi-list.js is a jQuery plugin to turn a <ul> element into a multiple selectable list
*
* Author: Albert Gonzalez - http://www.albertgonzalez.coffee
* 
* Under a UNLICENSE (http://unlicense.org/)
*/

/* Main ul container */
.ml-container {
	margin: 0 0px;
}

/* List */
.ml-ul {
	overflow: auto;
	list-style-type: none;
	padding: 0;
	margin-top: 0px;
	max-height: 340px;
	border: 1px solid #CCCCCC;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top: none;
	min-height: 340px;
}

.maxOut .ml-ul {
	overflow: auto;
	height: 1100px;
	max-height: 1100px;
}

.ml-ul label {
	width: 100%;
	font-size: 16px;
	font-family: sans-serif;
	cursor: pointer;
	padding: 0px !important;

	/* Non selectable */
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
}

/* List input item */
.ml-input-container .ml-input-filter {
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555555;
	background-color: #FFFFFF;
	background-image: none;
	border: 1px solid #CCCCCC;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom: 1px solid #eaeaea;
}

/* List item */
.ml-li {
	border-bottom: 1px solid #D0DBE0;
	padding: 10px 10px 7px 10px;
	margin-right: 10px;
}

.ml-li input {
	margin-right: 10px;
}

.ml-li .ms-selectedObject {
	display: inline-block;
	width: Calc(100% - 40px);
	padding: 5px 0 5px 10px;
	box-sizing: border-box;
}

.ml-li input:checked ~ .ms-selectedObject {
	background-color: #ddffdd;
}

.ml-li span {
	margin-left: 5px;
}

.ml-disabled-element-li {
	background-color: #E4E8EA;
}

.ml-disabled-element-li label {
	padding-left: 23px;
}

.ml-hide {
	display: none !important;
}

.form-group-books .ml-ul,
.form-group-games .ml-ul,
.form-group-animes .ml-ul,
.form-group-movies .ml-ul
{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	flex-direction: row;
}

.form-group-books .ml-ul label,
.form-group-games .ml-ul label,
.form-group-animes .ml-ul label,
.form-group-movies .ml-ul label {
	width: 150px;
}

.series-to-game-img {
	width: 150px;
	height: 150px;
	object-fit: contain;
}

.ml-li[data-selected="true"] {
	background-color: #ccc;
}