@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard-SemiBold';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard-Bold';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@keyframes shake {
  /* 0% { transform: translate(1px, 1px) rotate(0deg); } */
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  /* 20% { transform: translate(-3px, 0px) rotate(1deg); } */
  30% { transform: translate(3px, 2px) rotate(0deg); }
  /* 40% { transform: translate(1px, -1px) rotate(1deg); } */
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  /* 60% { transform: translate(-3px, 1px) rotate(0deg); } */
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  /* 80% { transform: translate(-1px, -1px) rotate(1deg); } */
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.shake {
  animation: shake 0.3s; 
  animation-iteration-count: 1; 
}

.v-main__wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  @media screen and (max-width: 1023px){
    align-items: initial;
    justify-content: initial;
  }
}

/* 레이아웃 관련 CSS */
.top-layout{
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Pretendard-Bold';

  @media screen and (max-width: 1023px){
    width: 1024px;
  }
  @media screen and (min-width: 1024px) and (max-width: 1250px){
    width: 1024px;
  }
  @media screen and (min-width: 1251px){
    width: 1250px;
    margin-left: auto;
    margin-right: auto;
  }
}
.profile-dashboard{
  width: 100vw;
  height: 60px;
  background: linear-gradient( to right, #61C0BD, #008CD6 );
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  gap : 10px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;

  @media screen and (max-width: 1023px){
    width: 1024px;
  }
  @media screen and (min-width: 1024px) and (max-width: 1250px){
    width: 1024px;
  }
  @media screen and (min-width: 1251px){
    width: 1250px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 레이아웃 속성 */
.layout-button-menu {
  height: 50px;
  display: flex;
  align-items: flex-start; /* 수직 정렬을 맨 위로 설정합니다. */
  font-family: 'Pretendard-Bold';
  @media screen and (max-width: 1023px){
    width: 1024px;
  }
  @media screen and (min-width: 1024px) and (max-width: 1250px){
    width: 1024px;
  }
  @media screen and (min-width: 1251px){
    width: 1250px;
    margin-left: auto;
    margin-right: auto;
  }
}
.layout-button-menu .button-group {
  display: flex;
  flex-direction: row; /* 버튼을 세로로 나열합니다. */
  align-items: flex-end; /* 버튼을 오른쪽으로 정렬합니다. */
  gap: 10px; /* 버튼 사이의 간격을 설정합니다. */
  margin-right: 10px;
}
.layout-button-menu .button-group .v-tab{
  /* 탭메뉴 글자 크기 설정 */
  font-size:20px;
}
.layout-button-menu .button-group .v-tabs-slider-wrapper {
  /* 탭메뉴 슬라이더(밑줄 표시) 가운데 정렬 */
  display: flex;
  justify-content: center;
}
.layout-button-menu .button-group .v-tabs-slider {
  /* 탭메뉴 슬라이더(밑줄 표시) 스타일 설정 */
  color: #008BD6 !important;
  width: 30px !important;
  height: 5px !important;
}
.component-area{
  position: relative;
  width: 100%;
  min-height: 80vh;
  border-top: 0.5px solid rgb(225, 225, 225);

  @media screen and (max-width: 1023px){
    width: 1024px;
  }
  @media screen and (min-width: 1024px) and (max-width: 1250px){
    width: 1024px;
  }
  @media screen and (min-width: 1251px){
    width: 1250px;
    margin-left: auto;
    margin-right: auto;
  }
}
.header-profile-cover {
  background: #CAE5F4;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.header-profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-box {
  display: flex;
  align-items: start;
  flex-direction: column;
  background: white;
  width: 270px;
  padding: 18px 24px;
  gap: 10px;
}
.profile-box .profile-title{
  display: flex;
  justify-content: space-between;
  align-items: start;
  font-weight: bold;
  /* border-bottom: 0.5px solid rgb(225, 225, 225); */
  width: 100%;
  margin-bottom: 10px;
}
.profile-box .profile-btn{
  width: 222px !important;
  height: 48px !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

/* 레이아웃 알람창 속성 */
.alarm-box{
  display: flex;
  align-items: start;
  flex-direction: column;
  background: white;
  width: 270px;
  padding: 18px 24px;
}
.alarm-box .alarm-title{
  display: flex;
  justify-content: space-between;
  align-items: start;
  font-weight: bold;
  /* border-bottom: 0.5px solid rgb(225, 225, 225); */
  width: 100%;
  margin-bottom: 10px;
  padding-top: 0px;
}
.alarm-box .alarm-data{
  width: 100%;
  display: flex;
  align-items: start;
  flex-direction: column;
  background: white;
  gap: 10px
}
.alarm-btn{
  width: 222px !important;
  height: 48px !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

.alarm-detail-box{
  display: flex;
  justify-content: space-between;
  min-width:800px;
  min-height:700px;
}
.alarm-detail-title-box{
  display: flex;
  justify-content: space-between;
  font-size:24px;
  font-weight: bold;
  font-family: 'Pretendard-Bold';
  border-bottom: 1px solid #0000001a;
  margin-bottom: 20px;
  padding: 20px 20px 0px 20px;
}
.alarm-detail-content-box{
  font-family: 'Pretendard-Regular';
  padding: 0px 20px 0px 20px;
  background: white;
}
.alarm-detail-sub-title{
  font-size: 18px;
  color: #2e2e2e;
  margin-bottom: 16px;
  font-family: 'Pretendard-Bold';
}
.alarm-detail-sub-title span{
  font-size: 18px;
  color: #008bd6;
}
.content-list-title-box{
  height:30px;
  display:flex;
  justify-content:space-between;
  font-weight:bold;
  padding: 0px 12px 0px 12px;
}
.content-list-title-box .title-flex{
  display:flex;
  align-items:start;
  justify-content:start;
  gap:10px;
  width:100%;
}
.description-box{
  display: flex;
  align-items: start;
  height:40px;
  display: flex;
  border-top: 1px solid #0000001a;
  border-bottom: 1px solid #0000001a;
  border-radius: 3px;
  background: #f5f5f5;
  padding: 8px 12px 8px 12px;
}
.description-box p{
  margin: 0;
  margin-left: 8px;
  font-size: 14px;
  color: #0081c7;
}
.content-list-box{
  height:70px;
  display: flex;
  border-top: 1px solid #0000001a;
  border-bottom: 1px solid #0000001a;
  border-radius: 3px;
  padding: 10px 12px 10px 12px;
}
.content-list{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}
.content-list p{
  margin: 0px;
}
.shortcut-btn-flex{
  display:flex;
  align-items:end;
  justify-content:end;
}
.shortcut-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 100%;
  background: rgb(239, 249, 248) !important;
  color: rgb(73, 173, 169) !important;
}
.alarm-detail-btn-box{
  display:flex;
  flex-direction: column;
  gap:10px;
  padding: 20px 20px 20px 20px;
  background: white;
}

/* 로딩창 및 버튼 등 */

/* 로딩창 css */
.v-spinner{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 98;
  background: white;
}

.v-btn-toggle > .v-btn.v-btn--active {
  background-color: #0081C7 !important;
  color: #fff !important;
}

/* 에러메세지 css */
.error-message-box{
  font-family: 'Pretendard-SemiBold';
  height: 25px;
}

/* 팝업창 배경 */
.v-dialog{
  background: white;
}