option {
  position: relative;
  padding-left: 120px;
}
option[data-type]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left center;
}
option[data-input-type]::after {
  content: "";
  position: absolute;
  left: 60px;
  top: 0;
  width: 60px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left center;
}

option[data-type=tinyint][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etinyint (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=tinyint]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etinyint%3C/text%3E%3C/svg%3E");
}

option[data-type=tinyint] {
  color: maroon;
}

option[data-type=smallint][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Esmallint (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=smallint]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Esmallint%3C/text%3E%3C/svg%3E");
}

option[data-type=smallint] {
  color: maroon;
}

option[data-type=mediumint][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emediumint (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=mediumint]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emediumint%3C/text%3E%3C/svg%3E");
}

option[data-type=mediumint] {
  color: maroon;
}

option[data-type=int][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eint (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=int]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eint%3C/text%3E%3C/svg%3E");
}

option[data-type=int] {
  color: maroon;
}

option[data-type=bigint][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ebigint (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=bigint]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ebigint%3C/text%3E%3C/svg%3E");
}

option[data-type=bigint] {
  color: maroon;
}

option[data-type=decimal][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edecimal (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=decimal]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edecimal%3C/text%3E%3C/svg%3E");
}

option[data-type=decimal] {
  color: maroon;
}

option[data-type=numeric][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Enumeric (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=numeric]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Enumeric%3C/text%3E%3C/svg%3E");
}

option[data-type=numeric] {
  color: maroon;
}

option[data-type=float][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Efloat (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=float]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Efloat%3C/text%3E%3C/svg%3E");
}

option[data-type=float] {
  color: maroon;
}

option[data-type=double][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edouble (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=double]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edouble%3C/text%3E%3C/svg%3E");
}

option[data-type=double] {
  color: maroon;
}

option[data-type=bit][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ebit (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=bit]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ebit%3C/text%3E%3C/svg%3E");
}

option[data-type=bit] {
  color: maroon;
}

option[data-type=date][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edate (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=date]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edate%3C/text%3E%3C/svg%3E");
}

option[data-type=date] {
  color: green;
}

option[data-type=datetime][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edatetime (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=datetime]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edatetime%3C/text%3E%3C/svg%3E");
}

option[data-type=datetime] {
  color: green;
}

option[data-type=timestamp][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etimestamp (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=timestamp]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etimestamp%3C/text%3E%3C/svg%3E");
}

option[data-type=timestamp] {
  color: green;
}

option[data-type=time][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etime (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=time]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etime%3C/text%3E%3C/svg%3E");
}

option[data-type=time] {
  color: green;
}

option[data-type=year][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eyear (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=year]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eyear%3C/text%3E%3C/svg%3E");
}

option[data-type=year] {
  color: green;
}

option[data-type=char][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Echar (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=char]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Echar%3C/text%3E%3C/svg%3E");
}

option[data-type=char] {
  color: blue;
}

option[data-type=varchar][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Evarchar (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=varchar]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Evarchar%3C/text%3E%3C/svg%3E");
}

option[data-type=varchar] {
  color: blue;
}

option[data-type=text][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etext (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=text]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etext%3C/text%3E%3C/svg%3E");
}

option[data-type=text] {
  color: blue;
}

option[data-type=tinytext][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etinytext (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=tinytext]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etinytext%3C/text%3E%3C/svg%3E");
}

option[data-type=tinytext] {
  color: blue;
}

option[data-type=mediumtext][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emediumtext (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=mediumtext]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emediumtext%3C/text%3E%3C/svg%3E");
}

option[data-type=mediumtext] {
  color: blue;
}

option[data-type=longtext][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Elongtext (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=longtext]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Elongtext%3C/text%3E%3C/svg%3E");
}

option[data-type=longtext] {
  color: blue;
}

option[data-type=blob][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eblob (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=blob]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eblob%3C/text%3E%3C/svg%3E");
}

option[data-type=blob] {
  color: blue;
}

option[data-type=tinyblob][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etinyblob (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=tinyblob]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etinyblob%3C/text%3E%3C/svg%3E");
}

option[data-type=tinyblob] {
  color: blue;
}

option[data-type=mediumblob][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emediumblob (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=mediumblob]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emediumblob%3C/text%3E%3C/svg%3E");
}

option[data-type=mediumblob] {
  color: blue;
}

option[data-type=longblob][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Elongblob (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=longblob]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Elongblob%3C/text%3E%3C/svg%3E");
}

option[data-type=longblob] {
  color: blue;
}

option[data-type=enum][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eenum (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=enum]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eenum%3C/text%3E%3C/svg%3E");
}

option[data-type=enum] {
  color: blue;
}

option[data-type=set][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eset (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=set]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eset%3C/text%3E%3C/svg%3E");
}

option[data-type=set] {
  color: blue;
}

option[data-type=geometry][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Egeometry (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=geometry]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Egeometry%3C/text%3E%3C/svg%3E");
}

option[data-type=geometry] {
  color: purple;
}

option[data-type=point][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Epoint (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=point]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Epoint%3C/text%3E%3C/svg%3E");
}

option[data-type=point] {
  color: purple;
}

option[data-type=linestring][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Elinestring (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=linestring]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Elinestring%3C/text%3E%3C/svg%3E");
}

option[data-type=linestring] {
  color: purple;
}

option[data-type=polygon][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Epolygon (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=polygon]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Epolygon%3C/text%3E%3C/svg%3E");
}

option[data-type=polygon] {
  color: purple;
}

option[data-type=multipoint][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emultipoint (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=multipoint]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emultipoint%3C/text%3E%3C/svg%3E");
}

option[data-type=multipoint] {
  color: purple;
}

option[data-type=multilinestring][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emultilinestring (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=multilinestring]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emultilinestring%3C/text%3E%3C/svg%3E");
}

option[data-type=multilinestring] {
  color: purple;
}

option[data-type=multipolygon][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emultipolygon (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=multipolygon]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emultipolygon%3C/text%3E%3C/svg%3E");
}

option[data-type=multipolygon] {
  color: purple;
}

option[data-type=geometrycollection][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Egeometrycollection (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=geometrycollection]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Egeometrycollection%3C/text%3E%3C/svg%3E");
}

option[data-type=geometrycollection] {
  color: purple;
}

option[data-type=json][data-pk=Y]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ejson (PK)%3C/text%3E%3C/svg%3E");
}

option[data-type=json]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ejson%3C/text%3E%3C/svg%3E");
}

option[data-type=json] {
  color: orange;
}

option[data-input-type=text]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etext%3C/text%3E%3C/svg%3E");
}

option[data-input-type=password]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Epassword%3C/text%3E%3C/svg%3E");
}

option[data-input-type=email]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eemail%3C/text%3E%3C/svg%3E");
}

option[data-input-type=search]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Esearch%3C/text%3E%3C/svg%3E");
}

option[data-input-type=tel]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etel%3C/text%3E%3C/svg%3E");
}

option[data-input-type=url]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eurl%3C/text%3E%3C/svg%3E");
}

option[data-input-type=number]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Enumber%3C/text%3E%3C/svg%3E");
}

option[data-input-type=range]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Erange%3C/text%3E%3C/svg%3E");
}

option[data-input-type=date]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edate%3C/text%3E%3C/svg%3E");
}

option[data-input-type=month]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emonth%3C/text%3E%3C/svg%3E");
}

option[data-input-type=week]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eweek%3C/text%3E%3C/svg%3E");
}

option[data-input-type=time]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etime%3C/text%3E%3C/svg%3E");
}

option[data-input-type=datetime-local]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edatetime-local%3C/text%3E%3C/svg%3E");
}

option[data-input-type=checkbox]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Echeckbox%3C/text%3E%3C/svg%3E");
}

option[data-input-type=radio]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eradio%3C/text%3E%3C/svg%3E");
}

option[data-input-type=file]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Efile%3C/text%3E%3C/svg%3E");
}

option[data-input-type=select]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eselect%3C/text%3E%3C/svg%3E");
}

option[data-input-type=textarea]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Etextarea%3C/text%3E%3C/svg%3E");
}

option[data-input-type=hidden]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ehidden%3C/text%3E%3C/svg%3E");
}

option[data-input-type=button]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ebutton%3C/text%3E%3C/svg%3E");
}

option[data-input-type=submit]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Esubmit%3C/text%3E%3C/svg%3E");
}

option[data-input-type=reset]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ereset%3C/text%3E%3C/svg%3E");
}

option[data-input-type=color]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Ecolor%3C/text%3E%3C/svg%3E");
}

option[data-input-type=image]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eimage%3C/text%3E%3C/svg%3E");
}

option[data-input-type=datetime]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Edatetime%3C/text%3E%3C/svg%3E");
}

option[data-input-type=month]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Emonth%3C/text%3E%3C/svg%3E");
}

option[data-input-type=week]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='0' y='25' text-anchor='start' font-family='Arial' font-size='14' fill='black'%3Eweek%3C/text%3E%3C/svg%3E");
}