html{
    overflow: hidden;
    height: 100%;
    width: 100%;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.container {
    width: 100%;
    max-width: 400px; /* 최대 너비 지정 */
    margin: 100px auto;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 10px;
}

input[type="text"],
input[type="password"] {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* 미디어 쿼리 */
@media (max-width: 600px) {
    .container {
        margin: 50px auto;
        padding: 10px;
    }
}

.map_wrap{
    width: 100%;
    height: 100%;
    position:relative;
    overflow:hidden;
}
.radius_border{border:1px solid #919191;border-radius:5px;}     
.custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;width:130px;height:30px;margin:0;padding:0;z-index:1;font-size:12px;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;}
.custom_typecontrol span {display:block;width:65px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}
.custom_typecontrol .typebtn {background:#fff;background:linear-gradient(#fff,  #e6e6e6);}       
.custom_typecontrol .typebtn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
.custom_typecontrol .typebtn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}    
.custom_typecontrol .selected_btn {color:#fff;background:#425470;background:linear-gradient(#425470, #5b6d8a);}
.custom_typecontrol .selected_btn:hover {color:#fff;}   
.custom_zoomcontrol {position:absolute;top:50px;right:10px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;} 
.custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}     
.custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}             
.custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}     

.search-form {
  width: 100%;
  flex-direction: row;
}

.search-form input {
  border: 0;
  font-size: 14px;
  color: #012970;
  /* border: 1px solid rgba(1, 41, 112, 0.2); */
  border: 1px solid rgba(255, 255, 255, 1);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);;
}

.search-form input:focus,
.search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  /*border: 1px solid rgba(1, 41, 112, 0.3);*/
  border: 1px solid rgba(255, 255, 255, 1);

}

.search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  margin-top: 5px;
  background: none;
}

.search-form button i {
  /* color: #012970;*/
  color: #fff; 
}

.top-right{
  right: 0;
  left: auto;
}

.toc-card {
}

.toc-card .card-icon {
  color: #fff;
  /* background: #e0f8e9; */
  margin: 2px auto;
  border: 6px solid green;
}
.card-icon{
  font-size: 15px;
  font-weight: bold;
  line-height: 0;
  width: 95%;
  height: 85px;
  flex-shrink: 1;
  flex-grow: 0;
}
.card-icon p{
  margin-bottom: 0;
}
.sam00-icon{
  font-size: 14px;
}
.card-value{
  color:#fff
}

.header-nav{
  background-color:  rgba(0, 0, 0, 0);
}

.toggle-btn-col{
  background-color:  rgba(1, 41, 112, 0.1);
}

.ms-auto2 {
  margin-left: 20%;
  margin-right: 20%;
}
.card{
  background-color: rgba(255,255,255,0.2);
}
.card-body{
  padding: 5px 5px 5px 5px;
}
.card-body2{
  margin: 5px 5px 5px 5px;
  background-color: #333333;
  text-align: center;
}
.card-body3{
  margin: 5px 5px 5px 5px;
  background-color: rgba(0,0,0,0.5);
  text-align: center;
  box-shadow: none;
}
.card-body4{
  margin: 0;
  background-color: green;
  min-height: 41.59px;
}
.card-body-measure-status{
    padding: 2px 2px 2px 2px;
    text-align: center;
}
.row2{
  display: flex;
  flex-wrap: wrap;
  padding: 5px 5px;
  justify-content: space-between;
  height:100%;
}
.row2:before{
  display: inline-block;
}
.row2:after{
  display: inline-block;
}
.value-title{
  padding: 5px;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
}
.h7{
  padding: 5px 0px 5px 0px;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  margin-top:0;
  margin-bottom: .2rem;
  line-height: 1.2;
}
.h7-1{
  padding: 5px 1px 5px 1px;
  font-size: 12px;
  font-weight: 500;
  color: #8f8f8f;
  font-family: "Poppins", sans-serif;
  margin-top:0;
  /* margin-bottom: .2rem; */
  line-height: 1.2;
  
}
.alarm-wrap{
  display: flex;
}
.col-3-1 {
  flex: 0 0 auto;
  width: 22%
}
.col-3-2{
  flex: 0 0 auto;
  width: 30%
}
.sub-card-title{
  padding: 0px 0px 0px 0px;
  font-size: 15px;
}
.extra-card-title{
  padding: 0px 0px 5px 0px;
}
.card-title-left{
  padding: 5px 0px 5px 0px;
}
.name-card-title{
  padding: 0px 0px 5px 0px;
  font-size: 20px;
  text-align: center;
}
.extra-value-title{
  margin: 5px 0px 5px 0px;
  font-size:18px;
}
.table-dark-custom{
  --bs-table-bg: rgba(0, 0, 0, 0);
  --bs-table-border-color: rgba(0,0,0,0);
}
.bottom-bar{
  position: fixed;
  display:flex;
  justify-content: center;
  width: 100%;
  height: 25%;
  bottom: 1px;
  z-index:1030;
  transition: all 0.3s;
}
.event-title{
  position: relative;
  margin-bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
  height: 15%;
  padding: 5px 5px 2px 10px;
  flex-direction: row;
}
.event-window{
  width:40%;
  height: 100%;
}
.event-window-content{
  position: relative;
  margin-bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  min-height: 100%;
  height:auto;
}
.event-table{
  height: 85%;
  overflow-y: auto;
  scrollbar-width:thin;
  scrollbar-color: #000000 transparent;
}
.event-icon{
  margin-left: auto;
}
.infowin{
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0 30px rgba(255,255,255,0.1);
  background-color: #393d49;
  color:#fff;
}
#collect-water-a{
  background-color: red;
}
#status-toc{
  background-color:orange;
}
.site-name-value{
  margin-top: 10px;
  font-size: 20px;
}
.status-extra-card{
  background-color: grey;
}
#extra-value-circle{
  border-color: grey;
}
.align-items-center2{
  align-items: center;
}
.search-window-content{
  position: relative;
  margin-bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
}
.search-table{
  min-height: 0%;
  max-height: 350px;
  overflow-y: auto;
  scrollbar-width:thin;
  scrollbar-color: #000000 transparent;
  visibility: hidden;
  cursor: pointer;
}
.auto-btn{
  display: inline-flex;
  align-items: center;
  user-select: none;
  position: relative;
  vertical-align: middle;
  margin-bottom: 0;
}
.auto-btn-label{
  margin-right: 0.5rem;
  margin-bottom: 0.0rem;
  font-size: 1rem;
  color: white;
}
.auto-switch-icon{
  font-size: 1.3rem;
  color: white;
}
.icon-switch{
  margin-top: 0.2rem;
  margin-right: 0.4rem;
}