/*#region topmenu*/
/*#endregion topmenu*/
/*#region input*/
/*#endregion input*/
/*#region menu*/
/*#endregion menu*/
.io-logo {
  display: flex;
  flex-direction: row;
  color: rgb(0, 38, 255);
  user-select: none;
}

.io-logo .io-text {
  font-family: Arial, Helvetica, sans-serif;
  margin: 5px 5px 5px 0px;
  font-size: 0.9em;
  font-weight: 600;
  user-select: none;
}

.io-sound-filter {
  padding: 5px 10px 5px 10px;
}

.io-sound-filter .header {
  white-space: nowrap;
  font-weight: 500;
}

.io-sound-filter .search {
  font-weight: 500;
}

/*#region App Input*/
input[type=text] {
  border: 1px solid rgb(240, 240, 250);
  border-radius: 5px;
  outline: none;
  padding-left: 10px;
}

input[type=text]:focus {
  border: 1px solid rgb(0, 38, 255);
  border-radius: 5px;
}

input[type=text]::placeholder {
  color: silver;
  font-style: italic;
}

input[type=password] {
  border: 1px solid rgb(240, 240, 250);
  border-radius: 5px;
  outline: none;
  padding-left: 10px;
}

input[type=password]:focus {
  border: 1px solid rgb(0, 38, 255);
  border-radius: 5px;
}

input[type=password]::placeholder {
  color: silver;
  font-style: italic;
}

input[type=search] {
  border: 1px solid rgb(240, 240, 250);
  border-radius: 5px;
  outline: none;
  padding-left: 10px;
}

input[type=search]:focus {
  border: 1px solid rgb(0, 38, 255);
  border-radius: 5px;
}

input[type=search]::placeholder {
  color: silver;
  font-style: italic;
}

input[type=button] {
  border: 1px solid lightsteelblue;
  border-radius: 14px;
  outline: none;
  background-color: white;
  height: 28px;
}

input[type=button]:focus {
  border: 1px solid lightsteelblue;
  border-radius: 14px;
}

input[type=button]:hover {
  border: 1px solid lightsteelblue;
  border-radius: 14px;
  background-color: rgb(153, 255, 255);
}

input[type=button]:disabled:hover {
  border: 1px solid gray;
  background-color: transparent;
}

input[type=checkbox] {
  outline: none;
  width: 16px;
  height: 16px;
  outline: none;
  margin: 2px 0 0 2px;
}

input[type=checkbox]:focus {
  outline: none;
  border: none;
}

input[type=checkbox]:before {
  background-color: red;
}

input[type=checkbox]:hover {
  outline: none;
  border: none;
}

input[type=checkbox]:disabled:hover {
  outline: none;
  border: none;
}

/*#endregion App Input*/
.io-controls-card-column {
  flex-direction: column;
  padding: 10px;
}

.io-controls-card-header {
  border-bottom: 1px solid gray;
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 10px;
}

.io-controls-card-label {
  width: 100%;
}

.io-controls-card-label input {
  width: 100%;
}

.io-property-table {
  display: flex;
  flex-direction: column;
}

.io-property-table .io-property-row {
  display: flex;
  flex-direction: row;
  background-color: transparent;
}

.io-property-table .io-name {
  flex: 1 1 0;
  width: 0;
  opacity: 0.7;
  background-color: transparent;
}

.io-property-table .io-value {
  flex: 3 3 0;
  background-color: transparent;
}

.io-datalist {
  border: 1px solid rgb(240, 240, 250);
  border-radius: 5px;
  outline: none;
  padding: 0 0 0 10px;
}

.io-datalist:focus {
  border: 1px solid rgb(0, 38, 255);
  border-radius: 5px;
  box-shadow: none;
}

.io-datalist::placeholder {
  color: silver;
  font-style: italic;
}

/*#region Route and BusStop List*/
.io-left-list {
  padding: 0 5px 0 5px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  min-width: fit-content;
}

.io-left-list .io-body {
  padding: 0px 10px;
}

.io-item-route {
  display: flex;
  flex-direction: row;
}

.io-item-busstop {
  display: flex;
  flex-direction: row;
}

.io-item-route.io-selected {
  color: rgb(0, 38, 255);
}

.io-item-busstop.io-selected {
  color: rgb(0, 38, 255);
}

.io-item-route .io-number {
  background-size: 18px;
  background-repeat: no-repeat;
  padding: 0 5px 0 18px;
  min-width: 40px;
  white-space: nowrap;
}

.io-item-busstop .io-icon {
  background-size: 18px;
  background-repeat: no-repeat;
  padding: 0 2px 0 2px;
  min-width: 16px;
  white-space: nowrap;
}

.io-item-route .io-name {
  white-space: nowrap;
}

.io-item-busstop .io-name {
  white-space: nowrap;
}

.io-item-route .io-number.io-bg-img-default {
  background-image: url("../VsSvg/route_sc0A0.svg");
}

.io-item-route .io-number.io-bg-img-empty {
  background-image: url("../VsSvg/route_scA00.svg");
}

.io-item-busstop .io-icon.io-bg-img-default {
  background-image: url("../VsSvg/busstop_fc0A0.svg");
}

.io-item-busstop .io-icom.io-bg-img-empty {
  background-image: url("../VsSvg/busstop_fcA00.svg");
}

.io-item-route:hover {
  color: rgb(0, 38, 255);
}

.io-item-route-dir {
  font-size: 0.8em;
  padding-left: 10px;
  white-space: nowrap;
}

.io-item-route-dir.io-selected {
  color: rgb(0, 38, 255);
}

.io-item-route-dir.io-edited {
  color: rgb(127, 0, 127);
  font-weight: bold;
}

.io-item-route-dir:hover {
  color: rgb(0, 38, 255);
}

.io-item-busstop-item {
  font-size: 0.6em;
  padding-left: 10px;
  white-space: nowrap;
}

.io-item-busstop-item.io-selected {
  color: rgb(0, 38, 255);
}

.io-item-busstop-item:hover {
  color: rgb(0, 38, 255);
}

/*#endregion Route and BusStop List*/
/*#region Route and BusStop property*/
.io-properties {
  display: flex;
  flex-direction: column;
  padding: 5px;
  min-width: fit-content;
}

.io-properties .io-no-data {
  padding: 10px;
  opacity: 0.8;
}

/*#endregion Route and BusStop property*/
#io-map {
  width: 100%;
  height: 100%;
}

/*# sourceMappingURL=app-controls.css.map */