body,
html {
  width: 100%;
  height: 100%;
}



.wrap {
  padding-top: 70px;
  height: 100%;
}
.windowSplit {
  position: relative;
  height: 100%;
  overflow: hidden;
}

:root,
[data-ph-theme="map"] {
  --ph-InfoSplitGroup-width: 340px;
}

.container-map {
  position: relative;
  left: var(--ph-InfoSplitGroup-width);
  width: calc(100% - var(--ph-InfoSplitGroup-width));
  height: 100%;
  transition: all 0.3s;
  overflow: hidden;
}
.container-map.full {
  width: 100%;
  left: 0;
}

.InfoSplitGroup {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--ph-InfoSplitGroup-width);
  height: 100%;
  padding: 10px 10px;
  background: #f6f8fc;
  transition: all 0.3s;
}

.InfoSplitGroup.close {
  --ph-InfoSplitGroup-left: calc(var(--ph-InfoSplitGroup-width) * -1);
  left: var(--ph-InfoSplitGroup-left);
}

@media (max-width: 768px) {
  .mapTimelineGroup {
    width: calc(100% - 0px);
  }

  .InfoSplitGroup.close {
    /* z-index: 2; */
    /* left: 0%; */
    /* width: 100%; */
  }
}



.sidebarbtnGroup {
  z-index: 1;
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
}
.sidebarbtnGroup a[class*="btn-icon"] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1px;
  padding: 0 6px;
  background: #fff;
}
h2.unitTitle {
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 1.375rem;
  color: var(--ph-blue);
  font-weight: bold;
}
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 10px;
}
.item-sidebar-card{
  margin: 10px 0;  
  padding: 10px 10px;
  background: var(--bs-gray-200);
  border-radius: var(--bs-border-radius-lg) !important;
}
.item-sidebar-card .title{
  color: var(--ph-blue);
  font-size: 1.2rem;
  font-weight: bold;
}
.item-sidebar-card .note{
  color: var(--ph-orange);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}
.card-chart{
  padding: 10px;
  margin-top: 10px;
  background: var(--bs-white);
  border: 1px solid var(--ph-blue);
}
.windowSplit .item-alertQuantity.gray{
    flex-wrap: nowrap;
}
.windowSplit .item-alertQuantity.gray .total {
    flex: none;
}
.windowSplit-switch{
    z-index: 2;
    position: absolute;
    right: -44px;
    display: flex;
    align-items: center;
    justify-self: center;
    padding: 20px 10px;
    color: var(--ph-blue);
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr ;
    background: #f6f8fc;
    border-radius: 0 10px 10px 0;

}
.InfoSplitGroup .windowSplit-switch i{
    margin: 5px;
}
.InfoSplitGroup .windowSplit-switch i[class*="left"]{ 
    display: inline-flex;   
}
.InfoSplitGroup .windowSplit-switch i[class*="right"]{ 
  display: none;  
}

.InfoSplitGroup.close .windowSplit-switch i[class*="right"]{   
    display: inline-flex; 
}
.InfoSplitGroup.close .windowSplit-switch i[class*="left"]{ 
    display: none;   
}


.item-device:hover{
  background: var(--bs-gray-300);
}

/*地圖上彈跳視窗使用樣式*/
.moduleArea{
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;  
  pointer-events: none;
}
.itme-mapicon{
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}
.item-module-video .close-module-video{
  position: absolute;
  right: -19px;
  top: -19px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-blue);
  border: 3px solid var(--ph-blue);
  background: var(--bs-white);
  border-radius: var(--bs-border-radius-pill);
}
.item-module-video {  
  pointer-events:visible;
  position: relative;
  border: 2px solid var(--ph-blue);
  padding: 10px 10px;
  margin: 0 10px;
  background-color: #ffffff;
  border-radius: var(--bs-border-radius-lg) !important;
}
.imgName .note{
  font-size: 0.8rem;
}
.sliderImg img{
  max-width: 330px;
}

.layerAbgne .form-check{
  display: flex;
  align-items: center;
}
.layerAbgne .form-check input{
  width: 1em !important;
  height: 1em;
  margin-bottom: 2px;
  margin-right: 10px;
}
.layerAbgne .form-check img{
  height: 50px;
  margin: 0 10px;
}
.layerAbgne .form-check .form-check-label{
  flex: 1;
}

@media (max-width: 768.99px) {
  .windowSplit-switch {    
    /* right: -26px; */
    /* padding: 20px 4px; */
  }
}