.branch_office_menjin {
  .tabs-style() {
    display: flex;

    .tab {
      background-color: rgba(36, 115, 239, 0.27);
      padding: 2px 12px;
      border-radius: 2px;
      color: #fff;
      font-size: 12px;
      border: 1px solid #5d718c;
      cursor: pointer;

      &.active {
        background-color: #2473ef;
        border: 1px solid #2473ef;
      }
    }
  }

  .block1 {
    background-color: rgba(12, 28, 88, 0.4);

    .options {
      padding: 10px 15px;
      border: 1px solid;
      border-image: linear-gradient(to bottom,
      rgba(58, 122, 149, 0),
      rgba(58, 122, 149, 1)) 1;
      border-top: none;

      .items {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px 20px;

        .item {
          position: relative;
          width: calc(50% - 10px);
          display: flex;
          align-items: center;
          color: #fff;
          padding: 9px 0 9px 9px;
          background-color: rgba(1, 56, 154, 0.26);
          border: 1px solid #2091F3;

          .img {
            background-color: #102561;
            border: 1px solid #19455B;
            border-radius: 4px;
            padding: 8px;
            margin-right: 10px;

            img {
              width: 35px;
              height: 30px;
            }
          }

          .info {
            .label {
              font-weight: bold;
            }

            .count {
            }
          }

          .corner-img {
            position: absolute;
            width: 12px;
            height: 12px;

            &.top-left-img {
              top: -10px;
              left: -3px;
            }

            &.top-right-img {
              transform: rotate(90deg);
              top: -3px;
              right: -10px;
            }

            &.bottom-left-img {
              transform: rotate(270deg);
              bottom: -3px;
              left: -10px;
            }

            &.bottom-right-img {
              transform: rotate(180deg);
              bottom: -10px;
              right: -3px;
            }
          }
        }
      }
    }
  }

  .block2 {
    background-color: rgba(12, 28, 88, 0.4);
    margin-top: 10px;

    .tabs {
      .tabs-style();
    }

    .options {
      padding: 10px 15px;
      border: 1px solid;
      border-image: linear-gradient(to bottom,
      rgba(58, 122, 149, 0),
      rgba(58, 122, 149, 1)) 1;
      border-top: none;
    }
  }

  .block3 {
    background-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.8));
    margin-top: 10px;

    .tabs {
      .tabs-style();
    }

    .table {
      padding: 10px;

      .scroll {
        height: 300px;
        overflow-y: hidden;

        .tr {
          &:nth-child(odd) {
            background-color: transparent;
          }
        }
      }

      .tr {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background-color: rgba(42, 86, 158, 0.53);

        .td {
          text-align: center;
          font-size: 12px;
          color: #fff;
          padding: 5px;

          &.green {
            color: #7ccf41;
          }

          &.yellow {
            color: #ffcb05;
          }
        }
      }
    }
  }
}
