.gridContainer {
  height: 100%;
}

.container {
  height: calc(100% - 107px);
}

.content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  padding: 16px 24px;
  background-color: #fff;
}

.content--form {
  padding: 8px;
  border-radius: 8px;
}

.bgGrey {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  padding: 8px;
  background-color: var(--color-grey-level-01);
  border-radius: 8px;
  box-shadow: 0 0 1px 0 rgba(227, 230, 235, 0.4), 0 1px 4px 0 rgba(31, 41, 55, 0.2);
}

/* 검색 영역 */
.search {
	position: relative;
  width: 100%;
  display: flex;
  align-items: end;
  gap: 7px;
  padding: 16px 24px;
  background-color: var(--color-white);
}

.search .form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 16px;
	width: 100%;
}

.search .form__item {
	max-width: 300px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.search .form__item--date {
	max-width: 365px;
}

/* 탭 즐겨찾기 css */
.tab-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-height: 32px;
	flex:none;
  background-color: #fff;
  border-bottom: 1px solid var(--color-border);
}

.tab-container .tab-arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.tab-container .tab-arrow-wrapper .btn-tab-arrow {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: solid 1px #c6c6c6;
  background-color: #fff;
}

.tab-container .tab-arrow-wrapper .btn-tab-arrow.left img {
  content: url(../assets/ic_tab_arrow_left_d@3x.png);
  width: 5px;
  height: 8px;
}

.tab-container .tab-arrow-wrapper .btn-tab-arrow.left.on img {
  content: url(../assets/ic_tab_arrow_left_n@3x.png);
}

.tab-container .tab-arrow-wrapper .btn-tab-arrow.right img {
  content: url(../assets/ic_tab_arrow_right_d@3x.png);
  width: 5px;
  height: 8px;
}

.tab-container .tab-arrow-wrapper .btn-tab-arrow.right.on img {
  content: url(../assets/ic_tab_arrow_right_n@3x.png);
}

.tab-container ul.tab {
  /* overflow: hidden; */
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
	min-height: 32px;
}

.tab-container ul.tab::-webkit-scrollbar {
  height: 5px;
}

.tab-container ul.tab::-webkit-scrollbar-track {
  background: transparent;
}

.tab-container ul.tab::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.tab-container ul.tab::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

.tab-container .tab .tab-menu {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: var(--font-size-xs);
  border-bottom: 2px solid transparent;
	height: 32px;
}

.tab-container .tab .tab-menu.on {
  background-color: var(--color-primary-light);
  border-bottom: 2px solid var(--color-primary);
}

.ic-bookmark {
  content: url(../assets/icon/icon_bookmark_off.svg);
}
.ic-bookmark.on {
  content: url(../assets/icon/icon_bookmark_on.svg);
}

.ic-tab-close {
  content: url(../assets/icon/icon_tab_close.svg);
  margin-left: 24px;
}

/*컨텐츠 탭*/
.nav-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  
  border-bottom: unset;
}

.nav-tabs .nav-item {
	margin-bottom: unset;
}

.nav-tabs .nav-link {
    border: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.nav-tabs a:not([href]):not([tabindex]):hover,
.nav-tabs a:not([href]):not([tabindex]):focus {
    color: var(--color-white);
    text-decoration: unset !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: unset;
}

.nav-link {
  display: inline-block;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--color-white) !important;
  background-color: var(--color-border);
}

.nav-link.active {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.nav-link:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}

/* 아이콘만 있는 버튼 툴팁 공통 css*/
.btn--icon:before {
	position: absolute;
	top: -26px;
  left: 18px;
	width: max-content;
	padding: 8px;
	border-radius: 8px 8px 8px 0;
	background: var(--color-white);
	box-shadow: 0 0 1px 0 rgba(227, 230, 235, 0.40), 0 1px 4px 0 rgba(31, 41, 55, 0.20);
	opacity: 0;
	z-index: 99;
	transition: all 0.2s ease;
}

.btn--icon:hover:before {
	opacity: 1;
	z-index: 99;
	transition: all 0.2s ease;
}

/*행 추가 툴팁*/
.btn--rowAdd:before {
  content: "행 추가";
}

/*행 삭제 툴팁*/
.btn--rowRemove:before {
  content: "행 삭제";
}

/*초기화 툴팁*/
.btn--reset:before {
  content: "초기화";
}

/*비밀번호 초기화 툴팁*/
.btn--resetPw:before {
	content: "비밀번호 초기화";
}

/*상위메뉴 추가 툴팁*/
.btn--addTopMenu:before {
	content: "상위메뉴 추가";
}

/*하위메뉴 추가 툴팁*/
.btn--addSubMenu:before {
	content: "하위메뉴 추가";
}

/*메뉴 삭제 툴팁*/
.btn--delMenu:before {
	content: "메뉴 삭제";
}

/*삭제 툴팁*/
.btn--delete:before {
	content: "삭제";
}

/*추가 툴팁*/
.btn--add:before {
	content: "추가";
}

/*삭제 툴팁*/
.btn--cancel:before {
	content: "취소";
}

/*수정 툴팁*/
.btn--edit:before {
	content: "수정";
}

/*찾기 툴팁*/
.btn--search:before {
	content: "찾기";
}


/* 대시보드 화면 */
.dashboard {
  padding: 16px 24px;
  position: relative;
  width: 100%;
  height: 100%;
}

.bg {
  position: relative;
}

.bg:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 300px;
  background-image: url("../assets/images/main/img_main_bg_02.png");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px;
}

.bg__logo {
  position: absolute;
  top: 27px;
  left: 32px;
}

.weatherInfo {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-white);
  font-size: var(--font-size-md);
}

.weatherInfo__wrap {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.weatherInfo__wrap li {
  display: flex;
  align-items: center;
}

.weatherInfo__item {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.weatherInfo__item:nth-of-type(1) {
  margin-right: 8px;
}

.weatherInfo__item:nth-of-type(1):after {
  content: "";
  position: absolute;
  right: -8px;
  width: 1px;
  height: 15px;
  background-color: var(--text-color-muted);
}

.weatherInfo__date {
  color: var(--color-border);
}

/*타이틀 / 값 스타일*/
.stats-summary {
	display: flex;
	gap: 16px;
	width: 100%;
}

.stats-summary-item {
	position: relative;
	display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 0 1px 0 rgba(227, 230, 235, 0.4), 0 1px 4px 0 rgba(31, 41, 55, 0.2);
}

.stats-summary-item > div {
	display: flex;
	justify-content: end;
	align-items: baseline;
	gap: 4px;
}

.stats-summary-item strong {
	font-size: 24px;
}

.stats-summary-status {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 12px;
	line-height: 20px;
}