.offline {
  --group-width: 75vw;
  --group-left: 2vh;
}
.offline .user .user-group {
  width: calc(var(--group-width) + var(--group-left));
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  --select-width: 100px;
}
.offline .user .user-group select,
.offline .user .user-group input {
  margin: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}
.offline .user .user-group select {
  width: 100%;
  min-width: var(--select-width);
  padding-left: 0;
  text-align: center;
  outline: none;
  background-color: #FAFAFA;
  cursor: pointer;
}
.offline .user .user-group select#u-company-school {
  max-width: var(--select-width);
  border-right-width: 0;
}
.offline .user .user-group select option {
  display: none;
}
.offline .user .user-group input#company {
  width: 100%;
  display: none;
}
/* .offline .user .user-group input:nth-of-type(1), */
.offline .user .user-group select:nth-of-type(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-left-width: 0;
}
.offline .user .user-group select:nth-last-of-type(1),
.offline .user .user-group input#company {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.offline .user .user-group select:nth-last-of-type(1) {
  border-right-width: 0;
}
/* .offline .user .user-group select +input, */
.offline .user .user-group select:not(:nth-of-type(1)):not(:nth-last-of-type(1)),
.offline .user .user-group input:not(:nth-of-type(1)):not(:nth-last-of-type(1)) {
  border-radius: 0;
}
.offline .user .user-group input#company {
  border-right-width: 0;
}
.offline .user .user-group select#u-school {
  max-width: calc(var(--select-width) * 1.5);
}

.offline .user .user-group .u-company-school-type-list,
.offline .user .user-group .u-school-list {
  height: fit-content;
  max-height: 302px;
  padding: 0;
  position: absolute;
  top: calc(5vh + 1px);
  z-index: 100;
  border: 1px solid #000;
  background-color: #FAFAFA;
  box-sizing: border-box;
  /* transition: height 0.3s linear; */
}
.offline .user .user-group .u-company-school-type-list.hide,
.offline .user .user-group .u-school-list.hide {
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}
.offline .user .user-group .u-school-list .list-content {
  height: 100%;
  max-height: 230px;
  padding-bottom: 15px;
  box-sizing: border-box;
  overflow: auto;
}
.offline .user .user-group .u-company-school-type-list {
  width: var(--select-width);
  left: 0;
}
.offline .user .user-group .u-school-list {
  width: calc(100% - var(--select-width));
  padding: 15px 0;
  right: 0;
}
.offline .user .user-group .u-company-school-type-list p,
.offline .user .user-group .u-school-list p {
  line-height: 1.4;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.offline .user .user-group .u-company-school-type-list p:nth-of-type(1):not([data-index]),
.offline .user .user-group .u-school-list p:nth-of-type(1):not([data-index]) {
  margin-top: -15px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #fff;
}
.offline .user .user-group .u-company-school-type-list p[data-index] {
  padding-top: 10px;
  padding-bottom: 10px;
}
.offline .user .user-group .u-school-list p[data-index] {
  padding-top: 6px;
  padding-bottom: 6px;
}
.offline .user .user-group .u-company-school-type-list p[data-index],
.offline .user .user-group .u-school-list p[data-index] {
  margin-bottom: 0;
  cursor: pointer;
}
.offline .user .user-group .u-company-school-type-list p[data-index].act,
.offline .user .user-group .u-school-list p[data-index].act {
  color: #fff;
  background-color: #2a003b80;
}
.offline .user .user-group .u-company-school-type-list p[data-index]:hover,
.offline .user .user-group .u-school-list p[data-index]:hover {
  color: #fff;
  background-color: #2a003b;
}
.offline .user .user-group .u-school-list p[data-index][data-index='-10'] {
  display: block;
}
.offline .user .user-group .u-school-list p input {
  width: 100%;
  height: 38px;
  line-height: 38px;
  min-height: 38px;
  padding-left: 15px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  outline: none;
}
.offline .user .user-group .u-school-list p input:focus {
  /* border-color: #2a003b; */
  box-shadow: inset 0 0 3px #2a003b;
}
.offline .user .user-group .u-school-list p span {
  /* height: 40px; */
  line-height: 40px;
  padding: 0 25px;
  /* margin-top: -1px; */
  margin-left: -1px;
  display: block;
  color: #ffffff;
  white-space: nowrap;
  /* border: 1px solid #000; */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #2a003b;
  cursor: pointer;
}
.offline .user .user-group .u-school-list p img {
  height: 16px;
  margin: 0 5px;
  /* margin-top: 3px; */
  vertical-align: text-top;
}

@media (max-width: 480px) {
    .offline .user .user-group .u-school-list p input {
        padding-left: 10px;
    }
    .offline .user .user-group .u-school-list p span {
        padding: 0 12px;
    }
}

@media (min-width:800px) {
    .offline {
        --group-width: 55vw;
    }
}
@media (max-height:800px) {
    .offline {
        --group-left: 16px;
    }
}
@media (min-height:1200px) {
    .offline {
        --group-left: 24px;
    }
}