/*
  app.css파일을 override하는 custom 파일
*/

/* Spread 글꼴*/
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/Calibri.woff2') format('woff2'), url('../fonts/Calibri.woff') format('woff');
}

@font-face {
  font-family: 'Arial';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/ArialMT.woff2') format('woff2'), url('../fonts/ArialMT.woff') format('woff');
}

/* Joinpia Custom 글꼴*/
@font-face {
  font-family: 'Joinpia-Font';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NanumGothic-Regular.woff2') format('woff2'), url('../fonts/NanumGothic.ttf') format('truetype');
}

@font-face {
  font-family: 'Joinpia-Font';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/NanumGothic-Bold.woff2') format('woff2'), url('../fonts/NanumGothicBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Joinpia-Font';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/NanumGothic-ExtraBold.woff2') format('woff2'), url('../fonts/NanumGothicExtraBold.ttf') format('truetype');
}

:root {
  --container-height: 650px;
  --navbar-height: 40px;
  --menu-font: "Inter", sans-serif
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  padding-bottom: 0;
  overflow: hidden;
  font-family: "Joinpia-Font", sans-serif !important;
}

/* 왼쪽 사이드 메뉴 */
#sidebar-menu>ul>li>a {
  color: #404451;
  padding: 8px 20px;
  font-family: var(--menu-font);
  font-size: 0.9rem; }

#sidebar-menu>ul>li ul {
  padding-left: 25px;}

.nav-second-level li a {
  padding: 5px 20px;
  color: #404451;
  font-family: var(--menu-font);
  font-size: 0.8rem; }


/* footer */
.footer {
  padding: 8px 8px;
  color: #98a6ad;}
.footer .footer-links a {
  color: #3bafda;}
.footer .footer-links a:hover {
  color: #3bafda; }

/********************* 상단 메뉴 & 로고 사이즈 조절 *********************/
.content-page {
  padding: var(--navbar-height) 0 0 0;
  min-height: 100vh;
}

.left-side-menu {
  width: 240px;
  bottom: 0;
  padding: 20px 0;
  position: fixed;
  transition: all .1s ease-out;
  top: 0;
  padding-top: calc(var(--navbar-height) + 20px);
  box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
  z-index: 1; }

.logo-box {
  height: var(--navbar-height);
  width: 240px;
  transition: all .1s ease-out;
  position: fixed;
  top: 0;
  z-index: 1; }
.logo-box .logo {
  line-height: var(--navbar-height); }
.logo-box .logo > span.logo-lg {
  margin-left: -50px;
  margin-top: -10px; }
.logo-box .logo > span.logo-lg > img {
  height: 60px; }
.logo-box .logo > span.logo-sm {
  margin-left: -10px; }
.logo-box .logo > span.logo-sm > img {
  height: 37px; }


.navbar-custom {
  box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
  padding: 0 10px 0 0;
  position: fixed;
  left: 240px;
  right: 0;
  top: 0;
  height: var(--navbar-height);
  transition: all .1s ease-out;
  z-index: 1001;}
  .navbar-custom .topnav-menu .nav-link {
    padding: 0 7px;
    color: rgba(255, 255, 255, 0.75);
    display: block;
    text-align: center;
    min-width: 32px;
    max-height: var(--navbar-height);
    height: var(--navbar-height);
    line-height: var(--navbar-height);
    font-size: 0.8em;
    font-family: var(--menu-font); }
  .navbar-custom .topnav-menu.topnav-menu-left .nav-link {
    font-size: 0.8em; }
  .navbar-custom .button-menu-mobile {
    border: none;
    color: #fff;
    display: inline-block;
    height: var(--navbar-height);
    line-height: var(--navbar-height);
    width: 60px;
    background-color: transparent;
    font-size: 24px;
    cursor: pointer;
  }

@media (max-width: 1239px) {
  .navbar-custom .topnav-menu .nav-link {
    padding: 0 6px;
  }

  .navbar-custom .topnav-menu.topnav-menu-left .nav-link {
    font-size: 0.7em; }
}

/* 알림 뱃지 */
.notification-list .noti-icon-badge {
  top: 3px;
  right: 3px;
  background-color: #accbe1;
}

/* 프로필 */
.navbar-custom .dropdown .nav-link.dropdown-toggle.show {
  color: #2d2d2a;
  font-weight: 700;
}
.navbar-custom .nav-user .user-img {
  object-fit: scale-down;
  max-width: 32px;
  max-height: 32px;
}

.dropdown-item.notify-item.joinpia {
  color: #fff;}
.dropdown-item.notify-item.joinpia:hover {
  background-color: #accbe1;
  color: black;}
.dropdown-item.notify-item.joinpia:focus {
  background-color: #accbe1;
  color: black;}


/********************* 왼쪽 사이드 메뉴, 로고, 상단 메뉴 색상 조절 *********************/
/* 왼쪽 사이드 색상 */
.left-side-menu {
  /*background-image: linear-gradient(to bottom, #d2d3e1, #dedee8, #e9e9f0, #f4f4f7, #ffffff)*/
  background-image: linear-gradient(to top, #8695ff, #9ba4f8, #aeb4f1, #c0c3e9, #d2d3e1)
}
/* 상단 색상 */
.navbar-custom {
  background-image: linear-gradient(to right, #30618c, #37759f, #3f8ab2, #499fc4, #55b4d5);
  /*background-image: linear-gradient(to right, #0099fa, #70a5f4, #9bb3ee, #bac2e7, #d2d3e1);*/
}
/* 로고 색상 */
.logo-box {
  background-image: linear-gradient(to left, #30618c, #6f84a8, #a3aac4, #d2d3e1, #ffffff)
  /*background-image: radial-gradient(circle, #fafae9, #ccecd0, #89dfd2, #2bcdea, #00b2ff);*/
}