@import "./function.scss";
@import "@/assets/css/theme.scss";

// $gap-padding: halfW(8);
$title-hd: halfH(109);
.display-flex{
    display: flex;
}
.flex-1{
    flex: 1;
}
.margin-tg-20{
    margin: halfH(20) 0;
}
// .margin-l-30{
//     margin-left: halfW(30);
// }
// .margin-r-30{
//     margin-right: halfW(30);
// }
.margin-t-20{
    margin-top: halfH(20);
}
.margin-r-20{
    margin-right: halfW(20);
}
.margin-t-10{
    margin-top: halfH(10);
}
.border{
    border: 1px solid rgba(0, 123, 211, 0.2);
    border-radius: halfW(5);
}
.w-full{
    width: 100%;
}
// .map-con{
//     width: 100%;
//     height: halfH(838);
// }
.screen{
    width: 100vw;
    height: 100vh;
    background: var(--page-bg);
    .screen-content{
      //  margin: 0 halfW(30);
    }
}
 .user .card-body{
    display: flex;
    align-items: center;
  }
  .community-type .card-body, .resident .card-body{
    display: flex;
    align-items: center;
    align-content: end;
    flex-wrap: wrap;
    gap: halfW(50);
  }
  .b1-community-type.community-type .card-body, .b1-resident.resident .card-body{
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 0;
  }
.tdt-map-container {
    .tdt-label {
      background: transparent;
      box-shadow: none;
      border: none;
      color: #2f61a6ff;
      font-size: 12px;
      padding: 0;
      margin-left: 4px;
      font-weight: 600;
    }
  }
  .tdt-map-container {
    width: 100%;
    height: 100%;
    .tdt-infowindow-content-wrapper {
      padding: 0;
      border-radius: 4px;
      width: 100%;
      height: 100%;
      background: transparent;
      .tdt-infowindow-content {
        margin: 0;
        padding: 2px;
        width: 100% !important;
        height: 100%;
        .map-mark-container {
          display: flex;
          justify-content: space-between;
          width: halfW(400);
          height: halfH(90);
          min-height: 80px;
          border-radius: 6px;
          // position: absolute;
          overflow: hidden;
          cursor: pointer;
        
          &.blue {
            background: rgba(50, 129, 219, 0.6);
            border: 1px solid rgba(50, 136, 233, 1);
          }
        
          &.yellow {
            background: rgba(230, 188, 116, 0.6);
            border: 1px solid rgba(233, 175, 50, 1);
          }
        
          &.green {
            background: rgba(45, 158, 12, 0.6);
            border: 1px solid rgba(45, 158, 12, 1);
          }
        
          .left-side {
            height: 100%;
            width: halfW(76);
            position: relative;
        
            &.blue {
              background: #3281db;
            }
        
            &.yellow {
              background: #e4a537;
            }
        
            &.green {
              background: #2d9e0c;
            }
        
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        
          .right-side {
            flex: 1;
            padding: halfH(20) halfW(20);
            .name-info {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
            }
        
            &-name {
              width: 90%;
              font-size: 18px;
              font-weight: bold;
              color: rgba(235, 244, 255, 1);
            }
        
            &-local {
              font-size: 16px;
              font-weight: 400;
              color: rgba(235, 244, 255, 1);
              margin-top: halfH(10);
            }
        
            &-time {
              width: 10%;
              text-align: right;
              font-size: 14px;
              font-weight: 400;
              color: rgba(235, 244, 255, 1);
            }
          }
        }
      }
    }
    .tdt-infowindow-tip-container {
      display: none;
    }
  }