/* Both native and custom selects must have the same width/height*/
/* :root{font-size: 62.5%} */
.hybrid-dropdown {
  position: relative;
  width: max-content;
  min-width: 30px;
  min-height: 2.5em;
  display: inline-block;
  vertical-align: baseline;
  font-size: 1em;
  border: 1px solid #6f6f6f;
  border-radius: 0.25em;
  padding: 0 30px 0 18px;
  cursor: pointer;
  background:inherit;
}
.hybriddd-none {
	width: unset;
	padding: 0;
}
select.hybridddised{
  visibility:hidden !important;
	width:0 !important;
	height: 0 !important;
}
.hybrid-dropdown:focus {box-shadow: 1px 1px 3px}
.hybriddd-option::before, .hybriddd-group::before {
  display: none !important;
	content: none;
	margin: 0;
	padding: 0
}
/* when original element is disabled grey out */
.hybridddised:disabled + .hybrid-dropdown{
  background: #ccc;
	color: grey;
}
.hybrid-dropdown .hybriddd-wrapper {
	overflow: hidden;
	z-index: 7777;
	position: absolute;
	left: 0;
	max-height: 34vh;
	min-width: max-content;
  display: none;
	background-color: inherit;
}
.hybrid-dropdown.hybriddd-none .hybriddd-wrapper {
	display: block;
	position: static;
	max-width: 100%;
	max-height: none;
	min-width: auto;
}
/* hdd image grid with columns */
.hybriddd-wrapper.hybriddd-grid {
	width: calc( max-content * var(--hybriddd-col));
}
.hybrid-dropdown .hybriddd-grid ul.hybriddd-options {
	display: grid;
	grid-template-columns: repeat(var(--hybriddd-col), 1fr);
}
.hybrid-dropdown.hybriddd-none .hybriddd-options > li {
	display: inline-block;
}
.hybrid-dropdown .hybriddd-grid .hybriddd-options > li {
	display: flex;
	line-height: 0;
}
.hybrid-dropdown .hybriddd-grid .hybridddl {
	line-height: normal;
	width: max-content;
}
.hybrid-dropdown.hybriddd-top .hybriddd-wrapper{
  bottom:var(--hybriddd-top);
}
.hybrid-dropdown.hybriddd-right .hybriddd-wrapper{
	right:0;
	left:auto;
}
.hybrid-dropdown ul.hybriddd-options {
	border: 1px solid #6f6f6f;
	border-radius: 0.25em;
	overflow:hidden auto;
	scrollbar-width: thin;
	height: 100%;
	background-color: inherit;
  overscroll-behavior:contain;
  position: relative;
  z-index: 18;
}
.hybrid-dropdown:not(.hybriddd-none) ul.hybriddd-options {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.hybrid-dropdown.hybriddd-none .hybriddd-options {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: unset;
}
.hybrid-dropdown.active > .hybriddd-wrapper{
  display: block;
}
/*include any border styling in the box-sizing of our hybrid select.*/
.hybrid-dropdown *,
.hybrid-dropdown .hybriddd-options .hybriddd-option,
.hybrid-dropdown .hybriddd-options .hybriddd-option ul,
.hybrid-dropdown .hybriddd-options .hybriddd-group,
.hybrid-dropdown .hybriddd-options .hybriddd-group ul{
	box-sizing: border-box;
  cursor: default;
	margin: 0;
}
.hybriddd-selected {
  position: relative;
  width: auto;
  height: 100%;
  padding: 0.4em 3px;
  cursor: pointer;
  min-width: 100%;
	max-width: inherit;
  display: inline-block;
	z-index: 7;
}
.hybriddd-none .hybriddd-selected {
	display: none;
}
.hybriddd-selected::after {
	border-bottom: 2px solid #90a1b5;
	border-right: 2px solid #90a1b5;
	content: '';
	display: block;
	height: 5px;
	margin-top: -4px;
	pointer-events: none;
	position: absolute;
	right: -12px;
	top: 50%;
	-webkit-transform-origin: 66% 66%;
	-ms-transform-origin: 66% 66%;
	transform-origin: 66% 66%;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
	width: 5px;
}
/*
for horizontal dropdown
*/
.hybriddd-landscape .hybriddd-options > .hybriddd-option,
.hybriddd-landscape .hybriddd-options > .hybriddd-group > ul > .hybriddd-option {
	display: inline-block;
}
.hybriddd-landscape .hybriddd-options .hybridddl:dir(rtl) {float: right}
.hybriddd-landscape .hybriddd-options .hybriddd-group {
	clear: both;
	border-top: none;
	padding: 0;
}
.hybriddd-landscape .hybriddd-option > label{padding: 0.1em}

ul.hybriddd-options::-webkit-scrollbar {
    width: 6px;
}
ul.hybriddd-options::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(1 1 1 / 35%);
}
.hybriddd-options ul{
  list-style: none;
	padding: 0;
}
.hybriddd-group > span {
	font-weight: bold;
}
/* Make sure the custom select does not mess with the layout*/
.hybriddd-l0{
	padding: 0 0.5em;
}
.hybriddd-l1{
	padding: 0 1em 0 1em;
}
.hybriddd-l2{
	padding: 0 1em 0 1.5em;
}
.hybriddd-l3{
	padding: 0 1em 0 2em;
}
.hybriddd-l4{
	padding: 0 1em 0 2.5em;
}
.hybriddd-l5{
	padding: 0 1em 0 3em;
}
.hybriddd-group > span{
	padding: 0 0.5em;
}
.hybriddd-options ul .hybriddd-group > span {
	padding: 0 1em;
}
.hybriddd-option label {
  user-select: none; /* CSS3 (little to no support) */
  -ms-user-select: none; /* IE 10+ */
  -moz-user-select: none; /* Gecko (Firefox) */
  -webkit-user-select: none; /* Webkit (Safari, Chrome) */
  display:block;
}
.hybriddd-none .hybriddd-option label {
	padding: 0;
	position: relative;
	width:100%;
}
.hybriddd-option label > *{
	display: inline-block;
}
.hybridddcb {
	width: 0;
	height: 0;
	vertical-align: middle;
	display: inline-block;
	visibility: hidden;
}
.hybrid-dropdown.show-cb .hybridddcb {
	visibility: visible;
	width: 16px;
	height: 16px;
	border: solid 1px;
	margin: 0 3px 3px 2px;
}
.hybriddd-option > label > input {
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
}
.hybridddcb::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	margin: 2px auto;
}

.hybriddd-option input[type="radio"] .hybridddcb {
	border-radius: 50%; /* content: '\25EF';*/
}
.hybriddd-option input:checked .hybridddcb::before {
	border: solid 3px;
	padding: 1px;
}
/* COLOURS */
.hybriddd-option.active > label{
	background: #0466ff;
	color: #fff;
}
input:checked + .hybridddcb::before{
	background: white;
}
.hybriddd-option.partial > label .hybridddcb::before {
	background: #a5a5a5;
}

/* This media query detects devices where the primary
input mechanism can hover over elements. (e.g. computers with a mouse) */
@media (hover: hover) {
  /* // Since we are using a mouse, it's safe to show the custom select. */
}