WEP_V2.1.3/SourceCode/We.App/WeApp.Web/Content/Css/Exercise/stu-leader.css

body {
  --mc: #11998e; }

.body {
  background: #f3f3f3;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  box-sizing: padding-box;
  padding: 30px; }

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
  background-color: var(--mc);
  color: #eee;
  outline: none; }
  .select2-container--default .select2-results__option--highlighted[aria-selected]:focus, .select2-container--default .select2-results__option--highlighted[aria-selected]:active, .select2-container--default .select2-results__option--highlighted[aria-selected]:focus, .select2-container--default .select2-results__option--highlighted[aria-selected]:active, .select2-container--default .select2-results__option--highlighted[aria-selected]:hover:focus, .select2-container--default .select2-results__option--highlighted[aria-selected]:hover:active {
    outline: none; }

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--mc);
  color: #fff; }

.select2-search {
  display: none; }

.box {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 15px 30px; }
  .box .btn {
    cursor: pointer; }
    .box .btn.btn-submit {
      background: var(--mc);
      color: #fff; }
      .box .btn.btn-submit:hover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); }
    .box .btn.btn-lg {
      width: 120px;
      font-size: 20px !important; }
  .box .left-box, .box .right-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%; }
  .box.title-box {
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; }
    .box.title-box .line {
      width: 5px;
      height: 100%;
      background: var(--mc);
      border-radius: 3px; }
    .box.title-box .title {
      font-size: 30px;
      font-weight: 600;
      color: var(--mc);
      padding-left: 15px; }

.box.group-box {
  margin-top: 20px;
  height: 160px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }
  .box.group-box .group-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
    height: 100%;
    position: relative; }
    .box.group-box .group-info .img-box {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      border: 3px solid #bfbfbf;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease-in-out; }
      .box.group-box .group-info .img-box .img {
        width: 60px;
        height: 60px;
        /*width: 64px;
                    height: 66px;*/
        overflow: hidden;
        /*.img {
                        width: 100%;
                        height: 100%;
                    }*/ }
        .box.group-box .group-info .img-box .img img {
          width: 100%;
          height: 100%; }
    .box.group-box .group-info .name {
      font-weight: 600;
      color: #bfbfbf;
      font-size: 16px; }
    .box.group-box .group-info .gou {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 18px;
      height: 14px;
      overflow: hidden; }
    .box.group-box .group-info.active .img-box, .box.group-box .group-info.check .img-box {
      border-color: var(--mc);
      background: #f3f3f3;
      /*.img{}*/
      /*.img .img {
                        position: relative;
                        left: -64px;
                        border-right: 64px solid transparent;
                        filter: drop-shadow(64px 0 var(--mc));
                    }*/ }
    .box.group-box .group-info.active .name, .box.group-box .group-info.check .name {
      color: var(--mc); }
    .box.group-box .group-info.active .img-box {
      background: #f3fbf9; }
    .box.group-box .group-info.check .gou .img {
      width: 100%;
      height: 100%;
      /*position: relative;
                        left: -18px;
                        border-right: 18px solid transparent;
                        filter: drop-shadow(18px 0 var(--mc));*/
      background-image: url("../../Image/Stu/zhb/gou.png");
      background-size: 100% 100%; }
  .box.group-box.stu .group-info .gou {
    display: none; }
  .box.group-box.stu .group-info.active .img-box {
    border-color: var(--mc);
    background: #f3f3f3; }
    .box.group-box.stu .group-info.active .img-box .img .img {
      position: relative;
      left: -64px;
      border-right: 64px solid transparent;
      filter: drop-shadow(64px 0 var(--mc)); }
  .box.group-box.stu .group-info.active .name {
    color: var(--mc); }

.box.role-box {
  margin-top: 10px;
  height: calc(100vh - 310px);
  overflow: hidden;
  position: relative; }
  .box.role-box .content-box {
    height: calc(100% - 30px);
    width: calc(100% - 60px);
    position: absolute; }
    .box.role-box .content-box .role-content {
      position: absolute;
      top: -200%;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      opacity: 0;
      transition: all 1s ease-in-out; }
      .box.role-box .content-box .role-content.active {
        top: 0;
        display: flex;
        opacity: 1;
        transition: all 1s ease-in-out; }
      .box.role-box .content-box .role-content .top {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: #3c3c3c;
        border-bottom: 2px solid #bfbfbf; }
        .box.role-box .content-box .role-content .top span {
          color: #bfbfbf;
          padding-left: 15px; }
      .box.role-box .content-box .role-content.check .top {
        color: var(--mc);
        border-bottom-color: var(--mc); }
      .box.role-box .content-box .role-content .bottom {
        width: 100%;
        height: calc(100% - 80px);
        padding: 15px 0;
        float: left;
        position: relative; }
      .box.role-box .content-box .role-content.self .bottom {
        height: 100%; }
      .box.role-box .content-box .role-content .role-info {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 120px;
        width: 120px;
        border: 1px solid var(--mc);
        border-radius: 10px;
        background: #f3fbf9;
        padding: 10px 5px 15px;
        margin-bottom: 10px;
        margin-right: 20px;
        float: left; }
        .box.role-box .content-box .role-content .role-info .name {
          height: 30px;
          color: var(--mc);
          text-align: center;
          white-space: normal;
          font-size: 14px; }
        .box.role-box .content-box .role-content .role-info .user-icon {
          display: flex;
          width: 50px;
          height: 50px;
          justify-content: center;
          align-items: center;
          background-image: url("../../Image/Stu/zhb/user.png");
          background-size: 100% 100%; }
        .box.role-box .content-box .role-content .role-info .add-icon {
          width: 50px;
          height: 50px;
          border-radius: 50px;
          overflow: hidden;
          /*.add {
                            width: 100%;
                            height: 100%;
                            background: url('../../Image/Stu/zhb/add.png');

                            /*&.add-dl {
                                position: relative;
                                left: -50px;
                                border-right: 50px solid transparent;
                                filter: drop-shadow(50px 0 var(--mc));
                            }
                        }*/ }
        .box.role-box .content-box .role-content .role-info .close {
          position: absolute;
          right: 5px;
          top: 0;
          color: var(--mc); }
        .box.role-box .content-box .role-content .role-info.add-box {
          display: none;
          left: calc(50% - 150px);
          top: 100px;
          padding: 25px 20px 20px;
          position: absolute;
          width: 300px; }
        .box.role-box .content-box .role-content .role-info input {
          width: 90%;
          padding: 5px 10px;
          font-size: 14px;
          border: 1px solid var(--mc);
          border-radius: 4px;
          outline: none; }
          .box.role-box .content-box .role-content .role-info input:active, .box.role-box .content-box .role-content .role-info input:focus {
            border: 1px solid var(--mc);
            outline: none; }
  .box.role-box.stu .top {
    display: none; }
  .box.role-box.stu .bottom {
    height: 100%; }

.box.role-box.build {
  margin-top: 20px;
  height: calc(100vh - 160px); }
  .box.role-box.build .content-box .role-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    top: 0;
    opacity: 1; }

.box.handle-box {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px); }
  .box.handle-box .form-box {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 5px 10px;
    height: 50%; }
    .box.handle-box .form-box:not(:first-child) {
      margin-top: 10px; }
    .box.handle-box .form-box .role {
      /*width: 250px;*/
      display: flex;
      justify-content: center;
      align-items: center; }
      .box.handle-box .form-box .role .select2-container .select2-selection--single {
        height: 38px;
        border: 2px solid var(--mc);
        margin-bottom: 8px; }
      .box.handle-box .form-box .role .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 6px; }
    .box.handle-box .form-box .form-control {
      width: 100%;
      padding: 8px 10px;
      border: 2px solid var(--mc);
      border-radius: 5px;
      font-size: 1rem;
      margin: 8px 0; }
      .box.handle-box .form-box .form-control.txt {
        padding: 8px 15px;
        height: 100%; }
    .box.handle-box .form-box .btn {
      width: 100px;
      position: absolute;
      right: 25px;
      bottom: 20px; }

.box.leader-box {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px); }
  .box.leader-box .table tr td, .box.leader-box .table tr th {
    text-align: center;
    border: none;
    font-size: 14px;
    padding: 0;
    height: 45px; }
  .box.leader-box .table tr th {
    background: var(--mc);
    color: #fff;
    font-size: 16px;
    line-height: 45px; }
  .box.leader-box .table tbody tr {
    color: #bfbfbf; }
    .box.leader-box .table tbody tr:nth-of-type(2n+1) {
      background: #fafafa; }
    .box.leader-box .table tbody tr:nth-of-type(2n) {
      background: #f3fbf9; }
    .box.leader-box .table tbody tr.wait {
      color: #262626; }
      .box.leader-box .table tbody tr.wait .state {
        color: var(--mc);
        font-weight: 600; }
    .box.leader-box .table tbody tr td.action .btn.btn-submit {
      cursor: pointer;
      width: 90px;
      padding: 5px;
      border-radius: 25px;
      font-size: 10px !important; }
    .box.leader-box .table tbody tr.empty {
      font-size: 16px;
      font-weight: 600;
      color: var(--mc); }

@keyframes fadeIn {
  from {
    visibility: hidden;
    /*opacity: 1;*/ }
  to {
    visibility: visible;
    /*opacity: 0;*/ } }