/* ==fonts.720.class Start ================ */
/* ==fonts.720.class================ */
.jj {
  /*!
 * Agate by Taufik Nurrohman <https://github.com/taufik-nurrohman>
 * ---------------------------------------------------------------
 *
 * #ade5fc
 * #a2fca2
 * #c6b4f0
 * #d36363
 * #fcc28c
 * #fc9b9b
 * #ffa
 * #fff
 * #333
 * #62c8f3
 * #888
 *
 */
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Thin.woff2') format('woff2'), url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Thin.woff') format('woff');
  font-style: normal;
  font-weight: 100;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Light.woff') format('woff'), url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2'), url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Medium.woff') format('woff'), url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Bold.woff') format('woff'), url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Black.woff2') format('woff2'), url('/repository/assets/libs/fonts/NotoSansKR/NotoSansKR-Black.woff') format('woff');
  font-style: normal;
  font-weight: 900;
}
@font-face {
  font-family: 'Gyeonggi Title';
  src: url('/repository/assets/libs/fonts/Gyeonggi/Title_Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Gyeonggi Title';
  src: url('/repository/assets/libs/fonts/Gyeonggi/Title_Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Gyeonggi Title';
  src: url('/repository/assets/libs/fonts/Gyeonggi/Title_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Gyeonggi Batang';
  src: url('/repository/assets/libs/fonts/Gyeonggi/Batang_Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gyeonggi Batang';
  src: url('/repository/assets/libs/fonts/Gyeonggi/Batang_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'NanumBarunGothicWeb';
  src: url('/repository/assets/libs/fonts/NanumBarunGothicWeb/NanumBarunGothicWeb.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'NanumBarunGothicWeb';
  src: url('/repository/assets/libs/fonts/NanumBarunGothicWeb/NanumBarunGothicWebBold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'NanumBarunGothicWeb';
  src: url('/repository/assets/libs/fonts/NanumBarunGothicWeb/NanumBarunGothicWebLight.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: 'NanumSquare';
  src: url('/repository/assets/libs/fonts/NanumSquare/NanumSquareL.woff2') format('woff2'), url('/repository/assets/libs/fonts/NanumSquare/NanumSquareL.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: 'NanumSquare';
  src: url('/repository/assets/libs/fonts/NanumSquare/NanumSquareR.woff') format('woff'), url('/repository/assets/libs/fonts/NanumSquare/NanumSquareR.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'NanumSquare';
  src: url('/repository/assets/libs/fonts/NanumSquare/NanumSquareB.woff') format('woff'), url('/repository/assets/libs/fonts/NanumSquare/NanumSquareB.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'NanumSquare';
  src: url('/repository/assets/libs/fonts/NanumSquare/NanumSquareEB.woff') format('woff'), url('/repository/assets/libs/fonts/NanumSquare/NanumSquareEB.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: 'NanumSquareAc';
  src: url('/repository/assets/libs/fonts/NanumSquareAc/NanumSquareAcL.woff') format('woff'), url('/repository/assets/libs/fonts/NanumSquareAc/NanumSquareAcL.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: 'NanumSquareAc';
  src: url('/repository/assets/libs/fonts/NanumSquareAc/NanumSquareAcR.woff') format('woff'), url('/repository/assets/libs/fonts/NanumSquareAc/NanumSquareAcR.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'NanumSquareAc';
  src: url('/repository/assets/libs/fonts/NanumSquareAc/NanumSquareAcB.woff') format('woff'), url('/repository/assets/libs/fonts/NanumSquareAc/NanumSquareAcB.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'NanumSquareAc';
  src: url('/repository/assets/libs/fonts/NanumSquareAc/NanumSquareAcEB.woff2') format('woff2'), url('/repository/assets/libs/fonts/NanumSquareAc/NanumSquareAcEB.woff') format('woff');
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('/repository/assets/libs/fonts/FontAwesome/fontawesome-webfont.woff2') format('woff2'), url('/repository/assets/libs/fonts/FontAwesome/fontawesome-webfont.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'D2Coding';
  src: url('/repository/assets/libs/fonts/D2Coding/D2Coding.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'consolas';
  src: url('/repository/assets/libs/fonts/consolas/consola.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'ShareTechMono-Regular';
  src: url('/repository/assets/libs/fonts/ShareTechMono-Regular/ShareTechMono-Regular.woff2') format('woff2'), url('/repository/assets/libs/fonts/ShareTechMono-Regular/ShareTechMono-Regular.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Digital-7';
  src: url('/repository/assets/libs/fonts/Digital-7/Digital-7.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Digital-7 Mono';
  src: url('/repository/assets/libs/fonts/Digital-7/Digital-7Mono.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'KeaniaOne-Regular';
  src: url('/repository/assets/libs/fonts/KeaniaOne-Regular/KeaniaOne-Regular.woff2') format('woff2'), url('/repository/assets/libs/fonts/KeaniaOne-Regular/KeaniaOne-Regular.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'nmf-Classic-B';
  src: url('/repository/assets/libs/fonts/nmf/nmf-Classic-B.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KCC-Jeongbeom';
  src: url('/repository/assets/libs/fonts/KCC/KCC-Jeongbeom.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Grandpa_sharing';
  src: url('/repository/assets/libs/fonts/Grandpa_sharing/Grandpa_sharing.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KOTRAHOPE';
  src: url('/repository/assets/libs/fonts/KOTRA/KOTRAHOPE.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'LAB-Digital';
  src: url('/repository/assets/libs/fonts/LAB-Digital/LAB-Digital.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'HSGyeoulNoonkott20';
  src: url('/repository/assets/libs/fonts/HSGyeoul/HSGyeoulNoonkott20.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KNU TRUTH';
  src: url('/repository/assets/libs/fonts/KNU/KNU TRUTH.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Chosun Ilbo Myungjo';
  src: url('/repository/assets/libs/fonts/Chosun/Chosunilbo_myungjo.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Chosun Sm';
  src: url('/repository/assets/libs/fonts/Chosun/ChosunSm.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Chosun Kg';
  src: url('/repository/assets/libs/fonts/Chosun/ChosunKg.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Chosun Sg';
  src: url('/repository/assets/libs/fonts/Chosun/ChosunSg.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Chosun Centennial';
  src: url('/repository/assets/libs/fonts/Chosun/ChosunCentennial.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Tenada';
  src: url('/repository/assets/libs/fonts/Tenada/Tenada.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'SUIT-Regular';
  src: url('/repository/assets/libs/fonts/SUIT/SUIT-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'NotoSerifKR';
  src: url('/repository/assets/libs/fonts/NotoSerifKR/NotoSerifKR.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KoddiUDOnGothic-Regular';
  src: url('/repository/assets/libs/fonts/KoddiUD/KoddiUDOnGothic-Regular.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'HakgyoansimChilpanjiugaeTTF-B';
  src: url('/repository/assets/libs/fonts/Hakgyoansim/HakgyoansimChilpanjiugaeTTF-B.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'HakgyoansimChilpanjiugaeTTF-L';
  src: url('/repository/assets/libs/fonts/Hakgyoansim/HakgyoansimChilpanjiugaeTTF-L.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'TTHakgyoansimEunhasuR';
  src: url('/repository/assets/libs/fonts/Hakgyoansim/TTHakgyoansimEunhasuR.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'ChungbukNationalUniversity-Regular';
  src: url('/repository/assets/libs/fonts/ChungbukNationalUniversity/ChungbukNationalUniversity-Regular.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Shilla_CultureB-Bold';
  src: url('/repository/assets/libs/fonts/Shilla_Culture/Shilla_CultureB-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-display: swap;
  src: local('Pretendard Black'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-Black.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-display: swap;
  src: local('Pretendard ExtraBold'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-ExtraBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: local('Pretendard Bold'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-display: swap;
  src: local('Pretendard SemiBold'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-SemiBold.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-display: swap;
  src: local('Pretendard Medium'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-Medium.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: local('Pretendard Regular'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-display: swap;
  src: local('Pretendard Light'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-display: swap;
  src: local('Pretendard ExtraLight'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-ExtraLight.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-display: swap;
  src: local('Pretendard Thin'), url(/repository/assets/libs/fonts/Pretendard/Pretendard-Thin.woff2) format('woff2');
}
.jj.ff_Gyeonggi_Title_Light {
  font-family: "Gyeonggi Title", "Noto Sans KR", Roboto, sans-serif;
}
.jj.ff_Gyeonggi_Title_Light .CodeMirror {
  font-family: "D2Coding", "Gyeonggi Title", "Noto Sans KR", Roboto, sans-serif !important;
}
.jj.ff_Gyeonggi_Title_Light jj-code-editor .CodeMirror pre {
  font-family: "D2Coding", "Gyeonggi Title", "Noto Sans KR", Roboto, sans-serif !important;
}
.jj.ff_D2Coding {
  font-family: "D2Coding", "Noto Sans KR", Roboto, sans-serif;
}
.jj.ff_D2Coding .CodeMirror {
  font-family: "D2Coding", "Noto Sans KR", Roboto, sans-serif !important;
}
.jj.ff_D2Coding jj-code-editor .CodeMirror pre {
  font-family: "D2Coding", "Noto Sans KR", Roboto, sans-serif !important;
}
.jj.ff_consolas {
  font-family: "consolas", "Noto Sans KR", Roboto, sans-serif;
}
.jj.ff_consolas .CodeMirror {
  font-family: "consolas", "Noto Sans KR", Roboto, sans-serif !important;
}
.jj.ff_consolas jj-code-editor .CodeMirror pre {
  font-family: "consolas", "Noto Sans KR", Roboto, sans-serif !important;
}
.jj.freeze iframe {
  pointer-events: none;
}
.jj .CodeMirror,
.jj .CodeMirror pre,
.jj .hljs {
  font-size: 15px!important;
  font-family: "D2Coding", "Noto Sans KR", Roboto, sans-serif !important;
}
.jj .hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #333;
  color: white;
}
.jj .hljs-name,
.jj .hljs-strong {
  font-weight: bold;
}
.jj .hljs-code,
.jj .hljs-emphasis {
  font-style: italic;
}
.jj .hljs-tag {
  color: #62c8f3;
}
.jj .hljs-variable,
.jj .hljs-template-variable,
.jj .hljs-selector-id,
.jj .hljs-selector-class {
  color: #ade5fc;
}
.jj .hljs-string,
.jj .hljs-bullet {
  color: #a2fca2;
}
.jj .hljs-type,
.jj .hljs-title,
.jj .hljs-section,
.jj .hljs-attribute,
.jj .hljs-quote,
.jj .hljs-built_in,
.jj .hljs-builtin-name {
  color: #ffa;
}
.jj .hljs-number,
.jj .hljs-symbol,
.jj .hljs-bullet {
  color: #d36363;
}
.jj .hljs-keyword,
.jj .hljs-selector-tag,
.jj .hljs-literal {
  color: #fcc28c;
}
.jj .hljs-comment,
.jj .hljs-deletion,
.jj .hljs-code {
  color: #888;
}
.jj .hljs-regexp,
.jj .hljs-link {
  color: #c6b4f0;
}
.jj .hljs-meta {
  color: #fc9b9b;
}
.jj .hljs-deletion {
  background-color: #fc9b9b;
  color: #333;
}
.jj .hljs-addition {
  background-color: #a2fca2;
  color: #333;
}
.jj .hljs a {
  color: inherit;
}
.jj .hljs a:focus,
.jj .hljs a:hover {
  color: inherit;
  text-decoration: underline;
}

/* ==fonts.720.class End ================ */




/* ==Core.720.pkg.deploy Start ================ */
/* ==Core.720.pkg.deploy================ */
/* ==JJEnum.720.class Start ================ */
/* ==JJEnum.720.class================ */

/* ==JJEnum.720.class End ================ */




/* ==JJInit.720.class Start ================ */
/* ==JJInit.720.class================ */

/* ==JJInit.720.class End ================ */




/* ==JJApplication.720.class Start ================ */
/* ==JJApplication.720.class================ */
.jj {
  position: relative;
  display: block;
}
.jj.beta-hidden .beta {
  display: none!important;
}
.jj[tenancy-mode="single"] [tenancy-role="multi"] {
  display: none!important;
}
.jj[tenancy-mode="multi"] [tenancy-role="single"] {
  display: none!important;
}
.jj .tabskip a {
  position: absolute;
  top: 2px;
  left: -9999px;
  z-index: 99999;
}
.jj.full .tabskip a {
  display: none;
}

/* ==JJApplication.720.class End ================ */




/* ==JJPolicy.710.class Start ================ */
/* ==JJPolicy.710.class================ */

/* ==JJPolicy.710.class End ================ */




/* ==JJLog.720.class Start ================ */
/* ==JJLog.720.class================ */

/* ==JJLog.720.class End ================ */




/* ==JJEvent.720.class Start ================ */
/* ==JJEvent.720.class================ */

/* ==JJEvent.720.class End ================ */




/* ==JJStore.720.class Start ================ */
/* ==JJStore.720.class================ */

/* ==JJStore.720.class End ================ */




/* ==JJAjax.720.class Start ================ */
/* ==JJAjax.720.class================ */
null
/* ==JJAjax.720.class End ================ */




/* ==JJDom.720.class Start ================ */
/* ==JJDom.720.class================ */

/* ==JJDom.720.class End ================ */




/* ==JJRequire.720.class Start ================ */
/* ==JJRequire.720.class================ */

/* ==JJRequire.720.class End ================ */




/* ==JJException.720.class Start ================ */
/* ==JJException.720.class================ */

/* ==JJException.720.class End ================ */




/* ==JJFinal.720.class Start ================ */
/* ==JJFinal.720.class================ */

/* ==JJFinal.720.class End ================ */




/* ==JJGlobal.720.class Start ================ */
/* ==JJGlobal.720.class================ */

/* ==JJGlobal.720.class End ================ */




/* ==JJI18n.720.class Start ================ */
/* ==JJI18n.720.class================ */

/* ==JJI18n.720.class End ================ */




/* ==JJConfirm.720.class Start ================ */
/* ==JJConfirm.720.class================ */
.jj .nullBox {
  position: fixed;
  z-index: 100000;
  display: inline-block;
}
.jj .topMessageBox {
  position: fixed;
  z-index: 1000000;
  display: inline-block;
  width: 100%;
  padding: 0;
  top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.jj .topMessageBox .topMessage {
  /*position:fixed;*/
  min-width: 400px;
  display: inline-block;
  padding: 10px 50px;
  text-align: center;
  margin-bottom: 0px;
  background-color: #FFD400;
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
.jj .topMessageBox .topMessage i {
  font-size: 1.3em;
  line-height: 1.3em;
  color: #fff;
  margin-right: 10px;
}
.jj .topMessageBox .topMessage t {
  font-weight: bold;
  font-size: 1.3em;
  color: #000;
  line-height: 1.3em;
}
.jj .jj-modal.ribbon {
  margin-top: 30%;
  width: 300px;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.jj .jj-modal.ribbon t {
  pointer-events: none;
}
.jj .toastMessageBox {
  position: fixed;
  z-index: 100000;
  display: inline-block;
  width: 300px;
  padding: 0;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.jj .toastMessageBox > .toast {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
.jj .msgtxt {
  margin-top: 1rem;
  color: #000;
}

/* ==JJConfirm.720.class End ================ */




/* ==JJContextmenu.720.class Start ================ */
/* ==JJContextmenu.720.class================ */
.jj .jj-context-menu {
  display: block;
  position: fixed;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  z-index: 209999;
}
.jj .jj-context-menu a {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.jj .jj-context-menu a * {
  pointer-events: none;
}
.jj .jj-context-menu a i.fa {
  min-width: 20px;
}
.jj .jj-context-menu a t {
  padding-right: 20px;
}
.jj .jj-context-menu a:hover {
  background-color: whitesmoke;
}
.jj .jj-context-menu .divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}
.jj .jj-context-menu:focus {
  box-shadow: 2px 4px 4px 2px rgba(0, 0, 0, 0.2) !important;
}
.jj .noselect {
  -webkit-touch-callout: default;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ==JJContextmenu.720.class End ================ */




/* ==JJCode.720.class Start ================ */
/* ==JJCode.720.class================ */

/* ==JJCode.720.class End ================ */




/* ==JJDataType.720.class Start ================ */
/* ==JJDataType.720.class================ */

/* ==JJDataType.720.class End ================ */




/* ==JJCrypto.720.class Start ================ */
/* ==JJCrypto.720.class================ */

/* ==JJCrypto.720.class End ================ */




/* ==JJDriverApi.720.class Start ================ */
/* ==JJDriverApi.720.class================ */

/* ==JJDriverApi.720.class End ================ */




/* ==JJAddons.720.class Start ================ */
/* ==JJAddons.720.class================ */

/* ==JJAddons.720.class End ================ */




/* ==JJScreenLock.720.class Start ================ */
/* ==JJScreenLock.720.class================ */

/* ==JJScreenLock.720.class End ================ */




/* ==JJVariable.720.class Start ================ */
/* ==JJVariable.720.class================ */

/* ==JJVariable.720.class End ================ */




/* ==JJTest.720.class Start ================ */
/* ==JJTest.720.class================ */

/* ==JJTest.720.class End ================ */





/* ==Core.720.pkg.deploy End ================ */




/* ==SDK.720.pkg.deploy Start ================ */
/* ==SDK.720.pkg.deploy================ */
/* ==JJGlobalEvent.720.class Start ================ */
/* ==JJGlobalEvent.720.class================ */
.jj {
  height: 100%;
}
.jj .jj-logout {
  cursor: pointer;
}
.jj .jj-logout > * {
  pointer-events: none;
}
.jj .jj-hidden > * {
  pointer-events: none;
}
.jj .jj-hidden.on + * {
  display: none;
}
.jj .jj-hidden::after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: 1rem;
  content: "\F0D7";
}
.jj .jj-hidden.on::after {
  content: "\F0D8";
}
.jj .bg-rgba1 {
  background: rgba(255, 255, 255, 0.1);
}
.jj .bg-rgba2 {
  background: rgba(255, 255, 255, 0.2);
}
.jj .bg-rgba3 {
  background: rgba(255, 255, 255, 0.3);
}
.jj .close {
  pointer-events: auto!important;
}
.jj .close[data-dismiss] * {
  pointer-events: none;
}
.jj .list-group-light .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  padding: 0 0.5rem;
  background-color: transparent;
  border-color: transparent;
}
.jj .list-group-light .list-group-item:hover {
  background-color: white;
  cursor: pointer;
}

/* ==JJGlobalEvent.720.class End ================ */




/* ==JJMetaWord.720.class Start ================ */
/* ==JJMetaWord.720.class================ */

/* ==JJMetaWord.720.class End ================ */




/* ==JJBuilder.720.class Start ================ */
/* ==JJBuilder.720.class================ */

/* ==JJBuilder.720.class End ================ */




/* ==jj-command.720.globalEvent Start ================ */
/* ==jj-command.720.globalEvent================ */
.jj [jj-command],
.jj [jj-dofullform],
.jj [jj-doform] {
  cursor: pointer;
}
.jj [jj-command].disabled,
.jj [jj-dofullform].disabled,
.jj [jj-doform].disabled,
.jj [jj-command]:disabled,
.jj [jj-dofullform]:disabled,
.jj [jj-doform]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.jj [jj-command].disabled *,
.jj [jj-dofullform].disabled *,
.jj [jj-doform].disabled *,
.jj [jj-command]:disabled *,
.jj [jj-dofullform]:disabled *,
.jj [jj-doform]:disabled * {
  pointer-events: none;
}
.jj [jj-command] *,
.jj [jj-dofullform] *,
.jj [jj-doform] * {
  pointer-events: none;
}
.jj [xjj-click] * {
  pointer-events: none;
}
.jj tr[jj-command] td {
  pointer-events: auto;
}
.jj tr[jj-command] th {
  pointer-events: auto;
}
.jj [xjj-command] [xjj-command] {
  pointer-events: auto;
}
.jj [xjj-click] [xjj-click] {
  pointer-events: auto;
}
.jj [jj-alert] * {
  pointer-events: none;
}

/* ==jj-command.720.globalEvent End ================ */




/* ==jj-toggle.720.globalEvent Start ================ */
/* ==jj-toggle.720.globalEvent================ */
.jj .jj-toggle {
  cursor: pointer;
}
.jj .jj-toggle > * {
  pointer-events: none;
}
.jj .jj-toggle:not([data-target]) + * {
  display: none;
}
.jj .jj-toggle:not([data-target]) + *.show {
  display: block;
}
.jj .jj-toggle i.on {
  display: none;
}
.jj .jj-toggle i.off {
  display: inline-block;
}
.jj .jj-toggle.show i.on {
  display: inline-block;
}
.jj .jj-toggle.show i.off {
  display: none;
}
.jj .jj-toggle i.fa-plus:before {
  content: "\F067";
}
.jj .jj-toggle.show i.fa-plus:before {
  content: "\F068";
}
.jj .jj-toggle.icon:after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F0DA";
  margin-left: 2rem;
}
.jj .jj-toggle.icon.show:after {
  content: "\F0D7";
}
.jj .jj-toggle.icon-before:before {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F0DA";
  margin-right: 1rem;
}
.jj .jj-toggle.icon-before.show:before {
  content: "\F0D7";
}
.jj .jj-toggle.bordered {
  padding: 5px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  font-weight: bold;
  display: block;
}
.jj .jj-toggle.bordered::after {
  position: absolute;
  right: 10px;
  content: "\F0DA";
  padding-right: 10px;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.jj .jj-toggle.bordered.show::after {
  content: "\F0D7";
}
.jj .jj-toggle.bordered + * {
  padding: 10px;
}
.jj .jj-toggle-menu {
  display: none!important;
}
.jj .jj-toggle-menu.show {
  display: block!important;
}

/* ==jj-toggle.720.globalEvent End ================ */




/* ==jj-dropdown.720.globalEvent Start ================ */
/* ==jj-dropdown.720.globalEvent================ */
.jj .dropdown-toggle {
  cursor: pointer;
}
.jj .dropdown-toggle > * {
  pointer-events: none;
}
.jj .dropdown-menu {
  min-width: 120px;
}
.jj .dropdown-menu.show {
  position: fixed;
}

/* ==jj-dropdown.720.globalEvent End ================ */




/* ==jj-clipcopy.720.globalEvent Start ================ */
/* ==jj-clipcopy.720.globalEvent================ */
.jj .jj-clipcopy {
  position: relative;
}
.jj .jj-clipcopy::before {
  z-index: 10;
  position: absolute;
  right: 5px;
  top: 5px;
  content: "\f11c";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==jj-clipcopy.720.globalEvent End ================ */




/* ==jj-tabs.720.globalEvent Start ================ */
/* ==jj-tabs.720.globalEvent================ */
.jj .jj-tabs-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: hidden;
}
.jj .jj-tabs-wrap > .jj-tabs {
  flex: none;
}
.jj .jj-tabs-wrap > .jj-tabs .nav-link > * {
  pointer-events: none;
}
.jj .jj-tabs-wrap > .tab-content {
  flex-grow: 1;
  padding-top: 5px;
  overflow: hidden;
  border-width: 0 1px 1px 1px;
}
.jj .jj-tabs-wrap > .tab-content > .tab-pane {
  position: relative;
  height: 100%;
  overflow: auto;
}
.jj .jj-tabs-wrap.jj-tabs-child {
  height: auto;
  width: 100%;
}
.jj .jj-tabs-wrap.jj-tabs-child > .tab-content {
  overflow: visible;
}
.jj .jj-tabs-wrap.jj-tabs-child > .tab-content > .tab-pane {
  overflow: visible;
}
.jj .jj-tabs-wrap.jj-tabs-child > .tab-content > .tab-pane > .pane-toolbar {
  position: absolute;
  top: -45px;
  right: 0;
}
.jj jj-tabs > .nav-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.jj jj-tabs > .nav-tabs > li {
  flex: none;
}

/* ==jj-tabs.720.globalEvent End ================ */




/* ==jj-waves.720.globalEvent Start ================ */
/* ==jj-waves.720.globalEvent================ */
.jj .jwaves {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.jj .jwaves .jwaves-inner {
  opacity: 0;
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transform: scale(5);
  -webkit-animation-duration: 1s!important;
  animation-duration: 1s!important;
  -webkit-animation-name: jwaves;
  animation-name: jwaves;
  top: 50%;
  left: 50%;
  background: rgba(0, 0, 0, 0);
  background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.6) 90%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}
@-webkit-keyframes jwaves {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  90% {
    transform: scale(5);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.jj .jwaves.jwaves-light .jwaves-inner {
  background: rgba(255, 255, 255, 0);
  background: radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0.8) 100%);
}

/* ==jj-waves.720.globalEvent End ================ */




/* ==w3c.color.720.class Start ================ */
/* ==w3c.color.720.class================ */

/* ==w3c.color.720.class End ================ */




/* ==JJMail.720.class Start ================ */
/* ==JJMail.720.class================ */

/* ==JJMail.720.class End ================ */




/* ==api.google.class Start ================ */
/* ==api.google.class================ */

/* ==api.google.class End ================ */




/* ==api.kakao.class Start ================ */
/* ==api.kakao.class================ */

/* ==api.kakao.class End ================ */




/* ==api.naver.class Start ================ */
/* ==api.naver.class================ */

/* ==api.naver.class End ================ */




/* ==api.facebook.class Start ================ */
/* ==api.facebook.class================ */

/* ==api.facebook.class End ================ */




/* ==api.zoom.class Start ================ */
/* ==api.zoom.class================ */

/* ==api.zoom.class End ================ */




/* ==api.tiktok.class Start ================ */
/* ==api.tiktok.class================ */

/* ==api.tiktok.class End ================ */




/* ==api.dropbox.class Start ================ */
/* ==api.dropbox.class================ */

/* ==api.dropbox.class End ================ */




/* ==api.github.class Start ================ */
/* ==api.github.class================ */

/* ==api.github.class End ================ */




/* ==api.naver.works.class Start ================ */
/* ==api.naver.works.class================ */

/* ==api.naver.works.class End ================ */




/* ==api.naver.works.gov.class Start ================ */
/* ==api.naver.works.gov.class================ */

/* ==api.naver.works.gov.class End ================ */




/* ==api.openai.chat.class Start ================ */
/* ==api.openai.chat.class================ */

/* ==api.openai.chat.class End ================ */




/* ==api.weather.class Start ================ */
/* ==api.weather.class================ */

/* ==api.weather.class End ================ */




/* ==api.odcloud.kr.class Start ================ */
/* ==api.odcloud.kr.class================ */

/* ==api.odcloud.kr.class End ================ */




/* ==api.naver.kr.class Start ================ */
/* ==api.naver.kr.class================ */

/* ==api.naver.kr.class End ================ */




/* ==api.kit.class Start ================ */
/* ==api.kit.class================ */

/* ==api.kit.class End ================ */





/* ==SDK.720.pkg.deploy End ================ */




/* ==SPA.720.pkg.deploy Start ================ */
/* ==SPA.720.pkg.deploy================ */
/* ==JJRoute.720.class Start ================ */
/* ==JJRoute.720.class================ */

/* ==JJRoute.720.class End ================ */




/* ==JJLauncher.720.class Start ================ */
/* ==JJLauncher.720.class================ */

/* ==JJLauncher.720.class End ================ */




/* ==JJForm.720.class Start ================ */
/* ==JJForm.720.class================ */
.jj .jj-form {
  display: flex;
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  margin-bottom: 0;
  z-index: 1;
}
.jj .jj-form > header {
  padding: 0.5rem 1rem;
  flex: none;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jj .jj-form > header .form-title {
  position: relative;
  display: inline;
}
.jj .jj-form > header .close {
  height: 100%;
}
.jj .jj-form > article {
  flex-grow: 1;
  overflow: auto;
}
.jj .jj-form > article [jj-id="contentBody"] .breadcrumb-item + .breadcrumb-item::before {
  font-family: 'FONTAWESOME';
  content: "\F105";
}
.jj .jj-form > footer {
  flex: none;
  display: none;
}
.jj .jj-form .hidden-area {
  display: none!important;
}
@media (max-width: 767.98px) {
  .jj .content-page.mdi-warp {
    overflow: visible;
  }
  .jj .content-page.mdi-warp .jj-form {
    z-index: 11;
  }
  .jj .content-page.mdi-warp .jj-form > header {
    margin: 0;
    display: block !important;
    color: white;
    border-radius: 0;
    position: revert-layer;
    z-index: 10;
    margin-top: -54px;
    margin-bottom: 17px;
    pointer-events: none;
  }
  .jj .content-page.mdi-warp .jj-form > header .form-title {
    color: white;
    margin-left: 4rem;
    font-size: 16px;
    margin-bottom: 22px;
  }
  .jj .content-page.mdi-warp .jj-form > header button.close {
    display: none;
  }
  .jj .content-page.mdi-warp .jj-form > article > .my-form {
    padding: 0;
  }
}

/* ==JJForm.720.class End ================ */




/* ==JJFormFull.720.class Start ================ */
/* ==JJFormFull.720.class================ */
.jj jj-form-full.jj-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: white;
}
.jj jj-form-full.jj-form > header,
.jj jj-form-full.jj-form > footer {
  display: none;
}
.jj jj-form-full.jj-form > article {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
}

/* ==JJFormFull.720.class End ================ */




/* ==JJFormInclude.720.class Start ================ */
/* ==JJFormInclude.720.class================ */
.jj jj-form-include.jj-form {
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  border: 0px;
  min-width: 300px;
  min-width: 480px;
  height: 100%;
  z-index: 2;
}
.jj jj-form-include.jj-form > header {
  background-color: var(--primary) !important;
  height: 50px;
  padding: 0 1rem;
}
.jj jj-form-include.jj-form > header .page-title-right {
  line-height: 50px;
  margin-top: -3px;
}
.jj jj-form-include.jj-form > header .modal-title {
  color: var(--white) !important;
  line-height: 50px;
}
.jj jj-form-include.jj-form > footer {
  display: none;
}
.jj jj-form-include.jj-form.header-none {
  border: 0px solid #ccc;
  min-width: 0;
  height: auto;
}
.jj jj-form-include.jj-form.header-none > header,
.jj jj-form-include.jj-form.header-none > footer {
  display: none;
}
.jj jj-form-include.jj-form.header-none > article {
  top: 0;
}
.jj jj-vhtml-editor jj-form-include.jj-form * {
  pointer-events: none;
}

/* ==JJFormInclude.720.class End ================ */




/* ==JJFormLayer.720.class Start ================ */
/* ==JJFormLayer.720.class================ */
.jj jj-form-layer.jj-form {
  border: 1px solid #000;
  position: fixed;
  background-color: white;
  z-index: 1000;
}
.jj jj-form-layer.jj-form > header {
  background-color: var(--light);
}
.jj jj-form-layer.jj-form:focus-within {
  border: 1px solid var(--primary);
}
.jj jj-form-layer.jj-form:focus-within > header {
  background-color: var(--primary) !important;
}
.jj jj-form-layer.jj-form:focus-within > header .page-title {
  color: var(--white) !important;
}
.jj[lang="en-US"] [jj-id="dragArea"]:empty::before {
  content: "Drag and insert the menu you want to distribute.";
}

/* ==JJFormLayer.720.class End ================ */




/* ==JJFormModal.720.class Start ================ */
/* ==JJFormModal.720.class================ */
.jj .modal-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10001;
}
@media (max-width: 1199px) {
  .jj .modal-wrap jj-form-modal.jj-form {
    left: 0;
    top: 0!important;
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .jj .modal-wrap jj-form-modal.jj-form {
    height: 800px;
    width: 1000px;
    max-height: 90%;
    max-width: 90%;
  }
}
.jj .modal-wrap jj-form-modal.jj-form {
  position: absolute;
  right: auto;
  bottom: auto;
  visibility: hidden;
}
.jj .modal-wrap jj-form-modal.jj-form > header {
  padding: 1rem 1rem;
  background-color: var(--primary);
}
.jj .modal-wrap jj-form-modal.jj-form > header .modal-title {
  color: white;
  width: 100%;
  text-align: center;
  line-height: 38px;
}
.jj .modal-wrap jj-form-modal.jj-form > header .close,
.jj .modal-wrap jj-form-modal.jj-form > header .mobile-close {
  color: white;
  opacity: 1;
  font-size: 24px;
}
.jj .modal-wrap jj-form-modal.jj-form > footer {
  display: flex;
  justify-content: space-between;
}
.jj .modal-wrap jj-form-modal.jj-form > footer button:disabled {
  cursor: not-allowed;
}
.jj .modal-wrap jj-form-modal.jj-form.hidden-footer > header .close,
.jj .modal-wrap jj-form-modal.jj-form.hidden-footer > footer {
  display: none;
}
.jj .modal-wrap jj-form-modal.jj-form.modal-info footer button[jj-command="remove"],
.jj .modal-wrap jj-form-modal.jj-form.modal-info footer button[jj-command="modalClose"] {
  display: none;
}
.jj .modal-wrap jj-form-modal.jj-form.modal-close footer button[jj-command="modalOk"] {
  display: none;
}
@media (max-width: 1199px) {
  .jj button.mobile-close {
    background-color: var(--primary);
    text-decoration: none;
  }
}
@media (min-width: 1200px) {
  .jj button.mobile-close {
    visibility: hidden;
  }
}

/* ==JJFormModal.720.class End ================ */




/* ==JJSubFormInclude.720.class Start ================ */
/* ==JJSubFormInclude.720.class================ */
jj-subform-include.jj-form {
  display: block;
  position: relative;
  min-width: 300px;
  height: 100%;
}
jj-subform-include.jj-form > header,
jj-subform-include.jj-form > footer {
  display: none;
}
jj-vhtml-editor jj-form-include.jj-form * {
  pointer-events: none;
}

/* ==JJSubFormInclude.720.class End ================ */




/* ==JJSFormModal.720.class Start ================ */
/* ==JJSFormModal.720.class================ */
.jj .modal-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10001;
}
@media (max-width: 1199px) {
  .jj .modal-wrap jj-form-modal.jj-form {
    left: 0;
    top: 0;
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .jj .modal-wrap jj-form-modal.jj-form {
    height: 800px;
    width: 1000px;
    max-height: 90%;
    max-width: 90%;
  }
}
.jj .modal-wrap jj-form-modal.jj-form {
  position: absolute;
  right: auto;
  bottom: auto;
  visibility: hidden;
}
.jj .modal-wrap jj-form-modal.jj-form > header {
  padding: 1rem 1rem;
  background-color: var(--primary);
}
.jj .modal-wrap jj-form-modal.jj-form > header .modal-title {
  color: white;
  width: 100%;
  text-align: center;
  line-height: 38px;
}
.jj .modal-wrap jj-form-modal.jj-form > header .close,
.jj .modal-wrap jj-form-modal.jj-form > header .mobile-close {
  color: white;
  opacity: 1;
  font-size: 24px;
}
.jj .modal-wrap jj-form-modal.jj-form > footer {
  display: flex;
}
.jj .modal-wrap jj-form-modal.jj-form > footer button:disabled {
  cursor: not-allowed;
}
.jj .modal-wrap jj-form-modal.jj-form.hidden-footer > footer {
  display: none;
}
.jj .modal-wrap jj-form-modal.jj-form.modal-info footer button[jj-command="remove"],
.jj .modal-wrap jj-form-modal.jj-form.modal-info footer button[jj-command="modalClose"] {
  display: none;
}
.jj .modal-wrap jj-form-modal.jj-form.modal-close footer button[jj-command="modalOk"] {
  display: none;
}
@media (max-width: 1199px) {
  .jj button.mobile-close {
    background-color: var(--primary);
    text-decoration: none;
  }
}
@media (min-width: 1200px) {
  .jj button.mobile-close {
    visibility: hidden;
  }
}
@media (max-width: 1200px) {
  .jj j2-tag .input-group .tag-items .alert button.close {
    visibility: inherit!important;
  }
  .jj j2-expense .item-group .tag-items .alert button.close {
    visibility: inherit!important;
  }
}

/* ==JJSFormModal.720.class End ================ */




/* ==JJTheme.720.class Start ================ */
/* ==JJTheme.720.class================ */
.jj {
  /** 칼런더 런처의 studio모드에서의 드래그동작 불량처리를 위해서 감추기 처리함 */
}
.jj jj-theme {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /**
  * 테마폼 활성에 따른 툴바제어용
  */
}
.jj jj-theme .mdi-warp {
  display: flex;
  flex-direction: column;
  height: calc(100% - 70px);
  padding: 10px;
}
.jj jj-theme .mdi-warp .mdi-tabs {
  position: relative;
  flex: none;
  /* 전체닫기  */
}
.jj jj-theme .mdi-warp .mdi-tabs > ul.nav-tabs {
  height: 34px;
}
.jj jj-theme .mdi-warp .mdi-tabs > ul.nav-tabs.nav-bordered a.active {
  border-bottom-width: 5px;
}
.jj jj-theme .mdi-warp .mdi-tabs > .close-all-tab {
  position: absolute;
  top: 0;
  width: 1rem;
  display: none;
  left: -1rem;
  background-color: var(--danger);
  border-radius: 0 50% 50% 0;
}
.jj jj-theme .mdi-warp .mdi-tabs:hover > ul.nav-tabs:not(:empty) + .close-all-tab {
  display: block;
}
.jj jj-theme .mdi-warp .mdi-tabs > ul > li > a {
  font-size: 0.9rem;
  padding: 5px 10px !important;
}
.jj jj-theme .mdi-warp .mdi-tabs > ul > li > a i.fa-remove {
  padding: 3px 5px;
  background-color: var(--danger);
  border-radius: 50%;
  color: var(--white);
  margin-right: -5px;
  margin-left: 5px;
  visibility: hidden;
  pointer-events: auto;
}
.jj jj-theme .mdi-warp .mdi-tabs > ul > li > a:hover i.fa-remove {
  visibility: visible;
}
.jj jj-theme .mdi-warp .mdi-container {
  top: 0;
  position: relative;
  flex-grow: 1;
  overflow: auto;
}
.jj jj-theme .mdi-warp .mdi-container > jj-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.jj jj-theme .mdi-warp .mdi-container > jj-form > header {
  display: none;
}
.jj jj-theme .mdi-warp .mdi-container > jj-form > article {
  top: 0px;
  padding: 0;
  flex-grow: 1;
}
.jj jj-theme.on-form .on-form-item {
  display: block!important;
}
.jj jj-theme .on-form-item {
  display: none!important;
}
.jj ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.jj ::-webkit-scrollbar-button:start:decrement,
.jj ::-webkit-scrollbar-button:end:increment {
  display: none;
}
.jj ::-webkit-scrollbar-track {
  background: #e9e9e9;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}
.jj ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}
.jj .role-editor,
.jj .role-developer {
  display: none;
}
.jj[user-role="DEVELOPER"] .role-developer {
  display: block;
}
.jj[user-role="EDITOR"] .role-editor {
  display: block;
}
.jj.full > jj-theme {
  display: none!important;
}

/* ==JJTheme.720.class End ================ */




/* ==JJStudioForm.720.class Start ================ */
/* ==JJStudioForm.720.class================ */
.jj jj-studio-form {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #f5f6f8;
}
.jj jj-studio-form [jj-command] * {
  pointer-events: none;
}
.jj jj-studio-form > header {
  background-color: #e7f5fa;
  display: none!important;
}
.jj jj-studio-form > article {
  position: relative;
  overflow: auto;
  height: 100%;
}
.jj jj-studio-form > footer {
  flex: none;
}
.jj jj-studio-form.edited {
  border-top: 1px solid var(--danger) !important;
}

/* ==JJStudioForm.720.class End ================ */




/* ==JJStudioMDI.720.class Start ================ */
/* ==JJStudioMDI.720.class================ */
.jj jj-studio-mdi {
  position: relative;
  height: 100%;
  background-color: var(--light);
  overflow: hidden;
}
.jj jj-studio-mdi > .jj-inline {
  position: relative;
  height: 40px;
  width: 100%;
  overflow-x: auto;
  background-color: var(--white);
}
.jj jj-studio-mdi > .jj-inline > .formtab {
  margin-bottom: 0;
  padding: 5px 5px 0px;
}
.jj jj-studio-mdi > .jj-inline > .formtab > .tab-item {
  position: relative;
  height: 2rem;
  font-size: inherit;
  line-height: 2rem;
  opacity: 1;
  background-color: var(--light);
  color: var(--gray-dark);
  padding: 0 0.3rem;
  border-radius: 5px 5px 0 0;
  margin: 0;
  opacity: 0.8;
  flex: 0 0 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj jj-studio-mdi > .jj-inline > .formtab > .tab-item > i.fa-remove {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.5rem;
  color: black;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.2);
}
.jj jj-studio-mdi > .jj-inline > .formtab > .tab-item > i.movebar {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.5rem;
  color: black;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.2);
}
.jj jj-studio-mdi > .jj-inline > .formtab > .tab-item > t {
  cursor: pointer;
}
.jj jj-studio-mdi > .jj-inline > .formtab > .tab-item.active {
  border: 1px solid #ccc;
  border-width: 1px 1px 0 1px;
  background-color: var(--primary);
  color: var(--white);
  opacity: 1;
  z-index: 2;
}
.jj jj-studio-mdi > .jj-inline > .formtab > .tab-item:hover {
  color: black;
  opacity: 1;
}
.jj jj-studio-mdi > .jj-inline > .formtab > .tab-item:hover > i {
  visibility: visible;
}
.jj jj-studio-mdi > .jj-inline > .formtab > .tab-item.edited {
  color: var(--warning);
  font-weight: bold;
  opacity: 1;
}
.jj jj-studio-mdi > .formset {
  position: absolute;
  top: 34.38px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: white;
  border-top: 1px solid #ccc;
}
.jj jj-studio-mdi > .formset > jj-studio-form {
  display: none;
}
.jj jj-studio-mdi > .formset > jj-studio-form > .form-header {
  display: none;
}
.jj jj-studio-mdi > .formset > jj-studio-form.active {
  display: block;
}

/* ==JJStudioMDI.720.class End ================ */




/* ==JJFormExcute.720.class Start ================ */
/* ==JJFormExcute.720.class================ */
.jj .jj[testable='true'] jj-form-excute {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  overflow: hidden;
}
.jj .jj[testable='true'] jj-form-excute:focus-within {
  border: 0px solid transparent;
}
.jj .jj[testable='true'] jj-form-excute > header,
.jj .jj[testable='true'] jj-form-excute > footer {
  display: none;
}
.jj .jj[testable='true'] jj-form-excute > article {
  height: 100%;
  overflow: auto;
  padding: 0 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ==JJFormExcute.720.class End ================ */




/* ==JJFormSDI.722.class Start ================ */
/* ==JJFormSDI.722.class================ */
.jj jj-form-sdi {
  display: block;
  position: relative;
  display: flex;
}
.jj jj-form-sdi > nav {
  flex: none;
  text-align: center;
  padding: 5px;
  background-color: var(--light);
}
.jj jj-form-sdi > nav > button {
  border-radius: 50%;
  padding: 0.45rem 0.7rem;
  display: block;
  margin-inline: auto;
  background-color: var(--secondary);
  opacity: 0.6;
  margin-bottom: 5px;
}
.jj jj-form-sdi > nav > button.active {
  opacity: 1;
  background-color: var(--light);
}
.jj jj-form-sdi > nav > button * {
  pointer-events: none;
}
.jj jj-form-sdi > .form-warp {
  width: 400px;
}
.jj jj-form-sdi > .form-warp:empty {
  display: none;
}

/* ==JJFormSDI.722.class End ================ */




/* ==JJMenu.720.class Start ================ */
/* ==JJMenu.720.class================ */
.jj jj-menu {
  display: block;
  position: relative;
  width: 100%;
  overflow: visible;
}
.jj jj-menu[data-theme='white'] {
  background-color: white;
}
.jj jj-menu[data-theme='white'] a {
  background-color: white !important;
  color: var(--basecolor5) !important;
}
.jj jj-menu[data-theme='white'] .navbar-nav > .open > a,
.jj jj-menu[data-theme='white'] .navbar-nav > .open > a:focus,
.jj jj-menu[data-theme='white'] .navbar-nav > .open > a:hover {
  background-color: initial !important;
}
.jj jj-menu[data-theme='white'] .nav .dropdown-menu a {
  background-color: white !important;
}
.jj jj-menu[data-theme='white'] .nav .dropdown-menu a {
  background-color: white !important;
}
.jj jj-menu[data-theme='white'] .nav .dropdown-menu {
  background-color: white !important;
}
.jj jj-menu[data-theme='white'] nav.navbar .nav a:focus,
.jj jj-menu[data-theme='white'] nav.navbar .nav a:active,
.jj jj-menu[data-theme='white'] nav.navbar .nav a.active {
  background-color: var(--basecolor1) !important;
  color: var(--basecolor4) !important;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav {
  overflow: hidden;
  background-color: #333;
  list-style: none;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav .navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav .dropdown {
  float: left;
  overflow: hidden;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav .dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav .navbar a:hover,
.jj jj-menu[data-theme='dropdown'] .navbar-nav .dropdown:hover .dropbtn {
  background-color: red;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav .dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav .dropdown-content a:hover {
  background-color: #ddd;
}
.jj jj-menu[data-theme='dropdown'] .navbar-nav .dropdown:hover .dropdown-content {
  display: block;
}
.jj jj-menu .navigation-menu i.fa-angle-right {
  margin: 0 0 0 10px;
  width: auto;
}
.jj jj-menu .metismenu {
  padding: 0;
}
.jj jj-menu .metismenu > li > a {
  color: #6e768e;
  display: block;
  padding: 13px 20px;
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.jj jj-menu .metismenu > li > a > i {
  display: inline-block;
  line-height: 1.0625rem;
  margin: 0 10px 0 0;
  text-align: center;
  vertical-align: middle;
  width: 20px;
  font-size: 17px;
}
.jj jj-menu .metismenu > li > a > span {
  vertical-align: middle;
}
.jj jj-menu .metismenu > li > ul {
  padding: 0;
  padding-left: 35px;
}
.jj jj-menu .metismenu > li > ul li a {
  padding: 8px 20px;
  color: #6e768e;
  display: block;
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.jj jj-menu .metismenu > li > ul ul {
  padding-left: 20px;
}
.jj jj-menu .metismenu li {
  list-style: none;
  position: relative;
}
.jj jj-menu .metismenu li > a {
  color: var(--gray) !important;
}
.jj jj-menu .metismenu li > a > * {
  pointer-events: none;
}
.jj jj-menu .metismenu li > a:hover {
  background-color: var(--secondary);
  color: white!important;
}
.jj jj-menu .metismenu li.active > a {
  color: white!important;
}
.jj jj-menu .metismenu li > ul {
  display: none;
}
.jj jj-menu .metismenu li.mm-active > a > i.fa-angle-right {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.jj jj-menu .metismenu li.mm-active > ul {
  display: block;
}
.jj jj-menu .metismenu li .nav-second-level i.role-developer {
  right: -13px;
  top: 10px;
}
.jj jj-menu .metismenu li i.menu-config {
  left: -100px;
  position: absolute;
  top: 18px;
  font-size: 1.2rem;
  z-index: 2;
  cursor: pointer;
}
.jj jj-menu .metismenu li:hover > i.menu-config {
  left: 5px;
}
.jj jj-menu .metismenu li:hover > i.menu-config:hover {
  color: white;
}
.jj jj-menu .metismenu .mm-collapse:not(.mm-show) {
  display: none;
}
.jj jj-menu .metismenu i.fa-angle-right {
  margin: 0 0 0 10px!important;
  width: auto!important;
  position: absolute;
  right: 13px;
  line-height: 2rem!important;
  height: 20px;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}
.jj jj-menu .metismenu .menu-arrow {
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  position: absolute;
  right: 20px;
  display: inline-block;
  font-family: 'FontAwesome';
  text-rendering: auto;
  line-height: 1.5rem;
  font-size: 1.1rem;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.jj jj-menu .metismenu .menu-arrow:before {
  content: '\f054';
}
.jj jj-menu .card-menu {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.jj jj-menu .card-menu > li {
  width: 24%;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}
.jj jj-menu .card-menu > li.has-submenu > a {
  margin-bottom: 0.5rem;
}
.jj jj-menu .card-menu > li > a {
  color: #6e768e;
  display: block;
  padding: 13px 20px;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: var(--card);
  padding: 5px;
  margin-bottom: 5rem;
}
.jj jj-menu .card-menu > li > a > i {
  display: inline-block;
  line-height: 1.0625rem;
  margin: 0 10px 0 0;
  text-align: center;
  vertical-align: middle;
  width: 20px;
}
.jj jj-menu .card-menu > li > a > span {
  vertical-align: middle;
}
.jj jj-menu .card-menu > li > ul {
  padding: 0;
}
.jj jj-menu .card-menu > li > ul li a {
  padding: 8px 20px;
  color: #6e768e;
  display: block;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.jj jj-menu .card-menu li {
  list-style: none;
}
.jj jj-menu .card-menu li > a > * {
  pointer-events: none;
}
.jj jj-menu .card-menu li.mm-active > a > span.menu-arrow {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.jj jj-menu .card-menu li.mm-active > ul {
  display: block;
}
.jj jj-menu .card-menu .mm-collapse:not(.mm-show) {
  display: none;
}
.jj jj-menu .card-menu .menu-arrow {
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  position: absolute;
  right: 20px;
  display: inline-block;
  font-family: 'FontAwesome';
  text-rendering: auto;
  line-height: 1.5rem;
  font-size: 1.1rem;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.jj jj-menu .card-menu .menu-arrow:before {
  content: '\f054';
}
.jj jj-menu .mega-menu {
  justify-content: space-around;
}
.jj jj-menu .mega-menu > li {
  width: 20%;
  text-align: center;
}
.jj jj-menu .mega-menu + .mega-menu-dropdown {
  display: none;
  background-color: white;
  padding: 1rem;
  justify-content: space-around;
  flex-wrap: nowrap;
}
.jj jj-menu .mega-menu + .mega-menu-dropdown .column {
  width: 20%;
}
.jj jj-menu:hover .mega-menu + .mega-menu-dropdown,
.jj jj-menu.hover .mega-menu + .mega-menu-dropdown {
  display: flex;
}
.jj .enlarged jj-menu {
  overflow: visible;
}
.jj .enlarged jj-menu i.role-developer {
  display: none!important;
}
.jj side jj-menu {
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
}
.jj side jj-menu ul,
.jj side jj-menu li {
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0;
}
.jj side jj-menu > ul {
  overflow: hidden;
}
.jj side jj-menu > ul a {
  display: block;
  padding: 5px;
  color: var(--text3);
}
.jj side jj-menu > ul a:hover {
  background-color: var(--basecolor2);
}
.jj side jj-menu > ul a.active {
  background-color: var(--basecolor3);
}
.jj side jj-menu > ul a.active:hover {
  background-color: var(--basecolor4);
}
.jj side jj-menu > ul .dropdown > a:after {
  float: right;
  right: 5px;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  content: '\F0DA';
}
.jj side jj-menu > ul .dropdown > a.on:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.jj side jj-menu > ul li > a {
  padding-left: 10px;
}
.jj side jj-menu > ul li li > a {
  padding-left: 20px;
}
.jj .navigation-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.jj .navigation-menu > li {
  position: relative;
  display: inline-block;
}
.jj .navigation-menu > li > a {
  display: block;
  color: #6e768e;
  font-size: 15px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  line-height: 20px;
  padding: 20px;
  position: relative;
}
.jj .navigation-menu > li > a i.fa-chevron-down {
  font-size: 10px;
  margin-left: 8px;
}
.jj .navigation-menu > li > a i {
  font-size: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.jj .navigation-menu > li > a i.fa-chevron-down {
  font-size: 16px;
  margin-right: 8px;
  vertical-align: baseline;
  margin-left: 3px;
}
.jj .navigation-menu > li > a:focus,
.jj .navigation-menu > li > a:hover {
  background-color: transparent;
}
@media (min-width: 992px) {
  .jj .navigation-menu > li > a:active,
  .jj .navigation-menu > li > a:focus,
  .jj .navigation-menu > li > a:hover {
    color: var(--secondary);
  }
  .jj .navigation-menu > li:hover a {
    color: var(--secondary);
  }
  .jj .navigation-menu > li:first-of-type > a {
    padding-left: 0;
  }
  .jj .navigation-menu > li.last-elements .submenu {
    left: auto;
    right: 0;
  }
  .jj .navigation-menu > li.last-elements .submenu > li.has-submenu .submenu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 10px;
  }
  .jj .navigation-menu > li > ul > li.has-submenu:active > a,
  .jj .navigation-menu > li > ul > li.has-submenu:hover > a {
    color: #3bafda;
  }
  .jj .navigation-menu > li > a {
    height: 62px;
    display: flex;
    align-items: center;
  }
  .jj .navigation-menu > li .submenu {
    position: absolute;
    top: 116%;
    left: -26px;
    z-index: 1000;
    padding: 10px 0;
    list-style: none;
    min-width: 200px;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    border-radius: 0 0 4px 4px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 5px rgba(50, 58, 70, 0.1);
    box-shadow: 0 1px 5px rgba(50, 58, 70, 0.1);
  }
  .jj .navigation-menu > li .submenu li {
    position: relative;
    padding: 3px 0;
  }
  .jj .navigation-menu > li .submenu li ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .jj .navigation-menu > li .submenu li a {
    padding: 9px 25px;
    clear: both;
    white-space: nowrap;
    color: #000;
    width: 100%;
    display: block;
  }
  .jj .navigation-menu > li .submenu li a:hover {
    color: #3bafda;
  }
  .jj .navigation-menu > li .submenu li.has-submenu > a .arrow-down:after {
    right: 20px!important;
    -webkit-transform: rotate(-135deg) translateY(-50%) !important;
    transform: rotate(-135deg) translateY(-50%) !important;
    position: absolute;
  }
  .jj .navigation-menu > li .submenu li .submenu {
    left: 100%;
    top: 0;
    margin-left: 20px;
    margin-top: -1px;
    border-radius: 4px;
  }
  .jj .navigation-menu > li .submenu li .submenu:before {
    left: -12px;
    top: 9px;
    content: "";
    z-index: 9999;
    display: block;
    position: absolute;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid rgba(50, 58, 70, 0.1);
  }
  .jj .navigation-menu > li .submenu li .submenu:after {
    left: -11px;
    top: 9px;
    content: "";
    z-index: 9999;
    display: block;
    position: absolute;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #fff;
  }
  .jj .navigation-menu > li .submenu.megamenu {
    white-space: nowrap;
    width: auto;
  }
  .jj .navigation-menu > li .submenu.megamenu > li {
    overflow: hidden;
    width: 200px;
    display: inline-block;
    vertical-align: top;
  }
  .jj .navbar-toggle {
    display: none !important;
  }
  .jj #navigation {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .jj .navigation-menu > li.has-submenu:hover > .submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
  }
  .jj .navigation-menu > li.has-submenu a:focus:focus-within .submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
  }
  .jj .navigation-menu > li.has-submenu:focus-within a + .submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
  }
  .jj .navigation-menu > li.has-submenu:hover > .submenu > li.has-submenu:hover > .submenu {
    visibility: visible;
    opacity: 1;
    margin-left: 10px;
    margin-right: 0;
  }
  .jj .navigation-menu > li.has-submenu.last-elements > .submenu:before {
    right: 11px;
    left: auto;
  }
}
@media (max-width: 1000px) {
  .jj .wrapper {
    padding-top: 70px;
  }
  .jj #topnav .navigation-menu {
    float: none;
    max-height: 400px;
    text-align: left;
  }
  .jj #topnav .navigation-menu > li {
    display: block;
    float: none;
  }
  .jj #topnav .navigation-menu > li > a {
    color: #323a46;
    padding: 15px;
  }
  .jj #topnav .navigation-menu > li > a i {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0;
  }
  .jj #topnav .navigation-menu > li > a:after {
    position: absolute;
    right: 15px;
  }
  .jj #topnav .navigation-menu > li .submenu {
    display: none;
    list-style: none;
    padding-left: 20px;
    margin: 0;
  }
  .jj #topnav .navigation-menu > li .submenu li a {
    display: block;
    position: relative;
    padding: 7px 20px;
    color: #323a46;
  }
  .jj #topnav .navigation-menu > li .submenu li a:hover {
    color: #3bafda;
  }
  .jj #topnav .navigation-menu > li .submenu.open {
    display: block;
  }
  .jj #topnav .navigation-menu > li .submenu .submenu {
    display: none;
    list-style: none;
  }
  .jj #topnav .navigation-menu > li .submenu .submenu.open {
    display: block;
  }
  .jj #topnav .navigation-menu > li .submenu.megamenu > li > ul {
    list-style: none;
    padding-left: 0;
  }
  .jj #topnav .navigation-menu > li.has-submenu.open > a {
    color: #3bafda;
  }
  .jj #topnav .has-submenu.active a {
    color: #3bafda;
  }
  .jj #topnav .has-submenu.active .submenu li.active > a {
    color: #3bafda;
  }
  .jj #topnav .arrow-down:after {
    right: 15px;
    position: absolute;
  }
  .jj #topnav .navbar-header {
    float: left;
  }
  .jj #navigation {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    display: none;
    height: auto;
    padding-bottom: 0;
    overflow: auto;
    -webkit-box-shadow: 0 0 8px 0 rgba(154, 161, 171, 0.3);
    box-shadow: 0 0 8px 0 rgba(154, 161, 171, 0.3);
    background-color: #fff;
  }
  .jj #navigation.open {
    display: block;
    overflow-y: auto;
  }
}
@media (max-width: 1025px) {
  .jj .navigation-menu > li > a {
    padding: 20px 15px;
  }
}
@media (max-height: 375px) {
  .jj .navigation-menu {
    max-height: 240px !important;
  }
}
.jj .menubar-dark .navigation-menu > li:hover > a {
  color: var(--white);
}
.jj .menubar-dark .navigation-menu > li > a {
  color: var(--light);
}
.jj .menubar-dark .navigation-menu > li > a:hover {
  color: var(--white);
}

/* ==JJMenu.720.class End ================ */




/* ==JJWidget.720.class Start ================ */
/* ==JJWidget.720.class================ */
.jj jj-widget {
  position: relative;
  display: block;
}

/* ==JJWidget.720.class End ================ */





/* ==SPA.720.pkg.deploy End ================ */




/* ==ReactComp.720.pkg.deploy Start ================ */
/* ==ReactComp.720.pkg.deploy================ */
/* ==JJPagination.720.class Start ================ */
/* ==JJPagination.720.class================ */
.jj jj-pagination {
  position: relative!important;
  display: flex!important;
  justify-content: space-between !important;
  width: 100%;
  line-height: 34px;
  margin: 40px 0px 10px 0px;
  text-align: center;
  min-height: 34px;
}
.jj jj-pagination .pagination {
  margin: 0;
  display: block;
}
.jj jj-pagination .pagination li {
  display: table-cell;
}
.jj jj-pagination .pagination li.disabled {
  cursor: not-allowed;
}
.jj jj-pagination .pagination li.disabled a {
  background-color: var(--light);
}
.jj jj-pagination .pagination .page-item.active .page-link {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.jj jj-pagination select {
  width: 100px!important;
  float: right;
}
.jj jj-pagination .rownum {
  text-wrap: nowrap;
  float: left;
  width: 300px;
  text-align: left;
}
.jj jj-pagination .pager {
  padding-left: 0;
  margin: 20px 0;
  text-align: center;
  list-style: none;
  display: none;
  margin: 0;
  line-height: 24px;
}
.jj jj-pagination .pager li {
  display: inline;
}
.jj jj-pagination .pager li > a,
.jj jj-pagination .pager li > span {
  background: transparent;
  color: inherit;
  border: none;
  padding: 3px 10px;
  border-radius: 30%;
}
.jj jj-pagination .pager li > a *,
.jj jj-pagination .pager li > span * {
  pointer-events: none;
}
.jj jj-pagination .pager li > a:hover,
.jj jj-pagination .pager li > span:hover,
.jj jj-pagination .pager li > a:focus,
.jj jj-pagination .pager li > span:focus {
  background: transparent;
  border: none;
}
.jj jj-pagination.sm .pagination,
.jj jj-pagination.sm select {
  display: none;
}
.jj jj-pagination.sm .pager {
  display: block;
  float: right;
}
.jj jj-pagination.no-data {
  position: relative;
}
.jj jj-pagination.no-data::before {
  position: absolute;
  left: 0;
  color: var(--warning);
  content: attr(no-data-msg);
}
.jj jj-pagination.no-data * {
  display: none;
}
.jj jj-pagination.search-data {
  position: relative;
  margin-bottom: 50px;
}
.jj jj-pagination.search-data::before {
  position: absolute;
  top: -15px;
  left: 0;
  color: var(--warning);
  content: attr(search-msg);
}
.jj jj-pagination.search-data * {
  display: none;
}
@media (max-width: 767.98px) {
  .jj jj-pagination .pagination,
  .jj jj-pagination select {
    display: none!important;
  }
  .jj jj-pagination .pager {
    display: block;
    float: right;
  }
  .jj jj-pagination .rownum {
    display: block!important;
    font-size: 0.9rem;
    width: 60%!important;
  }
  .jj jj-pagination nav {
    margin-top: 4px;
    position: absolute;
    right: 60px;
  }
  .jj jj-pagination select.form-control {
    display: block!important;
    position: absolute;
    right: 0;
    padding: 5px;
    margin-top: 0!important;
    width: 55px!important;
  }
  .jj jj-pagination .no-data * {
    display: none;
  }
}

/* ==JJPagination.720.class End ================ */




/* ==JJReact.720.class Start ================ */
/* ==JJReact.720.class================ */

/* ==JJReact.720.class End ================ */




/* ==JJReactTable.720.class Start ================ */
/* ==JJReactTable.720.class================ */
.jj jj-react-table {
  position: relative;
  display: block;
  min-height: 240px;
  padding-bottom: 50px;
}
.jj jj-react-table table {
  margin-bottom: 0.5rem;
}
.jj jj-react-table table .trCheck::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 1rem;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f096";
}
.jj jj-react-table table .trNone:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 1rem;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F0C8";
  opacity: 0.5;
  cursor: not-allowed;
}
.jj jj-react-table table tr[selected="true"] td.trCheck::before {
  content: "\F14A";
}
.jj jj-react-table table th.trCheck.checked::before {
  content: "\F14A";
}
.jj jj-react-table jj-pagination {
  position: absolute;
  bottom: 0;
}

/* ==JJReactTable.720.class End ================ */





/* ==ReactComp.720.pkg.deploy End ================ */




/* ==CssComp.720.pkg.deploy Start ================ */
/* ==CssComp.720.pkg.deploy================ */
/* ==JJAnimation.720.class Start ================ */
/* ==JJAnimation.720.class================ */
.jj .ani-off * {
  -webkit-animation-duration: 0s!important;
  animation-duration: 0s!important;
}
.jj .animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.jj .animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.jj .animated.hinge {
  -webkit-animation-duration: 2s!important;
  animation-duration: 2s!important;
}
.jj .animated.s2 {
  -webkit-animation-duration: 2s!important;
  animation-duration: 2s!important;
}
.jj .animated.s3 {
  -webkit-animation-duration: 3s!important;
  animation-duration: 3s!important;
}
@-webkit-keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.jj .bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
@-webkit-keyframes flash {
  0%,
  100%,
  50% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%,
  100%,
  50% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
.jj .flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
@-webkit-keyframes pulse {
  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes pulse {
  0%,
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.jj .pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
@-webkit-keyframes rubberBand {
  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }
}
@keyframes rubberBand {
  0%,
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }
}
.jj .rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
@keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}
.jj .shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
.jj .swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
.jj .tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
@-webkit-keyframes wobble {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
}
@keyframes wobble {
  0%,
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
}
.jj .wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.jj .bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.jj .bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.jj .bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.jj .bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.jj .bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}
@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
}
.jj .bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
.jj .bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.jj .bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.jj .bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.jj .bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.jj .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.jj .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.jj .fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.jj .fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.jj .fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.jj .fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.jj .fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.jj .fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.jj .fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.jj .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}
.jj .fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
.jj .fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
.jj .fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.jj .fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}
.jj .fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.jj .fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
.jj .fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.jj .fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(0.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.jj .animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0);
    transform: perspective(400px) rotateX(0);
    opacity: 1;
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0);
    -ms-transform: perspective(400px) rotateX(0);
    transform: perspective(400px) rotateX(0);
    opacity: 1;
  }
}
.jj .flipInX {
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
.jj .flipInY,
.jj .flipOutX {
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible !important;
}
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0);
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0);
    -ms-transform: perspective(400px) rotateY(0);
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
}
.jj .flipInY {
  backface-visibility: visible!important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0);
    transform: perspective(400px) rotateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0);
    -ms-transform: perspective(400px) rotateX(0);
    transform: perspective(400px) rotateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.jj .flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
    -ms-transform: perspective(400px) rotateY(0);
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.jj .flipOutY {
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0) skewX(-15deg);
    transform: translateX(0) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0) skewX(0);
    transform: translateX(0) skewX(0);
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0) skewX(-15deg);
    -ms-transform: translateX(0) skewX(-15deg);
    transform: translateX(0) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0) skewX(0);
    -ms-transform: translateX(0) skewX(0);
    transform: translateX(0) skewX(0);
    opacity: 1;
  }
}
.jj .lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0) skewX(0);
    transform: translateX(0) skewX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0) skewX(0);
    -ms-transform: translateX(0) skewX(0);
    transform: translateX(0) skewX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
.jj .lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.jj .rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.jj .rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.jj .rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.jj .rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.jj .rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
.jj .rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.jj .rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.jj .rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.jj .rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.jj .rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.jj .slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.jj .slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.jj .slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.jj .slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.jj .slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.jj .slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}
@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.jj .slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
.jj .slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}
.jj .hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0);
    transform: translateX(0) rotate(0);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0);
    -ms-transform: translateX(0) rotate(0);
    transform: translateX(0) rotate(0);
  }
}
.jj .rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0);
    transform: translateX(0) rotate(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0);
    -ms-transform: translateX(0) rotate(0);
    transform: translateX(0) rotate(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}
.jj .rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
}
.jj .zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(-2000px);
    transform: scale(0.1) translateY(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(60px);
    transform: scale(0.475) translateY(60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(-2000px);
    -ms-transform: scale(0.1) translateY(-2000px);
    transform: scale(0.1) translateY(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(60px);
    -ms-transform: scale(0.475) translateY(60px);
    transform: scale(0.475) translateY(60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.jj .zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(-2000px);
    transform: scale(0.1) translateX(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(48px);
    transform: scale(0.475) translateX(48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(-2000px);
    -ms-transform: scale(0.1) translateX(-2000px);
    transform: scale(0.1) translateX(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(48px);
    -ms-transform: scale(0.475) translateX(48px);
    transform: scale(0.475) translateX(48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.jj .zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(2000px);
    transform: scale(0.1) translateX(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-48px);
    transform: scale(0.475) translateX(-48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(2000px);
    -ms-transform: scale(0.1) translateX(2000px);
    transform: scale(0.1) translateX(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-48px);
    -ms-transform: scale(0.475) translateX(-48px);
    transform: scale(0.475) translateX(-48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.jj .zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(2000px);
    transform: scale(0.1) translateY(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(-60px);
    transform: scale(0.475) translateY(-60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(2000px);
    -ms-transform: scale(0.1) translateY(2000px);
    transform: scale(0.1) translateY(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(-60px);
    -ms-transform: scale(0.475) translateY(-60px);
    transform: scale(0.475) translateY(-60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.jj .zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}
.jj .zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(-60px);
    transform: scale(0.475) translateY(-60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(2000px);
    transform: scale(0.1) translateY(2000px);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(-60px);
    -ms-transform: scale(0.475) translateY(-60px);
    transform: scale(0.475) translateY(-60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(2000px);
    -ms-transform: scale(0.1) translateY(2000px);
    transform: scale(0.1) translateY(2000px);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}
.jj .zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(42px);
    transform: scale(0.475) translateX(42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(-2000px);
    transform: scale(0.1) translateX(-2000px);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(42px);
    -ms-transform: scale(0.475) translateX(42px);
    transform: scale(0.475) translateX(42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(-2000px);
    -ms-transform: scale(0.1) translateX(-2000px);
    transform: scale(0.1) translateX(-2000px);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
  }
}
.jj .zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-42px);
    transform: scale(0.475) translateX(-42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(2000px);
    transform: scale(0.1) translateX(2000px);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-42px);
    -ms-transform: scale(0.475) translateX(-42px);
    transform: scale(0.475) translateX(-42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(2000px);
    -ms-transform: scale(0.1) translateX(2000px);
    transform: scale(0.1) translateX(2000px);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
  }
}
.jj .zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(60px);
    transform: scale(0.475) translateY(60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(-2000px);
    transform: scale(0.1) translateY(-2000px);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(60px);
    -ms-transform: scale(0.475) translateY(60px);
    transform: scale(0.475) translateY(60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(-2000px);
    -ms-transform: scale(0.1) translateY(-2000px);
    transform: scale(0.1) translateY(-2000px);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
  }
}
.jj .zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}
@-webkit-keyframes sizeWidth {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}
@keyframes sizeWidth {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}
.jj .sizeWidth {
  -webkit-animation-name: sizeWidth;
  animation-name: sizeWidth;
}
.jj .iconSpinOn:hover {
  -webkit-animation: iconSpin 2s infinite linear;
  -o-animation: iconSpin 2s infinite linear;
  animation: iconSpin 2s infinite linear;
}
.jj .iconSpin {
  -webkit-animation: iconSpin 2s infinite linear;
  -o-animation: iconSpin 2s infinite linear;
  animation: iconSpin 2s infinite linear;
}
.jj .iconSpin:hover {
  -webkit-animation: none;
  -o-animation: none;
  animation: none;
}
.jj .iconSpinOn:hover {
  -webkit-animation: iconSpin 2s infinite linear;
  -o-animation: iconSpin 2s infinite linear;
  animation: iconSpin 2s infinite linear;
}
.jj .over:hover .iconSpinOn {
  -webkit-animation: iconSpin 2s infinite linear;
  -o-animation: iconSpin 2s infinite linear;
  animation: iconSpin 2s infinite linear;
}
.jj .iconSpinReverse {
  -webkit-animation: iconSpinReverse 2s infinite linear;
  -o-animation: iconSpinReverse 2s infinite linear;
  animation: iconSpinReverse 2s infinite linear;
}
.jj .iconSpinReverse:hover {
  -webkit-animation: none;
  -o-animation: none;
  animation: none;
}
.jj .iconSpinReverseOn:hover {
  -webkit-animation: iconSpinReverse 2s infinite linear;
  -o-animation: iconSpinReverse 2s infinite linear;
  animation: iconSpinReverse 2s infinite linear;
}
@-webkit-keyframes iconSpin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes iconSpin {
  0% {
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes iconSpin {
  0% {
    /* -webkit-transform:rotate(0); */
    -o-transform: rotate(0);
    /* transform:rotate(0); */
  }
  100% {
    -webkit-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes iconSpinReverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
@-o-keyframes iconSpinReverse {
  0% {
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
@keyframes iconSpinReverse {
  0% {
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
.jj .overSpin {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.jj .overSpin:hover {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.jj .overSpinReverse {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.jj .overSpinReverse:hover {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/* ==JJAnimation.720.class End ================ */




/* ==JJCircle3d.720.class Start ================ */
/* ==JJCircle3d.720.class================ */
.jj .circle3d {
  min-width: 13px;
  min-height: 13px;
  width: 1.4em;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 64px;
  position: relative;
  box-shadow: inset -0.1em -0.1em 1em #000, 0.1em 0.1em 0.2em black, inset 0px 0px 0.1em black;
  display: inline-block;
  color: white;
}
.jj .circle3d::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}
.jj .circle3d.red {
  background-color: red;
}
.jj .circle3d.green {
  background-color: green;
}
.jj .circle3d.blue {
  background-color: blue;
}
.jj .circle3d.yellow {
  background-color: yellow;
}

/* ==JJCircle3d.720.class End ================ */




/* ==JJCssElement.720.class Start ================ */
/* ==JJCssElement.720.class================ */
.jj {
  /* Timer*/
}
.jj .j-bg-opacity-1 {
  position: relative;
}
.jj .j-bg-opacity-1:before {
  content: " ";
  opacity: 0.2;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #000;
  z-index: 0;
}
.jj .j-bg-opacity-1 > * {
  position: relative;
}
.jj .j-bg-opacity-2 {
  position: relative;
}
.jj .j-bg-opacity-2:before {
  content: " ";
  opacity: 0.4;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #000;
  z-index: 0;
}
.jj .j-bg-opacity-2 > * {
  position: relative;
}
.jj .j-bg-opacity-3 {
  position: relative;
}
.jj .j-bg-opacity-3:before {
  content: " ";
  opacity: 0.6;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #000;
  z-index: 0;
}
.jj .j-bg-opacity-3 > * {
  position: relative;
}
.jj .j-hover-0 {
  transition: all 0.2s ease-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.jj .j-hover-1 {
  transition: all 0.2s ease-out;
  box-shadow: none;
}
.jj .j-hover-1:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.jj .j-hover-2 {
  transition: all 0.2s ease-out;
  box-shadow: none;
}
.jj .j-hover-2:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-0.5rem);
}
.jj .jj-icon-menu-toggle {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  text-align: center;
  box-sizing: border-box;
  font-size: 16px;
  z-index: 10;
}
.jj .jj-icon-menu-toggle .menu-open {
  display: none;
}
.jj .jj-icon-menu-toggle .menu-open:checked + .menu-open-button .line-1 {
  background: #eeeeee;
}
.jj .jj-icon-menu-toggle .menu-open:checked + .menu-open-button .line-3 {
  background: #eeeeee;
}
.jj .jj-icon-menu-toggle .menu-item,
.jj .jj-icon-menu-toggle .menu-open-button {
  background: #eeeeee;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  position: absolute;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0) rotate(45deg);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.jj .jj-icon-menu-toggle .menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  background-color: #fa7a7a;
}
.jj .jj-icon-menu-toggle .menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.jj .jj-icon-menu-toggle .menu-open-button.show {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0) rotate(405deg);
}
.jj .jj-icon-menu-toggle .menu-open-button.show ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
}
.jj .jj-icon-menu-toggle .menu-open-button.show ~ .menu-item:nth-child(2) {
  -webkit-transform: translate3d(0px, -50px, 0);
  transform: translate3d(0px, -50px, 0);
}
.jj .jj-icon-menu-toggle .menu-open-button.show ~ .menu-item:nth-child(3) {
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
}
.jj .jj-icon-menu-toggle .menu-open-button.show ~ .menu-item:nth-child(4) {
  -webkit-transform: translate3d(0, -150px, 0);
  transform: translate3d(0, -150px, 0);
}
.jj .jj-icon-menu-toggle .menu-open-button.show ~ .menu-item:nth-child(5) {
  -webkit-transform: translate3d(0, -200px, 0);
  transform: translate3d(0, -200px, 0);
}
.jj .jj-icon-menu-toggle .menu-open-button.show ~ .menu-item:nth-child(6) {
  -webkit-transform: translate3d(0, -250px, 0);
  transform: translate3d(0, -250px, 0);
}
.jj .jj-icon-menu-toggle .menu-open-button.show ~ .menu-item:nth-child(7) {
  -webkit-transform: translate3d(0, -300px, 0);
  transform: translate3d(0, -300px, 0);
}
.jj .jj-icon-menu-toggle .menu-item {
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.1s ease 0s;
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.jj .jj-icon-menu-toggle .menu-item > * {
  pointer-events: none;
}
.jj .jj-icon-menu-toggle .menu-item t {
  color: var(--text3);
  position: absolute;
  right: 40px;
  border-radius: 25px;
  background-color: var(--basecolor2);
  overflow: hidden;
  width: 0;
  -webkit-transition: 0.4s;
  white-space: nowrap;
}
.jj .jj-icon-menu-toggle .menu-item:hover {
  background: #eeeeee !important;
  text-shadow: none;
}
.jj .jj-icon-menu-toggle .menu-item:hover t {
  width: 100px;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(2) {
  background-color: #669ae1;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(2):hover {
  color: #669ae1;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(3) {
  background-color: #70cc72;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(3):hover {
  color: #70cc72;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(4) {
  background-color: #fe4365;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(4):hover {
  color: #fe4365;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(5) {
  background-color: #c49cde;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(5):hover {
  color: #c49cde;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(6) {
  background-color: #fc913a;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(6):hover {
  color: #fc913a;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(7) {
  background-color: #62c2e4;
}
.jj .jj-icon-menu-toggle .menu-item:nth-child(7):hover {
  color: #62c2e4;
}
.jj .jj-icon-menu {
  position: absolute;
  bottom: 30px;
  right: 130px;
  width: 40px;
  height: 40px;
  text-align: center;
  box-sizing: border-box;
  font-size: 16px;
  z-index: 10;
}
.jj .jj-icon-menu .menu-open {
  display: none;
}
.jj .jj-icon-menu .menu-open:checked + .menu-open-button .line-1 {
  background: #eeeeee;
}
.jj .jj-icon-menu .menu-open:checked + .menu-open-button .line-3 {
  background: #eeeeee;
}
.jj .jj-icon-menu .menu-open:checked + .menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0) rotate(405deg);
}
.jj .jj-icon-menu .menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
}
.jj .jj-icon-menu .menu-open:checked ~ .menu-item:nth-child(3) {
  -webkit-transform: translate3d(0px, -50px, 0);
  transform: translate3d(0px, -50px, 0);
}
.jj .jj-icon-menu .menu-open:checked ~ .menu-item:nth-child(4) {
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
}
.jj .jj-icon-menu .menu-open:checked ~ .menu-item:nth-child(5) {
  -webkit-transform: translate3d(0, -150px, 0);
  transform: translate3d(0, -150px, 0);
}
.jj .jj-icon-menu .menu-open:checked ~ .menu-item:nth-child(6) {
  -webkit-transform: translate3d(0, -200px, 0);
  transform: translate3d(0, -200px, 0);
}
.jj .jj-icon-menu .menu-open:checked ~ .menu-item:nth-child(7) {
  -webkit-transform: translate3d(0, -250px, 0);
  transform: translate3d(0, -250px, 0);
}
.jj .jj-icon-menu .menu-open:checked ~ .menu-item:nth-child(8) {
  -webkit-transform: translate3d(0, -300px, 0);
  transform: translate3d(0, -300px, 0);
}
.jj .jj-icon-menu .menu-item,
.jj .jj-icon-menu .menu-open-button {
  background: #eeeeee;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  position: absolute;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0) rotate(45deg);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.jj .jj-icon-menu .menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  background-color: #fa7a7a;
}
.jj .jj-icon-menu .menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.jj .jj-icon-menu .menu-open-button .lines {
  width: 18px;
  height: 3px;
  background: #596778;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8.5px;
  margin-top: -1px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
.jj .jj-icon-menu .menu-open-button .lines.line-1 {
  background-color: white;
}
.jj .jj-icon-menu .menu-open-button .lines.line-3 {
  background-color: white;
  -webkit-transform: translate3d(0, 0, 0) rotate(-90deg);
  transform: translate3d(0, 0, 0) rotate(-90deg);
}
.jj .jj-icon-menu .menu-item {
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.1s ease 0s;
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}
.jj .jj-icon-menu .menu-item > * {
  pointer-events: none;
}
.jj .jj-icon-menu .menu-item t {
  color: var(--text3);
  position: absolute;
  right: 40px;
  border-radius: 25px;
  background-color: var(--basecolor2);
  overflow: hidden;
  width: 0;
  -webkit-transition: 0.4s;
}
.jj .jj-icon-menu .menu-item:hover {
  background: #eeeeee !important;
  text-shadow: none;
}
.jj .jj-icon-menu .menu-item:hover t {
  width: 100px;
}
.jj .jj-icon-menu .menu-item:nth-child(3) {
  background-color: #669ae1;
}
.jj .jj-icon-menu .menu-item:nth-child(3):hover {
  color: #669ae1;
}
.jj .jj-icon-menu .menu-item:nth-child(4) {
  background-color: #70cc72;
}
.jj .jj-icon-menu .menu-item:nth-child(4):hover {
  color: #70cc72;
}
.jj .jj-icon-menu .menu-item:nth-child(5) {
  background-color: #fe4365;
}
.jj .jj-icon-menu .menu-item:nth-child(5):hover {
  color: #fe4365;
}
.jj .jj-icon-menu .menu-item:nth-child(6) {
  background-color: #c49cde;
}
.jj .jj-icon-menu .menu-item:nth-child(6):hover {
  color: #c49cde;
}
.jj .jj-icon-menu .menu-item:nth-child(7) {
  background-color: #fc913a;
}
.jj .jj-icon-menu .menu-item:nth-child(7):hover {
  color: #fc913a;
}
.jj .jj-icon-menu .menu-item:nth-child(8) {
  background-color: #62c2e4;
}
.jj .jj-icon-menu .menu-item:nth-child(8):hover {
  color: #62c2e4;
}
.jj .form-group.flex1 {
  display: flex;
  flex-direction: row;
}
.jj .form-group.flex1 > .control-label {
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  flex: none;
  width: 100px;
}
.jj .form-group.flex1 > .form-control {
  flex-grow: 1;
  order: 1;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border-bottom-width: 5px;
}
.jj .form-group.flex1 > *:nth-child(3) {
  order: 1;
}
.jj .form-group.flex2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.jj .form-group.flex2 > .control-label {
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  flex: none;
  margin-left: 1rem;
}
.jj .form-group.flex2 > .form-control {
  flex-grow: 1;
  order: 1;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border-bottom-width: 5px;
}
.jj .form-group.flex2 > .form-control:invalid {
  border: none;
  box-shadow: none;
  border-bottom: 1px dotted #ccc;
}
.jj .form-group.flex2 > .form-control:invalid + * {
  color: blue;
  transform: scale(1, 1.2) translateY(30px);
  pointer-events: none;
}
.jj .form-group.flex2 > .form-control:valid {
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  border-bottom-width: 5px;
}
.jj .form-group.flex2 > .form-control:valid + * {
  color: red;
}
.jj .form-group.flex2 > .form-control:focus {
  border: 1px solid #ccc;
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.jj .form-group.flex2 > .form-control:focus + * {
  transform: scale(1, 1);
  transform: none;
}
.jj .form-group.flex2 > .form-control:required + *:after {
  color: red;
  content: '*';
}
.jj .form-group.flex2 > *:nth-child(3) {
  order: 2;
}
.jj .jj-chip {
  display: inline-block;
  padding: 0 25px;
  padding: 0;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 25px;
  background-color: var(--basecolor1);
  -webkit-transition: 0.4s;
  overflow: hidden;
}
.jj .jj-chip img {
  float: left;
  margin: 0 10px 0 -25px;
  margin: 0;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.jj .jj-chip t {
  display: block;
  width: auto;
}
.jj .jj-chip * {
  pointer-events: none;
}
.jj .jj-chip.sm {
  height: 34px;
  font-size: 13px;
  line-height: 34px;
}
.jj .jj-chip.sm img {
  height: 34px;
  width: 34px;
}
.jj .jj-chip.animated {
  background-color: var(--basecolor2);
}
.jj .jj-chip.animated t {
  display: block;
  width: 0;
  -webkit-transition: 0.4s;
}
.jj .jj-chip.animated:hover t,
.jj .jj-chip.animated.on t {
  width: 100px;
}
.jj .cell-icon:before,
.jj .jj-cell-icon:before {
  position: absolute;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-align: center;
  content: '\f111';
  left: 0.3rem;
  top: 0.5rem;
}
.jj .cell-icon.center:before,
.jj .jj-cell-icon.center:before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  content: '\f116';
  margin-right: 5px;
}
.jj .cell-icon.o:before,
.jj .jj-cell-icon.o:before {
  color: #f2a654;
}
.jj .cell-icon.b:before,
.jj .jj-cell-icon.b:before {
  color: #62a8ea;
}
.jj .cell-icon.r:before,
.jj .jj-cell-icon.r:before {
  color: #f96868;
}
.jj .cell-icon.g:before,
.jj .jj-cell-icon.g:before {
  color: #279566;
}
.jj .cell-icon.r8:before,
.jj .jj-cell-icon.r8:before {
  color: #d6494b;
}
.jj .cell-icon.h:before,
.jj .jj-cell-icon.h:before {
  color: #bdbdbd;
}
.jj .cell-icon.cw:before,
.jj .jj-cell-icon.cw:before {
  color: white;
}
.jj .cell-icon.cb:before,
.jj .jj-cell-icon.cb:before {
  color: black;
}
.jj .cell-icon.up:before,
.jj .jj-cell-icon.up:before {
  content: '\f176';
}
.jj .cell-icon.down:before,
.jj .jj-cell-icon.down:before {
  content: '\f175';
}
.jj .cell-icon.light:before,
.jj .jj-cell-icon.light:before {
  content: '\f0eb';
}
.jj .cell-icon.circle:before,
.jj .jj-cell-icon.circle:before {
  content: '\f111';
}
.jj .cell-icon.circle-o:before,
.jj .jj-cell-icon.circle-o:before {
  content: '\f1db';
}
.jj .cell-icon.level0:before,
.jj .jj-cell-icon.level0:before {
  content: '\f244';
}
.jj .cell-icon.level1:before,
.jj .jj-cell-icon.level1:before {
  content: '\f243';
}
.jj .cell-icon.level2:before,
.jj .jj-cell-icon.level2:before {
  content: '\f242';
}
.jj .cell-icon.level3:before,
.jj .jj-cell-icon.level3:before {
  content: '\f241';
}
.jj .cell-icon.level4:before,
.jj .jj-cell-icon.level4:before {
  content: '\f240';
}
.jj .cell-icon.namecard:before,
.jj .jj-cell-icon.namecard:before {
  content: '\f2bc';
}
.jj .cell-icon.org:before,
.jj .jj-cell-icon.org:before {
  content: '\f0f7';
}
.jj .cell-icon.info:before,
.jj .jj-cell-icon.info:before {
  content: '\f06a';
}
.jj .filp-card {
  display: block;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 300px;
  height: 200px;
  cursor: pointer;
}
.jj .filp-card > input {
  display: none !important;
}
.jj .filp-card > .card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}
.jj .filp-card > .card div {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff;
  text-align: center;
  line-height: 200px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 2px;
}
.jj .filp-card > .card .back {
  background: #222;
  color: #fff;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.jj .filp-card:hover .card {
  -webkit-transform: rotateX(20deg);
  transform: rotateX(20deg);
  box-shadow: 0 20px 20px rgba(50, 50, 50, 0.2);
}
.jj .filp-card:hover :checked + .card {
  transform: rotateX(160deg);
  -webkit-transform: rotateX(160deg);
  box-shadow: 0 20px 20px rgba(255, 255, 255, 0.2);
}
.jj .filp-card :checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}
.jj .jj-stack-bar {
  width: 100%;
  max-width: 100%;
  text-align: center;
  border: 1px solid #ccc;
  height: 200px;
  padding: 20px 10px 10px 10px;
}
.jj .jj-stack-bar > .legend {
  list-style-type: none;
  padding-left: 0;
  display: inline-block;
}
.jj .jj-stack-bar > .legend li {
  float: left;
  padding-right: 20px;
}
.jj .jj-stack-bar > .legend li i {
  padding-right: 5px;
}
.jj .jj-stack-bar > .btn-group {
  float: right;
  margin-bottom: 10px;
}
.jj .jj-stack-bar > .progress {
  width: 100%;
  height: 60px;
}
.jj .jj-wrapper {
  background-color: #59488b;
  width: 800px;
  /*Typing Loader*/
  /*Location indicator */
  /* go in*/
  /*Battery*/
  /*help*/
  /*eye ball*/
  /*coffee cup*/
  /*square*/
  /*circle classick*/
  /*cloud*/
  /* Me */
}
.jj .jj-wrapper .cf:after {
  clear: both;
}
.jj .jj-wrapper a {
  text-decoration: none;
}
.jj .jj-wrapper a:hover {
  transition: all linear 0.2s;
}
.jj .jj-wrapper ::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
.jj .jj-wrapper ::selection {
  background: #b3d4fc;
  text-shadow: none;
}
.jj .jj-wrapper .span,
.jj .jj-wrapper .span_large {
  float: left;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.02);
  height: 100px;
  vertical-align: middle;
  border-radius: 1px;
  margin-right: 100px;
}
.jj .jj-wrapper .span:last-child {
  margin-right: 0px;
}
.jj .jj-wrapper .timer {
  width: 120px;
  height: 120px;
  box-shadow: inset 0px 0px 0px 2px #fff;
  border-radius: 50%;
  position: relative;
  border: 1px solid red;
  margin: 38px auto;
}
.jj .jj-wrapper .timer:after,
.jj .jj-wrapper .timer:before {
  position: absolute;
  content: '';
  background-color: #fff;
}
.jj .jj-wrapper .timer:after {
  width: 60px;
  height: 2px;
  top: 60px;
  left: 60px;
  -webkit-transform-origin: 1px 1px;
  -moz-transform-origin: 1px 1px;
  transform-origin: 1px 1px;
  -webkit-animation: minhand 2s linear infinite;
  -moz-animation: minhand 2s linear infinite;
  animation: minhand 2s linear infinite;
}
.jj .jj-wrapper .timer:before {
  width: 40px;
  height: 2px;
  top: 60px;
  left: 60px;
  -webkit-transform-origin: 1px 1px;
  -moz-transform-origin: 1px 1px;
  transform-origin: 1px 1px;
  -webkit-animation: hrhand 8s linear infinite;
  -moz-animation: hrhand 8s linear infinite;
  animation: hrhand 8s linear infinite;
}
@-webkit-keyframes minhand {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes minhand {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes minhand {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes hrhand {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes hrhand {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes hrhand {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.jj .jj-wrapper .dashboard {
  width: 100px;
  height: 100px;
  margin: 30px auto;
  border: 2px #ffffff solid;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.jj .jj-wrapper .dashboard:after,
.jj .jj-wrapper .dashboard:before {
  position: absolute;
  content: '';
}
.jj .jj-wrapper .dashboard:after {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 2px;
  top: 70%;
  -webkit-transform-origin: 1px 1px;
  -moz-transform-origin: 1px 1px;
  transform-origin: 1px 1px;
  background-color: red;
  -webkit-animation: dashboard_hand 2s linear infinite alternate;
  -moz-animation: dashboard_hand 2s linear infinite alternate;
  animation: dashboard_hand 2s linear infinite alternate;
}
.jj .jj-wrapper .dashboard:before {
  width: 150%;
  height: 100%;
  background-color: blue;
  top: 70%;
  left: -2px;
}
@-webkit-keyframes dashboard_hand {
  0% {
    -webkit-transform: rotate(-160deg);
  }
  100% {
    -webkit-transform: rotate(-20deg);
  }
}
@-moz-keyframes dashboard_hand {
  0% {
    -moz-transform: rotate(-160deg);
  }
  100% {
    -moz-transform: rotate(-20deg);
  }
}
@keyframes dashboard_hand {
  0% {
    transform: rotate(-160deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}
.jj .jj-wrapper .typing_loader {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-animation: typing 1s linear infinite alternate;
  -moz-animation: Typing 1s linear infinite alternate;
  animation: typing 1s linear infinite alternate;
  margin: 46px auto;
  /* Not necessary- its only for layouting*/
  position: relative;
  left: -12px;
}
@-webkit-keyframes typing {
  0% {
    background-color: #ffffff;
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  25% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px #ffffff, 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px #ffffff;
  }
}
@-moz-keyframes typing {
  0% {
    background-color: #ffffff;
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  25% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px #ffffff, 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px #ffffff;
  }
}
@keyframes typing {
  0% {
    background-color: #ffffff;
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  25% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px #ffffff, 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px #ffffff;
  }
}
.jj .jj-wrapper .location_indicator {
  margin: 30px auto;
  position: relative;
  left: -9px;
}
.jj .jj-wrapper .location_indicator:before,
.jj .jj-wrapper .location_indicator:after {
  position: absolute;
  content: '';
}
.jj .jj-wrapper .location_indicator:before {
  width: 20px;
  height: 20px;
  border-radius: 100% 100% 100% 0;
  box-shadow: 0px 0px 0px 2px #ffffff;
  -webkit-animation: mapping 1s linear infinite;
  -moz-animation: mapping 1s linear infinite;
  animation: mapping 1s linear infinite;
  -webkit-transform: rotate(-46deg);
  -moz-transform: rotate(-46deg);
  transform: rotate(-46deg);
}
.jj .jj-wrapper .location_indicator:after {
  width: 30px;
  height: 10px;
  border-radius: 100%;
  left: 44px;
  background-color: rgba(255, 255, 255, 0.2);
  top: 24px;
  z-index: -1;
}
@-webkit-keyframes mapping {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}
@-moz-keyframes mapping {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}
@-keyframes mapping {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}
.jj .jj-wrapper .battery {
  width: 28px;
  height: 14px;
  border: 1px #fff solid;
  border-radius: 2px;
  position: relative;
  -webkit-animation: charge 5s linear infinite;
  -moz-animation: charge 5s linear infinite;
  animation: charge 5s linear infinite;
  top: 40px;
  margin: 0 auto;
}
.jj .jj-wrapper .battery:after {
  width: 2px;
  height: 7px;
  background-color: #fff;
  border-radius: 0px 1px 1px 0px;
  position: absolute;
  content: '';
  top: 2px;
  right: -4px;
}
@-webkit-keyframes charge {
  0% {
    box-shadow: inset 0px 0px 0px #fff;
  }
  100% {
    box-shadow: inset 30px 0px 0px #fff;
  }
}
@-moz-keyframes charge {
  0% {
    box-shadow: inset 0px 0px 0px #fff;
  }
  100% {
    box-shadow: inset 30px 0px 0px #fff;
  }
}
@keyframes charge {
  0% {
    box-shadow: inset 0px 0px 0px #fff;
  }
  100% {
    box-shadow: inset 30px 0px 0px #fff;
  }
}
.jj .jj-wrapper .magnifier {
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px 0px 1px #fff;
  border-radius: 50%;
  position: relative;
  margin: 34px auto;
  -webkit-animation: magnify 1s linear infinite alternate;
  -moz-animation: magnify 1s linear infinite alternate;
  animation: magnify 1s linear infinite alternate;
}
.jj .jj-wrapper .magnifier:after,
.jj .jj-wrapper .magnifier:before {
  position: absolute;
  content: '';
}
.jj .jj-wrapper .magnifier:before {
  content: 'me';
  font-size: 12px;
  left: 2px;
  text-align: center;
  top: 2px;
}
.jj .jj-wrapper .magnifier:after {
  width: 2px;
  height: 8px;
  background-color: #fff;
  bottom: -6px;
  left: 20px;
  border-radius: 2px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@-webkit-keyframes magnify {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.5);
  }
}
@-moz-keyframes magnify {
  0% {
    -moz-transform: scale(1);
  }
  100% {
    -moz-transform: scale(1.5);
  }
}
@keyframes magnify {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
.jj .jj-wrapper .help {
  width: 30px;
  height: 30px;
  border: 1px #fff solid;
  border-radius: 50%;
  -webkit-animation: rotation 1s ease-in-out infinite;
  -moz-animation: rotation 1s ease-in-out infinite;
  animation: rotation 1s ease-in-out infinite;
  margin: 30px auto;
}
.jj .jj-wrapper .help:after {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 100%;
  position: absolute;
  content: '';
}
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotation {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.jj .jj-wrapper .eye {
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 30px 0px 0px 0px rgba(255, 255, 255, 0.8);
  position: relative;
  margin: 36px 26px;
}
.jj .jj-wrapper .eye:after {
  background-color: #59488b;
  width: 10px;
  height: 10px;
  box-shadow: 30px 0px 0px 0px #59488b;
  border-radius: 50%;
  left: 9px;
  top: 8px;
  position: absolute;
  content: '';
  -webkit-animation: eyeball 2s linear infinite alternate;
  -moz-animation: eyeball 2s linear infinite alternate;
  animation: eyeball 2s linear infinite alternate;
}
@-webkit-keyframes eyeball {
  0% {
    left: 9px;
  }
  100% {
    left: 1px;
  }
}
@-moz-keyframes eyeball {
  0% {
    left: 9px;
  }
  100% {
    left: 1px;
  }
}
@keyframes eyeball {
  0% {
    left: 9px;
  }
  100% {
    left: 1px;
  }
}
.jj .jj-wrapper .coffee_cup {
  width: 20px;
  height: 24px;
  border: 1px #ffffff solid;
  border-radius: 0px 0px 5px 5px;
  position: relative;
  margin: 36px auto;
}
.jj .jj-wrapper .coffee_cup:after,
.jj .jj-wrapper .coffee_cup:before {
  position: absolute;
  content: '';
}
.jj .jj-wrapper .coffee_cup:after {
  width: 5px;
  height: 12px;
  border: 1px #fff solid;
  border-left: none;
  border-radius: 0px 20px 20px 0px;
  left: 20px;
}
.jj .jj-wrapper .coffee_cup:before {
  width: 1px;
  height: 6px;
  background-color: #ffffff;
  top: -10px;
  left: 4px;
  box-shadow: 5px 0px 0px 0px #ffffff, 5px -5px 0px 0px #ffffff, 10px 0px 0px 0px #ffffff;
  -webkit-animation: steam 1s linear infinite alternate;
  -moz-animation: steam 1s linear infinite alternate;
  animation: steam 1s linear infinite alternate;
}
@-webkit-keyframes steam {
  0% {
    height: 0px;
  }
  100% {
    height: 6px;
  }
}
@-moz-keyframes steam {
  0% {
    height: 0px;
  }
  100% {
    height: 6px;
  }
}
@keyframes steam {
  0% {
    height: 0px;
  }
  100% {
    height: 6px;
  }
}
.jj .jj-wrapper .square {
  width: 20px;
  height: 20px;
  border: 1px #ffffff solid;
  margin: 36px auto;
  position: relative;
  -webkit-animation: fill_color 5s linear infinite;
  -moz-animation: fill_color 5s linear infinite;
  animation: fill_color 5s linear infinite;
}
.jj .jj-wrapper .square:after {
  width: 4px;
  height: 4px;
  position: absolute;
  content: '';
  background-color: #ffffff;
  top: -8px;
  left: 0px;
  -webkit-animation: square_check 1s ease-in-out infinite;
  -moz-animation: square_check 1s ease-in-out infinite;
  animation: square_check 1s ease-in-out infinite;
}
@-webkit-keyframes square_check {
  25% {
    left: 22px;
    top: -8px;
  }
  50% {
    left: 22px;
    top: 22px;
  }
  75% {
    left: -9px;
    top: 22px;
  }
  100% {
    left: -9px;
    top: -7px;
  }
}
@-moz-keyframes square_check {
  25% {
    left: 22px;
    top: -8px;
  }
  50% {
    left: 22px;
    top: 22px;
  }
  75% {
    left: -9px;
    top: 22px;
  }
  100% {
    left: -9px;
    top: -7px;
  }
}
@keyframes square_check {
  25% {
    left: 22px;
    top: -8px;
  }
  50% {
    left: 22px;
    top: 22px;
  }
  75% {
    left: -9px;
    top: 22px;
  }
  100% {
    left: -9px;
    top: -7px;
  }
}
@-webkit-keyframes fill_color {
  0% {
    box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: inset 0px -20px 0px 0px #ffffff;
  }
}
@-moz-keyframes fill_color {
  0% {
    box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: inset 0px -20px 0px 0px #ffffff;
  }
}
@keyframes fill_color {
  0% {
    box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: inset 0px -20px 0px 0px #ffffff;
  }
}
.jj .jj-wrapper .circle {
  margin: 40px auto;
  position: relative;
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: -14px 0px 0px #ffffff;
  border-radius: 50%;
  -webkit-animation: circle_classic 1s ease-in-out infinite alternate;
  -moz-animation: circle_classic 1s ease-in-out infinite alternate;
  animation: circle_classic 1s ease-in-out infinite alternate;
}
@-webkit-keyframes circle_classic {
  0% {
    opacity: 0.1;
    -webkit-transform: rotate(0deg) scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(360deg) scale(1.2);
  }
}
@-moz-keyframes circle_classic {
  0% {
    opacity: 0.1;
    -moz-transform: rotate(0deg) scale(0.5);
  }
  100% {
    opacity: 1;
    -moz-transform: rotate(360deg) scale(1.2);
  }
}
@keyframes circle_classic {
  0% {
    opacity: 0.1;
    transform: rotate(0deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1.2);
  }
}
.jj .jj-wrapper .cloud {
  margin: 42px 30px;
  width: 4px;
  height: 10px;
  opacity: 0.5;
  position: relative;
  box-shadow: 6px 0px 0px 0px #ffffff, 12px 0px 0px 0px #ffffff, 18px 0px 0px 0px #ffffff, 24px 0px 0px 0px #ffffff, 30px 0px 0px 0px #ffffff, 36px 0px 0px 0px #ffffff;
  -webkit-animation: rain 1s linear infinite alternate;
  -moz-animation: rain 1s linear infinite alternate;
  animation: rain 1s linear infinite alternate;
}
.jj .jj-wrapper .cloud:after {
  width: 40px;
  height: 10px;
  position: absolute;
  content: '';
  background-color: #ffffff;
  top: 0px;
  opacity: 1;
  -webkit-animation: line_flow 2s linear infinite reverse;
  -moz-animation: line_flow 2s linear infinite reverse;
  animation: line_flow 2s linear infinite reverse;
}
@-webkit-keyframes rain {
  0% {
    box-shadow: 6px 0px 0px 0px #ffffff, 12px 0px 0px 0px rgba(255, 255, 255, 0.9), 18px 0px 0px 0px rgba(255, 255, 255, 0.7), 24px 0px 0px 0px rgba(255, 255, 255, 0.6), 30px 0px 0px 0px rgba(255, 255, 255, 0.3), 36px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 0.2), 12px 0px 0px 0px rgba(255, 255, 255, 0.3), 18px 0px 0px 0px rgba(255, 255, 255, 0.6), 24px 0px 0px 0px rgba(255, 255, 255, 0.7), 30px 0px 0px 0px rgba(255, 255, 255, 0.9), 36px 0px 0px 0px #ffffff;
    opacity: 1;
  }
}
@-moz-keyframes rain {
  0% {
    box-shadow: 6px 0px 0px 0px #ffffff, 12px 0px 0px 0px rgba(255, 255, 255, 0.9), 18px 0px 0px 0px rgba(255, 255, 255, 0.7), 24px 0px 0px 0px rgba(255, 255, 255, 0.6), 30px 0px 0px 0px rgba(255, 255, 255, 0.3), 36px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 0.2), 12px 0px 0px 0px rgba(255, 255, 255, 0.3), 18px 0px 0px 0px rgba(255, 255, 255, 0.6), 24px 0px 0px 0px rgba(255, 255, 255, 0.7), 30px 0px 0px 0px rgba(255, 255, 255, 0.9), 36px 0px 0px 0px #ffffff;
    opacity: 1;
  }
}
@keyframes rain {
  0% {
    box-shadow: 6px 0px 0px 0px #ffffff, 12px 0px 0px 0px rgba(255, 255, 255, 0.9), 18px 0px 0px 0px rgba(255, 255, 255, 0.7), 24px 0px 0px 0px rgba(255, 255, 255, 0.6), 30px 0px 0px 0px rgba(255, 255, 255, 0.3), 36px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 0.2), 12px 0px 0px 0px rgba(255, 255, 255, 0.3), 18px 0px 0px 0px rgba(255, 255, 255, 0.6), 24px 0px 0px 0px rgba(255, 255, 255, 0.7), 30px 0px 0px 0px rgba(255, 255, 255, 0.9), 36px 0px 0px 0px #ffffff;
    opacity: 1;
  }
}
@-webkit-keyframes line_flow {
  0% {
    width: 0px;
  }
  100% {
    width: 40px;
  }
}
@-moz-keyframes line_flow {
  0% {
    width: 0px;
  }
  100% {
    width: 40px;
  }
}
@keyframes line_flow {
  0% {
    width: 0px;
  }
  100% {
    width: 40px;
  }
}
.jj .jj-wrapper .aboutme {
  width: 700px;
  padding: 50px 0;
  border-top: 2px rgba(255, 255, 255, 0.03) solid;
}
.jj .jj-wrapper .viduthalai {
  background: url(../img/viduthalai.png) no-repeat;
  width: 100px;
  height: 100px;
  border-radius: 0 2px 2px 0;
  float: left;
  opacity: 0.5;
}
.jj .jj-wrapper .viduthalai:hover {
  opacity: 1;
}
.jj .jj-wrapper .intro {
  float: left;
  width: 400px;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.5);
}
.jj .jj-wrapper .intro a {
  color: rgba(255, 255, 255, 0.5);
}
.jj .jj-wrapper .intro a:hover {
  color: #ffffff;
}
.jj .jj-wrapper .intro span,
.jj .jj-wrapper p {
  font-size: 15px;
  font-weight: 200;
}
.jj .jj-wrapper .intro h3 {
  font-size: 20px;
  font-weight: 200;
  margin: 0px;
}
.jj .jj-wrapper .git {
  color: rgba(255, 255, 255, 0.5);
  float: right;
  text-align: right;
  padding: 10px 20px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.3);
  font-weight: 200;
}
.jj .jj-wrapper .git:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.jj .jj-progress.vertical {
  position: relative;
  width: 50px;
  height: 100%;
  min-height: 100px;
  text-align: center;
  margin-bottom: 0px;
  display: inline-block;
}
.jj .jj-progress.vertical .progress-bar {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.jj .jj-progress.vertical .progress-bar.animate {
  -webkit-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease;
}
.jj .jj-progress {
  height: 30px;
  margin-bottom: 1rem;
}
.jj .jj-progress .progress-bar {
  transition: none;
}
.jj .jj-progress .progress-bar.animate {
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.jj .kpibox {
  position: relative;
  width: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: row;
  -webkit-print-color-adjust: exact;
}
.jj .kpibox > .bg-level {
  flex-grow: 1;
  padding: 15px;
  display: grid;
}
.jj .kpibox > .bg-level > div {
  border-radius: 3px;
  margin-bottom: 20px;
  color: #fff;
  padding: 15px;
  overflow: hidden;
  position: relative;
  white-space: none;
  opacity: 1;
  color: rgba(255, 255, 255, 0.8);
}
.jj .kpibox > .bg-level > div:hover {
  opacity: 0.9;
  color: #ffffff;
}
.jj .kpibox > .bg-level > div.btn {
  white-space: normal;
  display: block;
}
.jj .kpibox > .bg-level > div.disable {
  background-color: rgba(38, 50, 56, 0.1) !important;
  cursor: no-drop;
}
.jj .kpibox > .bg-level > div.disable:hover {
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.8);
}
.jj .kpibox > .bg-level > div .stats-info h4 {
  font-size: 12px;
  margin: 5px 0;
  color: #fff;
}
.jj .kpibox > .bg-level > div .stats-info p {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 0;
}
.jj .kpibox > .bg-level > div .stats-icon {
  font-size: 42px;
  height: 56px;
  width: 56px;
  text-align: center;
  line-height: 56px;
  margin-left: 15px;
  color: #fff;
  position: absolute;
  right: 15px;
  top: 15px;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.jj .kpibox > .bg-level > div .stats-link a {
  display: block;
  margin: 15px -15px -15px;
  padding: 7px 15px;
  background: url(../img/transparent/black-0.4.png);
  background: rgba(0, 0, 0, 0.4);
  text-align: right;
  color: #ddd;
  font-weight: 300;
  text-decoration: none;
}
.jj .kpibox > .bg-level > div .stats-link a:focus {
  background: url(../img/transparent/black-0.6.png);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.jj .kpibox > .bg-level > div .stats-link a:hover {
  background: url(../img/transparent/black-0.6.png);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.jj .kpibox > .bg-level > div .stats-icon.stats-icon-lg {
  font-size: 52px;
  top: 12px;
  right: 21px;
}
.jj .kpibox > .bg-level > div .stats-title {
  position: relative;
  line-height: 1.1;
  font-size: 18px;
  margin: 2px 0 7px;
  color: #fff;
}
.jj .kpibox > .bg-level > div .stats-desc {
  color: #fff;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  margin-bottom: 0;
}
.jj .kpibox > .bg-level > div .stats-number {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 10px;
}
.jj .kpibox > .bg-level > div .stats-progress {
  background: url(../img/transparent/black-0.2.png);
  background: rgba(0, 0, 0, 0.2);
  height: 2px;
  margin: 0 -15px 12px;
}
.jj .kpibox > .bg-level > div .stats-progress .progress-bar {
  background: #fff;
}
.jj .kpibox.kpibox-5 > .bg-level > div.bg-level-1 {
  background-color: #279566 !important;
}
.jj .kpibox.kpibox-5 > .bg-level > div.bg-level-2 {
  background-color: #d6494b !important;
}
.jj .kpibox.kpibox-5 > .bg-level > div.bg-level-3 {
  background-color: #3583ca !important;
}
.jj .kpibox.kpibox-5 > .bg-level > div.bg-level-4 {
  background-color: #20a8d8 !important;
}
.jj .kpibox.kpibox-5 > .bg-level > div.bg-level-5 {
  background-color: #e98f2e !important;
}
.jj .kpibox.kpibox-4 > .bg-level > div.bg-level-1 {
  background-color: #279566 !important;
}
.jj .kpibox.kpibox-4 > .bg-level > div.bg-level-2 {
  background-color: #d6494b !important;
}
.jj .kpibox.kpibox-4 > .bg-level > div.bg-level-3 {
  background-color: #3583ca !important;
}
.jj .kpibox.kpibox-4 > .bg-level > div.bg-level-4 {
  background-color: #e98f2e !important;
}
.jj .kpibox.kpibox-3 > .bg-level > div.bg-level-1 {
  background-color: #279566 !important;
}
.jj .kpibox.kpibox-3 > .bg-level > div.bg-level-2 {
  background-color: #3583ca !important;
}
.jj .kpibox.kpibox-3 > .bg-level > div.bg-level-3 {
  background-color: #e98f2e !important;
}
.jj .kpi-ibox {
  background-color: #3bafda;
  color: white;
  -webkit-print-color-adjust: exact;
}
.jj .kpi-ibox .j-head {
  float: left;
  display: inline-block;
  width: 30%;
  padding: 15px;
  padding-top: 30px;
  text-align: center;
}
.jj .kpi-ibox .j-container {
  background-color: #66c1e2;
  padding: 15px;
  display: inline-block;
  width: 70%;
}
.jj .kpi-ibox.-primary {
  background-color: #3bafda;
}
.jj .kpi-ibox.-primary .j-container {
  background-color: #66c1e2;
}
.jj .kpi-ibox.-success {
  background-color: #1abc9c;
}
.jj .kpi-ibox.-success .j-container {
  background-color: #28e1bd;
}
.jj .kpi-ibox.-info {
  background-color: #37cde6;
}
.jj .kpi-ibox.-info .j-container {
  background-color: #64d8ec;
}
.jj .kpi-ibox.-warning {
  background-color: #f7b84b;
}
.jj .kpi-ibox.-warning .j-container {
  background-color: #f9cb7c;
}
.jj .kpi-ibox.-danger {
  background-color: #f1556c;
}
.jj .kpi-ibox.-danger .j-container {
  background-color: #f58495;
}
.jj .kpi-ibox.-link {
  color: #333;
  background-color: #f1f5f7;
}
.jj .kpi-ibox.-link .j-container {
  background-color: #ffffff;
}
.jj .jj-lock {
  pointer-events: none;
  opacity: 0.9;
}
.jj .jj-lock::before {
  display: inline-block;
  color: #fff;
  content: "\F110";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: 1s linear 0s infinite normal none running fa-spin;
}
.jj .j-simple-view .j-simple-view-item {
  visibility: hidden;
}
.jj .j-simple-view:hover .j-simple-view-item {
  visibility: visible;
}
.jj .j-object * {
  user-select: none;
  pointer-events: none;
}

/* ==JJCssElement.720.class End ================ */




/* ==JJCustomToggle.720.class Start ================ */
/* ==JJCustomToggle.720.class================ */
.jj input.custom-toggle[type='checkbox'] {
  --size: 1.5rem;
  --width: 1.7rem;
  --height: 1rem;
  position: relative;
  margin-left: var(--size);
  width: 0px;
  height: 0px;
  border: none;
}
.jj input.custom-toggle[type='checkbox']:before {
  position: absolute;
  display: block;
  top: -0.15rem;
  left: calc(var(--size) * -1);
  width: var(--width);
  height: var(--height);
  pointer-events: none;
  content: '';
  background-color: #fff;
  border: #adb5bd solid 1px;
  pointer-events: all;
  border-radius: 0.5rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.jj input.custom-toggle[type='checkbox']:after {
  position: absolute;
  display: block;
  top: 0rem;
  width: calc(var(--height) - 4px);
  height: calc(var(--height) - 4px);
  left: calc(var(--size) * -1 + 2px);
  content: '';
  background: no-repeat 1% 50%;
  background-color: #adb5bd;
  border-radius: 0.5rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.jj input.custom-toggle[type='checkbox']:checked:before {
  color: #3bafda;
  border-color: #3bafda;
  background-color: #3bafda;
}
.jj input.custom-toggle[type='checkbox']:checked:after {
  background-color: #fff;
  -webkit-transform: translateX(calc(var(--size) / 2));
  transform: translateX(calc(var(--size) / 2));
}
.jj .jj-toggle-box {
  display: inline-block;
}
.jj .jj-toggle-box > .list-group {
  display: flex;
  display: none;
  width: 340px;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0.5rem;
  border: 1px solid #ccc;
  background-color: white;
  z-index: 1001;
}
.jj .jj-toggle-box > .list-group a {
  width: 30%;
  margin: 5px;
}
.jj .jj-toggle-box > .list-group a i {
  font-size: 2rem;
  display: block;
  text-align: center;
  height: 40px;
}
.jj .jj-toggle-box > .list-group a t {
  display: block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj .jj-toggle-box > .list-group.show {
  position: absolute;
  display: flex;
}
.jj .jj-toggle-box .toggle-right + .show {
  right: 0;
}

/* ==JJCustomToggle.720.class End ================ */




/* ==JJTimeline.720.class Start ================ */
/* ==JJTimeline.720.class================ */
.jj {
  /* ------------------------------------------------------------------------
jj-timeline
------------------------------------------------------------------------ */
}
.jj .jj-timeline .timeline {
  position: relative;
  padding: 0;
  margin-bottom: 22px;
  list-style: none;
  background: 0 0;
}
.jj .jj-timeline .timeline:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  content: "";
  background-color: #e4eaec;
}
.jj .jj-timeline .timeline:after {
  display: table;
  content: "";
}
.jj .jj-timeline .timeline:after {
  clear: both;
}
.jj .jj-timeline .timeline > li {
  position: relative;
  display: block;
  float: left;
  width: 50%;
  padding-right: 40px;
  margin-bottom: 60px;
}
.jj .jj-timeline .timeline > li:not(.timeline-period):after,
.jj .jj-timeline .timeline > li:not(.timeline-period):before {
  content: " ";
}
.jj .jj-timeline .timeline > li:not(.timeline-period):after {
  clear: both;
}
.jj .jj-timeline .timeline > li.timeline-period {
  position: relative;
  z-index: 6;
  display: block;
  float: none;
  width: 200px;
  padding: 25px 10px;
  margin: 20px auto 30px;
  clear: both;
  font-size: 26px;
  text-align: center;
  text-transform: uppercase;
  background: #f1f4f5;
}
.jj .jj-timeline .timeline > li.timeline-period ~ .timeline-item {
  display: none;
  overflow: visible;
}
.jj .jj-timeline .timeline > li.timeline-period ~ .timeline-item ~ .timeline-period.on ~ * {
  display: block;
}
.jj .jj-timeline .timeline > li.timeline-period.on ~ .timeline-item {
  display: block;
}
.jj .jj-timeline .timeline > li.timeline-period.on ~ .timeline-item ~ .timeline-period:not(.on) ~ * {
  display: none;
}
.jj .jj-timeline .timeline > li.timeline-reverse {
  float: right;
  padding-right: 0;
  padding-left: 40px;
}
.jj .jj-timeline .timeline > li:last-child {
  margin-bottom: 0;
}
.jj .jj-timeline .timeline:not(.timeline-single) > li.timeline-period + .timeline-item + .timeline-item,
.jj .jj-timeline .timeline:not(.timeline-single) > li:not(.timeline-period):first-child + .timeline-item {
  margin-top: 90px;
}
.jj .jj-timeline .timeline-content {
  float: left;
  width: 100%;
  overflow: hidden;
  clear: left;
}
.jj .jj-timeline .timeline-reverse .timeline-content {
  float: right;
  clear: right;
}
.jj .jj-timeline .timeline-content > .widget {
  margin: 0;
}
.jj .jj-timeline .timeline-dot {
  position: absolute;
  right: 0;
  z-index: 11;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background-color: #62a8ea;
  border-radius: 50%;
  top: 7.5px;
}
.jj .jj-timeline .timeline-reverse .timeline-dot {
  right: auto;
  left: 0;
  margin-right: 0;
}
.jj .jj-timeline .timeline .timeline-dot {
  width: 14px;
  height: 14px;
  margin-right: -7px;
  line-height: 14px;
}
.jj .jj-timeline .timeline .timeline-reverse .timeline-dot {
  margin-left: -7px;
}
.jj .jj-timeline .timeline.timeline-single {
  margin-left: 7px;
}
.jj .jj-timeline .timeline.timeline-single .timeline-dot {
  margin-left: -7px;
}
@media screen and (max-width: 767px) {
  .jj .jj-timeline .timeline {
    margin-left: 7px;
  }
  .jj .jj-timeline .timeline .timeline-dot {
    margin-left: -7px;
  }
}
.jj .jj-timeline .timeline-info {
  float: right;
  padding: 0 20px;
  margin-bottom: 22px;
  line-height: 28px;
  text-align: center;
  background: #e4eaec;
  border: 1px solid #e4eaec;
  border-radius: 20px;
}
.jj .jj-timeline .timeline-reverse .timeline-info {
  float: left;
}
.jj .jj-timeline .timeline-footer {
  position: absolute;
  right: 0;
  bottom: -30px;
  margin-right: 55px;
}
.jj .jj-timeline .timeline-footer .icon {
  margin-right: 0.3em;
}
.jj .jj-timeline .timeline-reverse .timeline-footer {
  right: auto;
  left: 0;
  margin-right: 0;
  margin-left: 55px;
}
.jj .jj-timeline .timeline-reverse + .timeline-reverse {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .jj .jj-timeline .timeline:before {
    left: 0;
  }
  .jj .jj-timeline .timeline li.timeline-reverse,
  .jj .jj-timeline .timeline > li {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-left: 40px;
    margin-top: 0;
    margin-bottom: 60px;
  }
  .jj .jj-timeline .timeline-content {
    float: none;
  }
  .jj .jj-timeline .timeline-dot {
    right: auto;
    left: 0;
    margin-right: 0;
    margin-left: -7px;
  }
  .jj .jj-timeline .timeline-info {
    display: inline-block;
    float: none;
  }
  .jj .jj-timeline .timeline-footer {
    right: auto;
    bottom: -26px;
    left: 0;
    margin-right: 0;
    margin-left: 40px;
  }
}
.jj .jj-timeline .timeline-single:before {
  left: 0;
}
.jj .jj-timeline .timeline-single > li {
  float: none;
  width: 100%;
  padding-right: 0;
  padding-left: 40px;
  margin-bottom: 60px;
}
.jj .jj-timeline .timeline-single .timeline-content {
  float: none;
}
.jj .jj-timeline .timeline-single .timeline-dot {
  right: auto;
  left: 0;
  margin-right: 0;
  margin-left: -7px;
}
.jj .jj-timeline .timeline-single .timeline-info {
  float: left;
}
.jj .jj-timeline .timeline-single .timeline-footer {
  right: auto;
  bottom: -26px;
  left: 0;
  margin-right: 0;
  margin-left: 40px;
}
.jj .jj-timeline .timeline-icon .timeline-dot {
  width: 40px;
  height: 40px;
  margin-right: -20px;
  line-height: 40px;
}
.jj .jj-timeline .timeline-icon .timeline-reverse .timeline-dot {
  margin-left: -20px;
}
.jj .jj-timeline .timeline-icon.timeline-single {
  margin-left: 20px;
}
.jj .jj-timeline .timeline-icon.timeline-single .timeline-dot {
  margin-left: -20px;
}
@media screen and (max-width: 767px) {
  .jj .jj-timeline .timeline-icon {
    margin-left: 20px;
  }
  .jj .jj-timeline .timeline-icon .timeline-dot {
    margin-left: -20px;
  }
}
.jj .jj-timeline .timeline-icon .timeline-dot {
  top: -5.5px;
}
.jj .jj-timeline .timeline-avatar .timeline-dot {
  width: 40px;
  height: 40px;
  margin-right: -20px;
  line-height: 40px;
}
.jj .jj-timeline .timeline-avatar .timeline-reverse .timeline-dot {
  margin-left: -20px;
}
.jj .jj-timeline .timeline-avatar.timeline-single {
  margin-left: 20px;
}
.jj .jj-timeline .timeline-avatar.timeline-single .timeline-dot {
  margin-left: -20px;
}
@media screen and (max-width: 767px) {
  .jj .jj-timeline .timeline-avatar {
    margin-left: 20px;
  }
  .jj .jj-timeline .timeline-avatar .timeline-dot {
    margin-left: -20px;
  }
}
.jj .jj-timeline .timeline-avatar-sm .timeline-dot {
  width: 30px;
  height: 30px;
  margin-right: -15px;
  line-height: 30px;
}
.jj .jj-timeline .timeline-avatar-sm .timeline-reverse .timeline-dot {
  margin-left: -15px;
}
.jj .jj-timeline .timeline-avatar-sm.timeline-single {
  margin-left: 15px;
}
.jj .jj-timeline .timeline-avatar-sm.timeline-single .timeline-dot {
  margin-left: -15px;
}
@media screen and (max-width: 767px) {
  .jj .jj-timeline .timeline-avatar-sm {
    margin-left: 15px;
  }
  .jj .jj-timeline .timeline-avatar-sm .timeline-dot {
    margin-left: -15px;
  }
}
.jj .jj-timeline .timeline-avatar-lg .timeline-dot {
  width: 50px;
  height: 50px;
  margin-right: -25px;
  line-height: 50px;
}
.jj .jj-timeline .timeline-avatar-lg .timeline-reverse .timeline-dot {
  margin-left: -25px;
}
.jj .jj-timeline .timeline-avatar-lg.timeline-single {
  margin-left: 25px;
}
.jj .jj-timeline .timeline-avatar-lg.timeline-single .timeline-dot {
  margin-left: -25px;
}
@media screen and (max-width: 767px) {
  .jj .jj-timeline .timeline-avatar-lg {
    margin-left: 25px;
  }
  .jj .jj-timeline .timeline-avatar-lg .timeline-dot {
    margin-left: -25px;
  }
}
.jj .jj-timeline .timeline-simple .timeline-dot {
  top: 0;
  margin-top: 10px;
}
.jj .jj-timeline .timeline-feed .timeline-dot {
  width: 30px;
  height: 30px;
  margin-right: -15px;
  line-height: 30px;
}
.jj .jj-timeline .timeline-feed .timeline-reverse .timeline-dot {
  margin-left: -15px;
}
.jj .jj-timeline .timeline-feed.timeline-single {
  margin-left: 15px;
}
.jj .jj-timeline .timeline-feed.timeline-single .timeline-dot {
  margin-left: -15px;
}
@media screen and (max-width: 767px) {
  .jj .jj-timeline .timeline-feed {
    margin-left: 15px;
  }
  .jj .jj-timeline .timeline-feed .timeline-dot {
    margin-left: -15px;
  }
}
.jj .jj-timeline .timeline-feed.timeline-simple .timeline-dot {
  margin-top: 5px;
}
.jj .jj-timeline .timeline-feed > li {
  padding-right: 30px;
  margin-bottom: 22px;
}
.jj .jj-timeline .timeline-feed > li.timeline-reverse {
  padding-left: 30px;
}
.jj .jj-timeline .timeline-feed.timeline-single > li {
  padding-left: 30px;
}
@media screen and (max-width: 767px) {
  .jj .jj-timeline .timeline-feed > li {
    padding-right: 30px;
    margin-bottom: 22px;
  }
}
.jj .jj-timeline .cover {
  overflow: hidden;
}
.jj .jj-timeline .cover-background {
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
}
.jj .jj-timeline .cover-image {
  width: 100%;
}
.jj .jj-timeline .cover-quote {
  position: relative;
  margin-bottom: 0;
  padding-left: 35px;
  border-left: none;
}
.jj .jj-timeline .cover-quote:after,
.jj .jj-timeline .cover-quote:before {
  position: absolute;
  top: -20px;
  font-size: 4em;
}
.jj .jj-timeline .cover-quote:before {
  left: 0;
  content: open-quote;
}
.jj .jj-timeline .cover-quote:after {
  right: 0;
  content: close-quote;
  visibility: hidden;
}
.jj .jj-timeline .cover-quote.blockquote-reverse {
  padding-right: 35px;
  padding-left: 20px;
  border-right: none;
}
.jj .jj-timeline .cover-quote.blockquote-reverse:before {
  right: 0;
  left: auto;
  content: close-quote;
}
.jj .jj-timeline .cover-gallery .carousel-inner img {
  width: 100%;
}
.jj .jj-timeline .cover-iframe {
  width: 100%;
  border: 0 none;
}
.jj .jj-timeline .overlay {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.jj .jj-timeline .overlay .overlay-figure,
.jj .jj-timeline .overlay > :first-child {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}
.jj .jj-timeline .overlay-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  color: #fff;
}
.jj .jj-timeline .overlay-panel a:not([class]) {
  color: inherit;
  text-decoration: underline;
}
.jj .jj-timeline .overlay-panel > :last-child {
  margin-bottom: 0;
}
.jj .jj-timeline .overlay-panel h1,
.jj .jj-timeline .overlay-panel h2,
.jj .jj-timeline .overlay-panel h3,
.jj .jj-timeline .overlay-panel h4,
.jj .jj-timeline .overlay-panel h5,
.jj .jj-timeline .overlay-panel h6 {
  color: inherit;
}
.jj .jj-timeline .overlay-hover:not(:hover) .overlay-panel:not(.overlay-background-fixed) {
  opacity: 0;
}
.jj .jj-timeline .overlay-background {
  background: rgba(0, 0, 0, 0.5);
}
.jj .jj-timeline .overlay-image {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.jj .jj-timeline .overlay-shade {
  background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(90%, rgba(255, 255, 255, 0.87)), to(#fff)) repeat scroll 0 0;
  background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.87) 90%, #fff 100%) repeat scroll 0 0;
  background: rgba(0, 0, 0, 0) -o-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.87) 90%, #fff 100%) repeat scroll 0 0;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.87) 90%, #fff 100%) repeat scroll 0 0;
}
.jj .jj-timeline .overlay-top {
  bottom: auto;
}
.jj .jj-timeline .overlay-bottom {
  top: auto;
}
.jj .jj-timeline .overlay-left {
  right: auto;
}
.jj .jj-timeline .overlay-right {
  left: auto;
}
.jj .jj-timeline .overlay-icon {
  font-size: 0;
  text-align: center;
}
.jj .jj-timeline .overlay-icon:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: "";
}
.jj .jj-timeline .overlay-icon .icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 32px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}
.jj .jj-timeline .overlay-anchor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.jj .jj-timeline .overlay-blur,
.jj .jj-timeline .overlay-fade,
.jj .jj-timeline .overlay-grayscale,
.jj .jj-timeline .overlay-scale,
.jj .jj-timeline .overlay-spin,
.jj .jj-timeline [class*=overlay-slide] {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity -webkit-transform -webkit-filter, opacity -webkit-transform filter;
  -o-transition-property: opacity -o-transform filter;
  transition-property: opacity transform filter;
}
.jj .jj-timeline .overlay-fade {
  opacity: 0.7;
}
.jj .jj-timeline .overlay-hover:hover .overlay-fade {
  opacity: 1;
}
.jj .jj-timeline .overlay-scale {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.jj .jj-timeline .overlay-hover:hover .overlay-scale {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.jj .jj-timeline .overlay-spin {
  -webkit-transform: scale(1) rotate(0);
  -ms-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}
.jj .jj-timeline .overlay-hover:hover .overlay-spin {
  -webkit-transform: scale(1.1) rotate(3deg);
  -ms-transform: scale(1.1) rotate(3deg);
  -o-transform: scale(1.1) rotate(3deg);
  transform: scale(1.1) rotate(3deg);
}
.jj .jj-timeline .overlay-grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.jj .jj-timeline .overlay-hover:hover .overlay-grayscale {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}
.jj .jj-timeline [class*=overlay-slide] {
  opacity: 0;
}
.jj .jj-timeline .overlay-slide-top {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.jj .jj-timeline .overlay-slide-bottom {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.jj .jj-timeline .overlay-slide-left {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.jj .jj-timeline .overlay-slide-right {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.jj .jj-timeline .overlay-hover:hover [class*=overlay-slide] {
  opacity: 1;
  -webkit-transform: translateX(0) translateY(0);
  -ms-transform: translateX(0) translateY(0);
  -o-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
}
.jj .jj-timeline.one-column {
  padding-left: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.jj .jj-timeline.one-column .timeline:before {
  left: 0;
  background-color: #039cfd;
}
.jj .jj-timeline.one-column .timeline > .timeline-item {
  position: relative;
  display: block;
  padding-left: 10px;
  margin-bottom: 20px;
  margin-top: 0px! important;
  margin-left: 1px;
  width: 100%;
  font-size: 13px;
}
.jj .jj-timeline.one-column .timeline > .timeline-item:after {
  background-color: #ffffff;
  border-color: #039cfd;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  bottom: 0;
  content: '';
  height: 10px;
  left: 0;
  margin-left: -6px;
  position: absolute;
  top: 5px;
  width: 10px;
}
@media (min-width: 768px) {
  .jj .jj-timeline .timeline-icon i {
    left: 2.5px;
    top: 1px;
    font-size: 17px;
    color: #eee;
  }
}

/* ==JJTimeline.720.class End ================ */




/* ==JJIconBox.720.class Start ================ */
/* ==JJIconBox.720.class================ */
.jj .jj-icon-box {
  display: flex;
  flex-flow: row wrap;
}
.jj .jj-icon-box > * {
  width: 33%;
  margin: 0.1%;
  border-radius: 0.25rem;
}
.jj .jj-icon-box > * i {
  font-size: 2rem;
  display: block;
  text-align: center;
}
.jj .jj-icon-box > * t {
  display: block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 1rem;
}
.jj .jj-icon-box.size-sm > * i {
  font-size: 1rem;
}
.jj .jj-icon-box.size-lg > * i {
  font-size: 4rem;
}

/* ==JJIconBox.720.class End ================ */




/* ==JJLineScroll.720.class Start ================ */
/* ==JJLineScroll.720.class================ */
.jj .jj-inline {
  overflow-x: scroll;
}
.jj .jj-inline > * {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}
.jj .jj-inline > * > * {
  flex: 0 0 100px;
  height: 100px;
  margin-right: 10px;
  background-color: skyblue;
  opacity: 0.6;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
}
.jj .jj-inline > * > *:first-child {
  margin-left: 10px;
}
.jj .jj-inline > * > *:last-child {
  margin-right: 10px;
}
.jj .box-inline {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.jj .box-inline .box {
  flex: 0 0 auto;
  padding: 20px;
  color: white;
  background-color: crimson;
  border: 1px solid white;
  min-width: 200px;
}
.jj .box-inline .box.active {
  width: 100%;
  transition: all 0.6s ease;
  flex: none;
}

/* ==JJLineScroll.720.class End ================ */




/* ==JJLayout.720.class Start ================ */
/* ==JJLayout.720.class================ */
.jj {
  /**
* 고정2열용
*/
  /**
* 공통툴바 적용
*/
}
.jj .j-row {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.jj .j-row > *:first-child {
  flex: none;
  position: relative;
}
.jj .j-row > *:last-child {
  flex-grow: 1;
  overflow: hidden;
}
.jj .j-row .resizer {
  border-right: -5px solid #b3b3b3;
}
.jj .j-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.jj .j-col > *:first-child {
  flex-grow: 0;
  position: relative;
}
.jj .j-col > * {
  flex-grow: 1;
  overflow: hidden;
}
.jj .j-col > .--grow-0 {
  flex-grow: 0!important;
  flex: none!important;
}
.jj .j-col > .--grow-1 {
  flex-grow: 1!important;
}
.jj .j-col > .--auto {
  flex-grow: 1;
  overflow: auto;
}
.jj .j-grow-0 {
  flex: none!important;
  flex-grow: 0!important;
}
.jj .j-grow-1 {
  flex-grow: 1!important;
  overflow: hidden!important;
}
.jj .j-side {
  width: 240px;
}
.jj .j2-grid .flex-grow-0 {
  flex: none;
  padding: 5px;
}
.jj .j2-grid .flex-grow-1 {
  overflow: hidden;
  padding: 5px;
}
@media (max-width: 767.98px) {
  .jj .j2-grid {
    flex-direction: column;
  }
  .jj .j2-grid .flex-grow-0 {
    flex: inherit!important;
    width: 100%!important;
    padding-right: 0;
    padding-left: 0;
  }
  .jj .j2-grid .flex-grow-1 {
    width: 100%!important;
    padding-right: 0;
    padding-left: 0;
  }
  .jj .j-grid div[class*='col-']:first-child {
    padding-right: 0;
  }
  .jj .j-grid div[class*='col-']:last-child {
    padding-left: 0;
  }
  .jj .j-grid .col-md-4 {
    padding-right: 0;
    padding-left: 0;
  }
}
.jj .j-toolbar {
  display: flex;
  background-color: #f1f5f7;
}
.jj .j-toolbar > .btn-group {
  border-right: 1px solid #ccc;
}
.jj .j-toolbar > .btn-group:last-child {
  border-right: 0px solid #ccc;
}
.jj .j-toolbar > .btn-group t {
  font-size: 12px;
  margin-left: 5px;
}
.jj .j-toolbar > .btn-group.right {
  margin-left: auto;
}
.jj .h1,
.jj .h2,
.jj .h3,
.jj .h4,
.jj .h5,
.jj .h6,
.jj h1,
.jj h2,
.jj h3,
.jj h4,
.jj h5,
.jj h6 {
  font-family: inherit;
  font-weight: 500;
  font-weight: bolder;
}
.jj .j-center {
  position: absolute;
  display: inline-block;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.jj .j-box-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.jj .btn.-block {
  display: block;
  width: 100%;
}
.jj .btn.-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.jj .btn-group {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
.jj .btn-group.-block {
  display: flex;
  width: 100%;
}
.jj .btn-group.-block > .btn {
  flex-grow: 1;
}
.jj [j-title]::before {
  display: none;
  position: absolute;
  background-color: var(--secondary);
  color: var(--white);
  content: attr(j-title);
  top: 40px;
  right: 0;
  z-index: 2;
  padding: 3px 10px;
  width: max-content;
  border-radius: 10px 0;
  pointer-events: none;
}
.jj [j-title]:hover::before,
.jj [j-title].hover::before {
  display: block;
}

/* ==JJLayout.720.class End ================ */




/* ==JJSearchLabel.720.class Start ================ */
/* ==JJSearchLabel.720.class================ */
.jj .jj-search-label {
  position: relative;
  width: 100%;
}
.jj .jj-search-label::before {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: 1;
  font-family: FontAwesome;
  font-size: 1rem;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\F002";
}
.jj .jj-search-label input {
  padding-left: 35px;
}
.jj .jj-search-label.filter:before {
  content: "\F0B0";
}
.jj .jj-search-label.user:before {
  content: "\F007";
}
.jj .jj-search-label.search:before {
  top: 16px;
  left: 2rem;
  font-size: 1.2rem;
  content: "\f002";
}
.jj .jj-search-label.search input {
  height: 44px;
  padding-left: 45px;
  padding-right: 22px;
  display: block;
  width: 100%;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: black;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 4rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.jj .jj-search-label.search input:focus {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

/* ==JJSearchLabel.720.class End ================ */




/* ==JJMenuIcon.720.class Start ================ */
/* ==JJMenuIcon.720.class================ */
.jj .jj-top-menu-icon {
  position: relative;
  display: none;
  cursor: pointer;
  float: left;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  margin-top: 10px;
}
.jj .jj-top-menu-icon .bar1,
.jj .jj-top-menu-icon .bar2,
.jj .jj-top-menu-icon .bar3 {
  width: 24px;
  height: 3px;
  background-color: var(--secondary);
  margin: 5px 0;
  transition: 0.4s;
  display: block;
  pointer-events: none;
}
.jj .jj-top-menu-icon.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 3px);
  transform: rotate(-45deg) translate(-8px, 3px);
}
.jj .jj-top-menu-icon.change .bar2 {
  opacity: 0;
}
.jj .jj-top-menu-icon.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -4px);
  transform: rotate(45deg) translate(-8px, -4px);
}
@media (max-width: 767px) {
  .jj .jj-top-menu-icon {
    display: block !important;
  }
}
.jj .jj-top-menu-arrow-right {
  position: relative;
  display: block !important;
  cursor: pointer;
  float: left;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  margin-top: 10px;
  margin-left: 10px;
}
.jj .jj-top-menu-arrow-right .bar1,
.jj .jj-top-menu-arrow-right .bar2,
.jj .jj-top-menu-arrow-right .bar3 {
  width: 24px;
  height: 3px;
  background-color: var(--secondary);
  background-color: black;
  margin: 5px 0;
  transition: 0.2s;
  display: block;
  pointer-events: none;
}
.jj .jj-top-menu-arrow-right [type='checkbox'] {
  display: none;
}
.jj .jj-top-menu-arrow-right [type='checkbox']:checked ~ .bar1 {
  -webkit-transform: rotate(-45deg) translate(-2px, -2px);
  transform: rotate(-45deg) translate(-2px, -2px);
}
.jj .jj-top-menu-arrow-right [type='checkbox']:checked ~ .bar3 {
  -webkit-transform: rotate(45deg) translate(-2px, 2px);
  transform: rotate(45deg) translate(-2px, 2px);
}
.jj .jj-top-menu-arrow-left {
  position: relative;
  display: block !important;
  cursor: pointer;
  float: left;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  margin-top: 10px;
  margin-left: 10px;
}
.jj .jj-top-menu-arrow-left .bar1,
.jj .jj-top-menu-arrow-left .bar2,
.jj .jj-top-menu-arrow-left .bar3 {
  width: 24px;
  height: 3px;
  background-color: var(--secondary);
  background-color: black;
  margin: 5px 0;
  transition: 0.2s;
  display: block;
  pointer-events: none;
}
.jj .jj-top-menu-arrow-left [type='checkbox'] {
  display: none;
}
.jj .jj-top-menu-arrow-left [type='checkbox']:checked ~ .bar1 {
  -webkit-transform: rotate(45deg) translate(2px, -2px);
  transform: rotate(45deg) translate(2px, -2px);
}
.jj .jj-top-menu-arrow-left [type='checkbox']:checked ~ .bar3 {
  -webkit-transform: rotate(-45deg) translate(2px, 2px);
  transform: rotate(-45deg) translate(2px, 2px);
}
.jj .jj-top-menu-icon-check {
  position: relative;
  display: block;
  cursor: pointer;
  float: left;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  margin-top: 10px;
  margin-left: 10px;
}
.jj .jj-top-menu-icon-check .bar1,
.jj .jj-top-menu-icon-check .bar2,
.jj .jj-top-menu-icon-check .bar3 {
  width: 24px;
  height: 3px;
  background-color: var(--secondary);
  background-color: black;
  margin: 5px 0;
  transition: 0.2s;
  display: block;
  pointer-events: none;
}
.jj .jj-top-menu-icon-check [type='checkbox'] {
  display: none;
}
.jj .jj-top-menu-icon-check [type='checkbox']:checked ~ .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 3px);
  transform: rotate(-45deg) translate(-8px, 3px);
}
.jj .jj-top-menu-icon-check [type='checkbox']:checked ~ .bar2 {
  opacity: 0;
}
.jj .jj-top-menu-icon-check [type='checkbox']:checked ~ .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -4px);
  transform: rotate(45deg) translate(-8px, -4px);
}

/* ==JJMenuIcon.720.class End ================ */




/* ==JJCard.720.class Start ================ */
/* ==JJCard.720.class================ */
.jj .jj-card.type1 {
  border: 3px solid red!important;
}
.jj .card.arr-right::after {
  position: absolute;
  font-family: "FontAwesome";
  content: "\F054";
  color: var(--dark);
  top: 50%;
  right: -3rem;
  font-size: 2rem;
}
.jj .card.arr-left::after {
  position: absolute;
  font-family: "FontAwesome";
  content: "\F053";
  color: var(--dark);
  top: 50%;
  left: -3rem;
  font-size: 2rem;
}
.jj .card.arr-down::before {
  position: absolute;
  font-family: "FontAwesome";
  content: "\F078";
  color: var(--dark);
  bottom: -4rem;
  left: 45%;
  font-size: 2rem;
}
.jj .card.arr-top::before {
  position: absolute;
  font-family: "FontAwesome";
  content: "\F077";
  color: var(--dark);
  top: -4rem;
  left: 45%;
  font-size: 2rem;
}
.jj .card img {
  width: 100%;
}
.jj .card.-abs .card-body {
  position: absolute;
  top: 0;
}
.jj .card.-dark {
  color: white;
}
.jj .card.-dark h1,
.jj .card.-dark h2,
.jj .card.-dark h3,
.jj .card.-dark h4,
.jj .card.-dark h5,
.jj .card.-dark h6 {
  color: white;
}
.jj .card.-r10 {
  border-radius: 20px;
  overflow: hidden;
}
.jj .card.-over {
  box-shadow: 2px 4px 12px #00000014;
  transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
  white-space: normal;
}
.jj .card.-over:hover {
  box-shadow: 2px 4px 16px #00000029;
  transform: scale3d(1.01, 1.01, 1.01);
}
.jj .card.type1 > img {
  height: 500px;
}
.jj .card.type2 > img {
  height: 350px;
}

/* ==JJCard.720.class End ================ */




/* ==JJTable.720.class Start ================ */
/* ==JJTable.720.class================ */
.jj .data-grid-warp {
  overflow: auto;
}
.jj table.grid560 {
  margin-bottom: 10px;
  position: relative;
}
.jj table.grid560.fixed {
  table-layout: fixed;
}
.jj table.grid560.fixed th,
.jj table.grid560.fixed td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj table.grid560 table,
.jj table.grid560 th,
.jj table.grid560 td {
  border: 1px solid #BDBDBD;
  border-collapse: collapse;
}
.jj table.grid560 thead {
  background-color: #e1eaf8;
  background-image: liner-gradient(top, #f4f7fd 0%, #ebf2fc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f7fd), color-stop(100%, #ebf2fc));
  background-image: -ms-linear-gradient(top, #f4f7fd 0%, #ebf2fc 100%);
  background-image: -moz-linear-gradient(top, #f4f7fd 0%, #ebf2fc 100%);
}
.jj table.grid560 thead tr th {
  cursor: pointer;
  position: relative;
  text-align: center;
  border-bottom-width: 1px;
}
.jj table.grid560 thead tr th:after {
  position: absolute;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  width: 24px;
  text-align: center;
  right: 2px;
  content: "\f0dc";
  opacity: 0.2;
}
.jj table.grid560 thead tr th.asc:after {
  content: "\f160";
  opacity: 0.6;
}
.jj table.grid560 thead tr th.desc:after {
  content: "\f161";
  opacity: 0.6;
}
.jj table.grid560 thead tr th._select_ {
  width: 40px;
}
.jj table.grid560 thead tr th._rno_ {
  width: 40px;
}
.jj table.grid560 thead tr th._crud_ {
  width: 40px;
}
.jj table.grid560 tbody tr[_crud_="R"] {
  background-color: transparent;
}
.jj table.grid560 tbody tr[_crud_="U"] {
  background-color: #BCD8F1;
}
.jj table.grid560 tbody tr[_crud_="D"] {
  background-color: #FAB4B4;
}
.jj table.grid560 .sortBar {
  position: fixed;
  border-right: 5px solid transfer;
  z-index: 10;
  cursor: e-resize;
}
.jj table.grid560 .sortBar.show {
  border-right: 5px solid #FAFAFA;
}
.jj table.grid560 .sortBar.resize {
  border-right: 5px solid #BDBDBD;
}
.jj table.grid560 td {
  vertical-align: middle!important;
}
.jj table.grid560 td.left {
  text-align: left;
}
.jj table.grid560 td.right {
  text-align: right;
}
.jj table.grid560 td.center {
  text-align: center;
}
.jj table.grid560 td._select_ {
  text-align: center;
}
.jj table.grid560 td._select_:after {
  cursor: pointer;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 1.2em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  content: "\f096";
  opacity: 0.6;
}
.jj table.grid560 td._select_.selected::after,
.jj table.grid560 td._select_.true::after {
  content: "\f046";
}
.jj table.grid570 {
  color: #0E3979;
  max-width: none;
  border-collapse: collapse;
  text-align: center;
  border-top: 3px solid #307bbb;
}
.jj table.grid570 th,
.jj table.grid570 td {
  position: relative;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
}
.jj table.grid570 > thead {
  background-color: #e1eaf2;
  font-weight: bold;
}
.jj table.grid570 > thead > tr > th {
  border-color: #B2BAD2;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  font-weight: bold;
  color: #0E3979;
}
.jj table.grid570 > tbody {
  background-color: #FFFFFF;
}
.jj table.grid570 > tbody > tr > th {
  background-color: #e1eaf2;
  border: 1px solid #B2BAD2;
}
.jj table.grid570 > tbody > tr > td {
  padding: 3px;
  border: 0;
  font-size: 100%;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
  overflow: hidden;
  word-wrap: normal;
  word-break: break-all;
  border-collapse: collapse;
}
.jj table.grid570 > tbody > tr > td.text-right {
  text-align: right;
}
.jj table.grid570 > tbody > tr > td.text-left {
  text-align: left;
}
.jj table.grid570 > tbody > tr:nth-of-type(2n) {
  background-color: #efefef;
}
.jj table.grid570 > tbody > tr[_crud_="R"] {
  background-color: white;
}
.jj table.grid570 > tbody > tr[_crud_="U"] {
  background-color: #BCD8F1;
}
.jj table.grid570 > tbody > tr[_crud_="D"] {
  background-color: #FAB4B4;
}
.jj table.grid570 > tbody > tr[editable="false"] td * {
  display: none;
}
.jj table.grid570 > tbody > tr[editable="true"] {
  background-color: inherit;
}
.jj table.grid570 td input {
  width: 100%;
  border: 0;
}
.jj table.grid570 td input[type="number"] {
  text-align: right;
}
.jj table.grid570 td .jj-hitem {
  margin-bottom: 0!important;
}
.jj table.grid570 td .jj-hitem .form-control {
  padding: 0 0.5rem;
  height: 1.5rem;
  border: 1px solid #ccc;
}
.jj table.grid570.fixed {
  table-layout: fixed;
}
.jj table.grid570.fixed th,
.jj table.grid570.fixed td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj table.nowarp td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ==JJTable.720.class End ================ */




/* ==webKitCheck.720.class Start ================ */
/* ==webKitCheck.720.class================ */
.jj input[type='checkbox'],
.jj input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
  margin-right: 4px;
}
.jj input[type='checkbox'] {
  border: 2px solid #555;
  width: 18px;
  height: 18px;
  outline: none;
  padding: 4px;
}
.jj input[type='checkbox']:checked {
  background: #555;
  background-clip: content-box;
}
.jj input[type='radio'] {
  border: 2px solid #555;
  border-radius: 10px;
  width: 18px;
  height: 18px;
  outline: none;
  padding: 4px;
  min-width: 18px;
}
.jj input[type='radio']:checked {
  background: #555;
  background-clip: content-box;
}
.jj input[type='range'] {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: #d3d3d3;
  opacity: 0.7;
}
.jj input[type='range']:hover {
  opacity: 1;
}
.jj input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}
.jj input[type='range']::-webkit-slider-thumb:before {
  content: '100';
}
.jj input[type='range']::-webkit-slider-thumb:after {
  content: '200';
}
.jj input[type='range']::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}
.jj input[type='range']::-moz-range-thumb:before {
  content: '100';
}
.jj input[type='range']::-moz-range-thumb:after {
  content: '200';
}

/* ==webKitCheck.720.class End ================ */




/* ==JJListLine.720.class Start ================ */
/* ==JJListLine.720.class================ */
.jj .jj-listline {
  list-style: none;
  padding: 1rem;
  margin: 0;
  display: flex;
}
.jj .jj-listline > * {
  flex-grow: 1;
  line-height: 2rem;
  display: list-item;
  position: relative;
}
.jj .jj-listline.-center {
  justify-content: center;
}
.jj .jj-listline.-center > * {
  flex-grow: 0;
  padding: 0rem 2rem;
}
.jj .jj-listline.-border > * {
  border-right: 0px solid #ccc;
}
.jj .jj-listline.-border > *:last-child {
  border-right: 0px;
}
.jj .jj-listline.-border > *:last-child:after {
  display: none;
}
.jj .jj-listline.-border > *:after {
  position: absolute;
  right: 0;
  content: "";
  border-right: 1px solid #ccc;
  width: 3px;
  height: 1.3rem;
  display: block;
  top: 0.3rem;
}
.jj .jj-listline.-icon {
  justify-content: center;
}
.jj .jj-listline.-icon > * {
  flex-grow: 0;
  margin-right: 1rem;
}
.jj .jj-listline.-icon > *:last-child {
  margin-right: 0;
}
.jj .jj-listline.-p-1 > * {
  padding: 0rem 0.7rem;
}
.jj .jj-listline .circle {
  height: 2rem;
  width: 2rem;
  display: block;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  color: #adb5bd;
  text-align: center;
  display: list-item;
  line-height: calc(2rem - 4px);
}
.jj .jj-listline button {
  color: #6c757d;
  background-color: transparent;
  border: 1px solid transparent;
}
.jj .jj-listline button:hover {
  outline: 2px solid var(--light);
  border-right: 1px solid transparent;
}
.jj .jj-listline button:focus {
  outline: 2px solid var(--dark);
  border-right: 1px solid transparent;
  border-radius: 5px;
}
.jj .jj-listline button .circle:focus {
  outline: initial;
  border-right: initial;
  border-radius: initial;
}

/* ==JJListLine.720.class End ================ */




/* ==JJWebSection.720.class Start ================ */
/* ==JJWebSection.720.class================ */
.jj .section-youtube {
  position: relative;
}
.jj .section-youtube .video-block {
  padding-bottom: 45%;
  overflow: hidden;
  margin-top: -40px;
}
.jj .section-youtube .video-block .video-background {
  height: 100%;
  width: 100%;
  z-index: 0;
  position: absolute;
  overflow: hidden;
  inset: 0px;
  /* pointer-events: none; */
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.jj .section-youtube .video-block iframe {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-48%);
  position: absolute;
  opacity: 1;
  width: 100%;
  height: 1070px;
}
.jj .section-youtube .overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
  .jj .section-youtube .video-block {
    padding-bottom: 60%;
  }
  .jj .section-youtube .video-block iframe {
    transform: translateX(-50%) translateY(-50%) !important;
  }
}

/* ==JJWebSection.720.class End ================ */




/* ==JJWebCss.720.class Start ================ */
/* ==JJWebCss.720.class================ */
.jj {
  /** 폼양식설정에서 
* 테이블을 좌우 정렬가능하게 함
*/
}
.jj .breadcrumb-item.active {
  color: #666666;
}
.jj .breadcrumb-item + .breadcrumb-item::before {
  font-family: 'FontAwesome';
}
.jj .breadcrumb-item + .breadcrumb-item::before {
  content: "\F105";
}
.jj table {
  display: inline-table;
}
.jj .h1,
.jj h1 {
  font-size: 2.25rem;
}
.jj .h2,
.jj h2 {
  font-size: 1.875rem;
}
.jj .h3,
.jj h3 {
  font-size: 1.5rem;
}
.jj .h4,
.jj h4 {
  font-size: 1.125rem;
}
.jj .h5,
.jj h5 {
  font-size: 0.9375rem;
}
.jj .h6,
.jj h6 {
  font-size: 0.75rem;
}
.jj p {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.jj .lead {
  font-size: 1.125rem;
  font-weight: 300;
}
.jj .display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.1;
}
.jj .display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.1;
}
.jj .display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.1;
}
.jj .display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.1;
}
.jj .display-5 {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.1;
}
.jj .display-6 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
}
.jj .opacity-9 {
  opacity: 0.9;
}
.jj .opacity-8 {
  opacity: 0.8;
}
.jj .opacity-7 {
  opacity: 0.7;
}
.jj .line-truncate-2 {
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.jj .line-truncate-3 {
  -webkit-line-clamp: 3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.jj .line-truncate-4 {
  -webkit-line-clamp: 4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.jj a[disabled] {
  color: #999;
  /* 텍스트 색상을 회색으로 변경 */
  pointer-events: none;
  /* 클릭 이벤트 비활성화 */
  text-decoration: none;
  /* 밑줄 제거 */
  cursor: not-allowed;
  /* 커서를 비활성화된 상태로 변경 */
}
.jj .b-box {
  border-radius: 4px !important;
  padding: 8px !important;
  margin-bottom: 8px !important;
  background-color: white !important;
  width: 100%;
}
.jj ol.won,
.jj ul.list-won {
  list-style-type: none;
  counter-reset: my-counter;
  /* 사용자 정의 카운터 초기화 */
  position: relative;
}
.jj ol.won li,
.jj ul.list-won li {
  counter-increment: my-counter;
  /* 카운터 증가 */
  margin-left: 1.5rem;
  position: relative;
}
.jj ol.won li::before,
.jj ul.list-won li::before {
  content: "① ";
  /* 숫자를 원하는 문자로 대체 */
  position: absolute;
  left: -1.5rem;
}
.jj ol.won li:nth-child(2)::before,
.jj ul.list-won li:nth-child(2)::before {
  content: "② ";
}
.jj ol.won li:nth-child(3)::before,
.jj ul.list-won li:nth-child(3)::before {
  content: "③ ";
}
.jj ol.won li:nth-child(4)::before,
.jj ul.list-won li:nth-child(4)::before {
  content: "④ ";
}
.jj ol.won li:nth-child(5)::before,
.jj ul.list-won li:nth-child(5)::before {
  content: "④ ";
}
.jj ol.won li:nth-child(6)::before,
.jj ul.list-won li:nth-child(6)::before {
  content: "⑤ ";
}
.jj ol.won li:nth-child(7)::before,
.jj ul.list-won li:nth-child(7)::before {
  content: "⑥ ";
}
.jj ol.won li:nth-child(8)::before,
.jj ul.list-won li:nth-child(8)::before {
  content: "⑦ ";
}
.jj ol.won li:nth-child(9)::before,
.jj ul.list-won li:nth-child(9)::before {
  content: "⑧ ";
}
.jj ol.won li:nth-child(10)::before,
.jj ul.list-won li:nth-child(10)::before {
  content: "⑨ ";
}
.jj ol.won li:nth-child(11)::before,
.jj ul.list-won li:nth-child(11)::before {
  content: "⑩ ";
}
.jj ol.won li:nth-child(12)::before,
.jj ul.list-won li:nth-child(12)::before {
  content: "⑪ ";
}
.jj ol.won li:nth-child(13)::before,
.jj ul.list-won li:nth-child(13)::before {
  content: "⑫ ";
}
.jj ol.won li:nth-child(14)::before,
.jj ul.list-won li:nth-child(14)::before {
  content: "⑬ ";
}
.jj ol.won li:nth-child(15)::before,
.jj ul.list-won li:nth-child(15)::before {
  content: "⑭ ";
}
.jj ol.won li:nth-child(16)::before,
.jj ul.list-won li:nth-child(16)::before {
  content: "⑮ ";
}
.jj ol.won li:nth-child(17)::before,
.jj ul.list-won li:nth-child(17)::before {
  content: "⑯ ";
}
.jj ol.won li:nth-child(18)::before,
.jj ul.list-won li:nth-child(18)::before {
  content: "⑰ ";
}
.jj ol.won li:nth-child(19)::before,
.jj ul.list-won li:nth-child(19)::before {
  content: "⑱ ";
}
.jj ol.won li:nth-child(20)::before,
.jj ul.list-won li:nth-child(20)::before {
  content: "⑲ ";
}
.jj ul.list-won {
  padding: 0;
}
.jj ul.list-won li {
  margin-left: 1.1rem;
}
.jj ul.list-won li::before {
  left: -1.1rem;
}
.jj .text-blue {
  color: #0054d7 !important;
}
.jj .text-black {
  color: #000 !important;
}
.jj .bg-blue {
  background-color: #3B73DA !important;
  border-color: #3B73DA !important;
}
.jj .bg-black {
  background-color: #000 !important;
  border-color: #000 !important;
}
.jj .btn-blue {
  color: #fff;
  background-color: #0054d7;
  border-color: #0054d7;
}
.jj .btn-outline-blue {
  color: #0054d7;
  border-color: #0054d7;
}
.jj .btn-outline-blue:hover {
  color: #fff;
  background-color: #0054d7;
  border-color: #0054d7;
}
.jj .btn-blue:hover {
  color: #fff;
  background-color: #0024d7;
  border-color: #0024d7;
}
.jj .btn-blue.focus,
.jj .btn-blue:focus {
  -webkit-box-shadow: 0 0 0 0.15rem rgba(85, 213, 234, 0.5);
  box-shadow: 0 0 0 0.15rem rgba(85, 213, 234, 0.5);
}
.jj .rounded-5 {
  border-radius: 5px !important;
}
.jj .rounded-10 {
  border-radius: 10px !important;
}
.jj .rounded-15 {
  border-radius: 15px !important;
}
.jj .border {
  border: 1px solid #dee2e6 !important;
}
.jj .border-1 {
  border: 1px solid #dee2e6 !important;
}
.jj .border-2 {
  border: 2px solid #dee2e6 !important;
}
.jj .border-3 {
  border: 2px solid #dee2e6 !important;
}
.jj .list-unstyled {
  padding-left: 0;
  list-style: none;
}
.jj .list-default {
  padding-left: 1.1rem;
  list-style: initial;
}
.jj .list-circle {
  padding-left: 1.1rem;
  list-style: circle;
}
.jj .list-decimal {
  padding-left: 1.1rem;
  list-style: decimal;
}
.jj .list-hangul {
  padding-left: 1.1rem;
  list-style: hangul;
}
.jj .list-lower-alpha {
  padding-left: 1.1rem;
  list-style: lower-alpha;
}
.jj .list-square {
  padding-left: 1.1rem;
  list-style: square;
}
.jj .list-upper-alpha {
  padding-left: 1.1rem;
  list-style: upper-alpha;
}
.jj .list-upper-roman {
  padding-left: 1.1rem;
  list-style: upper-roman;
}

/* ==JJWebCss.720.class End ================ */




/* ==docsSection.class Start ================ */
/* ==docsSection.class================ */
.jj .docs-section {
  float: left;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.jj .docs-section .contents {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
  position: relative;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}
.jj .docs-section .jumbotron {
  padding: 2rem 1rem;
}
.jj .docs-section .jumbotron h1 {
  font-weight: bolder;
}
.jj .docs-section .jumbotron p {
  margin: 30px 0 10px 0;
}
.jj .docs-section .sub-section {
  margin: 0 0 40px 0;
  padding-top: 20px;
  border-top: solid 1px #ddd;
}
.jj .docs-section .sub-section .example {
  display: flow-root;
  margin-bottom: 20px;
  padding: 20px 10px;
  border: solid 1px #ddd;
  border-radius: 4px;
  background-color: #f1f5f7;
}
.jj .docs-section .btn {
  margin: 10px 0;
}
.jj .docs-section .xsummary {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  width: 100%;
  padding-right: 12px;
}
.jj .docs-section .xsummary > div {
  position: sticky;
  --display: inline-block;
  --padding-right: 12px;
  --padding-left: 12px;
  z-index: 9999;
  top: 0px;
}
.jj .docs-section .xsummary > div h5 {
  padding-bottom: 5px;
  border-bottom: solid 1px #ddd;
  font-weight: 600;
}
.jj .docs-section .xsummary > div ul {
  margin: 0;
  padding: 0;
}
.jj .docs-section .xsummary > div li {
  margin: 0;
  padding: 5px;
  list-style: none;
  cursor: pointer;
}
.jj .docs-section .xsummary > div a {
  color: #6e768e;
}
.jj .docs-section .xsummary > div a:hover {
  color: #9097a7;
}
@media (max-width: 767.98px) {
  .jj .docs-section .contents {
    max-width: 100%!important;
  }
  .jj .docs-section .xsummary {
    max-width: 0%!important;
    display: none!important;
  }
}
@media (min-width: 576px) {
  .jj .docs-section {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .jj .docs-section {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .jj .docs-section {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .jj .docs-section {
    max-width: 1140px;
  }
}

/* ==docsSection.class End ================ */




/* ==myapps.admin.class Start ================ */
/* ==myapps.admin.class================ */
.jj .config-top-more {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.jj .config-top-more h5 {
  font-weight: bold;
}
.jj .config-ver2-item {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.jj .config-ver2-item h5 {
  font-weight: bold;
}
.jj .config-ver2-item h5 i {
  margin-right: 0.375rem;
}
.jj .config-ver2-unit {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.jj .config-ver2-unit > h3 {
  display: inline;
  margin-right: 0.375rem;
}
.jj .config-more-btm {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
}
.jj .config-more-btm a {
  color: #000;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj .config-more-btm small {
  display: block;
}
.jj .config-more-btm > div {
  margin-bottom: 1rem;
}
.jj .config-content .card {
  height: 95%;
}
.jj .config-content .card .card-body > div {
  margin-bottom: 0.75rem;
}
.jj .config-content .card .card-body > div label {
  width: 80px;
}
.jj .config-content .card .card-body .config-btm-input {
  display: flex;
}
.jj .config-content .card .card-body .config-btm-input label {
  width: 80px;
}
.jj .config-content .card .card-body .config-btm-input input {
  width: calc(100% - 80px);
}
.jj .config-content .config-img {
  margin-bottom: 0.75rem;
  margin-left: 0.375rem;
  margin-right: 0.375rem;
  height: 95%;
  -webkit-box-shadow: 0 0 8px 0 rgba(154, 161, 171, 0.3);
  box-shadow: 0 0 8px 0 rgba(154, 161, 171, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.jj .config-content .config-img > img {
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}
.jj jj-form-carousel {
  padding: 0;
  height: 300px;
  left: 0px;
}
.jj jj-form-carousel .form-set {
  border: none;
}

/* ==myapps.admin.class End ================ */




/* ==myapps.select.class Start ================ */
/* ==myapps.select.class================ */
.jj {
  /**
* Select Mode 변경 스타일 
*/
  /**
* 검색
*/
}
.jj .select-mode {
  margin-left: 0;
  margin-right: 0;
  display: flex;
  max-width: 1440px;
  height: calc(100% - 70px);
}
.jj .select-mode .sidebox {
  background-color: #f1f5f7;
  width: 200px;
  flex: none;
  position: fixed;
  height: 610px;
  padding: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.375rem;
}
.jj .select-mode .sidebox .clickable {
  padding-left: 0.375rem;
}
.jj .select-mode .sidebox .clickable > h4 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.jj .select-mode .sidebox .clickable > h4 t {
  padding-left: 0.75rem;
}
.jj .select-mode .sidebox .clickable:hover {
  background-color: #3bafda;
  color: #fff;
}
.jj .select-mode .sidebox .clickable:hover h4 {
  color: #fff;
}
.jj .select-mode .sidebox .noneClick {
  padding-left: 8.111px;
  padding-right: 1.111px;
  padding-top: 1.111px;
  padding-bottom: 1.111px;
}
.jj .select-mode .sidebox .noneClick t {
  padding-left: 0.75rem;
}
.jj .select-mode .sidebox ul {
  margin-bottom: 2.25rem;
}
.jj .select-mode .sidebox ul li.list-group-item {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 15px;
  list-style: none;
  border-color: #f1f5f7;
  background-color: #f1f5f7;
}
.jj .select-mode .mainbox {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin-left: 200px;
  padding: 0.75rem;
}
.jj .select-mode .mainbox .ribbon-box .ribbon-two {
  display: none;
}
.jj .select-mode .mainbox > div {
  display: block;
}
.jj .select-mode .mainbox > div .sides {
  width: 100%;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.jj .select-mode .mainbox > div .sides > h4 {
  width: 100%;
  display: block;
  float: left;
}
.jj .select-mode .mainbox > div .sides > h4 > i {
  margin-right: 0.75rem;
}
.jj .select-mode .mainbox > div .card-items {
  display: block;
}
.jj .select-mode .mainbox > div .card-items .card-wrap {
  margin: 10px;
  width: 200px;
  float: left;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.jj .select-mode .mainbox > div .card-items .card-wrap .card {
  cursor: pointer;
  text-align: center;
}
.jj .select-mode .mainbox > div .card-items .card-wrap .card .card-body {
  background: #E6F7FF;
  padding: 1rem 0;
}
.jj .select-mode .mainbox > div .card-items .card-wrap .card .card-body h5 {
  font-size: 1.1rem;
  padding-top: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj .select-mode .mainbox > div .card-items .card-wrap .card .card-img-top {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  height: 90px;
}
.jj .select-mode .mainbox > div .card-items .card-wrap .card .search-content {
  height: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj .select-mode .mainbox > div .card-items .card-wrap .card a.btn {
  display: none;
  margin-bottom: 2rem;
}
.jj .select-mode .mainbox > div .card-items .card-wrap .card .ribbon {
  position: absolute;
  margin-top: -20px;
  margin-left: -38px;
  display: none;
  float: left;
}
.jj .select-mode .mainbox > div .card-items .card-wrap .card:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.jj .select-mode .mainbox > div .card-items .card-wrap.off {
  max-width: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}
.jj .select-mode .mainbox > div .card-items .card-wrap.off .card {
  border: none;
  padding: 0;
}
.jj .select-mode .mainbox > div .card-items .card-wrap.off .card .ribbon-two {
  display: none;
}
.jj .select-mode .mainbox > div .card-items .card-wrap[data-package="O"] .ribbon-two {
  display: block;
}
.jj .search-on .findhidden {
  display: none!important;
}

/* ==myapps.select.class End ================ */





/* ==CssComp.720.pkg.deploy End ================ */




/* ==DragComp.720.pkg.deploy Start ================ */
/* ==DragComp.720.pkg.deploy================ */
/* ==JJDragable.720.class Start ================ */
/* ==JJDragable.720.class================ */
.jj .jjdragcomp.starting {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 1000;
}
.jj .jjdragcomp.starting.move-on {
  pointer-events: none;
}

/* ==JJDragable.720.class End ================ */




/* ==JJMoveable.720.class Start ================ */
/* ==JJMoveable.720.class================ */

/* ==JJMoveable.720.class End ================ */




/* ==JJResizable.720.class Start ================ */
/* ==JJResizable.720.class================ */
.jj .jj-resizable {
  outline: 0px;
}
.jj .jj-resizable .resizer {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 0;
  border: 0;
  pointer-events: auto;
  z-index: 1000;
}
.jj .jj-resizable .resizer:hover {
  background: #ccc;
  background: transparent;
}
.jj .jj-resizable .resizer[data-arrow="n"] {
  top: 0;
  left: 0;
  width: 100%;
  transform: none;
  cursor: n-resize;
  /*resizer cursor*/
}
.jj .jj-resizable .resizer[data-arrow="e"] {
  right: 0;
  top: 0;
  height: 100%;
  transform: none;
  cursor: e-resize;
  /*resizer cursor*/
}
.jj .jj-resizable .resizer[data-arrow="s"] {
  bottom: 0;
  left: 0;
  width: 100%;
  transform: none;
  cursor: s-resize;
  /*resizer cursor*/
}
.jj .jj-resizable .resizer[data-arrow="w"] {
  top: 0;
  left: 0;
  height: 100%;
  transform: none;
  cursor: w-resize;
  /*resizer cursor*/
}
.jj .jj-resizable .resizer[data-arrow="nw"] {
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  cursor: nw-resize;
  /*resizer cursor*/
}
.jj .jj-resizable .resizer[data-arrow="ne"] {
  right: 0;
  top: 0;
  width: 15px;
  height: 15px;
  cursor: ne-resize;
}
.jj .jj-resizable .resizer[data-arrow="sw"] {
  left: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  cursor: ne-resize;
}
.jj .jj-resizable .resizer[data-arrow="se"] {
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  cursor: nw-resize;
}
.jj .jj-resizable.resizing {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: auto;
}
.jj .freeze iframe {
  pointer-events: none;
}
.jj .jj-resizable.size-mark {
  outline: 2px solid #4286f4;
  z-index: 1000;
}
.jj .jj-resizable.size-mark .resizer {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /*magic to turn square into circle*/
  background: white;
  border: 2px solid #4286f4;
  pointer-events: auto;
}
.jj .jj-resizable.size-mark .resizer[data-arrow="n"] {
  left: 50%;
  top: -10px;
  cursor: n-resize;
  /*resizer cursor*/
  transform: translate(-50%, 0);
}
.jj .jj-resizable.size-mark .resizer[data-arrow="e"] {
  right: -10px;
  top: 50%;
  cursor: e-resize;
  /*resizer cursor*/
  transform: translate(0%, -50%);
}
.jj .jj-resizable.size-mark .resizer[data-arrow="s"] {
  left: 50%;
  bottom: -10px;
  cursor: s-resize;
  /*resizer cursor*/
  transform: translate(-50%, 0);
}
.jj .jj-resizable.size-mark .resizer[data-arrow="w"] {
  left: -10px;
  top: 50%;
  cursor: w-resize;
  /*resizer cursor*/
  transform: translate(0%, -50%);
}
.jj .jj-resizable.size-mark .resizer[data-arrow="nw"] {
  left: -10px;
  top: -10px;
  cursor: nw-resize;
  /*resizer cursor*/
}
.jj .jj-resizable.size-mark .resizer[data-arrow="ne"] {
  right: -10px;
  top: -10px;
  cursor: ne-resize;
}
.jj .jj-resizable.size-mark .resizer[data-arrow="sw"] {
  left: -10px;
  bottom: -10px;
  cursor: ne-resize;
}
.jj .jj-resizable.size-mark .resizer[data-arrow="se"] {
  right: -10px;
  bottom: -10px;
  cursor: nw-resize;
}
.jj .sizebarx {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0px;
  width: 5px;
  cursor: e-resize;
  z-index: 10;
}
.jj .sizebarx:hover {
  background-color: whitesmoke;
}
.jj .sizebarx.start {
  background-color: #ccc;
}
.jj .sizebarxw {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0px;
  width: 5px;
  cursor: w-resize;
  z-index: 10;
}
.jj .sizebarxw:hover {
  background-color: whitesmoke;
}
.jj .sizebarxw.start {
  background-color: #ccc;
}
.jj .sizebary {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 10;
  cursor: s-resize;
}
.jj .sizebary:hover {
  background-color: whitesmoke;
}
.jj .sizebary.start {
  background-color: #ccc;
}

/* ==JJResizable.720.class End ================ */




/* ==JJResizeBox.720.class Start ================ */
/* ==JJResizeBox.720.class================ */
.jj jj-resize-box {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 100px;
  height: 100px;
  outline: 1px solid #4286f4;
  z-index: 1000;
  pointer-events: none;
}
.jj jj-resize-box.is-move {
  pointer-events: auto;
}
.jj jj-resize-box > .size-mark.resizer {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid #4286f4;
  pointer-events: auto;
}
.jj jj-resize-box > .size-mark.resizer[data-arrow='top'] {
  left: 50%;
  top: -6px;
  cursor: n-resize;
  transform: translate(-50%, 0);
}
.jj jj-resize-box > .size-mark.resizer[data-arrow='right'] {
  right: -7px;
  top: 50%;
  cursor: e-resize;
  transform: translate(0%, -50%);
}
.jj jj-resize-box > .size-mark.resizer[data-arrow='bottom'] {
  left: 50%;
  bottom: -7px;
  cursor: s-resize;
  transform: translate(-50%, 0);
}
.jj jj-resize-box > .size-mark.resizer[data-arrow='left'] {
  left: -7px;
  top: 50%;
  cursor: w-resize;
  transform: translate(0%, -50%);
}
.jj jj-resize-box > .size-mark.resizer[data-arrow='top-left'] {
  left: -6px;
  top: -6px;
  cursor: nw-resize;
}
.jj jj-resize-box > .size-mark.resizer[data-arrow='top-right'] {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}
.jj jj-resize-box > .size-mark.resizer[data-arrow='bottom-left'] {
  left: -7px;
  bottom: -6px;
  cursor: ne-resize;
}
.jj jj-resize-box > .size-mark.resizer[data-arrow='bottom-right'] {
  right: -6px;
  bottom: -6px;
  cursor: nw-resize;
}
.jj jj-resize-box .rotate-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 3px solid #4286f4;
  pointer-events: auto;
  top: -30px;
  left: 50%;
  cursor: crosshair;
  transform: translate(-50%, 0);
  display: none;
}
.jj jj-resize-box .rotate-bar {
  position: absolute;
  width: 1px;
  height: 12px;
  left: 50%;
  top: -12px;
  border: 1px solid #4286f4;
  transform: translate(-50%, 0);
  display: none;
}
.jj jj-resize-box.rotate .rotate-handle,
.jj jj-resize-box.rotate .rotate-bar {
  display: initial;
}
.jj jj-resize-box[line-type='group'] {
  outline: 3px dotted #4286f4;
}
.jj jj-resize-box[jj-size-rule="e"] .size-mark.resizer[data-arrow='bottom'] {
  display: none;
}

/* ==JJResizeBox.720.class End ================ */




/* ==JJRotate.720.class Start ================ */
/* ==JJRotate.720.class================ */
.jj [rotatable] *,
.jj .rotating * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* ==JJRotate.720.class End ================ */




/* ==JJSelector.720.class Start ================ */
/* ==JJSelector.720.class================ */
.jj .jj-selector {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}
.jj .jj-selector .selected {
  background-color: var(--primary);
  color: var(--white);
}
.jj .selector-box {
  position: fixed;
  display: none;
  border: 1px dotted var(--warning);
  pointer-events: none;
}

/* ==JJSelector.720.class End ================ */




/* ==JJSortable.720.class Start ================ */
/* ==JJSortable.720.class================ */
.jj .jj-sortable {
  min-height: 30px;
  width: 100%;
}
.jj .jj-sortable .sort-el {
  display: block;
  background-color: var(--warning);
}
.jj .jj-sortable.sorting {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: auto;
  cursor: move;
}
.jj .jj-sortable.sorting .sort-el {
  color: var(--warning);
  outline: 2px dotted #ccc !important;
}
.jj .jj-sortable.sorting .sort-el * {
  visibility: hidden;
}
.jj .cursor-el {
  position: fixed;
  display: block;
  background-color: var(--light);
  z-index: 100000;
  overflow: hidden;
  pointer-events: none;
}
.jj .cursor-el * {
  pointer-events: none;
}

/* ==JJSortable.720.class End ================ */




/* ==JJSwiper.720.class Start ================ */
/* ==JJSwiper.720.class================ */
.jj .swiping * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ==JJSwiper.720.class End ================ */





/* ==DragComp.720.pkg.deploy End ================ */




/* ==JJCodeEditorTern.720.class Start ================ */
/* ==JJCodeEditorTern.720.class================ */

/* ==JJCodeEditorTern.720.class End ================ */




/* ==CustomComp.720.pkg.deploy Start ================ */
/* ==CustomComp.720.pkg.deploy================ */
/* ==JJBookmark.720.class Start ================ */
/* ==JJBookmark.720.class================ */
.jj jj-bookmark {
  display: block;
  position: relative;
}
.jj jj-bookmark > .bookmark-wrap {
  position: sticky;
  --display: inline-block;
  --padding-right: 12px;
  --padding-left: 12px;
  z-index: 9999;
  top: 0px;
}

/* ==JJBookmark.720.class End ================ */




/* ==JJShareIcon.class Start ================ */
/* ==JJShareIcon.class================ */
.jj jj-shareicon div.buttons {
  position: relative;
}
.jj jj-shareicon div.buttons > button {
  text-align: center;
  border: none;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 15px;
  background-color: transparent;
  color: white;
}
.jj jj-shareicon div.buttons > button:hover {
  background-color: white;
  color: var(--dark);
}
.jj jj-shareicon div.buttons > button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj jj-shareicon div.qrSection {
  width: 200px;
  height: 200px;
  position: absolute;
  z-index: 30;
  top: 40px;
  right: -12px;
  display: inline-block;
  background-color: white;
  overflow: hidden;
  padding: 5px;
  border: 1px solid #00000030;
}
.jj jj-shareicon div.qrSection.hidden {
  display: none;
}
.jj jj-shareicon div.qrSection j2-qrprint.shareQr {
  width: 100%;
}
.jj jj-shareicon div.qrSection j2-qrprint.shareQr.j2-item .control-content {
  flex-grow: 0 !important;
}
.jj jj-shareicon div.qrSection j2-qrprint.shareQr.j2-item .control-content .form-control {
  display: none;
}
.jj jj-shareicon div.qrSection j2-qrprint.shareQr.j2-item .control-content .form-viewer {
  height: 220px !important;
  flex-grow: 0;
  background: white;
  border: none;
}
.jj jj-shareicon div.qrSection j2-qrprint.shareQr.j2-item .control-content .form-viewer img {
  display: block;
  width: 180px !important;
  height: 180px !important;
  position: absolute;
  z-index: 20;
  top: 31% !important;
  left: 50% !important;
}
.jj jj-shareicon div.qrSection j2-qrprint.shareQr.j2-item .control-content .form-viewer img:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj jj-shareicon div.shareSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  position: absolute;
  top: 40px;
  right: -12px;
  z-index: 1000;
  background-color: white;
  padding: 10px;
  border: 1px solid #00000030;
}
.jj jj-shareicon div.shareSection.hidden {
  display: none;
}
.jj jj-shareicon div.shareSection div.section-item {
  width: 100%;
  display: flex;
  align-items: center;
}
.jj jj-shareicon div.shareSection div.section-item > span {
  flex-basis: 80px;
  flex-shrink: 0;
  width: 22%;
}
.jj jj-shareicon div.shareSection div.section-item > div.icons {
  width: 78%;
}
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareFacebook,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareTweet,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.sharePinterest,
.jj jj-shareicon div.shareSection div.section-item > div.icons a.shareNaver,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareKakaoTalk {
  border: none;
  background-color: transparent;
  padding: 0;
  padding-right: 2px;
  width: 25px;
  aspect-ratio: 1;
  border-radius: 100%;
}
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareFacebook img,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareTweet img,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.sharePinterest img,
.jj jj-shareicon div.shareSection div.section-item > div.icons a.shareNaver img,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareKakaoTalk img {
  width: 25px;
  aspect-ratio: 1;
  border-radius: 100%;
}
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareFacebook:focus-visible,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareTweet:focus-visible,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.sharePinterest:focus-visible,
.jj jj-shareicon div.shareSection div.section-item > div.icons a.shareNaver:focus-visible,
.jj jj-shareicon div.shareSection div.section-item > div.icons button.shareKakaoTalk:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj jj-shareicon div.shareSection div.section-item > div.address {
  width: 78%;
  display: flex;
  gap: 5px;
}
.jj jj-shareicon div.shareSection div.section-item > div.address button {
  width: 20%;
}
.jj jj-shareicon div.shareSection div.section-item > div.address input {
  width: 80%;
}
.jj jj-shareicon button.closeButton {
  background-color: transparent;
  border: none;
  font-size: 1.2rem;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jj jj-shareicon button.closeButton:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
@media (max-width: 1200px) {
  .jj jj-shareicon div.buttons > button {
    color: #000;
  }
}

/* ==JJShareIcon.class End ================ */




/* ==JJCalendar.720.class Start ================ */
/* ==JJCalendar.720.class================ */
.jj jj-calendar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background-color: var(--white);
  margin-bottom: 15px;
}
.jj jj-calendar .table-head {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}
.jj jj-calendar .table-head th {
  color: black;
  font-weight: normal;
  text-align: center;
  padding: 5px;
}
.jj jj-calendar .table-body {
  width: 100%;
  border-collapse: separate;
  margin-bottom: 10px;
  text-align: center;
  flex-grow: 1;
}
.jj jj-calendar .table-body td {
  position: relative;
  border: 1px solid transparent;
  color: var(--dark);
  cursor: pointer;
}
.jj jj-calendar .table-body td:hover {
  background-color: var(--warning);
}
.jj jj-calendar .table-body td.today {
  border-color: var(--info);
}
.jj jj-calendar .table-body td.sun,
.jj jj-calendar .table-body td.sat {
  color: var(--danger);
}
.jj jj-calendar .table-body td.select {
  background-color: var(--danger);
  color: var(--white);
}
.jj jj-calendar .table-body td.select m {
  color: var(--dark);
}
.jj jj-calendar .table-body td.from {
  background-color: var(--primary);
  border-radius: 25px 0 0 25px;
  color: white;
}
.jj jj-calendar .table-body td.due {
  background-color: var(--primary);
  border-radius: 0;
  color: white;
}
.jj jj-calendar .table-body td.to {
  background-color: var(--primary);
  border-radius: 0 25px 25px 0;
  color: white;
}
.jj jj-calendar .table-body td * {
  pointer-events: none;
}
.jj jj-calendar .table-body td m {
  font-weight: normal;
  font-size: smaller;
  position: absolute;
  left: 0;
  bottom: -5px;
  right: 0;
}
.jj jj-calendar .table-body .next,
.jj jj-calendar .table-body .out-range,
.jj jj-calendar .table-body .out-between {
  color: var(--gray) !important;
  cursor: no-drop;
  pointer-events: none;
}
.jj jj-calendar .cal-head {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jj jj-calendar .cal-head button * {
  pointer-events: none;
}
.jj jj-calendar .cal-head .cal-title {
  font-weight: normal;
}
.jj jj-calendar .cal-info {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0;
  list-style: none;
}
.jj jj-calendar.circle td {
  height: 2.5rem;
  border-radius: 50%;
}
.jj jj-calendar[calendar-id] .table-body td.on t {
  padding: 2px 0px;
  background-color: var(--primary);
  border-radius: 50%;
  color: white;
  position: absolute;
  width: 26px;
  height: 26px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.jj jj-calendar[calendar-id] .table-body td.on t a.event {
  color: white;
}
.jj jj-calendar[calendar-id] .table-body td:hover,
.jj jj-calendar[calendar-id] .table-body td.select {
  background-color: transparent;
  color: initial!important;
}
.jj jj-calendar[calendar-id] [j-title]:hover::before {
  display: block;
}
.jj jj-calendar[calendar-id] [j-title]::before {
  display: none;
  position: absolute;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: var(--white);
  content: attr(j-title);
  top: 55px;
  z-index: 2;
  padding: 3px 10px;
  width: max-content;
  border-radius: 5px;
  pointer-events: none;
}
.jj jj-calendar[calendar-id] .cal-info {
  display: none;
}

/* ==JJCalendar.720.class End ================ */




/* ==JJFullCalendar.720.class Start ================ */
/* ==JJFullCalendar.720.class================ */
.jj jj-full-calendar {
  position: relative;
  display: block;
}
.jj jj-full-calendar .jj-holiday {
  pointer-events: none;
  text-align: left;
  background-color: transparent!important;
  border-color: transparent!important;
}
.jj jj-full-calendar .jj-holiday .fc-title {
  color: red!important;
}
.jj jj-full-calendar .fc-event {
  margin: 1px;
}
.jj jj-full-calendar .fc-axis.fc-widget-header {
  padding: 0 4px!important;
}
@media (max-width: 767.98px) {
  .jj jj-full-calendar {
    font-size: 12px!important;
  }
  .jj jj-full-calendar .fc-toolbar {
    font-size: 12px!important;
  }
  .jj jj-full-calendar .fc-toolbar h2 {
    font-size: 12px!important;
  }
}

/* ==JJFullCalendar.720.class End ================ */




/* ==JJCalendarDay.720.class Start ================ */
/* ==JJCalendarDay.720.class================ */
.jj jj-calendar-day {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 5px;
  margin-bottom: 15px;
}
.jj jj-calendar-day .table-head {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}
.jj jj-calendar-day .table-head th {
  color: black;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}
.jj jj-calendar-day .table-body {
  border-collapse: separate;
  margin-bottom: 10px;
  text-align: center;
  table-layout: fixed;
}
.jj jj-calendar-day .table-body td {
  position: relative;
  border: 1px solid transparent;
  color: var(--dark);
  font-weight: bolder;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.jj jj-calendar-day .table-body td t {
  position: absolute;
  font-size: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.jj jj-calendar-day .table-body td:hover {
  border: 1px solid var(--primary);
}
.jj jj-calendar-day .table-body td.today {
  background-color: var(--danger);
  color: white;
}
.jj jj-calendar-day .table-body td.sun,
.jj jj-calendar-day .table-body td.sat {
  color: var(--danger);
}
.jj jj-calendar-day .table-body td.select {
  background-color: var(--danger);
  color: var(--white);
}
.jj jj-calendar-day .table-body td.select m {
  color: var(--dark);
}
.jj jj-calendar-day .table-body td.from {
  background-color: var(--primary);
  border-radius: 25px 0 0 25px;
  color: white;
}
.jj jj-calendar-day .table-body td.due {
  background-color: var(--primary);
  border-radius: 0;
  color: white;
}
.jj jj-calendar-day .table-body td.to {
  background-color: var(--primary);
  border-radius: 0 25px 25px 0;
  color: white;
}
.jj jj-calendar-day .table-body td * {
  pointer-events: none;
}
.jj jj-calendar-day .table-body td m {
  font-weight: normal;
  font-size: smaller;
  position: absolute;
  left: 0;
  bottom: -5px;
  right: 0;
}
.jj jj-calendar-day .table-body .next,
.jj jj-calendar-day .table-body .out-range,
.jj jj-calendar-day .table-body .out-between {
  color: var(--gray) !important;
  cursor: no-drop;
  pointer-events: none;
}
.jj jj-calendar-day .table-body tbody td {
  background-color: white;
}
.jj jj-calendar-day .cal-head {
  width: 140px;
  border-radius: 10px;
  padding: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--primary);
  margin-right: 2rem;
}
.jj jj-calendar-day .cal-head .cal-title {
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.jj jj-calendar-day .cal-head button {
  border-radius: 50%;
  padding: 0.5rem 0.7rem;
  margin-top: 50%;
}
.jj jj-calendar-day .cal-head button * {
  pointer-events: none;
}
.jj jj-calendar-day .cal-info {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0;
  list-style: none;
}
.jj jj-calendar-day.circle td {
  height: 2.5rem;
  border-radius: 50%;
}

/* ==JJCalendarDay.720.class End ================ */




/* ==JJCarousel.720.class Start ================ */
/* ==JJCarousel.720.class================ */
.jj {
  /** type-h600 타입 */
}
.jj jj-carousel {
  display: block;
}
.jj jj-carousel :before {
  display: table;
  content: ' ';
}
.jj jj-carousel :after {
  display: table;
  content: ' ';
  clear: both;
}
.jj jj-carousel .carousel-inner {
  height: 100%;
}
.jj jj-carousel .carousel-item {
  height: 100%;
}
.jj jj-carousel .carousel-item img {
  width: 100%;
}
.jj jj-carousel .carousel-caption[hidden] {
  display: none !important;
}
.jj jj-carousel .carousel-control-prev *,
.jj jj-carousel .carousel-control-next * {
  pointer-events: none;
}
.jj jj-carousel .carousel-control-prev,
.jj jj-carousel .carousel-control-next {
  opacity: 0.8;
}
.jj jj-carousel .carousel-control-prev:focus,
.jj jj-carousel .carousel-control-next:focus {
  outline: none!important;
}
.jj jj-carousel .carousel-control-prev:hover,
.jj jj-carousel .carousel-control-next:hover {
  opacity: 1;
}
.jj jj-carousel .carousel-control-prev-icon,
.jj jj-carousel .carousel-control-next-icon {
  width: 30px;
  height: 30px;
}
.jj jj-carousel.sideover .carousel-control-prev:hover,
.jj jj-carousel.sideover .carousel-control-next:hover {
  background-color: var(--dark);
  opacity: 0.2;
}
.jj jj-carousel.height-fix .carousel-inner {
  height: 100% !important;
}
.jj jj-carousel.height-fix .carousel-inner .carousel-item {
  height: 100% !important;
}
.jj jj-carousel.height-fix .carousel-inner .carousel-item img {
  position: absolute;
  height: 100% !important;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  max-width: fit-content;
}
.jj jj-carousel.type-h600 .carousel-item img {
  object-fit: cover;
  height: 600px;
}
.jj jj-carousel.type-h600 .carousel-item .carousel-caption {
  position: absolute;
  padding-right: 15%;
  bottom: 0;
  padding-left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) {
  .jj jj-carousel.type-h600 .carousel-item img {
    height: 300px;
    width: inherit;
    max-width: -webkit-fill-available;
    object-fit: cover;
  }
}

/* ==JJCarousel.720.class End ================ */




/* ==JJDataCarousel.720.class Start ================ */
/* ==JJDataCarousel.720.class================ */
.jj jj-data-carousel {
  display: block;
  position: relative;
  -webkit-touch-callout: default;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.jj jj-data-carousel .carousel-item img {
  width: 100%;
}
.jj jj-data-carousel .carousel-control-prev:before {
  color: #3bafda;
  content: '\F053';
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 4em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.jj jj-data-carousel .carousel-control-next:after {
  color: #3bafda;
  content: '\F054';
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 4em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==JJDataCarousel.720.class End ================ */




/* ==JJFormCarousel.720.class Start ================ */
/* ==JJFormCarousel.720.class================ */
.jj jj-form-carousel {
  position: relative;
  display: block;
  min-height: 300px;
}
.jj jj-form-carousel .form-set {
  position: relative;
  border: 1px solid blue;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: center;
  overflow: hidden;
}
.jj jj-form-carousel .form-set jj-form-include {
  background-color: white;
  padding: 1rem;
  border: 1px solid #ccc;
  width: 60%;
  height: 100%;
  position: relative;
  display: inline-flex;
  left: auto;
  right: auto;
  z-index: 2;
  margin: auto 0;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  zoom: 0.6;
}
.jj jj-form-carousel .form-set jj-form-include header {
  display: none;
}
.jj jj-form-carousel .form-set jj-form-include .form-header {
  text-align: center;
}
.jj jj-form-carousel .form-set jj-form-include > * {
  pointer-events: none;
}
.jj jj-form-carousel .form-set jj-form-include.active {
  border: 5px solid var(--primary);
}
.jj jj-form-carousel .form-set jj-form-include:first-child {
  position: absolute;
  left: 0;
  right: auto;
  z-index: 1;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  zoom: 0.5;
  pointer-events: none;
}
.jj jj-form-carousel .form-set jj-form-include:first-child .form-header {
  text-align: left;
}
.jj jj-form-carousel .form-set jj-form-include:last-child {
  position: absolute;
  right: 0;
  left: auto;
  z-index: 1;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  zoom: 0.5;
  pointer-events: none;
}
.jj jj-form-carousel .form-set jj-form-include:last-child .form-header {
  text-align: right;
}
.jj jj-form-carousel .tool {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  z-index: 2;
}
.jj jj-form-carousel.wide {
  text-align: left;
}
.jj jj-form-carousel.wide jj-form-include {
  position: relative!important;
  width: 33%;
  zoom: 0.5;
  top: 0;
  bottom: 0;
  float: left;
}
.jj jj-form-carousel.wide jj-form-include > article {
  overflow: hidden;
}

/* ==JJFormCarousel.720.class End ================ */




/* ==JJRealtimeChart.720.class Start ================ */
/* ==JJRealtimeChart.720.class================ */
.jj jh-chart canvas {
  border: 1px solid #ccc;
  background-color: white;
  margin-left: 35px;
}
.jj jh-chart .tootip {
  visibility: hidden;
}
.jj jh-chart .chart {
  border: 1px solid blue;
  display: inline-block;
  position: relative;
}
.jj jh-chart .tootip {
  width: 10px;
  height: 10px;
  border: 2px solid red;
  border-radius: 50%;
  color: black;
  position: absolute;
  top: 15px;
  left: 15px;
  transition: all 0.2s ease-out;
}
.jj jh-chart .tootip:hover {
  background-color: yellow;
}
.jj jh-chart:hover .tootip {
  visibility: visible;
}

/* ==JJRealtimeChart.720.class End ================ */




/* ==JJChart720.class Start ================ */
/* ==JJChart720.class================ */
.jj jj-chart {
  display: block;
  position: relative;
}
.jj jj-chart > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* ==JJChart720.class End ================ */




/* ==JJChartMap.720.class Start ================ */
/* ==JJChartMap.720.class================ */
.jj jj-chartmap {
  display: block;
  position: relative;
  min-height: 300px;
}

/* ==JJChartMap.720.class End ================ */




/* ==JJCircleChart.720.class Start ================ */
/* ==JJCircleChart.720.class================ */
.jj jj-circlechart {
  position: relative;
  display: block;
  width: 100%;
}
.jj jj-circlechart .circular-chart {
  display: block;
  margin: 10px auto;
}
.jj jj-circlechart .circular-chart .circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}
.jj jj-circlechart .circular-chart .circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke: #4cc790;
}
.jj jj-circlechart .circular-chart .percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}
.jj jj-circlechart[data-color='orange'] .circle {
  stroke: #ff9f00;
}
.jj jj-circlechart[data-color='green'] .circle {
  stroke: #4cc790;
}
.jj jj-circlechart[data-color='blue'] .circle {
  stroke: #3c9ee5;
}

/* ==JJCircleChart.720.class End ================ */




/* ==JJCircleChartSimple.720.class Start ================ */
/* ==JJCircleChartSimple.720.class================ */
.jj {
  /****************************************************************
 * CSS Percentage Circle
 * Author: Andre Firchow
 * http://circle.firchow.net/
*****************************************************************/
}
.jj jj-circle-c100 {
  display: inline-block;
}
.jj jj-circle-c100 .rect-auto,
.jj jj-circle-c100 .m100.p51 .slice,
.jj jj-circle-c100 .m100.p52 .slice,
.jj jj-circle-c100 .m100.p53 .slice,
.jj jj-circle-c100 .m100.p54 .slice,
.jj jj-circle-c100 .m100.p55 .slice,
.jj jj-circle-c100 .m100.p56 .slice,
.jj jj-circle-c100 .m100.p57 .slice,
.jj jj-circle-c100 .m100.p58 .slice,
.jj jj-circle-c100 .m100.p59 .slice,
.jj jj-circle-c100 .m100.p60 .slice,
.jj jj-circle-c100 .m100.p61 .slice,
.jj jj-circle-c100 .m100.p62 .slice,
.jj jj-circle-c100 .m100.p63 .slice,
.jj jj-circle-c100 .m100.p64 .slice,
.jj jj-circle-c100 .m100.p65 .slice,
.jj jj-circle-c100 .m100.p66 .slice,
.jj jj-circle-c100 .m100.p67 .slice,
.jj jj-circle-c100 .m100.p68 .slice,
.jj jj-circle-c100 .m100.p69 .slice,
.jj jj-circle-c100 .m100.p70 .slice,
.jj jj-circle-c100 .m100.p71 .slice,
.jj jj-circle-c100 .m100.p72 .slice,
.jj jj-circle-c100 .m100.p73 .slice,
.jj jj-circle-c100 .m100.p74 .slice,
.jj jj-circle-c100 .m100.p75 .slice,
.jj jj-circle-c100 .m100.p76 .slice,
.jj jj-circle-c100 .m100.p77 .slice,
.jj jj-circle-c100 .m100.p78 .slice,
.jj jj-circle-c100 .m100.p79 .slice,
.jj jj-circle-c100 .m100.p80 .slice,
.jj jj-circle-c100 .m100.p81 .slice,
.jj jj-circle-c100 .m100.p82 .slice,
.jj jj-circle-c100 .m100.p83 .slice,
.jj jj-circle-c100 .m100.p84 .slice,
.jj jj-circle-c100 .m100.p85 .slice,
.jj jj-circle-c100 .m100.p86 .slice,
.jj jj-circle-c100 .m100.p87 .slice,
.jj jj-circle-c100 .m100.p88 .slice,
.jj jj-circle-c100 .m100.p89 .slice,
.jj jj-circle-c100 .m100.p90 .slice,
.jj jj-circle-c100 .m100.p91 .slice,
.jj jj-circle-c100 .m100.p92 .slice,
.jj jj-circle-c100 .m100.p93 .slice,
.jj jj-circle-c100 .m100.p94 .slice,
.jj jj-circle-c100 .m100.p95 .slice,
.jj jj-circle-c100 .m100.p96 .slice,
.jj jj-circle-c100 .m100.p97 .slice,
.jj jj-circle-c100 .m100.p98 .slice,
.jj jj-circle-c100 .m100.p99 .slice,
.jj jj-circle-c100 .m100.p100 .slice {
  clip: rect(auto, auto, auto, auto);
}
.jj jj-circle-c100 .pie,
.jj jj-circle-c100 .m100 .bar,
.jj jj-circle-c100 .m100.p51 .fill,
.jj jj-circle-c100 .m100.p52 .fill,
.jj jj-circle-c100 .m100.p53 .fill,
.jj jj-circle-c100 .m100.p54 .fill,
.jj jj-circle-c100 .m100.p55 .fill,
.jj jj-circle-c100 .m100.p56 .fill,
.jj jj-circle-c100 .m100.p57 .fill,
.jj jj-circle-c100 .m100.p58 .fill,
.jj jj-circle-c100 .m100.p59 .fill,
.jj jj-circle-c100 .m100.p60 .fill,
.jj jj-circle-c100 .m100.p61 .fill,
.jj jj-circle-c100 .m100.p62 .fill,
.jj jj-circle-c100 .m100.p63 .fill,
.jj jj-circle-c100 .m100.p64 .fill,
.jj jj-circle-c100 .m100.p65 .fill,
.jj jj-circle-c100 .m100.p66 .fill,
.jj jj-circle-c100 .m100.p67 .fill,
.jj jj-circle-c100 .m100.p68 .fill,
.jj jj-circle-c100 .m100.p69 .fill,
.jj jj-circle-c100 .m100.p70 .fill,
.jj jj-circle-c100 .m100.p71 .fill,
.jj jj-circle-c100 .m100.p72 .fill,
.jj jj-circle-c100 .m100.p73 .fill,
.jj jj-circle-c100 .m100.p74 .fill,
.jj jj-circle-c100 .m100.p75 .fill,
.jj jj-circle-c100 .m100.p76 .fill,
.jj jj-circle-c100 .m100.p77 .fill,
.jj jj-circle-c100 .m100.p78 .fill,
.jj jj-circle-c100 .m100.p79 .fill,
.jj jj-circle-c100 .m100.p80 .fill,
.jj jj-circle-c100 .m100.p81 .fill,
.jj jj-circle-c100 .m100.p82 .fill,
.jj jj-circle-c100 .m100.p83 .fill,
.jj jj-circle-c100 .m100.p84 .fill,
.jj jj-circle-c100 .m100.p85 .fill,
.jj jj-circle-c100 .m100.p86 .fill,
.jj jj-circle-c100 .m100.p87 .fill,
.jj jj-circle-c100 .m100.p88 .fill,
.jj jj-circle-c100 .m100.p89 .fill,
.jj jj-circle-c100 .m100.p90 .fill,
.jj jj-circle-c100 .m100.p91 .fill,
.jj jj-circle-c100 .m100.p92 .fill,
.jj jj-circle-c100 .m100.p93 .fill,
.jj jj-circle-c100 .m100.p94 .fill,
.jj jj-circle-c100 .m100.p95 .fill,
.jj jj-circle-c100 .m100.p96 .fill,
.jj jj-circle-c100 .m100.p97 .fill,
.jj jj-circle-c100 .m100.p98 .fill,
.jj jj-circle-c100 .m100.p99 .fill,
.jj jj-circle-c100 .m100.p100 .fill {
  position: absolute;
  border: 0.08em solid #307bbb;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.jj jj-circle-c100 .pie-fill,
.jj jj-circle-c100 .m100.p51 .bar:after,
.jj jj-circle-c100 .m100.p51 .fill,
.jj jj-circle-c100 .m100.p52 .bar:after,
.jj jj-circle-c100 .m100.p52 .fill,
.jj jj-circle-c100 .m100.p53 .bar:after,
.jj jj-circle-c100 .m100.p53 .fill,
.jj jj-circle-c100 .m100.p54 .bar:after,
.jj jj-circle-c100 .m100.p54 .fill,
.jj jj-circle-c100 .m100.p55 .bar:after,
.jj jj-circle-c100 .m100.p55 .fill,
.jj jj-circle-c100 .m100.p56 .bar:after,
.jj jj-circle-c100 .m100.p56 .fill,
.jj jj-circle-c100 .m100.p57 .bar:after,
.jj jj-circle-c100 .m100.p57 .fill,
.jj jj-circle-c100 .m100.p58 .bar:after,
.jj jj-circle-c100 .m100.p58 .fill,
.jj jj-circle-c100 .m100.p59 .bar:after,
.jj jj-circle-c100 .m100.p59 .fill,
.jj jj-circle-c100 .m100.p60 .bar:after,
.jj jj-circle-c100 .m100.p60 .fill,
.jj jj-circle-c100 .m100.p61 .bar:after,
.jj jj-circle-c100 .m100.p61 .fill,
.jj jj-circle-c100 .m100.p62 .bar:after,
.jj jj-circle-c100 .m100.p62 .fill,
.jj jj-circle-c100 .m100.p63 .bar:after,
.jj jj-circle-c100 .m100.p63 .fill,
.jj jj-circle-c100 .m100.p64 .bar:after,
.jj jj-circle-c100 .m100.p64 .fill,
.jj jj-circle-c100 .m100.p65 .bar:after,
.jj jj-circle-c100 .m100.p65 .fill,
.jj jj-circle-c100 .m100.p66 .bar:after,
.jj jj-circle-c100 .m100.p66 .fill,
.jj jj-circle-c100 .m100.p67 .bar:after,
.jj jj-circle-c100 .m100.p67 .fill,
.jj jj-circle-c100 .m100.p68 .bar:after,
.jj jj-circle-c100 .m100.p68 .fill,
.jj jj-circle-c100 .m100.p69 .bar:after,
.jj jj-circle-c100 .m100.p69 .fill,
.jj jj-circle-c100 .m100.p70 .bar:after,
.jj jj-circle-c100 .m100.p70 .fill,
.jj jj-circle-c100 .m100.p71 .bar:after,
.jj jj-circle-c100 .m100.p71 .fill,
.jj jj-circle-c100 .m100.p72 .bar:after,
.jj jj-circle-c100 .m100.p72 .fill,
.jj jj-circle-c100 .m100.p73 .bar:after,
.jj jj-circle-c100 .m100.p73 .fill,
.jj jj-circle-c100 .m100.p74 .bar:after,
.jj jj-circle-c100 .m100.p74 .fill,
.jj jj-circle-c100 .m100.p75 .bar:after,
.jj jj-circle-c100 .m100.p75 .fill,
.jj jj-circle-c100 .m100.p76 .bar:after,
.jj jj-circle-c100 .m100.p76 .fill,
.jj jj-circle-c100 .m100.p77 .bar:after,
.jj jj-circle-c100 .m100.p77 .fill,
.jj jj-circle-c100 .m100.p78 .bar:after,
.jj jj-circle-c100 .m100.p78 .fill,
.jj jj-circle-c100 .m100.p79 .bar:after,
.jj jj-circle-c100 .m100.p79 .fill,
.jj jj-circle-c100 .m100.p80 .bar:after,
.jj jj-circle-c100 .m100.p80 .fill,
.jj jj-circle-c100 .m100.p81 .bar:after,
.jj jj-circle-c100 .m100.p81 .fill,
.jj jj-circle-c100 .m100.p82 .bar:after,
.jj jj-circle-c100 .m100.p82 .fill,
.jj jj-circle-c100 .m100.p83 .bar:after,
.jj jj-circle-c100 .m100.p83 .fill,
.jj jj-circle-c100 .m100.p84 .bar:after,
.jj jj-circle-c100 .m100.p84 .fill,
.jj jj-circle-c100 .m100.p85 .bar:after,
.jj jj-circle-c100 .m100.p85 .fill,
.jj jj-circle-c100 .m100.p86 .bar:after,
.jj jj-circle-c100 .m100.p86 .fill,
.jj jj-circle-c100 .m100.p87 .bar:after,
.jj jj-circle-c100 .m100.p87 .fill,
.jj jj-circle-c100 .m100.p88 .bar:after,
.jj jj-circle-c100 .m100.p88 .fill,
.jj jj-circle-c100 .m100.p89 .bar:after,
.jj jj-circle-c100 .m100.p89 .fill,
.jj jj-circle-c100 .m100.p90 .bar:after,
.jj jj-circle-c100 .m100.p90 .fill,
.jj jj-circle-c100 .m100.p91 .bar:after,
.jj jj-circle-c100 .m100.p91 .fill,
.jj jj-circle-c100 .m100.p92 .bar:after,
.jj jj-circle-c100 .m100.p92 .fill,
.jj jj-circle-c100 .m100.p93 .bar:after,
.jj jj-circle-c100 .m100.p93 .fill,
.jj jj-circle-c100 .m100.p94 .bar:after,
.jj jj-circle-c100 .m100.p94 .fill,
.jj jj-circle-c100 .m100.p95 .bar:after,
.jj jj-circle-c100 .m100.p95 .fill,
.jj jj-circle-c100 .m100.p96 .bar:after,
.jj jj-circle-c100 .m100.p96 .fill,
.jj jj-circle-c100 .m100.p97 .bar:after,
.jj jj-circle-c100 .m100.p97 .fill,
.jj jj-circle-c100 .m100.p98 .bar:after,
.jj jj-circle-c100 .m100.p98 .fill,
.jj jj-circle-c100 .m100.p99 .bar:after,
.jj jj-circle-c100 .m100.p99 .fill,
.jj jj-circle-c100 .m100.p100 .bar:after,
.jj jj-circle-c100 .m100.p100 .fill {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.jj jj-circle-c100 .m100 {
  position: relative;
  display: inline-block;
  font-size: 120px;
  width: 1em;
  height: 1em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: #cccccc;
}
.jj jj-circle-c100 .m100 *,
.jj jj-circle-c100 .m100 *:before,
.jj jj-circle-c100 .m100 *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.jj jj-circle-c100 .m100.center {
  float: none;
  margin: 0 auto;
}
.jj jj-circle-c100 .m100.big {
  font-size: 240px;
}
.jj jj-circle-c100 .m100.small {
  font-size: 80px;
}
.jj jj-circle-c100 .m100 > span {
  position: absolute;
  width: 100%;
  display: inline-block;
  z-index: 1;
  left: 0;
  transform: translate(0%, 30%);
  font-size: 0.2em;
  color: #cccccc;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.jj jj-circle-c100 .m100 > span > p.title {
  font-size: 0.5em;
}
.jj jj-circle-c100 .m100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: whitesmoke;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.jj jj-circle-c100 .m100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}
.jj jj-circle-c100 .m100.p1 .bar {
  -webkit-transform: rotate(3.6deg);
  -moz-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  -o-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
}
.jj jj-circle-c100 .m100.p2 .bar {
  -webkit-transform: rotate(7.2deg);
  -moz-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  -o-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
}
.jj jj-circle-c100 .m100.p3 .bar {
  -webkit-transform: rotate(10.8deg);
  -moz-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  -o-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
}
.jj jj-circle-c100 .m100.p4 .bar {
  -webkit-transform: rotate(14.4deg);
  -moz-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  -o-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
}
.jj jj-circle-c100 .m100.p5 .bar {
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  transform: rotate(18deg);
}
.jj jj-circle-c100 .m100.p6 .bar {
  -webkit-transform: rotate(21.6deg);
  -moz-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  -o-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
}
.jj jj-circle-c100 .m100.p7 .bar {
  -webkit-transform: rotate(25.2deg);
  -moz-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  -o-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
}
.jj jj-circle-c100 .m100.p8 .bar {
  -webkit-transform: rotate(28.8deg);
  -moz-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  -o-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
}
.jj jj-circle-c100 .m100.p9 .bar {
  -webkit-transform: rotate(32.4deg);
  -moz-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  -o-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
}
.jj jj-circle-c100 .m100.p10 .bar {
  -webkit-transform: rotate(36deg);
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -o-transform: rotate(36deg);
  transform: rotate(36deg);
}
.jj jj-circle-c100 .m100.p11 .bar {
  -webkit-transform: rotate(39.6deg);
  -moz-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  -o-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
}
.jj jj-circle-c100 .m100.p12 .bar {
  -webkit-transform: rotate(43.2deg);
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -o-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}
.jj jj-circle-c100 .m100.p13 .bar {
  -webkit-transform: rotate(46.8deg);
  -moz-transform: rotate(46.8deg);
  -ms-transform: rotate(46.8deg);
  -o-transform: rotate(46.8deg);
  transform: rotate(46.8deg);
}
.jj jj-circle-c100 .m100.p14 .bar {
  -webkit-transform: rotate(50.4deg);
  -moz-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  -o-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
}
.jj jj-circle-c100 .m100.p15 .bar {
  -webkit-transform: rotate(54deg);
  -moz-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  -o-transform: rotate(54deg);
  transform: rotate(54deg);
}
.jj jj-circle-c100 .m100.p16 .bar {
  -webkit-transform: rotate(57.6deg);
  -moz-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  -o-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
}
.jj jj-circle-c100 .m100.p17 .bar {
  -webkit-transform: rotate(61.2deg);
  -moz-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  -o-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
}
.jj jj-circle-c100 .m100.p18 .bar {
  -webkit-transform: rotate(64.8deg);
  -moz-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  -o-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
}
.jj jj-circle-c100 .m100.p19 .bar {
  -webkit-transform: rotate(68.4deg);
  -moz-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  -o-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
}
.jj jj-circle-c100 .m100.p20 .bar {
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  transform: rotate(72deg);
}
.jj jj-circle-c100 .m100.p21 .bar {
  -webkit-transform: rotate(75.6deg);
  -moz-transform: rotate(75.6deg);
  -ms-transform: rotate(75.6deg);
  -o-transform: rotate(75.6deg);
  transform: rotate(75.6deg);
}
.jj jj-circle-c100 .m100.p22 .bar {
  -webkit-transform: rotate(79.2deg);
  -moz-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  -o-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
}
.jj jj-circle-c100 .m100.p23 .bar {
  -webkit-transform: rotate(82.8deg);
  -moz-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  -o-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
}
.jj jj-circle-c100 .m100.p24 .bar {
  -webkit-transform: rotate(86.4deg);
  -moz-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  -o-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
}
.jj jj-circle-c100 .m100.p25 .bar {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.jj jj-circle-c100 .m100.p26 .bar {
  -webkit-transform: rotate(93.6deg);
  -moz-transform: rotate(93.6deg);
  -ms-transform: rotate(93.6deg);
  -o-transform: rotate(93.6deg);
  transform: rotate(93.6deg);
}
.jj jj-circle-c100 .m100.p27 .bar {
  -webkit-transform: rotate(97.2deg);
  -moz-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  -o-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
}
.jj jj-circle-c100 .m100.p28 .bar {
  -webkit-transform: rotate(100.8deg);
  -moz-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  -o-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
}
.jj jj-circle-c100 .m100.p29 .bar {
  -webkit-transform: rotate(104.4deg);
  -moz-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  -o-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
}
.jj jj-circle-c100 .m100.p30 .bar {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
}
.jj jj-circle-c100 .m100.p31 .bar {
  -webkit-transform: rotate(111.6deg);
  -moz-transform: rotate(111.6deg);
  -ms-transform: rotate(111.6deg);
  -o-transform: rotate(111.6deg);
  transform: rotate(111.6deg);
}
.jj jj-circle-c100 .m100.p32 .bar {
  -webkit-transform: rotate(115.2deg);
  -moz-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  -o-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
}
.jj jj-circle-c100 .m100.p33 .bar {
  -webkit-transform: rotate(118.8deg);
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -o-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.jj jj-circle-c100 .m100.p34 .bar {
  -webkit-transform: rotate(122.4deg);
  -moz-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  -o-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
}
.jj jj-circle-c100 .m100.p35 .bar {
  -webkit-transform: rotate(126deg);
  -moz-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  -o-transform: rotate(126deg);
  transform: rotate(126deg);
}
.jj jj-circle-c100 .m100.p36 .bar {
  -webkit-transform: rotate(129.6deg);
  -moz-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  -o-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
}
.jj jj-circle-c100 .m100.p37 .bar {
  -webkit-transform: rotate(133.2deg);
  -moz-transform: rotate(133.2deg);
  -ms-transform: rotate(133.2deg);
  -o-transform: rotate(133.2deg);
  transform: rotate(133.2deg);
}
.jj jj-circle-c100 .m100.p38 .bar {
  -webkit-transform: rotate(136.8deg);
  -moz-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  -o-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
}
.jj jj-circle-c100 .m100.p39 .bar {
  -webkit-transform: rotate(140.4deg);
  -moz-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  -o-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
}
.jj jj-circle-c100 .m100.p40 .bar {
  -webkit-transform: rotate(144deg);
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  transform: rotate(144deg);
}
.jj jj-circle-c100 .m100.p41 .bar {
  -webkit-transform: rotate(147.6deg);
  -moz-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  -o-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
}
.jj jj-circle-c100 .m100.p42 .bar {
  -webkit-transform: rotate(151.2deg);
  -moz-transform: rotate(151.2deg);
  -ms-transform: rotate(151.2deg);
  -o-transform: rotate(151.2deg);
  transform: rotate(151.2deg);
}
.jj jj-circle-c100 .m100.p43 .bar {
  -webkit-transform: rotate(154.8deg);
  -moz-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  -o-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
}
.jj jj-circle-c100 .m100.p44 .bar {
  -webkit-transform: rotate(158.4deg);
  -moz-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  -o-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
}
.jj jj-circle-c100 .m100.p45 .bar {
  -webkit-transform: rotate(162deg);
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -o-transform: rotate(162deg);
  transform: rotate(162deg);
}
.jj jj-circle-c100 .m100.p46 .bar {
  -webkit-transform: rotate(165.6deg);
  -moz-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  -o-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
}
.jj jj-circle-c100 .m100.p47 .bar {
  -webkit-transform: rotate(169.2deg);
  -moz-transform: rotate(169.2deg);
  -ms-transform: rotate(169.2deg);
  -o-transform: rotate(169.2deg);
  transform: rotate(169.2deg);
}
.jj jj-circle-c100 .m100.p48 .bar {
  -webkit-transform: rotate(172.8deg);
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -o-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}
.jj jj-circle-c100 .m100.p49 .bar {
  -webkit-transform: rotate(176.4deg);
  -moz-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  -o-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
}
.jj jj-circle-c100 .m100.p50 .bar {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.jj jj-circle-c100 .m100.p51 .bar {
  -webkit-transform: rotate(183.6deg);
  -moz-transform: rotate(183.6deg);
  -ms-transform: rotate(183.6deg);
  -o-transform: rotate(183.6deg);
  transform: rotate(183.6deg);
}
.jj jj-circle-c100 .m100.p52 .bar {
  -webkit-transform: rotate(187.2deg);
  -moz-transform: rotate(187.2deg);
  -ms-transform: rotate(187.2deg);
  -o-transform: rotate(187.2deg);
  transform: rotate(187.2deg);
}
.jj jj-circle-c100 .m100.p53 .bar {
  -webkit-transform: rotate(190.8deg);
  -moz-transform: rotate(190.8deg);
  -ms-transform: rotate(190.8deg);
  -o-transform: rotate(190.8deg);
  transform: rotate(190.8deg);
}
.jj jj-circle-c100 .m100.p54 .bar {
  -webkit-transform: rotate(194.4deg);
  -moz-transform: rotate(194.4deg);
  -ms-transform: rotate(194.4deg);
  -o-transform: rotate(194.4deg);
  transform: rotate(194.4deg);
}
.jj jj-circle-c100 .m100.p55 .bar {
  -webkit-transform: rotate(198deg);
  -moz-transform: rotate(198deg);
  -ms-transform: rotate(198deg);
  -o-transform: rotate(198deg);
  transform: rotate(198deg);
}
.jj jj-circle-c100 .m100.p56 .bar {
  -webkit-transform: rotate(201.6deg);
  -moz-transform: rotate(201.6deg);
  -ms-transform: rotate(201.6deg);
  -o-transform: rotate(201.6deg);
  transform: rotate(201.6deg);
}
.jj jj-circle-c100 .m100.p57 .bar {
  -webkit-transform: rotate(205.2deg);
  -moz-transform: rotate(205.2deg);
  -ms-transform: rotate(205.2deg);
  -o-transform: rotate(205.2deg);
  transform: rotate(205.2deg);
}
.jj jj-circle-c100 .m100.p58 .bar {
  -webkit-transform: rotate(208.8deg);
  -moz-transform: rotate(208.8deg);
  -ms-transform: rotate(208.8deg);
  -o-transform: rotate(208.8deg);
  transform: rotate(208.8deg);
}
.jj jj-circle-c100 .m100.p59 .bar {
  -webkit-transform: rotate(212.4deg);
  -moz-transform: rotate(212.4deg);
  -ms-transform: rotate(212.4deg);
  -o-transform: rotate(212.4deg);
  transform: rotate(212.4deg);
}
.jj jj-circle-c100 .m100.p60 .bar {
  -webkit-transform: rotate(216deg);
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  transform: rotate(216deg);
}
.jj jj-circle-c100 .m100.p61 .bar {
  -webkit-transform: rotate(219.6deg);
  -moz-transform: rotate(219.6deg);
  -ms-transform: rotate(219.6deg);
  -o-transform: rotate(219.6deg);
  transform: rotate(219.6deg);
}
.jj jj-circle-c100 .m100.p62 .bar {
  -webkit-transform: rotate(223.2deg);
  -moz-transform: rotate(223.2deg);
  -ms-transform: rotate(223.2deg);
  -o-transform: rotate(223.2deg);
  transform: rotate(223.2deg);
}
.jj jj-circle-c100 .m100.p63 .bar {
  -webkit-transform: rotate(226.8deg);
  -moz-transform: rotate(226.8deg);
  -ms-transform: rotate(226.8deg);
  -o-transform: rotate(226.8deg);
  transform: rotate(226.8deg);
}
.jj jj-circle-c100 .m100.p64 .bar {
  -webkit-transform: rotate(230.4deg);
  -moz-transform: rotate(230.4deg);
  -ms-transform: rotate(230.4deg);
  -o-transform: rotate(230.4deg);
  transform: rotate(230.4deg);
}
.jj jj-circle-c100 .m100.p65 .bar {
  -webkit-transform: rotate(234deg);
  -moz-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  -o-transform: rotate(234deg);
  transform: rotate(234deg);
}
.jj jj-circle-c100 .m100.p66 .bar {
  -webkit-transform: rotate(237.6deg);
  -moz-transform: rotate(237.6deg);
  -ms-transform: rotate(237.6deg);
  -o-transform: rotate(237.6deg);
  transform: rotate(237.6deg);
}
.jj jj-circle-c100 .m100.p67 .bar {
  -webkit-transform: rotate(241.2deg);
  -moz-transform: rotate(241.2deg);
  -ms-transform: rotate(241.2deg);
  -o-transform: rotate(241.2deg);
  transform: rotate(241.2deg);
}
.jj jj-circle-c100 .m100.p68 .bar {
  -webkit-transform: rotate(244.8deg);
  -moz-transform: rotate(244.8deg);
  -ms-transform: rotate(244.8deg);
  -o-transform: rotate(244.8deg);
  transform: rotate(244.8deg);
}
.jj jj-circle-c100 .m100.p69 .bar {
  -webkit-transform: rotate(248.4deg);
  -moz-transform: rotate(248.4deg);
  -ms-transform: rotate(248.4deg);
  -o-transform: rotate(248.4deg);
  transform: rotate(248.4deg);
}
.jj jj-circle-c100 .m100.p70 .bar {
  -webkit-transform: rotate(252deg);
  -moz-transform: rotate(252deg);
  -ms-transform: rotate(252deg);
  -o-transform: rotate(252deg);
  transform: rotate(252deg);
}
.jj jj-circle-c100 .m100.p71 .bar {
  -webkit-transform: rotate(255.6deg);
  -moz-transform: rotate(255.6deg);
  -ms-transform: rotate(255.6deg);
  -o-transform: rotate(255.6deg);
  transform: rotate(255.6deg);
}
.jj jj-circle-c100 .m100.p72 .bar {
  -webkit-transform: rotate(259.2deg);
  -moz-transform: rotate(259.2deg);
  -ms-transform: rotate(259.2deg);
  -o-transform: rotate(259.2deg);
  transform: rotate(259.2deg);
}
.jj jj-circle-c100 .m100.p73 .bar {
  -webkit-transform: rotate(262.8deg);
  -moz-transform: rotate(262.8deg);
  -ms-transform: rotate(262.8deg);
  -o-transform: rotate(262.8deg);
  transform: rotate(262.8deg);
}
.jj jj-circle-c100 .m100.p74 .bar {
  -webkit-transform: rotate(266.4deg);
  -moz-transform: rotate(266.4deg);
  -ms-transform: rotate(266.4deg);
  -o-transform: rotate(266.4deg);
  transform: rotate(266.4deg);
}
.jj jj-circle-c100 .m100.p75 .bar {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.jj jj-circle-c100 .m100.p76 .bar {
  -webkit-transform: rotate(273.6deg);
  -moz-transform: rotate(273.6deg);
  -ms-transform: rotate(273.6deg);
  -o-transform: rotate(273.6deg);
  transform: rotate(273.6deg);
}
.jj jj-circle-c100 .m100.p77 .bar {
  -webkit-transform: rotate(277.2deg);
  -moz-transform: rotate(277.2deg);
  -ms-transform: rotate(277.2deg);
  -o-transform: rotate(277.2deg);
  transform: rotate(277.2deg);
}
.jj jj-circle-c100 .m100.p78 .bar {
  -webkit-transform: rotate(280.8deg);
  -moz-transform: rotate(280.8deg);
  -ms-transform: rotate(280.8deg);
  -o-transform: rotate(280.8deg);
  transform: rotate(280.8deg);
}
.jj jj-circle-c100 .m100.p79 .bar {
  -webkit-transform: rotate(284.4deg);
  -moz-transform: rotate(284.4deg);
  -ms-transform: rotate(284.4deg);
  -o-transform: rotate(284.4deg);
  transform: rotate(284.4deg);
}
.jj jj-circle-c100 .m100.p80 .bar {
  -webkit-transform: rotate(288deg);
  -moz-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -o-transform: rotate(288deg);
  transform: rotate(288deg);
}
.jj jj-circle-c100 .m100.p81 .bar {
  -webkit-transform: rotate(291.6deg);
  -moz-transform: rotate(291.6deg);
  -ms-transform: rotate(291.6deg);
  -o-transform: rotate(291.6deg);
  transform: rotate(291.6deg);
}
.jj jj-circle-c100 .m100.p82 .bar {
  -webkit-transform: rotate(295.2deg);
  -moz-transform: rotate(295.2deg);
  -ms-transform: rotate(295.2deg);
  -o-transform: rotate(295.2deg);
  transform: rotate(295.2deg);
}
.jj jj-circle-c100 .m100.p83 .bar {
  -webkit-transform: rotate(298.8deg);
  -moz-transform: rotate(298.8deg);
  -ms-transform: rotate(298.8deg);
  -o-transform: rotate(298.8deg);
  transform: rotate(298.8deg);
}
.jj jj-circle-c100 .m100.p84 .bar {
  -webkit-transform: rotate(302.4deg);
  -moz-transform: rotate(302.4deg);
  -ms-transform: rotate(302.4deg);
  -o-transform: rotate(302.4deg);
  transform: rotate(302.4deg);
}
.jj jj-circle-c100 .m100.p85 .bar {
  -webkit-transform: rotate(306deg);
  -moz-transform: rotate(306deg);
  -ms-transform: rotate(306deg);
  -o-transform: rotate(306deg);
  transform: rotate(306deg);
}
.jj jj-circle-c100 .m100.p86 .bar {
  -webkit-transform: rotate(309.6deg);
  -moz-transform: rotate(309.6deg);
  -ms-transform: rotate(309.6deg);
  -o-transform: rotate(309.6deg);
  transform: rotate(309.6deg);
}
.jj jj-circle-c100 .m100.p87 .bar {
  -webkit-transform: rotate(313.2deg);
  -moz-transform: rotate(313.2deg);
  -ms-transform: rotate(313.2deg);
  -o-transform: rotate(313.2deg);
  transform: rotate(313.2deg);
}
.jj jj-circle-c100 .m100.p88 .bar {
  -webkit-transform: rotate(316.8deg);
  -moz-transform: rotate(316.8deg);
  -ms-transform: rotate(316.8deg);
  -o-transform: rotate(316.8deg);
  transform: rotate(316.8deg);
}
.jj jj-circle-c100 .m100.p89 .bar {
  -webkit-transform: rotate(320.4deg);
  -moz-transform: rotate(320.4deg);
  -ms-transform: rotate(320.4deg);
  -o-transform: rotate(320.4deg);
  transform: rotate(320.4deg);
}
.jj jj-circle-c100 .m100.p90 .bar {
  -webkit-transform: rotate(324deg);
  -moz-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  -o-transform: rotate(324deg);
  transform: rotate(324deg);
}
.jj jj-circle-c100 .m100.p91 .bar {
  -webkit-transform: rotate(327.6deg);
  -moz-transform: rotate(327.6deg);
  -ms-transform: rotate(327.6deg);
  -o-transform: rotate(327.6deg);
  transform: rotate(327.6deg);
}
.jj jj-circle-c100 .m100.p92 .bar {
  -webkit-transform: rotate(331.2deg);
  -moz-transform: rotate(331.2deg);
  -ms-transform: rotate(331.2deg);
  -o-transform: rotate(331.2deg);
  transform: rotate(331.2deg);
}
.jj jj-circle-c100 .m100.p93 .bar {
  -webkit-transform: rotate(334.8deg);
  -moz-transform: rotate(334.8deg);
  -ms-transform: rotate(334.8deg);
  -o-transform: rotate(334.8deg);
  transform: rotate(334.8deg);
}
.jj jj-circle-c100 .m100.p94 .bar {
  -webkit-transform: rotate(338.4deg);
  -moz-transform: rotate(338.4deg);
  -ms-transform: rotate(338.4deg);
  -o-transform: rotate(338.4deg);
  transform: rotate(338.4deg);
}
.jj jj-circle-c100 .m100.p95 .bar {
  -webkit-transform: rotate(342deg);
  -moz-transform: rotate(342deg);
  -ms-transform: rotate(342deg);
  -o-transform: rotate(342deg);
  transform: rotate(342deg);
}
.jj jj-circle-c100 .m100.p96 .bar {
  -webkit-transform: rotate(345.6deg);
  -moz-transform: rotate(345.6deg);
  -ms-transform: rotate(345.6deg);
  -o-transform: rotate(345.6deg);
  transform: rotate(345.6deg);
}
.jj jj-circle-c100 .m100.p97 .bar {
  -webkit-transform: rotate(349.2deg);
  -moz-transform: rotate(349.2deg);
  -ms-transform: rotate(349.2deg);
  -o-transform: rotate(349.2deg);
  transform: rotate(349.2deg);
}
.jj jj-circle-c100 .m100.p98 .bar {
  -webkit-transform: rotate(352.8deg);
  -moz-transform: rotate(352.8deg);
  -ms-transform: rotate(352.8deg);
  -o-transform: rotate(352.8deg);
  transform: rotate(352.8deg);
}
.jj jj-circle-c100 .m100.p99 .bar {
  -webkit-transform: rotate(356.4deg);
  -moz-transform: rotate(356.4deg);
  -ms-transform: rotate(356.4deg);
  -o-transform: rotate(356.4deg);
  transform: rotate(356.4deg);
}
.jj jj-circle-c100 .m100.p100 .bar {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.jj jj-circle-c100 .m100[data-value="1"] .bar {
  -webkit-transform: rotate(3.6deg);
  -moz-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  -o-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
}
.jj jj-circle-c100 .m100[data-value="2"] .bar {
  -webkit-transform: rotate(7.2deg);
  -moz-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  -o-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
}
.jj jj-circle-c100 .m100[data-value="3"] .bar {
  -webkit-transform: rotate(10.8deg);
  -moz-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  -o-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
}
.jj jj-circle-c100 .m100[data-value="4"] .bar {
  -webkit-transform: rotate(14.4deg);
  -moz-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  -o-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
}
.jj jj-circle-c100 .m100[data-value="5"] .bar {
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  transform: rotate(18deg);
}
.jj jj-circle-c100 .m100[data-value="6"] .bar {
  -webkit-transform: rotate(21.6deg);
  -moz-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  -o-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
}
.jj jj-circle-c100 .m100[data-value="7"] .bar {
  -webkit-transform: rotate(25.2deg);
  -moz-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  -o-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
}
.jj jj-circle-c100 .m100[data-value="8"] .bar {
  -webkit-transform: rotate(28.8deg);
  -moz-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  -o-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
}
.jj jj-circle-c100 .m100[data-value="9"] .bar {
  -webkit-transform: rotate(32.4deg);
  -moz-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  -o-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
}
.jj jj-circle-c100 .m100[data-value="10"] .bar {
  -webkit-transform: rotate(36deg);
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -o-transform: rotate(36deg);
  transform: rotate(36deg);
}
.jj jj-circle-c100 .m100[data-value="11"] .bar {
  -webkit-transform: rotate(39.6deg);
  -moz-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  -o-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
}
.jj jj-circle-c100 .m100[data-value="12"] .bar {
  -webkit-transform: rotate(43.2deg);
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -o-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}
.jj jj-circle-c100 .m100[data-value="13"] .bar {
  -webkit-transform: rotate(46.8deg);
  -moz-transform: rotate(46.8deg);
  -ms-transform: rotate(46.8deg);
  -o-transform: rotate(46.8deg);
  transform: rotate(46.8deg);
}
.jj jj-circle-c100 .m100[data-value="14"] .bar {
  -webkit-transform: rotate(50.4deg);
  -moz-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  -o-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
}
.jj jj-circle-c100 .m100[data-value="15"] .bar {
  -webkit-transform: rotate(54deg);
  -moz-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  -o-transform: rotate(54deg);
  transform: rotate(54deg);
}
.jj jj-circle-c100 .m100[data-value="16"] .bar {
  -webkit-transform: rotate(57.6deg);
  -moz-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  -o-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
}
.jj jj-circle-c100 .m100[data-value="17"] .bar {
  -webkit-transform: rotate(61.2deg);
  -moz-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  -o-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
}
.jj jj-circle-c100 .m100[data-value="18"] .bar {
  -webkit-transform: rotate(64.8deg);
  -moz-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  -o-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
}
.jj jj-circle-c100 .m100[data-value="19"] .bar {
  -webkit-transform: rotate(68.4deg);
  -moz-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  -o-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
}
.jj jj-circle-c100 .m100[data-value="20"] .bar {
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  transform: rotate(72deg);
}
.jj jj-circle-c100 .m100[data-value="21"] .bar {
  -webkit-transform: rotate(75.6deg);
  -moz-transform: rotate(75.6deg);
  -ms-transform: rotate(75.6deg);
  -o-transform: rotate(75.6deg);
  transform: rotate(75.6deg);
}
.jj jj-circle-c100 .m100[data-value="22"] .bar {
  -webkit-transform: rotate(79.2deg);
  -moz-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  -o-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
}
.jj jj-circle-c100 .m100[data-value="23"] .bar {
  -webkit-transform: rotate(82.8deg);
  -moz-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  -o-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
}
.jj jj-circle-c100 .m100[data-value="24"] .bar {
  -webkit-transform: rotate(86.4deg);
  -moz-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  -o-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
}
.jj jj-circle-c100 .m100[data-value="25"] .bar {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.jj jj-circle-c100 .m100[data-value="26"] .bar {
  -webkit-transform: rotate(93.6deg);
  -moz-transform: rotate(93.6deg);
  -ms-transform: rotate(93.6deg);
  -o-transform: rotate(93.6deg);
  transform: rotate(93.6deg);
}
.jj jj-circle-c100 .m100[data-value="27"] .bar {
  -webkit-transform: rotate(97.2deg);
  -moz-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  -o-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
}
.jj jj-circle-c100 .m100[data-value="28"] .bar {
  -webkit-transform: rotate(100.8deg);
  -moz-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  -o-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
}
.jj jj-circle-c100 .m100[data-value="29"] .bar {
  -webkit-transform: rotate(104.4deg);
  -moz-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  -o-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
}
.jj jj-circle-c100 .m100[data-value="30"] .bar {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
}
.jj jj-circle-c100 .m100[data-value="31"] .bar {
  -webkit-transform: rotate(111.6deg);
  -moz-transform: rotate(111.6deg);
  -ms-transform: rotate(111.6deg);
  -o-transform: rotate(111.6deg);
  transform: rotate(111.6deg);
}
.jj jj-circle-c100 .m100[data-value="32"] .bar {
  -webkit-transform: rotate(115.2deg);
  -moz-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  -o-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
}
.jj jj-circle-c100 .m100[data-value="33"] .bar {
  -webkit-transform: rotate(118.8deg);
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -o-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.jj jj-circle-c100 .m100[data-value="34"] .bar {
  -webkit-transform: rotate(122.4deg);
  -moz-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  -o-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
}
.jj jj-circle-c100 .m100[data-value="35"] .bar {
  -webkit-transform: rotate(126deg);
  -moz-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  -o-transform: rotate(126deg);
  transform: rotate(126deg);
}
.jj jj-circle-c100 .m100[data-value="36"] .bar {
  -webkit-transform: rotate(129.6deg);
  -moz-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  -o-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
}
.jj jj-circle-c100 .m100[data-value="37"] .bar {
  -webkit-transform: rotate(133.2deg);
  -moz-transform: rotate(133.2deg);
  -ms-transform: rotate(133.2deg);
  -o-transform: rotate(133.2deg);
  transform: rotate(133.2deg);
}
.jj jj-circle-c100 .m100[data-value="38"] .bar {
  -webkit-transform: rotate(136.8deg);
  -moz-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  -o-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
}
.jj jj-circle-c100 .m100[data-value="39"] .bar {
  -webkit-transform: rotate(140.4deg);
  -moz-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  -o-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
}
.jj jj-circle-c100 .m100[data-value="40"] .bar {
  -webkit-transform: rotate(144deg);
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  transform: rotate(144deg);
}
.jj jj-circle-c100 .m100[data-value="41"] .bar {
  -webkit-transform: rotate(147.6deg);
  -moz-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  -o-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
}
.jj jj-circle-c100 .m100[data-value="42"] .bar {
  -webkit-transform: rotate(151.2deg);
  -moz-transform: rotate(151.2deg);
  -ms-transform: rotate(151.2deg);
  -o-transform: rotate(151.2deg);
  transform: rotate(151.2deg);
}
.jj jj-circle-c100 .m100[data-value="43"] .bar {
  -webkit-transform: rotate(154.8deg);
  -moz-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  -o-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
}
.jj jj-circle-c100 .m100[data-value="44"] .bar {
  -webkit-transform: rotate(158.4deg);
  -moz-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  -o-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
}
.jj jj-circle-c100 .m100[data-value="45"] .bar {
  -webkit-transform: rotate(162deg);
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -o-transform: rotate(162deg);
  transform: rotate(162deg);
}
.jj jj-circle-c100 .m100[data-value="46"] .bar {
  -webkit-transform: rotate(165.6deg);
  -moz-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  -o-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
}
.jj jj-circle-c100 .m100[data-value="47"] .bar {
  -webkit-transform: rotate(169.2deg);
  -moz-transform: rotate(169.2deg);
  -ms-transform: rotate(169.2deg);
  -o-transform: rotate(169.2deg);
  transform: rotate(169.2deg);
}
.jj jj-circle-c100 .m100[data-value="48"] .bar {
  -webkit-transform: rotate(172.8deg);
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -o-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}
.jj jj-circle-c100 .m100[data-value="49"] .bar {
  -webkit-transform: rotate(176.4deg);
  -moz-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  -o-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
}
.jj jj-circle-c100 .m100[data-value="50"] .bar {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.jj jj-circle-c100 .m100[data-value="51"] .bar {
  -webkit-transform: rotate(183.6deg);
  -moz-transform: rotate(183.6deg);
  -ms-transform: rotate(183.6deg);
  -o-transform: rotate(183.6deg);
  transform: rotate(183.6deg);
}
.jj jj-circle-c100 .m100[data-value="52"] .bar {
  -webkit-transform: rotate(187.2deg);
  -moz-transform: rotate(187.2deg);
  -ms-transform: rotate(187.2deg);
  -o-transform: rotate(187.2deg);
  transform: rotate(187.2deg);
}
.jj jj-circle-c100 .m100[data-value="53"] .bar {
  -webkit-transform: rotate(190.8deg);
  -moz-transform: rotate(190.8deg);
  -ms-transform: rotate(190.8deg);
  -o-transform: rotate(190.8deg);
  transform: rotate(190.8deg);
}
.jj jj-circle-c100 .m100[data-value="54"] .bar {
  -webkit-transform: rotate(194.4deg);
  -moz-transform: rotate(194.4deg);
  -ms-transform: rotate(194.4deg);
  -o-transform: rotate(194.4deg);
  transform: rotate(194.4deg);
}
.jj jj-circle-c100 .m100[data-value="55"] .bar {
  -webkit-transform: rotate(198deg);
  -moz-transform: rotate(198deg);
  -ms-transform: rotate(198deg);
  -o-transform: rotate(198deg);
  transform: rotate(198deg);
}
.jj jj-circle-c100 .m100[data-value="56"] .bar {
  -webkit-transform: rotate(201.6deg);
  -moz-transform: rotate(201.6deg);
  -ms-transform: rotate(201.6deg);
  -o-transform: rotate(201.6deg);
  transform: rotate(201.6deg);
}
.jj jj-circle-c100 .m100[data-value="57"] .bar {
  -webkit-transform: rotate(205.2deg);
  -moz-transform: rotate(205.2deg);
  -ms-transform: rotate(205.2deg);
  -o-transform: rotate(205.2deg);
  transform: rotate(205.2deg);
}
.jj jj-circle-c100 .m100[data-value="58"] .bar {
  -webkit-transform: rotate(208.8deg);
  -moz-transform: rotate(208.8deg);
  -ms-transform: rotate(208.8deg);
  -o-transform: rotate(208.8deg);
  transform: rotate(208.8deg);
}
.jj jj-circle-c100 .m100[data-value="59"] .bar {
  -webkit-transform: rotate(212.4deg);
  -moz-transform: rotate(212.4deg);
  -ms-transform: rotate(212.4deg);
  -o-transform: rotate(212.4deg);
  transform: rotate(212.4deg);
}
.jj jj-circle-c100 .m100[data-value="60"] .bar {
  -webkit-transform: rotate(216deg);
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  transform: rotate(216deg);
}
.jj jj-circle-c100 .m100[data-value="61"] .bar {
  -webkit-transform: rotate(219.6deg);
  -moz-transform: rotate(219.6deg);
  -ms-transform: rotate(219.6deg);
  -o-transform: rotate(219.6deg);
  transform: rotate(219.6deg);
}
.jj jj-circle-c100 .m100[data-value="62"] .bar {
  -webkit-transform: rotate(223.2deg);
  -moz-transform: rotate(223.2deg);
  -ms-transform: rotate(223.2deg);
  -o-transform: rotate(223.2deg);
  transform: rotate(223.2deg);
}
.jj jj-circle-c100 .m100[data-value="63"] .bar {
  -webkit-transform: rotate(226.8deg);
  -moz-transform: rotate(226.8deg);
  -ms-transform: rotate(226.8deg);
  -o-transform: rotate(226.8deg);
  transform: rotate(226.8deg);
}
.jj jj-circle-c100 .m100[data-value="64"] .bar {
  -webkit-transform: rotate(230.4deg);
  -moz-transform: rotate(230.4deg);
  -ms-transform: rotate(230.4deg);
  -o-transform: rotate(230.4deg);
  transform: rotate(230.4deg);
}
.jj jj-circle-c100 .m100[data-value="65"] .bar {
  -webkit-transform: rotate(234deg);
  -moz-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  -o-transform: rotate(234deg);
  transform: rotate(234deg);
}
.jj jj-circle-c100 .m100[data-value="66"] .bar {
  -webkit-transform: rotate(237.6deg);
  -moz-transform: rotate(237.6deg);
  -ms-transform: rotate(237.6deg);
  -o-transform: rotate(237.6deg);
  transform: rotate(237.6deg);
}
.jj jj-circle-c100 .m100[data-value="67"] .bar {
  -webkit-transform: rotate(241.2deg);
  -moz-transform: rotate(241.2deg);
  -ms-transform: rotate(241.2deg);
  -o-transform: rotate(241.2deg);
  transform: rotate(241.2deg);
}
.jj jj-circle-c100 .m100[data-value="68"] .bar {
  -webkit-transform: rotate(244.8deg);
  -moz-transform: rotate(244.8deg);
  -ms-transform: rotate(244.8deg);
  -o-transform: rotate(244.8deg);
  transform: rotate(244.8deg);
}
.jj jj-circle-c100 .m100[data-value="69"] .bar {
  -webkit-transform: rotate(248.4deg);
  -moz-transform: rotate(248.4deg);
  -ms-transform: rotate(248.4deg);
  -o-transform: rotate(248.4deg);
  transform: rotate(248.4deg);
}
.jj jj-circle-c100 .m100[data-value="70"] .bar {
  -webkit-transform: rotate(252deg);
  -moz-transform: rotate(252deg);
  -ms-transform: rotate(252deg);
  -o-transform: rotate(252deg);
  transform: rotate(252deg);
}
.jj jj-circle-c100 .m100[data-value="71"] .bar {
  -webkit-transform: rotate(255.6deg);
  -moz-transform: rotate(255.6deg);
  -ms-transform: rotate(255.6deg);
  -o-transform: rotate(255.6deg);
  transform: rotate(255.6deg);
}
.jj jj-circle-c100 .m100[data-value="72"] .bar {
  -webkit-transform: rotate(259.2deg);
  -moz-transform: rotate(259.2deg);
  -ms-transform: rotate(259.2deg);
  -o-transform: rotate(259.2deg);
  transform: rotate(259.2deg);
}
.jj jj-circle-c100 .m100[data-value="73"] .bar {
  -webkit-transform: rotate(262.8deg);
  -moz-transform: rotate(262.8deg);
  -ms-transform: rotate(262.8deg);
  -o-transform: rotate(262.8deg);
  transform: rotate(262.8deg);
}
.jj jj-circle-c100 .m100[data-value="74"] .bar {
  -webkit-transform: rotate(266.4deg);
  -moz-transform: rotate(266.4deg);
  -ms-transform: rotate(266.4deg);
  -o-transform: rotate(266.4deg);
  transform: rotate(266.4deg);
}
.jj jj-circle-c100 .m100[data-value="75"] .bar {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.jj jj-circle-c100 .m100[data-value="76"] .bar {
  -webkit-transform: rotate(273.6deg);
  -moz-transform: rotate(273.6deg);
  -ms-transform: rotate(273.6deg);
  -o-transform: rotate(273.6deg);
  transform: rotate(273.6deg);
}
.jj jj-circle-c100 .m100[data-value="77"] .bar {
  -webkit-transform: rotate(277.2deg);
  -moz-transform: rotate(277.2deg);
  -ms-transform: rotate(277.2deg);
  -o-transform: rotate(277.2deg);
  transform: rotate(277.2deg);
}
.jj jj-circle-c100 .m100[data-value="78"] .bar {
  -webkit-transform: rotate(280.8deg);
  -moz-transform: rotate(280.8deg);
  -ms-transform: rotate(280.8deg);
  -o-transform: rotate(280.8deg);
  transform: rotate(280.8deg);
}
.jj jj-circle-c100 .m100[data-value="79"] .bar {
  -webkit-transform: rotate(284.4deg);
  -moz-transform: rotate(284.4deg);
  -ms-transform: rotate(284.4deg);
  -o-transform: rotate(284.4deg);
  transform: rotate(284.4deg);
}
.jj jj-circle-c100 .m100[data-value="80"] .bar {
  -webkit-transform: rotate(288deg);
  -moz-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -o-transform: rotate(288deg);
  transform: rotate(288deg);
}
.jj jj-circle-c100 .m100[data-value="81"] .bar {
  -webkit-transform: rotate(291.6deg);
  -moz-transform: rotate(291.6deg);
  -ms-transform: rotate(291.6deg);
  -o-transform: rotate(291.6deg);
  transform: rotate(291.6deg);
}
.jj jj-circle-c100 .m100[data-value="82"] .bar {
  -webkit-transform: rotate(295.2deg);
  -moz-transform: rotate(295.2deg);
  -ms-transform: rotate(295.2deg);
  -o-transform: rotate(295.2deg);
  transform: rotate(295.2deg);
}
.jj jj-circle-c100 .m100[data-value="83"] .bar {
  -webkit-transform: rotate(298.8deg);
  -moz-transform: rotate(298.8deg);
  -ms-transform: rotate(298.8deg);
  -o-transform: rotate(298.8deg);
  transform: rotate(298.8deg);
}
.jj jj-circle-c100 .m100[data-value="84"] .bar {
  -webkit-transform: rotate(302.4deg);
  -moz-transform: rotate(302.4deg);
  -ms-transform: rotate(302.4deg);
  -o-transform: rotate(302.4deg);
  transform: rotate(302.4deg);
}
.jj jj-circle-c100 .m100[data-value="85"] .bar {
  -webkit-transform: rotate(306deg);
  -moz-transform: rotate(306deg);
  -ms-transform: rotate(306deg);
  -o-transform: rotate(306deg);
  transform: rotate(306deg);
}
.jj jj-circle-c100 .m100[data-value="86"] .bar {
  -webkit-transform: rotate(309.6deg);
  -moz-transform: rotate(309.6deg);
  -ms-transform: rotate(309.6deg);
  -o-transform: rotate(309.6deg);
  transform: rotate(309.6deg);
}
.jj jj-circle-c100 .m100[data-value="87"] .bar {
  -webkit-transform: rotate(313.2deg);
  -moz-transform: rotate(313.2deg);
  -ms-transform: rotate(313.2deg);
  -o-transform: rotate(313.2deg);
  transform: rotate(313.2deg);
}
.jj jj-circle-c100 .m100[data-value="88"] .bar {
  -webkit-transform: rotate(316.8deg);
  -moz-transform: rotate(316.8deg);
  -ms-transform: rotate(316.8deg);
  -o-transform: rotate(316.8deg);
  transform: rotate(316.8deg);
}
.jj jj-circle-c100 .m100[data-value="89"] .bar {
  -webkit-transform: rotate(320.4deg);
  -moz-transform: rotate(320.4deg);
  -ms-transform: rotate(320.4deg);
  -o-transform: rotate(320.4deg);
  transform: rotate(320.4deg);
}
.jj jj-circle-c100 .m100[data-value="90"] .bar {
  -webkit-transform: rotate(324deg);
  -moz-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  -o-transform: rotate(324deg);
  transform: rotate(324deg);
}
.jj jj-circle-c100 .m100[data-value="91"] .bar {
  -webkit-transform: rotate(327.6deg);
  -moz-transform: rotate(327.6deg);
  -ms-transform: rotate(327.6deg);
  -o-transform: rotate(327.6deg);
  transform: rotate(327.6deg);
}
.jj jj-circle-c100 .m100[data-value="92"] .bar {
  -webkit-transform: rotate(331.2deg);
  -moz-transform: rotate(331.2deg);
  -ms-transform: rotate(331.2deg);
  -o-transform: rotate(331.2deg);
  transform: rotate(331.2deg);
}
.jj jj-circle-c100 .m100[data-value="93"] .bar {
  -webkit-transform: rotate(334.8deg);
  -moz-transform: rotate(334.8deg);
  -ms-transform: rotate(334.8deg);
  -o-transform: rotate(334.8deg);
  transform: rotate(334.8deg);
}
.jj jj-circle-c100 .m100[data-value="94"] .bar {
  -webkit-transform: rotate(338.4deg);
  -moz-transform: rotate(338.4deg);
  -ms-transform: rotate(338.4deg);
  -o-transform: rotate(338.4deg);
  transform: rotate(338.4deg);
}
.jj jj-circle-c100 .m100[data-value="95"] .bar {
  -webkit-transform: rotate(342deg);
  -moz-transform: rotate(342deg);
  -ms-transform: rotate(342deg);
  -o-transform: rotate(342deg);
  transform: rotate(342deg);
}
.jj jj-circle-c100 .m100[data-value="96"] .bar {
  -webkit-transform: rotate(345.6deg);
  -moz-transform: rotate(345.6deg);
  -ms-transform: rotate(345.6deg);
  -o-transform: rotate(345.6deg);
  transform: rotate(345.6deg);
}
.jj jj-circle-c100 .m100[data-value="97"] .bar {
  -webkit-transform: rotate(349.2deg);
  -moz-transform: rotate(349.2deg);
  -ms-transform: rotate(349.2deg);
  -o-transform: rotate(349.2deg);
  transform: rotate(349.2deg);
}
.jj jj-circle-c100 .m100[data-value="98"] .bar {
  -webkit-transform: rotate(352.8deg);
  -moz-transform: rotate(352.8deg);
  -ms-transform: rotate(352.8deg);
  -o-transform: rotate(352.8deg);
  transform: rotate(352.8deg);
}
.jj jj-circle-c100 .m100[data-value="99"] .bar {
  -webkit-transform: rotate(356.4deg);
  -moz-transform: rotate(356.4deg);
  -ms-transform: rotate(356.4deg);
  -o-transform: rotate(356.4deg);
  transform: rotate(356.4deg);
}
.jj jj-circle-c100 .m100[data-value="100"] .bar {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.jj jj-circle-c100 .m100:hover {
  cursor: default;
}
.jj jj-circle-c100 .m100 > span {
  font-size: 0.3em;
  color: #307bbb;
}
.jj jj-circle-c100 .m100.dark {
  background-color: #777777;
}
.jj jj-circle-c100 .m100.dark .bar,
.jj jj-circle-c100 .m100.dark .fill {
  border-color: #c6ff00 !important;
}
.jj jj-circle-c100 .m100.dark > span {
  color: #777777;
}
.jj jj-circle-c100 .m100.dark:after {
  background-color: #666666;
}
.jj jj-circle-c100 .m100.dark:hover > span {
  color: #c6ff00;
}
.jj jj-circle-c100 .m100.green .bar,
.jj jj-circle-c100 .m100.green .fill {
  border-color: #4db53c !important;
}
.jj jj-circle-c100 .m100.green:hover > span {
  color: #4db53c;
}
.jj jj-circle-c100 .m100.green.dark .bar,
.jj jj-circle-c100 .m100.green.dark .fill {
  border-color: #5fd400 !important;
}
.jj jj-circle-c100 .m100.green.dark:hover > span {
  color: #5fd400;
}
.jj jj-circle-c100 .m100.orange .bar,
.jj jj-circle-c100 .m100.orange .fill {
  border-color: #dd9d22 !important;
}
.jj jj-circle-c100 .m100.orange:hover > span {
  color: #dd9d22;
}
.jj jj-circle-c100 .m100.orange.dark .bar,
.jj jj-circle-c100 .m100.orange.dark .fill {
  border-color: #e08833 !important;
}
.jj jj-circle-c100 .m100.orange.dark:hover > span {
  color: #e08833;
}

/* ==JJCircleChartSimple.720.class End ================ */




/* ==JJFloatChart.720.class Start ================ */
/* ==JJFloatChart.720.class================ */
.jj jj-float {
  display: block;
  position: relative;
  min-height: 100px;
}

/* ==JJFloatChart.720.class End ================ */




/* ==JJGantChart.720.class Start ================ */
/* ==JJGantChart.720.class================ */
.jj jj-ganttchart {
  position: relative;
  display: block;
}

/* ==JJGantChart.720.class End ================ */




/* ==JJGauge.720.class Start ================ */
/* ==JJGauge.720.class================ */
.jj jj-gauge {
  display: block;
  position: relative;
  min-width: 100px;
  min-height: 50px;
  text-align: center;
}
.jj jj-gauge canvas {
  width: auto;
  height: 100%;
}

/* ==JJGauge.720.class End ================ */




/* ==JJGradientBar.720.class Start ================ */
/* ==JJGradientBar.720.class================ */
.jj jj-gradient-bar {
  position: relative;
  display: block;
}
.jj jj-gradient-bar[data-direction='horizontal'] {
  background: -webkit-linear-gradient(left, #008299, #5cd1e5);
  background: -moz-linear-gradient(left, #008299, #5cd1e5);
  background: -ms-linear-gradient(left, #008299, #5cd1e5);
  background: -o-linear-gradient(left, #008299, #5cd1e5);
  background: linear-gradient(-90deg, #008299, #5cd1e5);
  background-size: 80%;
  background-repeat: no-repeat;
  color: blue;
  text-align: left;
  margin-bottom: 1px;
  min-height: 1.5em;
}
.jj jj-gradient-bar[data-direction='horizontal'] t {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.jj jj-gradient-bar[data-direction='vertical'] {
  background: -webkit-linear-gradient(0deg, #008299, #5cd1e5);
  background: -moz-linear-gradient(0deg, #008299, #5cd1e5);
  background: -ms-linear-gradient(0deg, #008299, #5cd1e5);
  background: -o-linear-gradient(0deg, #008299, #5cd1e5);
  background: linear-gradient(-180deg, #008299, #5cd1e5);
  background-size: 100% 80%;
  background-repeat: no-repeat;
  background-position: center bottom;
  color: blue;
  margin-bottom: 1px;
  text-align: center;
  padding-top: 10px;
}

/* ==JJGradientBar.720.class End ================ */




/* ==JJProgressBar.720.class Start ================ */
/* ==JJProgressBar.720.class================ */

/* ==JJProgressBar.720.class End ================ */




/* ==JJSankey.720.class Start ================ */
/* ==JJSankey.720.class================ */
.jj jj-sankey {
  display: block;
  position: relative;
  width: 800px;
  height: 400px;
}
.jj jj-sankey .link {
  fill: none;
  stroke: #000;
  stroke-opacity: 0.2;
}
.jj jj-sankey .link:hover {
  stroke-opacity: 0.5;
}

/* ==JJSankey.720.class End ================ */




/* ==JJShapeNode.720.class Start ================ */
/* ==JJShapeNode.720.class================ */
.jj .jj-shape.w.process {
  position: absolute;
  display: block;
  min-height: 10px;
  min-width: 10px;
  cursor: pointer;
  height: 300px;
  width: 300px;
  padding: 0px;
  z-index: 1;
  background-color: var(--white);
  color: var(--dark);
  border: 1px solid #2e6f9a;
  box-shadow: 2px 2px 19px #e0e0e0;
  -o-box-shadow: 2px 2px 19px #e0e0e0;
  -webkit-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
  display: flex;
  flex-direction: column;
}
.jj .jj-shape.w.process .shape-title {
  display: block;
  background: var(--secondary);
  padding: 3px;
  color: white;
  border-radius: 8px 8px 0 0;
  flex: none;
  cursor: move;
}
.jj .jj-shape.w.process .shape-title i {
  position: absolute;
  font-size: 18px;
  margin: 3px;
}
.jj .jj-shape.w.process .shape-title label {
  display: block;
  text-align: center;
}
.jj .jj-shape.w.process .shape-body {
  flex-grow: 1;
  overflow: hidden;
}
.jj .jj-shape.w.process.selected .shape-title {
  background: var(--primary);
}
.jj jj-shape-node textarea.form-control {
  height: 100%;
  resize: none;
}

/* ==JJShapeNode.720.class End ================ */




/* ==JJShapeNode.formGrid.720.class Start ================ */
/* ==JJShapeNode.formGrid.720.class================ */
.jj jj-shape-formgrid.jj-shape.w.process {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 800px;
  width: 600px;
}
.jj jj-shape-formgrid.jj-shape.w.process jj-form {
  height: 100%;
  flex-grow: 1;
  position: relative;
}
.jj jj-shape-formgrid.jj-shape.w.process jj-form > header {
  display: none;
}

/* ==JJShapeNode.formGrid.720.class End ================ */




/* ==JJShapeNode.iframe.720.class Start ================ */
/* ==JJShapeNode.iframe.720.class================ */
.jj jj-shape-iframe.jj-shape.w.process {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.jj jj-shape-iframe.jj-shape.w.process iframe {
  width: 200%;
  height: calc(200% - 60px);
  flex: none;
  transform-origin: left top;
  transform: scale(0.5);
}

/* ==JJShapeNode.iframe.720.class End ================ */




/* ==JJShapeNode.image.720.class Start ================ */
/* ==JJShapeNode.image.720.class================ */
.jj jj-shape-image img {
  position: relative;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%);
  max-height: 100%!important;
  max-width: 100%!important;
}

/* ==JJShapeNode.image.720.class End ================ */




/* ==JJShapeNode.memo.720.class Start ================ */
/* ==JJShapeNode.memo.720.class================ */
.jj jj-shape-memo.jj-shape.w.process {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
}
.jj jj-shape-memo.jj-shape.w.process textarea {
  min-width: 300px;
  height: auto;
  flex-grow: 1;
}

/* ==JJShapeNode.memo.720.class End ================ */




/* ==JJShapeNode.youtube.720.class Start ================ */
/* ==JJShapeNode.youtube.720.class================ */
.jj jj-shape-youtube iframe {
  flex-grow: 1;
}

/* ==JJShapeNode.youtube.720.class End ================ */




/* ==JJDiagram.720.class Start ================ */
/* ==JJDiagram.720.class================ */
.jj jj-diagram {
  position: relative;
  display: block;
  border: 5px solid #ccc;
  background-color: white;
  height: 100%;
  min-height: 300px;
  overflow: auto;
}
.jj jj-diagram .w {
  padding: 5px;
  position: absolute;
  z-index: 4;
  border: 1px solid #2e6f9a;
  box-shadow: 2px 2px 19px #e0e0e0;
  -o-box-shadow: 2px 2px 19px #e0e0e0;
  -webkit-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: move;
  background-color: var(--basecolor1);
  color: var(--text3);
  font-size: 11px;
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-diagram .w:hover {
  background-color: var(--basecolor4);
  color: var(--text1);
}
.jj jj-diagram .w:hover .ep {
  display: block;
}
.jj jj-diagram .aLabel {
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-diagram .aLabel.jtk-hover,
.jj jj-diagram .jtk-source-hover,
.jj jj-diagram .jtk-target-hover {
  background-color: #1e8151;
  color: white;
}
.jj jj-diagram .aLabel {
  background-color: white;
  opacity: 0.8;
  padding: 0.3em;
  border-radius: 0.5em;
  border: 1px solid #346789;
  cursor: pointer;
  z-index: 3;
}
.jj jj-diagram .ep {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  background-color: orange;
  cursor: pointer;
  box-shadow: 0 0 2px black;
  -webkit-transition: -webkit-box-shadow 0.25s ease-in;
  -moz-transition: -moz-box-shadow 0.25s ease-in;
  transition: box-shadow 0.25s ease-in;
  transform: translate(-50%, -50%);
}
.jj jj-diagram .ep:hover {
  box-shadow: 0 0 6px black;
}
.jj jj-diagram[data-mode='runtime'] .ep {
  display: none !important;
}
.jj jj-diagram .jtk-connector,
.jj jj-diagram .jtk-endpoint {
  z-index: 5;
}
.jj jj-diagram .jtk-connector.selected path,
.jj jj-diagram .jtk-endpoint.selected path {
  stroke: #e9595b !important;
}
.jj jj-diagram .jtk-connector.selected path:last-child,
.jj jj-diagram .jtk-endpoint.selected path:last-child {
  fill: #e9595b !important;
}
.jj jj-diagram .dragHover {
  border: 2px solid orange;
}
.jj jj-diagram path,
.jj jj-diagram .jtk-endpoint {
  cursor: pointer;
}
.jj jj-diagram .group-container {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  background-color: WhiteSmoke;
  font-size: 12px;
  cursor: move;
}
.jj jj-diagram .group-container .title {
  background-color: #abc1bb;
  padding: 0 16px;
  font-size: 13px;
  line-height: 30px;
  border-radius: 10px 10px 0 0;
}
.jj jj-diagram .group-container ul {
  margin-left: 25px;
  padding: 0;
}
.jj jj-diagram .group-container ul li {
  list-style-type: circle;
  margin-bottom: 7px;
}
.jj jj-diagram .group-container.collapsed {
  height: 40px !important;
  overflow: hidden;
}
.jj jj-diagram .group-container.collapsed > .group-body {
  display: none;
}
.jj jj-diagram .group-container .del,
.jj jj-diagram .group-container .node-collapse {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: white;
  padding: 1px;
  cursor: pointer;
  font-size: 13px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  display: block;
}
.jj jj-diagram .group-container .del:after {
  content: 'X';
}
.jj jj-diagram .group-container .node-collapse {
  right: 29px;
  text-align: center;
}
.jj jj-diagram .group-container .node-collapse:after {
  content: '-';
}
.jj jj-diagram .group-container.collapsed .node-collapse:after {
  content: '+';
}
.jj jj-diagram .group-container .del[delete-all] {
  background-color: pink;
}
.jj jj-diagram .group-container.selected {
  opacity: 0.8;
}
.jj jj-diagram .group-image {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ccc;
}
.jj jj-diagram .group-image > .group-body {
  flex-grow: 1;
  background-size: cover;
  min-height: 100px;
  border: 5px solid white;
}
.jj jj-diagram .image-item img {
  width: auto;
  height: auto;
  border-radius: 0;
}
.jj jj-diagram .jtk-connector path {
  stroke-width: 1;
}
.jj jj-diagram .jtk-group-collapsed .w,
.jj jj-diagram .jtk-group-collapsed ul,
.jj jj-diagram .jtk-group-collapsed .container,
.jj jj-diagram .jtk-group-collapsed .name {
  display: none;
}
.jj jj-diagram .jtk-drag-hover {
  outline: 4px solid cornflowerblue;
}
.jj jj-diagram .katavorio-ghost-proxy {
  outline: 2px solid red;
}
.jj jj-diagram .w[objtype='table'] {
  padding: 0;
  overflow: hidden;
}
.jj jj-diagram .w[objtype='table'] > .table-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.jj jj-diagram .w[objtype='table'] > .table-wrap > h4 {
  flex-grow: 0;
}
.jj jj-diagram .w[objtype='table'] > .table-wrap > ul {
  flex-grow: 1;
  overflow: auto;
}

/* ==JJDiagram.720.class End ================ */




/* ==JJErdDiagram.720.class Start ================ */
/* ==JJErdDiagram.720.class================ */
.jj jj-erd-diagram {
  position: relative;
  display: block;
  border: 5px solid #ccc;
  background-color: white;
  height: 100%;
  min-height: 300px;
  overflow: auto;
}
.jj jj-erd-diagram .w {
  padding: 5px;
  position: absolute;
  z-index: 4;
  border: 1px solid #2e6f9a;
  min-width: 100px;
  cursor: move;
  color: var(--secondary);
  font-size: 11px;
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-erd-diagram .w .list-group-item {
  background-color: transparent;
}
.jj jj-erd-diagram .w > img {
  width: 100%;
  height: 100%;
}
.jj jj-erd-diagram .w [data-render="JJChart"] {
  width: 100%;
  height: 100%;
}
.jj jj-erd-diagram .w:hover {
  color: var(--text1);
  box-shadow: 2px 2px 19px #e0e0e0;
  -o-box-shadow: 2px 2px 19px #e0e0e0;
  -webkit-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.jj jj-erd-diagram .w:hover .ep {
  display: block;
}
.jj jj-erd-diagram .aLabel {
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-erd-diagram .aLabel.jtk-hover,
.jj jj-erd-diagram .jtk-source-hover,
.jj jj-erd-diagram .jtk-target-hover {
  background-color: #1e8151;
  color: white;
}
.jj jj-erd-diagram .aLabel {
  background-color: white;
  opacity: 0.8;
  padding: 0.3em;
  border-radius: 0.5em;
  border: 1px solid #346789;
  cursor: pointer;
  z-index: 3;
}
.jj jj-erd-diagram .ep {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  background-color: orange;
  cursor: pointer;
  box-shadow: 0 0 2px black;
  -webkit-transition: -webkit-box-shadow 0.25s ease-in;
  -moz-transition: -moz-box-shadow 0.25s ease-in;
  transition: box-shadow 0.25s ease-in;
  transform: translate(-50%, -50%);
}
.jj jj-erd-diagram .ep:hover {
  box-shadow: 0 0 6px black;
}
.jj jj-erd-diagram .jtk-connector,
.jj jj-erd-diagram .jtk-endpoint {
  z-index: 3;
}
.jj jj-erd-diagram .jtk-connector.selected path,
.jj jj-erd-diagram .jtk-endpoint.selected path {
  stroke: #e9595b !important;
}
.jj jj-erd-diagram .jtk-connector.selected path:last-child,
.jj jj-erd-diagram .jtk-endpoint.selected path:last-child {
  fill: #e9595b !important;
}
.jj jj-erd-diagram .dragHover {
  border: 2px solid orange;
}
.jj jj-erd-diagram path,
.jj jj-erd-diagram .jtk-endpoint {
  cursor: pointer;
}
.jj jj-erd-diagram .group-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  background-color: WhiteSmoke;
  font-size: 12px;
  cursor: move;
}
.jj jj-erd-diagram .group-container > .title {
  background-color: #ABC1BB;
  padding: 0 16px;
  font-size: 13px;
  line-height: 30px;
  border-radius: 10px 10px 0 0;
  flex: none;
}
.jj jj-erd-diagram .group-container > .group-body {
  flex-grow: 1;
}
.jj jj-erd-diagram .group-container ul {
  margin-left: 25px;
  padding: 0;
}
.jj jj-erd-diagram .group-container ul li {
  list-style-type: circle;
  margin-bottom: 7px;
}
.jj jj-erd-diagram .group-container.collapsed {
  height: 40px!important;
  overflow: hidden;
}
.jj jj-erd-diagram .group-container.collapsed > .group-body {
  display: none;
}
.jj jj-erd-diagram .group-container .del,
.jj jj-erd-diagram .group-container .node-collapse {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: white;
  padding: 1px;
  cursor: pointer;
  font-size: 13px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  display: block;
}
.jj jj-erd-diagram .group-container .del:after {
  content: "X";
}
.jj jj-erd-diagram .group-container .node-collapse {
  right: 29px;
  text-align: center;
}
.jj jj-erd-diagram .group-container .node-collapse:after {
  content: "-";
}
.jj jj-erd-diagram .group-container.collapsed .node-collapse:after {
  content: "+";
}
.jj jj-erd-diagram .group-container .del[delete-all] {
  background-color: pink;
}
.jj jj-erd-diagram .group-container.selected {
  opacity: 0.8;
}
.jj jj-erd-diagram .group-image {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ccc;
}
.jj jj-erd-diagram .group-image > .group-body {
  flex-grow: 1;
  background-size: cover;
  min-height: 100px;
  border: 5px solid white;
}
.jj jj-erd-diagram .image-item img {
  width: auto;
  height: auto;
  border-radius: 0;
}
.jj jj-erd-diagram .jtk-connector path {
  stroke-width: 1;
}
.jj jj-erd-diagram .jtk-group-collapsed .w,
.jj jj-erd-diagram .jtk-group-collapsed ul,
.jj jj-erd-diagram .jtk-group-collapsed .container,
.jj jj-erd-diagram .jtk-group-collapsed .name {
  display: none;
}
.jj jj-erd-diagram .jtk-drag-hover {
  outline: 4px solid cornflowerblue;
}
.jj jj-erd-diagram .katavorio-ghost-proxy {
  outline: 2px solid red;
}
.jj jj-erd-diagram .w[objtype="table"] {
  padding: 0;
  overflow: hidden;
}
.jj jj-erd-diagram .w[objtype="table"] > .table-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.jj jj-erd-diagram .w[objtype="table"] > .table-wrap > h4 {
  flex-grow: 0;
}
.jj jj-erd-diagram .w[objtype="table"] > .table-wrap > ul {
  flex-grow: 1;
  overflow: auto;
}
.jj jj-erd-diagram[data-mode="runtime"] .group-container .del,
.jj jj-erd-diagram[data-mode="runtime"] .group-container .node-collapse {
  display: none;
}
.jj jj-erd-diagram[data-mode="runtime"] .ep {
  display: none!important;
}

/* ==JJErdDiagram.720.class End ================ */




/* ==JJProcessDiagram.720.class Start ================ */
/* ==JJProcessDiagram.720.class================ */
.jj jj-process-diagram {
  position: relative;
  display: block;
  border: 5px solid #ccc;
  background-color: white;
  height: 100%;
  min-height: 300px;
  overflow: auto;
}
.jj jj-process-diagram .w {
  padding: 5px;
  position: absolute;
  border: 1px solid #2e6f9a;
  box-shadow: 2px 2px 19px #e0e0e0;
  -o-box-shadow: 2px 2px 19px #e0e0e0;
  -webkit-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: move;
  background-color: var(--white);
  color: var(--text3);
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-process-diagram .w:hover {
  background-color: var(--white);
  color: var(--text1);
}
.jj jj-process-diagram .w:hover .ep {
  display: block;
}
.jj jj-process-diagram .aLabel {
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-process-diagram .aLabel.jtk-hover,
.jj jj-process-diagram .jtk-source-hover,
.jj jj-process-diagram .jtk-target-hover {
  background-color: #1e8151;
  color: white;
}
.jj jj-process-diagram .aLabel {
  background-color: white;
  opacity: 0.8;
  padding: 0.3em;
  border-radius: 0.5em;
  border: 1px solid #346789;
  cursor: pointer;
  z-index: 3;
}
.jj jj-process-diagram .ep {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  z-index: 10;
  background-color: orange;
  cursor: pointer;
  box-shadow: 0 0 2px black;
  -webkit-transition: -webkit-box-shadow 0.25s ease-in;
  -moz-transition: -moz-box-shadow 0.25s ease-in;
  transition: box-shadow 0.25s ease-in;
  transform: translate(-50%, -50%);
}
.jj jj-process-diagram .ep:hover {
  box-shadow: 0 0 6px black;
}
.jj jj-process-diagram[data-mode='runtime'] {
  background-image: none!important;
}
.jj jj-process-diagram[data-mode='runtime'] .ep {
  display: none!important;
}
.jj jj-process-diagram[data-mode='runtime'] .shape-title {
  pointer-events: none;
}
.jj jj-process-diagram[data-mode='runtime'] .w.selected {
  z-index: 25!important;
}
.jj jj-process-diagram[data-mode='studio'] iframe {
  pointer-events: none;
}
.jj jj-process-diagram .jtk-connector.selected path,
.jj jj-process-diagram .jtk-endpoint.selected path {
  stroke: #e9595b !important;
}
.jj jj-process-diagram .jtk-connector.selected path:last-child,
.jj jj-process-diagram .jtk-endpoint.selected path:last-child {
  fill: #e9595b !important;
}
.jj jj-process-diagram .dragHover {
  border: 2px solid orange;
}
.jj jj-process-diagram path,
.jj jj-process-diagram .jtk-endpoint {
  cursor: pointer;
}
.jj jj-process-diagram .group-container {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  background-color: WhiteSmoke;
  font-size: 12px;
  cursor: move;
}
.jj jj-process-diagram .group-container .title {
  background-color: #abc1bb;
  padding: 0 16px;
  font-size: 13px;
  line-height: 30px;
  border-radius: 10px 10px 0 0;
}
.jj jj-process-diagram .group-container ul {
  margin-left: 25px;
  padding: 0;
}
.jj jj-process-diagram .group-container ul li {
  list-style-type: circle;
  margin-bottom: 7px;
}
.jj jj-process-diagram .group-container.collapsed {
  height: 40px !important;
  overflow: hidden;
}
.jj jj-process-diagram .group-container.collapsed > .group-body {
  display: none;
}
.jj jj-process-diagram .group-container .del,
.jj jj-process-diagram .group-container .node-collapse {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: white;
  padding: 1px;
  cursor: pointer;
  font-size: 13px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  display: block;
}
.jj jj-process-diagram .group-container .del:after {
  content: 'X';
}
.jj jj-process-diagram .group-container .node-collapse {
  right: 29px;
  text-align: center;
}
.jj jj-process-diagram .group-container .node-collapse:after {
  content: '-';
}
.jj jj-process-diagram .group-container.collapsed .node-collapse:after {
  content: '+';
}
.jj jj-process-diagram .group-container .del[delete-all] {
  background-color: pink;
}
.jj jj-process-diagram .group-container.selected {
  opacity: 0.8;
}
.jj jj-process-diagram .group-image {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ccc;
}
.jj jj-process-diagram .group-image > .group-body {
  flex-grow: 1;
  background-size: cover;
  min-height: 100px;
  border: 5px solid white;
}
.jj jj-process-diagram .jtk-connector path {
  stroke-width: 1;
}
.jj jj-process-diagram .jtk-group-collapsed .w,
.jj jj-process-diagram .jtk-group-collapsed ul,
.jj jj-process-diagram .jtk-group-collapsed .container,
.jj jj-process-diagram .jtk-group-collapsed .name {
  display: none;
}
.jj jj-process-diagram .jtk-drag-hover {
  outline: 4px solid cornflowerblue;
}
.jj jj-process-diagram .katavorio-ghost-proxy {
  outline: 2px solid red;
}

/* ==JJProcessDiagram.720.class End ================ */




/* ==JJProxyDiagram.720.class Start ================ */
/* ==JJProxyDiagram.720.class================ */
.jj jj-proxy-diagram {
  position: relative;
  display: block;
  border: 5px solid #ccc;
  background-color: white;
  height: 100%;
  min-height: 300px;
  overflow: auto!important;
}
.jj jj-proxy-diagram .w {
  padding: 5px;
  position: absolute;
  z-index: 4;
  border: 1px solid #2e6f9a;
  min-width: 100px;
  cursor: move;
  overflow: hidden;
  color: var(--secondary);
  font-size: 11px;
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-proxy-diagram .w.selected {
  outline: 2px solid blue;
}
.jj jj-proxy-diagram .w .list-group-item {
  background-color: transparent;
}
.jj jj-proxy-diagram .w .list-group-item::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\F096";
  color: transparent;
}
.jj jj-proxy-diagram .w .list-group-item[is-display="true"] {
  color: blue!important;
}
.jj jj-proxy-diagram .w .list-group-item[is-display="true"]::before {
  content: "\F05A";
  color: black;
}
.jj jj-proxy-diagram .w .list-group-item[is-key="true"] {
  color: red!important;
}
.jj jj-proxy-diagram .w .list-group-item[is-key="true"]::before {
  content: "\F084";
  color: black;
}
.jj jj-proxy-diagram .w > img {
  width: 100%;
  height: 100%;
}
.jj jj-proxy-diagram .w [data-render="JJChart"] {
  width: 100%;
  height: 100%;
}
.jj jj-proxy-diagram .w::before {
  position: absolute;
  top: 2px;
  right: 2px;
  content: attr(jj-id);
}
.jj jj-proxy-diagram .w:hover {
  box-shadow: 2px 2px 19px #e0e0e0;
  -o-box-shadow: 2px 2px 19px #e0e0e0;
  -webkit-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-box-shadow: 2px 2px 19px #e0e0e0;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.jj jj-proxy-diagram .w:hover .ep {
  display: block;
}
.jj jj-proxy-diagram .aLabel {
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-proxy-diagram .aLabel {
  background-color: white;
  transform: translate(-50%, -125%) !important;
  opacity: 0.8;
  border-radius: 0.5em;
  border: 1px solid #346789;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  font-size: 12px;
  z-index: 3;
}
.jj jj-proxy-diagram .ep {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  background-color: orange;
  cursor: pointer;
  box-shadow: 0 0 2px black;
  -webkit-transition: -webkit-box-shadow 0.25s ease-in;
  -moz-transition: -moz-box-shadow 0.25s ease-in;
  transition: box-shadow 0.25s ease-in;
  transform: translate(-50%, -50%);
}
.jj jj-proxy-diagram .jtk-connector,
.jj jj-proxy-diagram .jtk-endpoint {
  z-index: 5;
}
.jj jj-proxy-diagram .jtk-connector.selected path,
.jj jj-proxy-diagram .jtk-endpoint.selected path {
  stroke: #e9595b !important;
}
.jj jj-proxy-diagram .jtk-connector.selected path:last-child,
.jj jj-proxy-diagram .jtk-endpoint.selected path:last-child {
  fill: #e9595b !important;
}
.jj jj-proxy-diagram .dragHover {
  border: 2px solid orange;
}
.jj jj-proxy-diagram path,
.jj jj-proxy-diagram .jtk-endpoint {
  cursor: pointer;
}
.jj jj-proxy-diagram .group-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  background-color: WhiteSmoke;
  font-size: 12px;
  cursor: move;
}
.jj jj-proxy-diagram .group-container > .title {
  background-color: #ABC1BB;
  padding: 0 16px;
  font-size: 13px;
  line-height: 30px;
  border-radius: 10px 10px 0 0;
  flex: none;
}
.jj jj-proxy-diagram .group-container > .group-body {
  flex-grow: 1;
}
.jj jj-proxy-diagram .group-container ul {
  margin-left: 25px;
  padding: 0;
}
.jj jj-proxy-diagram .group-container ul li {
  list-style-type: circle;
  margin-bottom: 7px;
}
.jj jj-proxy-diagram .group-container.collapsed {
  height: 40px!important;
  overflow: hidden;
}
.jj jj-proxy-diagram .group-container.collapsed > .group-body {
  display: none;
}
.jj jj-proxy-diagram .group-container .del,
.jj jj-proxy-diagram .group-container .node-collapse {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: white;
  padding: 1px;
  cursor: pointer;
  font-size: 13px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  display: block;
}
.jj jj-proxy-diagram .group-container .del:after {
  content: "X";
}
.jj jj-proxy-diagram .group-container .node-collapse {
  right: 29px;
  text-align: center;
}
.jj jj-proxy-diagram .group-container .node-collapse:after {
  content: "-";
}
.jj jj-proxy-diagram .group-container.collapsed .node-collapse:after {
  content: "+";
}
.jj jj-proxy-diagram .group-container .del[delete-all] {
  background-color: pink;
}
.jj jj-proxy-diagram .group-container.selected {
  opacity: 0.8;
}
.jj jj-proxy-diagram .group-image {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ccc;
}
.jj jj-proxy-diagram .group-image > .group-body {
  flex-grow: 1;
  background-size: cover;
  min-height: 100px;
  border: 5px solid white;
}
.jj jj-proxy-diagram .image-item img {
  width: auto;
  height: auto;
  border-radius: 0;
}
.jj jj-proxy-diagram .jtk-connector path {
  stroke-width: 1;
}
.jj jj-proxy-diagram .jtk-group-collapsed .w,
.jj jj-proxy-diagram .jtk-group-collapsed ul,
.jj jj-proxy-diagram .jtk-group-collapsed .container,
.jj jj-proxy-diagram .jtk-group-collapsed .name {
  display: none;
}
.jj jj-proxy-diagram .katavorio-ghost-proxy {
  outline: 2px solid red;
}
.jj jj-proxy-diagram .w[objtype="table"] {
  padding: 0;
}
.jj jj-proxy-diagram .w[objtype="table"] > .table-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
}
.jj jj-proxy-diagram .w[objtype="table"] > .table-wrap > h5 {
  padding: 0 5px;
  flex-grow: 0;
  font-weight: bold;
  margin-bottom: 0;
}
.jj jj-proxy-diagram .w[objtype="table"] > .table-wrap > h5 > div {
  margin-top: 5px;
  text-align: end;
}
.jj jj-proxy-diagram .w[objtype="table"] > .table-wrap > h5 > div button {
  border: 1px solid #ccc;
  padding: 5px;
  line-height: 1;
}
.jj jj-proxy-diagram .w[objtype="table"] > .table-wrap > ul {
  flex-grow: 1;
  overflow: auto;
}
.jj jj-proxy-diagram .w[objtype="table"] > .table-wrap > ul .list-group-item {
  padding: 5px;
}
.jj jj-proxy-diagram .w[objtype="table"] > .table-wrap > ul .list-group-item.on {
  background-color: var(--primary);
  color: var(--white);
}
.jj jj-proxy-diagram .w[objtype="table"] > .table-wrap > ul .list-group-item * {
  pointer-events: none;
}
.jj jj-proxy-diagram[data-mode="runtime"] .group-container .del,
.jj jj-proxy-diagram[data-mode="runtime"] .group-container .node-collapse {
  display: none;
}
.jj jj-proxy-diagram[data-mode="runtime"] .ep {
  display: none!important;
}

/* ==JJProxyDiagram.720.class End ================ */




/* ==JJDiv4box.720.class Start ================ */
/* ==JJDiv4box.720.class================ */
.jj jj-div4box {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}
.jj jj-div4box > .toolbar {
  position: relative;
  display: block;
  height: 30px;
}
.jj jj-div4box > .box40-warp {
  position: absolute;
  display: block;
  top: 30px;
  bottom: 0px;
  width: 100%;
}
.jj jj-div4box > .box40-warp > .box1,
.jj jj-div4box > .box40-warp > .box2,
.jj jj-div4box > .box40-warp > .box3,
.jj jj-div4box > .box40-warp > .box4 {
  border: 1px solid #ccc;
  position: absolute;
  background-color: white;
  overflow: hidden;
  -webkit-transition: 0.4s;
}
.jj jj-div4box > .box40-warp > .dragbar-x,
.jj jj-div4box > .box40-warp > .dragbar-x2 {
  position: absolute;
  width: 10px;
  height: 100%;
  transform: translateX(-5px);
  background-color: transparent;
  display: none;
  z-index: 10;
  cursor: w-resize;
}
.jj jj-div4box > .box40-warp > .dragbar-x:hover,
.jj jj-div4box > .box40-warp > .dragbar-x2:hover {
  cursor: w-resize;
  background-color: var(--gray);
}
.jj jj-div4box > .box40-warp > .dragbar-x.starting,
.jj jj-div4box > .box40-warp > .dragbar-x2.starting {
  cursor: n-resize;
  background-color: #ccc;
}
.jj jj-div4box > .box40-warp > .dragbar-y,
.jj jj-div4box > .box40-warp > .dragbar-y2 {
  position: absolute;
  height: 10px;
  transform: translateY(-5px);
  width: 100%;
  display: none;
  background-color: transparent;
  z-index: 10;
  cursor: n-resize;
}
.jj jj-div4box > .box40-warp > .dragbar-y:hover,
.jj jj-div4box > .box40-warp > .dragbar-y2:hover {
  cursor: n-resize;
  background-color: var(--gray);
}
.jj jj-div4box > .box40-warp > .dragbar-y.starting,
.jj jj-div4box > .box40-warp > .dragbar-y2.starting {
  cursor: n-resize;
  background-color: #ccc;
}
.jj jj-div4box .btn-group.tabbox {
  display: none;
}
.jj jj-div4box.tr-off .box1,
.jj jj-div4box.tr-off .box2,
.jj jj-div4box.tr-off .box3,
.jj jj-div4box.tr-off .box4 {
  -webkit-transition: none;
}
.jj jj-div4box[view-type="showTab"] .btn-group.tabbox,
.jj jj-div4box[view-type="showTabH"] .btn-group.tabbox {
  display: block;
}

/* ==JJDiv4box.720.class End ================ */




/* ==JJCodeEditor.720.class Start ================ */
/* ==JJCodeEditor.720.class================ */
.jj jj-code-editor {
  display: block;
  position: relative;
  height: 100%;
  min-height: 200px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.jj jj-code-editor:before {
  display: table;
  content: " ";
}
.jj jj-code-editor:after {
  clear: both;
}
.jj jj-code-editor ul.user-list {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
.jj jj-code-editor ul.user-list img {
  height: 24px;
  width: 24px;
  border-radius: 16px;
  border: 3px solid #ccc;
}
.jj jj-code-editor ul.user-list li {
  padding: 0;
}
.jj jj-code-editor .CodeMirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  font-family: 'D2Coding-Ver1.3.2-20180524';
  font-size: 15px;
}
.jj jj-code-editor .CodeMirror div.CodeMirror-cursor {
  border-left: 2px solid blue;
}
.jj jj-code-editor .CodeMirror .CodeMirror-lint-mark-warning {
  border-bottom: 2px solid blue;
}
.jj jj-code-editor .CodeMirror pre {
  font-family: 'D2Coding-Ver1.3.2-20180524' !important;
  font-size: 15px;
}
.jj jj-code-editor .powered-by-firepad {
  display: none;
}
.jj jj-code-editor .CodeMirror-fullscreen {
  z-index: 109;
}
.jj jj-code-editor .firepad .CodeMirror.CodeMirror-fullscreen {
  position: fixed;
}
.jj jj-code-editor[readonly] .CodeMirror {
  background-color: var(--light);
}

/* ==JJCodeEditor.720.class End ================ */




/* ==JJFormTable.720.class Start ================ */
/* ==JJFormTable.720.class================ */
.jj jj-formtable {
  display: block;
  position: relative;
  padding-bottom: 1rem;
  padding-left: 12px;
  padding-right: 12px;
}
.jj jj-formtable:focus-within > jj-html-toolbar {
  display: block;
}
.jj jj-formtable.selecting {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.jj jj-formtable.selecting > .size-bar {
  display: none!important;
}
.jj jj-formtable.resizing > .size-bar {
  display: block!important;
  background-color: var(--light);
}
.jj jj-formtable table .size-bar {
  position: absolute;
  background-color: light;
  width: 5px;
  margin-left: 0px;
  top: 0 !important;
  z-index: 10;
  bottom: 0;
  cursor: ew-resize;
}
.jj jj-formtable table .size-bar:hover {
  background-color: red;
}
.jj jj-formtable > jj-html-toolbar {
  position: absolute;
  top: -30px;
  display: none;
  width: 94%;
  height: 30px;
  overflow-y: auto;
  z-index: 10;
}
.jj jj-formtable > .size-bar {
  position: absolute;
  background-color: transparent;
  display: none;
  width: 5px;
  margin-left: 0px;
  top: 0!important;
  z-index: 10;
  cursor: ew-resize;
}
.jj jj-formtable > .size-bar:hover {
  background-color: var(--light);
}
.jj jj-formtable:hover > .size-bar.on {
  display: block;
}
.jj jj-formtable > .table-wrap {
  height: 100%;
}
.jj jj-formtable > .table-wrap table {
  height: 100%;
}
.jj jj-formtable > .table-wrap table:focus {
  outline: none;
}
.jj jj-formtable > .table-wrap table th.selected,
.jj jj-formtable > .table-wrap table td.selected {
  background-color: yellow;
}
.jj jj-formtable td {
  vertical-align: middle;
  padding: 0.15rem 0.5rem;
}
.jj jj-formtable td:empty {
  height: 2.5rem;
}
.jj jj-formtable td [class*='col-'] {
  max-width: 100%!important;
}
.jj jj-formtable td .j2-item {
  max-width: 100%!important;
  padding: 0!important;
  display: inline-block !important;
  margin-left: 3px;
  margin-right: 3px;
}
.jj jj-formtable td .j2-item .control-label {
  display: none!important;
}
.jj jj-formtable td p {
  margin: 0;
}

/* ==JJFormTable.720.class End ================ */




/* ==JJHtmlToolbar.720.class Start ================ */
/* ==JJHtmlToolbar.720.class================ */
.jj jj-html-toolbar > div.btn-group {
  padding: 0 1px;
  flex-grow: 0;
  background-color: var(--light);
  display: block;
}
.jj jj-html-toolbar > div.btn-group button[command] * {
  pointer-events: none;
}
.jj jj-html-toolbar > div.btn-group button.btn-sm.btn-light {
  height: 30px;
  width: 38px;
  padding: 0;
}
.jj jj-html-toolbar > div.btn-group div.dropdown-menu jj-item-text {
  width: auto;
  margin: 0.375rem 1.2rem;
  min-width: 200px;
}
.jj jj-html-toolbar > div.btn-group div.dropdown-menu jj-item-text input {
  padding: 0.45rem 0.9rem !important;
}
.jj jj-html-toolbar > div.btn-group div.dropdown-menu button[command="link"] {
  margin: 0.375rem 0;
  margin-right: 1.2rem;
  float: right;
}
.jj jj-html-toolbar > div.btn-group jj-form-include article {
  white-space: initial;
}

/* ==JJHtmlToolbar.720.class End ================ */




/* ==JJHighlight.720.class Start ================ */
/* ==JJHighlight.720.class================ */
.jj jj-highlight {
  white-space: pre;
}
.jj jj-highlight table {
  white-space: pre;
  font-family: Consolas, monospace, monospace !important;
}
.jj jj-highlight .hljs-ln td {
  color: whitesmoke;
}
.jj jj-highlight .hljs-ln-numbers {
  text-align: right;
  border-right: 1px solid #ccc;
  padding-right: 5px !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.jj jj-highlight .hljs-ln-numbers + * {
  padding-left: 5px !important;
}
.jj jj-highlight .hljs-number,
.jj jj-highlight .hljs-symbol,
.jj jj-highlight .hljs-bullet {
  color: white;
}

/* ==JJHighlight.720.class End ================ */




/* ==JJHtmlEditor.720.class Start ================ */
/* ==JJHtmlEditor.720.class================ */
.jj jj-html-editor,
.jj .jj-html-editor {
  position: relative;
  display: block;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  max-height: 170px;
  background: #eee;
}
.jj jj-html-editor > div.btn-group,
.jj .jj-html-editor > div.btn-group {
  display: unset;
  position: sticky;
  top: 0;
  z-index: 10;
}
.jj jj-html-editor > div.btn-group .btn-frame,
.jj .jj-html-editor > div.btn-group .btn-frame {
  height: 32px;
  white-space: nowrap;
  width: calc(100% - 60px);
  overflow: hidden;
  position: relative;
}
.jj jj-html-editor > div.btn-group .btn-frame .edit-buttons,
.jj .jj-html-editor > div.btn-group .btn-frame .edit-buttons {
  position: relative;
}
.jj jj-html-editor > div.btn-group .btn-frame .edit-buttons .dropdown,
.jj .jj-html-editor > div.btn-group .btn-frame .edit-buttons .dropdown {
  display: inline-block;
}
.jj jj-html-editor > div.btn-group .btn-frame .edit-buttons .dropdown .j2-item,
.jj .jj-html-editor > div.btn-group .btn-frame .edit-buttons .dropdown .j2-item {
  display: block;
  float: none;
}
.jj jj-html-editor > div.btn-group .btn-frame::-webkit-scrollbar,
.jj .jj-html-editor > div.btn-group .btn-frame::-webkit-scrollbar {
  height: 5px;
}
.jj jj-html-editor > div.btn-group .btn-frame .dropdown,
.jj .jj-html-editor > div.btn-group .btn-frame .dropdown {
  position: static;
}
.jj jj-html-editor > div.btn-group .dropdown-menu,
.jj .jj-html-editor > div.btn-group .dropdown-menu {
  max-height: 400px;
  overflow: auto;
}
.jj jj-html-editor > div.btn-group button[command] *,
.jj .jj-html-editor > div.btn-group button[command] * {
  pointer-events: none;
}
.jj jj-html-editor > div.btn-group button.btn-light,
.jj .jj-html-editor > div.btn-group button.btn-light {
  height: 32px;
  min-width: 32px;
  padding: 0 5px;
  z-index: 2;
}
.jj jj-html-editor > div.btn-group button.btn-light.btn-right,
.jj .jj-html-editor > div.btn-group button.btn-light.btn-right {
  border-left: 1px solid #ccc;
}
.jj jj-html-editor > div.btn-group button.btn-light.btn-left,
.jj .jj-html-editor > div.btn-group button.btn-light.btn-left {
  border-right: 1px solid #ccc;
}
.jj jj-html-editor > div.btn-group button,
.jj .jj-html-editor > div.btn-group button {
  font-size: 13px;
}
.jj jj-html-editor > div.btn-group button .fa-caret-down,
.jj .jj-html-editor > div.btn-group button .fa-caret-down {
  padding-left: 5px;
  padding-right: 5px;
}
.jj jj-html-editor > div.btn-group div.dropdown-menu j2-text,
.jj .jj-html-editor > div.btn-group div.dropdown-menu j2-text {
  overflow: visible;
  width: auto;
  margin: 0.375rem 1.2rem;
  min-width: 200px;
}
.jj jj-html-editor > div.btn-group div.dropdown-menu j2-text input,
.jj .jj-html-editor > div.btn-group div.dropdown-menu j2-text input {
  padding: 0.45rem 0.9rem !important;
}
.jj jj-html-editor > div.btn-group div.dropdown-menu button[command="link"],
.jj .jj-html-editor > div.btn-group div.dropdown-menu button[command="link"],
.jj jj-html-editor > div.btn-group div.dropdown-menu button[command="addImageLink"],
.jj .jj-html-editor > div.btn-group div.dropdown-menu button[command="addImageLink"] {
  margin: 0.375rem 0;
  margin-right: 1.2rem;
  float: right;
}
.jj jj-html-editor > div.editor,
.jj .jj-html-editor > div.editor {
  flex-grow: 1;
  overflow: auto;
  padding: 10px;
  margin: 0;
  color: black;
  background-color: white;
  word-break: break-all;
  border: 1px solid #ccc;
  tab-size: 12;
  -moz-tab-size: 4;
  text-align: left;
}
.jj jj-html-editor > div.editor div.dropdown-menu,
.jj .jj-html-editor > div.editor div.dropdown-menu {
  min-width: 300px;
}
.jj jj-html-editor > div.editor ol,
.jj .jj-html-editor > div.editor ol,
.jj jj-html-editor > div.editor p,
.jj .jj-html-editor > div.editor p,
.jj jj-html-editor > div.editor h1,
.jj .jj-html-editor > div.editor h1,
.jj jj-html-editor > div.editor h2,
.jj .jj-html-editor > div.editor h2,
.jj jj-html-editor > div.editor h3,
.jj .jj-html-editor > div.editor h3,
.jj jj-html-editor > div.editor h4,
.jj .jj-html-editor > div.editor h4,
.jj jj-html-editor > div.editor h5,
.jj .jj-html-editor > div.editor h5,
.jj jj-html-editor > div.editor h6,
.jj .jj-html-editor > div.editor h6 {
  margin-bottom: 0;
}
.jj jj-html-editor > div.editor b,
.jj .jj-html-editor > div.editor b {
  font-weight: bolder;
}
.jj jj-html-editor > div.editor section > .container,
.jj .jj-html-editor > div.editor section > .container {
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 0;
  margin-left: 0;
}
.jj jj-html-editor > div.editor section > .container > .row,
.jj .jj-html-editor > div.editor section > .container > .row {
  margin-right: -15px;
  margin-left: -15px;
}
.jj jj-html-editor > div.editor strike,
.jj .jj-html-editor > div.editor strike {
  text-decoration: line-through red;
  /* 선 색상을 빨간색으로 설정 */
}
.jj jj-html-editor > div.editor table,
.jj .jj-html-editor > div.editor table {
  max-width: 100%;
  position: relative;
}
.jj jj-html-editor > div.editor table tr td:empty,
.jj .jj-html-editor > div.editor table tr td:empty {
  height: 50px;
}
.jj jj-html-editor > div.editor table tr td,
.jj .jj-html-editor > div.editor table tr td,
.jj jj-html-editor > div.editor table tr th,
.jj .jj-html-editor > div.editor table tr th {
  padding: 5px;
}
.jj jj-html-editor > div.editor table .selected,
.jj .jj-html-editor > div.editor table .selected {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}
.jj jj-html-editor > div.editor table .size-bar,
.jj .jj-html-editor > div.editor table .size-bar {
  position: absolute;
  background-color: light;
  width: 5px;
  margin-left: 0px;
  top: 0 !important;
  z-index: 10;
  bottom: 0;
  cursor: ew-resize;
}
.jj jj-html-editor > div.editor table .size-bar:hover,
.jj .jj-html-editor > div.editor table .size-bar:hover {
  background-color: red;
}
.jj jj-html-editor > div.editor[contenteditable]:empty:before,
.jj .jj-html-editor > div.editor[contenteditable]:empty:before {
  content: "내용을 입력하세요.";
  color: var(--gray);
}
.jj jj-html-editor > div.editor:focus-visible,
.jj .jj-html-editor > div.editor:focus-visible {
  outline: 0!important;
}
.jj jj-html-editor > div.editor j-attch,
.jj .jj-html-editor > div.editor j-attch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-flex;
  overflow: hidden;
  width: 100px;
  white-space: nowrap;
  background-color: aqua;
}
.jj jj-html-editor > div.editor .j-img,
.jj .jj-html-editor > div.editor .j-img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-flex;
  overflow: hidden;
  width: 100px;
  white-space: nowrap;
  background-color: aqua;
}
.jj jj-html-editor > div.editor .j-img *,
.jj .jj-html-editor > div.editor .j-img * {
  pointer-events: none;
}
.jj jj-html-editor > div.editor .bg-img,
.jj .jj-html-editor > div.editor .bg-img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  z-index: -1;
}
.jj jj-html-editor > div.editor div.todo ul,
.jj .jj-html-editor > div.editor div.todo ul {
  list-style: none;
  padding: 0;
  /* 완료된 항목 */
  /* 미완료 항목 */
}
.jj jj-html-editor > div.editor div.todo ul li,
.jj .jj-html-editor > div.editor div.todo ul li {
  padding-left: 18px;
  /* 아이콘을 위한 공간 */
  position: relative;
}
.jj jj-html-editor > div.editor div.todo ul li:before,
.jj .jj-html-editor > div.editor div.todo ul li:before {
  display: inline-block;
  font: normal normal normal 14px / 1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  left: 0;
  top: 0.3rem;
}
.jj jj-html-editor > div.editor div.todo ul li[data-status="done"],
.jj .jj-html-editor > div.editor div.todo ul li[data-status="done"] {
  text-decoration: line-through;
}
.jj jj-html-editor > div.editor div.todo ul li[data-status="done"]::before,
.jj .jj-html-editor > div.editor div.todo ul li[data-status="done"]::before {
  content: "\F046";
  /* 체크 아이콘 */
  color: green;
}
.jj jj-html-editor > div.editor div.todo ul li[data-status="pending"]::before,
.jj .jj-html-editor > div.editor div.todo ul li[data-status="pending"]::before {
  content: "\F096";
  /* X 아이콘 */
  color: green;
}
.jj jj-html-editor > div.editor div.wbs ol,
.jj .jj-html-editor > div.editor div.wbs ol {
  counter-reset: section;
  list-style: none;
  padding-left: 20px;
}
.jj jj-html-editor > div.editor div.wbs ol li,
.jj .jj-html-editor > div.editor div.wbs ol li {
  counter-increment: section;
}
.jj jj-html-editor > div.editor div.wbs ol li::before,
.jj .jj-html-editor > div.editor div.wbs ol li::before {
  content: counters(section, ".") " ";
  font-weight: bold;
}
.jj jj-html-editor .img-tool,
.jj .jj-html-editor .img-tool {
  z-index: 300;
}
.jj jj-html-editor div.imgTool,
.jj .jj-html-editor div.imgTool {
  backgroud-color: white;
  width: 300px;
  margin-top: 0.5rem;
}
.jj jj-html-editor div.tblTool button *,
.jj .jj-html-editor div.tblTool button *,
.jj jj-html-editor div.linkBox button *,
.jj .jj-html-editor div.linkBox button *,
.jj jj-html-editor div.imgTool button *,
.jj .jj-html-editor div.imgTool button * {
  pointer-events: none;
}
.jj jj-html-editor div.tblTool button,
.jj .jj-html-editor div.tblTool button,
.jj jj-html-editor div.linkBox button,
.jj .jj-html-editor div.linkBox button,
.jj jj-html-editor div.imgTool button,
.jj .jj-html-editor div.imgTool button {
  width: auto!important;
  color: #323a46;
}
.jj jj-html-editor div.tblTool,
.jj .jj-html-editor div.tblTool {
  width: fit-content;
}
.jj jj-html-editor div.tblTool div.borderStyle,
.jj .jj-html-editor div.tblTool div.borderStyle {
  min-width: 0!important;
}
.jj jj-html-editor div.tblTool div.borderStyle jj-form-include article,
.jj .jj-html-editor div.tblTool div.borderStyle jj-form-include article {
  padding: 0.25rem 0.5rem !important;
}
.jj jj-html-editor div.linkBox,
.jj .jj-html-editor div.linkBox {
  /*** memo : ** Editor : 김성민* Edit Date : 2023. 8. 23. 오전 9:24:07
    * 에디터의 링크박스크기를 객체전체크기로 조정함
    * **/
  width: 100%;
  z-index: 2;
  /** End */
}
.jj jj-html-editor div.linkBox h4,
.jj .jj-html-editor div.linkBox h4 {
  line-break: anywhere;
}
.jj jj-html-editor.command-bottom > div.editor,
.jj .jj-html-editor.command-bottom > div.editor {
  order: 1;
}
.jj jj-html-editor.command-bottom > div.btn-group,
.jj .jj-html-editor.command-bottom > div.btn-group {
  order: 2;
}
.jj jj-html-editor.dropmenu-up,
.jj .jj-html-editor.dropmenu-up {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.jj jj-html-editor.dropmenu-up .dropdown-menu,
.jj .jj-html-editor.dropmenu-up .dropdown-menu {
  position: absolute;
  left: 0px;
  will-change: transform;
  bottom: 32!important;
  top: auto!important;
}
.jj jj-html-editor.print-on > div.editor,
.jj .jj-html-editor.print-on > div.editor {
  position: fixed!important;
  display: block;
  z-index: 1000;
  top: 0;
  left: 0;
  /* width: 100%; */
  margin: 0;
  right: 0;
  transform: translateX(0);
  width: 100%;
  bottom: 0;
}
.jj jj-html-editor[editType="memo"],
.jj .jj-html-editor[editType="memo"] {
  overflow: auto;
}
.jj jj-html-editor[editType="memo"] > div.editor,
.jj .jj-html-editor[editType="memo"] > div.editor {
  overflow: visible;
}
.jj jj-html-editor[editType="word"],
.jj .jj-html-editor[editType="word"] {
  overflow: auto;
}
.jj jj-html-editor[editType="word"] > div.editor,
.jj .jj-html-editor[editType="word"] > div.editor {
  padding: 2rem;
  font-size: 16px;
  margin: 1rem auto;
  border-radius: 5px;
  width: 21cm;
  overflow: visible;
}
.jj jj-html-editor jj-resize-box,
.jj .jj-html-editor jj-resize-box {
  outline: 2px solid var(--blue);
}
.jj[lang="en-US"] jj-html-editor div.editor[contenteditable]:empty:before {
  content: "Enter your content.";
}

/* ==JJHtmlEditor.720.class End ================ */




/* ==JJChatEditor.720.class Start ================ */
/* ==JJChatEditor.720.class================ */
.jj jj-chat-editor {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.jj jj-chat-editor div.editor a {
  display: block;
}
.jj jj-chat-editor div.editor a div.media {
  display: none!important;
}

/* ==JJChatEditor.720.class End ================ */




/* ==JJMarkdown.720.class Start ================ */
/* ==JJMarkdown.720.class================ */
.jj jj-markdown {
  position: relative;
  display: block;
  min-height: 300px;
  overflow: auto;
  padding: 0 50px;
}
.jj jj-markdown .prompt-result {
  padding: 10px 25px 30px;
  border-top: 3px solid darkcyan;
}
.jj jj-markdown .prompt-result .prompt-wrap {
  margin-bottom: 1rem;
}
.jj jj-markdown .prompt-result .prompt-wrap .prompt {
  display: inline-block;
  background-color: var(--yellow);
  color: white;
  padding: 5px 10px;
  border-radius: 15px 0;
}
.jj jj-markdown .prompt-result .result {
  padding: 5px;
}
.jj jj-markdown .prompt-result .result .code-head {
  display: flex;
  justify-content: space-between;
  background-color: black;
  color: white;
  margin-bottom: 0;
  margin: 0;
  border-radius: 10px 10px 0 0;
  padding: 5px;
}
.jj jj-markdown .prompt-result .result .code-head label {
  color: white;
  font-size: 16px;
  margin-bottom: 0;
  padding: 0 5px;
}
.jj jj-markdown .prompt-result .result .code-head button.code-view i {
  font-size: 16px;
  font-weight: bolder;
  pointer-events: none;
}
.jj jj-markdown .prompt-result .result code.hljs {
  border-radius: 0 0 10px 10px;
}
.jj jj-markdown table.hljs-ln td {
  color: var(--light);
}

/* ==JJMarkdown.720.class End ================ */




/* ==JJSummernote.720.class Start ================ */
/* ==JJSummernote.720.class================ */
.jj jj-summernote {
  position: relative;
  display: block;
  min-height: 200px;
}
.jj .note-editor .note-editing-area p {
  margin: 0 0 0;
}

/* ==JJSummernote.720.class End ================ */




/* ==JJColorPicker.class Start ================ */
/* ==JJColorPicker.class================ */
.jj jj-color-picker {
  display: block;
  width: 130px;
  height: 150px;
}
.jj jj-color-picker input.colorResult {
  height: 30px;
  width: 100px;
  padding: 0.45rem 0.3rem;
  margin-bottom: 2px;
  border: 0;
  text-align: center;
  display: block;
}
.jj jj-color-picker input.selectColor {
  height: 30px;
}
.jj jj-color-picker table {
  display: table!important;
  margin: auto;
  border-collapse: separate;
}
.jj jj-color-picker td {
  width: 15px;
  height: 15px;
}

/* ==JJColorPicker.class End ================ */




/* ==JJInsertSymbol.class Start ================ */
/* ==JJInsertSymbol.class================ */
.jj jj-insert-symbol {
  display: block;
}
.jj jj-insert-symbol div.wrap {
  max-width: 200px;
}
.jj jj-insert-symbol div.wrap div {
  width: 20px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}
.jj jj-insert-symbol div.wrap div:hover {
  background-color: var(--light);
}
.jj jj-insert-symbol div.wrap div:active {
  background-color: var(--gray);
}

/* ==JJInsertSymbol.class End ================ */




/* ==JJTableCreate.class Start ================ */
/* ==JJTableCreate.class================ */
.jj jj-table-create {
  display: block;
}
.jj jj-table-create div.wrap {
  width: 200px;
  margin: auto;
}
.jj jj-table-create div.wrap table {
  width: auto;
  margin: auto;
  border-collapse: separate;
}
.jj jj-table-create div.wrap td {
  padding: 0!important;
  width: 15px;
  height: 15px;
  border: 1px solid #ddd;
}
.jj jj-table-create div.wrap label {
  display: block;
  text-align: center;
  height: 21px;
}
.jj jj-table-create div.wrap j2-text {
  min-width: 90px!important;
}
.jj jj-table-create div.wrap j2-text .input-group-prepend {
  margin-right: 0;
}

/* ==JJTableCreate.class End ================ */




/* ==JJFrameViewer.720.class Start ================ */
/* ==JJFrameViewer.720.class================ */
.jj jj-frame-viewer,
.jj .jj-frame-viewer {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 5px solid darkgray;
  background-color: darkgray;
  overflow: hidden;
}
.jj jj-frame-viewer > .jj-view-toolbar,
.jj .jj-frame-viewer > .jj-view-toolbar,
.jj jj-frame-viewer > .jj-vhtml-toolbar,
.jj .jj-frame-viewer > .jj-vhtml-toolbar {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 1.75rem;
  overflow: hidden;
}
.jj jj-frame-viewer > .jj-view-toolbar select,
.jj .jj-frame-viewer > .jj-view-toolbar select,
.jj jj-frame-viewer > .jj-vhtml-toolbar select,
.jj .jj-frame-viewer > .jj-vhtml-toolbar select {
  width: 10rem;
  display: inline-block;
  height: auto;
  padding: 0.1rem;
  min-height: 2rem;
}
.jj jj-frame-viewer > .jj-view-toolbar label,
.jj .jj-frame-viewer > .jj-view-toolbar label,
.jj jj-frame-viewer > .jj-vhtml-toolbar label,
.jj .jj-frame-viewer > .jj-vhtml-toolbar label {
  margin-bottom: 0;
}
.jj jj-frame-viewer > .jj-view-toolbar .btn *,
.jj .jj-frame-viewer > .jj-view-toolbar .btn *,
.jj jj-frame-viewer > .jj-vhtml-toolbar .btn *,
.jj .jj-frame-viewer > .jj-vhtml-toolbar .btn * {
  pointer-events: none;
}
.jj jj-frame-viewer .item-option-box,
.jj .jj-frame-viewer .item-option-box {
  text-align: center;
  padding: 0.2rem;
  background-color: var(--white);
  min-height: 2.5rem;
}
.jj jj-frame-viewer > nav,
.jj .jj-frame-viewer > nav {
  height: 30px;
}
.jj jj-frame-viewer > nav ol.breadcrumb,
.jj .jj-frame-viewer > nav ol.breadcrumb {
  padding: 3px;
  margin: 0;
}
.jj jj-frame-viewer > nav ol.breadcrumb a,
.jj .jj-frame-viewer > nav ol.breadcrumb a {
  font-size: 0.8rem;
}
.jj jj-frame-viewer > nav .box-inline,
.jj .jj-frame-viewer > nav .box-inline {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.jj jj-frame-viewer > nav .box-inline > *,
.jj .jj-frame-viewer > nav .box-inline > * {
  flex: 0 0 auto;
}
.jj jj-frame-viewer > nav ::-webkit-scrollbar,
.jj .jj-frame-viewer > nav ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border: 3px solid #fff;
}
.jj jj-frame-viewer > nav ::-webkit-scrollbar-button:start:decrement,
.jj .jj-frame-viewer > nav ::-webkit-scrollbar-button:start:decrement,
.jj jj-frame-viewer > nav ::-webkit-scrollbar-button:end:increment,
.jj .jj-frame-viewer > nav ::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 10px;
}
.jj jj-frame-viewer > nav ::-webkit-scrollbar-track,
.jj .jj-frame-viewer > nav ::-webkit-scrollbar-track {
  background: #efefef;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}
.jj jj-frame-viewer > nav ::-webkit-scrollbar-thumb,
.jj .jj-frame-viewer > nav ::-webkit-scrollbar-thumb {
  height: 50px;
  width: 50px;
  background: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}
.jj jj-frame-viewer > .frameView,
.jj .jj-frame-viewer > .frameView {
  position: relative;
  flex-grow: 1;
  width: 100%;
  overflow: auto;
  display: block;
  position: absolute;
  top: 1.75rem;
  bottom: 0;
  left: 0;
  right: 0;
}
.jj jj-frame-viewer > .frameView > .iframe-view,
.jj .jj-frame-viewer > .frameView > .iframe-view {
  position: relative;
  border: 0;
  height: 100%;
  background-color: #fff;
  border-radius: 0px;
  display: block;
  margin: 0 auto;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-full,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-full {
  width: 100%;
  margin: auto;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-television,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-television {
  width: 1200px;
  margin: auto;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-desktop,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-desktop {
  width: 992px;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-laptop,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-laptop {
  width: 768px;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-tablet,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-tablet {
  flex-grow: 0;
  width: 608px;
  height: 720px;
  margin: 0 auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  overflow: visible;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-tablet:before,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-tablet:before {
  content: '';
  display: block;
  width: 60px;
  height: 10px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-tablet:after,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-tablet:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-phone,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-phone {
  flex-grow: 0;
  width: 407px;
  height: 800px;
  margin: 0 auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  overflow: visible;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-phone:before,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-phone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}
.jj jj-frame-viewer > .frameView > .iframe-view.ws-phone:after,
.jj .jj-frame-viewer > .frameView > .iframe-view.ws-phone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* ==JJFrameViewer.720.class End ================ */




/* ==JJAppGrid.720.class Start ================ */
/* ==JJAppGrid.720.class================ */
.jj jj-app-grid720 {
  display: block;
  position: relative;
}
.jj jj-app-grid720 > .grid-toolbar {
  display: flex;
  -webkit-box-pack: justify!important;
  -ms-flex-pack: justify!important;
  justify-content: space-between !important;
}
.jj jj-app-grid720 table {
  table-layout: fixed;
  width: 100px;
  border-spacing: 0px;
  border: 1px solid #cccccc;
  margin-bottom: 0px;
  border-collapse: separate;
  min-width: 100%;
  font-size: 13px;
  background-color: var(--white);
}
.jj jj-app-grid720 table tr {
  line-height: 1.5rem;
}
.jj jj-app-grid720 table .sizeEmpty {
  width: 100%;
  pointer-events: none;
}
.jj jj-app-grid720 table > thead > tr > th,
.jj jj-app-grid720 table > thead > tr > td {
  font-weight: bold;
  border-right: 1px solid #b1bcca;
  border-bottom: 1px solid #b1bcca;
  background-color: #e1eaf8;
  text-align: center;
  color: #393f48;
  padding: 2px;
  vertical-align: middle;
  position: relative;
}
.jj jj-app-grid720 table > thead > tr > th.trCheck,
.jj jj-app-grid720 table > thead > tr > td.trCheck {
  text-align: center;
}
.jj jj-app-grid720 table > thead > tr > th.trCheck > i,
.jj jj-app-grid720 table > thead > tr > td.trCheck > i {
  font-weight: bold;
  pointer-events: none;
}
.jj jj-app-grid720 table > thead > tr > th.trCheck > i::before,
.jj jj-app-grid720 table > thead > tr > td.trCheck > i::before {
  content: "\F096";
}
.jj jj-app-grid720 table > thead > tr > th.trCheck.checked > i::before,
.jj jj-app-grid720 table > thead > tr > td.trCheck.checked > i::before {
  content: "\F046";
}
.jj jj-app-grid720 table > thead > tr > th.trTodo,
.jj jj-app-grid720 table > thead > tr > td.trTodo {
  text-align: center;
}
.jj jj-app-grid720 table > thead > tr > th.trTodo > i,
.jj jj-app-grid720 table > thead > tr > td.trTodo > i {
  font-weight: bold;
  pointer-events: none;
}
.jj jj-app-grid720 table > thead > tr > th.trTodo > i::before,
.jj jj-app-grid720 table > thead > tr > td.trTodo > i::before {
  content: "\F086";
}
.jj jj-app-grid720 table > thead > tr > th.trTodo.has-todo > i::before,
.jj jj-app-grid720 table > thead > tr > td.trTodo.has-todo > i::before {
  content: "\F086";
}
.jj jj-app-grid720 table > thead > tr > th.select,
.jj jj-app-grid720 table > thead > tr > td.select,
.jj jj-app-grid720 table > thead > tr > th.sort-clone,
.jj jj-app-grid720 table > thead > tr > td.sort-clone {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1bcca), color-stop(100%, #ebf2fc));
}
.jj jj-app-grid720 table > thead > tr > th > label,
.jj jj-app-grid720 table > thead > tr > td > label {
  display: block;
  margin-bottom: 0;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj jj-app-grid720 table > thead > tr > th[order] .sortIcon,
.jj jj-app-grid720 table > thead > tr > td[order] .sortIcon {
  color: black;
}
.jj jj-app-grid720 table > thead > tr > th .sortIcon,
.jj jj-app-grid720 table > thead > tr > td .sortIcon {
  display: inline-block;
  width: 17px;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-left: 1px solid transparent;
  background-color: transparent;
  vertical-align: middle;
  color: transparent;
}
.jj jj-app-grid720 table > thead > tr > th .sortIcon:hover,
.jj jj-app-grid720 table > thead > tr > td .sortIcon:hover {
  border-left: 1px solid #b1bcca;
  background-color: ghostwhite;
  color: black;
  cursor: pointer;
}
.jj jj-app-grid720 table > thead > tr > th .sortIcon i,
.jj jj-app-grid720 table > thead > tr > td .sortIcon i {
  pointer-events: none;
}
.jj jj-app-grid720 table > thead > tr > th[order="asc"] .sortIcon,
.jj jj-app-grid720 table > thead > tr > td[order="asc"] .sortIcon {
  color: black;
}
.jj jj-app-grid720 table > thead > tr > th[order="asc"] .sortIcon i::before,
.jj jj-app-grid720 table > thead > tr > td[order="asc"] .sortIcon i::before {
  content: "\F15D";
}
.jj jj-app-grid720 table > thead > tr > th[order="desc"] .sortIcon,
.jj jj-app-grid720 table > thead > tr > td[order="desc"] .sortIcon {
  color: black;
}
.jj jj-app-grid720 table > thead > tr > th[order="desc"] .sortIcon i::before,
.jj jj-app-grid720 table > thead > tr > td[order="desc"] .sortIcon i::before {
  content: "\F15E";
}
.jj jj-app-grid720 table > thead > tr > td {
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj jj-app-grid720 table > tbody {
  color: var(--dark);
}
.jj jj-app-grid720 table > tbody > tr {
  line-height: 28px;
}
.jj jj-app-grid720 table > tbody > tr.selected {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}
.jj jj-app-grid720 table > tbody > tr.selected a,
.jj jj-app-grid720 table > tbody > tr.selected label,
.jj jj-app-grid720 table > tbody > tr.selected select {
  font-weight: bold!important;
}
.jj jj-app-grid720 table > tbody > tr.selected a {
  color: var(--purple);
}
.jj jj-app-grid720 table > tbody > tr.selected:hover {
  background-color: #D8F0EE;
}
.jj jj-app-grid720 table > tbody > tr.checked {
  font-weight: 600;
}
.jj jj-app-grid720 table > tbody > tr.checked > td.trCheck > i::before {
  content: "\F046";
}
.jj jj-app-grid720 table > tbody > tr[_crud_="C"] {
  color: var(--info);
}
.jj jj-app-grid720 table > tbody > tr[_crud_="U"] {
  color: var(--success);
  font-style: italic;
}
.jj jj-app-grid720 table > tbody > tr[_crud_="D"] {
  color: var(--danger);
  text-decoration: line-through;
  font-style: italic;
  opacity: 0.8;
}
.jj jj-app-grid720 table > tbody > tr > td {
  padding: 1px 3px 0px 3px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  font-weight: inherit;
  color: inherit;
}
.jj jj-app-grid720 table > tbody > tr > td.num,
.jj jj-app-grid720 table > tbody > tr > td.trCheck {
  text-align: center;
  vertical-align: middle;
}
.jj jj-app-grid720 table > tbody > tr > td.num *,
.jj jj-app-grid720 table > tbody > tr > td.trCheck * {
  pointer-events: none;
}
.jj jj-app-grid720 table > tbody > tr > td.num i::before,
.jj jj-app-grid720 table > tbody > tr > td.trCheck i::before {
  content: "\F096";
}
.jj jj-app-grid720 table > tbody > tr > td.trTodo {
  text-align: center;
}
.jj jj-app-grid720 table > tbody > tr > td.trTodo > i {
  font-weight: bold;
  pointer-events: none;
}
.jj jj-app-grid720 table > tbody > tr > td.trTodo.has-todo > i::before {
  content: "\F086";
}
.jj jj-app-grid720 table > tbody > tr > td.noti {
  background-position: left top;
  background-size: 7px;
}
.jj jj-app-grid720 table > tbody > tr > td img {
  height: 23px!important;
}
.jj jj-app-grid720 table > tbody > tr > td .tag {
  border-radius: 1rem;
  border: 1px solid var(--info);
  display: inline;
  padding: 2px 5px;
  margin-right: 3px;
}
.jj jj-app-grid720 table > tfoot {
  background-color: bisque;
  border-top: 1px solid #b1bcca;
  border-right: 1px solid #b1bcca;
  background-color: #f1e5ea;
}
.jj jj-app-grid720 table > tfoot > tr {
  line-height: 28px;
}
.jj jj-app-grid720 table > tfoot > tr > td {
  padding: 1px 3px 0px 3px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  font-weight: inherit;
  background-color: #f1e5ea;
}
.jj jj-app-grid720 > .grid-warp {
  position: relative;
  top: 0px;
  margin-right: 10px;
  overflow: auto;
}
.jj jj-app-grid720.no-scroll > .grid-warp {
  margin-right: 0px;
  overflow-x: hidden;
}
.jj jj-app-grid720.no-scroll .sArea {
  display: none;
}
.jj jj-app-grid720.no-scroll-y > .grid-warp {
  margin-right: 0px!important;
  overflow-y: hidden;
}
.jj jj-app-grid720.no-scroll-y .sArea {
  display: none;
}
.jj jj-app-grid720 > .fix-grid-warp {
  position: absolute;
  top: 0;
  left: 0;
  border-right: 0px solid gray;
  overflow: hidden;
  background-color: white;
}
.jj jj-app-grid720 > .fix-grid-warp table {
  border-right: 0;
  min-width: 1%;
}
.jj jj-app-grid720 > .size-bar {
  position: absolute;
  border: 1px solid transparent;
  display: none;
  width: 5px;
  top: 0;
  z-index: 10;
  cursor: ew-resize;
}
.jj jj-app-grid720 > .size-bar.on {
  display: block;
}
.jj jj-app-grid720 > .sArea {
  position: absolute;
  top: 0;
  width: 15px;
  right: 1px;
  float: right;
  border: 1px solid #DDD;
  z-index: 100;
  height: 100%;
  border-width: 1px;
  background-color: ghostwhite;
  border-radius: 5px;
}
.jj jj-app-grid720 > .sArea.wide {
  width: 50px;
}
.jj jj-app-grid720 > .sArea > .uScrCur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 30px;
  display: block;
  border: 1px solid #959595;
  background-color: #A7A7A7;
  border-radius: 5px;
  cursor: ns-resize;
}
.jj jj-app-grid720.col-sorting {
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 1px solid blue;
}
.jj jj-app-grid720.col-sorting .sort-select-item {
  display: none;
}
.jj jj-app-grid720.resizing {
  cursor: ew-resize;
}
.jj jj-app-grid720.resizing .grid-warp,
.jj jj-app-grid720.resizing .fix-grid-warp {
  pointer-events: none;
}
.jj jj-app-grid720.resizing > .size-bar {
  pointer-events: none;
  border-right: 1px solid black;
}
.jj jj-app-grid720.has-pager > .grid-warp {
  margin-right: 0;
}
.jj jj-app-grid720.has-pager > .grid-warp > table {
  border-right-width: 0;
}
.jj jj-app-grid720.has-pager > jj-pagination {
  margin-top: 10px;
}
.jj jj-app-grid720 .form-control {
  padding: 0px 5px;
  height: auto;
  width: 100%;
  border: 0;
}
.jj jj-app-grid720 button {
  padding: 0.1rem 0.5rem;
  line-height: 1rem;
  display: block;
  width: 100%;
}
.jj jj-app-grid720 input[type="checkbox"] {
  border: 2px solid ccc;
  margin-top: 0;
  margin-right: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
}
.jj jj-app-grid720.fixed table .sizeEmpty {
  width: 0!important;
}
.jj jj-app-grid720.hide-todo .trTodo {
  width: 0px!important;
  overflow: hidden;
}
.jj jj-app-grid720.hide-todo .fix-grid-warp {
  width: 101px!important;
}
.jj jj-app-grid720 .tag-users .code-item {
  margin: 0.05rem 0.2rem 0.05rem 0;
  padding: 0.15rem 0.5rem 0.15rem 0.3rem;
  border-radius: 1rem;
  border: 1px solid var(--info);
}
.jj jj-app-grid720 .tag-users .code-item .avatar {
  margin-top: -0.3rem;
  height: 1.25rem !important;
  width: 1.25rem !important;
}
.jj jj-app-grid720 .tag-users .code-item .close {
  display: none;
}

/* ==JJAppGrid.720.class End ================ */




/* ==JJDynamicGrid.720.class Start ================ */
/* ==JJDynamicGrid.720.class================ */
.jj jj-dynamic-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.jj jj-dynamic-grid .table-head-warp {
  display: inline-block;
  flex-grow: 0;
  overflow: hidden;
  overflow-y: scroll;
  flex: none;
  position: relative;
}
.jj jj-dynamic-grid .table-head-warp::-webkit-scrollbar-button:start:decrement,
.jj jj-dynamic-grid .table-head-warp::-webkit-scrollbar-button:end:increment {
  height: 0px;
}
.jj jj-dynamic-grid .table-head-warp::-webkit-scrollbar-track {
  background: #efefef;
  -webkit-border-radius: 0px !important;
  border-radius: 0px !important;
  -webkit-box-shadow: none;
}
.jj jj-dynamic-grid .table-head-warp::-webkit-scrollbar-thumb {
  display: none;
}
.jj jj-dynamic-grid .table-body-warp {
  flex-grow: 1;
  overflow: auto;
  overflow-y: scroll;
  margin-top: -1px;
  position: relative;
}
.jj jj-dynamic-grid table {
  table-layout: fixed;
  width: 100px;
  border: 1px solid var(--secondary);
  border-collapse: collapse;
}
.jj jj-dynamic-grid table tbody tr.hover {
  background-color: var(--info);
  color: var(--white);
}
.jj jj-dynamic-grid table tbody tr.selected {
  background-color: var(--primary);
  color: var(--white);
}
.jj jj-dynamic-grid table tbody tr.selected.hover {
  background-color: var(--success);
  color: var(--white);
}
.jj jj-dynamic-grid table thead.sum tr,
.jj jj-dynamic-grid table tfoot.sum tr {
  background-color: var(--light);
  font-weight: bold;
}
.jj jj-dynamic-grid table th,
.jj jj-dynamic-grid table td {
  border: 1px solid var(--secondary);
  padding: 3px;
  font-size: 12px;
}
.jj jj-dynamic-grid table th {
  text-align: center;
}
.jj jj-dynamic-grid table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj jj-dynamic-grid table td.num {
  text-align: right;
}
.jj jj-dynamic-grid table.fix-table {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: var(--light);
}
.jj jj-dynamic-grid table tr.on[group] ~ [level='1'] {
  display: none;
}

/* ==JJDynamicGrid.720.class End ================ */




/* ==JJExcel.720.class Start ================ */
/* ==JJExcel.720.class================ */
.jj jj-excel {
  position: relative;
  display: block;
  background-color: white;
  border: 1px solid var(--gray);
  overflow: auto;
  padding: 5px;
  min-height: 300px;
  height: 300px;
}
.jj jj-excel .excelWrap {
  height: 100%;
}
.jj jj-excel .excelWrap:empty:focus {
  border: 1px solid yellow;
}
.jj jj-excel .excelWrap:empty:focus:before {
  content: "엑셀에서 업로드할 영역을 복사하여 붙여넣기 하세요";
}
.jj jj-excel .excelWrap.win-drag {
  background-color: yellow;
}
.jj jj-excel table {
  table-layout: fixed;
  border: 1px solid var(--secondary);
  border-collapse: collapse;
  display: fixed;
}
.jj jj-excel table th,
.jj jj-excel table td {
  border: 1px solid var(--secondary);
  padding: 3px;
  font-size: 12px;
  color: black;
  min-width: 130px;
}
.jj jj-excel table th {
  text-align: center;
  background-color: var(--light);
}
.jj jj-excel table th input {
  width: 60%;
}
.jj jj-excel table th select {
  width: 38%;
  padding: 2px 0;
}
.jj jj-excel[mode="import"] th select {
  width: 100%!important;
}
.jj[lang="en-US"] jj-excel .excelWrap:empty:before {
  content: "Select a file to upload";
}

/* ==JJExcel.720.class End ================ */




/* ==JJExcelLayout.720.class Start ================ */
/* ==JJExcelLayout.720.class================ */
.jj jj-excel-layout {
  position: relative;
  display: block;
  background-color: white;
  border: 1px solid var(--gray);
  overflow: auto;
  padding: 5px 5px 15px 5px;
  min-height: 300px;
}
.jj jj-excel-layout .excelWrap {
  min-height: 300px;
}
.jj jj-excel-layout .excelWrap:empty:before {
  content: "업로드할 파일을 선택하세요";
}
.jj jj-excel-layout .excelWrap:empty:focus {
  border: 1px solid yellow;
}
.jj jj-excel-layout .excelWrap.win-drag {
  background-color: yellow;
}
.jj jj-excel-layout .excelWrap table {
  table-layout: fixed;
  border: 1px solid var(--secondary);
  border-collapse: collapse;
  display: fixed;
}
.jj jj-excel-layout .excelWrap table thead {
  background-color: var(--light);
}
.jj jj-excel-layout .excelWrap table thead td {
  font-weight: bold;
  text-align: center;
}
.jj jj-excel-layout .excelWrap table th,
.jj jj-excel-layout .excelWrap table td {
  border: 1px solid var(--secondary);
  padding: 3px;
  font-size: 12px;
  color: black;
  min-width: 130px;
}
.jj jj-excel-layout .excelWrap table th {
  text-align: center;
  background-color: var(--light);
}
.jj jj-excel-layout .excelWrap table th input {
  width: 60%;
}
.jj jj-excel-layout .excelWrap table th select {
  width: 38%;
  padding: 2px 0;
}
.jj[lang="en-US"] jj-excel-layout .excelWrap:empty:before {
  content: "Select a file to upload";
}

/* ==JJExcelLayout.720.class End ================ */




/* ==JJFilter.720.class Start ================ */
/* ==JJFilter.720.class================ */
.jj jj-app-filter,
.jj .jj-app-filter {
  margin-bottom: 10px;
  display: block;
  font-size: 0.9rem;
}
.jj jj-app-filter .list-group,
.jj .jj-app-filter .list-group {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 0.1rem;
}
.jj jj-app-filter .list-group .list-group-item,
.jj .jj-app-filter .list-group .list-group-item {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem;
  background-color: var(--cyan);
  color: var(--white);
  margin-bottom: 0.5rem;
}
.jj jj-app-filter .list-group .list-group-item code,
.jj .jj-app-filter .list-group .list-group-item code {
  font-size: inherit;
  color: #f672a7;
}
.jj jj-app-filter .list-group .list-group-item .fa-remove,
.jj .jj-app-filter .list-group .list-group-item .fa-remove {
  margin-left: 1rem;
  margin-top: 0.3rem;
}
.jj jj-app-filter .filter-box,
.jj .jj-app-filter .filter-box {
  display: flex;
}
.jj jj-app-filter .dropdown-menu,
.jj .jj-app-filter .dropdown-menu {
  width: 250px;
}
.jj jj-app-filter .dropdown-menu .item-box,
.jj .jj-app-filter .dropdown-menu .item-box {
  height: 200px;
  overflow: auto;
}
.jj jj-app-filter .dropdown-menu .item-box label,
.jj .jj-app-filter .dropdown-menu .item-box label {
  display: block;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj jj-app-filter .btn,
.jj .jj-app-filter .btn {
  padding: 0.2rem 0.5rem;
}
.jj jj-app-filter input,
.jj .jj-app-filter input,
.jj jj-app-filter select,
.jj .jj-app-filter select {
  border: 1px solid #ced4da;
}
.jj jj-app-filter .dropdown-toggle,
.jj .jj-app-filter .dropdown-toggle {
  width: 4rem;
}
.jj jj-app-filter .f-value,
.jj .jj-app-filter .f-value {
  width: -webkit-fill-available;
}

/* ==JJFilter.720.class End ================ */




/* ==JJGrid.class Start ================ */
/* ==JJGrid.class================ */
.jj jj-grid {
  display: block;
  position: relative;
}
.jj jj-grid table {
  table-layout: fixed;
  width: 100px;
  border-spacing: 0px;
  border: 1px solid #cccccc;
  margin-bottom: 0px;
  border-collapse: separate;
  min-width: 100%;
  font-size: 0.9rem;
}
.jj jj-grid table tr {
  line-height: 1.5rem;
}
.jj jj-grid table .sizeEmpty {
  width: 100%;
  pointer-events: none;
}
.jj jj-grid table > thead > tr > th {
  border-right: 1px solid #b1bcca;
  border-bottom: 1px solid #b1bcca;
  border: 1px solid #b1bcca;
  text-align: center;
  font-weight: bold;
  padding: 2px;
  border-width: 0px 1px 1px 0px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.jj jj-grid table > thead > tr > th.trCheck {
  text-align: center;
}
.jj jj-grid table > thead > tr > th.trCheck > label.trchk {
  background: url(/cm/NUSS_UI/image/chk_WF_BgN.png);
  width: 14px;
  height: 14px;
  user-select: none;
  background-size: 100% 100%! important;
  display: inline-block;
  cursor: pointer;
}
.jj jj-grid table > thead > tr > th.trCheck.checked label.trchk {
  background: url(/cm/NUSS_UI/image/chk_WF_btnImage.png) no-repeat 0px 50%;
}
.jj jj-grid table > thead > tr > th.select,
.jj jj-grid table > thead > tr > th.sort-clone {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1bcca), color-stop(100%, #ebf2fc));
}
.jj jj-grid table > thead > tr > th > label {
  line-height: 1;
  margin-bottom: 0;
}
.jj jj-grid table > thead > tr > th[order] .sortIcon {
  color: black;
}
.jj jj-grid table > thead > tr > th .sortIcon {
  display: inline-block;
  width: 17px;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-left: 1px solid transparent;
  background-color: transparent;
  vertical-align: middle;
  color: transparent;
}
.jj jj-grid table > thead > tr > th .sortIcon:hover {
  border-left: 1px solid #b1bcca;
  background-color: ghostwhite;
  color: black;
  cursor: pointer;
}
.jj jj-grid table > thead > tr > th .sortIcon i {
  pointer-events: none;
}
.jj jj-grid table > thead > tr > th[order="asc"] .sortIcon {
  color: black;
}
.jj jj-grid table > thead > tr > th[order="asc"] .sortIcon i::before {
  content: "\F15D";
}
.jj jj-grid table > thead > tr > th[order="desc"] .sortIcon {
  color: black;
}
.jj jj-grid table > thead > tr > th[order="desc"] .sortIcon i::before {
  content: "\F15E";
}
.jj jj-grid table > tbody {
  color: var(--dark);
}
.jj jj-grid table > tbody > tr {
  line-height: 28px;
}
.jj jj-grid table > tbody > tr.selected {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}
.jj jj-grid table > tbody > tr.selected a,
.jj jj-grid table > tbody > tr.selected label,
.jj jj-grid table > tbody > tr.selected select {
  font-weight: bold!important;
}
.jj jj-grid table > tbody > tr.selected:hover {
  background-color: #D8F0EE;
}
.jj jj-grid table > tbody > tr.checked {
  font-weight: 600;
}
.jj jj-grid table > tbody > tr.checked > td.trCheck > i::before {
  content: "\F046";
}
.jj jj-grid table > tbody > tr[_crud_="C"] {
  color: var(--info);
}
.jj jj-grid table > tbody > tr[_crud_="U"] {
  color: var(--success);
  font-style: italic;
}
.jj jj-grid table > tbody > tr[_crud_="D"] {
  color: var(--danger);
  text-decoration: line-through;
  font-style: italic;
  opacity: 0.8;
}
.jj jj-grid table > tbody > tr > td {
  padding: 1px 3px 0px 3px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  font-weight: inherit;
  color: inherit;
}
.jj jj-grid table > tbody > tr > td.num,
.jj jj-grid table > tbody > tr > td.trCheck {
  text-align: center;
  vertical-align: middle;
}
.jj jj-grid table > tbody > tr > td.num *,
.jj jj-grid table > tbody > tr > td.trCheck * {
  pointer-events: none;
}
.jj jj-grid table > tbody > tr > td.num i::before,
.jj jj-grid table > tbody > tr > td.trCheck i::before {
  content: "\F096";
}
.jj jj-grid table > tbody > tr > td.noti {
  background-position: left top;
  background-size: 7px;
}
.jj jj-grid table > tfoot {
  background-color: bisque;
  border-top: 1px solid #b1bcca;
  border-right: 1px solid #b1bcca;
  background-color: #f1e5ea;
}
.jj jj-grid table > tfoot > tr {
  line-height: 28px;
}
.jj jj-grid table > tfoot > tr > td {
  padding: 1px 3px 0px 3px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  font-weight: inherit;
  background-color: #f1e5ea;
}
.jj jj-grid > .grid-warp {
  position: relative;
  top: 0px;
  margin-right: 10px;
  overflow: auto;
}
.jj jj-grid.no-scroll > .grid-warp {
  margin-right: 0px;
  overflow-x: hidden;
}
.jj jj-grid.no-scroll .sArea {
  display: none;
}
.jj jj-grid.no-scroll-y > .grid-warp {
  margin-right: 0px!important;
  overflow-y: hidden;
}
.jj jj-grid.no-scroll-y .sArea {
  display: none;
}
.jj jj-grid > .fix-grid-warp {
  position: absolute;
  top: 0;
  left: 0;
  border-right: 0px solid gray;
  overflow: hidden;
}
.jj jj-grid > .fix-grid-warp table {
  border-right: 0;
  min-width: 1%;
  background-color: var(--light);
}
.jj jj-grid > .size-bar {
  position: absolute;
  border: 1px solid transparent;
  display: none;
  width: 5px;
  top: 0;
  z-index: 10;
  cursor: ew-resize;
}
.jj jj-grid > .size-bar.on {
  display: block;
}
.jj jj-grid > .sArea {
  position: absolute;
  top: 0;
  width: 10px;
  right: 1px;
  float: right;
  border: 1px solid #DDD;
  z-index: 100;
  height: 100%;
  border-width: 1px;
  background-color: ghostwhite;
  border-radius: 0px;
}
.jj jj-grid > .sArea > .uScrCur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 30px;
  display: block;
  border: 1px solid #959595;
  background-color: #A7A7A7;
  border-radius: 0px;
  cursor: ns-resize;
}
.jj jj-grid.col-sorting {
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 1px solid blue;
}
.jj jj-grid.col-sorting .sort-select-item {
  display: none;
}
.jj jj-grid.resizing {
  cursor: ew-resize;
}
.jj jj-grid.resizing .grid-warp,
.jj jj-grid.resizing .fix-grid-warp {
  pointer-events: none;
}
.jj jj-grid.resizing > .size-bar {
  pointer-events: none;
  border-right: 1px solid black;
}
.jj jj-grid .form-control {
  padding: 0px 5px;
  height: auto;
  width: 100%;
  border: 0;
}
.jj jj-grid button {
  padding: 0.1rem 0.5rem;
  line-height: 1rem;
  display: block;
  width: 100%;
}
.jj jj-grid input[type="checkbox"] {
  border: 2px solid ccc;
  margin-top: 0;
  margin-right: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
}
.jj jj-grid.fixed table .sizeEmpty {
  width: 0!important;
}
.jj .data-grid-warp {
  overflow: auto;
}
.jj table.grid560 {
  margin-bottom: 10px;
  position: relative;
}
.jj table.grid560.fixed {
  table-layout: fixed;
}
.jj table.grid560.fixed th,
.jj table.grid560.fixed td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj table.grid560 table,
.jj table.grid560 th,
.jj table.grid560 td {
  border: 1px solid #BDBDBD;
  border-collapse: collapse;
}
.jj table.grid560 thead {
  background-color: #e1eaf8;
  background-image: liner-gradient(top, #f4f7fd 0%, #ebf2fc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f7fd), color-stop(100%, #ebf2fc));
  background-image: -ms-linear-gradient(top, #f4f7fd 0%, #ebf2fc 100%);
  background-image: -moz-linear-gradient(top, #f4f7fd 0%, #ebf2fc 100%);
}
.jj table.grid560 thead tr th {
  cursor: pointer;
  position: relative;
  text-align: center;
  border-bottom-width: 1px;
}
.jj table.grid560 thead tr th:after {
  position: absolute;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  width: 24px;
  text-align: center;
  right: 2px;
  content: "\f0dc";
  opacity: 0.2;
}
.jj table.grid560 thead tr th.asc:after {
  content: "\f160";
  opacity: 0.6;
}
.jj table.grid560 thead tr th.desc:after {
  content: "\f161";
  opacity: 0.6;
}
.jj table.grid560 thead tr th._select_ {
  width: 40px;
}
.jj table.grid560 thead tr th._rno_ {
  width: 40px;
}
.jj table.grid560 thead tr th._crud_ {
  width: 40px;
}
.jj table.grid560 tbody tr[_crud_="R"] {
  background-color: transparent;
}
.jj table.grid560 tbody tr[_crud_="U"] {
  background-color: #BCD8F1;
}
.jj table.grid560 tbody tr[_crud_="D"] {
  background-color: #FAB4B4;
}
.jj table.grid560 .sortBar {
  position: fixed;
  border-right: 5px solid transfer;
  z-index: 10;
  cursor: e-resize;
}
.jj table.grid560 .sortBar.show {
  border-right: 5px solid #FAFAFA;
}
.jj table.grid560 .sortBar.resize {
  border-right: 5px solid #BDBDBD;
}
.jj table.grid560 td {
  vertical-align: middle!important;
}
.jj table.grid560 td.left {
  text-align: left;
}
.jj table.grid560 td.right {
  text-align: right;
}
.jj table.grid560 td.center {
  text-align: center;
}
.jj table.grid560 td._select_ {
  text-align: center;
}
.jj table.grid560 td._select_:after {
  cursor: pointer;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 1.2em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  content: "\f096";
  opacity: 0.6;
}
.jj table.grid560 td._select_.selected::after,
.jj table.grid560 td._select_.true::after {
  content: "\f046";
}
.jj table.grid570 {
  color: #0E3979;
  max-width: none;
  border-collapse: collapse;
  text-align: center;
  border-top: 3px solid #307bbb;
}
.jj table.grid570 th,
.jj table.grid570 td {
  position: relative;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
}
.jj table.grid570 > thead {
  background-color: #e1eaf2;
  font-weight: bold;
}
.jj table.grid570 > thead > tr > th {
  border-color: #B2BAD2;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  font-weight: bold;
  color: #0E3979;
}
.jj table.grid570 > tbody {
  background-color: #FFFFFF;
}
.jj table.grid570 > tbody > tr > th {
  background-color: #e1eaf2;
  border: 1px solid #B2BAD2;
}
.jj table.grid570 > tbody > tr > td {
  padding: 3px;
  border: 0;
  font-size: 100%;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
  overflow: hidden;
  word-wrap: normal;
  word-break: break-all;
  border-collapse: collapse;
}
.jj table.grid570 > tbody > tr > td.text-right {
  text-align: right;
}
.jj table.grid570 > tbody > tr > td.text-left {
  text-align: left;
}
.jj table.grid570 > tbody > tr:nth-of-type(2n) {
  background-color: #efefef;
}
.jj table.grid570 > tbody > tr[_crud_="R"] {
  background-color: white;
}
.jj table.grid570 > tbody > tr[_crud_="U"] {
  background-color: #BCD8F1;
}
.jj table.grid570 > tbody > tr[_crud_="D"] {
  background-color: #FAB4B4;
}
.jj table.grid570 > tbody > tr[editable="false"] td * {
  display: none;
}
.jj table.grid570 > tbody > tr[editable="true"] {
  background-color: inherit;
}
.jj table.grid570 td input {
  width: 100%;
  border: 0;
}
.jj table.grid570 td input[type="number"] {
  text-align: right;
}
.jj table.grid570 td .jj-hitem {
  margin-bottom: 0!important;
}
.jj table.grid570 td .jj-hitem .form-control {
  padding: 0 0.5rem;
  height: 1.5rem;
  border: 1px solid #ccc;
}
.jj table.grid570.fixed {
  table-layout: fixed;
}
.jj table.grid570.fixed th,
.jj table.grid570.fixed td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj table.nowarp td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ==JJGrid.class End ================ */




/* ==JJGrid.720.class Start ================ */
/* ==JJGrid.720.class================ */
.jj jj-grid720 {
  display: block;
  position: relative;
  background-color: white;
}
.jj jj-grid720 .grid-warp {
  overflow: auto;
}
.jj jj-grid720 .grid-warp table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0px;
  border-left: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  margin-bottom: 0px;
  border-collapse: separate;
}
.jj jj-grid720 .grid-warp table .tr-num {
  max-width: 50px!important;
  width: 50px!important;
}
.jj jj-grid720 .grid-warp table .tr-check {
  max-width: 40px;
  font: normal normal normal 14px/1 FontAwesome;
}
.jj jj-grid720 .grid-warp table th.tr-check.on:before {
  content: "\F046";
}
.jj jj-grid720 .grid-warp table tr {
  height: 30px;
}
.jj jj-grid720 .grid-warp table tr th,
.jj jj-grid720 .grid-warp table tr td {
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  text-align: center;
  padding: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj jj-grid720 .grid-warp table tr th .form-control,
.jj jj-grid720 .grid-warp table tr td .form-control {
  padding: 0;
  height: 25px;
}
.jj jj-grid720 .grid-warp table tr th > .j2-item .control-label,
.jj jj-grid720 .grid-warp table tr td > .j2-item .control-label {
  display: none;
}
.jj jj-grid720 .grid-warp table tr th > .j2-item .control-content,
.jj jj-grid720 .grid-warp table tr td > .j2-item .control-content {
  height: 22px;
  min-height: 22px;
}
.jj jj-grid720 .grid-warp table tr th > .j2-item .control-content .check-label,
.jj jj-grid720 .grid-warp table tr td > .j2-item .control-content .check-label {
  width: auto;
}
.jj jj-grid720 .grid-warp table tr th > .j2-item .control-content .form-control,
.jj jj-grid720 .grid-warp table tr td > .j2-item .control-content .form-control {
  height: 22px;
}
.jj jj-grid720 .grid-warp table thead {
  background-color: #e1f0f8;
}
.jj jj-grid720 .grid-warp table thead .tr-check:before {
  content: "\F096";
}
.jj jj-grid720 .grid-warp table tbody tr.selected .tr-check:before {
  content: "\F046";
}
.jj jj-grid720 .grid-warp table tbody tr[crud="C"] td.num {
  background-color: var(--primary);
}
.jj jj-grid720 .grid-warp table tbody tr[crud="U"] td.num {
  background-color: var(--warning);
}
.jj jj-grid720 .grid-warp table tbody tr[crud="D"] td.num {
  background-color: var(--gray);
}
.jj jj-grid720 .grid-warp table tbody tr:hover {
  background-color: #fafafa;
}
.jj jj-grid720 .grid-warp table tbody tr[row-index] .tr-check:before {
  content: "\F096";
}
.jj jj-grid720 .grid-warp table tbody tr[row-index].selected[row-index] .tr-check:before {
  content: "\F046";
}
.jj jj-grid720 .grid-warp table tbody tr .j2-item {
  line-height: initial;
}
.jj jj-grid720.last-auto col:last-child {
  width: auto!important;
}
.jj jj-grid720.simple .tr-check {
  display: none;
}
.jj jj-grid720.simple tbody tr:hover {
  background-color: transparent;
}
.jj jj-grid720 .size-bar {
  position: absolute;
  border: 1px solid transparent;
  display: none;
  width: 2px;
  top: 0;
  z-index: 10;
  cursor: ew-resize;
}
.jj jj-grid720 .size-bar:hover {
  background-color: var(--secondary);
}
.jj jj-grid720 .size-bar.on {
  display: block;
}
@media (max-width: 767.98px) {
  .jj jj-grid720 table col:last-child {
    min-width: 100px!important;
  }
}

/* ==JJGrid.720.class End ================ */




/* ==JJPivotTable.720.class Start ================ */
/* ==JJPivotTable.720.class================ */
.jj {
  /*
 * 커스틈컴포넌트 초기화 스타일
 */
}
.jj jj-pivot-table {
  position: relative;
  display: block;
  height: 300px;
  display: flex;
  flex-direction: column;
}
.jj jj-pivot-table .table-head-warp {
  display: inline-block;
  flex-grow: 0;
  overflow: hidden;
  overflow-y: scroll;
  flex: none;
  position: relative;
}
.jj jj-pivot-table .table-head-warp::-webkit-scrollbar-button:start:decrement,
.jj jj-pivot-table .table-head-warp::-webkit-scrollbar-button:end:increment {
  height: 0px;
}
.jj jj-pivot-table .table-head-warp::-webkit-scrollbar-track {
  background: #efefef;
  -webkit-border-radius: 0px !important;
  border-radius: 0px !important;
  -webkit-box-shadow: none;
}
.jj jj-pivot-table .table-head-warp::-webkit-scrollbar-thumb {
  display: none;
}
.jj jj-pivot-table .table-body-warp {
  flex-grow: 1;
  overflow: auto;
  overflow-y: scroll;
  margin-top: -1px;
  margin-bottom: -5px;
  position: relative;
}
.jj jj-pivot-table table {
  table-layout: fixed;
  width: 1%;
  border: 1px solid var(--secondary);
  border-collapse: collapse;
  background-color: var(--white);
}
.jj jj-pivot-table table th,
.jj jj-pivot-table table td {
  border: 1px solid #ddd;
  padding: 3px;
  color: black;
}
.jj jj-pivot-table table th {
  text-align: center;
  background-color: var(--light);
}
.jj jj-pivot-table table td {
  text-align: right;
}
.jj jj-pivot-table table tr.sub-total,
.jj jj-pivot-table table tr.row-total {
  background-color: var(--light);
}
.jj jj-pivot-table table.fix-table {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: whitesmoke;
}

/* ==JJPivotTable.720.class End ================ */




/* ==JJQueryResult.720.class Start ================ */
/* ==JJQueryResult.720.class================ */
.jj jj-query-result {
  display: block;
  position: relative;
  background-color: white;
  border: 1px solid var(--gray);
  overflow: auto;
  padding: 5px 5px 15px 5px;
}
.jj jj-query-result button * {
  pointer-events: none;
}
.jj jj-query-result table {
  width: 100%;
  border: 1px solid var(--secondary);
  border-collapse: collapse;
}
.jj jj-query-result table th,
.jj jj-query-result table td {
  border: 1px solid var(--secondary);
  padding: 3px;
  font-size: 12px;
  color: black;
  min-width: 100px;
}
.jj jj-query-result table th {
  text-align: center;
  background-color: var(--light);
}

/* ==JJQueryResult.720.class End ================ */




/* ==JJWebForm.720.class Start ================ */
/* ==JJWebForm.720.class================ */
.jj .web-form td {
  padding: 0;
  vertical-align: middle;
}
.jj .web-form td:empty {
  padding: 0.8rem;
}
.jj .web-form td .j2-item {
  padding: 0;
  border: 0!important;
}
.jj .web-form td .j2-item .form-control {
  border: 0!important;
}
.jj .web-form td .j2-item .control-content {
  border: 0!important;
}
.jj .web-form td .j2-item .help-block {
  height: 20px!important;
  bottom: 5px!important;
  top: 5px!important;
  right: 5px!important;
  line-height: 20px!important;
}
.jj .web-form td .j2-item[required]:before {
  margin-left: -0.9rem;
  position: absolute;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 5px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  line-height: 1rem;
  content: "\F111";
  color: var(--danger);
}
.jj j2-proxy-pivot.j2-item {
  min-height: auto!important;
}
.jj j2-proxy-pivot.j2-item div.table-body-warp:empty {
  min-height: 150px;
}
.jj j2-proxy-pivot.j2-item div.table-body-warp {
  overflow-y: auto!important;
}
.jj j2-proxy-pivot.j2-item table {
  border: 0!important;
}

/* ==JJWebForm.720.class End ================ */




/* ==JJSerchListGroupBox.720.class Start ================ */
/* ==JJSerchListGroupBox.720.class================ */
.jj jj-search-listgroup {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 10px;
}
.jj jj-search-listgroup > .jj-search-label {
  flex: none;
}
.jj jj-search-listgroup > .list-group {
  flex-grow: 1;
  overflow: auto;
}

/* ==JJSerchListGroupBox.720.class End ================ */




/* ==JJGmap.720.class Start ================ */
/* ==JJGmap.720.class================ */
.jj jj-googlemap {
  position: relative;
  display: block;
  min-height: 200px;
}
.jj jj-vhtml-editor jj-googlemap * {
  pointer-events: none;
}

/* ==JJGmap.720.class End ================ */




/* ==JJKmap.720.class Start ================ */
/* ==JJKmap.720.class================ */
.jj jj-kakaomap {
  position: relative;
  display: block;
  width: 100%;
  min-height: 400px;
  border: 1px solid var(--dark);
}
.jj jj-kakaomap .card {
  position: absolute;
  bottom: 20px;
  left: -50px;
}
.jj jj-kakaomap .card .card-body {
  color: red;
}
.jj jj-kakaomap .info {
  display: block;
  background-color: yellow;
  width: 147px;
  text-align: center;
}
.jj jj-vhtml-editor jj-kakaomap * {
  pointer-events: none;
}

/* ==JJKmap.720.class End ================ */




/* ==JJBoardListMore.720.class Start ================ */
/* ==JJBoardListMore.720.class================ */
.jj jj-board-more {
  position: relative;
  display: block;
}
.jj jj-board-more .config-content {
  margin-left: 0;
  margin-right: 0;
  display: block!important;
}
.jj jj-board-more .config-content .config-content-box {
  margin-bottom: 0;
}
.jj jj-board-more .config-content .config-content-box .config-box {
  position: relative;
  margin-left: 0!important;
  margin-right: 0!important;
  margin-bottom: 0!important;
  padding: 0 14px;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-box-top {
  margin-bottom: 0!important;
  padding: 1rem 0;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-box-top .config-top-more h5 {
  font-size: 21px;
  font-weight: normal!important;
  margin-left: 9px!important;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-box-top .config-top-more .config-btns a {
  display: flex;
  width: 25px!important;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-box-top .config-top-more .config-btns a > i {
  color: #000;
  font-size: 20px;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-box-top .config-top-more .config-btns a.goto-more:hover > i {
  color: var(--primary);
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm {
  height: 230px;
  overflow: hidden;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div {
  display: inline-block;
  width: 100%;
  padding: 10px;
  margin-bottom: 0!important;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div > a {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div > a i.hidden {
  display: none;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div > a img.image-main {
  display: none;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div > a .board-memo {
  font-size: initial;
  font-weight: normal;
  margin-bottom: 0;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div .recruit {
  display: none;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div .recruit .badge {
  align-self: flex-start;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div .title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 80px);
}
.jj jj-board-more .config-content .config-content-box .config-box .config-more-btm > div .reg-date {
  color: #666;
  width: 80px;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-btns {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-btns a {
  display: flex;
  width: 25px!important;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-btns a > i {
  color: #000;
  font-size: 20px;
}
.jj jj-board-more .config-content .config-content-box .config-box .config-btns a.goto-more:hover > i {
  color: var(--primary);
}
.jj jj-board-more[type="basic-nonedate"] .reg-date {
  display: none!important;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm {
  transition: all 0.2s ease-out;
  display: flex;
  flex-direction: row;
  height: 296px!important;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm > div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm > div:last-child {
  margin-right: 0;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm > div a {
  padding: 10px;
  display: block!important;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm > div a img.image-main {
  display: block!important;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm > div a div {
  overflow: hidden!important;
  white-space: nowrap!important;
  text-overflow: ellipsis!important;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm > div a .title {
  padding-bottom: 10px;
  width: 100%!important;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm > div a small {
  font-size: 13px;
  width: 100%!important;
  white-space: normal;
}
.jj jj-board-more[type="vertical-image"] div.config-more-btm div.recruit {
  display: none;
}
.jj jj-board-more[type="vertical-recruit"] .config-content {
  margin-left: 0;
  margin-right: 0;
  display: block!important;
}
.jj jj-board-more[type="vertical-recruit"] .config-content .config-box {
  margin-left: 0;
  margin-right: 0;
}
.jj jj-board-more[type="vertical-recruit"] .config-content .config-box .config-top-more h5 {
  margin-left: 9px!important;
}
.jj jj-board-more[type="vertical-recruit"] .config-content .config-box .config-more-btm {
  display: flex;
  flex-flow: wrap;
  height: 271px;
  overflow: hidden;
}
.jj jj-board-more[type="vertical-recruit"] .config-content .config-box .config-more-btm > div {
  display: inline-block;
  width: 25%;
  padding: 10px;
  margin-bottom: 0!important;
}
.jj jj-board-more[type="vertical-recruit"] .config-content .config-box .config-more-btm > div a {
  padding: 10px;
  display: block!important;
}
.jj jj-board-more[type="vertical-recruit"] .config-content .config-box .config-more-btm > div .recruit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
}
.jj jj-board-more[type="vertical-recruit"] .config-content .config-box .config-more-btm > div .recruit .badge {
  align-self: flex-start;
}
.jj jj-board-more[type="vertical-recruit"] .config-content .config-box .config-more-btm > div .title {
  padding-bottom: 10px;
  width: 100%!important;
}
.jj jj-board-more[type="box-image"] .config-more-btm {
  transition: all 0.2s ease-out;
  display: flex;
  flex-direction: row;
  height: 310px!important;
}
.jj jj-board-more[type="box-image"] .config-more-btm > div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
}
.jj jj-board-more[type="box-image"] .config-more-btm > div:last-child {
  margin-right: 0;
}
.jj jj-board-more[type="box-image"] .config-more-btm > div a {
  display: block!important;
  border-radius: 2.75px;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
}
.jj jj-board-more[type="box-image"] .config-more-btm > div a img.image-main {
  display: block!important;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}
.jj jj-board-more[type="box-image"] .config-more-btm > div a div {
  overflow: hidden!important;
  white-space: nowrap!important;
  text-overflow: ellipsis!important;
}
.jj jj-board-more[type="box-image"] .config-more-btm > div a .title {
  padding-bottom: 10px;
  margin: 0 20px;
  width: auto!important;
}
.jj jj-board-more[type="box-image"] .config-more-btm > div a .reg-date {
  width: auto!important;
  font-size: 13px;
  white-space: normal;
  margin: 0 0 10px 0;
}
.jj jj-board-more[type="box-image"] .config-more-btm .recruit {
  display: none;
}
.jj jj-board-more[type="box-recruit"] .config-content {
  margin-left: 0;
  margin-right: 0;
  display: block!important;
}
.jj jj-board-more[type="box-recruit"] .config-content .config-box {
  margin-left: 0;
  margin-right: 0;
}
.jj jj-board-more[type="box-recruit"] .config-content .config-box .config-top-more h5 {
  margin-left: 9px!important;
}
.jj jj-board-more[type="box-recruit"] .config-content .config-box .config-more-btm {
  display: flex;
  flex-flow: wrap;
  height: 293px;
  overflow: hidden;
}
.jj jj-board-more[type="box-recruit"] .config-content .config-box .config-more-btm > div {
  display: inline-block;
  width: 25%;
  padding: 10px;
  margin-bottom: 0!important;
}
.jj jj-board-more[type="box-recruit"] .config-content .config-box .config-more-btm > div a {
  padding: 10px;
  display: block!important;
  border: 1px solid #e7eaed;
  border-radius: 1rem;
}
.jj jj-board-more[type="box-recruit"] .config-content .config-box .config-more-btm > div .recruit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
}
.jj jj-board-more[type="box-recruit"] .config-content .config-box .config-more-btm > div .recruit .badge {
  align-self: flex-start;
}
.jj jj-board-more[type="box-recruit"] .config-content .config-box .config-more-btm > div .title {
  padding-bottom: 10px;
  width: 100%!important;
}
.jj jj-board-more[type="onelist"] .config-box {
  display: flex;
  flex-direction: row!important;
  align-items: center;
  padding: 9px 0.75rem 0.75rem 0.75rem !important;
  height: 50px!important;
  margin-left: 0!important;
  margin-right: 0!important;
}
.jj jj-board-more[type="onelist"] .config-box .config-box-top {
  width: max-content;
  margin-right: 0.9rem;
  margin-left: 0.9rem;
  margin-bottom: 0!important;
  padding: 0!important;
}
.jj jj-board-more[type="onelist"] .config-box .config-box-top .config-top-more a.goto-more {
  display: none;
}
.jj jj-board-more[type="onelist"] .config-box .config-more-btm {
  position: relative;
  overflow: hidden;
  width: auto;
  height: 34px!important;
}
.jj jj-board-more[type="onelist"] .config-box .config-more-btm > div {
  position: absolute;
  height: 100%;
  margin-bottom: 0;
  text-align: left;
  width: 100%;
  top: 300px;
  padding: 0!important;
}
.jj jj-board-more[type="onelist"] .config-box .config-more-btm > div a {
  width: 100%;
  height: 100%;
  padding-left: 0.9rem;
  display: flex;
  flex-direction: row;
}
.jj jj-board-more[type="onelist"] .config-box .config-more-btm > div a div {
  flex-grow: 1;
  height: min-content;
  margin-top: auto;
  margin-bottom: auto;
  line-height: inherit;
  overflow: hidden!important;
  white-space: nowrap!important;
  text-overflow: ellipsis!important;
}
.jj jj-board-more[type="onelist"] .config-box .config-more-btm > div a .title {
  padding-bottom: 0!important;
}
.jj jj-board-more[type="onelist"] .config-box .config-more-btm > div a small {
  white-space: nowrap;
  padding: 0 0.9rem;
  font-size: 13px;
  margin-top: auto;
  margin-bottom: auto;
}
.jj jj-board-more[type="onelist"] .config-box .config-more-btm div.recruit {
  display: none;
}
.jj jj-board-more[type="onelist"] .config-box .config-more-btm div.on {
  top: 0!important;
}
.jj jj-board-more[type="onelist2"] .config-box {
  display: block;
  padding: 9px 0.75rem 0.75rem 0.75rem !important;
  height: 210px!important;
  margin-left: 0!important;
  margin-right: 0!important;
}
.jj jj-board-more[type="onelist2"] .config-box .config-box-top {
  width: 100%;
  margin-bottom: 0!important;
  padding: 0!important;
}
.jj jj-board-more[type="onelist2"] .config-box .config-box-top .config-top-more a.goto-title {
  flex-grow: 1;
}
.jj jj-board-more[type="onelist2"] .config-box .config-box-top .config-top-more a.goto-more {
  margin-right: 9px;
}
.jj jj-board-more[type="onelist2"] .config-box .config-more-btm {
  position: relative;
  overflow: hidden;
  width: auto;
  height: auto!important;
}
.jj jj-board-more[type="onelist2"] .config-box .config-more-btm > div {
  position: absolute;
  height: 100%;
  margin-bottom: 0;
  text-align: left;
  width: 100%;
  top: 300px;
  padding: 0!important;
}
.jj jj-board-more[type="onelist2"] .config-box .config-more-btm > div a {
  align-items: normal!important;
  width: 100%;
  height: 100%;
  padding-left: 0.9rem;
  display: flex;
  flex-direction: column;
}
.jj jj-board-more[type="onelist2"] .config-box .config-more-btm > div a div {
  flex-grow: 1;
  height: min-content;
  margin-top: auto;
  margin-bottom: auto;
  line-height: inherit;
  overflow: hidden!important;
  white-space: nowrap!important;
  text-overflow: ellipsis!important;
}
.jj jj-board-more[type="onelist2"] .config-box .config-more-btm > div a .title {
  text-overflow: unset!important;
  white-space: normal!important;
  padding-bottom: 0!important;
}
.jj jj-board-more[type="onelist2"] .config-box .config-more-btm > div a small {
  white-space: nowrap;
  padding: 0 0.9rem;
  font-size: 13px;
  margin-top: auto;
  margin-bottom: auto;
}
.jj jj-board-more[type="onelist2"] .config-box .config-more-btm div.recruit {
  display: none;
}
.jj jj-board-more[type="onelist2"] .config-box .config-more-btm div.on {
  top: 0!important;
}
.jj jj-board-more[type="row-recruit"] .config-content {
  margin-left: 0;
  margin-right: 0;
  display: block!important;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box {
  margin-left: 0;
  margin-right: 0;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-top-more h5 {
  margin-left: 9px!important;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm {
  background: none;
  display: flex;
  flex-flow: wrap;
  height: 100%!important;
  overflow: hidden;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div {
  background-color: inherit;
  display: inline-block;
  width: 25%;
  padding: 10px;
  margin-bottom: 0!important;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div a {
  padding: 10px;
  display: flex!important;
  flex-direction: column!important;
  height: 100%;
  background-color: #fafafa;
  border-radius: 3px;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div .recruit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  flex-grow: 0!important;
  margin-bottom: 10px;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div .recruit .badge {
  align-self: flex-start;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div .recruit > div {
  display: flex;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div .recruit > div .small-title {
  width: 65px;
  padding-right: 0.5rem;
  font-weight: bolder;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div .recruit > div small {
  flex-grow: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div .title {
  flex-grow: 1;
  padding-bottom: 10px;
  min-height: 91px;
  width: 100%!important;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm > div .title > t {
  white-space: normal;
  display: -webkit-box;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.jj jj-board-more[type="row-recruit"] .config-content .config-box .config-more-btm .reg-date {
  display: none;
}
@media (max-width: 767.98px) {
  .jj jj-board-more .title {
    white-space: inherit!important;
    height: 22.5px;
    text-overflow: ellipsis;
    width: calc(100% - 80px);
  }
  .jj jj-board-more .reg-date {
    width: 80px;
  }
  .jj jj-board-more[type="box-image"] {
    height: auto;
  }
  .jj jj-board-more[type="box-image"] div.config-more-btm {
    height: 689px!important;
    flex-wrap: wrap;
  }
  .jj jj-board-more[type="box-image"] div.config-more-btm > div {
    width: 50%!important;
  }
  .jj jj-board-more[type="box-image"] div.config-more-btm > div .card-img-top {
    height: 262px!important;
  }
  .jj jj-board-more[type="box-image"] div.config-more-btm > div .title {
    width: auto!important;
  }
  .jj jj-board-more[type="box-image"] .reg-date {
    width: auto!important;
  }
  .jj jj-board-more[type="vertical-image"] div.config-more-btm > div {
    flex-basis: 50%!important;
  }
  .jj jj-board-more[type="vertical-recruit"] div.config-more-btm > div {
    flex-basis: 50%!important;
  }
  .jj jj-board-more[type="box-recruit"] div.config-more-btm > div {
    flex-basis: 50%!important;
  }
  .jj jj-board-more[type="row-recruit"] div.config-more-btm > div {
    flex-basis: 50%!important;
  }
}

/* ==JJBoardListMore.720.class End ================ */




/* ==JJColor.720.class Start ================ */
/* ==JJColor.720.class================ */

/* ==JJColor.720.class End ================ */




/* ==JJIframe.720.class Start ================ */
/* ==JJIframe.720.class================ */
.jj jj-iframe.j2-item {
  position: relative;
  min-height: 100px;
}
.jj jj-iframe.j2-item iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.jj jj-vhtml-editor jj-iframe * {
  pointer-events: none;
}

/* ==JJIframe.720.class End ================ */




/* ==JJQRReader.720.class Start ================ */
/* ==JJQRReader.720.class================ */
.jj jj-qrreader,
.jj .jj-qr-reader {
  display: block;
  position: relative;
  background-image: url(/repository/systemImages/team/img1-md.jpg);
  background-attachment: initial;
  background-size: 100% 100%;
  min-width: 340px;
  min-height: 300px;
  max-width: 640px;
}

/* ==JJQRReader.720.class End ================ */




/* ==JJWEBHtml.720.class Start ================ */
/* ==JJWEBHtml.720.class================ */
.jj jj-webhtml {
  display: block;
  position: relative;
  min-height: 300px;
}
.jj jj-webhtml:empty:before {
  content: "우측 속성 설정의 HTML 편집기 버튼을 눌러서 사용해주세요.";
}
.jj jj-webhtml * {
  pointer-events: none;
}
.jj[lang="en-US"] jj-webhtml :empty:before {
  content: "Press the HTML editor button on the right property setting to use it.";
}

/* ==JJWEBHtml.720.class End ================ */




/* ==JJWebIcon.720.class Start ================ */
/* ==JJWebIcon.720.class================ */
.jj jj-webicon {
  display: inline-block;
  position: relative;
}
.jj jj-webicon * {
  pointer-events: none;
}

/* ==JJWebIcon.720.class End ================ */




/* ==JJYoutube.720.class Start ================ */
/* ==JJYoutube.720.class================ */
.jj jj-youtube {
  display: block;
  position: relative;
  min-height: 100px;
  -webkit-box-align: center!important;
  -ms-flex-align: center!important;
  align-items: center!important;
  -webkit-box-pack: center!important;
  -ms-flex-pack: center!important;
  justify-content: center!important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex!important;
}
.jj jj-youtube i {
  font-size: 15rem;
  color: red;
  display: block;
  opacity: 0.2;
}
.jj jj-youtube iframe {
  width: 100%;
  height: 100%;
}
.jj jj-youtube .thum-container {
  width: 100%;
  height: auto;
  aspect-ratio: 1.77777778;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.jj jj-youtube .thum-container:after {
  color: #ff000050;
  content: '\F16A';
  display: inline-block;
  font: normal 14px FontAwesome;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  transition: color 0.3s ease-in-out;
}
.jj jj-youtube .thum-container:hover:after {
  color: #ff0000;
}
.jj jj-youtube .thum-container .yt-thum {
  width: 100%;
  display: block;
}
.jj jj-vhtml-editor jj-googlemap * {
  pointer-events: none;
}

/* ==JJYoutube.720.class End ================ */




/* ==JJDownloadFile.720.class Start ================ */
/* ==JJDownloadFile.720.class================ */
.jj jj-download {
  display: block;
  position: relative;
}

/* ==JJDownloadFile.720.class End ================ */




/* ==JJTree.720.class Start ================ */
/* ==JJTree.720.class================ */
.jj .jj-tree {
  background-color: white;
  display: block;
  position: relative;
  padding: 0;
  margin-bottom: 0;
  overflow: auto;
  opacity: 0.8;
  height: 100%;
  padding-bottom: 20px;
  /**
  스타일 종류를 선언함
  */
}
.jj .jj-tree:hover {
  overflow: auto;
}
.jj .jj-tree ul {
  margin-bottom: 0;
}
.jj .jj-tree ul li {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
  margin-left: 10px;
}
.jj .jj-tree ul li a {
  position: relative;
  display: block;
  padding-left: 0.3rem;
  line-height: 1.3rem;
  border-top: 2px dotted transparent;
  border-bottom: 2px dotted transparent;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
  cursor: pointer;
}
.jj .jj-tree ul li a:hover {
  background-color: #fafafa;
}
.jj .jj-tree ul li a.select {
  background-color: #eeeeee;
}
.jj .jj-tree ul li a.select:hover {
  background-color: #e0e0e0;
}
.jj .jj-tree ul li a.select .jj-tree-check {
  color: black;
}
.jj .jj-tree ul li a.dragover {
  background-color: yellow;
}
.jj .jj-tree ul li a.dragover[position="top"] {
  border-top: 2px dotted red;
}
.jj .jj-tree ul li a.dragover[position="bottom"] {
  border-bottom: 2px dotted blue;
}
.jj .jj-tree ul li a.dragover[position="inner"] {
  border-top: 2px dotted red;
  border-bottom: 2px dotted blue;
}
.jj .jj-tree ul li a.drop {
  background-color: orange;
}
.jj .jj-tree ul li a.bold {
  font-weight: bold;
}
.jj .jj-tree ul li a .jj-tree-check {
  line-height: 1.2rem;
  cursor: pointer;
  position: relative;
  width: 1.5rem;
  height: 1rem;
  display: inline-block;
}
.jj .jj-tree ul li a .jj-tree-check::after {
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 4px;
  display: block;
  background-color: white;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 1rem;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F046";
  content: "\f00c";
  content: " ";
  border: 1px dotted #d5dbe0;
  opacity: 0.9;
}
.jj .jj-tree ul li a .jj-tree-check.checked::after {
  content: "\f00c";
}
.jj .jj-tree ul li a .fa {
  position: relative;
  display: inline-block;
}
.jj .jj-tree ul li a i.icon {
  pointer-events: none;
  width: 1rem;
  text-align: center;
}
.jj .jj-tree ul li a t {
  pointer-events: none;
}
.jj .jj-tree ul li a > .addon {
  margin-left: 1rem;
}
.jj .jj-tree ul li ul {
  margin-left: -1.5rem;
  padding-left: 0.7rem;
  display: none;
}
.jj .jj-tree ul li.has-child > .jj-tree-folding {
  cursor: pointer;
}
.jj .jj-tree ul li.has-child > .jj-tree-folding::after {
  position: absolute;
  top: 0.5rem;
  left: 0.4rem;
  display: block;
  width: 0.7rem;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f107";
  content: "\f105";
  content: "\f054";
  opacity: 1;
  background-color: white;
}
.jj .jj-tree ul li.has-child.show > .jj-tree-folding::after {
  content: "\f0fe";
  content: "\f107";
  content: "\f078";
}
.jj .jj-tree ul li.has-child.show > ul {
  display: block;
}
.jj .jj-tree > ul {
  margin-left: 0!important;
  padding-left: 0.5rem !important;
}
.jj .jj-tree > ul > li {
  margin-left: 0!important;
}
.jj .jj-tree > ul > li > ul.jstree-children {
  padding-left: 9px;
}
.jj .jj-tree.toggle-hidden ul {
  padding-left: 1.5rem;
}
.jj .jj-tree.toggle-hidden ul li {
  padding-left: 0px!important;
}
.jj .jj-tree.toggle-hidden ul li > .toggle {
  display: none;
}
.jj .jj-tree.guide-line ul li::before {
  content: '';
  position: absolute;
  left: 11px;
  top: -7px;
  bottom: 0px;
  border-left: 1px solid gray;
}
.jj .jj-tree.guide-line ul li .jj-tree-folding::before {
  content: '';
  position: absolute;
  left: 11px;
  width: 12px;
  top: 10px;
  border-top: 1px solid gray;
}
.jj .jj-tree.guide-line ul li:last-child::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 11px;
  border-left: 1px solid gray;
}
.jj .jj-tree.guide-line ul li:last-child li:last-child::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 11px;
  border-left: 1px solid gray;
}
.jj .jj-tree.guide-line ul li .toggle {
  background-color: white;
}
.jj .jj-tree.guide-line ul li .toggle i:before {
  content: "\F196";
}
.jj .jj-tree.guide-line ul li[data-expanded="true"] .toggle > i {
  -webkit-transform: rotate(0deg) !important;
  /* Safari */
  transform: rotate(0deg) !important;
}
.jj .jj-tree.guide-line ul li[data-expanded="true"] > .toggle i:before {
  content: "\F147";
}
.jj .jj-tree.guide-line > ul > li:first-child::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 0;
  border-left: 1px solid gray;
}
.jj .jj-tree.caret-arrow li.has-child > .jj-tree-folding::after {
  content: "\F0DA";
  font-size: 1.2rem;
  top: 0.2rem;
}
.jj .jj-tree.caret-arrow li.has-child.show > .jj-tree-folding::after {
  content: "\F0D7";
}

/* ==JJTree.720.class End ================ */




/* ==JJDomTree.720.class Start ================ */
/* ==JJDomTree.720.class================ */

/* ==JJDomTree.720.class End ================ */




/* ==JJFileReadTree.720.class Start ================ */
/* ==JJFileReadTree.720.class================ */
.jj jj-file-read-tree.jj-tree a.dragover {
  background-color: yellow;
}
.jj jj-file-read-tree.jj-tree a.dragover[position='top'] {
  border-top: 2px dotted red;
  border-bottom: 2px dotted blue;
}
.jj jj-file-read-tree.jj-tree a.dragover[position='bottom'] {
  border-top: 2px dotted red;
  border-bottom: 2px dotted blue;
}
.jj jj-file-read-tree.jj-tree a.dragover[position='inner'] {
  border-top: 2px dotted red;
  border-bottom: 2px dotted blue;
}

/* ==JJFileReadTree.720.class End ================ */




/* ==JJFileTree.720.class Start ================ */
/* ==JJFileTree.720.class================ */
.jj jj-filetree.jj-tree {
  background-color: white;
  color: var(--dark);
}
.jj jj-filetree.jj-tree a.dragover {
  background-color: yellow;
}
.jj jj-filetree.jj-tree a.dragover[position='top'] {
  border-top: 2px dotted red;
  border-bottom: 2px dotted blue;
}
.jj jj-filetree.jj-tree a.dragover[position='bottom'] {
  border-top: 2px dotted red;
  border-bottom: 2px dotted blue;
}
.jj jj-filetree.jj-tree a.dragover[position='inner'] {
  border-top: 2px dotted red;
  border-bottom: 2px dotted blue;
}

/* ==JJFileTree.720.class End ================ */




/* ==JJColorBox.720.class Start ================ */
/* ==JJColorBox.720.class================ */
.jj jj-color-box {
  position: relative;
  display: block;
  width: 200px;
  white-space: pre-wrap;
  padding: 3px;
}
.jj jj-color-box input[type="text"] {
  width: 100%;
  border: 0;
}
.jj jj-color-box input[type="color"] {
  width: 50%;
  height: 27px;
}
.jj jj-color-box input[type="button"] {
  width: 50%;
  height: 27px;
}
.jj jj-color-box c {
  padding: 0.3rem;
  color: black;
  opacity: 0.7;
  cursor: pointer;
  text-align: center;
  width: 30px;
  display: inline-block;
  border: 2px solid transparent;
  margin: 1px;
}
.jj jj-color-box c:hover {
  opacity: 1;
  border: 2px solid var(--primary);
}

/* ==JJColorBox.720.class End ================ */




/* ==JJSymbolBox.720.class Start ================ */
/* ==JJSymbolBox.720.class================ */
.jj jj-symbol-box {
  position: relative;
  display: block;
  min-width: 200px;
  white-space: pre-wrap;
}
.jj jj-symbol-box c {
  padding: 0.3rem;
  color: black;
  opacity: 0.7;
  cursor: pointer;
  text-align: center;
  width: 40px;
  display: inline-block;
}
.jj jj-symbol-box c:hover {
  opacity: 1;
  background-color: var(--info);
}

/* ==JJSymbolBox.720.class End ================ */




/* ==HMISSEvents.720.class Start ================ */
/* ==HMISSEvents.720.class================ */

/* ==HMISSEvents.720.class End ================ */




/* ==JJHmiDiagram.720.class Start ================ */
/* ==JJHmiDiagram.720.class================ */
.jj jj-hmi-diagram {
  position: relative;
  display: block;
  background-color: white;
  height: 100%;
  min-height: 300px;
  overflow: auto;
  background-size: contain;
  background-repeat: no-repeat;
}
.jj jj-hmi-diagram .w {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: move;
  border: 0;
  color: var(--secondary);
  font-size: 11px;
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-hmi-diagram .w.mark {
  outline: 2px dotted red;
}
.jj jj-hmi-diagram .w .list-group-item {
  background-color: transparent;
}
.jj jj-hmi-diagram .w > img {
  width: 100%;
  height: 100%;
}
.jj jj-hmi-diagram .w [data-render="JJChart"] {
  min-width: 100px;
  min-height: 50px;
  width: 100%;
  height: 100%;
}
.jj jj-hmi-diagram .w:hover {
  color: var(--text1);
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.jj jj-hmi-diagram .w:hover .ep {
  display: block;
}
.jj jj-hmi-diagram .w:hover.no-move {
  box-shadow: none;
  -o-box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-border-radius: 0;
  border-radius: 0;
}
.jj jj-hmi-diagram .aLabel {
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
}
.jj jj-hmi-diagram .aLabel.jtk-hover,
.jj jj-hmi-diagram .jtk-source-hover,
.jj jj-hmi-diagram .jtk-target-hover {
  background-color: #1e8151;
  color: white;
}
.jj jj-hmi-diagram .aLabel {
  background-color: white;
  opacity: 0.8;
  padding: 0.3em;
  border-radius: 0.5em;
  border: 1px solid #346789;
  cursor: pointer;
  z-index: 3;
}
.jj jj-hmi-diagram .ep {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  background-color: orange;
  cursor: pointer;
  box-shadow: 0 0 2px black;
  -webkit-transition: -webkit-box-shadow 0.25s ease-in;
  -moz-transition: -moz-box-shadow 0.25s ease-in;
  transition: box-shadow 0.25s ease-in;
  transform: translate(-50%, -50%);
}
.jj jj-hmi-diagram .ep:hover {
  box-shadow: 0 0 6px black;
}
.jj jj-hmi-diagram .jtk-connector,
.jj jj-hmi-diagram .jtk-endpoint {
  z-index: 3;
}
.jj jj-hmi-diagram .jtk-connector.selected path,
.jj jj-hmi-diagram .jtk-endpoint.selected path {
  stroke: #e9595b !important;
}
.jj jj-hmi-diagram .jtk-connector.selected path:last-child,
.jj jj-hmi-diagram .jtk-endpoint.selected path:last-child {
  fill: #e9595b !important;
}
.jj jj-hmi-diagram .dragHover {
  border: 2px solid orange;
}
.jj jj-hmi-diagram path,
.jj jj-hmi-diagram .jtk-endpoint {
  cursor: pointer;
}
.jj jj-hmi-diagram .group-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  border-radius: 12px;
  background-color: WhiteSmoke;
  font-size: 12px;
  cursor: move;
}
.jj jj-hmi-diagram .group-container > .title {
  background-color: #ABC1BB;
  padding: 0 16px;
  font-size: 13px;
  line-height: 30px;
  border-radius: 10px 10px 0 0;
  flex: none;
}
.jj jj-hmi-diagram .group-container > .group-body {
  flex-grow: 1;
}
.jj jj-hmi-diagram .group-container ul {
  margin-left: 25px;
  padding: 0;
}
.jj jj-hmi-diagram .group-container ul li {
  list-style-type: circle;
  margin-bottom: 7px;
}
.jj jj-hmi-diagram .group-container.collapsed {
  height: 40px!important;
  overflow: hidden;
}
.jj jj-hmi-diagram .group-container.collapsed > .group-body {
  display: none;
}
.jj jj-hmi-diagram .group-container .del,
.jj jj-hmi-diagram .group-container .node-collapse {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: white;
  padding: 1px;
  cursor: pointer;
  font-size: 13px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  display: block;
}
.jj jj-hmi-diagram .group-container .del:after {
  content: "X";
}
.jj jj-hmi-diagram .group-container .node-collapse {
  right: 29px;
  text-align: center;
}
.jj jj-hmi-diagram .group-container .node-collapse:after {
  content: "-";
}
.jj jj-hmi-diagram .group-container.collapsed .node-collapse:after {
  content: "+";
}
.jj jj-hmi-diagram .group-container .del[delete-all] {
  background-color: pink;
}
.jj jj-hmi-diagram .group-container.selected {
  opacity: 0.8;
}
.jj jj-hmi-diagram .hmi-groupbox {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 3rem;
  background-color: whitesmoke;
}
.jj jj-hmi-diagram .group-image {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ccc;
}
.jj jj-hmi-diagram .group-image > .group-body {
  flex-grow: 1;
  background-size: cover;
  min-height: 100px;
  border: 5px solid white;
}
.jj jj-hmi-diagram .image-item img {
  width: auto;
  height: auto;
  border-radius: 0;
}
.jj jj-hmi-diagram .jtk-connector path {
  stroke-width: 1;
}
.jj jj-hmi-diagram .jtk-group-collapsed .w,
.jj jj-hmi-diagram .jtk-group-collapsed ul,
.jj jj-hmi-diagram .jtk-group-collapsed .container,
.jj jj-hmi-diagram .jtk-group-collapsed .name {
  display: none;
}
.jj jj-hmi-diagram .jtk-drag-hover {
  outline: 4px solid cornflowerblue;
}
.jj jj-hmi-diagram .katavorio-ghost-proxy {
  outline: 2px solid red;
}
.jj jj-hmi-diagram .w[objtype="table"] {
  padding: 0;
  overflow: hidden;
}
.jj jj-hmi-diagram .w[objtype="table"] > .table-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.jj jj-hmi-diagram .w[objtype="table"] > .table-wrap > h4 {
  flex-grow: 0;
}
.jj jj-hmi-diagram .w[objtype="table"] > .table-wrap > ul {
  flex-grow: 1;
  overflow: auto;
}
.jj jj-hmi-diagram[data-mode="runtime"] .group-container .del,
.jj jj-hmi-diagram[data-mode="runtime"] .group-container .node-collapse {
  display: none;
}
.jj jj-hmi-diagram[data-mode="runtime"] .ep {
  display: none!important;
}

/* ==JJHmiDiagram.720.class End ================ */




/* ==JJHmiIcon.720.class Start ================ */
/* ==JJHmiIcon.720.class================ */
.jj jj-hmi-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 10px;
  min-width: 10px;
  cursor: pointer;
  background-color: transparent;
}
.jj jj-hmi-icon * {
  pointer-events: none;
}
.jj jj-hmi-icon > img {
  width: 100%;
  height: 100%;
}
.jj jj-hmi-icon > img.filter-blue {
  filter: hue-rotate(60deg);
}
.jj jj-hmi-icon > img.filter-pink {
  filter: hue-rotate(120deg);
}
.jj jj-hmi-icon > img.filter-red {
  filter: hue-rotate(220deg);
}
.jj jj-hmi-icon > img.filter-gray {
  filter: brightness(0.1) contrast(0.2);
}
.jj jj-hmi-icon > img.filter-yellow {
  filter: hue-rotate(270deg);
}
.jj jj-hmi-icon > img.rotate {
  transform-origin: right bottom;
  transition: all 0.5s ease-out;
}
.jj jj-hmi-icon[readonly] {
  cursor: no-drop;
}

/* ==JJHmiIcon.720.class End ================ */




/* ==JJHmiDevice.720.class Start ================ */
/* ==JJHmiDevice.720.class================ */
.jj jj-hmi-device {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: transparent;
}
.jj jj-hmi-device * {
  pointer-events: none;
}
.jj jj-hmi-device > img {
  width: 100%;
  height: 100%;
}
.jj jj-hmi-device.filter-blue img {
  filter: hue-rotate(60deg);
}
.jj jj-hmi-device.filter-pink img {
  filter: hue-rotate(120deg);
}
.jj jj-hmi-device.filter-red img {
  filter: hue-rotate(220deg);
}
.jj jj-hmi-device.filter-gray img {
  filter: brightness(0.1) contrast(0.2);
}
.jj jj-hmi-device.filter-yellow img {
  filter: hue-rotate(270deg);
}
.jj .w[data-hmi-element="jj-hmi-device"] {
  width: 100px;
  height: 150px;
}

/* ==JJHmiDevice.720.class End ================ */




/* ==JJHmiDial.720.class Start ================ */
/* ==JJHmiDial.720.class================ */
.jj jj-hmi-dial {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.jj jj-hmi-dial .dial {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  display: block;
  position: relative;
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
}
.jj jj-hmi-dial .dial .mark {
  position: relative;
  display: block;
  margin: 10px auto;
  width: 10%;
  height: 10%;
  min-width: 15px;
  min-height: 15px;
  background-color: black;
  border-radius: 50%;
}
.jj jj-hmi-dial .dial-title {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.jj jj-hmi-dial[readonly] {
  cursor: no-drop;
}

/* ==JJHmiDial.720.class End ================ */




/* ==JJHmiDigital.720.class Start ================ */
/* ==JJHmiDigital.720.class================ */
.jj jj-hmi-digital {
  position: relative;
  display: block;
  padding: 0.5rem;
  height: 100%;
  background-color: var(--dark);
  color: var(--info);
  text-align: right;
  margin: 0;
}
.jj jj-hmi-digital.font1 {
  font-family: 'digital-7.mono';
}
.jj jj-hmi-digital.font2 {
  font-family: 'ShareTechMono-Regular';
}
.jj jj-hmi-digital[readonly] {
  cursor: no-drop;
}

/* ==JJHmiDigital.720.class End ================ */




/* ==JJHmiHtml.720.class Start ================ */
/* ==JJHmiHtml.720.class================ */
.jj jj-hmi-html {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 20px;
}

/* ==JJHmiHtml.720.class End ================ */




/* ==JJHmiImage.720.class Start ================ */
/* ==JJHmiImage.720.class================ */
.jj jj-hmi-image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}
.jj .w[data-hmi-element="jj-hmi-image"] {
  width: 500px;
  height: 300px;
}

/* ==JJHmiImage.720.class End ================ */




/* ==JJHmiLine.720.class Start ================ */
/* ==JJHmiLine.720.class================ */
.jj jj-hmi-line {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.jj .w[data-hmi-element="jj-hmi-line"] {
  width: 300px;
  height: 10px;
}

/* ==JJHmiLine.720.class End ================ */




/* ==JJHmiPad.720.class Start ================ */
/* ==JJHmiPad.720.class================ */
.jj jj-hmi-pad {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  overflow: hidden;
  padding: 12px;
}
.jj jj-hmi-pad .slider-pointer {
  position: absolute;
  font-size: 24px;
  color: white;
  left: 0;
  top: 0;
}
.jj jj-hmi-pad table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.jj jj-hmi-pad table td {
  border: 1px solid #ccc;
}
.jj .w[data-hmi-element="jj-hmi-pad"] {
  width: 200px;
  height: 200px;
}
.jj .print-on j2-pad.j2-item .slider-pointer {
  border: 9px solid var(--primary);
  border-radius: 50%;
}
.jj .print-on j2-pad.j2-item .fa-soccer-ball-o:before,
.jj .print-on j2-pad.j2-item .fa-futbol-o:before {
  content: none;
}

/* ==JJHmiPad.720.class End ================ */




/* ==JJHmiRealChart.720.class Start ================ */
/* ==JJHmiRealChart.720.class================ */
.jj jj-real-chart {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 20px;
  min-height: 20px;
  background-color: var(--dark);
}

/* ==JJHmiRealChart.720.class End ================ */




/* ==JJAttribute.720.class Start ================ */
/* ==JJAttribute.720.class================ */
.jj jj-attribute {
  display: block;
  position: relative;
}
.jj jj-attribute table {
  width: 100%;
  font-size: 12px;
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
  table-layout: fixed;
}
.jj jj-attribute table tr {
  height: 20px;
}
.jj jj-attribute table tr th {
  padding: 3px;
}
.jj jj-attribute table tr th button {
  float: left;
  width: 17px;
}
.jj jj-attribute table tr th button:not(:last-child) {
  margin-right: 1px;
}
.jj jj-attribute table tr td {
  background-color: #fff;
}
.jj jj-attribute table tr td[colspan='2'] > * {
  width: 25%;
  float: left;
}
.jj jj-attribute table tr td[colspan='2'] > * .dropdown-menu {
  width: 50px;
}
.jj jj-attribute table .btn,
.jj jj-attribute table .input-group .btn,
.jj jj-attribute table .form-control {
  padding: 3px;
  height: 20px;
  font-size: 12px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.jj jj-attribute table textarea {
  height: 70px;
  padding: 3px 5px;
  min-width: 220px;
}
.jj jj-attribute [method] * {
  pointer-events: none;
}

/* ==JJAttribute.720.class End ================ */




/* ==JJElToolbar.720.class Start ================ */
/* ==JJElToolbar.720.class================ */

/* ==JJElToolbar.720.class End ================ */




/* ==JJFrameEditor.720.class Start ================ */
/* ==JJFrameEditor.720.class================ */

/* ==JJFrameEditor.720.class End ================ */




/* ==JJStyle.720.class Start ================ */
/* ==JJStyle.720.class================ */
.jj jj-style {
  display: flex;
  flex-direction: column;
}
.jj jj-style input[method='findtext'] {
  flex: none;
}
.jj jj-style ul[method='styleTree'] {
  flex-grow: 1;
  font-size: 12px;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  background-color: white;
}
.jj jj-style ul[method='styleTree'] li {
  list-style: none;
  padding: 0;
}
.jj jj-style ul[method='styleTree'] li > label {
  display: block;
  margin-bottom: 1px;
  line-height: 20px;
  padding: 2px;
  position: relative;
}
.jj jj-style ul[method='styleTree'] li > label.usedata > span.attr-label {
  font-weight: 700;
  color: blue;
}
.jj jj-style ul[method='styleTree'] li > label.childdata > span.attr-label {
  font-weight: 700;
  color: red;
}
.jj jj-style ul[method='styleTree'] li > label > span.attr-label {
  width: 180px;
  font-weight: normal;
}
.jj jj-style ul[method='styleTree'] li > label > span.attr-label i.fa {
  font-size: 14px;
  margin-left: 10px;
}
.jj jj-style ul[method='styleTree'] li > label > .input-group {
  width: 130px;
  position: absolute;
  top: 2px;
  right: 0;
  border: 1px solid;
}
.jj jj-style ul[method='styleTree'] li > label > .input-group .btn.dropdown-toggle {
  padding: 0 3px !important;
}
.jj jj-style ul[method='styleTree'] li > label:hover {
  background-color: var(--gray);
  color: var(--white);
}
.jj jj-style ul[method='styleTree'] li > label.group {
  width: 100%;
  background-color: var(--light);
  display: block;
}
.jj jj-style ul[method='styleTree'] li > label.group:hover {
  background-color: var(--gray);
  color: var(--white);
}
.jj jj-style ul[method='styleTree'] > li > ul > li > label {
  padding-left: 10px;
}
.jj jj-style ul[method='styleTree'] > li > ul > li > ul > li > label {
  padding-left: 20px;
}
.jj jj-style ul[method='styleTree'] > li > ul > li > ul > li > ul > li > label {
  padding-left: 30px;
}
.jj jj-style ul[method='styleTree'] li.collapsed > ul {
  display: none;
}
.jj jj-style ul[method='styleTree'] ul {
  padding: 0;
}
.jj jj-style .input-group .btn,
.jj jj-style .form-control {
  color: black;
  padding: 3px;
  height: 20px;
  font-size: 12px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.jj jj-style textarea.dropdown-menu {
  padding: 5px 10px;
  height: 70px;
}

/* ==JJStyle.720.class End ================ */




/* ==JJVhtmlEditor.720.class Start ================ */
/* ==JJVhtmlEditor.720.class================ */
.jj jj-vhtml-editor {
  position: relative;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  border: 1px solid #ccc;
  background-color: white;
  padding: 1rem;
}
.jj jj-vhtml-editor.excute {
  height: 100%;
}
.jj jj-vhtml-editor.excute > .area-tool,
.jj jj-vhtml-editor.excute > .dragBox,
.jj jj-vhtml-editor.excute > jj-resize-box,
.jj jj-vhtml-editor.excute > .drop-holder {
  display: none !important;
}
.jj jj-vhtml-editor.excute > .area-editor {
  display: none !important;
}
.jj jj-vhtml-editor.excute > .area-viewer {
  display: block;
}
.jj jj-vhtml-editor > .dom-path {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 3px;
}
.jj jj-vhtml-editor > .dom-path a {
  color: var(--gray);
  cursor: pointer;
  background-color: var(--light);
  margin-left: 5px;
  position: relative;
  margin-right: 15px;
  padding: 2px 5px;
}
.jj jj-vhtml-editor > .dom-path a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F105";
  padding-left: 5px;
  padding-right: 5px;
  position: absolute;
  left: -17px;
  font-size: 1.5rem;
}
.jj jj-vhtml-editor > .dom-path a:hover {
  color: var(--blue);
}
.jj jj-vhtml-editor > .dom-path a:first-child:before {
  content: "";
}
.jj jj-vhtml-editor > .dom-path a:focus {
  outline: 0px solid #000 !important;
}
.jj jj-vhtml-editor > .area-tool {
  height: 0px;
}
.jj jj-vhtml-editor > .area-tool .toolbox {
  position: absolute;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: center!important;
}
.jj jj-vhtml-editor > .area-editor {
  position: relative;
  min-height: 100%;
  padding: 10px 10px 50px 10px;
  margin-top: 20px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.jj jj-vhtml-editor > .area-editor > .container,
.jj jj-vhtml-editor > .area-editor .container-fluid {
  float: none;
}
.jj jj-vhtml-editor > .area-editor.un-select *:hover {
  outline: 1px solid green;
}
.jj jj-vhtml-editor > .area-editor.un-select > section:hover {
  outline: 2px solid blue;
}
.jj jj-vhtml-editor > .area-editor .d-flex.j2-grid {
  padding-top: 1rem;
  min-height: 100px;
}
.jj jj-vhtml-editor > .area-editor .container,
.jj jj-vhtml-editor > .area-editor .container-fluid,
.jj jj-vhtml-editor > .area-editor .j-grid > *,
.jj jj-vhtml-editor > .area-editor .j2-grid > *,
.jj jj-vhtml-editor > .area-editor .row,
.jj jj-vhtml-editor > .area-editor .tab-pane {
  padding-bottom: 10px;
}
.jj jj-vhtml-editor > .area-editor .container:empty,
.jj jj-vhtml-editor > .area-editor .container-fluid:empty,
.jj jj-vhtml-editor > .area-editor .j-grid > *:empty,
.jj jj-vhtml-editor > .area-editor .j2-grid > *:empty,
.jj jj-vhtml-editor > .area-editor .row:empty,
.jj jj-vhtml-editor > .area-editor .tab-pane:empty {
  min-height: 100px;
  border: 0.5px dotted #ccc;
}
.jj jj-vhtml-editor > .area-editor .container:empty:before,
.jj jj-vhtml-editor > .area-editor .container-fluid:empty:before,
.jj jj-vhtml-editor > .area-editor .j-grid > *:empty:before,
.jj jj-vhtml-editor > .area-editor .j2-grid > *:empty:before,
.jj jj-vhtml-editor > .area-editor .row:empty:before,
.jj jj-vhtml-editor > .area-editor .tab-pane:empty:before {
  content: '선택해서 내용을 입력해주세요';
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj jj-vhtml-editor > .area-editor row {
  margin-bottom: 1rem;
}
.jj jj-vhtml-editor > .area-editor .drag-el {
  opacity: 0.5;
}
.jj jj-vhtml-editor > .area-editor > section:hover {
  outline: 2px dotted var(--danger);
}
.jj jj-vhtml-editor > .area-editor > section.active {
  outline: 2px solid lightskyblue;
}
.jj jj-vhtml-editor > .area-editor .simple-select {
  outline: 2px solid var(--info) !important;
}
.jj jj-vhtml-editor > .area-editor .container,
.jj jj-vhtml-editor > .area-editor .container-fluid {
  padding-bottom: 5px;
}
.jj jj-vhtml-editor > .area-editor [data-render] *,
.jj jj-vhtml-editor > .area-editor .nodrop *,
.jj jj-vhtml-editor > .area-editor .jj-tabs > li > a,
.jj jj-vhtml-editor > .area-editor .group-editor * {
  pointer-events: none!important;
}
.jj jj-vhtml-editor > .area-editor svg * {
  pointer-events: none;
  -webkit-user-drag: none;
}
.jj jj-vhtml-editor > .area-editor .app-youtube * {
  pointer-events: none;
}
.jj jj-vhtml-editor > .area-editor iframe,
.jj jj-vhtml-editor > .area-editor iframe * {
  pointer-events: none;
  -webkit-user-drag: none;
}
.jj jj-vhtml-editor > .area-editor [vhtml-group] * {
  pointer-events: none;
}
.jj jj-vhtml-editor > .area-editor [j-edit] {
  border: 1px solid transparent;
}
.jj jj-vhtml-editor > .area-editor [contenteditable="true"] {
  padding: 5px;
  color: initial;
  pointer-events: auto!important;
}
.jj jj-vhtml-editor > .area-editor [contenteditable="true"]:empty {
  width: 2rem!important;
}
.jj jj-vhtml-editor > .area-editor [contenteditable="true"][j-edit] {
  border: 1px solid var(--info);
}
.jj jj-vhtml-editor > .area-editor [contenteditable="true"][j-edit]:focus {
  outline: 1px solid transparent;
}
.jj jj-vhtml-editor > .area-editor [j-edit] p {
  margin: 0;
}
.jj jj-vhtml-editor > .area-editor.show-href a[href]::after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 8px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\F13D';
  color: blue;
  background-color: yellow;
  padding: 3px;
}
.jj jj-vhtml-editor > .area-editor.show-href a[href]:hover::after {
  background-color: red;
}
.jj jj-vhtml-editor > .area-editor .dragover {
  outline: 2px dotted red;
}
.jj jj-vhtml-editor > .area-editor [group] * {
  pointer-events: none;
}
.jj jj-vhtml-editor > .area-editor.dragover {
  overflow: hidden;
  background-color: yellow!important;
}
.jj jj-vhtml-editor > .area-viewer {
  display: none;
  position: relative;
  width: 100%;
  min-height: 100%;
}
.jj jj-vhtml-editor .dragBox {
  position: fixed;
  bottom: -100%;
  width: 200px;
  height: 50px;
  font-size: 18px;
  padding: 10px 20px;
  background-color: blue;
  border: 1px solid black;
}
.jj jj-vhtml-editor .dragBox img {
  border: 3px solid yellow;
}
.jj jj-vhtml-editor .drop-holder {
  border: 1px solid #4286f4;
  background-color: #4286f4;
  border-radius: 0;
  height: 10px;
  position: absolute;
  z-index: 110;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
.jj jj-vhtml-editor .drop-holder[position='top'] {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: red;
}
.jj jj-vhtml-editor .drop-holder[position='bottom'] {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: blue;
}
.jj jj-vhtml-editor .drop-holder[position='left'] {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.jj jj-vhtml-editor .drop-holder[position='right'] {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.jj jj-vhtml-editor .drop-holder[position='inner'] {
  border-radius: 5px;
  margin-left: 10px;
}
.jj jj-vhtml-editor jj-resize-box [data-arrow='top'],
.jj jj-vhtml-editor jj-resize-box [data-arrow='left'],
.jj jj-vhtml-editor jj-resize-box [data-arrow='top-left'],
.jj jj-vhtml-editor jj-resize-box [data-arrow='top-right'],
.jj jj-vhtml-editor jj-resize-box [data-arrow='bottom-left'],
.jj jj-vhtml-editor jj-resize-box [data-arrow='bottom-right'] {
  display: none;
}
.jj jj-vhtml-editor.dragover-item jj-resize-box,
.jj jj-vhtml-editor.dragover-dataset jj-resize-box {
  visibility: hidden;
}
.jj[lang="en-US"] jj-vhtml-editor > .area-editor .row:empty:before,
.jj[lang="en-US"] jj-vhtml-editor > .area-editor .row > [class*='col-']:empty:before,
.jj[lang="en-US"] jj-vhtml-editor > .area-editor .container:empty:before,
.jj[lang="en-US"] jj-vhtml-editor > .area-editor .container-fluid:empty:before,
.jj[lang="en-US"] jj-vhtml-editor > .area-editor .d-flex.j2-grid > *:empty:before,
.jj[lang="en-US"] jj-vhtml-editor > .area-editor .tab-pane:empty:before {
  content: 'Select and enter the content';
}

/* ==JJVhtmlEditor.720.class End ================ */





/* ==CustomComp.720.pkg.deploy End ================ */




/* ==InputComp.720.pkg.deploy Start ================ */
/* ==InputComp.720.pkg.deploy================ */
/* ==J2ItemRule.class Start ================ */
/* ==J2ItemRule.class================ */

/* ==J2ItemRule.class End ================ */




/* ==JJDataFilter.720.class Start ================ */
/* ==JJDataFilter.720.class================ */
.jj jj-data-filter {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0.7rem;
  background-color: var(--white);
  border: 1px solid #e7eaed;
  border-radius: 5px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
}
.jj jj-data-filter.invalid[required]::after {
  position: absolute;
  top: 0px;
  right: 5px;
  color: var(--danger);
  content: "조건은 반드시 1개 이상 있어야합니다";
}
.jj jj-data-filter XXtable.filter-table {
  flex-grow: 1;
  width: 1%;
  margin: 0;
}
.jj jj-data-filter XXtable.filter-table th {
  background-color: #f1f5f7;
  padding: 0.5rem;
  font-weight: 600;
}
.jj jj-data-filter XXtable.filter-table td {
  padding: 0.2rem;
}
.jj jj-data-filter XXtable.filter-table td .form-control {
  padding: 0.2rem 0.5rem;
  height: 2rem;
}
.jj jj-data-filter XXtable.filter-table td [type='checkbox'] {
  margin-top: 5px;
  width: 18px;
  height: 18px;
}
.jj jj-data-filter XXtable.filter-table td .group-radio {
  padding-top: 0.2rem;
}
.jj jj-data-filter XXtable.filter-table td .group-radio input[type='radio'] {
  width: 18px;
  height: 18px;
}
.jj jj-data-filter div.filter-col {
  flex-grow: 1;
}
.jj jj-data-filter div.filter-col XX.filter-group {
  display: flex;
  flex-direction: row;
  margin-top: -1px;
  margin-left: -1px;
  height: 39px;
}
.jj jj-data-filter div.filter-col XX.filter-group .filter-label {
  padding: 0.5rem;
  margin-bottom: 0;
  font-weight: 600;
  flex: none;
  width: 100px;
}
.jj jj-data-filter div.filter-col XX.filter-group .filter-control {
  padding: 0.2rem;
  flex-grow: 1;
}
.jj jj-data-filter div.filter-col XX.filter-group .filter-control .form-control {
  padding: 0.2rem 0.5rem;
  height: 2rem;
}
.jj jj-data-filter div.filter-col XX.filter-group .filter-control [type='checkbox'] {
  margin-top: 5px;
  width: 18px;
  height: 18px;
}
.jj jj-data-filter div.filter-col XX.filter-group .filter-control .group-radio {
  padding-top: 0.2rem;
}
.jj jj-data-filter div.filter-col XX.filter-group .filter-control .group-radio input[type='radio'] {
  width: 18px;
  height: 18px;
}
.jj jj-data-filter div.filter-col.XXform-horizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.jj jj-data-filter div.filter-col.XXform-horizontal .form-group {
  display: flex;
  flex-direction: row;
}
.jj jj-data-filter div.filter-col.XXform-horizontal .form-group > .control-label {
  padding: 0.5rem;
  margin-bottom: 0;
  font-weight: 600;
  flex: none;
  width: 100px;
}
.jj jj-data-filter div.filter-col.XXform-horizontal .form-group > .control-content {
  flex-grow: 1;
}
.jj jj-data-filter div.filter-col.XXform-horizontal .form-group > .control-content input[type='range'] {
  margin: 0;
}
.jj jj-data-filter .filter-buttons {
  padding-left: 1rem;
  flex: none;
  max-width: 40%;
}
.jj jj-data-filter .filter-buttons button * {
  pointer-events: none;
}
.jj jj-data-filter .filter-buttons button .badge {
  position: absolute;
  top: 1px;
  right: 5px;
}
.jj jj-data-filter .XXform-group {
  margin-bottom: 0.4rem !important;
}
.jj jj-data-filter .XXform-group > .control-label {
  padding: 0.5rem;
  margin-bottom: 0;
  font-weight: 600;
  flex: none;
  width: 100px;
}
.jj jj-data-filter .XXform-group > .control-content .form-control {
  padding: 0.2rem 0.5rem;
}
.jj jj-data-filter .XXform-group > .control-content .form-control[type='radio'],
.jj jj-data-filter .XXform-group > .control-content .form-control[type='checkbox'] {
  width: 18px;
  height: 18px;
}
.jj jj-data-filter jj-app-filter {
  width: 70%;
  margin: 0 1.7rem;
}

/* ==JJDataFilter.720.class End ================ */




/* ==JJDataForm.720.class Start ================ */
/* ==JJDataForm.720.class================ */
.jj jj-data-form,
.jj .jj-data-form {
  --label-width: 120px;
  display: inline-block;
  width: 100%;
}
.jj jj-data-form > *,
.jj .jj-data-form > * {
  float: left;
  width: 100%;
}
.jj jj-data-form:empty,
.jj .jj-data-form:empty {
  height: 200px;
}
.jj jj-data-form.form-horizontal .form-group,
.jj .jj-data-form.form-horizontal .form-group,
.jj jj-data-form[box-type="form-horizontal"] .form-group,
.jj .jj-data-form[box-type="form-horizontal"] .form-group {
  display: flex;
  flex-direction: row;
}
.jj jj-data-form.form-horizontal .form-group > .control-label,
.jj .jj-data-form.form-horizontal .form-group > .control-label,
.jj jj-data-form[box-type="form-horizontal"] .form-group > .control-label,
.jj .jj-data-form[box-type="form-horizontal"] .form-group > .control-label {
  flex: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
  margin-bottom: auto;
}
.jj jj-data-form.form-horizontal .form-group > .control-label::after,
.jj .jj-data-form.form-horizontal .form-group > .control-label::after,
.jj jj-data-form[box-type="form-horizontal"] .form-group > .control-label::after,
.jj .jj-data-form[box-type="form-horizontal"] .form-group > .control-label::after {
  margin-top: 0.5rem;
}
.jj jj-data-form.form-horizontal .form-group > .control-content,
.jj .jj-data-form.form-horizontal .form-group > .control-content,
.jj jj-data-form[box-type="form-horizontal"] .form-group > .control-content,
.jj .jj-data-form[box-type="form-horizontal"] .form-group > .control-content {
  flex-grow: 1;
}
.jj jj-data-form.form-horizontal .form-group > .control-content input[type='range'],
.jj .jj-data-form.form-horizontal .form-group > .control-content input[type='range'],
.jj jj-data-form[box-type="form-horizontal"] .form-group > .control-content input[type='range'],
.jj .jj-data-form[box-type="form-horizontal"] .form-group > .control-content input[type='range'] {
  margin: 0;
}
.jj jj-data-form .box-bottom-line,
.jj .jj-data-form .box-bottom-line {
  margin-top: 0px;
  border: 0;
  border-top: 1px solid #ccc;
  width: 100%;
}
.jj jj-data-form hr,
.jj .jj-data-form hr {
  border-top: 1px solid var(--secondary);
}
.jj jj-data-form.form-box,
.jj .jj-data-form.form-box,
.jj jj-data-form[box-type="form-box"],
.jj .jj-data-form[box-type="form-box"] {
  display: inline-block;
  width: 100%;
  padding: 0;
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 0px;
}
.jj jj-data-form.form-box [class*='col-'],
.jj .jj-data-form.form-box [class*='col-'],
.jj jj-data-form[box-type="form-box"] [class*='col-'],
.jj .jj-data-form[box-type="form-box"] [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.jj jj-data-form.form-box .form-group,
.jj .jj-data-form.form-box .form-group,
.jj jj-data-form[box-type="form-box"] .form-group,
.jj .jj-data-form[box-type="form-box"] .form-group {
  display: flex!important;
  flex-direction: row!important;
  border: 1px solid #ccc;
  border-width: 1px 0px 0px 1px;
  padding: 0;
  margin-bottom: 0;
  background-color: var(--light);
}
.jj jj-data-form.form-box .form-group[required] .control-label::before,
.jj .jj-data-form.form-box .form-group[required] .control-label::before,
.jj jj-data-form[box-type="form-box"] .form-group[required] .control-label::before,
.jj .jj-data-form[box-type="form-box"] .form-group[required] .control-label::before {
  content: "";
  margin-left: 0;
}
.jj jj-data-form.form-box .form-group[required] .control-label,
.jj .jj-data-form.form-box .form-group[required] .control-label,
.jj jj-data-form[box-type="form-box"] .form-group[required] .control-label,
.jj .jj-data-form[box-type="form-box"] .form-group[required] .control-label {
  padding-left: 0.5rem !important;
}
.jj jj-data-form.form-box .form-group .control-label,
.jj .jj-data-form.form-box .form-group .control-label,
.jj jj-data-form[box-type="form-box"] .form-group .control-label,
.jj .jj-data-form[box-type="form-box"] .form-group .control-label {
  padding: 0.5rem;
  margin-bottom: 0;
  flex: none;
  min-width: var(--label-width);
}
.jj jj-data-form.form-box .form-group .control-content,
.jj .jj-data-form.form-box .form-group .control-content,
.jj jj-data-form[box-type="form-box"] .form-group .control-content,
.jj .jj-data-form[box-type="form-box"] .form-group .control-content {
  border-left: 1px solid #ced4da;
  flex-grow: 1;
}
.jj jj-data-form.form-box .form-group .control-content .form-control,
.jj .jj-data-form.form-box .form-group .control-content .form-control,
.jj jj-data-form[box-type="form-box"] .form-group .control-content .form-control,
.jj .jj-data-form[box-type="form-box"] .form-group .control-content .form-control {
  border-width: 0;
  border-radius: 0;
}
.jj jj-data-form.form-box .form-group .control-content .input-group-append .input-group-text,
.jj .jj-data-form.form-box .form-group .control-content .input-group-append .input-group-text,
.jj jj-data-form[box-type="form-box"] .form-group .control-content .input-group-append .input-group-text,
.jj .jj-data-form[box-type="form-box"] .form-group .control-content .input-group-append .input-group-text {
  border-width: 0 0 0 1px;
}
.jj jj-data-form.form-box .form-group .control-content .help-block,
.jj .jj-data-form.form-box .form-group .control-content .help-block,
.jj jj-data-form[box-type="form-box"] .form-group .control-content .help-block,
.jj .jj-data-form[box-type="form-box"] .form-group .control-content .help-block {
  top: 0;
  right: 0;
}
.jj jj-data-form.form-box .form-group:focus-within,
.jj .jj-data-form.form-box .form-group:focus-within,
.jj jj-data-form[box-type="form-box"] .form-group:focus-within,
.jj .jj-data-form[box-type="form-box"] .form-group:focus-within {
  z-index: 10;
}
.jj jj-data-form.form-box .form-group.width-auto .control-content,
.jj .jj-data-form.form-box .form-group.width-auto .control-content,
.jj jj-data-form[box-type="form-box"] .form-group.width-auto .control-content,
.jj .jj-data-form[box-type="form-box"] .form-group.width-auto .control-content {
  background-color: white;
}
.jj jj-data-form.form-box .form-group.width-auto .control-content .form-control,
.jj .jj-data-form.form-box .form-group.width-auto .control-content .form-control,
.jj jj-data-form[box-type="form-box"] .form-group.width-auto .control-content .form-control,
.jj .jj-data-form[box-type="form-box"] .form-group.width-auto .control-content .form-control {
  width: auto;
  border-right: 1px solid #ccc;
}
.jj jj-data-form.form-box .form-group.info .control-content,
.jj .jj-data-form.form-box .form-group.info .control-content,
.jj jj-data-form[box-type="form-box"] .form-group.info .control-content,
.jj .jj-data-form[box-type="form-box"] .form-group.info .control-content {
  position: relative;
}
.jj jj-data-form.form-box .form-group.info .control-content::before,
.jj .jj-data-form.form-box .form-group.info .control-content::before,
.jj jj-data-form[box-type="form-box"] .form-group.info .control-content::before,
.jj .jj-data-form[box-type="form-box"] .form-group.info .control-content::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F06A";
  position: absolute;
  top: 0.5rem;
  left: -1rem;
  color: var(--blue);
}
.jj jj-data-form.form-box jj-item-check .control-content,
.jj .jj-data-form.form-box jj-item-check .control-content,
.jj jj-data-form[box-type="form-box"] jj-item-check .control-content,
.jj .jj-data-form[box-type="form-box"] jj-item-check .control-content {
  padding-left: 10px;
}
.jj jj-data-form.form-horizontal .form-group .control-label,
.jj .jj-data-form.form-horizontal .form-group .control-label,
.jj jj-data-form[box-type="form-horizontal"] .form-group .control-label,
.jj .jj-data-form[box-type="form-horizontal"] .form-group .control-label {
  min-width: var(--label-width);
}
.jj jj-data-form table.form-table > tbody > tr th,
.jj .jj-data-form table.form-table > tbody > tr th {
  background-color: #f1f5f7;
  padding: 0.5rem;
}
.jj jj-data-form table.form-table > tbody > tr td,
.jj .jj-data-form table.form-table > tbody > tr td {
  padding: 0.2rem;
}
.jj jj-data-form table.form-table > tbody > tr td .form-control,
.jj .jj-data-form table.form-table > tbody > tr td .form-control {
  padding: 0.2rem 0.5rem;
  height: 2rem;
}
.jj jj-data-form table.form-table > tbody > tr td textarea.form-control,
.jj .jj-data-form table.form-table > tbody > tr td textarea.form-control {
  height: initial;
}
.jj jj-data-form table.form-table > tbody > tr td [type='checkbox'],
.jj .jj-data-form table.form-table > tbody > tr td [type='checkbox'] {
  margin-top: 5px;
}

/* ==JJDataForm.720.class End ================ */




/* ==JJAttach.720.class Start ================ */
/* ==JJAttach.720.class================ */
.jj .jj-attch {
  min-height: 150px;
  border: 1px solid #ccc;
}
.jj .jj-attch a {
  color: var(--text3);
}
.jj .jj-attch a[href=""] {
  pointer-events: none;
  color: var(--text1);
}
.jj .jj-attch button * {
  pointer-events: none;
}
.jj .jj-attch .alert.empty {
  display: none;
}
.jj .jj-attch .alert.empty::before {
  content: "관련된 파일이 없습니다.";
}
.jj .jj-attch.file-empty .alert.empty {
  display: block;
}
.jj .jj-attch .attch-file {
  width: 100%;
}
.jj .jj-attch .attch-file thead {
  display: none;
}
.jj .jj-attch[file-type="image"] .post {
  height: 100%;
  overflow: hidden;
  margin-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.jj .jj-attch[file-type="image"] .post a.img-preview {
  overflow: hidden;
  background: #fff;
  transition: 0.4s;
  opacity: 1;
  position: relative;
}
.jj .jj-attch[file-type="image"] .post a.img-preview button {
  transition: all 0.2s ease-out;
  top: -71px;
}
.jj .jj-attch[file-type="image"] .post a.img-preview img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%!important;
  width: 100%;
  object-fit: cover;
}
.jj .jj-attch[file-type="image"] .post a.img-preview h5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.jj .jj-attch[file-type="image"] .post a:hover button {
  top: -41px;
}
.jj .jj-attch .imageWrap {
  padding: 10px;
}
.jj .jj-attch .attch-image .j-card {
  width: 150px;
  max-width: 22%;
}
.jj .jj-attch .attch-image .j-card .image-warp {
  height: 100px;
}
.jj .jj-attch .attch-link img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
}
.jj .jj-attch .attch-link .media-body {
  background-color: whitesmoke;
  padding: 5px;
}
.jj .jj-attch.win-drag {
  background-color: yellow;
  min-height: 150px;
}
.jj .jj-mobile .jj-attch .alert.empty {
  display: none;
}
.jj .jj-inline {
  height: 100%;
  overflow-x: auto;
}
.jj .jj-inline > * {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}
.jj .jj-inline > * > * {
  flex: 0 0 100px;
  height: 100px;
  text-align: center;
  margin-right: 10px;
}
.jj .jj-inline > * > *:first-child {
  margin-left: 10px;
}
.jj .jj-inline > * > *:last-child {
  margin-right: 10px;
}
.jj .jj-inline > *.post > * {
  margin-right: 10px;
}

/* ==JJAttach.720.class End ================ */




/* ==JJSyncAttach.720.class Start ================ */
/* ==JJSyncAttach.720.class================ */
.jj .jj-attch {
  min-height: 150px;
  border: 1px solid #ccc;
  overflow: auto;
}
.jj .jj-attch table {
  table-layout: fixed;
  margin: 0;
}
.jj .jj-attch table .attnumb {
  text-align: center;
}
.jj .jj-attch table tbody tr:hover {
  background-color: var(--light) !important;
}
.jj .jj-attch .table td,
.jj .jj-attch .table th {
  padding: 0.5rem 0;
  vertical-align: middle;
  border-top: 0;
}
.jj .jj-attch .table td .btn-sm,
.jj .jj-attch .table th .btn-sm {
  padding: 0.08rem 0.6rem;
}
.jj .jj-attch a {
  color: var(--text3);
}
.jj .jj-attch a[href=""] {
  pointer-events: none;
  color: var(--text1);
}
.jj .jj-attch button * {
  pointer-events: none;
}
.jj .jj-attch .alert.empty {
  display: none;
}
.jj .jj-attch .alert.empty::before {
  content: "관련된 파일이 없습니다.";
}
.jj .jj-attch.file-empty .alert.empty {
  display: block;
}
.jj .jj-attch .attch-file thead {
  display: none;
}
.jj .jj-attch[file-type="image"] .post {
  text-align: center;
  position: relative;
}
.jj .jj-attch[file-type="image"] .post a.img-preview {
  position: relative;
  margin-top: 33px;
  height: calc(100% - 33px);
  border: none;
}
.jj .jj-attch[file-type="image"] .post a.img-preview img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  width: 100%;
  object-fit: cover;
}
.jj .jj-attch[file-type="image"] .post a.img-preview .imgtypebtn {
  position: relative;
  top: 0;
  width: 100%;
}
.jj .jj-attch[file-type="image"] .post a.img-preview h5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.jj .jj-attch[file-type="image"] .readonly-image {
  height: 100%;
  overflow: auto;
  position: relative;
}
.jj .jj-attch[file-type="image"] .readonly-image .post {
  position: absolute;
  display: flex;
  flex-direction: row;
  height: 100%;
  flex-wrap: nowrap;
}
.jj .jj-attch[file-type="image"] .readonly-image .post .imageWrap {
  position: relative;
  width: 100px;
  margin-top: 33px;
}
.jj .jj-attch[file-type="image"] .readonly-image .post .imageWrap img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.jj .jj-attch[file-type="image"] .readonly-image .post .imageWrap:hover button {
  top: 0!important;
  right: 0;
}
.jj .jj-attch[file-type="image"] .readonly-image .post .imageWrap .imgtypebtn {
  position: relative;
  top: 0;
  width: 100%;
}
.jj .jj-attch[file-type="image"] .readonly-image .post .imageWrap .imgtypebtn button {
  top: -70px;
  transition: all 0.2s ease-out;
}
.jj .jj-attch .imageWrap {
  padding: 10px;
}
.jj .jj-attch .attch-image .j-card {
  width: 150px;
  max-width: 22%;
}
.jj .jj-attch .attch-image .j-card .image-warp {
  height: 100px;
}
.jj .jj-attch .attch-link img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
}
.jj .jj-attch .attch-link .media-body {
  background-color: whitesmoke;
  padding: 5px;
}
.jj .jj-attch.win-drag {
  background-color: yellow;
  min-height: 150px;
}
.jj .jj-attch div:empty {
  height: 0px!important;
}
.jj .jj-attch div:empty:before {
  content: "" !important;
}
.jj .jj-mobile .jj-attch .alert.empty {
  display: none;
}
.jj .jj-inline {
  overflow-x: auto;
}
.jj .jj-inline > * {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}
.jj .jj-inline > * > * {
  flex: 0 0 100px;
  height: 100px;
  text-align: center;
  margin-right: 10px;
}
.jj .jj-inline > * > *:first-child {
  margin-left: 10px;
}
.jj .jj-inline > * > *:last-child {
  margin-right: 10px;
}
.jj .jj-inline > *.post > * {
  margin-right: 10px;
}
.jj tr[file-type] button[fileviewer] {
  visibility: hidden;
}
.jj tr[file-type="application/pdf"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="image/png"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="image/jpeg"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="image/jpg"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="image/gif"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="image/svg"] button[fileviewer],
.jj tr[file-type="image/svg+xml"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="application/vnd.ms-excel"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="application/vnd.openxmlformats-officedocument.wordprocessingml.document"] button[fileviewer] {
  visibility: visible;
}
.jj tr[file-type="application/vnd.openxmlformats-officedocument.presentationml.presentation"] button[fileviewer] {
  visibility: visible;
}

/* ==JJSyncAttach.720.class End ================ */




/* ==JJWaitLayer.720.class Start ================ */
/* ==JJWaitLayer.720.class================ */
.jj .jj-wait-layer {
  position: absolute;
  background-color: var(--basecolor5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}
.jj .jj-wait-layer .wait-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  background: #fff;
  overflow: hidden;
  padding-top: 1.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  max-height: 200px;
}
.jj .jj-wait-layer .wait-box h1 {
  text-align: center;
  color: var(--primary);
}
.jj .jj-wait-layer .wait-box h3 {
  color: var(--primary);
  white-space: nowrap;
}
@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* ==JJWaitLayer.720.class End ================ */




/* ==JJBarChart.720.class Start ================ */
/* ==JJBarChart.720.class================ */
.jj j2-barchart.j2-item {
  display: block!important;
  position: relative;
  min-height: 200px;
}
.jj j2-barchart.j2-item > jj-chart {
  width: 100%;
  height: 100%;
}

/* ==JJBarChart.720.class End ================ */




/* ==JJSimpleTable.720.class Start ================ */
/* ==JJSimpleTable.720.class================ */
.jj j2-datatable {
  display: block;
  position: relative;
  min-height: 200px;
  overflow: auto;
}
.jj j2-datatable table {
  width: 100%;
  background-color: white;
  border: 1px solid var(--secondary);
  border-collapse: collapse;
}
.jj j2-datatable table th,
.jj j2-datatable table td {
  border: 1px solid var(--secondary);
  padding: 3px;
  font-size: 12px;
  color: black;
  min-width: 100px;
}
.jj j2-datatable table th {
  text-align: center;
  background-color: var(--light);
}

/* ==JJSimpleTable.720.class End ================ */




/* ==JJAlert.720.class Start ================ */
/* ==JJAlert.720.class================ */
.jj j2-alert {
  display: block;
  position: relative;
}

/* ==JJAlert.720.class End ================ */




/* ==JJPageHead.720.class Start ================ */
/* ==JJPageHead.720.class================ */
.jj j2-pageheader {
  display: flex;
  position: relative;
}

/* ==JJPageHead.720.class End ================ */




/* ==JJStep.720.class Start ================ */
/* ==JJStep.720.class================ */
.jj j2-step {
  display: block;
  position: relative;
}
.jj j2-step > .card-warp {
  display: flex;
}
.jj j2-step > .card-warp > .card-box {
  width: 250px;
  position: relative;
  margin-right: 50px;
  background-color: var(--light);
  cursor: pointer;
}
.jj j2-step > .card-warp > .card-box * {
  pointer-events: none;
}
.jj j2-step > .card-warp > .card-box::after {
  position: absolute;
  top: 35%;
  right: -50px;
  content: "\F054";
  padding-right: 10px;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 36px;
  text-rendering: auto;
}
.jj j2-step > .card-warp > .card-box:last-child {
  margin-right: 0;
}
.jj j2-step > .card-warp > .card-box:last-child::after {
  content: "";
}
.jj j2-step > .card-warp > .card-box.active {
  background-color: var(--white);
}
.jj j2-step > .button-group {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.jj j2-step:hover > .button-group {
  display: block;
}

/* ==JJStep.720.class End ================ */




/* ==JJTabs.720.class Start ================ */
/* ==JJTabs.720.class================ */
.jj j2-tabs {
  display: block;
  position: relative;
}
.jj j2-tabs > .button-group {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}
.jj j2-tabs:hover > .button-group {
  display: block;
}
.jj j2-tabs .tab-content {
  margin-bottom: 24px;
}
.jj j2-tabs[type="simple"] ul.nav {
  border: none;
}
.jj j2-tabs[type="simple"] ul.nav .nav-item {
  background: transparent;
  border: none;
}
.jj j2-tabs[type="simple"] ul.nav .nav-item .nav-link {
  border-bottom: 2px solid;
  border-color: #fff;
  margin-bottom: 2px;
  background: transparent;
  font-size: 17px;
  font-weight: 400;
  padding: 15px;
  border-top: none;
  border-right: none;
  border-left: none;
}
.jj j2-tabs[type="simple"] ul.nav .nav-item .nav-link:hover {
  color: var(--primary);
  border-color: var(--primary);
  border-top: none;
  border-right: none;
  border-left: none;
}
.jj j2-tabs[type="simple"] ul.nav .nav-item .nav-link.active {
  color: var(--primary);
  border-color: var(--primary);
  border-top: none;
  border-right: none;
  border-left: none;
}
.jj jj-proxy-form.jj-data-form.form-box j2-tabs.form-group {
  flex-direction: column!important;
  margin-top: 1rem;
  border: 0;
}

/* ==JJTabs.720.class End ================ */




/* ==JJWegget101.720.class Start ================ */
/* ==JJWegget101.720.class================ */
.jj j2-widget101 {
  display: block;
  position: relative;
}
.jj .d-flex.j2-grid > * {
  border: 0px solid transparent;
}
.jj .d-flex.j2-grid > *:last-child {
  border-left: 0px solid #ccc;
}

/* ==JJWegget101.720.class End ================ */




/* ==JJCodeClone.720.class Start ================ */
/* ==JJCodeClone.720.class================ */
.jj jj-code-clone {
  position: relative;
  display: block;
}
.jj .area-editor jj-code-clone::before {
  position: absolute;
  top: -5px;
  right: 5px;
  display: inline-block;
  content: "코드잠금";
  background-color: var(--dark);
  color: var(--white);
  z-index: 10;
  padding: 3px;
  font-size: 12px;
}
.jj .area-editor jj-code-clone[isUnLock]::before {
  content: "코드잠금해제";
  background-color: var(--info);
}

/* ==JJCodeClone.720.class End ================ */




/* ==JJSurveySection.720.class Start ================ */
/* ==JJSurveySection.720.class================ */
.jj j2-survay-section {
  display: block;
  position: relative;
  padding: 12px;
  margin-bottom: 1rem;
}
.jj jj-vhtml-editor j2-survay-section {
  outline: 2px dotted var(--info);
}
.jj jj-vhtml-editor j2-survay-section .edit-parent:empty {
  height: 150px;
}
.jj jj-vhtml-editor j2-survay-section::before {
  position: absolute;
  content: attr(jj-id);
  background-color: var(--info);
  border: 1px solid var(--info);
  border-radius: 0 0 10px 10px;
  font-size: 13px;
  color: white;
  margin-top: -13px;
  padding: 0 10px;
  left: 50%;
  transform: translateX(-50%);
}

/* ==JJSurveySection.720.class End ================ */




/* ==JJSurveyButtons.720.class Start ================ */
/* ==JJSurveyButtons.720.class================ */
.jj j2-survay-buttons {
  display: block;
  position: relative;
  padding: 12px;
  margin-bottom: 1rem;
}
.jj j2-survay-buttons p {
  margin-top: 1rem;
}

/* ==JJSurveyButtons.720.class End ================ */




/* ==JJItemApproval.720.class Start ================ */
/* ==JJItemApproval.720.class================ */
.jj j2-approval {
  display: flex;
  margin-bottom: 1rem;
  margin-top: -1rem;
  padding: 1rem;
  min-width: 25%;
}
.jj j2-approval .list-group {
  width: 30%;
  overflow: auto;
  position: relative;
  padding-top: 34px;
}
.jj j2-approval .list-group .list-group-item {
  text-align: center;
  margin-right: 3rem;
  border: none;
  min-width: 125px!important;
  padding: 0.75rem 0.5rem;
}
.jj j2-approval .list-group .list-group-item .avatar-md {
  margin-bottom: 10px;
}
.jj j2-approval .list-group .list-group-item button {
  display: none;
}
.jj j2-approval .list-group .list-group-item.me[data-state="done"] .approval button.cancel {
  display: block;
}
.jj j2-approval .list-group .list-group-item[data-state="active"] .avatar-md {
  background-color: var(--primary);
}
.jj j2-approval .list-group .list-group-item[data-state="stop"] .avatar-md {
  background-color: var(--danger);
}
.jj j2-approval .list-group .list-group-item[data-state="wait"] .avatar-md {
  background-color: var(--secondary);
}
.jj j2-approval .list-group .list-group-item[data-state="done"] .avatar-md {
  background-color: var(--success);
}
.jj j2-approval .list-group .list-group-item .approval:empty {
  display: none;
}
.jj j2-approval .list-group .list-group-item::after {
  position: absolute;
  top: 35%;
  right: -45px;
  color: var(--dark);
  content: "\F054";
  padding-right: 10px;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 30px;
  text-rendering: auto;
}
.jj j2-approval .list-group .list-group-item.before-last::after {
  content: "\F0EC";
}
.jj j2-approval .list-group .list-group-item:last-child {
  margin-right: 0;
}
.jj j2-approval .list-group .list-group-item:last-child::after {
  content: "";
}
.jj j2-approval .list-group .list-group-item[data-state="active"] {
  background-color: var(--white);
  color: var(--dark);
}
.jj j2-approval .list-group .list-group-item[data-state="active"] .approval {
  visibility: visible;
}
.jj j2-approval .list-group .list-group-item[data-state="active"] ::after {
  color: var(--dark);
}
.jj j2-approval .list-group .list-group-item button * {
  pointer-events: none;
}
.jj j2-approval .list-group .list-group-item .app-status {
  position: relative;
}
.jj j2-approval .list-group .list-group-item .app-status p {
  display: block;
  margin-bottom: 0;
}
.jj j2-approval .list-group::before {
  position: absolute;
  content: "발신부서";
  top: 0;
  width: 100%;
  text-align: center;
  line-height: 32px;
  background-color: var(--light);
  border: 2px solid white;
}
.jj j2-approval ul[org-type="receive"]::before {
  content: "수신부서";
}
.jj j2-approval div.arv-timeline {
  width: 25%;
  padding-left: 20px;
}
.jj j2-approval div.arv-timeline .arv-msg {
  margin-bottom: 0;
  padding: 1rem;
  padding-left: 6.5rem;
  max-height: 150px;
  overflow: auto;
  background-color: var(--light);
  flex-grow: 1;
}
.jj j2-approval div.arv-timeline .arv-msg li.timeline-sm-item {
  padding-bottom: 10px;
}
.jj j2-approval div.arv-timeline .arv-msg li.timeline-sm-item:last-child {
  padding-bottom: 0;
}
.jj j2-approval div.arv-timeline .arv-msg span.timeline-sm-date {
  left: -5.5rem;
}
.jj j2-approval div.arv-timeline .arv-msg div.item-info pre {
  white-space: normal;
}
.jj j2-approval .edit-box {
  position: relative;
  display: flex;
}
.jj j2-approval .edit-box j2-approval {
  display: flex;
  margin-bottom: 1rem;
  margin-top: -1rem;
  padding: 1rem;
}
.jj j2-approval .edit-box j2-approval .list-group {
  width: 30%;
  overflow: auto;
  position: relative;
  padding-top: 34px;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item {
  text-align: center;
  margin-right: 3rem;
  border: none;
  min-width: 125px!important;
  padding: 0.75rem 0.5rem;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item .avatar-md {
  margin-bottom: 10px;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item button {
  display: none;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item.me[data-state="done"] .approval button.cancel {
  display: block;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item[data-state="active"] .avatar-md {
  background-color: var(--primary);
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item[data-state="stop"] .avatar-md {
  background-color: var(--danger);
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item[data-state="wait"] .avatar-md {
  background-color: var(--secondary);
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item[data-state="done"] .avatar-md {
  background-color: var(--success);
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item .approval:empty {
  display: none;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item::after {
  position: absolute;
  top: 35%;
  right: -45px;
  color: var(--dark);
  content: "\F054";
  padding-right: 10px;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 30px;
  text-rendering: auto;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item.before-last::after {
  content: "\F0EC";
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item:last-child {
  margin-right: 0;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item:last-child::after {
  content: "";
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item[data-state="active"] {
  background-color: var(--white);
  color: var(--dark);
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item[data-state="active"] .approval {
  visibility: visible;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item[data-state="active"] ::after {
  color: var(--dark);
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item button * {
  pointer-events: none;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item .app-status {
  position: relative;
}
.jj j2-approval .edit-box j2-approval .list-group .list-group-item .app-status p {
  display: block;
  margin-bottom: 0;
}
.jj j2-approval .edit-box j2-approval .list-group::before {
  position: absolute;
  content: "발신부서";
  top: 0;
  width: 100%;
  text-align: center;
  line-height: 32px;
  background-color: var(--light);
  border: 2px solid white;
}
.jj j2-approval .edit-box j2-approval ul[org-type="receive"]::before {
  content: "수신부서";
}
.jj j2-approval .edit-box j2-approval div.arv-timeline {
  width: 25%;
  padding-left: 20px;
}
.jj j2-approval .edit-box j2-approval div.arv-timeline .arv-msg {
  margin-bottom: 0;
  padding: 1rem;
  padding-left: 6.5rem;
  max-height: 150px;
  overflow: auto;
  background-color: var(--light);
  flex-grow: 1;
}
.jj j2-approval .edit-box j2-approval div.arv-timeline .arv-msg li.timeline-sm-item {
  padding-bottom: 10px;
}
.jj j2-approval .edit-box j2-approval div.arv-timeline .arv-msg li.timeline-sm-item:last-child {
  padding-bottom: 0;
}
.jj j2-approval .edit-box j2-approval div.arv-timeline .arv-msg span.timeline-sm-date {
  left: -5.5rem;
}
.jj j2-approval .edit-box j2-approval div.arv-timeline .arv-msg div.item-info pre {
  white-space: normal;
}
.jj j2-approval .edit-box j2-approval .edit-box {
  position: relative;
  display: flex;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp {
  flex-grow: 1;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp > .btn-group {
  display: block;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp h1,
.jj j2-approval .edit-box j2-approval .edit-box .text-warp h2,
.jj j2-approval .edit-box j2-approval .edit-box .text-warp h3,
.jj j2-approval .edit-box j2-approval .edit-box .text-warp h4,
.jj j2-approval .edit-box j2-approval .edit-box .text-warp h5,
.jj j2-approval .edit-box j2-approval .edit-box .text-warp h6 {
  margin: 0;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor {
  display: block;
  height: 55px;
  max-height: 135px;
  overflow: auto;
  border: 1px solid #ccc;
  border-right: 0;
  padding: 5px;
  color: black;
  word-break: break-all;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor ol {
  margin-bottom: 0;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor img {
  width: 50%;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor b {
  font-weight: bolder;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor div,
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor p,
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor a,
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor span {
  white-space: normal!important;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp jj-div-editor:empty:before {
  content: "메세지를 입력하세요";
  color: var(--gray);
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp div.textEditor button {
  width: 38px!important;
  height: 30px;
  padding: 0;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp div.dropdown-menu jj-item-text {
  margin: 0.375rem 1.2rem;
}
.jj j2-approval .edit-box j2-approval .edit-box .text-warp div.dropdown-menu button {
  margin: 0.375rem 0;
  margin-right: 1.2rem;
  float: right;
}
.jj j2-approval .edit-box j2-approval .edit-box button {
  flex: none;
}
.jj j2-approval .edit-box [crud="C"] j2-approval::before {
  content: "결재가 필요한 내용입니다. 자료 저장후에 결재를 진행하세요";
  position: absolute;
  font-size: 16px;
  text-align: center;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1rem;
  background-color: var(--white);
  opacity: 0.8;
  margin-top: 1rem;
}
.jj j2-approval .edit-box [crud="C"] j2-approval .list-group,
.jj j2-approval .edit-box [crud="C"] j2-approval div.arv-timeline {
  visibility: hidden;
}
.jj j2-approval .edit-box [crud="U"] j2-approval .me[data-state="active"] .approval button,
.jj j2-approval .edit-box [crud="R"] j2-approval .me[data-state="active"] .approval button {
  display: block;
}
@media (max-width: 1200px) {
  .jj j2-approval .edit-box j2-approval {
    display: block!important;
  }
  .jj j2-approval .edit-box j2-approval .list-group {
    width: 100%!important;
  }
  .jj j2-approval .edit-box j2-approval .arv-timeline {
    width: 100%!important;
    margin-top: 15px;
    padding-left: 0!important;
  }
}
.jj j2-approval .edit-box .text-warp {
  flex-grow: 1;
}
.jj j2-approval .edit-box .text-warp > .btn-group {
  display: block;
}
.jj j2-approval .edit-box .text-warp h1,
.jj j2-approval .edit-box .text-warp h2,
.jj j2-approval .edit-box .text-warp h3,
.jj j2-approval .edit-box .text-warp h4,
.jj j2-approval .edit-box .text-warp h5,
.jj j2-approval .edit-box .text-warp h6 {
  margin: 0;
}
.jj j2-approval .edit-box .text-warp jj-div-editor {
  display: block;
  height: 55px;
  max-height: 135px;
  overflow: auto;
  border: 1px solid #ccc;
  border-right: 0;
  padding: 5px;
  color: black;
  word-break: break-all;
}
.jj j2-approval .edit-box .text-warp jj-div-editor ol {
  margin-bottom: 0;
}
.jj j2-approval .edit-box .text-warp jj-div-editor img {
  width: 50%;
}
.jj j2-approval .edit-box .text-warp jj-div-editor b {
  font-weight: bolder;
}
.jj j2-approval .edit-box .text-warp jj-div-editor div,
.jj j2-approval .edit-box .text-warp jj-div-editor p,
.jj j2-approval .edit-box .text-warp jj-div-editor a,
.jj j2-approval .edit-box .text-warp jj-div-editor span {
  white-space: normal!important;
}
.jj j2-approval .edit-box .text-warp jj-div-editor:empty:before {
  content: "메세지를 입력하세요";
  color: var(--gray);
}
.jj j2-approval .edit-box .text-warp div.textEditor button {
  width: 38px!important;
  height: 30px;
  padding: 0;
}
.jj j2-approval .edit-box .text-warp div.dropdown-menu jj-item-text {
  margin: 0.375rem 1.2rem;
}
.jj j2-approval .edit-box .text-warp div.dropdown-menu button {
  margin: 0.375rem 0;
  margin-right: 1.2rem;
  float: right;
}
.jj j2-approval .edit-box button {
  flex: none;
}
.jj j2-approval[flow-type="내부결재"] ul[org-type="sender"] {
  width: 60%!important;
}
.jj j2-approval[flow-type="내부결재"] ul[org-type="receive"] {
  display: none;
}
.jj j2-approval[flow-type="내부결재"] div.arv-timeline {
  width: 40%!important;
}
.jj j2-approval[flow-type="개인결재"] ul[org-type="sender"] {
  width: 10%!important;
  min-width: 130px!important;
}
.jj j2-approval[flow-type="개인결재"] ul[org-type="receive"] {
  width: 50%!important;
}
.jj j2-approval[flow-type="개인결재"] div.arv-timeline {
  width: auto!important;
}
.jj [crud="C"] j2-approval::before {
  content: "결재가 필요한 내용입니다. 자료 저장후에 결재를 진행하세요";
  position: absolute;
  font-size: 16px;
  text-align: center;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1rem;
  background-color: var(--white);
  opacity: 0.8;
  margin-top: 1rem;
}
.jj [crud="C"] j2-approval .list-group,
.jj [crud="C"] j2-approval div.arv-timeline {
  visibility: hidden;
}
.jj [crud="U"] j2-approval .me[data-state="active"] .approval button,
.jj [crud="R"] j2-approval .me[data-state="active"] .approval button {
  display: block;
}
@media (max-width: 1200px) {
  .jj j2-approval {
    display: block!important;
  }
  .jj j2-approval .list-group {
    width: 100%!important;
  }
  .jj j2-approval .arv-timeline {
    width: 100%!important;
    margin-top: 15px;
    padding-left: 0!important;
  }
}

/* ==JJItemApproval.720.class End ================ */




/* ==JJItemChatter.720.class Start ================ */
/* ==JJItemChatter.720.class================ */
.jj j2-chatter {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 200px;
  height: 400px;
  resize: vertical;
  animation-duration: 0.5s;
}
.jj j2-chatter .chat-title {
  display: flex;
  justify-content: space-between;
  background-color: var(--light);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
}
.jj j2-chatter .chat-title > div button i {
  padding: 3px;
}
.jj j2-chatter .chat-conversation {
  flex-grow: 1;
  overflow: auto;
  background-color: lightsteelblue;
  padding: 0.5rem;
}
.jj j2-chatter .chat-conversation .conversation-list {
  height: auto;
}
.jj j2-chatter .chat-conversation .conversation-list .ctext-wrap {
  max-width: 100%;
}
.jj j2-chatter .chat-conversation .conversation-list .chat-avatar img {
  aspect-ratio: 1;
}
.jj j2-chatter .chat-conversation .conversation-list .message-body a .media-body {
  overflow: hidden;
}
.jj j2-chatter .chat-conversation .conversation-list .message-body a .media-body .media-heading {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.jj j2-chatter .chat-conversation .conversation-list .message-body a .media-body p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.jj j2-chatter .chat-conversation .conversation-list .message-body a > p {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jj j2-chatter .chat-conversation .conversation-list .message-body img {
  max-width: 100%;
}
.jj j2-chatter .chat-edit {
  display: flex;
  border: 1px solid var(--light);
}
.jj j2-chatter .chat-edit jj-chat-editor {
  min-height: 33px;
  max-height: 120px;
}
.jj j2-chatter .chat-edit jj-chat-editor > .btn-group {
  display: none!important;
}
.jj j2-chatter .chat-edit button {
  border-radius: 0;
}
.jj j2-chatter button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj j2-chatter.min {
  height: 32px;
  min-height: auto;
  resize: none;
}
.jj j2-chatter.min > .chat-conversation,
.jj j2-chatter.min > .chat-edit,
.jj j2-chatter.min .chat-title .fa-arrows,
.jj j2-chatter.min .chat-title .fa-columns {
  display: none;
}
.jj j2-chatter.jjdragcomp {
  resize: both;
  float: none;
  position: fixed;
  background-color: yellow;
  padding: 0px;
  border-radius: 0.5rem 0.5rem 0 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.jj j2-chatter.jjdragcomp .chat-title {
  background-color: var(--teal);
  color: white;
}
.jj j2-chatter.jjdragcomp .chat-title .fa-expand,
.jj j2-chatter.jjdragcomp .chat-title .fa-compress,
.jj j2-chatter.jjdragcomp .chat-title .fa-columns {
  display: none;
}
.jj j2-chatter.jjdragcomp .chat-edit {
  border: 1px solid var(--teal);
}
.jj j2-chatter.side {
  position: fixed;
  top: 115px;
  right: 5px;
  width: 390px!important;
  height: calc(100% - 120px) !important;
  resize: none;
}
.jj j2-chatter.side .chat-title {
  background-color: var(--teal);
  color: white;
}
.jj j2-chatter.side .chat-title .fa-expand,
.jj j2-chatter.side .chat-title .fa-compress,
.jj j2-chatter.side .chat-title .fa-arrows {
  display: none;
}
.jj j2-chatter.side .conversation-list .ctext-wrap {
  max-width: 100%;
}
.jj j2-chatter.side .conversation-list .ctext-wrap .message-body a > p {
  word-break: break-all;
}
.jj j2-chatter.side .chat-edit {
  border: 1px solid var(--teal);
}

/* ==JJItemChatter.720.class End ================ */




/* ==JJRecalculate.720.class Start ================ */
/* ==JJRecalculate.720.class================ */
.jj jj-recalculate {
  display: block;
  position: relative;
}
.jj jj-recalculate button {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

/* ==JJRecalculate.720.class End ================ */




/* ==JJsortGrid.720.class Start ================ */
/* ==JJsortGrid.720.class================ */
.jj jj-sortgrid {
  display: inline-flex;
  justify-content: center;
  position: relative;
}

/* ==JJsortGrid.720.class End ================ */




/* ==JJGridLookup.720.class Start ================ */
/* ==JJGridLookup.720.class================ */
.jj jj-gridlookup {
  display: inline-flex;
  justify-content: center;
  position: relative;
}

/* ==JJGridLookup.720.class End ================ */




/* ==JJOuterCheck.720.class Start ================ */
/* ==JJOuterCheck.720.class================ */
.jj jj-outer-check {
  display: inline-flex;
  justify-content: center;
  position: relative;
}

/* ==JJOuterCheck.720.class End ================ */




/* ==JJItem.720.class Start ================ */
/* ==JJItem.720.class================ */
.jj {
  --label-width: 100px;
  /** 폼형 디자인 */
  /**
* 프린트 모드 설정
*/
}
.jj .form-control {
  font-size: 13px;
}
.jj .j2-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
  padding-bottom: 3px;
  font-size: 13px;
}
.jj .j2-item > .control-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  position: relative;
  margin-bottom: 0.5em;
  flex: none;
  font-weight: 500;
}
.jj .j2-item > .control-label::before {
  content: "";
  color: transparent;
  margin-left: -1em;
  position: absolute;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 5px;
  top: 5px;
}
.jj .j2-item > .control-label::after {
  content: "";
  margin-left: -1em;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 5px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  line-height: 1.3em;
  padding-left: 1.5em;
  top: 0.5rem;
}
.jj .j2-item > .control-content {
  position: relative;
  flex-grow: 1;
  min-height: 33px;
}
.jj .j2-item > .control-content input[type="range"] {
  margin: 0;
}
.jj .j2-item > .control-content .form-control {
  margin-bottom: 0;
  height: 33px;
  font-size: inherit;
  color: black;
}
.jj .j2-item > .control-content .form-control::placeholder {
  color: #5e5e5e;
}
.jj .j2-item > .control-content .form-control.read-control {
  display: none;
}
.jj .j2-item > .control-content .form-control:invalid:focus {
  border-color: var(--danger);
  -webkit-box-shadow: 0 0 0 0.2em rgba(241, 85, 108, 0.25);
  box-shadow: 0 0 0 0.2em rgba(241, 85, 108, 0.25);
  border-radius: 1px;
}
.jj .j2-item > .control-content .help-block {
  color: var(--info);
  height: 1px;
  display: block;
  overflow: visible;
  z-index: 10;
  position: absolute;
  pointer-events: none;
  font-size: 12px;
  width: max-content;
}
.jj .j2-item > .control-content .help-block.text-info {
  display: none;
}
.jj .j2-item > .control-content:focus-within {
  border-color: var(--success);
  -webkit-box-shadow: 0 0 0 0.2em rgba(26, 188, 156, 0.25);
  box-shadow: 0 0 0 0.2em rgba(26, 188, 156, 0.25);
  border-radius: 1px;
}
.jj .j2-item[required] > .control-label::after,
.jj .j2-item[required2] > .control-label::after {
  content: "\F111";
  color: var(--danger);
  position: absolute;
}
.jj .j2-item[required].valid > .control-label::after,
.jj .j2-item[required2].valid > .control-label::after {
  color: var(--primary);
  position: absolute;
}
.jj .j2-item[readonly] > .control-content .form-control,
.jj .j2-item[readonly2] > .control-content .form-control {
  background-color: var(--light);
}
.jj .j2-item[readonly] > .control-content:focus-within,
.jj .j2-item[readonly2] > .control-content:focus-within {
  border-color: var(--light) !important;
  -webkit-box-shadow: 0 0 0 0.2em var(--light);
  box-shadow: 0 0 0 0.2em var(--light);
  border-color: #ced4da !important;
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
}
.jj .j2-item:focus-within .help-block.text-info {
  display: block;
}
.jj .j2-item.no-label .control-label {
  display: none;
}
.jj .j2-item.label-right .control-label {
  text-align: right;
  padding-right: 1em;
}
.jj .j2-item.label-right .jj-hitem[default] .control-label::before,
.jj .j2-item.label-right .jj-hitem[data-default] .control-label::before {
  content: "\F111";
}
.jj .j2-item.label-right .jj-hitem[default] .control-label::after,
.jj .j2-item.label-right .jj-hitem[data-default] .control-label::after {
  content: "";
}
.jj .j2-item.label-right .jj-hitem[required] .control-label::before,
.jj .j2-item.label-right .jj-hitem[data-required] .control-label::before {
  content: "\F111";
  color: var(--danger);
}
.jj .j2-item.label-right .jj-hitem[required] .control-label::after,
.jj .j2-item.label-right .jj-hitem[data-required] .control-label::after {
  content: "";
  color: var(--danger);
}
.jj .j2-item.size-sm > .control-label {
  padding: 0.4em;
}
.jj .j2-item.size-sm > .control-content {
  padding: 0.2em;
}
.jj .j2-item.size-sm > .control-content .form-control {
  padding: 0.1em;
  height: calc(1.5em + 0.2em + 2px);
}
.jj .j2-item.error .form-control {
  background-color: rgba(255, 0, 0, 0.2) !important;
}
.jj .j2-item.error .help-block {
  color: #EA1535 !important;
}
.jj .j2-item.drag-over {
  outline: 2px dotted yellow;
}
.jj .j2-item.resize-vertical {
  height: 287px;
  resize: vertical;
  overflow: hidden;
}
.jj .j2-item.row {
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: 0px;
  margin-right: 0;
}
.jj .j2-item.row .control-label {
  flex-grow: 0;
  margin-top: 0.5em;
  width: var(--label-width);
}
.jj .j2-item.row .control-content {
  flex-grow: 1;
}
.jj .j2-item.row .control-content .input-group-prepend {
  margin-right: 0;
}
.jj .j2-item[help-url] .control-label:hover {
  color: var(--blue);
  text-decoration: underline;
}
.jj .j2-item.word-break .control-label {
  white-space: break-spaces;
  word-break: break-all;
  width: var(--label-width);
}
.jj .j2-item[default] > .control-label::after,
.jj .j2-item[data-default] > .control-label::after {
  content: "\F111";
}
.jj td > .j2-item {
  width: 100%;
  margin-bottom: 0;
  border: 0!important;
  background-color: transparent !important;
}
.jj td > .j2-item > .control-content {
  border: 0!important;
}
.jj td > .j2-item.resize-vertical {
  height: 28px;
  resize: none;
}
.jj .jj-proxy-grid td > .j2-item {
  padding-bottom: 0!important;
}
.jj .jj-proxy-grid td > .j2-item > .control-label {
  display: none;
}
.jj .jj-proxy-grid td > .j2-item > .control-content {
  height: 22px;
  min-height: 22px;
}
.jj .jj-proxy-grid td > .j2-item > .control-content .form-control {
  height: 22px;
  text-overflow: ellipsis;
}
.jj td[class*='text-'] .j2-item .form-control {
  color: inherit;
}
.jj td.text-left > .j2-item input {
  text-align: left!important;
}
.jj td.text-center > .j2-item input {
  text-align: center!important;
}
.jj td.text-right > .j2-item input {
  text-align: right!important;
}
.jj .jj-data-form.form-box.resize-vertical {
  height: 135px;
  resize: vertical;
  overflow: auto;
}
.jj .jj-data-form.form-box .input-group-text {
  border-width: 0 1px 0 0;
  background-color: #f8f8f8;
}
.jj .jj-data-form.form-box .j2-item {
  height: 34px;
  min-height: 34px;
}
.jj .jj-data-form.form-box .j2-item > .control-content {
  height: 100%;
}
.jj .jj-data-form.form-box .j2-item > .control-content .form-viewer {
  height: 100%;
}
.jj .jj-data-form.form-box j2-code.j2-item,
.jj .jj-data-form.form-box j2-texthtml.j2-item,
.jj .jj-data-form.form-box j2-gauge.j2-item,
.jj .jj-data-form.form-box j2-qrprint.j2-item j2-file.j2-item,
.jj .jj-data-form.form-box j2-expense.j2-item,
.jj .jj-data-form.form-box j2-mp4.j2-item,
.jj .jj-data-form.form-box j2-youtube.j2-item,
.jj .jj-data-form.form-box j2-kmap.j2-item,
.jj .jj-data-form.form-box j2-dial.j2-item {
  height: 136px;
  min-height: 136px;
}
.jj .jj-data-form.form-box .jj-proxy-grid .j2-item {
  height: 24px;
  min-height: 24px!important;
}
@media (max-width: 767.98px) {
  .jj .j2-item > .control-label {
    white-space: normal;
  }
  .jj .j2-item[required] > .control-label::after,
  .jj .j2-item[required2] > .control-label::after {
    top: auto;
    bottom: 0.5rem;
  }
}
.jj .j2-item.label-wrap .control-label {
  width: var(--label-width);
  word-break: auto-phrase;
  overflow: visible;
  white-space: break-spaces;
}
.jj .label-wrap .j2-item .control-label {
  width: var(--label-width);
  word-break: auto-phrase;
  overflow: visible;
  white-space: break-spaces;
}

/* ==JJItem.720.class End ================ */




/* ==JJItemAddress.720.class Start ================ */
/* ==JJItemAddress.720.class================ */
.jj {
  /**
* 프린트 모드 설정
*/
  /**
* 모바일 모드 설정
*/
}
.jj j2-address.j2-item .control-content {
  display: flex;
}
.jj j2-address.j2-item .control-content .text-box {
  overflow: hidden;
}
.jj j2-address.j2-item .control-content > .input-group {
  flex-wrap: nowrap;
  max-width: 100px;
}
.jj j2-address.j2-item .control-content > .input-group .input-group-append {
  height: 33px;
}
.jj j2-address.j2-item .control-content > .input-group .input-group-append .btn {
  border-radius: 0;
  display: flex;
  align-items: center;
}
.jj j2-address.j2-item .control-content > .addr1,
.jj j2-address.j2-item .control-content > .addr2 {
  flex-grow: 1;
  width: 1%;
  border-radius: 0;
}
.jj j2-address.j2-item .control-content > .addr2 {
  border-radius: 0 0.2rem 0.2rem 0;
  border-left-width: 0;
}
.jj j2-address.j2-item .control-content .help-block {
  bottom: 0;
}
.jj j2-address.j2-item.vertical .control-content {
  flex-direction: column;
}
.jj j2-address.j2-item.vertical .control-content .input-group-append .btn {
  border-radius: 0 0.2rem 0.2rem 0;
}
.jj j2-address.j2-item.vertical .control-content > .addr1,
.jj j2-address.j2-item.vertical .control-content > .addr2 {
  flex-grow: 1;
  width: 100%;
  border-radius: 0 0.2rem 0.2rem 0;
}
.jj j2-address.j2-item.vertical .control-content > .addr1 {
  margin: 5px 0 ;
}
.jj j2-address.j2-item.vertical .control-content > .addr2 {
  border-left-width: 1px;
}
.jj j2-address.j2-item[readonly] button,
.jj j2-address.j2-item[readonly2] button {
  display: none;
}
.jj j2-address.j2-item[readonly] .zip-code,
.jj j2-address.j2-item[readonly2] .zip-code,
.jj j2-address.j2-item[readonly] .addr1,
.jj j2-address.j2-item[readonly2] .addr1 {
  background-color: var(--light);
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .control-content .text-box {
  overflow: hidden;
}
.jj .print-on j2-address.j2-item.horizontal div.control-content {
  display: block;
}
.jj .print-on j2-address.j2-item.horizontal div.control-content div.input-group {
  display: inline-block;
}
.jj .print-on j2-address.j2-item.horizontal div.control-content div.input-group label {
  width: auto;
}
.jj .print-on j2-address.j2-item.horizontal label.addr1,
.jj .print-on j2-address.j2-item.horizontal label.addr2 {
  display: inline-block;
  width: auto;
}
@media (max-width: 1200px) {
  .jj j2-address.j2-item input.addr1 {
    width: 100%!important;
  }
  .jj j2-address.j2-item input.addr2 {
    width: 100%!important;
    border-left: 1px solid #ccc !important;
  }
}

/* ==JJItemAddress.720.class End ================ */




/* ==JJItemCheck.720.class Start ================ */
/* ==JJItemCheck.720.class================ */
.jj j2-check.j2-item .control-label {
  margin: 0 0.5rem 0.5rem 0;
}
.jj j2-check.j2-item .control-content {
  padding: 4px 0;
  height: 33px!important;
}
.jj j2-check.j2-item .control-content .check-label {
  margin-right: 1rem;
  margin-bottom: 0;
  margin-left: 0.5rem;
}
.jj j2-check.j2-item .control-content .check-label input {
  padding: 3px;
  margin-right: 0.2rem;
  border-radius: 0.25rem;
}
.jj j2-check.j2-item .control-content .check-label input:checked {
  border: 2px solid #000;
  background-clip: content-box;
}
.jj j2-check.j2-item .control-content .check-label input:focus-within {
  border-color: var(--danger) !important;
}
.jj j2-check.j2-item .control-content:focus-within {
  border: none;
  box-shadow: none;
}
.jj j2-check.j2-item.block label {
  display: block;
}
.jj j2-check.j2-item[readonly] .check-label,
.jj j2-check.j2-item[data-readonly] .check-label,
.jj j2-check.j2-item[readonly2] .check-label {
  background-color: var(--light);
}
.jj j2-check.j2-item[readonly2] .control-content {
  padding: 0;
}
.jj j2-check.j2-item.type1 .control-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.jj j2-check.j2-item.type1 .control-content .check-label input[type='checkbox'] {
  --size: 2.6rem;
  --width: 2.6rem;
  --height: 1.3rem;
  position: relative;
  margin-left: var(--size);
  width: 0px;
  height: 18px;
  border: none;
}
.jj j2-check.j2-item.type1 .control-content .check-label input[type='checkbox']:before {
  position: absolute;
  display: block;
  top: -0.15rem;
  left: calc(var(--size) * -1);
  width: var(--width);
  height: var(--height);
  pointer-events: none;
  content: '';
  background-color: #fff;
  border: #adb5bd solid 1px;
  pointer-events: all;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.jj j2-check.j2-item.type1 .control-content .check-label input[type='checkbox']:after {
  position: absolute;
  display: block;
  top: 0px;
  width: calc(var(--height) - 4px);
  height: calc(var(--height) - 4px);
  left: calc(var(--size) * -1 + 2px);
  content: '';
  background: no-repeat 1% 50%;
  background-color: #adb5bd;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.jj j2-check.j2-item.type1 .control-content .check-label input[type='checkbox']:checked {
  border-width: 0!important;
}
.jj j2-check.j2-item.type1 .control-content .check-label input[type='checkbox']:checked:before {
  color: var(--primary);
  border-color: var(--primary);
  background-color: var(--primary);
}
.jj j2-check.j2-item.type1 .control-content .check-label input[type='checkbox']:checked:after {
  background-color: #fff;
  -webkit-transform: translateX(calc(var(--size) / 2));
  transform: translateX(calc(var(--size) / 2));
}
.jj j2-check.j2-item.type1.danger .control-content input[type='checkbox']:checked:before {
  color: var(--danger);
  border-color: var(--danger);
  background-color: var(--danger);
}
.jj j2-check.j2-item.type1.success .control-content input[type='checkbox']:checked:before {
  color: var(--success);
  border-color: var(--success);
  background-color: var(--success);
}
.jj j2-check.j2-item.type1.warning .control-content input[type='checkbox']:checked:before {
  color: var(--warning);
  border-color: var(--warning);
  background-color: var(--warning);
}
.jj j2-check.j2-item.type1.info .control-content input[type='checkbox']:checked:before {
  color: var(--info);
  border-color: var(--info);
  background-color: var(--info);
}
.jj j2-check.j2-item.type1.purple .control-content input[type='checkbox']:checked:before {
  color: var(--purple);
  border-color: var(--purple);
  background-color: var(--purple);
}
.jj j2-check.j2-item.type1.secondary .control-content input[type='checkbox']:checked:before {
  color: var(--secondary);
  border-color: var(--secondary);
  background-color: var(--secondary);
}
.jj j2-check.j2-item.error input[type="checkbox"] {
  background-color: rgba(255, 0, 0, 0.2) !important;
}
.jj .jj-proxy-grid td j2-check.j2-item {
  height: 22px;
}
.jj .jj-proxy-grid td j2-check.j2-item .control-content {
  height: 22px!important;
  padding: 0;
  text-align: center;
}
.jj .jj-proxy-grid td j2-check.j2-item .control-content .check-label {
  margin: 0!important;
  height: 22px;
}
.jj .jj-proxy-grid td j2-check.j2-item .control-content .check-label input {
  height: 20px!important;
  width: 20px!important;
  vertical-align: top!important;
  margin-right: 0!important;
}
.jj .jj-proxy-grid td j2-check.j2-item .control-content .check-label input:checked {
  background: #555;
  border: 2px solid #555;
  background-clip: content-box !important;
}

/* ==JJItemCheck.720.class End ================ */




/* ==JJItemCheckList.720.class Start ================ */
/* ==JJItemCheckList.720.class================ */
.jj j2-checklist.j2-item {
  height: auto!important;
  /*&.purple .control-content .form-control{
  input[type='checkbox']:checked + t {
  color: var(--white);
  border-color: var(--purple);
  background-color: var(--purple);
}
}*/
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control {
  display: flex;
  gap: var(--gap-size);
  padding: 3px;
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control::-webkit-scrollbar {
  height: 3px!important;
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control .check-label {
  cursor: pointer;
  margin-right: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control .check-label input[type="checkbox"] {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control .check-label input[type="checkbox"] + t {
  padding: 5px 0!important;
  text-wrap: nowrap;
  display: inline-block;
  font-weight: 400;
  color: #6c757d;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.2rem 0.4rem;
  font-size: inherit;
  line-height: 1;
  border-radius: 0.15rem;
  transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s, -webkit-box-shadow 0.15s ease-in-out 0s;
  color: var(--dark);
  background-color: var(--light);
  border-color: var(--light);
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control .check-label input[type="checkbox"] + t i {
  margin-right: 5px;
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control .check-label.custom input[type="checkbox"]:checked + t {
  color: var(--white);
  background-color: inherit;
  border: none;
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control .check-label:focus-within {
  border: 1px solid var(--success);
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control input {
  padding: 0px;
}
.jj j2-checklist.j2-item[type="button"] .control-content .form-control input:checked {
  background: var(--primary);
  border: 2px solid var(--primary);
  background-clip: content-box;
}
.jj j2-checklist.j2-item[type="checkbox"] .control-content .form-control .check-label {
  padding-right: 1rem;
}
.jj j2-checklist.j2-item .control-content {
  overflow: hidden;
}
.jj j2-checklist.j2-item .control-content .form-control {
  flex-wrap: wrap;
  height: 100%;
  display: flex;
  min-height: 33px;
  padding: 3px;
  overflow: auto;
}
.jj j2-checklist.j2-item .control-content .form-control .check-label {
  margin-right: 1rem;
}
.jj j2-checklist.j2-item .control-content .form-control input {
  margin-right: 0.2rem;
  width: 16px;
  height: 16px;
  border-radius: 0.25rem;
  padding: 2px;
}
.jj j2-checklist.j2-item .control-content .form-control label.etc-label input.etc-text {
  width: initial;
  margin-left: 1rem;
  pointer-events: auto;
  padding: inherit;
  height: initial;
  border: inherit;
  padding: 0 5px;
}
.jj j2-checklist.j2-item.block label {
  display: block;
}
.jj j2-checklist.j2-item.vertical .form-control {
  display: flex;
  flex-direction: column;
  height: auto;
}
.jj j2-checklist.j2-item.vertical .form-control label.check-label {
  height: auto;
  margin-bottom: 5px;
  display: flex;
}
.jj j2-checklist.j2-item.vertical .form-control label.check-label input {
  margin-top: 2px;
}
.jj j2-checklist.j2-item.vertical .form-control label.check-label t {
  width: 100%;
}
.jj j2-checklist.j2-item.vertical .form-control label.check-label:last-child {
  margin-bottom: 0px;
}
.jj j2-checklist.j2-item[readonly] .form-control,
.jj j2-checklist.j2-item[data-readonly] .form-control {
  pointer-events: none;
}
.jj j2-checklist.j2-item[readonly2] .control-content .form-control {
  padding: 0.45rem 0.9rem;
}
.jj j2-checklist.j2-item:not([btn-color]) .control-content .form-control input[type='checkbox']:checked + t {
  color: var(--white);
  border-color: var(--primary);
  background-color: var(--primary);
}
.jj j2-checklist.j2-item[btn-color="btn-primary"] .control-content .form-control input[type='checkbox']:checked + t {
  color: var(--white);
  border-color: var(--primary);
  background-color: var(--primary);
}
.jj j2-checklist.j2-item[btn-color="btn-danger"] .control-content .form-control input[type='checkbox']:checked + t {
  color: var(--white);
  border-color: var(--danger);
  background-color: var(--danger);
}
.jj j2-checklist.j2-item[btn-color="btn-success"] .control-content .form-control input[type='checkbox']:checked + t {
  color: var(--white);
  border-color: var(--success);
  background-color: var(--success);
}
.jj j2-checklist.j2-item[btn-color="btn-warning"] .control-content .form-control input[type='checkbox']:checked + t {
  color: var(--white);
  border-color: var(--warning);
  background-color: var(--warning);
}
.jj j2-checklist.j2-item[btn-color="btn-info"] .control-content .form-control input[type='checkbox']:checked + t {
  color: var(--white);
  border-color: var(--info);
  background-color: var(--info);
}
.jj j2-checklist.j2-item[btn-color="btn-secondary"] .control-content .form-control input[type='checkbox']:checked + t {
  color: var(--white);
  border-color: var(--secondary);
  background-color: var(--secondary);
}
.jj .jj-proxy-grid td > j2-checklist.j2-item {
  min-height: 25px;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content {
  display: flex;
  height: 25px!important;
  min-height: 25px!important;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content .form-control {
  padding-right: 23px;
  overflow-y: auto;
  white-space: wrap;
  height: 22px;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content .form-control .code-item {
  margin: 0 2px 3px 0;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content .form-control::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content .dropdown-menu {
  white-space: initial;
  word-break: break-all;
  overflow: auto;
  height: 240px;
  width: 240px;
  display: none;
  flex-direction: column;
  padding: 0;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content .dropdown-menu label.check-label {
  margin: 0.5rem;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content .dropdown-menu label.check-label input[type="checkbox"] {
  margin-right: 0.5rem;
  width: 15px;
  height: 15px;
}
.jj .jj-proxy-grid td > j2-checklist.j2-item .control-content .dropdown-menu.show {
  display: flex;
}

/* ==JJItemCheckList.720.class End ================ */




/* ==JJItemCode.720.class Start ================ */
/* ==JJItemCode.720.class================ */
.jj j2-code.j2-item {
  position: relative;
  min-height: 62px;
  min-width: 25%;
}
.jj j2-code.j2-item .control-content {
  flex-grow: 1;
}
.jj j2-code.j2-item .control-content:focus-within {
  border-color: initial;
  -webkit-box-shadow: initial;
  box-shadow: initial;
  border-radius: initial;
}
.jj j2-code.j2-item .control-content .form-control {
  height: 100%;
  max-height: initial;
  padding: 0;
}
.jj j2-code.j2-item .control-content .form-control .editor {
  border-width: 0;
}
.jj j2-code.j2-item[readonly] jj-code-editor,
.jj j2-code.j2-item[readonly2] jj-code-editor {
  pointer-events: none;
}
.jj j2-code.j2-item[readonly] jj-code-editor .CodeMirror,
.jj j2-code.j2-item[readonly2] jj-code-editor .CodeMirror {
  background-color: var(--light);
}
.jj j2-code.j2-item [contenteditable]:focus {
  outline: 0px solid transparent;
}
.jj j2-code.j2-item [contenteditable]:empty:before {
  content: attr(placeholder);
}
.jj td j2-code.j2-item {
  min-height: 22px;
  height: 22px;
}
.jj td j2-code.j2-item .control-content {
  display: flex;
  align-items: center;
}
.jj td j2-code.j2-item .control-content div.text-box {
  overflow: hidden;
}
.jj td j2-code.j2-item .control-content .dropdown-menu {
  height: 300px;
  width: 300px;
}
.jj td j2-code.j2-item .control-content .dropdown-menu div.cover {
  height: 100%!important;
  position: relative;
}
.jj td j2-code.j2-item .control-content .dropdown-menu div.cover jj-code-editor {
  height: 100%!important;
}
.jj td j2-code.j2-item .control-content .input-group-text {
  height: 100%;
  padding: 6px;
  position: absolute;
  right: 0;
  color: #000;
  top: 1px;
  border: none;
  background-color: transparent;
}

/* ==JJItemCode.720.class End ================ */




/* ==JJItemDate.720.class Start ================ */
/* ==JJItemDate.720.class================ */
.jj j2-date.j2-item.form-group .form-control {
  -webkit-appearance: none;
  text-align: -webkit-left !important;
  align-items: center!important;
  display: block!important;
}
.jj .jj-proxy-grid td j2-date.j2-item .control-content {
  overflow: hidden;
}

/* ==JJItemDate.720.class End ================ */




/* ==JJItemDatetime.720.class Start ================ */
/* ==JJItemDatetime.720.class================ */
.jj j2-datetime.j2-item div.input-group-prepend {
  display: none;
}
.jj j2-datetime.j2-item .form-control {
  -webkit-appearance: none;
  text-align: -webkit-left !important;
  align-items: center!important;
  display: block!important;
}
.jj td j2-datetime.j2-item .control-content {
  overflow: hidden;
}
.jj td j2-datetime.j2-item div.input-group-prepend {
  display: none;
}

/* ==JJItemDatetime.720.class End ================ */




/* ==JJItemDateBetween.720.class Start ================ */
/* ==JJItemDateBetween.720.class================ */
.jj j2-datebetween.j2-item .form-control {
  -webkit-appearance: none;
  text-align: -webkit-left !important;
  align-items: center!important;
  display: block!important;
}

/* ==JJItemDateBetween.720.class End ================ */




/* ==JJItemDropDown.720.class Start ================ */
/* ==JJItemDropDown.720.class================ */
.jj j2-dropdown.j2-item .control-content {
  position: relative;
}
.jj j2-dropdown.j2-item .control-content .tag-items {
  padding: 3px;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  min-height: 33px;
  width: auto;
}
.jj j2-dropdown.j2-item .control-content .tag-items .code-item {
  display: inline-flex !important;
}
.jj j2-dropdown.j2-item .control-content .tag-items::-webkit-scrollbar {
  height: 3px!important;
  z-index: 100!important;
}
.jj j2-dropdown.j2-item .control-content .tag-items .alert {
  margin: 0.1rem 0.2rem 0.1rem 0;
  padding: 0;
  color: #1d6b78;
  background-color: #d7f5fa;
  border-color: #c7f1f8;
}
.jj j2-dropdown.j2-item .control-content .tag-items .alert button.close {
  font-size: 1.2rem;
  height: 100%;
  padding: 0 0.5rem 0.2rem;
}
.jj j2-dropdown.j2-item .control-content .tag-items .alert button.close * {
  pointer-events: none;
}
.jj j2-dropdown.j2-item .control-content .tag-items:empty:before {
  content: attr(placeholder);
  margin-top: 4px;
  position: absolute;
}
.jj j2-dropdown.j2-item .control-content .dropdown-menu {
  width: 100%;
  padding: 0;
}
.jj j2-dropdown.j2-item .control-content .dropdown-menu .form-group {
  margin: 0;
}
.jj j2-dropdown.j2-item .control-content .dropdown-menu .form-group > input.form-control {
  border: none;
}
.jj j2-dropdown.j2-item .control-content .dropdown-menu .dropdown-item-group {
  background: #F1F5F7;
  padding-top: 32px;
  height: 200px;
  width: 100%;
  overflow: auto;
}
.jj j2-dropdown.j2-item .control-content .dropdown-menu .dropdown-item-group .dropdown-item.selected {
  opacity: 0.5;
}
.jj j2-dropdown.j2-item .control-content .dropdown-menu .dropdown-item-group .dropdown-item * {
  pointer-events: none;
}
.jj j2-dropdown.j2-item[readonly] .tag-items {
  background-color: var(--light);
}
.jj j2-dropdown.j2-item[readonly] .tag-items .tag-control,
.jj j2-dropdown.j2-item[readonly] .tag-items .close {
  display: none;
}
.jj j2-dropdown.j2-item .dropdown-item {
  overflow: hidden;
}
.jj td j2-dropdown .control-content .input-group {
  min-height: auto;
  flex-wrap: wrap;
  align-items: center;
}
.jj td j2-dropdown .control-content .input-group .input-group-prepend .input-group-text.btn-picker {
  padding: 6px;
  position: absolute;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
  z-index: 10;
}
.jj td j2-dropdown .control-content .input-group .form-control {
  padding: 0 23px;
  overflow: auto;
  flex-wrap: wrap;
  min-height: fit-content;
}
.jj td j2-dropdown .control-content .input-group .form-control::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj td j2-dropdown .control-content .input-group .form-control .code-item button.close {
  line-height: 1;
}
.jj td j2-dropdown .control-content .input-group .input-group-text.btn-eraser {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj td j2-dropdown .control-content .dropdown-menu {
  width: 260px!important;
}
.jj td j2-dropdown .control-content .dropdown-menu .form-group {
  padding: 5px 0 0 30px;
}
@media (max-width: 1200px) {
  .jj j2-dropdown .control-content > .input-group .tag-items {
    width: 1%!important;
  }
}

/* ==JJItemDropDown.720.class End ================ */




/* ==JJItemDropUser.720.class Start ================ */
/* ==JJItemDropUser.720.class================ */
.jj j2-dropuser .control-content {
  position: relative;
}
.jj j2-dropuser .control-content .input-group {
  flex-wrap: nowrap;
}
.jj j2-dropuser .control-content .input-group > input {
  display: none;
}
.jj j2-dropuser .control-content .input-group .input-group-text.btn-eraser {
  pointer-events: auto;
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.jj j2-dropuser .control-content > .input-group {
  white-space: break-spaces;
  min-height: 33px;
  overflow: hidden;
  white-space: nowrap;
  overflow: auto;
}
.jj j2-dropuser .control-content > .input-group .form-control.jj-sortable span.code-item {
  pointer-events: all!important;
}
.jj j2-dropuser .control-content > .input-group .tag-items {
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  height: auto;
  min-height: 33px;
  width: 1%;
}
.jj j2-dropuser .control-content > .input-group .tag-items .code-item {
  display: inline-block;
  margin: 0.05rem 0.2rem 0.05rem 0;
  padding: 0.15rem 2rem 0.15rem 0.3rem;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.jj j2-dropuser .control-content > .input-group .tag-items .code-item .avatar {
  margin-top: -0.3rem;
  height: 1.25rem;
  width: 1.25rem;
}
.jj j2-dropuser .control-content > .input-group .tag-items .code-item button.close {
  font-size: 1.2rem;
  height: 100%;
  padding: 0 0.5rem 0.2rem;
}
.jj j2-dropuser .control-content > .input-group .tag-items .code-item button.close * {
  pointer-events: none;
}
.jj j2-dropuser .control-content > .input-group .tag-items:empty:before {
  content: attr(placeholder);
  margin-top: 4px;
  position: absolute;
  opacity: 0.5;
  padding-left: 8px;
}
.jj j2-dropuser .control-content > .dropdown-menu {
  width: 100%;
  padding: 0;
  overflow: auto;
}
.jj j2-dropuser .control-content > .dropdown-menu .dropdown-item-group {
  background: #F1F5F7;
  padding-top: 32px;
  overflow: overlay;
  cursor: pointer;
  width: 100%;
}
.jj j2-dropuser .control-content > .dropdown-menu .dropdown-item-group .dropdown-item {
  padding: 0.6rem 1.2rem;
}
.jj j2-dropuser .control-content > .dropdown-menu .dropdown-item-group .avatar {
  height: 1.25rem;
  width: 1.25rem;
}
.jj j2-dropuser .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.selected {
  opacity: 0.5;
}
.jj j2-dropuser .control-content > .dropdown-menu .dropdown-item-group .dropdown-item * {
  pointer-events: none;
}
.jj j2-dropuser .control-content > .dropdown-menu .help-block {
  left: 16px;
  top: 40px;
}
.jj j2-dropuser .control-content > .dropdown-menu .form-group {
  margin-bottom: 0;
}
.jj j2-dropuser .control-content > .dropdown-menu .form-group .form-control.search {
  border: 0;
  border-radius: 0;
}
.jj j2-dropuser.vertical .input-group {
  display: flex;
  flex-direction: row;
}
.jj j2-dropuser.vertical .input-group .tag-items {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.jj j2-dropuser.vertical .input-group .tag-control {
  flex-grow: 0;
}
.jj j2-dropuser[readonly] .tag-items,
.jj j2-dropuser[readonly2] .tag-items {
  background-color: var(--light);
}
.jj j2-dropuser[readonly] .tag-items .tag-control,
.jj j2-dropuser[readonly2] .tag-items .tag-control,
.jj j2-dropuser[readonly] .tag-items .close,
.jj j2-dropuser[readonly2] .tag-items .close {
  display: none;
}
.jj j2-dropuser[readonly] .btn-eraser,
.jj j2-dropuser[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj j2-dropuser[readonly] .control-content .form-control,
.jj j2-dropuser[readonly2] .control-content .form-control {
  min-height: 22px!important;
}
.jj td j2-dropuser .control-content .input-group {
  min-height: auto;
  flex-wrap: wrap;
  align-items: center;
}
.jj td j2-dropuser .control-content .input-group .input-group-prepend .input-group-text.btn-picker {
  padding: 6px;
  position: absolute;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
  z-index: 10;
}
.jj td j2-dropuser .control-content .input-group .form-control {
  padding: 0 23px;
  overflow: auto;
  flex-wrap: wrap;
  min-height: fit-content;
}
.jj td j2-dropuser .control-content .input-group .form-control::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item {
  display: flex!important;
  flex-flow: nowrap!important;
  padding: 0 0.3rem !important;
  align-items: center!important;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item img.rounded-circle {
  width: 1rem;
  height: 1rem!important;
  margin-top: 0;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item button.close {
  line-height: 1rem;
}
.jj td j2-dropuser .control-content .input-group .input-group-text.btn-eraser {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj td j2-dropuser .control-content .dropdown-menu {
  width: 260px!important;
}
.jj td j2-dropuser .control-content .dropdown-menu .form-group {
  padding: 5px 0 0 30px;
}
@media (max-width: 1200px) {
  .jj j2-dropuser .control-content > .input-group .tag-items {
    width: 1%!important;
  }
}

/* ==JJItemDropUser.720.class End ================ */




/* ==JJItemDropOrg.720.class Start ================ */
/* ==JJItemDropOrg.720.class================ */
.jj j2-droporg {
  /** 최대허용량을 채운경우 */
}
.jj j2-droporg .input-group {
  display: block;
  background-color: var(--white);
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  padding: 0.15rem 0.2rem 0 0.15rem;
  min-height: 33px;
}
.jj j2-droporg .input-group .input-group-prepend {
  margin-left: -3px;
  margin-top: -3px;
  /* height: 100%; */
  margin-bottom: -1px;
  margin-right: 5px;
  float: left;
}
.jj j2-droporg .input-group .input-group-prepend .btn-picker {
  height: 33px;
  color: black;
  cursor: pointer;
}
.jj j2-droporg .input-group .tag-items {
  float: left;
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 3;
  width: auto;
  max-width: calc(100% - 150px);
  overflow-x: auto;
  overflow-y: hidden;
}
.jj j2-droporg .input-group .tag-items:empty {
  flex-grow: 0;
}
.jj j2-droporg .input-group .tag-items .code-item {
  position: relative;
  flex-grow: 1;
  width: 10%;
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  margin: 0 0.2rem 0.15rem 0;
  padding: 0.2rem 2rem 0.2rem 0.3rem;
}
.jj j2-droporg .input-group .tag-items .code-item .close {
  font-size: 1.2rem;
  height: 100%;
  padding: 0 0.5rem 0.2rem;
}
.jj j2-droporg .input-group .tag-items .code-item .close * {
  pointer-events: none;
}
.jj j2-droporg .input-group .tag-control {
  float: left;
  width: 20%;
  border: 0;
  max-width: 110px;
  min-width: 100px;
  flex-grow: 1;
  height: 29px;
  padding: 0 0.2rem 0.15rem;
}
.jj j2-droporg.item-full .input-group-prepend,
.jj j2-droporg.item-full .tag-control {
  display: none;
}
.jj td j2-droporg .input-group {
  padding: 0;
  border: 0;
  min-height: auto;
}
.jj td j2-droporg .input-group .input-group-prepend {
  margin: 0;
  margin-right: 3px!important;
}
.jj td j2-droporg .input-group .input-group-prepend .btn-picker {
  border-radius: 0.2rem;
}
.jj td j2-droporg .input-group .tag-items {
  height: 22px;
}
.jj td j2-droporg .input-group .tag-items .code-item {
  margin: 0;
  padding: 0 0.5rem;
  margin-right: 5px;
  height: 22px;
}
.jj td j2-droporg .input-group .tag-items .code-item .close {
  position: absolute!important;
  height: auto!important;
  line-height: 15px!important;
}
.jj td j2-droporg .input-group .tag-control {
  height: 20px;
  margin-top: 2px;
}
.jj .search-list-box {
  position: fixed;
  border: 1px solid #999;
  background-color: white;
  min-width: 200px;
  min-height: 100px;
  z-index: 100;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 8px 0 rgb(154 161 5.7%);
  box-shadow: 0 0 8px 0 rgb(154 161 5.7%);
}
.jj .search-list-box .item {
  display: block;
  width: 100%;
  padding: 0.375rem 1.2rem;
  clear: both;
  font-weight: 400;
  color: black;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  margin-bottom: 0;
}
.jj .search-list-box .item.disable {
  pointer-events: none;
  opacity: 0.5;
  background-color: var(--gray) !important;
  font-style: italic;
  font-weight: 100;
}
.jj .search-list-box p:hover {
  background-color: var(--light);
}
.jj .search-list-box p.active {
  background-color: var(--primary);
  color: white;
}

/* ==JJItemDropOrg.720.class End ================ */




/* ==JJItemDropField.720.class Start ================ */
/* ==JJItemDropField.720.class================ */
.jj j2-dropfield .control-content {
  position: relative;
}
.jj j2-dropfield .control-content .input-group > input {
  display: none;
}
.jj j2-dropfield .control-content .input-group .input-group-text.btn-eraser {
  pointer-events: auto;
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.jj j2-dropfield .control-content > .input-group {
  white-space: break-spaces;
  min-height: 33px;
  overflow: hidden;
  white-space: nowrap;
  overflow: auto;
}
.jj j2-dropfield .control-content > .input-group .tag-items {
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  height: auto;
  min-height: 33px;
  width: 1%;
}
.jj j2-dropfield .control-content > .input-group .tag-items .code-item {
  display: inline-block;
  margin: 0.05rem 0.2rem 0.05rem 0;
  padding: 0.15rem 2rem 0.15rem 0.3rem;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.jj j2-dropfield .control-content > .input-group .tag-items .code-item .avatar {
  margin-top: -0.3rem;
  height: 1.25rem;
  width: 1.25rem;
}
.jj j2-dropfield .control-content > .input-group .tag-items .code-item button.close {
  font-size: 1.2rem;
  height: 100%;
  padding: 0 0.5rem 0.2rem;
  position: absolute;
  right: 5px;
  padding: 0 5px;
  top: 0px;
}
.jj j2-dropfield .control-content > .input-group .tag-items .code-item button.close * {
  pointer-events: none;
}
.jj j2-dropfield .control-content > .input-group .tag-items:empty:before {
  content: attr(placeholder);
  margin-top: 4px;
  position: absolute;
  opacity: 0.5;
  padding-left: 8px;
}
.jj j2-dropfield .control-content > .dropdown-menu {
  width: 100%;
  padding: 0;
  overflow: auto;
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group {
  cursor: pointer;
  width: 100%;
  max-height: 240px;
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item {
  padding: 5px;
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .avatar {
  height: 1.25rem;
  width: 1.25rem;
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.selected {
  opacity: 0.5;
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item * {
  pointer-events: none;
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: initial;
  text-rendering: auto;
  content: "";
  width: 24px;
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.VARCHAR::before {
  content: "\F031";
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.DATETIME::before {
  content: "\F073";
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.DATE::before {
  content: "\F073";
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.DOUBLE::before {
  content: "\F295";
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.MEMO::before {
  content: "\F036";
}
.jj j2-dropfield .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.CLOB::before {
  content: "\F036";
}
.jj j2-dropfield .control-content > .dropdown-menu .help-block {
  left: 3px;
}
.jj j2-dropfield.vertical .input-group {
  display: flex;
  flex-direction: row;
}
.jj j2-dropfield.vertical .input-group .tag-items {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.jj j2-dropfield.vertical .input-group .tag-control {
  flex-grow: 0;
}
.jj j2-dropfield[readonly] .tag-items,
.jj j2-dropfield[readonly2] .tag-items {
  background-color: var(--light);
}
.jj j2-dropfield[readonly] .tag-items .tag-control,
.jj j2-dropfield[readonly2] .tag-items .tag-control,
.jj j2-dropfield[readonly] .tag-items .close,
.jj j2-dropfield[readonly2] .tag-items .close {
  display: none;
}
.jj j2-dropfield[readonly] .btn-eraser,
.jj j2-dropfield[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj j2-dropfield[readonly] .control-content .form-control,
.jj j2-dropfield[readonly2] .control-content .form-control {
  min-height: 22px!important;
}
.jj td j2-dropuser .control-content .input-group {
  min-height: auto;
  flex-wrap: wrap;
  align-items: center;
}
.jj td j2-dropuser .control-content .input-group .input-group-prepend .input-group-text.btn-picker {
  padding: 6px;
  position: absolute;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
  z-index: 10;
}
.jj td j2-dropuser .control-content .input-group .form-control {
  padding: 0 23px;
  overflow: auto;
  flex-wrap: wrap;
  min-height: fit-content;
}
.jj td j2-dropuser .control-content .input-group .form-control::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item {
  display: flex!important;
  flex-flow: nowrap!important;
  padding: 0 0.3rem !important;
  align-items: center!important;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item img.rounded-circle {
  width: 1rem;
  height: 1rem!important;
  margin-top: 0;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item button.close {
  line-height: 1rem;
}
.jj td j2-dropuser .control-content .input-group .input-group-text.btn-eraser {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj td j2-dropuser .control-content .dropdown-menu {
  width: 260px!important;
}
.jj td j2-dropuser .control-content .dropdown-menu .form-group {
  padding: 5px 0 0 30px;
}
@media (max-width: 1200px) {
  .jj j2-dropuser .control-content > .input-group .tag-items {
    width: 1%!important;
  }
}

/* ==JJItemDropField.720.class End ================ */




/* ==JJItemDropCountry.720.class Start ================ */
/* ==JJItemDropCountry.720.class================ */
.jj j2-dropcountry .control-content {
  position: relative;
}
.jj j2-dropcountry .control-content .input-group {
  flex-wrap: nowrap;
}
.jj j2-dropcountry .control-content .input-group > input {
  display: none;
}
.jj j2-dropcountry .control-content .input-group .input-group-text.btn-eraser {
  pointer-events: auto;
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.jj j2-dropcountry .control-content > .input-group {
  white-space: break-spaces;
  min-height: 33px;
  overflow: hidden;
  white-space: nowrap;
  overflow: auto;
}
.jj j2-dropcountry .control-content > .input-group .form-control.jj-sortable span.code-item {
  pointer-events: all!important;
}
.jj j2-dropcountry .control-content > .input-group .tag-items {
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  height: auto;
  min-height: 33px;
  width: 1%;
}
.jj j2-dropcountry .control-content > .input-group .tag-items .code-item {
  display: inline-block;
  margin: 0.05rem 0.2rem 0.05rem 0;
  padding: 0.15rem 2rem 0.15rem 0.3rem;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.jj j2-dropcountry .control-content > .input-group .tag-items .code-item .avatar {
  margin-top: -0.3rem;
  height: 1.25rem;
  width: 1.25rem;
}
.jj j2-dropcountry .control-content > .input-group .tag-items .code-item button.close {
  font-size: 1.2rem;
  height: 100%;
  padding: 0 0.5rem 0.2rem;
}
.jj j2-dropcountry .control-content > .input-group .tag-items .code-item button.close * {
  pointer-events: none;
}
.jj j2-dropcountry .control-content > .input-group .tag-items:empty:before {
  content: attr(placeholder);
  margin-top: 4px;
  position: absolute;
  opacity: 0.5;
  padding-left: 8px;
}
.jj j2-dropcountry .control-content > .dropdown-menu {
  width: 100%;
  padding: 0;
  overflow: auto;
}
.jj j2-dropcountry .control-content > .dropdown-menu .dropdown-item-group {
  background: #F1F5F7;
  padding-top: 32px;
  overflow: overlay;
  cursor: pointer;
  width: 100%;
}
.jj j2-dropcountry .control-content > .dropdown-menu .dropdown-item-group .dropdown-item {
  padding: 0.6rem 1.2rem;
}
.jj j2-dropcountry .control-content > .dropdown-menu .dropdown-item-group .avatar {
  height: 1.25rem;
  width: 1.25rem;
}
.jj j2-dropcountry .control-content > .dropdown-menu .dropdown-item-group .dropdown-item.selected {
  opacity: 0.5;
}
.jj j2-dropcountry .control-content > .dropdown-menu .dropdown-item-group .dropdown-item * {
  pointer-events: none;
}
.jj j2-dropcountry .control-content > .dropdown-menu .help-block {
  left: 16px;
  top: 40px;
}
.jj j2-dropcountry .control-content > .dropdown-menu .form-group {
  margin-bottom: 0;
}
.jj j2-dropcountry .control-content > .dropdown-menu .form-group .form-control.search {
  border: 0;
  border-radius: 0;
}
.jj j2-dropcountry.vertical .input-group {
  display: flex;
  flex-direction: row;
}
.jj j2-dropcountry.vertical .input-group .tag-items {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.jj j2-dropcountry.vertical .input-group .tag-control {
  flex-grow: 0;
}
.jj j2-dropcountry[readonly] .tag-items,
.jj j2-dropcountry[readonly2] .tag-items {
  background-color: var(--light);
}
.jj j2-dropcountry[readonly] .tag-items .tag-control,
.jj j2-dropcountry[readonly2] .tag-items .tag-control,
.jj j2-dropcountry[readonly] .tag-items .close,
.jj j2-dropcountry[readonly2] .tag-items .close {
  display: none;
}
.jj j2-dropcountry[readonly] .btn-eraser,
.jj j2-dropcountry[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj j2-dropcountry[readonly] .control-content .form-control,
.jj j2-dropcountry[readonly2] .control-content .form-control {
  min-height: 22px!important;
}
.jj td j2-dropuser .control-content .input-group {
  min-height: auto;
  flex-wrap: wrap;
  align-items: center;
}
.jj td j2-dropuser .control-content .input-group .input-group-prepend .input-group-text.btn-picker {
  padding: 6px;
  position: absolute;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
  z-index: 10;
}
.jj td j2-dropuser .control-content .input-group .form-control {
  padding: 0 23px;
  overflow: auto;
  flex-wrap: wrap;
  min-height: fit-content;
}
.jj td j2-dropuser .control-content .input-group .form-control::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item {
  display: flex!important;
  flex-flow: nowrap!important;
  padding: 0 0.3rem !important;
  align-items: center!important;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item img.rounded-circle {
  width: 1rem;
  height: 1rem!important;
  margin-top: 0;
}
.jj td j2-dropuser .control-content .input-group .form-control .code-item button.close {
  line-height: 1rem;
}
.jj td j2-dropuser .control-content .input-group .input-group-text.btn-eraser {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj td j2-dropuser .control-content .dropdown-menu {
  width: 260px!important;
}
.jj td j2-dropuser .control-content .dropdown-menu .form-group {
  padding: 5px 0 0 30px;
}
@media (max-width: 1200px) {
  .jj j2-dropuser .control-content > .input-group .tag-items {
    width: 1%!important;
  }
}

/* ==JJItemDropCountry.720.class End ================ */




/* ==JJItemFile.720.class Start ================ */
/* ==JJItemFile.720.class================ */
.jj j2-file.j2-item {
  position: relative;
  min-height: 62px;
  height: 287px;
}
.jj j2-file.j2-item .control-content {
  height: 104px;
  flex-grow: 1;
  width: 100%;
  height: auto;
  background-color: white;
}
.jj j2-file.j2-item .control-content .input-group {
  flex-wrap: nowrap;
}
.jj j2-file.j2-item .control-content .jj-attch {
  height: 100%;
  width: 100%;
  min-height: inherit;
}
.jj j2-file.j2-item .control-content .jj-attch .attch-file {
  height: calc(100% - 30px);
  overflow: auto;
  position: absolute;
  bottom: 0;
}
.jj j2-file.j2-item .control-content .jj-attch .attch-file .table td button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj j2-file.j2-item .control-content .jj-attch .attch-file .table td:last-child {
  padding: 0;
  vertical-align: middle;
}
.jj j2-file.j2-item .control-content .jj-attch .attch-file .table td:last-child > div.btn-group {
  height: 22px;
}
.jj j2-file.j2-item .control-content .jj-attch .attch-file .table td:last-child > div.btn-group > button {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jj j2-file.j2-item .control-content .jj-attch .attch-file .table td:last-child button {
  width: 28px;
}
.jj j2-file.j2-item .control-content .jj-attch .btn-group > button {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jj j2-file.j2-item .control-content .icon-group {
  display: none;
}
.jj j2-file.j2-item .control-content .input-area {
  background: var(--light);
  border: 1px solid #ccc;
  top: 0;
  position: absolute;
  height: 33px;
}
.jj j2-file.j2-item .control-content .input-area .btn-picker {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0;
  border: 0;
}
.jj j2-file.j2-item .control-content .input-area .btn-picker > button {
  border-left: 1px solid #ccc;
  padding: 0.38rem 0.9rem;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px;
}
.jj j2-file.j2-item .control-content .input-area .btn-picker > button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj j2-file.j2-item .control-content .input-area .btn-picker .file-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj j2-file.j2-item[readonly] .btn-picker,
.jj j2-file.j2-item[readonly2] .btn-picker,
.jj j2-file.j2-item[readonly] .btn-eraser,
.jj j2-file.j2-item[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj j2-file.j2-item[readonly] .jj-attch,
.jj j2-file.j2-item[readonly2] .jj-attch {
  height: 100%;
  background-color: var(--light);
}
.jj j2-file.j2-item[readonly] .jj-attch .post a,
.jj j2-file.j2-item[readonly2] .jj-attch .post a {
  pointer-events: auto;
}
.jj j2-file.j2-item[readonly] .jj-attch button[data-remove-index],
.jj j2-file.j2-item[readonly2] .jj-attch button[data-remove-index] {
  pointer-events: none;
  display: none;
}
.jj j2-file.j2-item[readonly] .jj-attch .btn-group button[title="Preview"],
.jj j2-file.j2-item[readonly2] .jj-attch .btn-group button[title="Preview"],
.jj j2-file.j2-item[readonly] .jj-attch .btn-group button[title="Share"],
.jj j2-file.j2-item[readonly2] .jj-attch .btn-group button[title="Share"] {
  pointer-events: auto;
}
.jj j2-file.j2-item[readonly] .jj-attch .btn-group button[title="Delete"],
.jj j2-file.j2-item[readonly2] .jj-attch .btn-group button[title="Delete"] {
  visibility: hidden;
}
.jj j2-file.j2-item i.td-file-link {
  position: relative;
}
.jj j2-file.j2-item i.td-file-link .badge {
  position: absolute;
  right: -10px;
  top: -8px;
  font-size: 10px;
}
.jj .jj-proxy-grid td j2-file.j2-item {
  height: 22px!important;
  min-height: 22px!important;
}
.jj .jj-proxy-grid td j2-file.j2-item label.control-label {
  display: none;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content {
  display: flex;
  background-color: transparent;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 0px;
  color: #000;
  top: 0;
  border: none;
  background-color: transparent;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content div.jj-attch,
.jj .jj-proxy-grid td j2-file.j2-item div.control-content span.help-block {
  display: none;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content div.icon-group {
  width: 100%;
  display: block;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content div.icon-group i {
  padding-top: 6px;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content .input-area {
  position: initial!important;
  height: 22px!important;
  overflow-y: hidden;
  overflow-x: auto;
  display: contents;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content .input-area::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content .input-area .btn-group {
  position: initial!important;
  height: 22px!important;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content .input-area .btn-group button {
  height: 22px!important;
  padding: 0.2rem 0.4rem !important;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content .input-area .btn-group button i {
  font-size: 14px !important;
}
.jj .jj-proxy-grid td j2-file.j2-item div.control-content:hover .btn-picker {
  top: 0;
  right: 0;
  padding: 0;
  z-index: 10!important;
}
.jj .print-on j2-file.j2-item div.jj-attch {
  border: none!important;
}
.jj .jj-data-form.form-box td j2-file.j2-item {
  height: auto;
}
.jj .jj-data-form.form-box td j2-file.j2-item .control-content {
  min-height: 22px;
}
.jj .jj-data-form.form-box j2-file.j2-item {
  height: 136px;
  min-height: 136px;
}
.jj .jj-data-form.form-box j2-file.j2-item .control-content {
  width: 1%;
}
.jj .jj-data-form.form-box j2-file.j2-item .control-content div.jj-attch {
  border: 0;
}

/* ==JJItemFile.720.class End ================ */




/* ==JJItemFileOne.720.class Start ================ */
/* ==JJItemFileOne.720.class================ */
.jj j2-fileone.j2-item .form-control {
  border-right: none;
}
.jj j2-fileone.j2-item .form-control.win-drag {
  background-color: yellow;
}
.jj j2-fileone.j2-item .control-content .input-group {
  flex-wrap: nowrap;
}
.jj j2-fileone.j2-item .icon-group {
  display: none;
}
.jj j2-fileone.j2-item .btn-download2 {
  display: none;
}
.jj j2-fileone.j2-item .input-group-text.btn-eraser {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.jj j2-fileone.j2-item[readonly] .input-group-text.btn-download,
.jj j2-fileone.j2-item[readonly2] .input-group-text.btn-download {
  pointer-events: auto;
}
.jj j2-fileone.j2-item[readonly] .btn-picker,
.jj j2-fileone.j2-item[readonly2] .btn-picker,
.jj j2-fileone.j2-item[readonly] .btn-eraser,
.jj j2-fileone.j2-item[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj j2-fileone.j2-item[readonly] .form-control,
.jj j2-fileone.j2-item[readonly2] .form-control {
  border-right: 1px solid #ced4da;
}
.jj j2-fileone.j2-item.min .btn-eraser,
.jj j2-fileone.j2-item.min .btn-viewer {
  display: none;
}
.jj .jj-proxy-grid td j2-fileone.j2-item label.control-label {
  display: none;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 0px;
  color: #000;
  top: 0;
  border: none;
  background-color: transparent;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .input-group {
  height: 22px;
  overflow-y: hidden;
  overflow-x: auto;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .input-group::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .input-group > div.input-group-prepend:first-child {
  display: none;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .input-group input.form-control {
  display: none;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content span.help-block {
  display: none;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content div.icon-group {
  width: 100%;
  display: block;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content div.icon-group i {
  padding-top: 6px;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .btn-group.btn-picker {
  position: initial!important;
  z-index: 0!important;
  opacity: 1!important;
  transition: all 0.2s ease-out;
  top: -50px;
  right: 0px;
  color: white;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .btn-group.btn-picker .input-group-text.btn-picker {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .btn-group.btn-picker .input-group-text.btn-eraser {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .btn-group.btn-picker button.input-group-text {
  background: var(--light) !important;
  color: #323a46 !important;
  display: block;
  border-radius: 0;
  border-color: #ccc !important;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .btn-group.btn-picker button.input-group-text i {
  font-size: 14px !important;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content .btn-group.btn-picker button.input-group-text:hover {
  background-color: #5a6268;
  border-color: #545b62;
}
.jj .jj-proxy-grid td j2-fileone.j2-item div.control-content:hover .btn-group.btn-picker {
  top: 0;
  right: 0;
  padding: 0;
  z-index: 10!important;
}
.jj .print-on j2-fileone.j2-item div.control-content div.input-group-prepend {
  display: none;
}

/* ==JJItemFileOne.720.class End ================ */




/* ==JJItemFormula.720.class Start ================ */
/* ==JJItemFormula.720.class================ */
.jj j2-formula .control-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-formula .control-content label.form-control {
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj j2-formula .control-content .form-control {
  border: 1px solid #ced4da;
  background-color: var(--light);
  text-align: right;
}
.jj j2-formula[rows] .control-content {
  word-break: break-all;
  white-space: break-spaces;
}
.jj j2-formula[rows] .control-content label.form-control {
  overflow: auto;
}
.jj j2-formula[text-align="text-left"] .form-control {
  text-align: left;
}
.jj j2-formula[text-align="text-right"] .form-control {
  text-align: right;
}
.jj j2-formula[text-align="text-center"] .form-control {
  text-align: center;
}

/* ==JJItemFormula.720.class End ================ */




/* ==JJItemClobFile.720.class Start ================ */
/* ==JJItemClobFile.720.class================ */
.jj j2-fileclob.j2-item .form-control {
  border-right: none;
}
.jj j2-fileclob.j2-item .form-control.win-drag {
  background-color: yellow;
}
.jj j2-fileclob.j2-item .icon-group {
  display: none;
  flex-wrap: nowrap;
}
.jj j2-fileclob.j2-item .btn-download2 {
  display: none;
}
.jj j2-fileclob.j2-item .input-group {
  flex-wrap: nowrap;
}
.jj j2-fileclob.j2-item .input-group-text.btn-eraser {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.jj j2-fileclob.j2-item[readonly] .input-group-text.btn-download,
.jj j2-fileclob.j2-item[readonly2] .input-group-text.btn-download {
  pointer-events: auto;
}
.jj j2-fileclob.j2-item[readonly] .btn-picker,
.jj j2-fileclob.j2-item[readonly2] .btn-picker,
.jj j2-fileclob.j2-item[readonly] .btn-eraser,
.jj j2-fileclob.j2-item[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj j2-fileclob.j2-item[readonly] .form-control,
.jj j2-fileclob.j2-item[readonly2] .form-control {
  border-right: 1px solid #ced4da;
}
.jj td j2-fileone.j2-item label.control-label {
  display: none;
}
.jj td j2-fileone.j2-item div.control-content .input-group > div.input-group-prepend:first-child {
  display: none;
}
.jj td j2-fileone.j2-item div.control-content .input-group input.form-control {
  display: none;
}
.jj td j2-fileone.j2-item div.control-content span.help-block {
  display: none;
}
.jj td j2-fileone.j2-item div.control-content div.icon-group {
  display: block;
}
.jj td j2-fileone.j2-item div.control-content .btn-group.btn-picker {
  position: absolute;
  z-index: -10;
  opacity: 0.7;
  transition: all 0.2s ease-out;
  top: -50px;
  right: 0px;
  color: white;
}
.jj td j2-fileone.j2-item div.control-content .btn-group.btn-picker .input-group-text.btn-picker {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.jj td j2-fileone.j2-item div.control-content .btn-group.btn-picker .input-group-text.btn-eraser {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.jj td j2-fileone.j2-item div.control-content .btn-group.btn-picker button.input-group-text {
  color: #fff;
  display: block;
  border-radius: 0;
  background-color: #6c757d;
  border-color: #6c757d;
}
.jj td j2-fileone.j2-item div.control-content .btn-group.btn-picker button.input-group-text:hover {
  background-color: #5a6268;
  border-color: #545b62;
}
.jj td j2-fileone.j2-item div.control-content:hover .btn-group.btn-picker {
  top: 0;
  right: 0;
  padding: 0;
  z-index: 10!important;
}
.jj .print-on j2-fileone.j2-item div.control-content div.input-group-prepend {
  display: none;
}

/* ==JJItemClobFile.720.class End ================ */




/* ==JJItemCalc.720.class Start ================ */
/* ==JJItemCalc.720.class================ */
.jj j2-calc .control-content {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-calc .control-content label.form-control {
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj j2-calc .control-content .form-control {
  border: 1px solid #ced4da;
  background-color: var(--light);
  text-align: right;
}
.jj j2-calc[rows] .control-content {
  word-break: break-all;
  white-space: break-spaces;
}
.jj j2-calc[rows] .control-content label.form-control {
  overflow: auto;
}
.jj j2-calc[text-align="text-left"] .form-control {
  text-align: left;
}
.jj j2-calc[text-align="text-right"] .form-control {
  text-align: right;
}
.jj j2-calc[text-align="text-center"] .form-control {
  text-align: center;
}

/* ==JJItemCalc.720.class End ================ */




/* ==JJItemGMap.720.class Start ================ */
/* ==JJItemGMap.720.class================ */
.jj j2-gmap.j2-item {
  position: relative;
}
.jj j2-gmap.j2-item .control-content {
  flex-grow: 1;
  height: 206px;
}
.jj j2-gmap.j2-item .control-content .form-viewer {
  min-height: 38px;
  height: calc(100% - 38px);
  flex-grow: 1;
}

/* ==JJItemGMap.720.class End ================ */




/* ==JJItemGallery.720.class Start ================ */
/* ==JJItemGallery.720.class================ */
.jj j2-gallery.j2-item[readonly] .btn-picker {
  pointer-events: none;
}

/* ==JJItemGallery.720.class End ================ */




/* ==JJItemIcon.720.class Start ================ */
/* ==JJItemIcon.720.class================ */
.jj j2-icon.j2-item .input-group-text.btn-picker i {
  font-size: 0.9rem !important;
}
.jj j2-icon.j2-item .input-group-text.btn-eraser {
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.jj j2-icon.j2-item input.form-control {
  pointer-events: none;
}
.jj j2-icon.j2-item .control-content .input-group {
  flex-wrap: nowrap;
}
.jj j2-icon.j2-item[readonly] .btn-picker,
.jj j2-icon.j2-item[readonly2] .btn-picker {
  pointer-events: none;
}
.jj j2-icon.j2-item[readonly] .btn-eraser,
.jj j2-icon.j2-item[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj .print-on j2-icon.j2-item a.input-group-text {
  border: none;
}

/* ==JJItemIcon.720.class End ================ */




/* ==JJItemImage.720.class Start ================ */
/* ==JJItemImage.720.class================ */
.jj j2-image.j2-item {
  position: relative;
  overflow: visible;
  min-height: 62px;
  height: 287px;
  overflow: hidden;
}
.jj j2-image.j2-item .control-content {
  flex-grow: 1;
  height: auto;
  min-height: 33px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  resize: none;
}
.jj j2-image.j2-item .control-content img {
  padding-top: 33px;
  width: unset!important;
  height: 100%!important;
  overflow: hidden;
  position: absolute;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%);
}
.jj j2-image.j2-item .control-content img:after {
  position: absolute;
}
.jj j2-image.j2-item .control-content .btn-area {
  height: 33px;
  border-bottom: 1px solid #ccc;
  position: relative;
  background: var(--light);
}
.jj j2-image.j2-item .control-content .btn-area .btn-group {
  position: absolute;
  right: 0;
  color: white;
}
.jj j2-image.j2-item .control-content .btn-area .btn-group .btn {
  border-left: 1px solid #ccc;
  padding: 0.42rem 0.9rem;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}
.jj j2-image.j2-item .control-content .btn-area .btn-group .btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj j2-image.j2-item .control-content .btn-area .help-block {
  top: 0;
}
.jj j2-image.j2-item.h .control-content img {
  height: 100%;
  width: auto;
}
.jj j2-image.j2-item[readonly] img,
.jj j2-image.j2-item[readonly2] img {
  pointer-events: none;
}
.jj j2-image.j2-item[readonly] .btn-search,
.jj j2-image.j2-item[readonly2] .btn-search,
.jj j2-image.j2-item[readonly] .btn-eraser,
.jj j2-image.j2-item[readonly2] .btn-eraser,
.jj j2-image.j2-item[readonly] .btn-picker,
.jj j2-image.j2-item[readonly2] .btn-picker,
.jj j2-image.j2-item[readonly] .btn-clipboard,
.jj j2-image.j2-item[readonly2] .btn-clipboard {
  display: none;
}
.jj j2-image.j2-item[readonly] .btn-group button.btn-picker,
.jj j2-image.j2-item[readonly2] .btn-group button.btn-picker,
.jj j2-image.j2-item[readonly] .btn-group button.btn-clipboard,
.jj j2-image.j2-item[readonly2] .btn-group button.btn-clipboard,
.jj j2-image.j2-item[readonly] .btn-group button.btn-search,
.jj j2-image.j2-item[readonly2] .btn-group button.btn-search,
.jj j2-image.j2-item[readonly] .btn-group button.btn-eraser,
.jj j2-image.j2-item[readonly2] .btn-group button.btn-eraser {
  display: none!important;
}
.jj j2-image.j2-item.win-drag img {
  opacity: 0.7;
}
.jj .form-box j2-image {
  min-height: 240px!important;
}
.jj .form-box j2-image .control-content {
  border: none;
  border-radius: unset;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image {
  height: 22px!important;
  min-height: 22px!important;
  float: none;
  display: block;
  background-color: transparent!important;
  border: none!important;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content {
  border: none!important;
  min-height: 0!important;
  display: flex;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content img {
  flex-grow: 1;
  padding-top: 0 !important;
  height: 22px!important;
  display: block;
  margin: auto 0;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 0px;
  color: #000;
  top: 0;
  border: none;
  background-color: transparent;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area {
  height: 22px;
  overflow-x: auto;
  overflow-y: hidden;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area div.btn-group {
  width: 100%;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area div.btn-group button {
  height: 22px!important;
  padding: 0.2rem 0.4rem !important;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area div.btn-group button i {
  font-size: 14px !important;
}

/* ==JJItemImage.720.class End ================ */




/* ==JJItemSign.720.class Start ================ */
/* ==JJItemSign.720.class================ */
.jj j2-sign.j2-item {
  position: relative;
  overflow: visible;
  min-height: 62px;
  height: 287px;
  overflow: hidden;
}
.jj j2-sign.j2-item .control-content {
  flex-grow: 1;
  height: auto;
  min-height: 33px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  resize: none;
}
.jj j2-sign.j2-item .control-content img {
  padding-top: 33px;
  width: 100%!important;
  height: 100%!important;
  overflow: hidden;
  position: absolute;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%);
}
.jj j2-sign.j2-item .control-content img:after {
  position: absolute;
}
.jj j2-sign.j2-item .control-content .btn-area {
  height: 33px;
  border-bottom: 1px solid #ccc;
  position: relative;
  background: var(--light);
}
.jj j2-sign.j2-item .control-content .btn-area .btn-group {
  position: absolute;
  right: 0;
  color: white;
}
.jj j2-sign.j2-item .control-content .btn-area .btn-group .btn {
  border-left: 1px solid #ccc;
  padding: 0.42rem 0.9rem;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}
.jj j2-sign.j2-item .control-content .btn-area .btn-group .btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
}
.jj j2-sign.j2-item .control-content .btn-area .help-block {
  top: 0;
}
.jj j2-sign.j2-item.h .control-content img {
  height: 100%;
  width: auto;
}
.jj j2-sign.j2-item[readonly] img,
.jj j2-sign.j2-item[readonly2] img {
  pointer-events: none;
}
.jj j2-sign.j2-item[readonly] .btn-search,
.jj j2-sign.j2-item[readonly2] .btn-search,
.jj j2-sign.j2-item[readonly] .btn-eraser,
.jj j2-sign.j2-item[readonly2] .btn-eraser,
.jj j2-sign.j2-item[readonly] .btn-picker,
.jj j2-sign.j2-item[readonly2] .btn-picker,
.jj j2-sign.j2-item[readonly] .btn-clipboard,
.jj j2-sign.j2-item[readonly2] .btn-clipboard {
  display: none;
}
.jj j2-sign.j2-item[readonly] .btn-group button,
.jj j2-sign.j2-item[readonly2] .btn-group button {
  display: none!important;
}
.jj j2-sign.j2-item.win-drag img {
  opacity: 0.7;
}
.jj .form-box j2-image {
  min-height: 240px!important;
}
.jj .form-box j2-image .control-content {
  border: none;
  border-radius: unset;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image {
  height: 22px!important;
  min-height: 22px!important;
  float: none;
  display: block;
  background-color: transparent!important;
  border: none!important;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content {
  border: none!important;
  min-height: 0!important;
  display: flex;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content img {
  flex-grow: 1;
  padding-top: 0 !important;
  height: 22px!important;
  display: block;
  margin: auto 0;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 0px;
  color: #000;
  top: 0;
  border: none;
  background-color: transparent;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area {
  height: 22px;
  overflow-x: auto;
  overflow-y: hidden;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area div.btn-group {
  width: 100%;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area div.btn-group button {
  height: 22px!important;
  padding: 0.2rem 0.4rem !important;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content div.btn-area div.btn-group button i {
  font-size: 14px !important;
}

/* ==JJItemSign.720.class End ================ */




/* ==JJItemKMap.720.class Start ================ */
/* ==JJItemKMap.720.class================ */
.jj j2-kmap.j2-item {
  height: 287px;
  min-height: 137px;
  position: relative;
}
.jj j2-kmap.j2-item .control-content {
  flex-grow: 1;
  align-items: center;
  height: 206px;
}
.jj j2-kmap.j2-item .control-content .form-viewer {
  min-height: 38px;
  height: calc(100% - 38px);
  flex-grow: 1;
}
.jj td j2-kmap.j2-item {
  height: 22px;
  min-height: 22px!important;
}
.jj td j2-kmap.j2-item .control-content {
  display: flex;
}
.jj td j2-kmap.j2-item .control-content .form-control {
  overflow: hidden;
  padding-right: 23px;
}
.jj td j2-kmap.j2-item .control-content .dropdown-menu {
  display: none;
}
.jj td j2-kmap.j2-item .control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 0px;
  color: #000;
  top: 3px;
  border: none;
  background-color: transparent;
}

/* ==JJItemKMap.720.class End ================ */




/* ==JJItemLabel.720.class Start ================ */
/* ==JJItemLabel.720.class================ */
.jj j2-label.j2-item .control-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-label.j2-item .control-content label.form-control {
  min-height: 38px;
  overflow: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj j2-label.j2-item .control-content .form-control {
  border-color: transparent;
}
.jj j2-label.j2-item[rows] .control-content {
  word-break: break-all;
  white-space: break-spaces;
}
.jj j2-label.j2-item[rows] .control-content label.form-control {
  overflow: auto;
}

/* ==JJItemLabel.720.class End ================ */




/* ==JJItemMp4.720.class Start ================ */
/* ==JJItemMp4.720.class================ */
.jj {
  /**
* 프린트 모드 설정
*/
}
.jj j2-mp4.j2-item {
  min-width: 25%;
  height: 287px;
  min-height: 137px;
}
.jj j2-mp4.j2-item .control-content {
  position: relative;
  overflow: hidden;
  background: #000;
}
.jj j2-mp4.j2-item .control-content video {
  padding-top: 33px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.jj j2-mp4.j2-item .control-content .print-thumbnail {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jj j2-mp4.j2-item .control-content .icon-group {
  display: none;
}
.jj j2-mp4.j2-item .control-content .btn-area {
  border: 1px solid #ccc;
  width: 100%;
  display: flex;
  justify-content: end;
  background: #F1F5F7;
  position: relative;
}
.jj j2-mp4.j2-item .control-content .btn-area .btn-group > button {
  border-left: 1px solid #ccc;
  padding: 0.42rem 0.9rem;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}
.jj j2-mp4.j2-item .control-content .btn-area .btn-group i {
  pointer-events: none;
}
.jj j2-mp4.j2-item .control-content .help-block {
  top: 0;
}
.jj j2-mp4.j2-item .control-content:hover {
  cursor: pointer;
}
.jj j2-mp4.j2-item .control-content.no-hover:hover {
  cursor: auto;
}
.jj j2-mp4.j2-item .control-content::after {
  content: "\f04b";
  display: block;
  background: var(--primary);
  font-size: 22px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'FontAwesome';
  padding: 10px 30px;
  border-radius: 20px;
}
.jj j2-mp4.j2-item .control-content.no-after::after {
  content: none;
}
.jj j2-mp4.j2-item[readonly] img,
.jj j2-mp4.j2-item[readonly2] img {
  pointer-events: none;
}
.jj j2-mp4.j2-item[readonly] .btn-eraser,
.jj j2-mp4.j2-item[readonly2] .btn-eraser,
.jj j2-mp4.j2-item[readonly] .btn-picker,
.jj j2-mp4.j2-item[readonly2] .btn-picker,
.jj j2-mp4.j2-item[readonly] .btn-clipboard,
.jj j2-mp4.j2-item[readonly2] .btn-clipboard {
  display: none;
}
.jj j2-mp4.j2-item[readonly] .btn-group button,
.jj j2-mp4.j2-item[readonly2] .btn-group button {
  visibility: hidden;
}
.jj td j2-mp4.j2-item {
  height: 22px!important;
  min-height: 22px;
}
.jj td j2-mp4.j2-item .control-content {
  display: flex;
  background: transparent;
}
.jj td j2-mp4.j2-item .control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 0px;
  color: #000;
  top: 0;
  border: none;
  background-color: transparent;
}
.jj td j2-mp4.j2-item .control-content video {
  display: none;
}
.jj td j2-mp4.j2-item .control-content div.icon-group {
  width: 100%;
  display: block;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.jj td j2-mp4.j2-item .control-content div.icon-group i {
  padding-top: 6px;
}
.jj td j2-mp4.j2-item .control-content .btn-area {
  height: 22px;
  position: initial!important;
}
.jj td j2-mp4.j2-item .control-content .btn-area .btn-group {
  overflow-x: auto;
  overflow-y: hidden;
}
.jj td j2-mp4.j2-item .control-content .btn-area .btn-group::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj td j2-mp4.j2-item .control-content .btn-area button {
  height: 22px!important;
  padding: 0.2rem 0.4rem !important;
}
.jj td j2-mp4.j2-item .control-content .btn-area button i {
  font-size: 14px !important;
}
.jj td j2-mp4.j2-item .control-content::after {
  display: none;
}
.jj .print-on j2-mp4.j2-item div.control-content video {
  display: none;
}
.jj .print-on j2-mp4.j2-item div.control-content .print-thumbnail {
  display: block;
}
.jj .form-box j2-mp4.j2-item {
  height: 135px;
}
.jj .form-box j2-mp4.j2-item .control-content {
  height: 135px;
}

/* ==JJItemMp4.720.class End ================ */




/* ==JJItemNumber.720.class Start ================ */
/* ==JJItemNumber.720.class================ */
.jj j2-number.j2-item .control-content .form-control {
  text-align: right;
}

/* ==JJItemNumber.720.class End ================ */




/* ==JJItemCurrency.720.class Start ================ */
/* ==JJItemCurrency.720.class================ */
.jj j2-currency.j2-item .control-content .form-control {
  text-align: right;
}

/* ==JJItemCurrency.720.class End ================ */




/* ==JJItemDial.720.class Start ================ */
/* ==JJItemDial.720.class================ */
.jj j2-dial.j2-item {
  min-width: 25%;
  position: relative;
  overflow: hidden;
  min-height: 212px;
}
.jj j2-dial.j2-item .control-content {
  flex-grow: 1;
  min-height: 212px;
  overflow: hidden;
  position: relative;
}
.jj j2-dial.j2-item .control-content .form-control {
  min-height: 38px;
  width: 130px;
  height: 130px;
  padding: 0;
  background-color: transparent!important;
  border: none;
  margin: 0 auto;
}
.jj j2-dial.j2-item .control-content .form-control .dial {
  background-color: white;
}
.jj j2-dial.j2-item .control-content .form-control .dial .mark {
  background-color: var(--primary);
}
.jj j2-dial.j2-item .control-content .help-block {
  top: 0;
  right: 0;
}
.jj j2-dial.j2-item[readonly] .dial,
.jj j2-dial.j2-item[readonly2] .dial {
  background-color: var(--light) !important;
}
.jj j2-dial.j2-item[readonly] .dial .mark,
.jj j2-dial.j2-item[readonly2] .dial .mark {
  background-color: var(--secondary) !important;
  pointer-events: none;
}
.jj .print-on j2-dial.j2-item div.mark {
  border: 2px solid var(--primary);
}

/* ==JJItemDial.720.class End ================ */




/* ==JJItemFloat.720.class Start ================ */
/* ==JJItemFloat.720.class================ */
.jj j2-float.j2-item .control-content .form-control {
  text-align: right;
}

/* ==JJItemFloat.720.class End ================ */




/* ==JJItemGauge.720.class Start ================ */
/* ==JJItemGauge.720.class================ */
.jj j2-gauge.j2-item {
  position: relative;
  min-height: 137px;
}
.jj j2-gauge.j2-item .control-content {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 38px;
}
.jj j2-gauge.j2-item .control-content:hover .btn-group {
  top: 0;
}
.jj j2-gauge.j2-item .control-content > .form-control {
  flex: none;
}
.jj j2-gauge.j2-item .control-content > jj-gauge {
  flex-grow: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 33px;
  overflow: hidden;
}
.jj j2-gauge.j2-item .control-content > jj-gauge canvas {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.jj j2-gauge.j2-item .control-content .help-block {
  top: 33px;
}

/* ==JJItemGauge.720.class End ================ */




/* ==JJItemRange.720.class Start ================ */
/* ==JJItemRange.720.class================ */
.jj {
  /*
* https://okayoon.tistory.com/entry/input-%ED%83%80%EC%9E%85-range-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%8A%A4%ED%83%80%EC%9D%BC
https://www.w3schools.com/howto/howto_js_rangeslider.asp
*/
}
.jj j2-range.j2-item {
  min-width: 25%;
}
.jj j2-range.j2-item .input-group {
  flex-wrap: nowrap;
}
.jj j2-range.j2-item .input-group .input-group-prepend .input-group-text {
  width: 100%;
  display: block;
}
.jj j2-range.j2-item input[type='range'] {
  margin: 0;
  background-color: white;
  min-height: 33px;
}
.jj j2-range.j2-item[readonly] .form-control {
  pointer-events: none;
}
.jj .print-on j2-range.j2-item span.input-group-text {
  border: none;
}
.jj .print-on j2-range.j2-item input[type='range']::-webkit-slider-thumb {
  border: 2px solid var(--primary);
}
.jj .print-on j2-range.j2-item input[type='range']::-moz-range-thumb {
  border: 2px solid var(--primary);
}
.jj .print-on j2-range.j2-item input[type='range']::-ms-thumb {
  border: 2px solid var(--primary);
}

/* ==JJItemRange.720.class End ================ */




/* ==JJItemPad.720.class Start ================ */
/* ==JJItemPad.720.class================ */
.jj j2-pad.j2-item {
  position: relative;
}
.jj j2-pad.j2-item .control-content {
  flex-grow: 1;
  height: 206px;
  overflow: hidden;
  position: relative;
}
.jj j2-pad.j2-item .control-content .form-control {
  height: 100%;
  min-height: 38px;
  width: 100%;
  padding: 0;
  background-color: transparent;
  border: none;
}
.jj j2-pad.j2-item .control-content .form-control .slider-pointer {
  color: var(--primary);
}
.jj j2-pad.j2-item .control-content .help-block {
  top: 0;
  right: 0;
}
.jj j2-pad.j2-item[readonly] .slider-pointer {
  color: var(--secondary) !important;
  pointer-events: none;
}
.jj .print-on j2-pad.j2-item .slider-pointer {
  border: 9px solid var(--primary);
  border-radius: 50%;
}
.jj .print-on j2-pad.j2-item .fa-soccer-ball-o:before,
.jj .print-on j2-pad.j2-item .fa-futbol-o:before {
  content: none;
}

/* ==JJItemPad.720.class End ================ */




/* ==JJItemQRPrint.720.class Start ================ */
/* ==JJItemQRPrint.720.class================ */
.jj j2-qrprint.j2-item {
  position: relative;
  min-height: 137px;
}
.jj j2-qrprint.j2-item .control-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.jj j2-qrprint.j2-item .control-content .form-control {
  border-bottom: none;
}
.jj j2-qrprint.j2-item .control-content .form-viewer {
  background: #F1F5F7;
  height: 100%;
  min-height: 38px;
  flex-grow: 1;
}
.jj j2-qrprint.j2-item .control-content .form-viewer img {
  width: unset!important;
  position: relative;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%);
  max-height: 98%!important;
  max-width: 98%!important;
}
.jj j2-qrprint.j2-item[readonly] .form-viewer {
  background-color: var(--light);
}
.jj .jj-proxy-grid table > tbody > tr > td j2-qrprint {
  height: 22px;
  min-height: 22px!important;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-qrprint div.control-content {
  flex-direction: row-reverse;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-qrprint div.control-content .form-viewer {
  height: 22px;
  min-height: 22px;
}

/* ==JJItemQRPrint.720.class End ================ */




/* ==JJItemQRRead.720.class Start ================ */
/* ==JJItemQRRead.720.class================ */
.jj j2-qrread.j2-item {
  position: relative;
}
.jj j2-qrread.j2-item .control-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 206px;
}
.jj j2-qrread.j2-item .control-content .form-viewer {
  height: 100%;
  min-height: 38px;
  flex-grow: 1;
  border: 1px solid #ccc;
  background-color: white;
  border-width: 0 1px 1px;
}
.jj j2-qrread.j2-item .control-content .form-viewer img {
  width: 100%;
}
.jj j2-qrread.j2-item[readonly] .form-viewer {
  background-color: var(--light);
}

/* ==JJItemQRRead.720.class End ================ */




/* ==JJItemRadio.720.class Start ================ */
/* ==JJItemRadio.720.class================ */
.jj j2-radio.j2-item .control-content .form-control {
  min-height: 33px;
  height: auto;
  padding: 3px;
  text-wrap: wrap;
  overflow: auto;
}
.jj j2-radio.j2-item .control-content .form-control::-webkit-scrollbar {
  height: 3px!important;
}
.jj j2-radio.j2-item .control-content .form-control .radio-label {
  margin-right: 1rem;
  margin-bottom: 0;
  text-wrap: nowrap;
  padding: 2px 4px 3px;
  border-radius: 10px;
  font-weight: normal;
}
.jj j2-radio.j2-item .control-content .form-control .radio-label t {
  padding: 0 5px;
}
.jj j2-radio.j2-item .control-content .form-control .radio-label:focus-within {
  outline: 1px solid var(--primary);
}
.jj j2-radio.j2-item .control-content .form-control input {
  margin-right: 0.2rem;
  padding: 0px;
}
.jj j2-radio.j2-item .control-content .form-control input.etc-text {
  margin-left: 1rem;
}
.jj j2-radio.j2-item .control-content:focus-within {
  border: none;
  box-shadow: none;
}
.jj j2-radio.j2-item.block label {
  display: block;
}
.jj j2-radio.j2-item.vertical .form-control {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.jj j2-radio.j2-item.vertical .form-control .radio-label {
  height: 25px;
  margin-bottom: 0;
  display: flex;
  margin-bottom: 5px;
  height: auto;
}
.jj j2-radio.j2-item.vertical .form-control .radio-label input {
  margin-top: 2px;
}
.jj j2-radio.j2-item.button .form-control {
  padding: 0;
  border: 0;
  background-color: transparent;
  display: flex;
}
.jj j2-radio.j2-item.button .form-control .radio-label {
  margin-right: 0.1rem;
  padding: 0;
}
.jj j2-radio.j2-item.button .form-control .radio-label input[type="radio"] {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  min-width: 0;
}
.jj j2-radio.j2-item.button .form-control .radio-label input[type="radio"] + t {
  display: inline-block;
  font-weight: 400;
  color: #6c757d;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-radius: 0.15rem;
  transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s, -webkit-box-shadow 0.15s ease-in-out 0s;
  color: var(--dark);
  background-color: var(--light);
  border-color: var(--light);
}
.jj j2-radio.j2-item.button .form-control .radio-label input[type="radio"] + t i {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.jj j2-radio.j2-item.button .form-control .radio-label input[type="radio"] + t t2 {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.jj j2-radio.j2-item.button .form-control .radio-label input[type="radio"]:checked + t {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}
.jj j2-radio.j2-item.button.icon-only .radio-label t2 {
  display: none;
}
.jj j2-radio.j2-item.button.text-only .radio-label i {
  display: none;
}
.jj j2-radio.j2-item[readonly] .form-control,
.jj j2-radio.j2-item[data-readonly] .form-control,
.jj j2-radio.j2-item[readonly2] .form-control {
  pointer-events: none;
}
.jj j2-radio.j2-item.error .form-control {
  background-color: rgba(255, 0, 0, 0.2) !important;
}
.jj j2-radio.j2-item.textonly i {
  display: none;
}
.jj j2-radio.j2-item.icononly t2 {
  display: none;
}
.jj j2-radio.j2-item.danger .control-content .form-control input[type='radio']:checked + t {
  color: var(--white);
  border-color: var(--danger);
  background-color: var(--danger);
}
.jj j2-radio.j2-item.success .control-content .form-control input[type='radio']:checked + t {
  color: var(--white);
  border-color: var(--success);
  background-color: var(--success);
}
.jj j2-radio.j2-item.warning .control-content .form-control input[type='radio']:checked + t {
  color: var(--white);
  border-color: var(--warning);
  background-color: var(--warning);
}
.jj j2-radio.j2-item.info .control-content .form-control input[type='radio']:checked + t {
  color: var(--white);
  border-color: var(--info);
  background-color: var(--info);
}
.jj j2-radio.j2-item.purple .control-content .form-control input[type='radio']:checked + t {
  color: var(--white);
  border-color: var(--purple);
  background-color: var(--purple);
}
.jj j2-radio.j2-item.secondary .control-content .form-control input[type='radio']:checked + t {
  color: var(--white);
  border-color: var(--secondary);
  background-color: var(--secondary);
}
.jj j2-radio.j2-item[readonly] .form-control,
.jj j2-radio.j2-item[data-readonly] .form-control {
  background-color: var(--light);
}
.jj .print-on j2-radio.j2-item input[type='radio']:checked {
  border-width: 9px;
}
.jj .jj-proxy-grid td > j2-radio.j2-item {
  overflow: auto;
}
.jj .jj-proxy-grid td > j2-radio.j2-item > .control-content {
  overflow: auto;
}
.jj .jj-proxy-grid td > j2-radio.j2-item > .control-content::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid td > j2-radio.j2-item > .control-content > .form-control {
  height: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* ==JJItemRadio.720.class End ================ */




/* ==JJItemSelect.720.class Start ================ */
/* ==JJItemSelect.720.class================ */
.jj j2-select.j2-item select[size] {
  height: auto!important;
}

/* ==JJItemSelect.720.class End ================ */




/* ==JJItemCodePicker.720.class Start ================ */
/* ==JJItemCodePicker.720.class================ */
.jj j2-code-picker select[size] {
  height: auto!important;
}

/* ==JJItemCodePicker.720.class End ================ */




/* ==JJItemData.720.class Start ================ */
/* ==JJItemData.720.class================ */

/* ==JJItemData.720.class End ================ */




/* ==JJItemDataPicker.720.class Start ================ */
/* ==JJItemDataPicker.720.class================ */

/* ==JJItemDataPicker.720.class End ================ */




/* ==JJItemField.720.class Start ================ */
/* ==JJItemField.720.class================ */

/* ==JJItemField.720.class End ================ */




/* ==JJItemChildField.720.class Start ================ */
/* ==JJItemChildField.720.class================ */

/* ==JJItemChildField.720.class End ================ */




/* ==JJItemRefJoin.720.class Start ================ */
/* ==JJItemRefJoin.720.class================ */
.jj j2-refjoin .control-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-refjoin .control-content label.form-control {
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj j2-refjoin .control-content .form-control {
  border: 1px solid #ced4da;
  background-color: var(--light);
  text-align: right;
}
.jj j2-refjoin[rows] .control-content {
  word-break: break-all;
  white-space: break-spaces;
}
.jj j2-refjoin[rows] .control-content label.form-control {
  overflow: auto;
}

/* ==JJItemRefJoin.720.class End ================ */




/* ==JJItemRefText.720.class Start ================ */
/* ==JJItemRefText.720.class================ */
.jj j2-reftext .control-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-reftext .control-content label.form-control {
  overflow: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj j2-reftext .control-content .form-control {
  border: 1px solid #ced4da;
  background-color: var(--light);
  text-align: left;
}
.jj j2-reftext[rows] .control-content {
  word-break: break-all;
  white-space: break-spaces;
}
.jj j2-reftext[rows] .control-content label.form-control {
  overflow: auto;
}

/* ==JJItemRefText.720.class End ================ */




/* ==JJItemDataFunc.720.class Start ================ */
/* ==JJItemDataFunc.720.class================ */
.jj j2-data-func .control-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-data-func .control-content label.form-control {
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj j2-data-func .control-content .form-control {
  border: 1px solid #ced4da;
  background-color: var(--light);
  text-align: right;
}
.jj j2-data-func[rows] .control-content {
  word-break: break-all;
  white-space: break-spaces;
}
.jj j2-data-func[rows] .control-content label.form-control {
  overflow: auto;
}

/* ==JJItemDataFunc.720.class End ================ */




/* ==JJItemJoinFunc.720.class Start ================ */
/* ==JJItemJoinFunc.720.class================ */
.jj j2-join-func .control-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-join-func .control-content label.form-control {
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj j2-join-func .control-content .form-control {
  border: 1px solid #ced4da;
  background-color: var(--light);
  text-align: right;
}
.jj j2-join-func[rows] .control-content {
  word-break: break-all;
  white-space: break-spaces;
}
.jj j2-join-func[rows] .control-content label.form-control {
  overflow: auto;
}

/* ==JJItemJoinFunc.720.class End ================ */




/* ==JJItemJbo.720.class Start ================ */
/* ==JJItemJbo.720.class================ */

/* ==JJItemJbo.720.class End ================ */




/* ==JJItemMultiData.720.class Start ================ */
/* ==JJItemMultiData.720.class================ */

/* ==JJItemMultiData.720.class End ================ */




/* ==JJItemPage.720.class Start ================ */
/* ==JJItemPage.720.class================ */

/* ==JJItemPage.720.class End ================ */




/* ==JJItemMenu.720.class Start ================ */
/* ==JJItemMenu.720.class================ */

/* ==JJItemMenu.720.class End ================ */




/* ==JJItemVars.720.class Start ================ */
/* ==JJItemVars.720.class================ */

/* ==JJItemVars.720.class End ================ */




/* ==JJItemTag.720.class Start ================ */
/* ==JJItemTag.720.class================ */
.jj j2-tag.j2-item .input-group {
  display: flex;
  background-color: var(--white);
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  padding: 0;
  min-height: 33px;
}
.jj j2-tag.j2-item .input-group .tag-items {
  background-color: #F1F5F7;
  padding: 0.15rem;
  overflow: auto;
}
.jj j2-tag.j2-item .input-group .tag-items::-webkit-scrollbar {
  height: 3px!important;
}
.jj j2-tag.j2-item .input-group .tag-items .alert {
  display: inline-block;
  margin: 0.1rem 0.1rem 0.1rem 0.1rem;
  padding: 0.2rem 2rem 0.2rem 0.3rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-tag.j2-item .input-group .tag-items .alert button.close {
  font-size: 1.2rem;
  height: 100%;
  padding: 0 0.5rem 0.2rem;
}
.jj j2-tag.j2-item .input-group .tag-items .alert button.close * {
  pointer-events: none;
}
.jj j2-tag.j2-item .input-group .tag-control {
  padding: 0.15rem 0.2rem 0 0.15rem;
  border: 0;
  min-width: 0px;
  flex-grow: 1;
  height: 29px;
  padding: 0 0.2rem 0.15rem;
}
.jj j2-tag.j2-item.vertical .input-group {
  display: flex;
  flex-direction: column;
}
.jj j2-tag.j2-item.vertical .input-group .tag-items {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.jj j2-tag.j2-item.vertical .input-group .tag-control {
  width: inherit;
  flex-grow: 0;
}
.jj j2-tag.j2-item[readonly] .tag-control,
.jj j2-tag.j2-item[readonly2] .tag-control,
.jj j2-tag.j2-item[readonly] .close,
.jj j2-tag.j2-item[readonly2] .close {
  display: none;
}
.jj j2-tag.j2-item[readonly] span.jj-sortable,
.jj j2-tag.j2-item[readonly2] span.jj-sortable {
  pointer-events: none;
}
.jj j2-tag.j2-item[sortable][readonly] span.jj-sortable {
  pointer-events: auto;
}
.jj j2-tag.j2-item[readonly2] .control-content .input-group {
  background-color: var(--light);
}
.jj j2-tag.j2-item[readonly2] .control-content .input-group label {
  font-weight: normal;
  margin-bottom: 0;
}
.jj j2-tag.j2-item.error input {
  background-color: rgba(255, 0, 0, 0.2) !important;
}
.jj .jj-proxy-grid td .tag-items {
  flex-wrap: wrap;
  text-align: left;
}
.jj .jj-proxy-grid td .tag-items .alert {
  display: inline-block;
  margin: 0 0.2rem 0.15rem 0;
  padding: 0.2rem 2rem 0.2rem 0.3rem;
}
.jj .jj-proxy-grid td .tag-items .alert button.close {
  padding: 0.2rem 0.5rem;
  font-size: 1.2rem;
  line-height: 1rem;
}
.jj .jj-proxy-grid td .tag-items .alert button.close * {
  pointer-events: none;
}
.jj .jj-proxy-grid td .tag-items .code-item {
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 0 3px;
  line-height: 17px;
}
.jj .jj-proxy-grid td .tag-items .code-item .avatar {
  margin-top: -0.3rem;
  height: 1.5rem !important;
  width: 1.5rem;
}
.jj .jj-proxy-grid td .tag-items .code-item label {
  margin: 0;
}
.jj .jj-proxy-grid td .tag-items .code-item button.close {
  padding: 3px 5px;
  font-size: 1em;
  line-height: 1.5rem;
  position: relative;
  width: auto;
}
.jj .jj-proxy-grid td .tag-items .code-item button.close * {
  pointer-events: none;
}
.jj .jj-proxy-grid td .tag-items:empty:before {
  content: attr(placeholder);
  margin-top: 4px;
  position: absolute;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content {
  display: flex;
  min-height: fit-content;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .input-group {
  min-height: fit-content;
  overflow: auto;
  border: none;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .input-group::-webkit-scrollbar {
  width: 3px!important;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .input-group .tag-items {
  min-height: auto;
  white-space: break-spaces;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .input-group .tag-items .code-item {
  font-weight: lighter;
  max-width: calc(100% - 1.8rem);
  height: 16px;
  line-height: 10px;
  color: #000;
  padding: 0.2rem 1.5rem 0.2rem 0.3rem;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .input-group .tag-items .code-item button.close {
  position: absolute;
  line-height: 0.5rem;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .input-group > .tag-control {
  display: none;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .dropdown-menu {
  resize: both;
  max-height: 300px;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .dropdown-menu .input-group {
  min-height: 22px;
  display: flex;
  flex-direction: column;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .dropdown-menu .input-group .tag-items {
  flex-grow: 1;
  display: block;
  flex-direction: column;
  overflow-y: auto;
}
.jj .jj-proxy-grid td j2-tag.j2-item .control-content .dropdown-menu .input-group .tag-control {
  display: block;
  width: inherit;
  flex-grow: 0;
}
.jj .print-on j2-tag.j2-item div.control-content {
  border: none;
}
.jj .print-on j2-tag.j2-item div.control-content div.input-group {
  border: none;
}
.jj .form-box j2-tag .input-group > .tag-items {
  order: 1;
  width: fit-content;
}
.jj .form-box j2-tag .input-group > input {
  order: 2;
}

/* ==JJItemTag.720.class End ================ */




/* ==JJItemText.720.class Start ================ */
/* ==JJItemText.720.class================ */
.jj j2-text.j2-item input.form-control[type=color],
.jj j2-text.j2-item input.form-control[type=range] {
  padding: 3px;
  min-height: initial;
}
.jj j2-text.j2-item label.form-control {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj j2-text.j2-item[readonly2] .input-group:hover {
  overflow: initial;
  height: auto;
  position: absolute;
  width: 100%;
  z-index: 10;
}
.jj j2-text.j2-item[readonly2] .input-group:hover label.form-control {
  white-space: normal;
  line-break: anywhere;
  height: auto;
}
.jj j2-text.j2-item[readonly2] .input-group:hover label.form-control:empty {
  height: 33px;
}
.jj .jj-proxy-grid td .j2-item[readonly2] .control-content {
  height: 22px;
}
.jj .jj-proxy-grid td .j2-item[readonly2] .input-group:hover {
  overflow: hidden;
  height: inherit;
  position: inherit;
}
.jj .jj-proxy-grid td .j2-item[readonly2] .input-group:hover label.form-control {
  white-space: inherit;
}
.jj .jj-proxy-grid td .j2-item[readonly2] label.form-control {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ==JJItemText.720.class End ================ */




/* ==JJItemBusinessNum.720.class Start ================ */
/* ==JJItemBusinessNum.720.class================ */
.jj j2-businum.j2-item {
  min-width: 25%;
}
.jj j2-businum.j2-item div.input-group {
  flex-flow: nowrap;
}
.jj j2-businum.j2-item div.input-group div.input-group-prepend {
  overflow: hidden;
  min-width: 36px;
  max-width: 30%;
  height: 33px;
}
.jj j2-businum.j2-item[readonly] .btn-picker {
  pointer-events: none;
}
.jj j2-businum.j2-item[readonly2] .btn-picker {
  display: none;
}
.jj td j2-businum.j2-item div.input-group {
  display: inline!important;
}
.jj td j2-businum.j2-item div.input-group div.input-group-prepend {
  display: inline!important;
}
.jj td j2-businum.j2-item div.input-group div.input-group-prepend a.input-group-text {
  background: transparent!important;
  border: 0!important;
  padding: 0!important;
  height: 100%;
  display: inline!important;
}
.jj td j2-businum.j2-item div.input-group div.input-group-prepend input.form-control {
  display: none!important;
}
.jj j2-businum .input-group-text:after {
  content: "사업자 번호 확인";
}
.jj[lang="en-US"] j2-businum .input-group-text:after {
  content: "Business number verification";
}

/* ==JJItemBusinessNum.720.class End ================ */




/* ==JJItemCustName.720.class Start ================ */
/* ==JJItemCustName.720.class================ */
.jj j2-custname.j2-item input.form-control[type=color],
.jj j2-custname.j2-item input.form-control[type=range] {
  padding: 3px;
  min-height: initial;
}

/* ==JJItemCustName.720.class End ================ */




/* ==JJItemEmail.720.class Start ================ */
/* ==JJItemEmail.720.class================ */
.jj j2-email.j2-item {
  min-width: 25%;
}
.jj j2-email.j2-item .input-group {
  flex-wrap: nowrap;
}
.jj j2-email.j2-item input.form-control[type=color],
.jj j2-email.j2-item input.form-control[type=range] {
  padding: 3px;
  min-height: initial;
}
.jj .print-on j2-email.j2-item a.input-group-text {
  border: none;
}

/* ==JJItemEmail.720.class End ================ */




/* ==JJItemResidentNum.720.class Start ================ */
/* ==JJItemResidentNum.720.class================ */
.jj j2-residentnum.j2-item input.form-control[type=color],
.jj j2-residentnum.j2-item input.form-control[type=range] {
  padding: 3px;
  min-height: initial;
}

/* ==JJItemResidentNum.720.class End ================ */




/* ==JJItemTel.720.class Start ================ */
/* ==JJItemTel.720.class================ */
.jj j2-tel.j2-item {
  min-width: 25%;
}
.jj j2-tel.j2-item .input-group {
  flex-wrap: nowrap;
}
.jj j2-tel.j2-item input.form-control[type=color],
.jj j2-tel.j2-item input.form-control[type=range] {
  padding: 3px;
  min-height: initial;
}
.jj .print-on j2-tel.j2-item a.input-group-text {
  border: none;
}

/* ==JJItemTel.720.class End ================ */




/* ==JJItemTextHtml.720.class Start ================ */
/* ==JJItemTextHtml.720.class================ */
.jj j2-texthtml.j2-item {
  position: relative;
  min-height: 137px;
}
.jj j2-texthtml.j2-item .control-content {
  flex-grow: 1;
  overflow: auto;
}
.jj j2-texthtml.j2-item .control-content:focus-within {
  border-color: initial;
  -webkit-box-shadow: initial;
  box-shadow: initial;
  border-radius: initial;
}
.jj j2-texthtml.j2-item .control-content:focus-within .help-block.text-info {
  display: block;
}
.jj j2-texthtml.j2-item .control-content .form-control {
  height: 100%;
  min-height: 33px;
  max-height: initial;
  padding: 0;
}
.jj j2-texthtml.j2-item .control-content .help-block.text-info {
  display: none;
}
.jj j2-texthtml.j2-item[readonly] jj-html-editor > .btn-group {
  display: none;
  pointer-events: none;
  border-bottom: 1px solid #ccc;
  opacity: 0.7;
}
.jj j2-texthtml.j2-item[readonly] jj-html-editor > .editor {
  background-color: var(--light);
}
.jj j2-texthtml.j2-item[readonly2] .control-content {
  height: auto;
  pointer-events: auto;
  overflow: auto;
}
.jj j2-texthtml.j2-item[readonly2] .control-content .form-control {
  height: 100%;
  overflow: auto;
  min-height: 33px;
  padding: 0.45rem 0.9rem;
}
.jj j2-texthtml.j2-item[readonly2] .control-content .form-control > .btn-group {
  display: none!important;
  pointer-events: none;
}
.jj j2-texthtml.j2-item[readonly] .control-content .form-control .editor img,
.jj j2-texthtml.j2-item[readonly2] .control-content .form-control .editor img {
  pointer-events: none;
}
.jj j2-texthtml.j2-item[auto-height] {
  height: auto!important;
  min-height: 137px;
  resize: none;
}
.jj j2-texthtml.j2-item[auto-height] jj-html-editor {
  overflow: visible;
}
.jj j2-texthtml.j2-item[auto-height] jj-html-editor .editor {
  overflow: visible;
  min-height: 125px;
}
.jj j2-texthtml.j2-item.type-100[auto-height] {
  height: auto!important;
}
.jj j2-texthtml.j2-item.type-100[auto-height] jj-html-editor .editor {
  padding-bottom: 2rem;
}
.jj j2-texthtml.j2-item [contenteditable]:focus {
  outline: 0px solid transparent;
}
.jj j2-texthtml.j2-item [contenteditable]:empty:before {
  content: attr(placeholder) !important;
}
.jj j2-texthtml.j2-item jj-html-editor jj-item-text div.control-content {
  height: auto!important;
}
.jj j2-texthtml.j2-item jj-html-editor jj-item-text div.control-content input {
  height: auto!important;
}
.jj j2-texthtml.j2-item jj-html-editor jj-item-text div.control-content div.imgTool jj-item-text {
  margin-top: 0.375rem;
}
.jj j2-texthtml.j2-item jj-html-editor[edittype="memo"] > div.editor {
  border: none;
}
.jj j2-texthtml.j2-item div.dropdown-menu jj-form-include div.control-content {
  height: fit-content;
}
.jj j2-texthtml.j2-item div.dropdown-menu div.control-content {
  height: fit-content;
}
.jj .row > [class*='col-'] > j2-texthtml[auto-height] {
  padding: 0;
}
.jj .form-box j2-image {
  min-height: 240px!important;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item {
  min-height: 25px;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .control-content {
  display: flex;
  overflow: hidden;
  align-items: center;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .control-content .form-control {
  padding-right: 23px;
  resize: none;
  min-height: 23px!important;
  overflow-y: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-wrap: wrap;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .control-content .form-control::-webkit-scrollbar {
  width: 3px!important;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .control-content .input-group-text {
  height: 100%;
  padding: 6px;
  position: absolute;
  right: 0;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .dropdown-menu {
  height: 300px;
  width: 300px;
  padding: 0;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .dropdown-menu jj-html-editor {
  min-height: 300px;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .dropdown-menu jj-html-editor .btn-group .dropdown-menu {
  height: auto;
  width: auto;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .dropdown-menu jj-html-editor .btn-group .dropdown-menu button {
  width: auto;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .dropdown-menu jj-html-editor .btn-group table {
  width: auto;
  min-width: 0;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .dropdown-menu jj-html-editor .btn-group table tbody tr {
  height: auto;
}
.jj .jj-proxy-grid td > j2-texthtml.j2-item .dropdown-menu jj-html-editor div.editor {
  white-space: normal;
}

/* ==JJItemTextHtml.720.class End ================ */




/* ==JJItemTextarea.720.class Start ================ */
/* ==JJItemTextarea.720.class================ */
.jj j2-textarea.j2-item {
  position: relative;
  overflow: visible;
  min-height: 62px;
  height: 287px;
}
.jj j2-textarea.j2-item label.control-label {
  overflow: hidden;
  margin-right: 0;
}
.jj j2-textarea.j2-item .control-content {
  flex-grow: 1;
  position: relative;
  height: 258px;
}
.jj j2-textarea.j2-item .control-content .form-control {
  flex-grow: 1;
  resize: none;
  height: 100%;
  min-height: 33px;
}
.jj j2-textarea.j2-item .text-count {
  position: absolute;
  z-index: 10;
  right: 13px;
  bottom: 0px;
  background-color: var(--dark);
  color: var(--gray);
  padding: 5px;
  display: none;
}
.jj j2-textarea.j2-item:focus-within .text-count {
  display: inline-block;
}
.jj j2-textarea.j2-item[readonly2] .control-content {
  min-height: 33px;
  height: auto;
}
.jj j2-textarea.j2-item[readonly2] .control-content .form-control {
  min-height: 33px;
  word-break: break-word;
}
.jj j2-textarea.j2-item.resize-vertical.error {
  overflow: visible;
}
.jj .jj-data-form.form-box j2-textarea.j2-item {
  height: 136px;
  min-height: 34px;
}
.jj .jj-data-form.form-box j2-textarea.j2-item label.control-label {
  overflow: hidden;
  margin-right: 0;
}
.jj .jj-data-form.form-box j2-textarea.j2-item .control-content {
  height: inherit;
}
.jj .jj-data-form.form-horizontal j2-textarea.j2-item {
  height: 136px;
  min-height: 34px;
}
.jj .jj-data-form.form-horizontal j2-textarea.j2-item label.control-label {
  overflow: hidden;
  margin-right: 0;
  width: 127px;
}
.jj .jj-data-form.form-horizontal j2-textarea.j2-item .control-content {
  height: inherit;
}
.jj .jj-proxy-grid td > j2-textarea.j2-item {
  min-height: 22px;
}
.jj .jj-proxy-grid td > j2-textarea.j2-item .control-content {
  display: flex;
  align-items: center;
}
.jj .jj-proxy-grid td > j2-textarea.j2-item .control-content .form-control {
  min-height: 22px;
  resize: none;
  height: 22px;
  overflow-y: auto!important;
  padding-right: 23px;
}
.jj .jj-proxy-grid td > j2-textarea.j2-item .control-content .form-control::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid td > j2-textarea.j2-item .control-content .input-group-text {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj .jj-proxy-grid td > j2-textarea.j2-item .control-content .dropdown-menu textarea.form-control {
  resize: both;
  min-height: 240px;
  min-width: 240px;
  width: 100%;
}

/* ==JJItemTextarea.720.class End ================ */




/* ==JJItemTree.720.class Start ================ */
/* ==JJItemTree.720.class================ */
.jj j2-tree.j2-item {
  position: relative;
}
.jj j2-tree.j2-item .control-content {
  flex-grow: 1;
  height: auto;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.jj j2-tree.j2-item .control-content .input-group {
  flex-wrap: nowrap;
}
.jj j2-tree.j2-item .control-content jj-tree.form-control {
  resize: vertical;
  height: 216px;
  min-height: 33px;
  width: 100%;
  padding: 0;
  background-color: transparent;
  border: 1px solid #ccc;
}
.jj j2-tree.j2-item .control-content .input-group-text.btn-eraser {
  pointer-events: auto;
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.jj j2-tree.j2-item .control-content .form-control[type="search"] {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.jj j2-tree.j2-item .control-content .help-block {
  top: 0;
  right: 0;
}
.jj j2-tree.j2-item .control-content .dropdown-menu {
  padding: 0;
}
.jj j2-tree.j2-item[readonly] .jj-search-label,
.jj j2-tree.j2-item[readonly2] .jj-search-label {
  display: none;
}
.jj j2-tree.j2-item[readonly] .jj-tree-check,
.jj j2-tree.j2-item[readonly2] .jj-tree-check {
  opacity: 0.5;
  pointer-events: none;
}
.jj j2-tree.j2-item[readonly] a,
.jj j2-tree.j2-item[readonly2] a {
  opacity: 0.8;
  pointer-events: none;
}
.jj td j2-tree.j2-item {
  height: 22px;
  min-height: 22px!important;
}
.jj td j2-tree.j2-item .control-content .btn-group {
  width: 100%;
}
.jj td j2-tree.j2-item .control-content .btn-group a {
  padding: 0.2rem 0.4rem;
}
.jj td j2-tree.j2-item .control-content .btn-group a i {
  font-size: 14px!important;
}
.jj td j2-tree.j2-item .control-content .input-group {
  min-height: auto;
  flex-wrap: wrap;
  align-items: center;
}
.jj td j2-tree.j2-item .control-content .input-group .input-group-prepend .input-group-text.btn-picker {
  padding: 6px;
  position: absolute;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
  z-index: 10;
}
.jj td j2-tree.j2-item .control-content .input-group .form-control {
  padding: 0 23px;
  overflow: auto;
  flex-wrap: wrap;
  min-height: fit-content;
}
.jj td j2-tree.j2-item .control-content .input-group .form-control::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj td j2-tree.j2-item .control-content .input-group .form-control .code-item {
  display: flex!important;
  flex-flow: nowrap!important;
  padding: 0 0.3rem !important;
  align-items: center!important;
}
.jj td j2-tree.j2-item .control-content .input-group .form-control .code-item img.rounded-circle {
  width: 1.5rem;
  margin-top: 0;
}
.jj td j2-tree.j2-item .control-content .input-group .input-group-text.btn-eraser {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj td j2-tree.j2-item .control-content .btn-group {
  width: 100%;
}
.jj td j2-tree.j2-item .control-content .btn-group a {
  padding: 0.2rem 0.4rem;
}
.jj td j2-tree.j2-item .control-content .btn-group a i {
  font-size: 14px!important;
}

/* ==JJItemTree.720.class End ================ */




/* ==JJItemOrg.720.class Start ================ */
/* ==JJItemOrg.720.class================ */
.jj j2-org.j2-item {
  position: relative;
  overflow: visible;
}
.jj j2-org.j2-item .control-content {
  flex-grow: 1;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}
.jj j2-org.j2-item .control-content .input-group {
  flex-wrap: nowrap;
}
.jj j2-org.j2-item .control-content .input-group-text.btn-eraser {
  pointer-events: auto;
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.jj j2-org.j2-item .control-content .form-control[type="search"] {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.jj j2-org.j2-item .control-content .form-control2 {
  resize: vertical;
  height: 216px;
  min-height: 33px;
  width: 100%;
  padding: 0;
  background-color: transparent;
  border: 1px solid #ccc;
}
.jj j2-org.j2-item .control-content .help-block {
  top: 0;
  right: 0;
}
.jj j2-org.j2-item .control-content .tree-box {
  min-width: 240px;
}
.jj j2-org.j2-item .control-content .dropdown-menu {
  padding: 0!important;
}
.jj j2-org.j2-item[readonly] .jj-search-label,
.jj j2-org.j2-item[readonly2] .jj-search-label {
  display: none;
}
.jj j2-org.j2-item[readonly] .jj-tree-check,
.jj j2-org.j2-item[readonly2] .jj-tree-check {
  opacity: 0.5;
  pointer-events: none;
}
.jj j2-org.j2-item[readonly] a,
.jj j2-org.j2-item[readonly2] a {
  opacity: 0.8;
  pointer-events: none;
}
.jj j2-org.j2-item[readonly] .btn-picker,
.jj j2-org.j2-item[readonly2] .btn-picker {
  pointer-events: none;
}
.jj j2-org.j2-item[readonly] .btn-eraser,
.jj j2-org.j2-item[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj td j2-org.j2-item .control-content .input-group {
  min-height: auto;
  flex-wrap: wrap;
  align-items: center;
}
.jj td j2-org.j2-item .control-content .input-group .input-group-prepend .input-group-text.btn-picker {
  padding: 6px;
  position: absolute;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
  z-index: 10;
}
.jj td j2-org.j2-item .control-content .input-group .form-control {
  padding: 0 23px;
  overflow: auto;
  flex-wrap: wrap;
  min-height: fit-content;
}
.jj td j2-org.j2-item .control-content .input-group .form-control::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj td j2-org.j2-item .control-content .input-group .form-control .code-item {
  display: flex!important;
  flex-flow: nowrap!important;
  padding: 0 0.3rem !important;
  align-items: center!important;
}
.jj td j2-org.j2-item .control-content .input-group .form-control .code-item img.rounded-circle {
  width: 1.5rem;
  margin-top: 0;
}
.jj td j2-org.j2-item .control-content .input-group .input-group-text.btn-eraser {
  padding: 6px;
  position: absolute;
  right: 3px;
  color: #000;
  top: 0px;
  border: none;
  background-color: transparent;
}
.jj td j2-org.j2-item .control-content .btn-group {
  width: 100%;
}
.jj td j2-org.j2-item .control-content .btn-group a {
  padding: 0.2rem 0.4rem;
}
.jj td j2-org.j2-item .control-content .btn-group a i {
  font-size: 14px!important;
}

/* ==JJItemOrg.720.class End ================ */




/* ==JJItemPhone.720.class Start ================ */
/* ==JJItemPhone.720.class================ */
.jj j2-phone.j2-item {
  min-width: 25%;
}
.jj j2-phone.j2-item .input-group {
  flex-wrap: nowrap;
}
.jj j2-phone.j2-item input.form-control[type=color],
.jj j2-phone.j2-item input.form-control[type=range] {
  padding: 3px;
  min-height: initial;
}
.jj j2-phone.j2-item .form-control {
  width: 5rem;
  flex: none;
}
.jj .print-on j2-phone.j2-item a.input-group-text {
  border: none;
}
.jj td j2-phone.j2-item .form-control {
  width: 4rem;
  flex: none;
}

/* ==JJItemPhone.720.class End ================ */




/* ==JJItemCodeTree.720.class Start ================ */
/* ==JJItemCodeTree.720.class================ */
.jj j2-codetree.j2-item {
  position: relative;
}
.jj j2-codetree.j2-item .control-content {
  flex-grow: 1;
  height: auto;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.jj j2-codetree.j2-item .control-content .dropdown-menu {
  padding: 0;
}
.jj j2-codetree.j2-item .control-content .dropdown-menu .jj-search-label > input.form-control {
  border: none;
}
.jj j2-codetree.j2-item .control-content .dropdown-menu .form-control.jj-tree {
  background-color: #F1F5F7 !important;
  border: none!important;
}
.jj j2-codetree.j2-item .control-content .input-group-text.btn-eraser {
  pointer-events: auto;
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.jj j2-codetree.j2-item .control-content .div-box {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}
.jj j2-codetree.j2-item .control-content .div-box .tree-box {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.jj j2-codetree.j2-item .control-content .div-box .tree-box .jj-search-label input {
  height: 33px;
  min-height: 33px!important;
  padding: 0.45rem 0.9rem 0.45rem 35px;
}
.jj j2-codetree.j2-item .control-content .div-box .tree-box jj-tree.form-control {
  resize: vertical;
  height: 216px;
  min-height: 33px;
  width: 100%;
  padding: 0;
  background-color: transparent;
  border: 1px solid #ccc;
}
.jj j2-codetree.j2-item .control-content .div-box .tree-box .form-control[type="search"] {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.jj j2-codetree.j2-item .control-content .div-box .list-group {
  display: none;
  overflow: auto;
}
.jj j2-codetree.j2-item .control-content .div-box .list-group li {
  padding: 0 1.25rem;
  min-height: 33px;
}
.jj j2-codetree.j2-item .control-content .help-block {
  top: 0;
  right: 0;
}
.jj j2-codetree.j2-item[is-check="true"] .control-content .div-box {
  flex-grow: 1;
  display: flex;
}
.jj j2-codetree.j2-item[is-check="true"] .control-content .div-box .tree-box {
  width: 50%;
}
.jj j2-codetree.j2-item[is-check="true"] .control-content .div-box .tree-box .form-control {
  padding: 0;
  background-color: transparent;
  border: 1px solid #ccc;
}
.jj j2-codetree.j2-item[is-check="true"] .control-content .div-box .list-group {
  width: 50%;
  display: block;
}
.jj j2-codetree.j2-item[is-check="true"] .control-content .div-box .list-group .span.badge {
  cursor: pointer;
}
.jj j2-codetree.j2-item[readonly] .jj-search-label,
.jj j2-codetree.j2-item[readonly2] .jj-search-label {
  display: none;
}
.jj j2-codetree.j2-item[readonly] .jj-tree-check,
.jj j2-codetree.j2-item[readonly2] .jj-tree-check {
  opacity: 0.5;
  pointer-events: none;
}
.jj j2-codetree.j2-item[readonly] a,
.jj j2-codetree.j2-item[readonly2] a {
  opacity: 0.8;
  pointer-events: none;
}
.jj j2-codetree.j2-item[readonly] .span.badge,
.jj j2-codetree.j2-item[readonly2] .span.badge {
  display: none;
}
.jj td j2-codetree.j2-item {
  height: 22px;
  min-height: 22px!important;
}
.jj td j2-codetree.j2-item .control-content .btn-group {
  width: 100%;
}
.jj td j2-codetree.j2-item .control-content .btn-group a {
  padding: 0.2rem 0.4rem;
}
.jj td j2-codetree.j2-item .control-content .btn-group a i {
  font-size: 14px!important;
}

/* ==JJItemCodeTree.720.class End ================ */




/* ==JJItemYoutube.720.class Start ================ */
/* ==JJItemYoutube.720.class================ */
.jj {
  /**
* 프린트 모드 설정
*/
}
.jj j2-youtube.j2-item {
  min-height: 137px;
}
.jj j2-youtube.j2-item .control-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: calc(100% - 38px);
}
.jj j2-youtube.j2-item .control-content .form-viewer {
  height: 216px;
  min-height: 38px;
  flex-grow: 1;
  border: 1px solid #ccc;
  background-color: white;
  border-width: 0 1px 1px;
}
.jj j2-youtube.j2-item .control-content .form-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: auto;
}
.jj j2-youtube.j2-item .control-content .print-thumbnail {
  display: none;
}
.jj j2-youtube.j2-item .control-content .help-block {
  bottom: 0;
}
.jj j2-youtube.j2-item[readonly] .form-viewer,
.jj j2-youtube.j2-item[readonly2] .form-viewer {
  background-color: var(--light);
}
.jj td j2-youtube.j2-item {
  height: 22px!important;
  min-height: 22px!important;
}
.jj td j2-youtube.j2-item a i.fa {
  font-size: 18px;
}
.jj td j2-youtube.j2-item div.form-viewer {
  display: none!important;
}
.jj .print-on j2-youtube.j2-item div.control-content div.form-viewer {
  display: none;
}
.jj .print-on j2-youtube.j2-item div.control-content .print-thumbnail {
  display: block;
}
.jj .form-box j2-youtube.j2-item .control-content .form-viewer {
  height: 102px;
}

/* ==JJItemYoutube.720.class End ================ */




/* ==JJItemIframe.720.class Start ================ */
/* ==JJItemIframe.720.class================ */
.jj {
  /**
* 프린트 모드 설정
*/
}
.jj j2-iframe.j2-item {
  min-height: 137px;
}
.jj j2-iframe.j2-item .control-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: calc(100% - 38px);
}
.jj j2-iframe.j2-item .control-content .form-viewer {
  height: 216px;
  min-height: 38px;
  flex-grow: 1;
  border: 1px solid #ccc;
  background-color: white;
  border-width: 0 1px 1px;
}
.jj j2-iframe.j2-item .control-content .form-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: auto;
}
.jj j2-iframe.j2-item .control-content .print-thumbnail {
  display: none;
}
.jj j2-iframe.j2-item .control-content .help-block {
  bottom: 0;
}
.jj j2-iframe.j2-item[readonly] .form-viewer,
.jj j2-iframe.j2-item[readonly2] .form-viewer {
  background-color: var(--light);
}
.jj td j2-youtube.j2-item {
  height: 22px!important;
  min-height: 22px!important;
}
.jj td j2-youtube.j2-item a i.fa {
  font-size: 18px;
}
.jj td j2-youtube.j2-item div.form-viewer {
  display: none!important;
}
.jj .print-on j2-youtube.j2-item div.control-content div.form-viewer {
  display: none;
}
.jj .print-on j2-youtube.j2-item div.control-content .print-thumbnail {
  display: block;
}
.jj .form-box j2-youtube.j2-item .control-content .form-viewer {
  height: 102px;
}

/* ==JJItemIframe.720.class End ================ */




/* ==JJItemExpenses.720.class Start ================ */
/* ==JJItemExpenses.720.class================ */
.jj j2-expense.j2-item {
  height: 287px;
  min-height: 137px;
}
.jj j2-expense.j2-item .control-content {
  flex-grow: 1;
  height: 104px;
  position: relative;
  resize: none;
  overflow: hidden;
}
.jj j2-expense.j2-item .item-group {
  display: flex;
  flex-wrap: nowrap;
  background-color: var(--white);
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  padding: 0;
  min-height: 33px;
}
.jj j2-expense.j2-item .item-group .input-group .form-control {
  border: none;
  border-radius: 0;
}
.jj j2-expense.j2-item .item-group .input-group .form-control:first-child {
  border-right: 2px solid #ced4da;
  min-width: 150px;
  width: 30%;
  flex: none;
}
.jj j2-expense.j2-item .item-group .input-group .input-group-text.btn-picker {
  border: none;
  cursor: pointer;
  background-color: var(--primary);
}
.jj j2-expense.j2-item .item-group .input-group .input-group-text.btn-picker > i {
  color: #fff;
}
.jj j2-expense.j2-item .item-group .tag-items {
  height: 68px;
  overflow: auto;
  list-style-position: inside;
  padding: 0.15rem;
  background-color: var(--light);
  margin-bottom: 0;
}
.jj j2-expense.j2-item .item-group .tag-items > .code-item {
  margin: 0.1rem;
  padding: 0.2rem 2rem 0.2rem 0.3rem;
  display: list-item;
  align-items: center;
}
.jj j2-expense.j2-item .item-group .tag-items > .code-item > code {
  font-size: 110%;
}
.jj j2-expense.j2-item .item-group .tag-items > .code-item > label {
  margin-bottom: 0;
}
.jj j2-expense.j2-item .item-group .tag-items > .code-item button.close {
  font-size: 1.2rem;
  height: 100%;
  padding: 0 0.5rem 0.2rem;
}
.jj j2-expense.j2-item .item-group .tag-items > .code-item button.close * {
  pointer-events: none;
}
.jj j2-expense.j2-item .item-group .tag-control {
  border: 0;
  min-width: 200px;
  flex-grow: 1;
  height: 29px;
  padding: 0 0.2rem 0.15rem;
}
.jj j2-expense.j2-item.vertical .item-group {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.jj j2-expense.j2-item.vertical .item-group .tag-items {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.jj j2-expense.j2-item.vertical .item-group .tag-control {
  flex-grow: 0;
}
.jj j2-expense.j2-item[readonly] .control-content div.form-control,
.jj j2-expense.j2-item[readonly2] .control-content div.form-control {
  height: auto;
  min-height: 33px;
}
.jj j2-expense.j2-item[readonly] .tag-control,
.jj j2-expense.j2-item[readonly2] .tag-control,
.jj j2-expense.j2-item[readonly] .close,
.jj j2-expense.j2-item[readonly2] .close {
  display: none;
}
.jj .form-box j2-expense.j2-item {
  height: 136px;
}
.jj td j2-expense.j2-item {
  height: 28px;
  min-height: 22px;
}
.jj td j2-expense.j2-item .control-content {
  height: 28px;
  display: flex;
  align-items: center;
}
.jj td j2-expense.j2-item .control-content .form-control.text-box {
  overflow-x: hidden;
  overflow-y: auto;
}
.jj td j2-expense.j2-item .control-content .form-control.text-box::-webkit-scrollbar {
  width: 3px!important;
}
.jj td j2-expense.j2-item .control-content .input-group-text {
  height: 100%;
  padding: 6px;
  position: absolute;
  right: 0;
  color: #000;
  top: 1px;
  border: none;
  background-color: transparent;
}
.jj td j2-expense.j2-item .control-content .dropdown-menu {
  padding: 0;
}
.jj td j2-expense.j2-item .control-content .dropdown-menu .item-group .code-item {
  padding: 0;
}
.jj td j2-expense.j2-item .control-content .dropdown-menu .input-group .form-control:first-child {
  width: 150px;
}
.jj td j2-expense.j2-item .control-content .dropdown-menu .tag-items {
  flex-wrap: nowrap;
}
.jj td .tag-items.j2-expense-td {
  list-style-position: inside;
  overflow: scroll;
  height: 25px;
  padding: 0;
  margin-bottom: 0;
  overflow-x: hidden;
}
.jj td .tag-items.j2-expense-td > .code-item {
  display: list-item;
  margin-bottom: 3px;
}
.jj td .tag-items.j2-expense-td > .code-item > code {
  font-size: 110%;
}

/* ==JJItemExpenses.720.class End ================ */




/* ==JJItemMember.720.class Start ================ */
/* ==XXJJItemMember.720.class================ */
.jj j2-member.j2-item .form-control:last-child {
  border-left-width: 1px!important;
}
.jj .jj-data-form.form-box j2-member.j2-item .btn-picker {
  border-width: 0;
  border-right-width: 1px;
}

/* ==JJItemMember.720.class End ================ */




/* ==JJItemMemberID.720.class Start ================ */
/* ==XXJJItemMemberID.720.class================ */
.jj j2-member-id.j2-item .form-control:last-child {
  border-left-width: 1px!important;
}
.jj .jj-data-form.form-box j2-member.j2-item .btn-picker {
  border-width: 0;
  border-right-width: 1px;
}
.jj td > j2-member-id .input-group {
  flex-flow: nowrap;
}

/* ==JJItemMemberID.720.class End ================ */




/* ==JJItemStudentID.KIT.class Start ================ */
/* ==JJItemStudentID.KIT.class================ */
.jj j2-student.j2-item .form-control:last-child {
  border-left-width: 1px!important;
}
.jj .jj-data-form.form-box j2-student.j2-item .btn-picker {
  border-width: 0;
  border-right-width: 1px;
}
.jj td > j2-student .input-group {
  flex-flow: nowrap;
}
.jj j2-student[readonly2] a {
  pointer-events: none;
}

/* ==JJItemStudentID.KIT.class End ================ */




/* ==JJItemEmployeeID.KIT.class Start ================ */
/* ==JJItemEmployeeID.KIT.class================ */
.jj j2-employee.j2-item .form-control:last-child {
  border-left-width: 1px!important;
}
.jj .jj-data-form.form-box j2-employee.j2-item .btn-picker {
  border-width: 0;
  border-right-width: 1px;
}
.jj td > j2-employee .input-group {
  flex-flow: nowrap;
}
.jj j2-employee[readonly2] a {
  pointer-events: none;
}

/* ==JJItemEmployeeID.KIT.class End ================ */




/* ==JJItemLink.720.class Start ================ */
/* ==JJItemLink.720.class================ */
.jj j2-link.j2-item .control-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj j2-link.j2-item .control-content label.form-control {
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  font-weight: normal!important;
  border-color: transparent;
}
.jj j2-link.j2-item[rows] .control-content {
  word-break: break-all;
  white-space: break-spaces;
}
.jj j2-link.j2-item[rows] .control-content label.form-control {
  overflow: auto;
}

/* ==JJItemLink.720.class End ================ */




/* ==JJItemPopupPicker.720.class Start ================ */
/* ==JJItemPopupPicker.720.class================ */
.jj j2-popup-picker.j2-item .input-group {
  flex-wrap: nowrap;
}
.jj j2-popup-picker.j2-item .input-group-text.btn-picker i {
  font-size: 0.9rem !important;
}
.jj j2-popup-picker.j2-item .input-group-text.btn-eraser {
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.jj j2-popup-picker.j2-item[readonly] .btn-picker,
.jj j2-popup-picker.j2-item[readonly2] .btn-picker {
  pointer-events: none;
}
.jj j2-popup-picker.j2-item[readonly] .btn-eraser,
.jj j2-popup-picker.j2-item[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj td j2-popup-picker.j2-item div.input-group {
  flex-wrap: nowrap;
}
.jj td j2-popup-picker.j2-item div.input-group div.input-group-prepend {
  height: 22px;
}
.jj td j2-popup-picker.j2-item div.input-group .form-control {
  border-radius: 0;
}
.jj .print-on j2-icon.j2-item a.input-group-text {
  border: none;
}

/* ==JJItemPopupPicker.720.class End ================ */




/* ==JJItemFindPicker.720.class Start ================ */
/* ==JJItemFindPicker.720.class================ */
.jj j2-find-picker.j2-item .input-group-text.btn-picker i {
  font-size: 0.9rem !important;
}
.jj j2-find-picker.j2-item .input-group-text.btn-eraser {
  border-left: none;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.jj j2-find-picker.j2-item .input-group {
  flex-wrap: nowrap;
}
.jj j2-find-picker.j2-item .input-group .control-code,
.jj j2-find-picker.j2-item .input-group .btn-picker {
  flex: none;
}
.jj j2-find-picker.j2-item .input-group .control-code {
  width: 120px;
  border-right: 0;
}
.jj j2-find-picker.j2-item .input-group .control-name {
  flex-grow: 1;
  border-left: 0;
}
.jj j2-find-picker.j2-item .input-group .btn-picker {
  border-radius: 0;
  color: #495057;
  width: auto;
}
.jj j2-find-picker.j2-item[readonly] .btn-picker,
.jj j2-find-picker.j2-item[readonly2] .btn-picker {
  pointer-events: none;
}
.jj j2-find-picker.j2-item[readonly] .btn-eraser,
.jj j2-find-picker.j2-item[readonly2] .btn-eraser {
  pointer-events: none;
  display: none;
}
.jj j2-find-picker.j2-item[popuponly] .form-control {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj .jj-proxy-grid td j2-find-picker.j2-item div.input-group {
  flex-wrap: nowrap;
}
.jj .jj-proxy-grid td j2-find-picker.j2-item div.input-group .control-code {
  width: 0;
  flex-grow: 1;
}
.jj .jj-proxy-grid td j2-find-picker.j2-item div.input-group .control-code {
  display: none;
}
.jj .jj-proxy-grid td j2-find-picker.j2-item div.input-group div.input-group-prepend {
  height: 22px;
}
.jj .jj-proxy-grid td j2-find-picker.j2-item div.input-group .form-control {
  border-radius: 0;
}

/* ==JJItemFindPicker.720.class End ================ */




/* ==JJItemButton.720.class Start ================ */
/* ==JJItemButton.720.class================ */
.jj j2-button .control-content {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.jj j2-button .control-content span {
  text-overflow: ellipsis;
  overflow: hidden;
}
.jj j2-button button * {
  pointer-events: none;
}
.jj j2-button button.btn-success:focus {
  background-color: var(--success);
}
.jj j2-button button.btn-parimary:focus {
  background-color: var(--parimary);
}
.jj j2-button button.btn-secondary:focus {
  background-color: var(--secondary);
}
.jj j2-button button.btn-danger:focus {
  background-color: var(--danger);
}
.jj j2-button button.btn-info:focus {
  background-color: var(--info);
}
.jj j2-button button.btn-warning:focus {
  background-color: var(--warning);
}
.jj j2-button i.fa {
  margin-right: 0.2rem;
}

/* ==JJItemButton.720.class End ================ */




/* ==JJItemDataInfo.720.class Start ================ */
/* ==JJItemDataInfo.720.class================ */
.jj j2-datainfo {
  display: block;
  padding: 0;
  margin-top: -1rem;
  margin-bottom: 1rem;
  min-width: 25%;
  padding: 1rem;
}
.jj j2-datainfo .alert {
  border-radius: 0;
  margin-bottom: 0;
}
.jj j2-datainfo .alert span {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .jj j2-datainfo .alert span t {
    display: flex;
  }
}

/* ==JJItemDataInfo.720.class End ================ */




/* ==JJItemSubGrid.720.class Start ================ */
/* ==JJItemSubGrid.720.class================ */
.jj j2-subgrid.j2-item:hover .control-content .btn-group {
  opacity: 1;
}
.jj j2-subgrid.j2-item .control-content {
  overflow: visible;
}
.jj j2-subgrid.j2-item .control-content col:last-child {
  min-width: 100px;
}
.jj j2-subgrid.j2-item .control-content .grid-warp {
  overflow: auto;
}
.jj j2-subgrid.j2-item .control-content .btn-group {
  position: absolute;
  top: 0;
  top: -30px;
  right: 0px;
  color: white;
  opacity: 0;
  transition: all 0.2s ease-out;
}
.jj j2-subgrid.j2-item .control-content .help-block {
  top: 0;
}
.jj j2-subgrid.j2-item .control-content:focus-within {
  -webkit-box-shadow: initial;
  box-shadow: initial;
  border-width: 0;
}
.jj j2-subgrid.j2-item .form-control:invalid:focus {
  -webkit-box-shadow: initial;
  box-shadow: initial;
  border-width: 0;
}
.jj j2-subgrid.j2-item jj-pagination .pager li > a {
  background-color: var(--cyan);
  padding: 5px 2rem;
  border-radius: 5px;
}
.jj j2-subgrid.j2-item jj-pagination .pager li > a:hover {
  background-color: var(--cyan);
}
.jj j2-subgrid.j2-item jj-grid720 .grid-warp table tr {
  height: 28px;
}
.jj j2-subgrid.j2-item jj-grid720 .grid-warp table tr td {
  padding: 1px;
}
.jj j2-subgrid.j2-item jj-grid720 .grid-warp table tr td .form-group {
  vertical-align: middle;
}
.jj j2-subgrid.j2-item jj-grid720 .grid-warp table tr td j2-subgrid.j2-item .control-content .btn-group {
  width: 100%;
}
.jj j2-subgrid.j2-item jj-grid720 .grid-warp table tr td j2-subgrid.j2-item .control-content .btn-group a {
  padding: 0.2rem 0.4rem;
}
.jj j2-subgrid.j2-item jj-grid720 .grid-warp table tr td j2-subgrid.j2-item .control-content .btn-group a i {
  font-size: 14px!important;
}
.jj j2-subgrid.j2-item jj-grid720 .grid-warp table tr td .form-control {
  padding: 0 5px;
}
.jj jj-vhtml-editor j2-subgrid.j2-item .control-content {
  pointer-events: none!important;
}
.jj .print-on j2-subgrid.j2-item thead tr {
  border-top: 0.1px solid #ccc;
}

/* ==JJItemSubGrid.720.class End ================ */





/* ==InputComp.720.pkg.deploy End ================ */




/* ==DAO.720.pkg.deploy Start ================ */
/* ==DAO.720.pkg.deploy================ */
/* ==JJBatis.720.class Start ================ */
/* ==JJBatis.720.class================ */

/* ==JJBatis.720.class End ================ */




/* ==JJBatisDBA.720.class Start ================ */
/* ==JJBatisDBA.720.class================ */

/* ==JJBatisDBA.720.class End ================ */




/* ==JJDao.720.class Start ================ */
/* ==JJDao.720.class================ */

/* ==JJDao.720.class End ================ */




/* ==JJProxyModeler.720.class Start ================ */
/* ==JJProxyModeler.720.class================ */

/* ==JJProxyModeler.720.class End ================ */




/* ==MyAppJbatisDataObject.720.class Start ================ */
/* ==MyAppJbatisDataObject.720.class================ */

/* ==MyAppJbatisDataObject.720.class End ================ */




/* ==JJProxyGridBase.720.class Start ================ */
/* ==JJProxyGridBase.720.class================ */
.jj {
  /**
* 프린트 모드 설정
*/
}
.jj .jj-proxy-grid {
  min-width: 25%;
  display: block;
  position: relative;
  height: auto;
  padding-left: 0;
  padding-right: 0;
  /* 체크박스 없애기 */
  /* 체크박스 없애고 width 100% */
  /* width 100% */
}
.jj .jj-proxy-grid.has-buttons {
  margin-top: 30px;
}
.jj .jj-proxy-grid .grid-top {
  position: absolute;
  margin-top: -30px;
  display: flex;
  width: 100%;
}
.jj .jj-proxy-grid .grid-top .grid-title {
  flex-grow: 1;
  text-align: left;
  font-size: 1.2rem;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  width: 100%;
  padding-left: 0.3rem;
}
.jj .jj-proxy-grid .grid-top .filter-buttons {
  text-align: right;
  display: block;
  white-space: nowrap;
}
.jj .jj-proxy-grid .grid-top .filter-buttons button {
  display: initial;
  width: auto;
  line-height: initial;
}
.jj .jj-proxy-grid .grid-top .filter-buttons button * {
  pointer-events: none;
}
.jj .jj-proxy-grid[use-save="true"] .filter-buttons button[method="save"] {
  display: none;
}
.jj .jj-proxy-grid > .grid-toolbar {
  display: flex;
  -webkit-box-pack: justify!important;
  -ms-flex-pack: justify!important;
  justify-content: space-between !important;
}
.jj .jj-proxy-grid table {
  table-layout: fixed;
  width: 100px;
  border-spacing: 0px;
  border: 1px solid #cccccc;
  margin-bottom: 0px;
  border-collapse: separate;
  min-width: 100%;
  font-size: 13px;
  background-color: var(--white);
}
.jj .jj-proxy-grid table tr {
  line-height: 1.5rem;
}
.jj .jj-proxy-grid table .sizeEmpty {
  width: 100%;
  pointer-events: none;
}
.jj .jj-proxy-grid table > thead > tr {
  height: 29px;
}
.jj .jj-proxy-grid table > thead > tr > th,
.jj .jj-proxy-grid table > thead > tr > td {
  font-weight: bold;
  border-right: 1px solid #b1bcca;
  border-bottom: 1px solid #b1bcca;
  background-color: #e1eaf8;
  text-align: center;
  color: #393f48;
  padding: 2px;
  vertical-align: middle;
  position: relative;
}
.jj .jj-proxy-grid table > thead > tr > th.tr-check,
.jj .jj-proxy-grid table > thead > tr > td.tr-check {
  text-align: center;
}
.jj .jj-proxy-grid table > thead > tr > th.tr-check > i,
.jj .jj-proxy-grid table > thead > tr > td.tr-check > i {
  font-weight: bold;
  pointer-events: none;
}
.jj .jj-proxy-grid table > thead > tr > th.tr-check > i::before,
.jj .jj-proxy-grid table > thead > tr > td.tr-check > i::before {
  content: "\F096";
}
.jj .jj-proxy-grid table > thead > tr > th.tr-check.checked > i::before,
.jj .jj-proxy-grid table > thead > tr > td.tr-check.checked > i::before {
  content: "\F046";
}
.jj .jj-proxy-grid table > thead > tr > th.tr-todo,
.jj .jj-proxy-grid table > thead > tr > td.tr-todo {
  text-align: center;
}
.jj .jj-proxy-grid table > thead > tr > th.tr-todo > i,
.jj .jj-proxy-grid table > thead > tr > td.tr-todo > i {
  font-weight: bold;
  pointer-events: none;
}
.jj .jj-proxy-grid table > thead > tr > th.tr-todo > i::before,
.jj .jj-proxy-grid table > thead > tr > td.tr-todo > i::before {
  content: "\F086";
}
.jj .jj-proxy-grid table > thead > tr > th.tr-todo.has-todo > i::before,
.jj .jj-proxy-grid table > thead > tr > td.tr-todo.has-todo > i::before {
  content: "\F086";
}
.jj .jj-proxy-grid table > thead > tr > th.select,
.jj .jj-proxy-grid table > thead > tr > td.select,
.jj .jj-proxy-grid table > thead > tr > th.sort-clone,
.jj .jj-proxy-grid table > thead > tr > td.sort-clone {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1bcca), color-stop(100%, #ebf2fc));
}
.jj .jj-proxy-grid table > thead > tr > th > label,
.jj .jj-proxy-grid table > thead > tr > td > label {
  display: block;
  margin-bottom: 0;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj .jj-proxy-grid table > thead > tr > th[order] .sortIcon,
.jj .jj-proxy-grid table > thead > tr > td[order] .sortIcon {
  color: black;
}
.jj .jj-proxy-grid table > thead > tr > th .sortIcon,
.jj .jj-proxy-grid table > thead > tr > td .sortIcon {
  display: inline-block;
  width: 17px;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-left: 1px solid transparent;
  background-color: transparent;
  vertical-align: middle;
  color: transparent;
}
.jj .jj-proxy-grid table > thead > tr > th .sortIcon:hover,
.jj .jj-proxy-grid table > thead > tr > td .sortIcon:hover {
  border-left: 1px solid #b1bcca;
  background-color: ghostwhite;
  color: black;
  cursor: pointer;
}
.jj .jj-proxy-grid table > thead > tr > th .sortIcon i,
.jj .jj-proxy-grid table > thead > tr > td .sortIcon i {
  pointer-events: none;
}
.jj .jj-proxy-grid table > thead > tr > th[order="asc"] .sortIcon,
.jj .jj-proxy-grid table > thead > tr > td[order="asc"] .sortIcon {
  color: black;
}
.jj .jj-proxy-grid table > thead > tr > th[order="asc"] .sortIcon i::before,
.jj .jj-proxy-grid table > thead > tr > td[order="asc"] .sortIcon i::before {
  content: "\F15D";
}
.jj .jj-proxy-grid table > thead > tr > th[order="desc"] .sortIcon,
.jj .jj-proxy-grid table > thead > tr > td[order="desc"] .sortIcon {
  color: black;
}
.jj .jj-proxy-grid table > thead > tr > th[order="desc"] .sortIcon i::before,
.jj .jj-proxy-grid table > thead > tr > td[order="desc"] .sortIcon i::before {
  content: "\F15E";
}
.jj .jj-proxy-grid table > thead > tr > td {
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj .jj-proxy-grid table > thead > tr th:empty:before {
  content: " ";
  display: block;
  height: 24px;
}
.jj .jj-proxy-grid table > tbody {
  color: var(--dark);
}
.jj .jj-proxy-grid table > tbody > tr {
  height: 30px;
}
.jj .jj-proxy-grid table > tbody > tr.selected {
  background-color: #ddd;
}
.jj .jj-proxy-grid table > tbody > tr.checked {
  font-weight: 600;
}
.jj .jj-proxy-grid table > tbody > tr.checked > td.tr-check > i::before {
  content: "\F046";
}
.jj .jj-proxy-grid table > tbody > tr[_crud_="C"] {
  color: var(--info);
}
.jj .jj-proxy-grid table > tbody > tr[_crud_="U"] {
  color: var(--success);
  font-style: italic;
}
.jj .jj-proxy-grid table > tbody > tr[_crud_="D"] {
  color: var(--danger);
  text-decoration: line-through;
  font-style: italic;
  opacity: 0.8;
}
.jj .jj-proxy-grid table > tbody > tr[_crud_="D"] input {
  font-style: italic;
  text-decoration: line-through;
}
.jj .jj-proxy-grid table > tbody > tr > td {
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  font-weight: inherit;
  color: inherit;
  padding: 0 5px;
}
.jj .jj-proxy-grid table > tbody > tr > td .control-content .input-group-text.btn-picker,
.jj .jj-proxy-grid table > tbody > tr > td .control-content .input-group-text.btn-eraser {
  padding: 0 8px;
  height: 22px;
}
.jj .jj-proxy-grid table > tbody > tr > td.tr-num,
.jj .jj-proxy-grid table > tbody > tr > td.tr-check {
  text-align: center;
  vertical-align: middle;
}
.jj .jj-proxy-grid table > tbody > tr > td.tr-num *,
.jj .jj-proxy-grid table > tbody > tr > td.tr-check * {
  pointer-events: none;
}
.jj .jj-proxy-grid table > tbody > tr > td.tr-num i::before,
.jj .jj-proxy-grid table > tbody > tr > td.tr-check i::before {
  content: "\F096";
}
.jj .jj-proxy-grid table > tbody > tr > td.tr-todo {
  text-align: center;
}
.jj .jj-proxy-grid table > tbody > tr > td.tr-todo > i {
  font-weight: bold;
  pointer-events: none;
}
.jj .jj-proxy-grid table > tbody > tr > td.tr-todo.has-todo > i::before {
  content: "\F086";
}
.jj .jj-proxy-grid table > tbody > tr > td.noti {
  background-position: left top;
  background-size: 7px;
}
.jj .jj-proxy-grid table > tbody > tr > td img {
  height: 20px!important;
}
.jj .jj-proxy-grid table > tbody > tr > td i {
  font-size: 13px!important;
}
.jj .jj-proxy-grid table > tbody > tr > td .tag {
  border-radius: 1rem;
  border: 1px solid var(--info);
  display: inline;
  padding: 2px 5px;
  margin-right: 3px;
}
.jj .jj-proxy-grid table > tbody > tr > td .td-file-link * {
  pointer-events: none;
}
.jj .jj-proxy-grid table > tbody > tr > td.prog:after {
  position: absolute;
  width: var(--prog);
  content: '';
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--primary);
  z-index: 0;
  opacity: 0.2;
}
.jj .jj-proxy-grid table > tbody > tr > td j2-image div.control-content {
  resize: none;
}
.jj .jj-proxy-grid table > tfoot {
  background-color: bisque;
  border-top: 1px solid #b1bcca;
  border-right: 1px solid #b1bcca;
  background-color: #f1e5ea;
}
.jj .jj-proxy-grid table > tfoot > tr {
  line-height: 25px;
}
.jj .jj-proxy-grid table > tfoot > tr > td {
  padding: 1px 3px 0px 3px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  font-weight: inherit;
  background-color: #f1e5ea;
}
.jj .jj-proxy-grid table > tfoot > tr > td label {
  margin-bottom: 0;
}
.jj .jj-proxy-grid > .entire-grid-warp {
  position: relative;
}
.jj .jj-proxy-grid > .entire-grid-warp > .grid-warp {
  position: relative;
  top: 0px;
  overflow: auto;
}
.jj .jj-proxy-grid > .entire-grid-warp > .grid-warp .input-group-prepend {
  margin-right: 0;
}
.jj .jj-proxy-grid > .entire-grid-warp > .sArea {
  position: absolute;
  top: 0;
  width: 10px;
  right: 1px;
  float: right;
  outline: 1px solid #DDD;
  z-index: 3;
  height: 100%;
  background-color: #e4e4e4;
}
.jj .jj-proxy-grid > .entire-grid-warp > .sArea.wide {
  width: 50px;
}
.jj .jj-proxy-grid > .entire-grid-warp > .sArea > .uScrCur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 30px;
  display: block;
  background-color: rgba(0, 0, 0, 0.1);
  cursor: ns-resize;
}
.jj .jj-proxy-grid > .entire-grid-warp > .sArea:focus {
  outline: 1px solid #ddd !important;
}
.jj .jj-proxy-grid[readonly] .filter-buttons,
.jj .jj-proxy-grid[readonly2] .filter-buttons {
  display: none;
}
.jj .jj-proxy-grid jj-pagination .pager li > a {
  background-color: var(--cyan);
  padding: 5px 2rem;
  border-radius: 5px;
}
.jj .jj-proxy-grid jj-pagination .pager li > a:hover {
  background-color: var(--cyan);
}
.jj .jj-proxy-grid.no-scroll > .grid-warp {
  margin-right: 0px;
  overflow-x: hidden;
}
.jj .jj-proxy-grid.no-scroll .sArea {
  display: none;
}
.jj .jj-proxy-grid.no-scroll-y > .grid-warp {
  margin-right: 0px!important;
  overflow-y: hidden;
}
.jj .jj-proxy-grid.no-scroll-y .sArea {
  display: none;
}
.jj .jj-proxy-grid > .fix-grid-warp {
  position: absolute;
  top: 0;
  left: 0;
  border-right: 0px solid gray;
  overflow: hidden;
  background-color: white;
}
.jj .jj-proxy-grid > .fix-grid-warp table {
  border-right: 0;
  min-width: 1%;
}
.jj .jj-proxy-grid > .size-bar {
  position: absolute;
  border: 1px solid transparent;
  display: none;
  width: 5px;
  top: 0;
  z-index: 10;
  cursor: ew-resize;
}
.jj .jj-proxy-grid > .size-bar.on {
  display: block;
}
.jj .jj-proxy-grid > .allselectbox button {
  width: auto;
}
.jj .jj-proxy-grid.col-sorting {
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 1px solid blue;
}
.jj .jj-proxy-grid.col-sorting .sort-select-item {
  display: none;
}
.jj .jj-proxy-grid.resizing {
  cursor: ew-resize;
}
.jj .jj-proxy-grid.resizing .grid-warp,
.jj .jj-proxy-grid.resizing .fix-grid-warp {
  pointer-events: none;
}
.jj .jj-proxy-grid.resizing > .size-bar {
  pointer-events: none;
  border-right: 1px solid black;
}
.jj .jj-proxy-grid.has-pager > .grid-warp {
  margin-right: 0;
}
.jj .jj-proxy-grid.has-pager > .grid-warp > table {
  border-right-width: 0;
}
.jj .jj-proxy-grid.has-pager > jj-pagination {
  margin-top: 10px;
}
.jj .jj-proxy-grid .form-control {
  border-radius: 2px;
  padding: 0px 5px;
  height: auto;
  border: 0;
}
.jj .jj-proxy-grid button {
  padding: 0.1rem 0.5rem;
  line-height: 1rem;
  width: 100%;
}
.jj .jj-proxy-grid input[type="checkbox"] {
  border: 2px solid ccc;
  margin-top: 0;
  margin-right: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
}
.jj .jj-proxy-grid.fixed table .sizeEmpty {
  width: 0!important;
}
.jj .jj-proxy-grid.hide-todo .tr-todo {
  width: 0px!important;
  overflow: hidden;
}
.jj .jj-proxy-grid.hide-todo .fix-grid-warp {
  width: 101px!important;
}
.jj .jj-proxy-grid .tag-users .code-item {
  margin: 0.05rem 0.2rem 0.05rem 0;
  padding: 0.15rem 0.5rem 0.15rem 0.3rem;
  border-radius: 1rem;
  border: 1px solid var(--info);
}
.jj .jj-proxy-grid .tag-users .code-item .avatar {
  margin-top: -0.3rem;
  height: 1.25rem !important;
  width: 1.25rem !important;
}
.jj .jj-proxy-grid .tag-users .code-item .close {
  display: none;
}
.jj .jj-proxy-grid.grid110 .tr-check,
.jj .jj-proxy-grid.grid110 .tr-todo {
  display: none;
}
.jj .jj-proxy-grid.grid110 .fix-grid-warp {
  width: 51px!important;
}
.jj .jj-proxy-grid.grid120 .tr-check,
.jj .jj-proxy-grid.grid120 .tr-todo {
  display: none;
}
.jj .jj-proxy-grid.grid120 colgroup col.last {
  width: auto!important;
  min-width: 100px;
}
.jj .jj-proxy-grid.grid120 colgroup col.sizeEmpty {
  width: 0;
}
.jj .jj-proxy-grid.grid120 .fix-grid-warp {
  display: none;
}
.jj .jj-proxy-grid.grid100 colgroup col.last {
  width: auto!important;
  min-width: 100px;
}
.jj .jj-proxy-grid.grid100 colgroup col.sizeEmpty {
  width: 0;
}
.jj .jj-proxy-grid.grid100 .fix-grid-warp {
  display: none;
}
.jj .jj-proxy-grid.grid570 table {
  color: #0E3979;
  max-width: none;
  border-collapse: collapse;
  text-align: center;
  border-top: 3px solid #307bbb;
}
.jj .jj-proxy-grid.grid570 table th,
.jj .jj-proxy-grid.grid570 table td {
  position: relative;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
}
.jj .jj-proxy-grid.grid570 table > thead {
  background-color: #e1eaf2;
  font-weight: bold;
}
.jj .jj-proxy-grid.grid570 table > thead > tr > th {
  border-color: #B2BAD2;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  font-weight: bold;
  color: #0E3979;
}
.jj .jj-proxy-grid.grid570 table > tbody {
  background-color: #FFFFFF;
}
.jj .jj-proxy-grid.grid570 table > tbody > tr > th {
  background-color: #e1eaf2;
  border: 1px solid #B2BAD2;
}
.jj .jj-proxy-grid.grid570 table > tbody > tr > td {
  padding: 3px;
  border: 0;
  font-size: 100%;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
  overflow: hidden;
  word-wrap: normal;
  word-break: break-all;
  border-collapse: collapse;
}
.jj .jj-proxy-grid.grid570 table > tbody > tr > td.text-right {
  text-align: right;
}
.jj .jj-proxy-grid.grid570 table > tbody > tr > td.text-left {
  text-align: left;
}
.jj .jj-proxy-grid.grid570 table > tbody > tr[_crud_="U"] {
  background-color: #BCD8F1;
}
.jj .jj-proxy-grid.grid570 table > tbody > tr[_crud_="D"] {
  background-color: #FAB4B4;
}
.jj .jj-proxy-grid.grid570 table > tbody > tr[editable="false"] td * {
  display: none;
}
.jj .jj-proxy-grid.grid570 table > tbody > tr[editable="true"] {
  background-color: inherit;
}
.jj .jj-proxy-grid.grid570 table td input {
  width: 100%;
  border: 0;
}
.jj .jj-proxy-grid.grid570 table td input[type="number"] {
  text-align: right;
}
.jj .jj-proxy-grid.grid570 table td .jj-hitem {
  margin-bottom: 0!important;
}
.jj .jj-proxy-grid.grid570 table td .jj-hitem .form-control {
  padding: 0 0.5rem;
  height: 1.5rem;
  border: 1px solid #ccc;
}
.jj .jj-proxy-grid.grid570 table.fixed {
  table-layout: fixed;
}
.jj .jj-proxy-grid.grid570 table.fixed th,
.jj .jj-proxy-grid.grid570 table.fixed td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj .jj-proxy-grid.grid571 .tr-todo {
  display: none;
}
.jj .jj-proxy-grid.grid571 colgroup col.last {
  width: auto!important;
  min-width: 100px;
}
.jj .jj-proxy-grid.grid571 colgroup col.sizeEmpty {
  width: 0;
}
.jj .jj-proxy-grid.grid571 table {
  color: #0E3979;
  max-width: none;
  border-collapse: collapse;
  text-align: center;
  border-top: 3px solid #307bbb;
}
.jj .jj-proxy-grid.grid571 table th,
.jj .jj-proxy-grid.grid571 table td {
  position: relative;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
}
.jj .jj-proxy-grid.grid571 table > thead {
  background-color: #e1eaf2;
  font-weight: bold;
}
.jj .jj-proxy-grid.grid571 table > thead > tr > th {
  border-color: #B2BAD2;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  font-weight: bold;
  color: #0E3979;
}
.jj .jj-proxy-grid.grid571 table > tbody {
  background-color: #FFFFFF;
}
.jj .jj-proxy-grid.grid571 table > tbody > tr > th {
  background-color: #e1eaf2;
  border: 1px solid #B2BAD2;
}
.jj .jj-proxy-grid.grid571 table > tbody > tr > td {
  padding: 2px;
  border: 0;
  font-size: 100%;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
  overflow: hidden;
  word-wrap: normal;
  word-break: break-all;
  border-collapse: collapse;
}
.jj .jj-proxy-grid.grid571 table > tbody > tr > td.text-right {
  text-align: right;
}
.jj .jj-proxy-grid.grid571 table > tbody > tr > td.text-left {
  text-align: left;
}
.jj .jj-proxy-grid.grid571 table > tbody > tr[_crud_="U"] {
  background-color: #BCD8F1;
}
.jj .jj-proxy-grid.grid571 table > tbody > tr[_crud_="D"] {
  background-color: #FAB4B4;
}
.jj .jj-proxy-grid.grid571 table > tbody > tr[editable="false"] td * {
  display: none;
}
.jj .jj-proxy-grid.grid571 table > tbody > tr[editable="true"] {
  background-color: inherit;
}
.jj .jj-proxy-grid.grid571 table td input {
  border-width: 0;
}
.jj .jj-proxy-grid.grid571 table td input[type="number"] {
  text-align: right;
}
.jj .jj-proxy-grid.grid571 table td input[type="checkbox"] {
  border-width: 2px;
}
.jj .jj-proxy-grid.grid571 table td .jj-hitem {
  margin-bottom: 0!important;
}
.jj .jj-proxy-grid.grid571 table td .jj-hitem .form-control {
  padding: 0 0.5rem;
  height: 1.5rem;
  border: 1px solid #ccc;
}
.jj .jj-proxy-grid.grid571 table.fixed {
  table-layout: fixed;
}
.jj .jj-proxy-grid.grid571 table.fixed th,
.jj .jj-proxy-grid.grid571 table.fixed td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj .jj-proxy-grid.grid571 .fix-grid-warp {
  display: none;
}
.jj .jj-proxy-grid.grid571[page-type="scroll"] .sArea,
.jj .jj-proxy-grid.grid571[page-type="scroll"] .uScrCur {
  border-radius: 1px;
}
.jj .jj-proxy-grid[lock-screen] {
  opacity: 0.5;
  pointer-events: none;
}
.jj .jj-proxy-grid.touching {
  background-color: yellow!important;
}
.jj .jj-proxy-grid.touching.touch-move {
  background-color: red!important;
}
.jj .jj-proxy-grid.mt-30 {
  margin-top: 30px;
}
@media (max-width: 767.98px) {
  .jj jj-proxy-grid jj-pagination .rownum,
  .jj .jj-proxy-grid jj-pagination .rownum {
    display: block!important;
    font-size: 0.9rem;
    width: 60%!important;
  }
  .jj jj-proxy-grid jj-pagination nav,
  .jj .jj-proxy-grid jj-pagination nav {
    margin-top: 4px;
    position: absolute;
    right: 60px;
  }
  .jj jj-proxy-grid jj-pagination select.form-control,
  .jj .jj-proxy-grid jj-pagination select.form-control {
    display: block!important;
    position: absolute;
    right: 0;
    padding: 5px;
    margin-top: 0!important;
    width: 55px!important;
  }
  .jj jj-proxy-grid jj-pagination .no-data *,
  .jj .jj-proxy-grid jj-pagination .no-data * {
    display: none;
  }
}
.jj .print-on .print-title {
  font-size: 24px;
  text-align: center;
  padding: 0.5rem;
  position: relative;
}
.jj .print-on .print-title span {
  font-size: small;
  position: absolute;
  right: 0.5rem;
  line-height: 36px;
}
.jj .print-on .jj-proxy-grid .filter-buttons {
  display: none;
}
.jj .print-on .jj-proxy-grid table tbody tr.selected {
  color: inherit!important;
  font-weight: normal!important;
}
.jj .jj-proxy-grid td > .td-p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj .jj-proxy-grid[heightStyle] {
  --gh-height: 60px;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr {
  height: var(--gh-height);
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td {
  vertical-align: top;
  white-space: normal;
  padding: 4px 5px;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td .td-p {
  text-overflow: initial;
  overflow: auto;
  height: calc(var(--gh-height) - 9px);
  white-space: break-spaces;
  text-align: left;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td .td-p::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td img {
  vertical-align: top;
  max-height: calc(var(--gh-height) - 9px);
  height: auto!important;
  width: auto;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-fileone {
  height: calc(var(--gh-height) - 9px) !important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-fileone .control-content {
  height: 100%!important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-fileone .control-content .input-group {
  height: auto !important;
  overflow-x: hidden;
  overflow-y: auto;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-fileone .control-content .input-group .btn-group {
  display: flex;
  height: auto !important;
  flex-wrap: wrap;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-fileone .control-content .input-group .btn-group .input-group-text {
  width: 32px;
  height: 22px;
  padding: 0.2rem 0.4rem !important;
  flex-grow: 1;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-fileone .control-content .input-group .btn-group .input-group-text i {
  font-size: 14px !important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-file,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-mp4 {
  height: calc(var(--gh-height) - 9px) !important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image .control-content,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-file .control-content,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-mp4 .control-content {
  overflow: auto;
  height: 100%;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image .control-content::-webkit-scrollbar,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-file .control-content::-webkit-scrollbar,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-mp4 .control-content::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image .control-content img,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-file .control-content img,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-mp4 .control-content img {
  top: 0!important;
  transform: translate(-50%, 0);
  height: auto!important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image .control-content .btn-area,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-file .control-content .btn-area,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-mp4 .control-content .btn-area {
  flex-direction: column;
  justify-content: start;
  height: auto!important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image .control-content .btn-area .btn-group,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-file .control-content .btn-area .btn-group,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-mp4 .control-content .btn-area .btn-group {
  flex-direction: row;
  overflow: auto!important;
  height: auto!important;
  flex-wrap: wrap;
  position: initial!important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image .control-content .input-area,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-file .control-content .input-area,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-mp4 .control-content .input-area {
  overflow: auto!important;
  height: auto!important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image .control-content .input-area .btn-group,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-file .control-content .input-area .btn-group,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-mp4 .control-content .input-area .btn-group {
  display: flex;
  flex-wrap: wrap;
  height: auto!important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-image .control-content .input-group-text {
  background-color: rgba(255, 255, 255, 0.6);
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-textarea,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-texthtml,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-tag {
  height: calc(var(--gh-height) - 9px) !important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-textarea .control-content > textarea,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-texthtml .control-content > textarea,
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-tag .control-content > textarea {
  padding: 5px;
  height: calc(var(--gh-height) - 9px) !important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-radio {
  height: calc(var(--gh-height) - 9px) !important;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-radio .control-content {
  height: auto;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td j2-radio .control-content::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td .tag-items {
  white-space: normal;
  margin: 0px;
  padding: 0px;
  height: calc(var(--gh-height) - 9px) !important;
  overflow-y: auto;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td .tag-items::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td .tag-items .code-item {
  margin: 0 5px 5px 0;
}
.jj .jj-proxy-grid[heightStyle] table > tbody > tr td i {
  overflow: hidden;
}
.jj .jj-proxy-grid[heightStyle="gh-60"] {
  --gh-height: 60px;
}
.jj .jj-proxy-grid[heightStyle="gh-90"] {
  --gh-height: 90px;
}
.jj .jj-proxy-grid[heightStyle="gh-120"] {
  --gh-height: 120px;
}
.jj .jj-proxy-grid[heightStyle="gh-150"] {
  --gh-height: 150px;
}
.jj .jj-proxy-grid[page-type="scroll"] .btn-toolbar {
  right: 12px;
}
.jj .jj-proxy-grid[page-type="button"] .btn-toolbar {
  right: 0px;
}
.jj .jj-proxy-grid .btn-toolbar {
  position: absolute;
  top: -30px;
  right: 0;
  color: white;
  opacity: 0.7;
  transition: all 0.1s ease-out;
  visibility: hidden;
}
.jj .jj-proxy-grid .btn-toolbar .btn * {
  pointer-events: none;
}
.jj .jj-proxy-grid:hover .btn-toolbar {
  top: 0;
  visibility: visible;
}

/* ==JJProxyGridBase.720.class End ================ */




/* ==JJDataExpoler.640.class Start ================ */
/* ==JJDataExpoler.640.class================ */
.jj jj-data-expoler {
  position: relative;
  display: flex;
  flex-direction: column;
}
.jj jj-data-expoler > ul {
  flex-grow: 1;
}
.jj jj-data-expoler > .helper {
  flex: none;
  background-color: var(--light);
}

/* ==JJDataExpoler.640.class End ================ */




/* ==MyForm.720.class Start ================ */
/* ==MyForm.720.class================ */

/* ==MyForm.720.class End ================ */




/* ==JJProxyTable.720.class Start ================ */
/* ==JJProxyTable.720.class================ */

/* ==JJProxyTable.720.class End ================ */




/* ==JJProxyGrid.720.class Start ================ */
/* ==JJProxyGrid.720.class================ */

/* ==JJProxyGrid.720.class End ================ */




/* ==JJProxyForm.720.class Start ================ */
/* ==JJProxyForm.720.class================ */
.jj jj-proxy-form {
  min-width: 25%;
}
.jj jj-proxy-form.jj-data-form {
  --label-width: 120px;
  position: relative;
  display: flow-root;
  padding: 1rem 0;
  background-color: var(--white);
  border-radius: 3px;
  overflow: visible;
  padding-top: 0;
}
.jj jj-proxy-form.jj-data-form > * {
  float: left;
  width: 100%;
}
.jj jj-proxy-form.jj-data-form hr {
  min-height: 10px;
}
.jj jj-proxy-form.jj-data-form:empty {
  height: 200px;
}
.jj jj-proxy-form.jj-data-form:empty::after {
  content: "폼에 표시할 아이템을 입력하세요.";
}
.jj jj-proxy-form.jj-data-form t * {
  pointer-events: none;
}
.jj jj-proxy-form.jj-data-form[lock-screen] {
  pointer-events: none;
}
.jj jj-proxy-form.jj-data-form[lock-screen] .help-block {
  display: none;
}
.jj jj-proxy-form.jj-data-form[lock-screen]::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--light);
  z-index: 1;
  opacity: 0.6;
}
.jj jj-proxy-form.jj-data-form .j2-item {
  display: inline-flex;
  float: left;
}
.jj jj-proxy-form.jj-data-form.form-horizontal .form-group,
.jj jj-proxy-form.jj-data-form[box-type="form-horizontal"] .form-group {
  display: flex;
  flex-direction: row;
}
.jj jj-proxy-form.jj-data-form.form-horizontal .form-group > .control-label,
.jj jj-proxy-form.jj-data-form[box-type="form-horizontal"] .form-group > .control-label {
  flex: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
  margin-bottom: auto;
}
.jj jj-proxy-form.jj-data-form.form-horizontal .form-group > .control-content,
.jj jj-proxy-form.jj-data-form[box-type="form-horizontal"] .form-group > .control-content {
  flex-grow: 1;
}
.jj jj-proxy-form.jj-data-form.form-horizontal .form-group > .control-content input[type='range'],
.jj jj-proxy-form.jj-data-form[box-type="form-horizontal"] .form-group > .control-content input[type='range'] {
  margin: 0;
}
.jj jj-proxy-form.jj-data-form.form-horizontal jj-proxy-joingrid .form-group,
.jj jj-proxy-form.jj-data-form[box-type="form-horizontal"] jj-proxy-joingrid .form-group,
.jj jj-proxy-form.jj-data-form.form-horizontal jj-proxy-childgrid .form-group,
.jj jj-proxy-form.jj-data-form[box-type="form-horizontal"] jj-proxy-childgrid .form-group {
  display: block;
}
.jj jj-proxy-form.jj-data-form .box-bottom-line {
  margin-top: 0px;
  border: 0;
  border-top: 1px solid #ccc;
  width: 100%;
  float: left;
  min-height: 15px;
}
.jj jj-proxy-form.jj-data-form hr {
  border-top: 1px solid var(--secondary);
}
.jj jj-proxy-form.jj-data-form.form-box,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] {
  display: inline-block;
  width: 100%;
  padding: 0;
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 0px;
  margin-left: 0!important;
  margin-right: 0!important;
}
.jj jj-proxy-form.jj-data-form.form-box [class*='col-'],
.jj jj-proxy-form.jj-data-form[box-type="form-box"] [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.jj jj-proxy-form.jj-data-form.form-box jj-proxy-joingrid .form-group,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] jj-proxy-joingrid .form-group,
.jj jj-proxy-form.jj-data-form.form-box jj-proxy-childgrid .form-group,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] jj-proxy-childgrid .form-group {
  display: block;
}
.jj jj-proxy-form.jj-data-form.form-box jj-proxy-joingrid .form-group i.fa-link,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] jj-proxy-joingrid .form-group i.fa-link,
.jj jj-proxy-form.jj-data-form.form-box jj-proxy-childgrid .form-group i.fa-link,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] jj-proxy-childgrid .form-group i.fa-link {
  color: initial;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group {
  min-width: 12.5%;
  display: flex!important;
  flex-direction: row!important;
  border: 1px solid #ccc;
  border-width: 1px 0px 0px 1px;
  padding: 0;
  margin-bottom: 0;
  background-color: var(--light);
}
.jj jj-proxy-form.jj-data-form.form-box .form-group[required] .control-label::before,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group[required] .control-label::before {
  content: "";
  margin-left: 0;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group[required] .control-label,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group[required] .control-label {
  padding-left: 0.5rem !important;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group .control-label,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group .control-label {
  padding: 0.5rem;
  margin: 0;
  flex: none;
  min-width: var(--label-width);
}
.jj jj-proxy-form.jj-data-form.form-box .form-group .control-content,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group .control-content {
  border-left: 1px solid #ced4da;
  flex-grow: 1;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group .control-content .form-control,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group .control-content .form-control {
  border-width: 0;
  border-radius: 0;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group .control-content .input-group-prepend,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group .control-content .input-group-prepend {
  margin-right: 0;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group .control-content .input-group-prepend .input-group-text,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group .control-content .input-group-prepend .input-group-text {
  border-width: 0;
  border-radius: 0;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group .control-content .input-group-append .input-group-text,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group .control-content .input-group-append .input-group-text {
  border-width: 0 0 0 1px;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group .control-content .help-block,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group .control-content .help-block {
  top: 0;
  right: 0;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group .control-content .input-group-text,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group .control-content .input-group-text {
  border-width: 0;
  border-radius: 0;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group:focus-within,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group:focus-within {
  z-index: 10;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group.width-auto .control-content,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group.width-auto .control-content {
  background-color: white;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group.width-auto .control-content .form-control,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group.width-auto .control-content .form-control {
  width: auto;
  border-right: 1px solid #ccc;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group.info .control-content,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group.info .control-content {
  position: relative;
}
.jj jj-proxy-form.jj-data-form.form-box .form-group.info .control-content::before,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] .form-group.info .control-content::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F06A";
  position: absolute;
  top: 0.5rem;
  left: -1rem;
  color: var(--blue);
}
.jj jj-proxy-form.jj-data-form.form-box jj-item-check .control-content,
.jj jj-proxy-form.jj-data-form[box-type="form-box"] jj-item-check .control-content {
  padding-left: 10px;
}
.jj jj-proxy-form.jj-data-form.form-horizontal .form-group,
.jj jj-proxy-form.jj-data-form[box-type="form-horizontal"] .form-group {
  min-width: 12.5%;
}
.jj jj-proxy-form.jj-data-form.form-horizontal .form-group .control-label,
.jj jj-proxy-form.jj-data-form[box-type="form-horizontal"] .form-group .control-label {
  min-width: var(--label-width);
}
.jj jj-proxy-form.jj-data-form table.form-table > tbody > tr th {
  background-color: #f1f5f7;
  padding: 0.5rem;
}
.jj jj-proxy-form.jj-data-form table.form-table > tbody > tr td {
  padding: 0.2rem;
}
.jj jj-proxy-form.jj-data-form table.form-table > tbody > tr td .form-control {
  padding: 0.2rem 0.5rem;
  height: 2rem;
}
.jj jj-proxy-form.jj-data-form table.form-table > tbody > tr td textarea.form-control {
  height: initial;
}
.jj jj-proxy-form.jj-data-form table.form-table > tbody > tr td [type='checkbox'] {
  margin-top: 5px;
}
.jj jj-proxy-form.jj-data-form > header {
  border-bottom: none;
}
.jj jj-proxy-form.jj-data-form > footer {
  position: absolute;
  bottom: 0;
  padding: 1rem;
  text-align: center;
  background-color: var(--light);
}
.jj jj-proxy-form.jj-data-form.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 0;
  padding-top: 10px;
  width: 80%;
  overflow: auto;
  z-index: 110;
  transition: all 0.2s ease-out;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  box-shadow: 0 0 8px 0 rgba(154, 161, 171, 0.5) !important;
}
.jj jj-proxy-form.jj-data-form.popup > .shadow-box {
  display: flex;
}
.jj jj-proxy-form.jj-data-form.popup.show {
  display: block;
}
.jj jj-proxy-form.jj-data-form.popup.show.right {
  transform: none;
  top: 110px;
  right: 0;
  left: auto;
  bottom: 0;
  width: 60%;
  padding-top: 30px!important;
}
.jj jj-proxy-form.jj-data-form.popup.show.right > .shadow-box {
  position: absolute;
  top: 0;
  bottom: auto;
  padding: 0;
  margin: 0;
}
.jj jj-proxy-form.jj-data-form.popup.show.full {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
  width: auto;
  transform: none;
  padding-top: 30px!important;
}
.jj jj-proxy-form.jj-data-form.popup.show.full > .shadow-box {
  position: absolute;
  top: 0;
  bottom: auto;
  padding: 0;
  margin: 0;
}
.jj jj-proxy-form.jj-data-form.popup::before {
  position: fixed;
  background-color: var(--light);
  content: " ";
}
.jj jj-proxy-form.jj-data-form.popup[crud="C"] > .shadow-box .btn-cancel {
  display: none;
}
.jj jj-proxy-form.jj-data-form > .shadow-box {
  display: none;
  position: sticky;
  bottom: -10px;
  left: 0;
  background-color: var(--gray);
  margin-bottom: 0;
  padding: 0 15px;
  margin: 0 -15px;
}
.jj jj-proxy-form.jj-data-form > .shadow-box > .btn {
  flex-grow: 1;
}
.jj jj-proxy-form.jj-data-form > .shadow-box .shadow-box-warp {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0.4;
  width: auto;
  pointer-events: none;
}
.jj jj-vhtml-editor jj-proxy-form.popup {
  position: relative!important;
  right: 0!important;
  display: inline-block !important;
  top: 0!important;
  left: 0!important;
  transform: none!important;
}
.jj jj-vhtml-editor jj-proxy-form.popup > .shadow-box {
  display: none!important;
}
@media (max-width: 768px) {
  .jj .own-user {
    display: block;
  }
  .jj jj-proxy-form.popup {
    width: 100%!important;
    height: calc(100% - 70px);
    overflow: auto!important;
    top: 71px!important;
    transform: none!important;
    left: 0!important;
  }
  .jj jj-proxy-form.popup.show {
    right: 0!important;
    display: block!important;
    padding-top: 30px;
  }
  .jj jj-proxy-form.popup.show > .shadow-box {
    position: fixed;
    top: 70px;
    bottom: auto;
    padding: 0;
    margin: 0;
  }
  .jj jj-proxy-form.popup.show > .shadow-box > .shadow-box-warp {
    border: 0;
  }
  .jj jj-proxy-form.popup.full.show {
    top: -70px !important;
    bottom: 0px!important;
    height: auto;
  }
}
.jj jj-proxy-form.print-on {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10000;
  margin: 0!important;
  background-color: white;
  padding: 2rem!important;
}
.jj jj-proxy-form.print-on .j2-item .form-control {
  border-color: transparent;
}
.jj[lang="en-US"] jj-proxy-form.jj-data-form:empty::after {
  content: "Enter the items to display on the form";
}
.jj jj-proxy-form.font-size .j2-item {
  font-size: inherit;
}

/* ==JJProxyForm.720.class End ================ */




/* ==JJProxyDataForm.720.class Start ================ */
/* ==JJProxyDataForm.720.class================ */
.jj jj-proxy-dataform.jj-data-form {
  --label-width: 120px;
  display: flow-root;
  padding: 1rem 0;
  background-color: var(--white);
  border: 1px solid #e7eaed;
  border-radius: 3px;
  overflow: visible;
}
.jj jj-proxy-dataform.jj-data-form > * {
  float: left;
  width: -webkit-fill-available;
}
.jj jj-proxy-dataform.jj-data-form:empty {
  height: 200px;
}
.jj jj-proxy-dataform.jj-data-form:empty::after {
  content: "폼에 표시할 아이템을 입력하세요";
}
.jj jj-proxy-dataform.jj-data-form t {
  pointer-events: none;
}
.jj jj-proxy-dataform.jj-data-form[lock-screen="true"] {
  opacity: 0.8;
  pointer-events: none;
}
.jj jj-proxy-dataform.jj-data-form .j2-item {
  display: inline-flex;
}
.jj jj-proxy-dataform.jj-data-form.form-horizontal .form-group,
.jj jj-proxy-dataform.jj-data-form[box-type="form-horizontal"] .form-group {
  display: flex;
  flex-direction: row;
}
.jj jj-proxy-dataform.jj-data-form.form-horizontal .form-group > .control-label,
.jj jj-proxy-dataform.jj-data-form[box-type="form-horizontal"] .form-group > .control-label {
  flex: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
  margin-bottom: auto;
}
.jj jj-proxy-dataform.jj-data-form.form-horizontal .form-group > .control-content,
.jj jj-proxy-dataform.jj-data-form[box-type="form-horizontal"] .form-group > .control-content {
  flex-grow: 1;
}
.jj jj-proxy-dataform.jj-data-form.form-horizontal .form-group > .control-content input[type='range'],
.jj jj-proxy-dataform.jj-data-form[box-type="form-horizontal"] .form-group > .control-content input[type='range'] {
  margin: 0;
}
.jj jj-proxy-dataform.jj-data-form .box-bottom-line {
  margin-top: 0px;
  border: 0;
  border-top: 1px solid #ccc;
  width: 100%;
}
.jj jj-proxy-dataform.jj-data-form hr {
  border-top: 1px solid var(--secondary);
}
.jj jj-proxy-dataform.jj-data-form.form-box,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] {
  display: inline-block;
  width: 100%;
  padding: 0;
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 0px;
  margin-left: 0!important;
  margin-right: 0!important;
}
.jj jj-proxy-dataform.jj-data-form.form-box [class*='col-'],
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group {
  display: flex!important;
  flex-direction: row!important;
  border: 1px solid #ccc;
  border-width: 1px 0px 0px 1px;
  padding: 0;
  margin-bottom: 0;
  background-color: var(--light);
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group[required] .control-label::before,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group[required] .control-label::before {
  content: "";
  margin-left: 0;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group[required] .control-label,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group[required] .control-label {
  padding-left: 0.5rem !important;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group .control-label,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group .control-label {
  padding: 0.5rem;
  margin-bottom: 0;
  font-weight: 600;
  flex: none;
  min-width: var(--label-width);
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group .control-content,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group .control-content {
  border-left: 1px solid #ced4da;
  flex-grow: 1;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group .control-content .form-control,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group .control-content .form-control {
  border-width: 0;
  border-radius: 0;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group .control-content .input-group-append .input-group-text,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group .control-content .input-group-append .input-group-text {
  border-width: 0 0 0 1px;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group .control-content .help-block,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group .control-content .help-block {
  top: 0;
  right: 0;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group:focus-within,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group:focus-within {
  z-index: 10;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group.width-auto .control-content,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group.width-auto .control-content {
  background-color: white;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group.width-auto .control-content .form-control,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group.width-auto .control-content .form-control {
  width: auto;
  border-right: 1px solid #ccc;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group.info .control-content,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group.info .control-content {
  position: relative;
}
.jj jj-proxy-dataform.jj-data-form.form-box .form-group.info .control-content::before,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] .form-group.info .control-content::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F06A";
  position: absolute;
  top: 0.5rem;
  left: -1rem;
  color: var(--blue);
}
.jj jj-proxy-dataform.jj-data-form.form-box jj-item-check .control-content,
.jj jj-proxy-dataform.jj-data-form[box-type="form-box"] jj-item-check .control-content {
  padding-left: 10px;
}
.jj jj-proxy-dataform.jj-data-form.form-horizontal .form-group,
.jj jj-proxy-dataform.jj-data-form[box-type="form-horizontal"] .form-group {
  padding: 0;
}
.jj jj-proxy-dataform.jj-data-form.form-horizontal .form-group .control-label,
.jj jj-proxy-dataform.jj-data-form[box-type="form-horizontal"] .form-group .control-label {
  min-width: var(--label-width);
}
.jj jj-proxy-dataform.jj-data-form table.form-table > tbody > tr th {
  background-color: #f1f5f7;
  padding: 0.5rem;
  font-weight: 600;
}
.jj jj-proxy-dataform.jj-data-form table.form-table > tbody > tr td {
  padding: 0.2rem;
}
.jj jj-proxy-dataform.jj-data-form table.form-table > tbody > tr td .form-control {
  padding: 0.2rem 0.5rem;
  height: 2rem;
}
.jj jj-proxy-dataform.jj-data-form table.form-table > tbody > tr td textarea.form-control {
  height: initial;
}
.jj jj-proxy-dataform.jj-data-form table.form-table > tbody > tr td [type='checkbox'] {
  margin-top: 5px;
}

/* ==JJProxyDataForm.720.class End ================ */




/* ==JJProxyFilter.720.class Start ================ */
/* ==JJProxyFilter.720.class================ */
.jj jj-proxy-filter {
  min-width: 25%;
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0.7rem;
  background-color: var(--white);
  border: 1px solid #e7eaed;
  border-radius: 5px;
  margin-bottom: 1rem;
}
.jj jj-proxy-filter.invalid[required]::after {
  position: absolute;
  top: 0px;
  right: 5px;
  color: var(--danger);
  content: "조건은 반드시 1개 이상 있어야합니다";
}
.jj jj-proxy-filter > .filter-col {
  flex-grow: 1;
}
.jj jj-proxy-filter > .filter-col .j2-item {
  display: inline-flex;
  margin-bottom: 0;
}
.jj jj-proxy-filter > .filter-col:empty {
  width: 100%;
  height: 50px;
}
.jj jj-proxy-filter > .filter-buttons {
  padding-left: 1rem;
  flex: none;
  max-width: 40%;
}
.jj jj-proxy-filter > .filter-buttons button * {
  pointer-events: none;
}
.jj jj-proxy-filter > .filter-buttons button {
  margin-bottom: 3px;
  border-radius: 0 5px;
}
.jj jj-proxy-filter > .filter-buttons button .badge {
  position: absolute;
  top: 1px;
  right: 1px;
}
.jj jj-proxy-filter > .filter-buttons button[hidden] {
  display: initial!important;
  pointer-events: none;
  opacity: 0.2;
}
.jj jj-proxy-filter.use-filter {
  flex-wrap: wrap;
}
.jj jj-proxy-filter.use-filter > .filter-col {
  width: 70%;
}
.jj jj-proxy-filter.use-filter > .filter-buttons {
  width: 25%;
}
.jj jj-proxy-filter.use-filter > jj-app-filter {
  width: 100%;
  padding: 10px 10px 0;
  border-top: 1px solid #ccc;
  margin-top: 10px;
}
.jj jj-proxy-filter[box-type="Bottom"],
.jj jj-proxy-filter[box-type="bottom"] {
  flex-direction: column;
}
.jj jj-proxy-filter[box-type="Bottom"] .filter-buttons,
.jj jj-proxy-filter[box-type="bottom"] .filter-buttons {
  text-align: right;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 1200px) {
  .jj jj-proxy-filter {
    flex-direction: column;
    padding: 0.7rem 0;
  }
  .jj jj-proxy-filter .filter-col {
    order: 2;
  }
  .jj jj-proxy-filter .filter-buttons {
    width: 100%;
    max-width: 100%;
    order: 1;
    margin-bottom: 1rem;
    justify-content: flex-start;
  }
  .jj jj-proxy-filter .filter-buttons [method="excel"],
  .jj jj-proxy-filter .filter-buttons [method="print"],
  .jj jj-proxy-filter .filter-buttons [method="upload"],
  .jj jj-proxy-filter .filter-buttons [method="copy"] {
    display: none;
  }
}

/* ==JJProxyFilter.720.class End ================ */




/* ==ProxyTable.720.class Start ================ */
/* ==ProxyTable.720.class================ */

/* ==ProxyTable.720.class End ================ */




/* ==JJProxy.720.class Start ================ */
/* ==JJProxy.720.class================ */

/* ==JJProxy.720.class End ================ */




/* ==JJProxyChart.720.class Start ================ */
/* ==JJProxyChart.720.class================ */
.jj j2-proxy-chart {
  min-width: 25%;
  display: block!important;
  position: relative;
  min-height: 200px;
  padding-right: 0!important;
  padding-left: 0!important;
  margin-bottom: 15px;
}
.jj j2-proxy-chart > jj-chart {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

/* ==JJProxyChart.720.class End ================ */




/* ==JJProxyPivot.720.class Start ================ */
/* ==JJProxyPivot.720.class================ */
.jj j2-proxy-pivot {
  display: block!important;
  position: relative;
  min-height: 200px;
  min-width: 25%;
}
.jj j2-proxy-pivot > jj-pivot-table {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.jj j2-proxy-pivot > jj-pivot-table:hover .btn-group {
  top: 0;
}
.jj j2-proxy-pivot > jj-pivot-table div.table-body-warp {
  margin-top: 1px!important;
  margin-bottom: 1px!important;
  margin-left: 1px!important;
}
.jj j2-proxy-pivot > jj-pivot-table table {
  width: 100%;
}
.jj j2-proxy-pivot > jj-pivot-table th {
  white-space: inherit;
  overflow: visible;
  word-break: break-word;
}
.jj j2-proxy-pivot > jj-pivot-table .btn-group {
  position: absolute;
  top: -50px;
  right: 0px;
  color: white;
  opacity: 0.7;
  transition: all 0.2s ease-out;
}
.jj j2-proxy-pivot > jj-pivot-table .btn-group .btn * {
  pointer-events: none;
}

/* ==JJProxyPivot.720.class End ================ */




/* ==JJProxyCalendar.720.class Start ================ */
/* ==JJProxyCalendar.720.class================ */
.jj jj-proxy-calendar {
  display: block!important;
  position: relative;
  min-height: 400px;
  min-width: 25%;
  height: 100%;
}
.jj jj-proxy-calendar .fc-sun .fc-day-number,
.jj jj-proxy-calendar .fc-sat .fc-day-number {
  color: red;
}
.jj jj-proxy-calendar .fc-event .fc-content {
  font-size: 14px;
  color: inherit!important;
}
.jj jj-proxy-calendar .fc-time-grid-event .fc-content {
  color: white;
}
.jj jj-proxy-calendar .fc-event.small {
  padding: 0;
}
.jj jj-proxy-calendar[event-view="small"] .fc-event {
  padding: 0;
}
.jj jj-proxy-calendar[event-view="no-time"] .fc-event {
  padding: 0;
}
.jj jj-proxy-calendar[event-view="no-time"] .fc-event .fc-time {
  display: none;
}
.jj jj-proxy-calendar[is-wrap] .fc-day-grid-event .fc-content {
  white-space: pre-wrap;
}
.jj jj-proxy-calendar .fc-ltr .fc-time-grid .fc-event-container {
  margin: -15px 2.5% 0 2px;
}

/* ==JJProxyCalendar.720.class End ================ */




/* ==JJProxyKanban.720.class Start ================ */
/* ==JJProxyKanban.720.class================ */
.jj jj-proxy-kanban {
  display: flex;
  position: relative;
  flex-direction: row;
  min-height: 400px;
  min-width: 25%;
  height: 100%;
  overflow: auto;
  background-color: white;
  padding: 0.5rem;
  border: 1px solid #e7eaed;
}
.jj jj-proxy-kanban > .card {
  flex: none;
  width: 300px;
  border-width: 0;
}
.jj jj-proxy-kanban > .card .card-body {
  padding: 1px;
  overflow: hidden;
}
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card {
  margin-bottom: 0;
  border: none;
  box-shadow: none;
}
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card .card-title,
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card .card-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card .card-body {
  padding: 5px;
}
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card .card-body:empty {
  padding: 0;
}
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card .card-body .card-title {
  margin: 0;
  color: var(--dark);
}
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card .list-group .list-group-item {
  border: none;
  padding: 2px 5px!important;
  text-align: left;
}
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card .list-group .list-group-item small {
  display: none;
}
.jj jj-proxy-kanban > .card .card-body .list-group-item > .card .list-group .list-group-item t {
  padding-left: 0!important;
}

/* ==JJProxyKanban.720.class End ================ */




/* ==JJProxyCard.720.class Start ================ */
/* ==JJProxyCard.720.class================ */
.jj jj-proxy-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: 0.5rem;
  padding-top: 17px;
  overflow: auto;
  background-color: white;
  min-height: 200px;
  min-width: 25%;
}
.jj jj-proxy-card .card-wrap {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 10px;
}
.jj jj-proxy-card .card-wrap .card {
  flex: none;
  -webkit-box-flex: 0;
}
.jj jj-proxy-card .card-wrap .card .card-img-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  overflow: hidden;
}
.jj jj-proxy-card .card-wrap .card .card-img-top img {
  max-width: 100%;
  max-height: 180px;
}
.jj jj-proxy-card .card-wrap .card .card-img-top svg {
  text-anchor: middle;
  font-size: 1.5rem;
}
.jj jj-proxy-card .card-wrap .card .card-img-top:empty {
  height: 0;
}
.jj jj-proxy-card .card-wrap .card .card-img-top:empty + .card-body {
  border-top: none;
}
.jj jj-proxy-card .card-wrap .card .card-body {
  border-top: 1px solid #e7eaed;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 5px;
}
.jj jj-proxy-card .card-wrap .card .card-body .card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.jj jj-proxy-card .card-wrap .card .card-body .card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jj jj-proxy-card .card-wrap .card .card-body .card-text:empty:before {
  content: "\00a0";
}
.jj jj-proxy-card .card-wrap .card .list-group .list-group-item {
  border: none;
  padding: 2px 5px!important;
}
.jj jj-proxy-card .card-wrap .card .list-group .list-group-item small {
  display: none;
}
.jj jj-proxy-card .card-wrap .card .list-group .list-group-item t {
  padding-left: 0;
}
.jj jj-proxy-card .card-wrap .card .tool {
  text-align: center;
  padding: 5px;
}
.jj jj-proxy-card .card-wrap .card .tool a {
  padding: 0.2rem 2rem;
  font-size: 1.5rem;
  background-color: var(--light);
}
.jj jj-proxy-card .card-wrap .card:focus,
.jj jj-proxy-card .card-wrap .card:focus-visible {
  border-color: var(--primary);
  outline: none;
}
.jj jj-proxy-card .card-wrap:empty {
  height: 200px;
}
.jj jj-proxy-card .card-wrap:empty::after {
  content: "카드구성할 아이템을 선택하세요";
}
.jj jj-proxy-card .card-wrap.active > .card {
  outline: 3px solid var(--primary);
}
.jj jj-proxy-card .card-wrap:hover > .card {
  border-color: var(--primary);
}
.jj jj-proxy-card .card-wrap:focus-within > .card {
  border-color: var(--primary);
}
.jj jj-proxy-card.scrolling {
  background-color: var(--light);
}
.jj jj-proxy-card.row .card-wrap .card {
  flex-direction: row;
}
.jj jj-proxy-card.row .card-wrap .card .card-img-top {
  width: auto;
  height: auto;
  max-width: 25%;
}
.jj jj-proxy-card.row .card-wrap .card .card-img-top:empty + .card-body {
  border-left: none;
}
.jj jj-proxy-card.row .card-wrap .card .card-body {
  border-top: none;
  border-left: 1px solid #e7eaed;
  flex-grow: 1;
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .jj jj-proxy-card .card-wrap {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
  }
  .jj jj-proxy-card.row .card-wrap {
    -webkit-box-flex: 0!important;
    -ms-flex: 0 0 100%!important;
    flex: 0 0 100%!important;
    max-width: 100%!important;
  }
  .jj jj-proxy-card.row .card-wrap .card-img-top {
    width: 25%!important;
  }
}
.jj jj-proxy-card.grid1 .card-wrap,
.jj jj-proxy-card[box-type="grid1"] .card-wrap {
  flex: none;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.jj jj-proxy-card.grid2 .card-wrap,
.jj jj-proxy-card[box-type="grid2"] .card-wrap {
  flex: none;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.jj jj-proxy-card.grid5 .card-wrap,
.jj jj-proxy-card[box-type="grid4"] .card-wrap {
  flex: none;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.jj jj-proxy-card.grid5 .card-wrap,
.jj jj-proxy-card[box-type="grid5"] .card-wrap {
  flex: none;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}
.jj jj-proxy-card.grid10 .card-wrap,
.jj jj-proxy-card[box-type="grid10"] .card-wrap {
  flex: none;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}
.jj jj-proxy-card.p0 .card-wrap,
.jj jj-proxy-card[box-type="p0"] .card-wrap {
  padding: 0;
}
.jj jj-proxy-card.p1 .card-wrap,
.jj jj-proxy-card[box-type="p1"] .card-wrap {
  padding: 0 10px;
}
.jj jj-proxy-card.p2 .card-wrap,
.jj jj-proxy-card[box-type="p2"] .card-wrap {
  padding: 0 20px;
}
.jj jj-proxy-card.p3 .card-wrap,
.jj jj-proxy-card[box-type="p3"] .card-wrap {
  padding: 0 30px;
}

/* ==JJProxyCard.720.class End ================ */




/* ==JJProxyChildGrid.720.class Start ================ */
/* ==JJProxyChildGrid.720.class================ */
.jj jj-proxy-childgrid {
  display: block!important;
  position: relative;
  /* 체크박스 없애기 */
  /* 체크박스 없애고 width 100% */
  /* width 100% */
}
.jj jj-proxy-childgrid > .grid-toolbar {
  display: flex;
  -webkit-box-pack: justify!important;
  -ms-flex-pack: justify!important;
  justify-content: space-between !important;
}
.jj jj-proxy-childgrid table {
  table-layout: fixed;
  width: 100px;
  border-spacing: 0px;
  border: 1px solid #cccccc;
  margin-bottom: 0px;
  border-collapse: separate;
  min-width: 100%;
  font-size: 13px;
  background-color: var(--white);
}
.jj jj-proxy-childgrid table tr {
  line-height: 1.5rem;
}
.jj jj-proxy-childgrid table .sizeEmpty {
  width: 100%;
  pointer-events: none;
}
.jj jj-proxy-childgrid table > thead > tr > th,
.jj jj-proxy-childgrid table > thead > tr > td {
  font-weight: bold;
  border-right: 1px solid #b1bcca;
  border-bottom: 1px solid #b1bcca;
  background-color: #e1eaf8;
  text-align: center;
  color: #393f48;
  padding: 2px;
  vertical-align: middle;
  position: relative;
}
.jj jj-proxy-childgrid table > thead > tr > th.trCheck,
.jj jj-proxy-childgrid table > thead > tr > td.trCheck {
  text-align: center;
}
.jj jj-proxy-childgrid table > thead > tr > th.trCheck > i,
.jj jj-proxy-childgrid table > thead > tr > td.trCheck > i {
  font-weight: bold;
  pointer-events: none;
}
.jj jj-proxy-childgrid table > thead > tr > th.trCheck > i::before,
.jj jj-proxy-childgrid table > thead > tr > td.trCheck > i::before {
  content: "\F096";
}
.jj jj-proxy-childgrid table > thead > tr > th.trCheck.checked > i::before,
.jj jj-proxy-childgrid table > thead > tr > td.trCheck.checked > i::before {
  content: "\F046";
}
.jj jj-proxy-childgrid table > thead > tr > th.trTodo,
.jj jj-proxy-childgrid table > thead > tr > td.trTodo {
  text-align: center;
}
.jj jj-proxy-childgrid table > thead > tr > th.trTodo > i,
.jj jj-proxy-childgrid table > thead > tr > td.trTodo > i {
  font-weight: bold;
  pointer-events: none;
}
.jj jj-proxy-childgrid table > thead > tr > th.trTodo > i::before,
.jj jj-proxy-childgrid table > thead > tr > td.trTodo > i::before {
  content: "\F086";
}
.jj jj-proxy-childgrid table > thead > tr > th.trTodo.has-todo > i::before,
.jj jj-proxy-childgrid table > thead > tr > td.trTodo.has-todo > i::before {
  content: "\F086";
}
.jj jj-proxy-childgrid table > thead > tr > th.select,
.jj jj-proxy-childgrid table > thead > tr > td.select,
.jj jj-proxy-childgrid table > thead > tr > th.sort-clone,
.jj jj-proxy-childgrid table > thead > tr > td.sort-clone {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1bcca), color-stop(100%, #ebf2fc));
}
.jj jj-proxy-childgrid table > thead > tr > th > label,
.jj jj-proxy-childgrid table > thead > tr > td > label {
  display: block;
  margin-bottom: 0;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jj jj-proxy-childgrid table > thead > tr > th[order] .sortIcon,
.jj jj-proxy-childgrid table > thead > tr > td[order] .sortIcon {
  color: black;
}
.jj jj-proxy-childgrid table > thead > tr > th .sortIcon,
.jj jj-proxy-childgrid table > thead > tr > td .sortIcon {
  display: inline-block;
  width: 17px;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-left: 1px solid transparent;
  background-color: transparent;
  vertical-align: middle;
  color: transparent;
}
.jj jj-proxy-childgrid table > thead > tr > th .sortIcon:hover,
.jj jj-proxy-childgrid table > thead > tr > td .sortIcon:hover {
  border-left: 1px solid #b1bcca;
  background-color: ghostwhite;
  color: black;
  cursor: pointer;
}
.jj jj-proxy-childgrid table > thead > tr > th .sortIcon i,
.jj jj-proxy-childgrid table > thead > tr > td .sortIcon i {
  pointer-events: none;
}
.jj jj-proxy-childgrid table > thead > tr > th[order="asc"] .sortIcon,
.jj jj-proxy-childgrid table > thead > tr > td[order="asc"] .sortIcon {
  color: black;
}
.jj jj-proxy-childgrid table > thead > tr > th[order="asc"] .sortIcon i::before,
.jj jj-proxy-childgrid table > thead > tr > td[order="asc"] .sortIcon i::before {
  content: "\F15D";
}
.jj jj-proxy-childgrid table > thead > tr > th[order="desc"] .sortIcon,
.jj jj-proxy-childgrid table > thead > tr > td[order="desc"] .sortIcon {
  color: black;
}
.jj jj-proxy-childgrid table > thead > tr > th[order="desc"] .sortIcon i::before,
.jj jj-proxy-childgrid table > thead > tr > td[order="desc"] .sortIcon i::before {
  content: "\F15E";
}
.jj jj-proxy-childgrid table > thead > tr > td {
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj jj-proxy-childgrid table > tbody {
  color: var(--dark);
}
.jj jj-proxy-childgrid table > tbody > tr {
  line-height: 28px;
}
.jj jj-proxy-childgrid table > tbody > tr.selected {
  background-color: var(--gray) !important;
  color: var(--white) !important;
}
.jj jj-proxy-childgrid table > tbody > tr.selected a,
.jj jj-proxy-childgrid table > tbody > tr.selected label,
.jj jj-proxy-childgrid table > tbody > tr.selected select {
  font-weight: bold!important;
}
.jj jj-proxy-childgrid table > tbody > tr.selected a {
  color: var(--purple);
}
.jj jj-proxy-childgrid table > tbody > tr.selected:hover {
  background-color: #D8F0EE;
}
.jj jj-proxy-childgrid table > tbody > tr.checked {
  font-weight: 600;
}
.jj jj-proxy-childgrid table > tbody > tr.checked > td.trCheck > i::before {
  content: "\F046";
}
.jj jj-proxy-childgrid table > tbody > tr[_crud_="C"] {
  color: var(--info);
}
.jj jj-proxy-childgrid table > tbody > tr[_crud_="U"] {
  color: var(--success);
  font-style: italic;
}
.jj jj-proxy-childgrid table > tbody > tr[_crud_="D"] {
  color: var(--danger);
  text-decoration: line-through;
  font-style: italic;
  opacity: 0.8;
}
.jj jj-proxy-childgrid table > tbody > tr > td {
  padding: 1px 3px 0px 3px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  font-weight: inherit;
  color: inherit;
}
.jj jj-proxy-childgrid table > tbody > tr > td.num,
.jj jj-proxy-childgrid table > tbody > tr > td.trCheck {
  text-align: center;
  vertical-align: middle;
}
.jj jj-proxy-childgrid table > tbody > tr > td.num *,
.jj jj-proxy-childgrid table > tbody > tr > td.trCheck * {
  pointer-events: none;
}
.jj jj-proxy-childgrid table > tbody > tr > td.num i::before,
.jj jj-proxy-childgrid table > tbody > tr > td.trCheck i::before {
  content: "\F096";
}
.jj jj-proxy-childgrid table > tbody > tr > td.trTodo {
  text-align: center;
}
.jj jj-proxy-childgrid table > tbody > tr > td.trTodo > i {
  font-weight: bold;
  pointer-events: none;
}
.jj jj-proxy-childgrid table > tbody > tr > td.trTodo.has-todo > i::before {
  content: "\F086";
}
.jj jj-proxy-childgrid table > tbody > tr > td.noti {
  background-position: left top;
  background-size: 7px;
}
.jj jj-proxy-childgrid table > tbody > tr > td img {
  height: 23px!important;
}
.jj jj-proxy-childgrid table > tbody > tr > td .tag {
  border-radius: 1rem;
  border: 1px solid var(--info);
  display: inline;
  padding: 2px 5px;
  margin-right: 3px;
}
.jj jj-proxy-childgrid table > tfoot {
  background-color: bisque;
  border-top: 1px solid #b1bcca;
  border-right: 1px solid #b1bcca;
  background-color: #f1e5ea;
}
.jj jj-proxy-childgrid table > tfoot > tr {
  line-height: 28px;
}
.jj jj-proxy-childgrid table > tfoot > tr > td {
  padding: 1px 3px 0px 3px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  font-weight: inherit;
  background-color: #f1e5ea;
}
.jj jj-proxy-childgrid table > tfoot > tr > td label {
  margin-bottom: 0;
}
.jj jj-proxy-childgrid > .grid-warp {
  position: relative;
  top: 0px;
  margin-right: 10px;
  overflow: auto;
}
.jj jj-proxy-childgrid jj-pagination .pager li > a {
  background-color: var(--cyan);
  padding: 5px 2rem;
  border-radius: 5px;
}
.jj jj-proxy-childgrid jj-pagination .pager li > a:hover {
  background-color: var(--cyan);
}
.jj jj-proxy-childgrid.no-scroll > .grid-warp {
  margin-right: 0px;
  overflow-x: hidden;
}
.jj jj-proxy-childgrid.no-scroll .sArea {
  display: none;
}
.jj jj-proxy-childgrid.no-scroll-y > .grid-warp {
  margin-right: 0px!important;
  overflow-y: hidden;
}
.jj jj-proxy-childgrid.no-scroll-y .sArea {
  display: none;
}
.jj jj-proxy-childgrid > .fix-grid-warp {
  position: absolute;
  top: 0;
  left: 0;
  border-right: 0px solid gray;
  overflow: hidden;
  background-color: white;
}
.jj jj-proxy-childgrid > .fix-grid-warp table {
  border-right: 0;
  min-width: 1%;
}
.jj jj-proxy-childgrid > .size-bar {
  position: absolute;
  border: 1px solid transparent;
  display: none;
  width: 5px;
  top: 0;
  z-index: 10;
  cursor: ew-resize;
}
.jj jj-proxy-childgrid > .size-bar.on {
  display: block;
}
.jj jj-proxy-childgrid > .sArea {
  position: absolute;
  top: 0;
  width: 15px;
  right: 1px;
  float: right;
  border: 1px solid #DDD;
  z-index: 100;
  height: 100%;
  border-width: 1px;
  background-color: ghostwhite;
  border-radius: 5px;
}
.jj jj-proxy-childgrid > .sArea.wide {
  width: 50px;
}
.jj jj-proxy-childgrid > .sArea > .uScrCur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 30px;
  display: block;
  border: 1px solid #959595;
  background-color: #A7A7A7;
  border-radius: 5px;
  cursor: ns-resize;
}
.jj jj-proxy-childgrid.col-sorting {
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 1px solid blue;
}
.jj jj-proxy-childgrid.col-sorting .sort-select-item {
  display: none;
}
.jj jj-proxy-childgrid.resizing {
  cursor: ew-resize;
}
.jj jj-proxy-childgrid.resizing .grid-warp,
.jj jj-proxy-childgrid.resizing .fix-grid-warp {
  pointer-events: none;
}
.jj jj-proxy-childgrid.resizing > .size-bar {
  pointer-events: none;
  border-right: 1px solid black;
}
.jj jj-proxy-childgrid.has-pager > .grid-warp {
  margin-right: 0;
}
.jj jj-proxy-childgrid.has-pager > .grid-warp > table {
  border-right-width: 0;
}
.jj jj-proxy-childgrid.has-pager > jj-pagination {
  margin-top: 10px;
}
.jj jj-proxy-childgrid .form-control {
  padding: 0px 5px;
  height: auto;
  width: 100%;
  border: 0;
}
.jj jj-proxy-childgrid button {
  padding: 0.1rem 0.5rem;
  line-height: 1rem;
  display: block;
  width: 100%;
}
.jj jj-proxy-childgrid input[type="checkbox"] {
  border: 2px solid ccc;
  margin-top: 0;
  margin-right: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
}
.jj jj-proxy-childgrid.fixed table .sizeEmpty {
  width: 0!important;
}
.jj jj-proxy-childgrid.hide-todo .trTodo {
  width: 0px!important;
  overflow: hidden;
}
.jj jj-proxy-childgrid.hide-todo .fix-grid-warp {
  width: 101px!important;
}
.jj jj-proxy-childgrid .tag-users .code-item {
  margin: 0.05rem 0.2rem 0.05rem 0;
  padding: 0.15rem 0.5rem 0.15rem 0.3rem;
  border-radius: 1rem;
  border: 1px solid var(--info);
}
.jj jj-proxy-childgrid .tag-users .code-item .avatar {
  margin-top: -0.3rem;
  height: 1.25rem !important;
  width: 1.25rem !important;
}
.jj jj-proxy-childgrid .tag-users .code-item .close {
  display: none;
}
.jj jj-proxy-childgrid.grid110 .trCheck,
.jj jj-proxy-childgrid.grid110 .trTodo {
  display: none;
}
.jj jj-proxy-childgrid.grid110 .fix-grid-warp {
  width: 51px!important;
}
.jj jj-proxy-childgrid.grid120 .trCheck,
.jj jj-proxy-childgrid.grid120 .trTodo {
  display: none;
}
.jj jj-proxy-childgrid.grid120 colgroup col.last {
  width: auto!important;
  min-width: 100px;
}
.jj jj-proxy-childgrid.grid120 colgroup col.sizeEmpty {
  width: 0;
}
.jj jj-proxy-childgrid.grid120 .fix-grid-warp {
  display: none;
}
.jj jj-proxy-childgrid.grid100 colgroup col.last {
  width: auto!important;
  min-width: 100px;
}
.jj jj-proxy-childgrid.grid100 colgroup col.sizeEmpty {
  width: 0;
}
.jj jj-proxy-childgrid.grid100 .fix-grid-warp {
  display: none;
}
.jj jj-proxy-childgrid.grid570 table {
  color: #0E3979;
  max-width: none;
  border-collapse: collapse;
  text-align: center;
  border-top: 3px solid #307bbb;
}
.jj jj-proxy-childgrid.grid570 table th,
.jj jj-proxy-childgrid.grid570 table td {
  position: relative;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
}
.jj jj-proxy-childgrid.grid570 table > thead {
  background-color: #e1eaf2;
  font-weight: bold;
}
.jj jj-proxy-childgrid.grid570 table > thead > tr > th {
  border-color: #B2BAD2;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  font-weight: bold;
  color: #0E3979;
}
.jj jj-proxy-childgrid.grid570 table > tbody {
  background-color: #FFFFFF;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr > th {
  background-color: #e1eaf2;
  border: 1px solid #B2BAD2;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr > td {
  padding: 3px;
  border: 0;
  font-size: 100%;
  vertical-align: middle;
  border: 1px solid #B2BAD2;
  overflow: hidden;
  word-wrap: normal;
  word-break: break-all;
  border-collapse: collapse;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr > td.text-right {
  text-align: right;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr > td.text-left {
  text-align: left;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr:nth-of-type(2n) {
  background-color: #efefef;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr[_crud_="R"] {
  background-color: white;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr[_crud_="U"] {
  background-color: #BCD8F1;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr[_crud_="D"] {
  background-color: #FAB4B4;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr[editable="false"] td * {
  display: none;
}
.jj jj-proxy-childgrid.grid570 table > tbody > tr[editable="true"] {
  background-color: inherit;
}
.jj jj-proxy-childgrid.grid570 table td input {
  width: 100%;
  border: 0;
}
.jj jj-proxy-childgrid.grid570 table td input[type="number"] {
  text-align: right;
}
.jj jj-proxy-childgrid.grid570 table td .jj-hitem {
  margin-bottom: 0!important;
}
.jj jj-proxy-childgrid.grid570 table td .jj-hitem .form-control {
  padding: 0 0.5rem;
  height: 1.5rem;
  border: 1px solid #ccc;
}
.jj jj-proxy-childgrid.grid570 table.fixed {
  table-layout: fixed;
}
.jj jj-proxy-childgrid.grid570 table.fixed th,
.jj jj-proxy-childgrid.grid570 table.fixed td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj jj-proxy-childgrid[lock-screen] {
  opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .jj jj-proxy-grid jj-pagination .rownum {
    width: initial;
  }
  .jj jj-proxy-grid jj-pagination select.form-control {
    display: block!important;
    position: absolute;
    right: 130px;
    padding: 5px;
    margin-top: -3px;
    width: 55px!important;
  }
  .jj jj-proxy-grid jj-pagination .no-data * {
    display: none;
  }
}

/* ==JJProxyChildGrid.720.class End ================ */




/* ==proxyGridColumn.class Start ================ */
/* ==proxyGridColumn.class================ */
.jj j2-proxy-grid-column {
  position: relative;
  display: block;
  border: 1px solid #ccc;
  min-height: 300px;
}
.jj j2-proxy-grid-column .list-col li .attr-box {
  margin-top: 10px;
}
.jj j2-proxy-grid-column .list-col li .attr-box j2-textarea .control-content {
  height: 100%;
}
.jj j2-proxy-grid-column .list-col li .hidden-col {
  position: absolute;
  right: 0;
  width: auto;
  top: 0;
}
.jj j2-proxy-grid-column .list-col li .hidden-col .control-label {
  display: none;
}
.jj j2-proxy-grid-column .list-col li .fa-sort {
  position: absolute;
  left: 5px;
  top: 11px;
  height: 100%;
  vertical-align: middle;
  font-size: 18px;
  opacity: 0.7;
}
.jj j2-proxy-grid-column .list-col li .fa-sort:hover {
  opacity: 1;
}
.jj j2-proxy-grid-column .list-col li .attr-title {
  padding-left: 1rem;
}
.jj j2-proxy-grid-column .list-group-item {
  padding: 0.75rem 1rem;
}

/* ==proxyGridColumn.class End ================ */




/* ==JJProxySideTree.720.class Start ================ */
/* ==JJProxySideTree.720.class================ */
.jj jj-proxy-sidetree {
  display: block;
  position: relative;
  min-height: 400px;
  height: 100%;
  min-width: 25%;
  padding: 1rem;
}
.jj jj-proxy-sidetree > .jj-tree {
  margin-right: 1rem;
  background-color: white;
  border: 1px solid #e7eaed;
}

/* ==JJProxySideTree.720.class End ================ */




/* ==JJProxyKPI.720.class Start ================ */
/* ==JJProxyKPI.720.class================ */
.jj j2-proxy-kpi {
  position: relative;
  min-height: 50px;
  min-width: 25%;
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e7eaed;
  padding: 1.5rem;
  margin-bottom: 24px;
  border-radius: 0.25rem;
}
.jj j2-proxy-kpi .btn-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  visibility: hidden;
}
.jj j2-proxy-kpi:hover button {
  visibility: visible;
}

/* ==JJProxyKPI.720.class End ================ */




/* ==JJProxyGantt.720.class Start ================ */
/* ==JJProxyGantt.720.class================ */
.jj jj-proxy-gantt {
  --item-width: 22px;
  --item-height: 30px;
  --title-height: 22px;
  display: block;
  border: 1px solid #b1bcca;
  padding: 0;
  height: 200px;
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}
.jj jj-proxy-gantt[ganttview="day"] .toolbar .btn.day {
  background-color: var(--white);
}
.jj jj-proxy-gantt[ganttview="week"] {
  --item-width: 40px;
}
.jj jj-proxy-gantt[ganttview="week"] .toolbar .btn.week {
  background-color: var(--white);
}
.jj jj-proxy-gantt[ganttview="month"] {
  --item-width: 40px;
}
.jj jj-proxy-gantt[ganttview="month"] .toolbar .btn.month {
  background-color: var(--white);
}
.jj jj-proxy-gantt .toolbar {
  display: flex;
  vertical-align: middle;
  border-bottom: 1px solid #ccc;
  background-color: var(--light);
  height: 33px;
  justify-content: space-between;
}
.jj jj-proxy-gantt .toolbar .toolbar-left,
.jj jj-proxy-gantt .toolbar .toolbar-right {
  display: flex;
}
.jj jj-proxy-gantt .toolbar .toolbar-left .btn {
  border-right: 1px solid #ccc;
}
.jj jj-proxy-gantt .toolbar .toolbar-right .btn {
  border-left: 1px solid #ccc;
}
.jj jj-proxy-gantt .toolbar .btn {
  padding: 0.42rem 0.9rem;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 14px;
}
.jj jj-proxy-gantt .time-line-group {
  display: flex;
  height: 100%;
}
.jj jj-proxy-gantt .time-line-group .time-group {
  display: flex;
  flex-direction: column;
  border: 1px solid #b1bcca;
  height: 100%;
  border-width: 0px 1px 0px 0px;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-title {
  height: var(--title-height);
  text-align: left;
  padding-left: 1rem;
  vertical-align: middle;
  line-height: var(--title-height);
  background-color: #e1eaf8;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-list {
  flex-grow: 1;
  display: flex;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-list .time-item {
  width: var(--item-width);
  border: 1px solid #b1bcca;
  display: flex;
  flex-direction: column;
  border-width: 1px 1px 0px 0px;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-list .time-item .time-item-title {
  background-color: #e1eaf8;
  height: var(--title-height);
  text-align: center;
  vertical-align: middle;
  line-height: var(--title-height);
  border-bottom: 1px solid #b1bcca;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-list .time-item .time-item-box {
  background-color: var(--white);
  flex-grow: 1;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-list .time-item.week {
  background-color: #F8EEDD;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-list .time-item.week .time-item-title {
  background-color: #F8EEDD;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-list .time-item.week .time-item-box {
  background-color: #F8EEDD;
}
.jj jj-proxy-gantt .time-line-group .time-group .time-group-list .time-item:last-child {
  border-right: 0;
}
.jj jj-proxy-gantt .list-item-group {
  position: absolute;
  top: calc(var(--title-height) * 2);
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
}
.jj jj-proxy-gantt .list-item-group .list-item {
  position: absolute;
  overflow: visible;
  white-space: nowrap;
}
.jj jj-proxy-gantt .list-item-group .list-item .item-title {
  color: black;
  margin-bottom: initial;
  font-weight: normal;
}
.jj jj-proxy-gantt .list-item-group .list-item .progress {
  background-color: var(--secondary);
}
.jj jj-proxy-gantt .list-item-group .list-item .progress .progress-bar {
  position: relative;
  transition: none;
}
.jj jj-proxy-gantt .list-item-group .list-item .progress .progress-bar > .resizer {
  transform: translateX(-1px);
}
.jj jj-proxy-gantt .list-item-group .list-item .progress > .resizer[data-arrow="e"] {
  transform: translateX(3px);
}
.jj jj-proxy-gantt .list-item-group::before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.jj jj-proxy-gantt .resizer:hover {
  cursor: e-resize;
  background-color: red;
  z-index: 5;
}

/* ==JJProxyGantt.720.class End ================ */




/* ==JJProxySankey.720.class Start ================ */
/* ==JJProxySankey.720.class================ */
.jj jj-proxy-sankey {
  display: block;
  position: relative;
  min-height: 300px;
  background-color: white;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}
.jj jj-proxy-sankey > jj-sankey {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

/* ==JJProxySankey.720.class End ================ */




/* ==JJProxyJoinGrid.720.class Start ================ */
/* ==JJProxyJoinGrid.720.class================ */

/* ==JJProxyJoinGrid.720.class End ================ */




/* ==JJProxyRank.720.class Start ================ */
/* ==JJProxyRank.720.class================ */
.jj jj-proxy-rank {
  display: block;
  position: relative;
  overflow: auto;
  min-height: 200px;
  min-width: 25%;
}
.jj jj-proxy-rank:empty {
  border: 0.5px dotted #ccc;
  background-color: var(--info);
}
.jj jj-proxy-rank:empty:before {
  content: '설정을 입력해주세요';
}
.jj jj-proxy-rank table {
  table-layout: fixed;
}
.jj jj-proxy-rank th {
  word-break: keep-all;
  background-color: var(--secondary);
  color: white;
}
.jj jj-proxy-rank td {
  background-color: white;
  opacity: 0.8;
}
.jj jj-proxy-rank td label {
  display: block;
  margin: 0;
  font-weight: normal;
}
.jj jj-proxy-rank td.hover {
  background-color: var(--info);
}
.jj jj-proxy-rank td.on {
  opacity: 1;
  background-color: var(--purple);
  color: white;
}
.jj jj-proxy-rank td * {
  pointer-events: none;
}
.jj jj-proxy-rank th,
.jj jj-proxy-rank td {
  text-align: center;
  vertical-align: middle;
  padding: 2px;
}
.jj jj-proxy-rank thead th {
  padding: 5px;
}
.jj jj-proxy-rank .tr-num {
  width: 50px;
}

/* ==JJProxyRank.720.class End ================ */




/* ==JJSurveyChart.720.class Start ================ */
/* ==JJSurveyChart.720.class================ */
.jj j2-survey-chart {
  display: block;
  position: relative;
  padding: 12px;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
}
.jj j2-survey-chart > div {
  flex-grow: 1;
}
.jj j2-survey-chart jj-chart {
  min-height: 300px;
  min-width: 150px;
}
.jj j2-survey-chart jj-query-result {
  padding: 0;
  border: 0;
}
.jj j2-survey-chart jj-query-result > h4 {
  display: none;
}
.jj j2-survey-chart jj-query-result tbody tr td:nth-child(3) {
  text-align: center!important;
}
.jj j2-survey-chart jj-query-result tbody tr td:nth-child(4) {
  text-align: center!important;
}
.jj j2-survey-chart.vertical {
  flex-direction: column;
}

/* ==JJSurveyChart.720.class End ================ */




/* ==JJDataShare.class Start ================ */
/* ==JJDataShare.class================ */

/* ==JJDataShare.class End ================ */




/* ==JJBtnGroup.720.class Start ================ */
/* ==JJBtnGroup.720.class================ */
.jj jj-btn-group {
  position: relative;
  display: flex;
  width: 100%;
}
.jj jj-btn-group > * {
  flex-grow: 1;
  padding: 5px 0;
}
.jj jj-vhtml-editor jj-btn-group {
  padding-bottom: 1rem;
}
.jj jj-vhtml-editor jj-btn-group > *:empty:before {
  content: "작업버턴을 넣어주세요";
}

/* ==JJBtnGroup.720.class End ================ */




/* ==JJVisitCheck.720.class Start ================ */
/* ==JJVisitCheck.720.class================ */
.jj jw-visit-check {
  position: relative;
  display: block;
  text-align: center;
  margin-bottom: 3rem;
  min-width: 25%;
  padding: 1rem;
}
.jj jw-visit-check .control-label {
  font-size: 22px;
}
.jj jw-visit-check .form-control {
  font-size: 34px!important;
  height: auto!important;
  text-align: center;
}
.jj jw-visit-check .scan-message {
  font-size: 48px;
  margin-bottom: 2rem;
  padding: 3rem;
  background-color: var(--warning);
}
.jj jw-visit-check button {
  font-size: 32px;
  color: var(--light);
  padding: 1rem 3rem;
}
.jj jw-visit-check button i.fa {
  margin-right: 2rem;
}

/* ==JJVisitCheck.720.class End ================ */




/* ==JJProxyCardCalendar.720.class Start ================ */
/* ==JJProxyCardCalendar.720.class================ */
.jj jj-proxy-card-calendar {
  display: block!important;
  position: relative;
  min-height: 400px;
  min-width: 25%;
  height: 100%;
}
.jj jj-proxy-card-calendar jj-calendar {
  min-height: 300px;
}
.jj jj-proxy-card-calendar jj-calendar ul.cal-head {
  justify-content: center!important;
}
.jj jj-proxy-card-calendar jj-calendar ul.cal-head li {
  margin: 0 8px;
  line-height: 30px;
}
.jj jj-proxy-card-calendar jj-calendar table.table-head {
  background-color: #e1eaf2;
}
.jj jj-proxy-card-calendar jj-calendar table.table-head th {
  color: #0E3979;
  font-size: 1.2em;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body {
  table-layout: fixed;
  border-collapse: collapse;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body tr {
  height: 100px;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body td {
  border: 1px solid #ddd !important;
  width: 14%;
  vertical-align: top;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body td * {
  pointer-events: auto!important;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body td > t {
  display: block;
  font-size: 1em;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m {
  text-align: left;
  font-size: 12px;
  display: block;
  bottom: 0;
  padding: 0 5px 5px;
  position: relative;
  font-size: 0.9rem;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m div.text-right {
  flex: none;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m .card {
  color: var(--dark);
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m .card .card-title {
  font-size: 1.2rem;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m .card .card-title .card-time {
  float: right;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m .card .list-group-item {
  padding: 0.5rem;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m .card .list-group-item small {
  margin-top: -7px;
  position: absolute;
  margin-left: -3px;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m .card .list-group-item t {
  padding-left: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m .card .list-group-item t.c {
  display: inline-block;
  border-radius: 10px;
  padding: 0 12px;
  text-align: center;
  padding-left: 1rem !important;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body m .card a {
  color: inherit;
}
.jj jj-proxy-card-calendar jj-calendar table.table-body td.select {
  background-color: var(--white);
  color: var(--dark);
}
.jj jj-proxy-card-calendar jj-calendar table.table-body td.today {
  background-color: var(--light);
}
.jj jj-proxy-card-calendar jj-calendar table.table-body td:hover {
  background-color: var(--white);
}
.jj jj-proxy-card-calendar jj-calendar ul.cal-info {
  display: none;
}
.jj jj-proxy-card-calendar.type1 .cal-body td {
  text-align: left;
}
.jj jj-proxy-card-calendar.type1 .cal-body td > t {
  display: block;
  font-size: 1em;
  text-align: center;
  /* padding-left: 1rem; */
  background-color: lightgray;
  aspect-ratio: 2;
  border-radius: 20px;
  width: 20px;
  font-weight: bold;
}
.jj jj-proxy-card-calendar.type1 .cal-body td > m .card {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}
.jj jj-proxy-card-calendar.type1 .cal-body td > m .card .card-title,
.jj jj-proxy-card-calendar.type1 .cal-body td > m .card .card-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.jj jj-proxy-card-calendar.type1 .cal-body td > m .card .card-body {
  padding: 5px;
}
.jj jj-proxy-card-calendar.type1 .cal-body td > m .card .card-body .card-title {
  margin: 0;
}
.jj jj-proxy-card-calendar.type1 .cal-body td > m .card .list-group .list-group-item {
  border: none;
  padding: 2px 5px!important;
}
.jj jj-proxy-card-calendar.type1 .cal-body td > m .card .list-group .list-group-item small {
  display: none;
}
.jj jj-proxy-card-calendar.type1 .cal-body td > m .card .list-group .list-group-item t {
  padding-left: 0;
}

/* ==JJProxyCardCalendar.720.class End ================ */




/* ==JJProxyResTimeLine.720.class Start ================ */
/* ==JJProxyResTimeLine.720.class================ */
.jj jj-proxy-res-timeline {
  --room-height: 40px;
  display: block!important;
  min-width: 25%;
  height: 100%;
  min-height: 400px;
  overflow: auto;
  position: relative;
  padding: 0;
  background-color: white;
  padding: 0.5rem 1rem;
}
.jj jj-proxy-res-timeline .cal-head {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jj jj-proxy-res-timeline .cal-head button * {
  pointer-events: none;
}
.jj jj-proxy-res-timeline .cal-head .cal-title {
  font-weight: normal;
}
.jj jj-proxy-res-timeline .time-wrap {
  display: flex;
}
.jj jj-proxy-res-timeline .time-wrap .dong {
  border-right: 1px solid #ccc;
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}
.jj jj-proxy-res-timeline .time-wrap .dong .title {
  text-align: center;
  position: sticky;
  bottom: 0;
  background-color: white;
  background-color: var(--light);
  font-weight: 700;
  padding: 5px;
  border: 1px solid var(--gray);
}
.jj jj-proxy-res-timeline .time-wrap .dong .noti-body {
  min-height: 180px;
}
.jj jj-proxy-res-timeline .time-wrap .dong .noti-body .noti-item {
  display: block;
  background-color: #3788d8;
  color: white;
  padding: 2px;
  font-size: 12px;
  text-align: center;
  border: 1px solid white;
  border-radius: 3px;
}
.jj jj-proxy-res-timeline .time-wrap .dong .flow {
  display: flex;
  border-left: 1px solid var(--dark);
}
.jj jj-proxy-res-timeline .time-wrap .dong .flow .line {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  border-right: 1px solid var(--dark);
}
.jj jj-proxy-res-timeline .time-wrap .dong .flow .line .room,
.jj jj-proxy-res-timeline .time-wrap .dong .flow .line .blank {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  max-width: 60px;
  padding: 5px;
}
.jj jj-proxy-res-timeline .time-wrap .dong .flow .line .room {
  border-bottom: 1px solid var(--gray);
  background-color: white;
  line-height: 30px;
  height: var(--room-height);
  color: var(--gray);
  font-size: 11px;
}
.jj jj-proxy-res-timeline .time-wrap .dong .flow .line .room:hover {
  background-color: red;
  color: white;
}
.jj jj-proxy-res-timeline .time-wrap .dong .flow .line .blank {
  background-color: var(--gray);
  border-bottom: 1px solid var(--dark);
  height: 30px;
}
.jj jj-proxy-res-timeline .time-wrap .dong .flow .line .item {
  position: absolute;
  top: var(--room-height);
  height: 79px;
  overflow: hidden;
  width: calc(100% - 1px);
  border: 2px solid var(--warning);
  background-color: var(--orange);
  color: white;
  padding: 1px;
  text-align: center;
  font-size: 12px;
  word-break: auto-phrase;
  line-height: 16px;
}
.jj jj-proxy-res-timeline .time-wrap .dong:last-child {
  border-right: none;
}
.jj jj-proxy-res-timeline .time-wrap.move .room {
  pointer-events: none;
}
.jj jj-proxy-res-timeline jj-calendar {
  min-height: 300px;
  margin-bottom: 0;
}
.jj jj-proxy-res-timeline jj-calendar ul.cal-head {
  justify-content: center!important;
}
.jj jj-proxy-res-timeline jj-calendar ul.cal-head li {
  margin: 0 8px;
  line-height: 30px;
}
.jj jj-proxy-res-timeline jj-calendar table.table-head {
  background-color: #e1eaf2;
}
.jj jj-proxy-res-timeline jj-calendar table.table-head th {
  color: #0E3979;
  font-size: 1.2em;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body {
  table-layout: fixed;
  border-collapse: collapse;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body tr {
  height: 100px;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body td {
  border: 1px solid #ddd !important;
  width: 14%;
  vertical-align: top;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body td * {
  pointer-events: auto!important;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body td > t {
  display: block;
  font-size: 1em;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m {
  text-align: left;
  font-size: 12px;
  display: block;
  bottom: 0;
  padding: 0;
  position: relative;
  font-size: 0.9rem;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m div.text-right {
  flex: none;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .noti-body {
  min-height: 180px;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .noti-body .noti-item {
  display: block;
  background-color: #3788d8;
  color: white;
  padding: 2px;
  font-size: 12px;
  text-align: center;
  border: 1px solid white;
  border-radius: 3px;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow {
  display: flex;
  overflow: auto;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  border-right: 1px solid #ddd;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line .time-line {
  position: relative;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line .room,
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line .blank {
  text-align: center;
  overflow: hidden;
  max-width: 60px;
  padding: 5px;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line .room {
  border-bottom: 1px solid var(--gray);
  background-color: white;
  line-height: 30px;
  height: var(--room-height);
  color: var(--gray);
  font-size: 11px;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line .room:hover {
  background-color: red;
  color: white;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line .blank {
  color: var(--dark);
  background-color: var(--gray);
  border-bottom: 1px solid var(--dark);
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line .item {
  position: absolute;
  top: var(--room-height);
  height: 79px;
  overflow: hidden;
  width: calc(100% - 1px);
  border: 2px solid var(--warning);
  background-color: var(--orange);
  color: white;
  padding: 1px;
  text-align: center;
  font-size: 12px;
  word-break: auto-phrase;
  line-height: 16px;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m .dong .flow .line:last-child {
  border-right: none;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body m.move .room {
  pointer-events: none;
}
.jj jj-proxy-res-timeline jj-calendar table.table-body td.select {
  background-color: var(--white);
  color: var(--dark);
}
.jj jj-proxy-res-timeline jj-calendar table.table-body td.today {
  background-color: var(--light);
}
.jj jj-proxy-res-timeline jj-calendar table.table-body td:hover {
  background-color: var(--white);
}
.jj jj-proxy-res-timeline jj-calendar ul.cal-info {
  display: none;
}

/* ==JJProxyResTimeLine.720.class End ================ */




/* ==JJSendMail.720.class Start ================ */
/* ==JJSendMail.720.class================ */
.jj jw-send-mail {
  position: relative;
  min-height: 200px;
  min-width: 25%;
  display: flex!important;
  flex-direction: column;
  padding: 1rem;
}
.jj jw-send-mail > j2-text {
  flex: none;
}
.jj jw-send-mail > j2-texthtml {
  flex-grow: 1;
}

/* ==JJSendMail.720.class End ================ */





/* ==DAO.720.pkg.deploy End ================ */




/* ==PWA.720.pkg.deploy Start ================ */
/* ==PWA.720.pkg.deploy================ */
/* ==JJServiceWorker.720.class Start ================ */
/* ==JJServiceWorker.720.class================ */

/* ==JJServiceWorker.720.class End ================ */




/* ==Notification.720.class Start ================ */
/* ==Notification.720.class================ */

/* ==Notification.720.class End ================ */




/* ==ServerSentEvents.720.class Start ================ */
/* ==ServerSentEvents.720.class================ */

/* ==ServerSentEvents.720.class End ================ */





/* ==PWA.720.pkg.deploy End ================ */




/* ==Security.720.pkg.deploy Start ================ */
/* ==Security.720.pkg.deploy================ */
/* ==Auth.720.class Start ================ */
/* ==Auth.720.class================ */

/* ==Auth.720.class End ================ */




/* ==JJAuthGuest.720.class Start ================ */
/* ==JJAuthGuest.720.class================ */

/* ==JJAuthGuest.720.class End ================ */




/* ==Auth.outuser.class Start ================ */
/* ==Auth.outuser.class================ */

/* ==Auth.outuser.class End ================ */




/* ==Audit.720.class Start ================ */
/* ==Audit.720.class================ */

/* ==Audit.720.class End ================ */




/* ==JJMultitenancyApi.720.class Start ================ */
/* ==JJMultitenancyApi.720.class================ */

/* ==JJMultitenancyApi.720.class End ================ */




/* ==JJSingletenancyApi.720.class Start ================ */
/* ==JJSingletenancyApi.720.class================ */

/* ==JJSingletenancyApi.720.class End ================ */





/* ==Security.720.pkg.deploy End ================ */




/* ==Collaboration.720.pkg.deploy Start ================ */
/* ==Collaboration.720.pkg.deploy================ */
/* ==appUser.720.class Start ================ */
/* ==appUser.720.class================ */

/* ==appUser.720.class End ================ */




/* ==appChatter.720.class Start ================ */
/* ==appChatter.720.class================ */

/* ==appChatter.720.class End ================ */




/* ==appRole.720.class Start ================ */
/* ==appRole.720.class================ */

/* ==appRole.720.class End ================ */




/* ==appFriend.720.class Start ================ */
/* ==appFriend.720.class================ */

/* ==appFriend.720.class End ================ */




/* ==appAccount.720.class Start ================ */
/* ==appAccount.720.class================ */

/* ==appAccount.720.class End ================ */




/* ==shareFile.720.class Start ================ */
/* ==shareFile.720.class================ */

/* ==shareFile.720.class End ================ */





/* ==Collaboration.720.pkg.deploy End ================ */




/* ==MyAppConfig.720.class Start ================ */
/* ==MyAppConfig.720.class================ */
.jj {
  /**
* Admin 공통관리용 디자인 스타일 시트
*/
}
.jj .config-content {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.jj .config-content .config-content-box {
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 0.75rem;
}
.jj .config-content .config-content-box .config-box {
  height: 100%;
}
.jj .config-content .config-content-box .config-box-carousel {
  height: 444px;
}
.jj .config-content .config-content-box .config-box,
.jj .config-content .config-content-box .config-box-carousel {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 1.5rem;
  box-shadow: 0 0 8px 0 rgba(154, 161, 171, 0.3);
  background-color: #fff;
  border-radius: 0.25rem;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.jj .config-content .config-content-box .config-box .config-box-top,
.jj .config-content .config-content-box .config-box-carousel .config-box-top {
  font-weight: bold;
  margin-bottom: 1.5rem;
}
.jj .config-content .config-content-box .config-box .config-box-btm,
.jj .config-content .config-content-box .config-box-carousel .config-box-btm {
  padding: 0;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  flex-grow: 1;
}
.jj .config-content .config-content-box .config-box .config-box-btm > div,
.jj .config-content .config-content-box .config-box-carousel .config-box-btm > div {
  margin-bottom: 0.75rem;
}
.jj .config-content .config-content-box .config-box .config-box-btm > div label,
.jj .config-content .config-content-box .config-box-carousel .config-box-btm > div label {
  width: 80px;
}
.jj .config-content .config-content-box .config-box .config-box-btm > div input,
.jj .config-content .config-content-box .config-box-carousel .config-box-btm > div input {
  width: calc(100% - 80px);
}
.jj .config-content-box.ver2 {
  height: auto;
}
.jj .config-content-box.ver2 .config-box-ver2 {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}
.jj .config-content-box.ver2 .config-box-ver2 .config-ver2-top {
  text-align: right;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  width: 100%;
}
.jj .config-content-box.ver2 .config-box-ver2 .config-ver2-tab {
  width: 100%;
  padding: 0;
}
.jj .config-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-right: 0.375rem;
  margin-bottom: 1rem;
  margin-left: 0.375rem;
}
.jj .config-header .config-header-title {
  flex: 0 0 75%;
  max-width: 75%;
}
.jj .config-header .config-header-title .config-title-main {
  margin-left: 0.75rem;
  font-weight: bold;
}
.jj .config-header .config-header-title .config-title-sub {
  margin-left: 0.75rem;
}
.jj .config-header .config-header-btn {
  flex: 0 0 25%;
  max-width: 25%;
  display: flex;
  justify-content: flex-end;
}
.jj .config-header .config-header-btn .config-btn-save {
  margin-right: 0.75rem;
  display: inline-block;
  border: 1px solid transparent;
  padding: 0.45rem 0.9rem;
  border-radius: 0.15rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.jj .config-top-more {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.jj .config-top-more h5 {
  font-weight: bold;
}
.jj .config-ver2-item {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.jj .config-ver2-item h5 {
  font-weight: bold;
}
.jj .config-ver2-item h5 i {
  margin-right: 0.375rem;
}
.jj .config-ver2-unit {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.jj .config-ver2-unit > h3 {
  display: inline;
  margin-right: 0.375rem;
}
.jj .config-more-btm {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
}
.jj .config-more-btm a {
  color: #000;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jj .config-more-btm small {
  display: block;
}
.jj .config-more-btm > div {
  margin-bottom: 1rem;
}
.jj .config-content .card {
  height: 95%;
}
.jj .config-content .card .card-body > div {
  margin-bottom: 0.75rem;
}
.jj .config-content .card .card-body > div label {
  width: 80px;
}
.jj .config-content .card .card-body .config-btm-input {
  display: flex;
}
.jj .config-content .card .card-body .config-btm-input label {
  width: 80px;
}
.jj .config-content .card .card-body .config-btm-input input {
  width: calc(100% - 80px);
}
.jj .config-content .config-img {
  margin-bottom: 0.75rem;
  margin-left: 0.375rem;
  margin-right: 0.375rem;
  height: 95%;
  -webkit-box-shadow: 0 0 8px 0 rgba(154, 161, 171, 0.3);
  box-shadow: 0 0 8px 0 rgba(154, 161, 171, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.jj .config-content .config-img > img {
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}
.jj jj-form-carousel {
  padding: 0;
  height: 300px;
  left: 0px;
}
.jj jj-form-carousel .form-set {
  border: none;
}

/* ==MyAppConfig.720.class End ================ */




/* ==BizMyApps.720.class Start ================ */
/* ==BizMyApps.720.class================ */

/* ==BizMyApps.720.class End ================ */