/* =============================================================================
/* Global
/* ========================================================================== */

.swift-box-hidden {
	display : none !important;
}

.swift-box,
.swift-box div,
.swift-box-options,
.swift-box-options div,
.swift-box-options span,
.swift-box-options input {
	-webkit-box-sizing : border-box;
	-moz-box-sizing    : border-box;
	box-sizing         : border-box;
}

/* =============================================================================
/* Select
/* ========================================================================== */

.swift-box {
	display             : inline-block;
	vertical-align      : middle;
	min-width           : 4em;
	width               : 120px;
	height              : 1.5em;
	line-height         : 1;
	outline             : none;
	border-radius       : 2px;
	border-color        : #AAA;
	background-color    : #FFF;
	color               : #222;
	font-family         : arial;
	font-size           : inherit;
	font-weight         : normal;
	text-align          : left;
	white-space         : nowrap;
	text-decoration     : none;
	cursor              : pointer;
	-webkit-user-select : none;
	-ms-user-select     : none;
	user-select         : none;
}

.swift-box[disabled],
.swift-box[readonly] {
	cursor : default;
}

.swift-box[readonly]:not([disabled]) {
	display : contents;
}

.swift-box:not([readonly]) .swift-box-readonly,
.swift-box[disabled][readonly] .swift-box-readonly {
	display : none;
}

.swift-box[readonly]:not([disabled]) .swift-box-readonly {
	display             : inline;
	-webkit-user-select : text;
	-ms-user-select     : text;
	user-select         : text;
}

.swift-box[readonly]:not([disabled]) .swift-box-container {
	display : none;
}

.swift-box-container {
	display       : flex;
	height        : 100%;
	border-width  : inherit;
	border-radius : inherit;
	border-color  : inherit;
	color         : inherit;
}

.swift-box-text,
.swift-box-button {
	display      : flex;
	align-items  : center;
	border-color : inherit;
	font-size    : inherit;
	font-family  : inherit;
}

.swift-box-hidden-input-container {
	display : none;
}

.swift-box-text {
	flex-grow                 : 1;
	padding                   : 0 0.2em;
	border-width              : 1px;
	border-style              : solid;
	border-top-left-radius    : inherit;
	border-bottom-left-radius : inherit;
	border-right              : 0;
	color                     : #000;
	overflow                  : hidden;
}

.swift-box-text-value {
	overflow            : hidden;
	text-overflow       : ellipsis;
	-webkit-user-select : text;
	-ms-user-select     : text;
	user-select         : text;
}

.swift-box-button {
	flex-shrink                : 0;
	justify-content            : center;
	width                      : 2em;
	font-size                  : 0.7em;
	line-height                : 0;
	border-width               : inherit;
	border-color               : inherit;
	border-top-right-radius    : inherit;
	border-bottom-right-radius : inherit;
	border-style               : none;
	border-left                : 0;
	background-color           : #4D8CCD;
	color                      : #FFF;
}

.swift-box:hover .swift-box-button,
.swift-box-focus .swift-box-button {
	background-color : #6AA5E2;
}

.swift-box-focus:not([disabled], [readonly]) {
	outline : 2px solid #0AF;
}

.swift-box[disabled] .swift-box-text {
	background-color : #DDD;
	color            : #555;
}

.swift-box[disabled] .swift-box-button,
.swift-box[disabled]:hover .swift-box-button {
	background-color : #BBB;
	color            : #555;
}

/* =============================================================================
/* Options
/* ========================================================================== */

.swift-box-options {
	display             : flex;
	position            : fixed;
	z-index             : 2147483648;
	max-width           : 100vw;
	max-height          : 100vh;
	border              : 2px solid #5AE;
	border-radius       : 5px;
	background-color    : #FFF;
	color               : #222;
	box-shadow          : 3px 3px 3px rgba(0, 0, 0, 0.2);
	font-family         : arial;
	font-size           : 13px;
	line-height         : 1.4em;
	overflow            : hidden;
	overscroll-behavior : contain;
	-webkit-user-select : none;
	-ms-user-select     : none;
	user-select         : none;
}

@media (pointer : coarse) {
	.swift-box-options {
		font-size : calc(max(1em, 16px)) !important;
	}

	@media (max-width : 1024px) {
		.swift-box-options {
			top        : 0 !important;
			max-height : 50vh !important;
		}
	}

	/*
		FireFox incorrectly reports a coarse pointer on some devices.
		Reset the values if the screen width is large.
		https://bugzilla.mozilla.org/show_bug.cgi?id=1806259
		https://bugzilla.mozilla.org/show_bug.cgi?id=1638556
	*/
	@supports (-moz-appearance : none) {
		@media (min-width : 1024px) {
			.swift-box-options {
				font-size : 13px !important;
			}
		}
	}
}

.swift-box-option-container {
	display        : flex;
	flex-direction : column;
	flex-grow      : 1;
	flex-shrink    : 0;
	overflow       : hidden;
}

.swift-box-option-filter-container {
	display        : flex;
	flex-direction : column;
	flex-grow      : 0;
	flex-shrink    : 0;
	padding        : 0.5em;
	border-bottom  : 1px solid #5AE;
	background     : #F6F6F6;
}

.swift-box-options-inverted .swift-box-option-filter-container {
	border-top    : 1px solid #5AE;
	border-bottom : 0;
	order         : 1;
}

.swift-box-option-filter-input-container {
	position : relative;
	display  : flex;
}

.swift-box-option-filter-icon {
	position  : absolute;
	top       : 50%;
	left      : 0.5em;
	transform : translateY(-50%);
	height    : 1.5em;
}

.swift-box-option-filter-input {
	flex-grow     : 1;
	min-width     : 150px;
	padding       : 0.5em 0.5em 0.5em 2.25em;
	border        : 1px solid #CCC;
	border-radius : 3px;
	box-shadow    : 2px 2px 2px rgba(0, 0, 0, 0.1) inset;
	font-size     : inherit;
	line-height   : 1;
}

.swift-box-option-filter-input:focus {
	outline : none;
}

.swift-box-option-scroll {
	position  : relative;
	flex-grow : 1;
	overflow  : auto;
	min-width : 100%;
}

.swift-box-option-list {
	position : absolute;
	top      : 0;
	right    : 0;
	left     : 0;
}

.swift-box-option {
	display     : flex;
	align-items : center;
	padding     : 0 0.5em;
	height      : 1.6em;
	line-height : 1.6em;
	white-space : nowrap;
	overflow    : hidden;
	cursor      : pointer;
}

.swift-box-option-sample {
	position   : absolute;
	top        : -9999px;
	left       : -9999px;
	visibility : hidden;
}

.swift-box-historical-option {
	background : rgb(235, 235, 235);
	font-style : italic;
}

.swift-box-option-text {
	display        : inline;
	vertical-align : middle;
	max-width      : 100%;
	text-overflow  : ellipsis;
	overflow       : hidden;
}

.swift-box-option-text:before {
	content    : '@';
	display    : inline-block;
	width      : 0;
	visibility : hidden;
}

.swift-box-option-text mark {
	background-color : transparent;
	color            : inherit;
	font-weight      : bold;
}

.swift-box-option-empty-text {
	display         : none;
	flex-direction  : column;
	justify-content : center;
	flex-grow       : 1;
	padding         : 0.5em;
	line-height     : 1.4em;
	color           : #444;
	text-align      : center;
	font-style      : italic;
	cursor          : default;
}

.swift-box-option-empty .swift-box-option-empty-text {
	display : flex;
}

.swift-box-option-empty .swift-box-option-scroll {
	display : none;
}

.swift-box-option-highlight {
	background-color : #49D;
	color            : #FFF;
}

/* =============================================================================
/* Multiple Select
/* ========================================================================== */

.swift-box-option-helpers {
	display     : flex;
	padding-top : 0.5em;
	font-size   : 0.9em;
	white-space : nowrap;
}

.swift-box-options-inverted .swift-box-option-helpers {
	padding-top    : 0;
	padding-bottom : 0.5em;
	order          : -1;
}

.swift-box-options:not(.swift-box-option-multiple) .swift-box-option-helpers {
	display : none;
}

.swift-box-option-helper-spacer {
	display   : flex;
	flex-grow : 1;
	min-width : 1em;
}

.swift-box-option-helper {
	display     : flex;
	align-items : center;
	flex-shrink : 0;
	cursor      : pointer;
}

.swift-box-option-helper:not(label) {
	color : #00F;
}

.swift-box-option-helper:not(label):hover {
	text-decoration : underline;
}

.swift-box-option-helper + .swift-box-option-helper {
	margin-left : 1em;
}

.swift-box-option-helper input {
	margin-right : 0.25em;
	width        : 0.9em;
	height       : 0.9em;
}

.swift-box-option-count {
	margin-left : 1em;
}

.swift-box-option-state {
	display          : none;
	vertical-align   : middle;
	min-width        : 10px;
	width            : 1em;
	min-height       : 10px;
	height           : 1em;
	margin-right     : 0.5em;
	border           : 1px solid rgba(0, 0, 0, 0.3);
	border-radius    : 3px;
	background-color : #FFF;
}

.swift-box-option-multiple .swift-box-option-state {
	display : inline-block;
}

.swift-box-option-selected .swift-box-option-state {
	background-color : #18F;
	box-shadow       : 0 0 0 2px #FFF inset;
}

.swift-box-option-multiple .swift-box-option-text {
	max-width : calc(100% - .8em)
}

/* =============================================================================
/* Tag List
/* ========================================================================== */

.swift-box-tag-container {
	display        : none;
	flex-direction : column;
	flex-shrink    : 0;
	border-left    : 1px solid #5AE;
	background     : #FFF;
	box-shadow     : 2px 0 10px rgba(0, 0, 0, 0.1) inset;
	overflow       : hidden;
}

@media (max-width : 1024px) {
	.swift-box-option-container {
		flex-shrink : 1 !important;
	}

	.swift-box-tag-container {
		flex-shrink : 2 !important;
	}

	.swift-box-tag-list {
		overflow-x : auto !important;
	}
}

.swift-box-has-tags .swift-box-tag-container {
	display : flex;
}

.swift-box-tag-list {
	flex-grow  : 1;
	padding    : 0.5em;
	overflow   : auto;
	overflow-x : hidden;
}

.swift-box-tag {
	position  : relative;
	display   : block;
	min-width : 80px;
	cursor    : pointer;
	overflow  : hidden;
}

.swift-box-tag + .swift-box-tag {
	margin-top : 0.25em;
}

.swift-box-tag-checkbox {
	position : absolute;
	left     : -9999px;
	opacity  : 0;
}

.swift-box-tag-text {
	position      : relative;
	padding       : 0.25em 0.75em;
	border        : 1px solid #E0E0E0;
	border-radius : 3px;
	background    : #EEE;
	color         : #444;
	font-size     : 0.9em;
	white-space   : nowrap;
}

.swift-box-tag-checkbox:checked ~ .swift-box-tag-text {
	background : #C34E82;
	color      : #FFF;
}

.swift-box-tag-text:hover {
	border-color : #E0E0E0;
	box-shadow   : 0 0 0 1px #C34E82 inset;
}

.swift-box-tag-options {
	display        : flex;
	flex-direction : column;
	align-items    : flex-end;
	flex-shrink    : 0;
	padding        : 0.5em;
	border-top     : 1px solid #5AE;
	background     : #F6F6F6;
}

.swift-box-tag-option {
	display     : flex;
	align-items : center;
	font-size   : 0.9em;
	white-space : nowrap;
	cursor      : pointer;
}

.swift-box-tag-option input {
	margin-right : 0.25em;
	width        : 0.9em;
	height       : 0.9em;
}