@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/*
	Suresoft design theme css.
	Copyright(c) all rights reserved.
	Designer Bongwon Jeong. 2023.
*/
body {
  min-width:320px;
  font-family: Inter, 'Noto Sans KR', Poppins, Helvetica, "sans-serif";
  
}

main > .container-fluid {
  padding: 32px 15px 0;
}

.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-table-color);
  vertical-align: top;
  border-color: var(--bs-table-border-color);
  border-top: 3px solid;
  border-top-color: rgba(36, 52, 105, 0.6);
}

.card {
	border-radius: 0px;
}

.btn {
	border-radius: 0px;
}

.dropdown-menu {
	border-radius: 0px;
}

.form-control {
    border-radius: 0px;
}

.form-select {
    border-radius: 0px;
}

.note-frame {
    border-radius: 0px !important;
}

.datepicker {
    padding: 5px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
}

.note-frame {
    border-radius: 0px !important;
}

.modal {
    --bs-modal-border-radius: 0;
}
.btn-primary {
	--bs-btn-bg: #0a58ca;
    --bs-btn-border-color: #084aab;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #0a58ca; 
}

.btn-outline-primary {
    --bs-btn-color: #084aab;
    --bs-btn-border-color: #084aab;
    --bs-btn-hover-bg: #084aab;
}

.input-group-text {
	border-radius: 0px !important;
}

.accordion {
    --bs-accordion-border-radius: 0px !important;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
.alert {
	border-radius: 0px !important;
}

.list-group {
	border-radius: 0px !important;
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
#map {
	/* 지도 크기 설정 */
	height: calc(100vh - 60px - 36px); 
	width: 100%;
}

ul.timeline {
	list-style-type: none;
	position: relative;
}

ul.timeline:before {
	content: ' ';
	background: #d4d9df;
	display: inline-block;
	position: absolute;
	left: 29px;
	width: 2px;
	height: 100%;
	z-index: 400;
}

ul.timeline>li {
	margin: 20px 0;
	padding-left: 20px;
}

ul.timeline>li:before {
	content: ' ';
	background: white;
	display: inline-block;
	position: absolute;
	border-radius: 50%;
	border: 3px solid #22c0e8;
	left: 20px;
	width: 20px;
	height: 20px;
	z-index: 400;
}

#leftArea::-webkit-scrollbar {
	width: 7px;
}

#leftArea::-webkit-scrollbar-track {
	border-radius: 0px;
	background: #dee2e6;
}

#leftArea::-webkit-scrollbar-thumb {
	border-radius: 7px;
	background: #adb5bd;
}

#myLocationButton {
	position: absolute;
	top: 146px;
	z-index: 400;
	width: 44px;
	height: 44px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	background: #fff;
	border-radius: 5px;
	margin-left: 10px;
}

#info {
	padding: 10px;
	background: rgba(255, 255, 255, 0.8);
	position: absolute;
	top: 100px;
	left: 500px;
	z-index: 1000;
}
.slider-container {
    width: 100%;
    margin: 20px 0;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}
.leaflet-tile-container {
    transition: opacity 0.5s ease-in-out;
}

#sliderContainer {
	display: flex;
	align-items: center;
	gap: 10px;
}
    
#customLayerControl {
	position: fixed;
	top: 60px;
	right: 10px;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	padding: 10px;
	z-index: 99999;
}

#customLayerControl label {
	display: block;
	cursor: pointer;
}

#customLayerControl input[type="checkbox"] {
	margin-right: 5px;
}

.offcanvas{
--bs-offcanvas-height: 50vh;
}

/* Offcanvas-body를 flex container로 설정하여 자식 요소들을 세로로 배치 */
.offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}
        
/* 지정된 div의 높이를 설정 */
.chart-container {
   	flex: 1; /* 부모의 남은 공간을 차지하게 함 */
    display: flex;
    flex-direction: column; /* 세로로 차트들을 나열 */
}

/* 각 캔버스가 부모의 1/3을 차지하도록 설정 */
.chart-container canvas {
    flex: 1;
    width: 100% !important;
    height: 100% !important;
}
.alert-fixed {
	position: fixed;
	bottom: 30px;
	right: 20px;
	z-index: 7000;
}

.loader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: none;
    opacity: 0.8;
    background: rgb(156, 154, 154);
    z-index: 9999;
    text-align: center;
}

.loader > div {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
}
.dot {
	height: 7px;
	width: 7px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
}

.dot-md {
	height: 14px;
	width: 14px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
}

.dot-xl {
	height: 23px;
	width: 23px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
}
.flex-grow-1 {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.flex-grow-1::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}