/**
*
* CSS styles for the Commercial ProcessWire Module Dynamic Selects (Render)
*
* @author Francis Otieno (Kongondo) <kongondo@gmail.com>
*
* Copyright (C) 2016 by Francis Otieno
*
*/

/* FLEX ROW */
div.dynamic_selects_wrapper.row {
	/* flex */
	display: flex;
	flex-wrap: wrap;
	/* other stuff */
	/*  padding: 1em;
  overflow: hidden; */
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	div.dynamic_selects_wrapper.row {
		flex-direction: column;
	}
}
/* FLEX COLUMN */
div.ds.col {
	flex: auto;
	margin: 0.2em;
	/* @TODO: unsure if to add background-color maybe in admin only?*/
	/* background-color: rgba(204, 204, 204, 0.125);
	background-color: rgba(240, 243, 247, 0.424); */
	padding: 1em;
	position: relative;
}

/* selects */
select.ds {
	width: 100% !important;
	min-width: 150px !important;
}
/* span */
span.ds_spinner {
	/*margin-left: 0.25em;*/
	position: absolute;
	display: inline-block;
	text-align: center;
	right: 5%;
	top: 0;
	z-index: 1000;
}
span.ds_spinner i.ds_spinner,

/* OTHER */
.ds_empty {
	display: none !important;
}
ul.ds_cached {
	display: none;
}
/* debugger list */
ol#ds_debug_results_list li {
	margin: 0;
}
div.InputfieldContent ol#ds_debug_results_list li {
	margin-left: 2em;
}
.hide {
	display: none !important;
}

/* MULTILINGUAL LABEL SELECTORS */
div.ds_label_language_selector {
	height: 25px;
	margin-bottom: 10px;
}
span.ds_language_selector {
	display: inline-block;
	margin-top: 5px;
	margin-right: 5px;
	font-size: 85%;
	cursor: pointer;
	padding: 0 0.25em;
}
span.ds_language_active {
	background-color: #d2dce6;
}

table.ds_multilingual input:not(.ds_language_label),
table.ds_multilingual select {
	margin-top: 35px !important;
}