.geo-map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;

  .geo-map-body {
    height: calc(100% - 54px);
    padding: 0 20px;
    background-color: #061e3f;
    border-right: 1px solid rgba(61, 129, 240, 0.5);
    border-left: 1px solid rgba(61, 129, 240, 0.5);

    & > div {
      height: 100%;
    }
  }

  .geo-map-header {
    display: flex;
    background-color: #061e3f;
    & > div {
      &:first-child {
        flex: 1;
        height: 37px;
        border-top: 1px solid rgba(61, 129, 240, 0.5);
        border-left: 1px solid rgba(61, 129, 240, 0.5);
        border-top-left-radius: 12px;
      }
      &:last-child {
        flex: 1;
        height: 37px;
        border-top: 1px solid rgba(61, 129, 240, 0.5);
        border-right: 1px solid rgba(61, 129, 240, 0.5);
        border-top-right-radius: 12px;
      }
      &:nth-child(2) {
        flex: none;
        width: 326px;
        height: 37px;
        background: #061e3f url('~@/assets/images/screen/map-bg-header.png') no-repeat center 100%;
      }
    }
  }

  .geo-map-footer {
    display: flex;
    height: 17px;

    & > div {
      &:first-child {
        flex: none;
        width: 99px;
        height: 17px;
        background: url('~@/assets/images/screen/map-bg-lbt.png') no-repeat 100% 100%;
      }
      &:last-child {
        flex: none;
        width: 99px;
        height: 17px;
        background: url('~@/assets/images/screen/map-bg-rbt.png') no-repeat 100% 100%;
      }
      &:nth-child(2) {
        flex: 1;
        height: 17px;
        background: url('~@/assets/images/screen/map-bg-mbt.png') repeat-x;
      }
    }
  }
}