/* common */
.ms-select {padding: 10px 15px; color: #000; background: #FFF; border: 1px solid #EEDDCC; border-radius: var(--brb); cursor: pointer; overflow: clip; box-sizing: border-box; display: flex; flex-flow: column; justify-content: center; height: 70px;}/* height: 38px;*/
.ms-select span { display: block; margin: 3px 0 2px 0; }

.ms-txt {
	border: 1px solid #DDD;
	border-radius: var(--br);
	border-collapse: separate;
	padding: 8px;
	margin: 0;
	box-sizing: border-box;
	outline: none;
	font-size: 15px;
}
.ms-ok {text-align: center; margin-top: 20px; padding: 12px; background: var(--bd); border-radius: var(--br); cursor: pointer; font-weight: bold;}

/* dialogs */
.ms-cont {
	display: none;
	position: absolute; left: 15px; right: 15px;
	margin-top: 5px;
	padding: 20px;
	background: #FFF; /*#FBFAF6;*/
	border-radius: var(--brb);
	box-shadow: 0 3px 7px rgba(0,0,0,0.3);
	z-index: 100;
}
.cs-cont { padding: 0; left: 15px; right: 15px; }


/* country */
/* label */
.cs-add {color: #000; white-space: nowrap; cursor: pointer;}
.cs-add svg {width: 18px; margin: 0 7px -3px 0; stroke: #777; stroke-width: 2px; stroke-linecap: round;}
.cs-inf { font-size: .9rem; letter-spacing: -0.7px; color: #777; display: none; margin: 0 7px 0 0; padding: 3px 7px; border-radius: 15px; background: var(--bd); white-space: nowrap; }
.cs-text { width: 100%; border: 0; outline: none; margin: 0; padding: 0 12px 0 0; box-sizing: border-box; }
/* wrap */
.cs-div { margin: 5px 0; line-height: 25px; }
.cs-div span { font-size: .9rem; padding: 7px 7px 7px 10px; background: #FFF; border: 1px solid #EEDDCC; /*#FBFAF6;*/ border-radius: var(--br); white-space: nowrap; }
.cs-div span b { display: inline-block; font-size: .75rem; color: #AAA; padding: 5px 5px 5px 7px; cursor: pointer; }
/* sort switch */
.cs-select { padding: 7px 12px; border-radius: 20px; cursor: pointer; }
.cs-on { background: var(--bd); }
.cs-sort { font-size: 0.9rem; padding: 15px; border-bottom: 1px solid #E9E9E9; }
.cs-sort b { float: right; margin-left: 5px; border: 0; color: #999; }
.cs-sort div { text-align: center; }
/* dest list */
.cs-list { overflow: auto; height: 275px; padding: 7px 0;}
.cs-list div { padding: 12px 16px; cursor: pointer; }
.cs-list div:hover { background-color: var(--bg); }
.cs-ok { border-top: 1px solid #E9E9E9; padding: 15px; text-align: center; font-weight: bold; cursor: pointer; }

/* whom */
.ms-whom-label {display: flex; align-items: center; gap: 7px;}
.ms-whom-label img {width: 20px; height: 20px; margin: -1px 0 0 -1px;}
.ms-whom-label span {flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-whom-label div {display: none; flex-shrink: 0; width: 7px; height: 7px; margin-top: 1px; background: var(--bt); border-radius: 50%;}

.ms-whom-list {
	line-height: 280%;
	margin: 0 0 15px 0;
}

.ms-whom-list span {
	color: #000;
	background: #FFF;
	padding: 10px 10px;
	box-shadow: inset 0 0 0 1px #DDD;
	border-radius: var(--br);
	white-space: nowrap;
	cursor: pointer;
}
.ms-whom-list .act {background: #EEFBE3; box-shadow: inset 0 0 0 2px #99CC77;}/* #F5EEE5 #DDAA77 */

.ms-whom-list span img {
	width: 20px;
	margin: 0 5px -4px 0;
}


/* where from */
.ms-where-label { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-where-label svg {width: 16px; height: 16px; margin: 0 5px -2px 0;}

.ms-city {display: flex; align-items: center; gap: 7px; padding: 5px 0 10px 0;}
.ms-city > input {flex-grow: 1;}
.ms-city > div {flex-shrink: 0;}

.ms-x {
	display: inline-flex;	
	width: 15px; height: 15px;
  align-items: center;
  justify-content: center;
	padding: 3px;
	border: 1px solid #DDD;
	border-radius: 50%;
	font-size: 12px;
	line-height: 1;
	color: #BBB;
	cursor: pointer;
}

.ms-dist  {
	margin: 15px 0 15px 0;
	appearance: none;
	background: var(--bt);
	height: 3px;
	}

/* filters */
.ms-filter-label {display: inline-flex; align-items: center; gap: 7px; padding-top: 2px; cursor: pointer;}
.ms-filter-label span {flex-grow: 1;}
.ms-filter-label b { display: block; line-height: 0px; padding: 5px; border: 1px solid #EEDDCC; border-radius: 50%; background: #FFF; }
.ms-filter-label svg {flex-shrink: 0; stroke: #777; stroke-width: 3px; stroke-linecap: round; }
.ms-filter-label div {display: none; flex-shrink: 0; width: 7px; height: 7px; margin-top: 1px; background: var(--bt); border-radius: 50%;}

.ms-calendar {width: 0; height: 0; margin: 5px 0 0 0;}

.ms-travel {padding: 12px 0;}
.ms-travel div {display: inline-block; font-size: 0.9rem; background: ".$style."; cursor: pointer; margin: 3px 0; padding: 7px 10px; box-shadow: inset 0 0 0 1px #DDD; border-radius: var(--br); white-space: nowrap;}
.ms-travel .act {background: #EEFBE3; box-shadow: inset 0 0 0 2px #99CC77;}
.ms-travel span {font-size: 0.8rem;}

.ms-submit { height: 45px; width: 100%; font-weight: bold; margin-top: 10px; }

/* Desktop */
@media (min-width: 768px) {
	.ms-cont {width: 300px; left: auto; right: auto;}
	.cs-cont { width: 350px; left: auto; right: auto; }
	.ms-submit { margin-top: 24px; }
}