#drop-zone {
	border: 1px dashed #888;
	border-radius: 10px;
	color: lightslategray;
	transition: background 0.3s;
	cursor: pointer;
}
#drop-zone.dragover {
	background-color: #f0f8ff;
	border-color: #00aaff;
	color: #00aaff;
}
#file-input {
	display: none;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.eb-price-header {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
}
.active {
  background-color: #ccc;
}
.option:hover, .eb-price-header:hover {
  filter: brightness(0.9); /* Darkens the color */
}

.app {
    background-color: #fcfcfc;
    min-height: 100vh;
}

.eb_section_header {
    font-weight:800;
    color:#ffd8a5
}

.eb_logo {
    width: 300px !important
}

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

.tgl {
	display: none;

	// add default box-sizing for this scope
	&,
  &:after,
  &:before,
	& *,
  & *:after,
  & *:before,
	& + .tgl-btn {
		box-sizing: border-box;
		&::selection {
			background: none;
		}
	}

	+ .tgl-btn {
		outline: 0;
		display: block;
		width: 5em;
		height: 2em;
		position: relative;
		cursor: pointer;
    user-select: none;
		&:after,
    &:before {
			position: relative;
			display: block;
			content: "";
			width: 50%;
			height: 100%;
		}

		&:after {
			left: 0;
		}

		&:before {
			display: none;
		}
	}

	&:checked + .tgl-btn:after {
		left: 50%;
	}
}

.tgl-flip {
	+ .tgl-btn {
		padding: 0px;
		transition: all .2s ease;
		font-family: sans-serif;
		perspective: 100px;
		&:after,
    &:before {
			display: inline-block;
			transition: all .4s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			backface-visibility: hidden;
			border-radius: 4px;
		}

		&:after {
			content: attr(data-tg-on);
			background: #02C66F;
			transform: rotateY(-180deg);
		}

		&:before {
			background: #7f7f7f;
			content: attr(data-tg-off);
		}

		&:active:before {
      transform: rotateY(-20deg);
		}
	}

	&:checked + .tgl-btn {
    &:before {
      transform: rotateY(180deg);
    }

    &:after {
      transform: rotateY(0);
      left: 0;
      background: #7FC6A6;
    }

    &:active:after {
      transform: rotateY(20deg);
    }
	}
}

.tgl-flipSex {
	+ .tgl-btn {
		padding: 0px;
		transition: all .2s ease;
		font-family: sans-serif;
		perspective: 100px;
		&:after,
    &:before {
			display: inline-block;
			transition: all .4s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			backface-visibility: hidden;
			border-radius: 4px;
		}

		&:after {
			content: attr(data-tg-on);
			background: #039be5;
			transform: rotateY(-180deg);
		}

		&:before {
			background: #F7879A;
			content: attr(data-tg-off);
		}

		&:active:before {
      transform: rotateY(-20deg);
		}
	}

	&:checked + .tgl-btn {
    &:before {
      transform: rotateY(180deg);
    }

    &:after {
      transform: rotateY(0);
      left: 0;
      background: #039be5;
    }

    &:active:after {
      transform: rotateY(20deg);
    }
	}
}

.tgl-flipSelect {
	+ .tgl-btn {
		padding: 0px;
		transition: all .2s ease;
		font-family: sans-serif;
		perspective: 100px;
		&:after,
    &:before {
			display: inline-block;
			transition: all .4s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			backface-visibility: hidden;
			border-radius: 4px;
		}

		&:after {
			content: attr(data-tg-on);
			background: #039be5;
			transform: rotateY(-180deg);
		}

		&:before {
			background: #039be5;
			content: attr(data-tg-off);
		}

		&:active:before {
      transform: rotateY(-20deg);
		}
	}

	&:checked + .tgl-btn {
    &:before {
      transform: rotateY(180deg);
    }

    &:after {
      transform: rotateY(0);
      left: 0;
      background: #039be5;
    }

    &:active:after {
      transform: rotateY(20deg);
    }
	}
}