/* Default custom select styles */
div.cs-select {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-align: left;
	font-family: 'Roboto';
	font-size: 20px;
	background: #fff;
	
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.cs-select:focus {
	outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
	display: none;
}

.cs-select span {
	display: block;
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	
}

.cs-select span.cs-placeholder{
	height: 35px;
	padding: 0px 10px;
	border: none;
	text-align: left;
	font-size: 16px;
	line-height: 33px;
}

/*.cs-select ul li:nth-child(2n+1) span {
	background-color: #efefef;
}


.cs-select ul li:nth-child(4n-6) span{
	background-color: #6bc0b2;
}
.cs-select ul li:nth-child(4n-5) span{
	background-color: #e0871b;
}
.cs-select ul li:nth-child(4n-4) span{
	background-color: #e2c321;
}
.cs-select ul li:nth-child(4n-3) span{
	background-color: #aac22f;
}
*/


/* Placeholder and selected option */
.cs-select > span {
	padding-right: 3em;
}

.cs-select > span::after,
.cs-select .cs-selected span::after {
	speak: none;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cs-select > span::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f078';
	right: 0;
}

/*
.cs-select .cs-selected span::after {
	content: '\2713';
	margin-right: 1em;
}*/

.cs-select.cs-active > span::after {
	right:5px;
	-webkit-transform: translateY(-50%) translateX(25%) rotate(-180deg);
	transform: translateY(-50%) translateX(25%) rotate(-180deg);
}

/* Options */
.cs-select .cs-options {
	position: absolute;
	overflow: hidden;
	width: 100%;
	background: #fff;
	visibility: hidden;
	
}

.cs-select.cs-active .cs-options {
	visibility: visible;
	z-index: 2;
}

.cs-select ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.cs-select ul span {
	padding: 8px 12px;
	text-align: left;
}

.cs-select ul li.cs-focus span {
	background-color: #ddd;
}
/**/
.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
	background: #e6e6e6;
}
/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
	padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
	cursor: default;
}

/* filter */
.filter .cs-select span.cs-placeholder { 
	padding:0;
	font-family: inherit;
	text-transform:uppercase; 
	border-bottom:1px solid #b2b2b2; 
}
.filter .cs-options { margin-top:-1px; border:1px solid #b2b2b2; }
.filter .cs-options ul li { 
	font-family: inherit; 
	text-transform:uppercase; 
	border-bottom:1px solid #b2b2b2; 
}
.filter .cs-options ul li:last-child { border-bottom:0; }
.filter .cs-options ul li:hover { 
	color:#fff; 
	background:#e92c4c; 
	border-bottom-color:#e92c4c; 
}


/* forms in arenda */
.pform .cs-select span.cs-placeholder { 
	padding: 0 12px; 
	height: 35px; 
	line-height: 30px; 
	font-size:20px; 
	color:#000;
	border-bottom: 1px solid #a3a3a3;
}
.pform.purple .cs-select span.cs-placeholder { border:1px solid #e92c4c; }
.pform.pink .cs-select span.cs-placeholder { border:1px solid #f56faa; }

.pform .cs-select > span::after { right:15px; }
.pform .cs-select.cs-active > span::after { right:20px; }
.pform.purple .cs-select > span::after { color:#e92c4c; }
.pform.pink .cs-select > span::after { color:#f56faa; }

.pform .cs-options { margin-top:-1px; }
.pform.purple .cs-options { border:1px solid #e92c4c; }
.pform.pink .cs-options { border:1px solid #f56faa; }
.pform .cs-options ul li { border: 1px solid #a3a3a3; }
.pform.purple .cs-options ul li { border-bottom:1px solid #e92c4c; }
.pform.pink .cs-options ul li { border-bottom:1px solid #f56faa; }
.pform .cs-options ul li:nth-child(1), .pform .cs-options ul li:nth-child(2) { border-bottom:0; }
.pform .cs-options ul li:hover { color:#000; }
.pform.purple .cs-options ul li:hover { background:#e92c4c; border-bottom-color:#e92c4c; }
.pform.pink .cs-options ul li:hover { background:#f56faa; border-bottom-color:#f56faa; }

/* media */
@media(max-width:468px){
.cs-select span.cs-placeholder{
	font-size: 20px;
}
}