/*
 * INDEX
 * - 01. Import Resource
 * - 02. Typography
 * - 03. Helper Classes
 * - 04. Layout
 * - 05. Columns & Grid

 * - 06. Accordion
 * - 07. Badge
 * - 08. Bread Crumb
 * - 09. Button
 * - 10. button: Floating
 * - 11. Calendar
 * - 12. Cards
 * - 13. Checkbox
 * - 14. Content Switcher
 * - 15. Data Table
 * - 16. Divider
 * - 17. Drop Down
 * - 18. File Uploader
 * - 19. Handler
 * - 20. Input Box
 * - 21. Link
 * - 22. List: Table
 * - 23. List: Gallery
 * - 24. Loading
 * - 25. Media
 * - 26. Notification
 * - 27. Number
 * - 28. Overflow
 * - 29. Pagination
 * - 30. Popup
 * - 31. Quick Menu
 * - 32. Radio Button
 * - 33. Search
 * - 34. Select
 * - 35. Sheets: Bottom
 * - 36. Sheets: Side
 * - 37. Slider
 * - 38. Stepper
 * - 39. Step
 * - 40. Tab
 * - 41. Tag
 * - 42. Text Area
 * - 43. Toggle
 * - 44. Tooltip
 * - 45. Browser Tab
 * - 46. Legend

 * - 47. Animation

 * - 48. Pattern: Empty States
 */

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 01. Import Resource ----------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/

@import url('../icon/Licon.css');
@import url('normalize.css'); /* default element style reset */

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 02. Typography ---------------------------------------------------------------------------------------------------*/
/*= Nanum-Gothic /400: Regular / 700: Bold / 800: ExtraBold ----------------------------------------------------------*/
/*= Noto-Sans / 100: Thin / 300: Light / 400: Regular / 500: Medium / 700: Bold / 900: Black -------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/


.b1 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: calc((-16 / 1000) * 1em);
  line-height: 26px;
}

.b2 {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: calc((-16 / 1000) * 1em);
  line-height: 24px;
}

.b3 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: calc((-16 / 1000) * 1em);
  line-height: 22px;
}

.b4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: calc((-16 / 1000) * 1em);
  line-height: 22px;
}

.b5 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: calc((-15 / 1000) * 1em);
  line-height: 21px;
}

.b6 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: calc((-14 / 1000) * 1em);
  line-height: 19px;
}

.b7 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: calc((-13 / 1000) * 1em);
  line-height: 18px;
}

a { text-decoration: none; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 03. Helper Classes -----------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/


/**
 * Helper Classes / List
 */
.list-size-equal > li { float: left; }

.list-size-equal > li:first-child:nth-last-child(1) { width: 100% !important; }

.list-size-equal > li:first-child:nth-last-child(2),
.list-size-equal > li:first-child:nth-last-child(2) ~ li { width: calc(100% / 2) !important;; }

.list-size-equal > li:first-child:nth-last-child(3),
.list-size-equal > li:first-child:nth-last-child(3) ~ li { width: calc(100% / 3) !important;; }

.list-size-equal > li:first-child:nth-last-child(4),
.list-size-equal > li:first-child:nth-last-child(4) ~ li { width: calc(100% / 4) !important;; }

.list-size-equal > li:first-child:nth-last-child(5),
.list-size-equal > li:first-child:nth-last-child(5) ~ li { width: calc(100% / 5) !important;; }

.list-size-equal > li:first-child:nth-last-child(6),
.list-size-equal > li:first-child:nth-last-child(6) ~ li { width: calc(100% / 6) !important;; }


/**
 * Helper Classes / Text
 */

.txt-inherit { font-size: inherit; }

.line-20 { line-height: 20px; }
.line-24 { line-height: 24px; }
.line-30 { line-height: 30px; }
.line-36 { line-height: 36px; }
.line-40 { line-height: 40px; }
.line-50 { line-height: 50px; }
.line-60 { line-height: 60px; }
.line-120per { line-height: 120%; }
.line-150per { line-height: 150%; }
.line-initial { line-height: normal; }
.line-inherit { line-height: inherit; }

.txt-center { text-align: center; }
.txt-left { text-align: left; }
.txt-right { text-align: right; }

.txt-error { color: #E51313; }
.txt-success { color: #2675FF; }

/**
 * Helper Classes / Display
 */
.v-middle { vertical-align: middle; }
.v-top { vertical-align: top; }
.v-base { vertical-align:baseline; }

.txt-italic { font-style: italic; }
.txt-no-deco { text-decoration: none !important;}
.txt-underline { text-decoration: underline !important;}
.txt-overline { text-decoration: overline;}
.txt-throughline { text-decoration: line-through;}

.word-keep { word-break: keep-all;}
.word-break { word-break: break-all;}

.txt-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dp-inblock { display: inline-block; }
.dp-block { display: block; }
.dp-inline { display: inline;}

.full-w { width: 100%; }
.full-h { height: 100%; }

.over-hidden { overflow: hidden !important; }
.over-visible { overflow: visible !important; }

.float-l {
  display: inline-block;
  float: left;
  width: auto;
}
.float-r {
  display: inline-block;
  float: right;
  width: auto;
}
.float-none { float: none !important; }

.clear { clear: both; }
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

.pos-rel { position: relative;}
.pos-abs { position: absolute;}
.pos-stk { position: -webkit-sticky; position: sticky; }

/**
 * Helper Classes / Padding
 */
.pd-h-1u { padding-left: 4px !important; padding-right: 4px !important; }
.pd-v-1u { padding-top: 4px !important; padding-bottom: 4px !important; }
.pd-h-2u { padding-left: 8px !important; padding-right: 8px !important; }
.pd-v-2u { padding-top: 8px !important; padding-bottom: 8px !important; }
.pd-h-3u { padding-left: 12px !important; padding-right: 12px !important; }
.pd-v-3u { padding-top: 12px !important; padding-bottom: 12px !important; }
.pd-h-4u { padding-left: 16px !important; padding-right: 16px !important; }
.pd-v-4u { padding-top: 16px !important; padding-bottom: 16px !important; }
.pd-h-5u { padding-left: 20px !important; padding-right: 20px !important; }
.pd-v-5u { padding-top: 20px !important; padding-bottom: 20px !important; }
.pd-h-6u { padding-left: 24px !important; padding-right: 24px !important; }
.pd-v-6u { padding-top: 24px !important; padding-bottom: 24px !important; }
.pd-h-7u { padding-left: 28px !important; padding-right: 28px !important; }
.pd-v-7u { padding-top: 28px !important; padding-bottom: 28px !important; }
.pd-h-8u { padding-left: 32px !important; padding-right: 32px !important; }
.pd-v-8u { padding-top: 32px !important; padding-bottom: 32px !important; }
.pd-h-9u { padding-left: 36px !important; padding-right: 36px !important; }
.pd-v-9u { padding-top: 36px !important; padding-bottom: 36px !important; }
.pd-h-10u { padding-left: 40px !important; padding-right: 40px !important; }
.pd-v-10u { padding-top: 40px !important; padding-bottom: 40px !important; }
.pd-h-20u { padding-left: 80px !important; padding-right: 80px !important; }
.pd-v-20u { padding-top: 80px !important; padding-bottom: 80px !important; }

.pd-t-1u { padding-top: 4px !important; }
.pd-b-1u { padding-bottom: 4px !important; }
.pd-l-1u { padding-left: 4px !important; }
.pd-r-1u { padding-right: 4px !important; }

.pd-t-2u { padding-top: 8px !important; }
.pd-b-2u { padding-bottom: 8px !important; }
.pd-l-2u { padding-left: 8px !important; }
.pd-r-2u { padding-right: 8px !important; }

.pd-t-3u { padding-top: 12px !important; }
.pd-b-3u { padding-bottom: 12px !important; }
.pd-l-3u { padding-left: 12px !important; }
.pd-r-3u { padding-right: 12px !important; }

.pd-t-4u { padding-top: 16px !important; }
.pd-b-4u { padding-bottom: 16px !important; }
.pd-l-4u { padding-left: 16px !important; }
.pd-r-4u { padding-right: 16px !important; }

.pd-t-5u { padding-top: 20px !important; }
.pd-b-5u { padding-bottom: 20px !important; }
.pd-l-5u { padding-left: 20px !important; }
.pd-r-5u { padding-right: 20px !important; }

.pd-t-6u { padding-top: 24px !important; }
.pd-b-6u { padding-bottom: 24px !important; }
.pd-l-6u { padding-left: 24px !important; }
.pd-r-6u { padding-right: 24px !important; }

.pd-t-7u { padding-top: 28px !important; }
.pd-b-7u { padding-bottom: 28px !important; }
.pd-l-7u { padding-left: 28px !important; }
.pd-r-7u { padding-right: 28px !important; }

.pd-t-8u { padding-top: 32px !important; }
.pd-b-8u { padding-bottom: 32px !important; }
.pd-l-8u { padding-left: 32px !important; }
.pd-r-8u { padding-right: 32px !important; }

.pd-t-9u { padding-top: 36px !important; }
.pd-b-9u { padding-bottom: 36px !important; }
.pd-l-9u { padding-left: 36px !important; }
.pd-r-9u { padding-right: 36px !important; }

.pd-t-10u { padding-top: 40px !important; }
.pd-b-10u { padding-bottom: 40px !important; }
.pd-l-10u { padding-left: 40px !important; }
.pd-r-10u { padding-right: 40px !important; }

.pd-t-20u { padding-top: 80px !important; }
.pd-b-20u { padding-bottom: 80px !important; }
.pd-l-20u { padding-left: 80px !important; }
.pd-r-20u { padding-right: 80px !important; }

.no-pd { padding: 0 !important;}


/**
 * Helper Classes / Margin
 */
.mg-h-1u { margin-left: 4px !important; margin-right: 4px !important; }
.mg-v-1u { margin-top: 4px !important; margin-bottom: 4px !important; }
.mg-h-2u { margin-left: 8px !important; margin-right: 8px !important; }
.mg-v-2u { margin-top: 8px !important; margin-bottom: 8px !important; }
.mg-h-3u { margin-left: 12px !important; margin-right: 12px !important; }
.mg-v-3u { margin-top: 12px !important; margin-bottom: 12px !important; }
.mg-h-4u { margin-left: 16px !important; margin-right: 16px !important; }
.mg-v-4u { margin-top: 16px !important; margin-bottom: 16px !important; }
.mg-h-5u { margin-left: 20px !important; margin-right: 20px !important; }
.mg-v-5u { margin-top: 20px !important; margin-bottom: 20px !important; }
.mg-h-6u { margin-left: 24px !important; margin-right: 24px !important; }
.mg-v-6u { margin-top: 24px !important; margin-bottom: 24px !important; }
.mg-h-7u { margin-left: 28px !important; margin-right: 28px !important; }
.mg-v-7u { margin-top: 28px !important; margin-bottom: 28px !important; }
.mg-h-8u { margin-left: 32px !important; margin-right: 32px !important; }
.mg-v-8u { margin-top: 32px !important; margin-bottom: 32px !important; }
.mg-h-9u { margin-left: 36px !important; margin-right: 36px !important; }
.mg-v-9u { margin-top: 36px !important; margin-bottom: 36px !important; }
.mg-h-10u { margin-left: 40px !important; margin-right: 40px !important; }
.mg-v-10u { margin-top: 40px !important; margin-bottom: 40px !important; }
.mg-h-20u { margin-left: 80px !important; margin-right: 80px !important; }
.mg-v-20u { margin-top: 80px !important; margin-bottom: 80px !important; }

.mg-t-1u { margin-top: 4px !important; }
.mg-b-1u { margin-bottom: 4px !important; }
.mg-l-1u { margin-left: 4px !important; }
.mg-r-1u { margin-right: 4px !important; }

.mg-t-2u { margin-top: 8px !important; }
.mg-b-2u { margin-bottom: 8px !important; }
.mg-l-2u { margin-left: 8px !important; }
.mg-r-2u { margin-right: 8px !important; }

.mg-t-3u { margin-top: 12px !important; }
.mg-b-3u { margin-bottom: 12px !important; }
.mg-l-3u { margin-left: 12px !important; }
.mg-r-3u { margin-right: 12px !important; }

.mg-t-4u { margin-top: 16px !important; }
.mg-b-4u { margin-bottom: 16px !important; }
.mg-l-4u { margin-left: 16px !important; }
.mg-r-4u { margin-right: 16px !important; }

.mg-t-5u { margin-top: 20px !important; }
.mg-b-5u { margin-bottom: 20px !important; }
.mg-l-5u { margin-left: 20px !important; }
.mg-r-5u { margin-right: 20px !important; }

.mg-t-6u { margin-top: 24px !important; }
.mg-b-6u { margin-bottom: 24px !important; }
.mg-l-6u { margin-left: 24px !important; }
.mg-r-6u { margin-right: 24px !important; }

.mg-t-7u { margin-top: 28px !important; }
.mg-b-7u { margin-bottom: 28px !important; }
.mg-l-7u { margin-left: 28px !important; }
.mg-r-7u { margin-right: 28px !important; }

.mg-t-8u { margin-top: 32px !important; }
.mg-b-8u { margin-bottom: 32px !important; }
.mg-l-8u { margin-left: 32px !important; }
.mg-r-8u { margin-right: 32px !important; }

.mg-t-9u { margin-top: 36px !important; }
.mg-b-9u { margin-bottom: 36px !important; }
.mg-l-9u { margin-left: 36px !important; }
.mg-r-9u { margin-right: 36px !important; }

.mg-t-10u { margin-top: 40px !important; }
.mg-b-10u { margin-bottom: 40px !important; }
.mg-l-10u { margin-left: 40px !important; }
.mg-r-10u { margin-right: 40px !important; }

.mg-t-20u { margin-top: 80px !important; }
.mg-b-20u { margin-bottom: 80px !important; }
.mg-l-20u { margin-left: 80px !important; }
.mg-r-20u { margin-right: 80px !important; }

.no-mg { margin: 0 !important;}

/**
 * Helper Classes / Width
 */
.wth-50 { width: 50px !important; }
.wth-60 { width: 60px !important; }
.wth-70 { width: 70px !important; }
.wth-80 { width: 80px !important; }
.wth-90 { width: 90px !important; }
.wth-100 { width: 100px !important; }
.wth-110 { width: 110px !important; }
.wth-120 { width: 120px !important; }
.wth-130 { width: 130px !important; }
.wth-140 { width: 140px !important; }
.wth-150 { width: 150px !important; }
.wth-160 { width: 160px !important; }
.wth-170 { width: 170px !important; }
.wth-180 { width: 180px !important; }
.wth-190 { width: 190px !important; }
.wth-200 { width: 200px !important; }

/**
 * Helper Classes / Image Container
 */
.image-container {
  display: block;
  width: 100%;
  height: auto;
}
.image-container img {
  display: block;
  width: 100%;
  height: auto;
}


/**
 * Helper Classes / Fix Width Column
 */
.fix-width-column {
  position: relative;
  display: block;
  overflow: visible;
  font-size: 0;
}
/*.fix-width-column > li { overflow: visible; }*/
.fix-width-column > * {
  display: inline-block !important;
  vertical-align: middle !important;
}
.fix-width-column.bottom > * { vertical-align: bottom !important; }
.fix-width-column.top > * { vertical-align: top !important; }

.fix-width-column.left > *:nth-child(1) { width: 100px; }
.fix-width-column.left > *:nth-child(2) { width: calc(100% - 100px); }
.fix-width-column.left.w-50 > *:nth-child(1) { width: 50px; }
.fix-width-column.left.w-50 > *:nth-child(2) { width: calc(100% - 50px); }
.fix-width-column.left.w-60 > *:nth-child(1) { width: 60px; }
.fix-width-column.left.w-60 > *:nth-child(2) { width: calc(100% - 60px); }
.fix-width-column.left.w-70 > *:nth-child(1) { width: 70px; }
.fix-width-column.left.w-70 > *:nth-child(2) { width: calc(100% - 70px); }
.fix-width-column.left.w-80 > *:nth-child(1) { width: 80px; }
.fix-width-column.left.w-80 > *:nth-child(2) { width: calc(100% - 80px); }
.fix-width-column.left.w-90 > *:nth-child(1) { width: 90px; }
.fix-width-column.left.w-90 > *:nth-child(2) { width: calc(100% - 90px); }
.fix-width-column.left.w-100 > *:nth-child(1) { width: 100px; }
.fix-width-column.left.w-100 > *:nth-child(2) { width: calc(100% - 100px); }
.fix-width-column.left.w-110 > *:nth-child(1) { width: 110px; }
.fix-width-column.left.w-110 > *:nth-child(2) { width: calc(100% - 110px); }
.fix-width-column.left.w-120 > *:nth-child(1) { width: 120px; }
.fix-width-column.left.w-120 > *:nth-child(2) { width: calc(100% - 120px); }
.fix-width-column.left.w-130 > *:nth-child(1) { width: 130px; }
.fix-width-column.left.w-130 > *:nth-child(2) { width: calc(100% - 130px); }
.fix-width-column.left.w-140 > *:nth-child(1) { width: 140px; }
.fix-width-column.left.w-140 > *:nth-child(2) { width: calc(100% - 140px); }
.fix-width-column.left.w-150 > *:nth-child(1) { width: 150px; }
.fix-width-column.left.w-150 > *:nth-child(2) { width: calc(100% - 150px); }
.fix-width-column.left.w-160 > *:nth-child(1) { width: 160px; }
.fix-width-column.left.w-160 > *:nth-child(2) { width: calc(100% - 160px); }
.fix-width-column.left.w-170 > *:nth-child(1) { width: 170px; }
.fix-width-column.left.w-170 > *:nth-child(2) { width: calc(100% - 170px); }
.fix-width-column.left.w-180 > *:nth-child(1) { width: 180px; }
.fix-width-column.left.w-180 > *:nth-child(2) { width: calc(100% - 180px); }
.fix-width-column.left.w-190 > *:nth-child(1) { width: 190px; }
.fix-width-column.left.w-190 > *:nth-child(2) { width: calc(100% - 190px); }
.fix-width-column.left.w-200 > *:nth-child(1) { width: 200px; }
.fix-width-column.left.w-200 > *:nth-child(2) { width: calc(100% - 200px); }

.fix-width-column.right > *:nth-child(1) { width: calc(100% - 100px); }
.fix-width-column.right > *:nth-child(2) { width: 100px; }
.fix-width-column.right.w-50 > *:nth-child(1) { width: calc(100% - 50px); }
.fix-width-column.right.w-50 > *:nth-child(2) { width: 50px; }
.fix-width-column.right.w-60 > *:nth-child(1) { width: calc(100% - 60px); }
.fix-width-column.right.w-60 > *:nth-child(2) { width: 60px; }
.fix-width-column.right.w-70 > *:nth-child(1) { width: calc(100% - 70px); }
.fix-width-column.right.w-70 > *:nth-child(2) { width: 70px; }
.fix-width-column.right.w-80 > *:nth-child(1) { width: calc(100% - 80px); }
.fix-width-column.right.w-80 > *:nth-child(2) { width: 80px; }
.fix-width-column.right.w-90 > *:nth-child(1) { width: calc(100% - 90px); }
.fix-width-column.right.w-90 > *:nth-child(2) { width: 90px; }
.fix-width-column.right.w-100 > *:nth-child(1) { width: calc(100% - 100px); }
.fix-width-column.right.w-100 > *:nth-child(2) { width: 100px; }
.fix-width-column.right.w-110 > *:nth-child(1) { width: calc(100% - 110px); }
.fix-width-column.right.w-110 > *:nth-child(2) { width: 110px; }
.fix-width-column.right.w-120 > *:nth-child(1) { width: calc(100% - 120px); }
.fix-width-column.right.w-120 > *:nth-child(2) { width: 120px; }
.fix-width-column.right.w-130 > *:nth-child(1) { width: calc(100% - 130px); }
.fix-width-column.right.w-130 > *:nth-child(2) { width: 130px; }
.fix-width-column.right.w-140 > *:nth-child(1) { width: calc(100% - 140px); }
.fix-width-column.right.w-140 > *:nth-child(2) { width: 140px; }
.fix-width-column.right.w-150 > *:nth-child(1) { width: calc(100% - 150px); }
.fix-width-column.right.w-150 > *:nth-child(2) { width: 150px; }
.fix-width-column.right.w-160 > *:nth-child(1) { width: calc(100% - 160px); }
.fix-width-column.right.w-160 > *:nth-child(2) { width: 160px; }
.fix-width-column.right.w-170 > *:nth-child(1) { width: calc(100% - 170px); }
.fix-width-column.right.w-170 > *:nth-child(2) { width: 170px; }
.fix-width-column.right.w-180 > *:nth-child(1) { width: calc(100% - 180px); }
.fix-width-column.right.w-180 > *:nth-child(2) { width: 180px; }
.fix-width-column.right.w-190 > *:nth-child(1) { width: calc(100% - 190px); }
.fix-width-column.right.w-190 > *:nth-child(2) { width: 190px; }
.fix-width-column.right.w-200 > *:nth-child(1) { width: calc(100% - 200px); }
.fix-width-column.right.w-200 > *:nth-child(2) { width: 200px; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 04. Layout -------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/

a { color: inherit; }
::after,
::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



button, a { cursor: pointer; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 05. Columns & Grid------------------------------------------------------------------------------------------------*/
/*= 최대한의 호환성을 위해 flex, grid 지양하는 형태로 작업됨-----------------------------------------------------------------------*/
/*= Columns : 12------------------------------------------------------------------------------------------------------*/
/*= Gutters : 8px(고정)------------------------------------------------------------------------------------------------*/
/*= Side Paddings : 16*2px(고정)----------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/

/**
 * Columns
 */
.container {
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
}

.col-container {
  margin-right: -4px;
  margin-left: -4px;
}

.col-container:before,
.col-container:after {
  display: table;
  content: " ";
}
.col-container:after {
  clear: both;
}


.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
  position: relative;
  padding: 0 4px;
}
/*.col-container .col:first-child { padding-left: 0; }*/
/*.col-container .col:last-child { padding-right: 0; }*/

.col-container .test-col {
  display: block;
  width: 100%;
  height: auto;
  padding: 7px;
  text-align: center;
  background-color: wheat;
}

.col-container .test-col span { vertical-align: middle; }

/**
 * Responsive - Extra Small(xs)
 */
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
    float: left;
}
.col-xs-1 { width: 8.33333333%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }


/**
 * Responsive - Small(sm)
 */
@media (min-width: 360px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 { float: left; }

  .col-sm-1 { width: 8.33333333%; }
  .col-sm-2 { width: 16.66666667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.33333333%; }
  .col-sm-5 { width: 41.66666667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.33333333%; }
  .col-sm-8 { width: 66.66666667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.33333333%; }
  .col-sm-11 { width: 91.66666667%; }
  .col-sm-12 { width: 100%; }
}

/**
 * Responsive - Medium(md)
 */
@media (min-width: 600px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 { float: left; }

  .col-md-1 { width: 8.33333333%; }
  .col-md-2 { width: 16.66666667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33333333%; }
  .col-md-5 { width: 41.66666667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.33333333%; }
  .col-md-8 { width: 66.66666667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.33333333%; }
  .col-md-11 { width: 91.66666667%; }
  .col-md-12 { width: 100%; }
}

/**
 * Responsive - Large(lg)
 */
@media (min-width: 1280px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 { float: left; }

  .col-lg-1 { width: 8.33333333%; }
  .col-lg-2 { width: 16.66666667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33333333%; }
  .col-lg-5 { width: 41.66666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33333333%; }
  .col-lg-8 { width: 66.66666667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.33333333%; }
  .col-lg-11 { width: 91.66666667%; }
  .col-lg-12 { width: 100%; }
}

/**
 * Responsive - Extra Large(xl)
 */
@media (min-width: 1921px) {
  .col-xl-1,
  .col-xl-2,
  .col-xl-3,
  .col-xl-4,
  .col-xl-5,
  .col-xl-6,
  .col-xl-7,
  .col-xl-8,
  .col-xl-9,
  .col-xl-10,
  .col-xl-11,
  .col-xl-12 { float: left; }

  .col-xl-1 { width: 8.33333333%; }
  .col-xl-2 { width: 16.66666667%; }
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.33333333%; }
  .col-xl-5 { width: 41.66666667%; }
  .col-xl-6 { width: 50%; }
  .col-xl-7 { width: 58.33333333%; }
  .col-xl-8 { width: 66.66666667%; }
  .col-xl-9 { width: 75%; }
  .col-xl-10 { width: 83.33333333%; }
  .col-xl-11 { width: 91.66666667%; }
  .col-xl-12 { width: 100%; }
}

/**
 * Grid
 */
ul.grid-container {
  width: 100%;
  margin-left: -4px;
  margin-right: -4px;
}
ul.grid-container:before,
ul.grid-container:after {
  display: table;
  content: " ";
}
ul.grid-container:after { clear: both; }

ul.grid-container.grid-1 > li,
ul.grid-container.grid-2 > li,
ul.grid-container.grid-3 > li,
ul.grid-container.grid-4 > li,
ul.grid-container.grid-5 > li,
ul.grid-container.grid-6 > li,
ul.grid-container.grid-7 > li,
ul.grid-container.grid-8 > li,
ul.grid-container.grid-9 > li,
ul.grid-container.grid-10 > li,
ul.grid-container.grid-11 > li,
ul.grid-container.grid-12 > li {
  position: relative;
  float: left;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 8px;
}

ul.grid-container.grid-1 > li { width: 100% }
ul.grid-container.grid-2 > li { width: calc(100% / 2) }
ul.grid-container.grid-3 > li { width: calc(100% / 3) }
ul.grid-container.grid-4 > li { width: calc(100% / 4) }
ul.grid-container.grid-5 > li { width: calc(100% / 5) }
ul.grid-container.grid-6 > li { width: calc(100% / 6) }
ul.grid-container.grid-7 > li { width: calc(100% / 7) }
ul.grid-container.grid-8 > li { width: calc(100% / 8) }
ul.grid-container.grid-9 > li { width: calc(100% / 9) }
ul.grid-container.grid-10 > li { width: calc(100% / 10) }
ul.grid-container.grid-11 > li { width: calc(100% / 11) }
ul.grid-container.grid-12 > li { width: calc(100% / 12) }


/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 06. Accordion ----------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.accordion {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.accordion.accordion-list > ul > li > a {
  position: relative;
  display: block;
  padding: 18px 48px 18px 18px;
  background-color: #f8f8f8;
  color: #101314;
  font-size: 16px;
  /*line-height: 1.25;*/
  width: 100%;
  border-bottom: 1px solid #d8d8d8;
}
.accordion.accordion-list > ul > li > a:after {
  position: absolute;
  top: 50%;
  right: 10px;
  content: '\e911';
  font-family: 'Licon';
  font-size: 24px;
  transform: translateY(-50%);
  font-weight: 400;
}
.accordion.accordion-list > ul > li > a:hover { background-color: rgba(233, 233, 233, .5); }
.accordion.accordion-list > ul > li.on > a {
  font-weight: 700;
  border-bottom: 0px;
}
.accordion.accordion-list > ul > li.on > a:after {
  content: '\e967';
}
.accordion.accordion-list > ul > li.disabled > a {
  color: rgba(46, 46, 46, .1);
  pointer-events: none;
}
.accordion.accordion-list > ul > li > .accordion-body {
  display: none;
  color: #4c4c4c;
  padding: 0 48px 20px 18px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #d8d8d8;
}
.accordion.accordion-list > ul > li.on > .accordion-body { display: block; }

.accordion.accordion-list.accordion-md > ul > li > a { padding: 18px 48px 18px 18px; }
.accordion.accordion-list.accordion-md > ul > li > a:after { font-size: 24px; }
.accordion.accordion-list.accordion-md > ul > li > .accordion-body { padding: 0 48px 20px 18px; }

.accordion.accordion-list.accordion-sm > ul > li > a { padding: 12px 44px 12px 12px; }
.accordion.accordion-list.accordion-sm > ul > li > a:after { font-size: 20px; }
.accordion.accordion-list.accordion-sm > ul > li > .accordion-body { padding: 0 44px 12px 12px; }


.theme-dark .accordion { background-color: #101314; }
.theme-dark .accordion.accordion-list > ul > li > a {
  color: #d8d8d8;
  background-color: #101314;
  border-bottom-color: rgba(76, 76, 76, .5);
}
.theme-dark .accordion.accordion-list > ul > li > a:hover { background-color: rgba(76, 76, 76, .5); }
.theme-dark .accordion.accordion-list > ul > li > .accordion-body {
  color: #cacaca;
  background-color: inherit;
  border-bottom: 1px solid rgba(76, 76, 76, .5);
}
.theme-dark .accordion.accordion-list > ul > li.disabled > a { color: rgba(141, 141, 141, .3); }


.accordion.accordion-contents .accordion-header {
  padding: 20px;
}
.accordion.accordion-contents .accordion-body {
  display: none;
  padding: 0 20px 20px;
}
.accordion.accordion-contents .btn-accordion-toggle {
  border-color: #8d8d8d;
  color: #101314;
}
.accordion.accordion-contents .btn-accordion-toggle:hover {
  border-color: #4c4c4c;
}
.accordion.accordion-contents.on .btn-accordion-toggle {
  border-color: transparent;
  background-color: #101314;
}
.accordion.accordion-contents.on .accordion-body {
  display: block;
}
.accordion.accordion-contents.on .btn-accordion-toggle .icon { color: #f8f8f8; }
.accordion.accordion-contents.disabled .btn-accordion-toggle,
.accordion.accordion-contents .btn-accordion-toggle:disabled {
  background-color: transparent;
  border-color: rgba(202, 202, 202, .3) !important;
  color: #cacaca !important;
  pointer-events: none;
}

.theme-dark .accordion .accordion-body {
  color: #c4c4c4;
}
.theme-dark .accordion.accordion-contents .btn-accordion-toggle {
  color: #cacaca !important;
  border-color: #8d8d8d !important;
}
.theme-dark .accordion.accordion-contents.on .btn-accordion-toggle {
  border-color: transparent;
  background-color: #f8f8f8;
}
.theme-dark .accordion.accordion-contents.on .btn-accordion-toggle .icon {
  color: #101314;
  transform: rotate(180deg);
}
.theme-dark .accordion.accordion-contents.disabled .btn-accordion-toggle,
.theme-dark .accordion.accordion-contents .btn-accordion-toggle:disabled {
  background-color: transparent;
  border-color: #8d8d8d;
}
.theme-dark .accordion.accordion-contents.disabled .btn-accordion-toggle .icon,
.theme-dark .accordion.accordion-contents .btn-accordion-toggle:disabled .icon { color: #8d8d8d; }


/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 07. Badge --------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.badge {
  display: inline-block;
  width: auto;
  border-radius: 9px;
  background-color: #e54e2b;
  color: #f8f8f8;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: calc((-13 / 1000) * 1em);
  line-height: 18px;
  padding: 0 5.74px;
  box-shadow: 0 2px 4px 0 rgba(229, 78, 43, .3);
}
.badge.badge-dot {
  font-size: 0;
  line-height: 1;
  box-shadow: none;
  width: 4px;
  height: 4px;
  letter-spacing: normal;
  padding: 0;
}
.badge.badge-inline {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}
.badge.badge-dot.badge-inline {
  vertical-align: top;
  margin-left: 0;
}
.disabled .badge,
.badge.disabled,
.btn:disabled .badge {
  color: #cacaca !important;
  background-color: rgba(202, 202, 202, .3) !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
}

.badge-container {
  position: relative;
  display: inline-block;
}

.badge-container > .badge {
  position: absolute;
  /*top: calc(-100% + 10px);*/
  top: -10px;
  left: calc(100% - 10px);
}
.badge-container > .badge.badge-dot {
  top: 0;
  left: calc(100% - 4px);
}

.theme-dark .badge {
  background-color: #E54E2B;
  box-shadow: 0 6px 10px 0 rgba(229, 78, 43, .38);
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 08. Bread Crumb --------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.breadcrumb {
  display: block;
  width: 100%;
  height: auto;
}
.breadcrumb > ul {
  overflow: visible;
}
.breadcrumb > ul > li {
  display: inline-block;
  width: auto;
  height: auto;
  font-size: 0;
}
.breadcrumb > ul > li > a {
  font-size: 13px;
  color: #8d8d8d;
}
.breadcrumb > ul > li > a:hover { text-decoration: underline; }
.breadcrumb > ul > li > a:active { color: #101314; }
.breadcrumb > ul > li.disabled > a,
.breadcrumb > ul > li.disabled.dropdown > a {
  color: rgba(141, 141, 141, .3);
  pointer-events: none;
}
.breadcrumb > ul > li.selected > a {
  color: #101314;
  pointer-events: none;
}
.breadcrumb > ul > li:after,
.breadcrumb > ul > li.dropdown:after {
  content: '/';
  margin: 0 12px;
  color: #8d8d8d;
  font-size: 13px;

  position: relative;
  top: auto;
  right: auto;
  line-height: normal;
  padding: 0;
  pointer-events: none;
}
.breadcrumb > ul > li:last-child:after { display: none; }

.breadcrumb > ul > li.dropdown > a {
  position: relative;
  color: #101314;
  padding-right: 12px;
}
.breadcrumb > ul > li.dropdown > a:after {
  position: absolute;
  top: 50%;
  right: 0;
  content: '\e911';
  font-family: 'Licon';
  font-size: 12px;
  transform: translateY(-50%);
}

.breadcrumb .dropdown > .dropdown-menu {
  top: 100%;
  margin-top: 6px;
  width: auto;
}

.breadcrumb .dropdown-menu-options a {
  display: inline-block;
  font-size: 14px;
  padding: 9px 16px;
  min-width: 180px;
}
.breadcrumb > ul > li.has-more > a > i {
  display: none;
  font-size: 13px;
  line-height: 15px;
}

.theme-dark .breadcrumb > ul > li > a { color: #6e6e6e; }
.theme-dark .breadcrumb > ul > li > a:active { color: #cacaca; }
.theme-dark .breadcrumb > ul > li.dropdown > a,
.theme-dark .breadcrumb > ul > li.selected > a { color: #d8d8d8; }
.theme-dark .breadcrumb > ul > li.disabled > a { color: rgba(141, 141, 141, .3); }

@media (max-width: 599px) {
  .breadcrumb > ul > li.has-more > a { padding-right: 0; }
  .breadcrumb > ul > li.has-more > a > i { display: inline-block; }
  .breadcrumb > ul > li.has-more > a > .label { display: none; }
  .breadcrumb > ul > li.has-more > a:after { display: none; }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 09. buttons-------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.btn {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: inherit;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0 16px;
  line-height: 38px;
  border-radius: 2px;
  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;
}
.btn > .icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 0;
  margin-right: 4px;
}
.btn > .icon > i {
  font-size: 20px;
  vertical-align: middle;
}
.btn > .label + .icon {
  margin-right: 0;
  margin-left: 4px;
}
.btn > .label {
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}
.btn:hover { text-decoration: none; }

/*.btn:focus, .btn.focus {*/
/*    outline: 0;*/
/*    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
/*}*/

.btn:not(:disabled):not(.disabled) { cursor: pointer; }
.btn.btn-full {
  display: block;
  width: 100%;
}
/**
 *Button / size - Extra Small
 */
.btn.btn-xs {
  font-weight: 400;
  line-height: 22px; /* xs button height 24px */
  padding: 0 16px;
}
.btn.btn-xs > .icon > i  { font-size: 16px; }
.btn.btn-xs > .label { font-size: 13px; }

/**
 * Button / size - Small
 */
.btn.btn-sm {
  font-weight: 700;
  line-height: 32px; /* sm button height 34px */
  padding: 0 16px;
}
.btn.btn-sm > .icon > i  { font-size: 20px; }
.btn.btn-sm > .label { font-size: 14px; }

/**
 * Button / size - Medium
 */
.btn.btn-md {
  font-weight: 700;
  line-height: 38px; /* md button height 40px; */
  padding: 0 16px;
}
.btn.btn-md > .icon > i { font-size: 20px; }
.btn.btn-md > .label { font-size: 14px; }

/**
 * Button / size - Large
 */
.btn.btn-lg {
  font-weight: 700;
  line-height: 46px; /* md button height 48px; */
  padding: 0 16px;
}
.btn.btn-lg > .icon > i { font-size: 24px; }
.btn.btn-lg > .label { font-size: 16px; }

/**
 * Button / size - Extra Large
 */
.btn.btn-xl {
  font-weight: 700;
  line-height: 54px; /* xl button height 56px */
  padding: 0 16px;
}
.btn.btn-xl > .icon > i { font-size: 24px; }
.btn.btn-xl > .label { font-size: 16px; }

/**
 * Button / Type - Container
 */
.btn.btn-primary.btn-container,
.theme-white .btn.btn-primary.btn-container {
  background-color: #e54e2b;
  color: #f8f8f8;
}
.btn.btn-primary.btn-container:hover,
.theme-white .btn.btn-primary.btn-container:hover { background-color: #922412; }
.btn.btn-primary.btn-container:active,
.theme-white .btn.btn-primary.btn-container:active { background-color: #531006; }
.btn.btn-primary.btn-container:disabled,
.theme-white .btn.btn-primary.btn-container:disabled {
  background-color: rgba(202, 202, 202, .3);
  color: #cacaca;
}

.theme-dark .btn.btn-primary.btn-container {
  background-color: #e54e2b;
  color: #f8f8f8;
}
.theme-dark .btn.btn-primary.btn-container:hover { background-color: #9d3a2a; }
.theme-dark .btn.btn-primary.btn-container:active { background-color: #65281f; }
.theme-dark .btn.btn-primary.btn-container:disabled {
  background-color: rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}


.btn.btn-secondary.btn-container,
.theme-white .btn.btn-secondary.btn-container {
  background-color: #101314;
  color: #f8f8f8;
}

.btn.btn-secondary.btn-container:hover,
.theme-white .btn.btn-secondary.btn-container:hover { background-color: #4c4c4c; }
.btn.btn-secondary.btn-container:active,
.theme-white .btn.btn-secondary.btn-container:active { background-color: #2e3031; }
.btn.btn-secondary.btn-container:disabled,
.theme-white .btn.btn-secondary.btn-container:disabled {
  background-color: rgba(202, 202, 202, .3);
  color: #cacaca;
}


.theme-dark .btn.btn-secondary.btn-container {
  background-color: #f8f8f8;
  color: #101314;
}
.theme-dark .btn.btn-secondary.btn-container:hover { background-color: #d8d8d8; }
.theme-dark .btn.btn-secondary.btn-container:active { background-color: #a7a7a7; }
.theme-dark .btn.btn-secondary.btn-container:disabled {
  background-color: rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}


.btn.btn-gray.btn-container,
.theme-white .btn.btn-gray.btn-container {
  background-color: #6e6e6e;
  color: #f8f8f8;
}
.btn.btn-gray.btn-container:hover,
.theme-white .btn.btn-gray.btn-container:hover { background-color: #4c4c4c; }

.btn.btn-gray.btn-container:active,
.theme-white .btn.btn-gray.btn-container:active { background-color: #6e6e6e; }

.btn.btn-gray.btn-container:disabled,
.theme-white .btn.btn-gray.btn-container:disabled {
  background-color: rgba(202, 202, 202, .3);
  color: #cacaca;
}


.theme-dark .btn.btn-gray.btn-container {
  background-color: #8d8d8d;
  color: #f8f8f8;
}
.theme-dark .btn.btn-gray.btn-container:hover { background-color: #4c4c4c; }
.theme-dark .btn.btn-gray.btn-container:active { background-color: #2e3031; }
.theme-dark .btn.btn-gray.btn-container:disabled {
  background-color: rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}

/**
 * Button / Type - Ghost
 */
.btn.btn-ghost { background-color: transparent; }

.btn.btn-primary.btn-ghost,
.theme-white .btn.btn-primary.btn-ghost {
  border: 1px solid #e54e2b;
  color: #e54e2b;
}
.btn.btn-primary.btn-ghost:hover,
.theme-white .btn.btn-primary.btn-ghost:hover {
  border: 1px solid #922412;
  color: #922412;
}
.btn.btn-primary.btn-ghost:active,
.theme-white .btn.btn-primary.btn-ghost:active {
  background-color: rgba(83, 16, 6, .1);
  border: 1px solid #531006;
  color: #531006;
}
.btn.btn-primary.btn-ghost:disabled,
.theme-white .btn.btn-primary.btn-ghost:disabled {
  background-color: transparent;
  border: 1px solid rgba(202, 202, 202, .3);
  color: #cacaca;
}

.theme-dark .btn.btn-primary.btn-ghost {
  border: 1px solid #e54e2b;
  color: #e54e2b;
}
.theme-dark .btn.btn-primary.btn-ghost:hover {
  border: 1px solid #9d3a2a;
  color: #9d3a2a;
}
.theme-dark .btn.btn-primary.btn-ghost:active {
  background-color: rgba(101, 40, 31, .1);
  border: 1px solid #65281f;
  color: #65281f;
}
.theme-dark .btn.btn-primary.btn-ghost:disabled {
  background-color: transparent;
  border: 1px solid rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}


.btn.btn-secondary.btn-ghost,
.theme-white .btn.btn-secondary.btn-ghost {
  border: 1px solid #101314;
  color: #101314;
}
.btn.btn-secondary.btn-ghost:hover,
.theme-white .btn.btn-secondary.btn-ghost:hover {
  border: 1px solid #4c4c4c;
  color: #4c4c4c;
}
.btn.btn-secondary.btn-ghost:active,
.theme-white .btn.btn-secondary.btn-ghost:active {
  background-color: rgba(110, 110, 110, .1);
  border: 1px solid #6e6e6e;
  color: #6e6e6e;
}
.btn.btn-secondary.btn-ghost:disabled,
.theme-white .btn.btn-secondary.btn-ghost:disabled {
  background-color: transparent;
  border: 1px solid rgba(202, 202, 202, .3);
  color: #cacaca;
}


.theme-dark .btn.btn-secondary.btn-ghost {
  border: 1px solid #f8f8f8;
  color: #f8f8f8;
}
.theme-dark .btn.btn-secondary.btn-ghost:hover {
  border: 1px solid rgba(216, 216, 216, .5);
  color: #d8d8d8;
}
.theme-dark .btn.btn-secondary.btn-ghost:active {
  background-color: rgba(167, 167, 167, .1);
  border: 1px solid rgba(167, 167, 167, .5);
  color: #a7a7a7;
}
.theme-dark .btn.btn-secondary.btn-ghost:disabled {
  background-color: transparent;
  border: 1px solid rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}


.btn.btn-gray.btn-ghost,
.theme-white .btn.btn-gray.btn-ghost {
  border: 1px solid #6e6e6e;
  color: #6e6e6e;
}
.btn.btn-gray.btn-ghost:hover,
.theme-white .btn.btn-gray.btn-ghost:hover {
  border: 1px solid #4c4c4c;
  color: #4c4c4c;
}
.btn.btn-gray.btn-ghost:active,
.theme-white .btn.btn-gray.btn-ghost:active {
  background-color: rgba(46, 48, 49, .1);
  border: 1px solid #2e3031;
  color: #2e3031;
}
.btn.btn-gray.btn-ghost:disabled,
.theme-white .btn.btn-gray.btn-ghost:disabled {
  background-color: transparent;
  border: 1px solid rgba(202, 202, 202, .3);
  color: #cacaca;
}


.theme-dark .btn.btn-gray.btn-ghost {
  border: 1px solid #8d8d8d;
  color: #8d8d8d;
}
.theme-dark .btn.btn-gray.btn-ghost:hover {
  border: 1px solid #4c4c4c;
  color: #4c4c4c;
}
.theme-dark .btn.btn-gray.btn-ghost:active {
  background-color: rgba(46, 48, 49, .1);
  border: 1px solid #2e3031;
  color: #2e3031;
}
.theme-dark .btn.btn-gray.btn-ghost:disabled {
  background-color: transparent;
  border: 1px solid rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}

/**
 * Button / Type - Text
 */
.btn.btn-txt { background-color: transparent; }

.btn.btn-primary.btn-txt,
.theme-white .btn.btn-primary.btn-txt { color: #e54e2b; }
.btn.btn-primary.btn-txt:hover,
.theme-white .btn.btn-primary.btn-txt:hover {
  border: 1px solid rgba(146, 36, 18, .1);
  color: #922412;
}
.btn.btn-primary.btn-txt:active,
.theme-white .btn.btn-primary.btn-txt:active {
  background-color: rgba(83, 16, 6, .1);
  border: 1px solid transparent;
  color: #531006;
}
.btn.btn-primary.btn-txt:disabled,
.theme-white .btn.btn-primary.btn-txt:disabled {
  background-color: transparent;
  border: 1px solid transparent;
  color: #cacaca;
}


.theme-dark .btn.btn-primary.btn-txt { color: #e54e2b; }
.theme-dark .btn.btn-primary.btn-txt:hover {
  border: 1px solid rgba(157, 58, 42, .1);
  color: #9d3a2a;
}
.theme-dark .btn.btn-primary.btn-txt:active {
  background-color: rgba(101, 40, 31, 0.1);
  border: 1px solid transparent;
  color: #65281f;
}
.theme-dark .btn.btn-primary.btn-txt:disabled {
  background-color: transparent;
  border: 1px solid transparent;
  color: rgba(141, 141, 141, .3);
}


.btn.btn-secondary.btn-txt,
.theme-white .btn.btn-secondary.btn-txt { color: #101314; }
.btn.btn-secondary.btn-txt:hover,
.theme-white .btn.btn-secondary.btn-txt:hover {
  border: 1px solid rgba(76, 76, 76, .1);
  color: #4c4c4c;
}
.btn.btn-secondary.btn-txt:active,
.theme-white .btn.btn-secondary.btn-txt:active {
  background-color: rgba(110, 110, 110, .1);
  border: 1px solid transparent;
  color: #6e6e6e;
}
.btn.btn-secondary.btn-txt:disabled,
.theme-white .btn.btn-secondary.btn-txt:disabled {
  background-color: transparent;
  border: 1px solid transparent;
  color: #cacaca;
}


.theme-dark .btn.btn-secondary.btn-txt { color: #f8f8f8; }
.theme-dark .btn.btn-secondary.btn-txt:hover {
  border: 1px solid rgba(141, 141, 141, .1);
  color: #4c4c4c;
}
.theme-dark .btn.btn-secondary.btn-txt:active {
  background-color: rgba(167, 167, 167, 0.1);
  border: 1px solid transparent;
  color: #6e6e6e;
}
.theme-dark .btn.btn-secondary.btn-txt:disabled {
  background-color: transparent;
  border: 1px solid transparent;
  color: rgba(141, 141, 141, .3);
}



.btn.btn-gray.btn-txt,
.theme-white .btn.btn-gray.btn-txt { color: #6e6e6e; }
.btn.btn-gray.btn-txt:hover,
.theme-white .btn.btn-gray.btn-txt:hover {
  border: 1px solid rgba(76, 76, 76, .1);
  color: #4c4c4c;
}
.btn.btn-gray.btn-txt:active,
.theme-white .btn.btn-gray.btn-txt:active {
  background-color: rgba(46, 48, 49, .1);
  border: 1px solid transparent;
  color: #2e3031;
}
.btn.btn-gray.btn-txt:disabled,
.theme-white .btn.btn-gray.btn-txt:disabled {
  background-color: transparent;
  border: 1px solid transparent;
  color: #cacaca;
}


.theme-dark .btn.btn-gray.btn-txt { color: #8d8d8d; }
.theme-dark .btn.btn-gray.btn-txt:hover {
  border: 1px solid rgba(76, 76, 76, .2);
  color: #4c4c4c;
}
.theme-dark .btn.btn-gray.btn-txt:active {
  background-color: rgba(46, 48, 49, .2);
  border: 1px solid transparent;
  color: #2e3031;
}
.theme-dark .btn.btn-gray.btn-txt:disabled {
  background-color: transparent;
  border: 1px solid transparent;
  color: rgba(141, 141, 141, .3);
}



/**
 * Button / Type - Icon
 */
.btn.btn-icon {
  background-color: transparent;
  line-height: 1 !important;
  padding: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
}
.btn.btn-icon > .icon {
  line-height: 1;
  margin: 0;
}
.btn.btn-icon > .label { display: none; }

.btn.btn-xs.btn-icon { width: 24px; height: 24px }
.btn.btn-sm.btn-icon { width: 34px; height: 34px }
.btn.btn-md.btn-icon { width: 40px; height: 40px }
.btn.btn-lg.btn-icon { width: 48px; height: 48px }
.btn.btn-xl.btn-icon { width: 56px; height: 56px }

.btn.btn-primary.btn-icon,
.theme-white .btn.btn-primary.btn-icon {
  border: 1px solid #e54e2b;
  color: #e54e2b;
}
.btn.btn-primary.btn-icon:hover,
.theme-white .btn.btn-primary.btn-icon:hover {
  border: 1px solid #922412;
  color: #922412;
}
.btn.btn-primary.btn-icon:active,
.theme-white .btn.btn-primary.btn-icon:active {
  background-color: rgba(83, 16, 6, .1);
  border: 1px solid #531006;
  color: #531006;
}
.btn.btn-primary.btn-icon:disabled,
.theme-white .btn.btn-primary.btn-icon:disabled {
  border: 1px solid rgba(202, 202, 202, .3);
  background-color: transparent;
  color: #cacaca;
}


.theme-dark .btn.btn-primary.btn-icon {
  border: 1px solid #e54e2b;
  color: #e54e2b;
}
.theme-dark .btn.btn-primary.btn-icon:hover {
  border: 1px solid #9d3a2a;
  color: #9d3a2a;
}
.theme-dark .btn.btn-primary.btn-icon:active {
  background-color: rgba(101, 40, 31, .1);
  border: 1px solid #65281f;
  color: #65281f;
}
.theme-dark .btn.btn-primary.btn-icon:disabled {
  border: 1px solid rgba(141, 141, 141, .3);
  background-color: transparent;
  color: rgba(141, 141, 141, .3);
}


.btn.btn-secondary.btn-icon,
.theme-white .btn.btn-secondary.btn-icon {
  border: 1px solid #101314;
  color: #101314;
}
.btn.btn-secondary.btn-icon:hover,
.theme-white .btn.btn-secondary.btn-icon:hover {
  border: 1px solid #4c4c4c;
  color: #4c4c4c;
}
.btn.btn-secondary.btn-icon:active,
.theme-white .btn.btn-secondary.btn-icon:active {
  background-color: rgba(110, 110, 110, .1);
  border: 1px solid #6e6e6e;
  color: #6e6e6e;
}
.btn.btn-secondary.btn-icon:disabled,
.theme-white .btn.btn-secondary.btn-icon:disabled {
  background-color: transparent;
  border: 1px solid rgba(202, 202, 202, 0.3);
  color: #cacaca;
}



.theme-dark .btn.btn-secondary.btn-icon {
  border: 1px solid #f8f8f8;
  color: #f8f8f8;
}
.theme-dark .btn.btn-secondary.btn-icon:hover {
  border: 1px solid rgba(216, 216, 216, .5);
  color: #d8d8d8;
}
.theme-dark .btn.btn-secondary.btn-icon:active {
  background-color: rgba(167, 167, 167, .1);
  border: 1px solid rgba(167, 167, 167, .5);
  color: #a7a7a7;
}
.theme-dark .btn.btn-secondary.btn-icon:disabled {
  background-color: transparent;
  border: 1px solid rgba(141, 141, 141, 0.3);
  color: rgba(141, 141, 141, 0.3);
}



.btn.btn-gray.btn-icon,
.theme-white .btn.btn-gray.btn-icon {
  border: 1px solid #6e6e6e;
  color: #6e6e6e;
}
.btn.btn-gray.btn-icon:hover,
.theme-white .btn.btn-gray.btn-icon:hover {
  border: 1px solid #4c4c4c;
  color: #4c4c4c;
}
.btn.btn-gray.btn-icon:active,
.theme-white .btn.btn-gray.btn-icon:active {
  background-color: rgba(46, 48, 49, 0.1);
  border: 1px solid #2e3031;
  color: #2e3031;
}
.btn.btn-gray.btn-icon:disabled,
.theme-white .btn.btn-gray.btn-icon:disabled {
  background-color: transparent;
  border: 1px solid rgba(202, 202, 202, 0.3);
  color: #cacaca;
}


.theme-dark .btn.btn-gray.btn-icon {
  border: 1px solid #8d8d8d;
  color: #8d8d8d;
}
.theme-dark .btn.btn-gray.btn-icon:hover {
  border: 1px solid #4c4c4c;
  color: #4c4c4c;
}
.theme-dark .btn.btn-gray.btn-icon:active {
  background-color: rgba(46, 48, 49, 0.1);
  border: 1px solid #2e3031;
  color: #2e3031;
}
.theme-dark .btn.btn-gray.btn-icon:disabled {
  background-color: transparent;
  border: 1px solid rgba(141, 141, 141, 0.3);
  color: rgba(141, 141, 141, 0.3);
}


/**
 * Button / group
 */
.btn-group > .btn { margin-right: 6px; }
.btn-group > .btn:last-of-type { margin-right: 0; }

/**
 * Button / floating
 */
.btn-group.btn-group-floating {
  position: fixed;
  right: 16px;
  right: calc(16px + env(safe-area-inset-right));
  right: calc(16px + constant(safe-area-inset-right));
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  bottom: calc(16px + constant(safe-area-inset-bottom));
  text-align: right;
}
.btn-group.btn-group-floating > .btn {
  position: relative;
  display: block;
  margin-right: 0;
  margin-bottom: 6px;
}
.btn-group.btn-group-floating > .btn:last-of-type { margin-bottom: 0; }


.btn.btn-floating { box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.3); }
.btn.btn-secondary.btn-container.btn-floating { background-color: rgba(16, 19, 20, .5); }
.btn.btn-secondary.btn-container.btn-floating:hover { background-color: rgba(76, 76, 76, .5); }
.btn.btn-secondary.btn-container.btn-floating:active { background-color: rgba(110, 110, 110, .5); }
.btn.btn-secondary.btn-container.btn-floating:disabled {
  background-color: rgba(202, 202, 202, .3);
  color: #cacaca;
}
.btn.btn-icon.btn-floating { border-radius: 100%; }
.btn.btn-primary.btn-icon.btn-floating {
  background-color: #e54e2b;
  color: #f8f8f8;
}

.btn.btn-primary.btn-icon.btn-floating,
.theme-white .btn.btn-primary.btn-icon.btn-floating {
  background-color: #e54e2b;
  color: #f8f8f8;
}
.btn.btn-primary.btn-icon.btn-floating:hover,
.theme-white .btn.btn-primary.btn-icon.btn-floating:hover { background-color: #922412; }
.btn.btn-primary.btn-icon.btn-floating:active,
.theme-white .btn.btn-primary.btn-icon.btn-floating:active { background-color: #531006; }
.btn.btn-primary.btn-icon.btn-floating:disabled,
.theme-white .btn.btn-primary.btn-icon.btn-floating:disabled {
  background-color: rgba(202, 202, 202, .3);
  color: #cacaca;
}

.theme-dark .btn.btn-primary.btn-icon.btn-floating {
  background-color: #e54e2b;
  color: #f8f8f8;
}
.theme-dark .btn.btn-primary.btn-icon.btn-floating:hover { background-color: #9d3a2a; }
.theme-dark .btn.btn-primary.btn-icon.btn-floating:active { background-color: #65281f; }
.theme-dark .btn.btn-primary.btn-icon.btn-floating:disabled {
  background-color: rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}

.theme-dark .btn.btn-secondary.btn-floating {
  background-color: rgba(248, 248, 248, .5);
  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, .3);
  color: #f8f8f8;
}
.theme-dark .btn.btn-secondary.btn-floating:hover { background-color: rgba(216, 216, 216, .5); }
.theme-dark .btn.btn-secondary.btn-floating:active { background-color: rgba(167, 167, 167, .5); }
.theme-dark .btn.btn-secondary.btn-floating:disabled {
  background-color: rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}

/**
 * Button / Type - Square
 */
.btn.btn-square {
  background-color: transparent;
  line-height: 1 !important;
  padding: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
}
.btn.btn-square > .icon {
  line-height: 1;
  margin: 0;
}
.btn.btn-square > .label {
  line-height: 1;
  margin: 0;
}

.btn.btn-xs.btn-square { width: 24px; height: 24px }
.btn.btn-sm.btn-square { width: 34px; height: 34px }
.btn.btn-md.btn-square { width: 40px; height: 40px }
.btn.btn-lg.btn-square { width: 48px; height: 48px }
.btn.btn-xl.btn-square { width: 56px; height: 56px }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*  Responsive--------------------------------------------------------------------------------------------------------*/
/*  Devices: Extra Small(xs) / Display: Mobile / Break Point: 0 ~ 359 / Columns 4 / Gutter: 8 / White Space: 16 ----- */
/*  Devices: Small(sm) / Display: Mobile / Break Point: 360 ~ 599 / Columns 4 / Gutter: 8 / White Space: 16 --------- */
/*  Devices: Medium(md) / Display: Mobile & PC / Break Point: 600 ~ 1279 / Columns 8 / Gutter: 8 / White Space: 16 -- */
/*  Devices: Large(lg) / Display: PC / Break Point: 1280 ~ 1920 / Columns 12 / Gutter: 8 / White Space: 16 ---------- */
/*  Devices: Extra Large(xl) / Display: PC / Break Point: 1921 / Columns 12 / Gutter: 8 / White Space: 16 ----------- */
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/

/*@media (max-width: 359px) {}*/
/*@media (min-width: 360px) and (max-width: 599px) {}*/
/*@media (min-width: 600px) and (max-width: 1279px) {}*/
/*@media (min-width: 1280px) and (max-width: 1920px) {}*/
/*@media (min-width: 1921px) {}*/


/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 11. Calendar -----------------------------------------------------------------------------------------------------*/
/*  Required Bootstrap Datetimepicker --------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.bootstrap-datetimepicker-widget {
  display: block;
  background-color: #F8F8F8;
  border-radius: 2px;
  border: 1px solid #101314;
  color: #101314;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  margin: 4px 0 0 0;
  padding: 20px;
  width: 282px;
  z-index: 100;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 282px;
  padding: 20px;
}
.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after { display: none; }

.bootstrap-datetimepicker-widget .datepicker {
  display: block;
  /*width: 240px;*/
  height: 274px;
  padding: 0 !important;
}
.bootstrap-datetimepicker-widget .timepicker {
  padding: 0 !important;
  width: 240px;
}

/* table */
.bootstrap-datetimepicker-widget .datepicker table th,
.bootstrap-datetimepicker-widget .datepicker table td {
  width: 32px;
  height: 32px;
  line-height: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  word-break:break-all
}

/* table head */
/* interaction prev, next, day > month > year */
.bootstrap-datetimepicker-widget table thead tr:first-child th span { vertical-align: middle; }
.bootstrap-datetimepicker-widget table thead tr:first-child th {
  cursor: pointer;
  padding-bottom: 8px;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: transparent; }
.bootstrap-datetimepicker-widget .prev,
.bootstrap-datetimepicker-widget .next {
  color: #6E6E6E;
}
.bootstrap-datetimepicker-widget .picker-switch {
  font-size: 16px;
  font-weight: 700;
}
/* sum ~ sat */
.bootstrap-datetimepicker-widget table thead tr th.dow {
  font-size: 12px;
  font-weight: 700;
}
/* sun, sat high light */
.bootstrap-datetimepicker-widget table thead tr th.dow:first-of-type { color: #BF321C; }
.bootstrap-datetimepicker-widget table thead tr th.dow:last-of-type { color: #2B73E5; }



/* table - body */
.bootstrap-datetimepicker-widget table td { font-size: 13px; }
/* sun, sat high light */
.bootstrap-datetimepicker-widget table tbody tr td.day.weekend:first-of-type { color: #bf321c; }
.bootstrap-datetimepicker-widget table tbody tr td.day.weekend:last-of-type { color: #2b73e5; }
.bootstrap-datetimepicker-widget table tbody tr td.day.weekend.disabled:first-of-type { color: rgba(191, 50, 28, .3); }
.bootstrap-datetimepicker-widget table tbody tr td.day.weekend.disabled:last-of-type { color: rgba(43, 115, 229, .3); }

/* today */
.bootstrap-datetimepicker-widget table td.today {
  font-weight: 700;
  text-decoration: underline;
  text-underline-position: under;
}
.bootstrap-datetimepicker-widget table td.today:before { display: none; }

/* old, new */
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new { color: rgba(16, 19, 20, .3); }
/* old, new > sun, sat high light */
.bootstrap-datetimepicker-widget table tbody tr td.day.weekend.old:first-of-type { color: rgba(191, 50, 28, .3); }
.bootstrap-datetimepicker-widget table tbody tr td.day.weekend.new:first-of-type { color: rgba(191, 50, 28, .3); }
.bootstrap-datetimepicker-widget table tbody tr td.day.weekend.new:last-of-type { color: rgba(43, 115, 229, .3); }


/*.bootstrap-datetimepicker-widget table td.day:hover,*/
/*.bootstrap-datetimepicker-widget table td.hour:hover,*/
/*.bootstrap-datetimepicker-widget table td.minute:hover,*/
/*.bootstrap-datetimepicker-widget table td.second:hover {*/
/*  background: #eeeeee;*/
/*  cursor: pointer;*/
/*}*/

.bootstrap-datetimepicker-widget table td.day:not(.disabled):not(.active):hover {
  background-color: rgba(233, 233, 233, .5);
  border-radius: 50%;
  background-clip: padding-box;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #101314;
  border-radius: 50%;
  color: #fff;
  background-clip: padding-box;
  text-shadow: none;
}


/* month, year */
.bootstrap-datetimepicker-widget .datepicker-months table td span,
.bootstrap-datetimepicker-widget .datepicker-years table td span,
.bootstrap-datetimepicker-widget .datepicker-decades table td span {
  display: inline-block;
  width: 72px;
  height: auto;
  line-height: 50px;
  margin: 0 8px 8px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #4C4C4C;
  border-radius: 2px;
  border: 1px solid #8D8D8D;
}
.bootstrap-datetimepicker-widget table td span:nth-of-type(3n) { margin-right: 0; }
.bootstrap-datetimepicker-widget table td span:nth-of-type(10),
.bootstrap-datetimepicker-widget table td span:nth-of-type(11),
.bootstrap-datetimepicker-widget table td span:nth-of-type(12) { margin-bottom: 0; }
.bootstrap-datetimepicker-widget table td span:hover {
  background-color: rgba(233, 233, 233, .5);
}

.bootstrap-datetimepicker-widget .datepicker-decades table td span:nth-of-type(7),
.bootstrap-datetimepicker-widget .datepicker-decades table td span:nth-of-type(8),
.bootstrap-datetimepicker-widget .datepicker-decades table td span:nth-of-type(9) { margin-bottom: 0; }
.bootstrap-datetimepicker-widget .datepicker-decades .decade { word-break: break-word; }
.bootstrap-datetimepicker-widget .datepicker-decades span:empty { display: none; }
.bootstrap-datetimepicker-widget table td span.active {
  background-color: #101314;
  color: #f8f8f8;
  border-color: transparent;
  text-shadow: none;
}
.bootstrap-datetimepicker-widget .btn { font-size: 14px }

/* theme dark */
.theme-dark .bootstrap-datetimepicker-widget {
  color: #D8D8D8;
  background-color: #4c4c4c;
  border-color: transparent;
}

.theme-dark .bootstrap-datetimepicker-widget .prev,
.theme-dark .bootstrap-datetimepicker-widget .next {
  color: #CACACA;
}
.theme-dark .bootstrap-datetimepicker-widget table td.old,
.theme-dark .bootstrap-datetimepicker-widget table td.new { color: rgba(216, 216, 216, .3); }

.theme-dark .bootstrap-datetimepicker-widget table thead tr th.dow:first-of-type { color: #E54E2B; }
.theme-dark .bootstrap-datetimepicker-widget table td.day:not(.disabled):hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .bootstrap-datetimepicker-widget table td.active,
.theme-dark .bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #F8F8F8 !important;
  color: #161616 !important;
}

.theme-dark .bootstrap-datetimepicker-widget table td.disabled,
.theme-dark .bootstrap-datetimepicker-widget table td.disabled:hover { color: rgba(216, 216, 216, .1); }

.theme-dark .bootstrap-datetimepicker-widget table tbody tr td.day.old:first-of-type { color: rgba(232, 43, 43, .3); }
.theme-dark .bootstrap-datetimepicker-widget table tbody tr td.day.new:first-of-type { color: rgba(232, 43, 43, .3); }
.theme-dark .bootstrap-datetimepicker-widget table tbody tr td.day.new:last-of-type { color: rgba(43, 115, 229, .3); }

.theme-dark .bootstrap-datetimepicker-widget table td span.active,
.theme-dark .bootstrap-datetimepicker-widget table td span.active:hover {
  background-color: #F8F8F8;
  color: #BCBFC1;
}
.theme-dark .bootstrap-datetimepicker-widget table td span:hover {
  background-color: rgba(110, 110, 110, .5);
}
.theme-dark .bootstrap-datetimepicker-widget .datepicker-months table td span,
.theme-dark .bootstrap-datetimepicker-widget .datepicker-years table td span,
.theme-dark .bootstrap-datetimepicker-widget .datepicker-decades table td span {
  color: #8D8D8D;
  border-color: #8D8D8D;
}

/*
 * dateragepicker
 */

.daterangepicker {
  padding: 24px;
  color: #101314;
  border-radius: 2px;
  border: 1px solid #101314;
  background-color: #f8f8f8;
  margin-top: 4px;
}
.daterangepicker:before,
.daterangepicker:after  { content: none; }

.daterangepicker .drp-calendar {
  padding: 0 0 12px 0 !important;
}
.daterangepicker .drp-calendar.left .calendar-table { padding-right: 0 !important; }
.daterangepicker .drp-calendar + .drp-calendar { padding-left: 20px !important; }


.daterangepicker .calendar-table {
  border-radius: 0;
  border: 0;
  background-color: transparent;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 28px;
  width: 32px;
  height: 32px;
  line-height: 1;
  font-size: 12px;
  border-radius: 0;
  padding: 0;
  border-right: 0;
  border-left: 0;
  border-top: 2px solid #f8f8f8;
  border-bottom: 2px solid #f8f8f8;
  white-space: nowrap;
  cursor: pointer;
}
.daterangepicker .calendar-table table thead tr:first-child th {
  font-size: 16px;
  font-weight: 700;
}
.daterangepicker .calendar-table table thead tr:last-child th:first-child,
.daterangepicker .calendar-table table tbody tr td:first-child { color: #BF321C; }

.daterangepicker .calendar-table table thead tr:last-child th:last-child,
.daterangepicker .calendar-table table tbody tr td:last-child { color: #2B73E5; }

.daterangepicker .calendar-table table tbody tr td:first-child { border-radius: 50% 0 0 50%; }
.daterangepicker .calendar-table table tbody tr td:last-child { border-radius: 0 50% 50% 0; }

.daterangepicker .calendar-table table tbody tr td.off { color: rgba(16, 19, 20, .3); }
.daterangepicker .calendar-table table tbody tr td:first-child.off { color: rgba(191, 50, 28, .3); }
.daterangepicker .calendar-table table tbody tr td:last-child.off { color: rgba(43, 115, 229, .3); }

/*.daterangepicker td:hover {*/
/*  position: relative;*/
/*  border-radius: 50%;*/
/*  background-color: transparent;*/
/*}*/
/*.daterangepicker td:hover:before {*/
/*  position: absolute;*/
/*  content: '';*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  width: 28px;*/
/*  height: 28px;*/
/*  border-radius: 50%;*/
/*  background-color: rgba(216, 216, 216, .2);*/
/*  transform: translate(-50%, -50%);*/
/*  z-index: -1;*/
/*}*/
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: rgba(16, 19, 20, .1);
  font-weight: 700;
}
.daterangepicker .calendar-table table tbody tr td.in-range { background-color: rgba(16, 19, 20, .1); }
.daterangepicker .calendar-table table tbody tr td.active.start-date { border-radius: 50% 0 0 50%; }
.daterangepicker .calendar-table table tbody tr td.active.end-date { border-radius: 0 50% 50% 0; }
.daterangepicker .calendar-table table tbody tr td.active.start-date.end-date { border-radius: 50%; }
.daterangepicker .calendar-table table tbody tr td.active {
  position: relative;
  color: #f8f8f8;
}
.daterangepicker .calendar-table table tbody tr td.active:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #1d1f21;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.daterangepicker td.today {
  position: relative;
  font-weight: 700;
  text-decoration: underline;
}
.daterangepicker td.today.active { text-decoration: none; }

.daterangepicker td.available:hover, .daterangepicker th.available:hover { border-color: #f8f8f8; }

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-tables .prev span { color: #101314; }


.daterangepicker .drp-buttons {
  position: relative;
}
.daterangepicker .drp-selected {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding-right: 0;
  transform: translateY(-50%);
}
.daterangepicker .drp-buttons .btn {
  font-size: 14px;
  font-weight: 700;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: transparent;
  border-color: #f8f8f8;
}

.theme-dark .daterangepicker {
  background-color: #4C4C4C;
  color: #D8D8D8;
}
.theme-dark .daterangepicker .calendar-table th,
.theme-dark .daterangepicker .calendar-table td {
  border-top: 2px solid #4c4c4c;
  border-bottom: 2px solid #4c4c4c;
}
.theme-dark .daterangepicker .calendar-table table tbody tr td.off { color: rgba(216, 216, 216, .3); }
.theme-dark .daterangepicker td.active,
.theme-dark .daterangepicker td.active:hover { background-color: rgba(216, 216, 216, .2); }
.theme-dark .daterangepicker .calendar-table table tbody tr td.active { color: #101314; }
.theme-dark .daterangepicker .calendar-table table tbody tr td.active:before { background-color: #f8f8f8; }
.theme-dark .daterangepicker .calendar-table table thead tr:last-child th:first-child,
.theme-dark .daterangepicker .calendar-table table tbody tr td:first-child { color: #E54E2B; }
.theme-dark .daterangepicker .calendar-table table thead tr:last-child th:last-child,
.theme-dark .daterangepicker .calendar-table table tbody tr td:last-child { color: #2B73E5; }
.theme-dark .daterangepicker .calendar-table table tbody tr td:first-child.off { color: rgba(232, 43, 43, .3); }
.theme-dark .daterangepicker .calendar-table table tbody tr td:last-child.off { color: rgba(60, 131, 255, .3); }
.theme-dark .daterangepicker .calendar-table table tbody tr td.in-range { background-color: rgba(216, 216, 216, .2); }
.theme-dark .daterangepicker .drp-buttons { border-top: 1px solid #6e6e6e; }
.theme-dark .daterangepicker td.in-range { color: #D8D8D8; }
.theme-dark .daterangepicker .calendar-table table tbody tr td.active:before { color: #F8F8F8; }
.theme-dark .daterangepicker .calendar-table .next span,
.theme-dark .daterangepicker .calendar-table .prev span {
  border: solid #D8D8D8;
  border-width: 0 2px 2px 0;
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 12. Cards --------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.card-wrap {
  position: relative;
  width: 100%;
  height: auto;
  transition: all ease-in-out .15s;
}
.card-wrap .card {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transition: all ease-in-out .15s;
}

.card-wrap .card.card-chart {
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.card-wrap .card .thumb-area {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 4px 0 rgba(16, 19, 20, .16);
  background-color: #E9E9E9;
}
/* 16:9 */
.card-wrap .card .thumb-area:before {
  display: block;
  content: '';
  padding-top: 56.25%;
}
.card-wrap .card .thumb-area.ration-16x9:before { padding-top: 56.25%; }
.card-wrap .card .thumb-area.ration-1x1:before { padding-top: 100%; }
.card-wrap .card .thumb-area.ration-3x2:before { padding-top: 66.6666666667%; }
.card-wrap .card .thumb-area.ration-4x3:before { padding-top: 75%; }

.card-wrap .card .thumb-area > img {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.card-wrap .card .thumb-area > video {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}
.card-wrap .card .thumb-area > .btn-play {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 19, 20, .5);
}
.card-wrap .card .thumb-area > .btn-play:after {
  display: inline-block;
  content: '';
  width: 65px;
  height: 65px;
  background-image: url('../images/icon-play.svg');
}
.card-wrap .card .contents-area {
  position: relative;
  padding: 16px;
  background-color: #f8f8f8;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px 0 rgba(16, 19, 20, .16);
  transition: all ease-in-out .15s;
}
.card-wrap .card .contents-area .title {
  position: relative;
  font-size: 16px;
  color: #101314;
  font-weight: 700;
  margin-bottom: 10px;
}
.card-wrap .card .contents-area .description {
  position: relative;
  font-size: 14px;
  color: #4c4c4c;
}
.card-wrap .card .contents-area .description + .meta {
  margin-top: 16px;
}
.card-wrap .card .meta {
  position: relative;
  display: block;
  width: 100%;
}
.card-wrap .card .meta > ul > li + li {
  margin-left: 8px;
}
.card-wrap .card .meta > ul > li.meta-item {
  display: inline-block;
  width: auto;
  font-size: 12px;
  color: #8d8d8d;
}
.card-wrap .card .meta > ul > li.meta-item > .icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
}
.card-wrap .card .meta > ul > li.meta-item > .icon > i {
  font-size: 16px;
}
.card-wrap .card .meta > ul > li.meta-item > .count {
  display: inline-block;
  vertical-align: middle;
}

.card-wrap .btn-more {
  position: absolute;
  bottom: 12px;
  right: 8px;
  border: 0;
  padding: 4px;
}
.card-wrap .btn-more i { color: #8d8d8d; }

.card-wrap:hover {
  transform: translateY(-8px);
}
.card-wrap:hover .card .contents-area {
  background-color: #e9e9e9;
}
.card-wrap:hover .card .contents-area .title,
.card-wrap:hover .card .contents-area .description {
  text-decoration: underline;
  text-underline-position: under;
}
.card-wrap:active .card .contents-area { background-color: #d8d8d8; }

.card-wrap.disabled { pointer-events: none; }
.card-wrap.disabled .card .thumb-area { opacity: .3; }
.card-wrap.disabled .card .contents-area .title,
.card-wrap.disabled .card .contents-area .description,
.card-wrap.disabled .card .meta > ul > li.meta-item,
.card-wrap .btn-more i { color: #cacaca; }



.card-wrap.skeleton { pointer-events: none; }
.card-wrap.skeleton .card .contents-area { padding-bottom: 40px; }
.card-wrap.skeleton .card .contents-area .title:empty {
  width: 90%;
  height: 19px;
  background-color: #E9E9E9;
}
.card-wrap.skeleton .card .contents-area .description:empty {
  width: 90%;
  height: 16px;
  background-color: #e9e9e9;
}
.card-wrap.skeleton .card .contents-area .meta:empty {
  width: 70%;
  height: 16px;
  background-color: #e9e9e9;
}
.card-wrap.skeleton .card .contents-area .description + .meta { margin-top: 6px; }

.card-wrap.skeleton .card .thumb-area:after,
.card-wrap.skeleton .card .contents-area .title:empty:after,
.card-wrap.skeleton .card .contents-area .description:empty:after,
.card-wrap.skeleton .card .contents-area .meta:empty:after {
  position: absolute;
  content: '';
  width: 40px;
  height: 100%;
  top: 0;
  left: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+50,000000+100&0+0,0.02+50,0+100 */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-8 */
  animation: skeleton 2s infinite;
}
.card-wrap.skeleton .btn-more { display: none; }


.theme-dark .card-wrap .card .contents-area { background-color: #2e3031; }
.theme-dark .card-wrap .card .contents-area .title,
.theme-dark .card-wrap .card .contents-area .description { color: #cacaca; }

.theme-dark .card-wrap:hover .card .contents-area { background-color: #4c4c4c; }
.theme-dark .card-wrap:active .card .contents-area { background-color: rgba(48, 48, 89, .5); }

.card-wrap.skeleton .card .thumb-area,
.card-wrap.skeleton .card .contents-area .title:empty,
.card-wrap.skeleton .card .contents-area .description:empty,
.card-wrap.skeleton .card .contents-area .meta:empty { background-color: #4C4C4C; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 13. Checkbox -----------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.checker-container > .label {
  display: block;
  width: 100%;
  font-size: 13px;
  color: #4c4c4c;
  margin-bottom: 12px;
}
.checker-container > .checker-item { display: block; }
.checker-container.inline > .checker-item { display: inline-block; }
.checker-container > .checker-item + .checker-item { margin-top: 10px; }
.checker-container.inline > .checker-item + .checker-item {
  margin-top: 0;
  margin-left: 10px;
}
.checker-item {
  display: inline-block;
  width: auto;
  height: auto;
  font-size: 0;
  overflow: hidden;
  position: relative;
  padding-left: 28px;
  vertical-align: top;
  cursor: pointer;
  color: #101314;
}

.checker-item input {
  width: 0;
  height: 0;
  position: absolute;
  top: -100px;
  pointer-events: none;
}
.checker-item .label-group {
  display: inline-block;
}
.checker-item input:disabled + .label-group {
  color: #cacaca;
}
.checker-item .icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0;
}
.checker-item .icon i {
  font-size: 20px;
}

.checker-item.checker-item-md .icon {
  width: 20px;
  height: 20px;
}
.checker-item.checker-item-md .icon i { font-size: 20px; }
.checker-item.checker-item-md .label { line-height: 20px; }

.checker-item.checker-item-lg .icon {
  width: 24px;
  height: 24px;
}
.checker-item.checker-item-lg .icon i { font-size: 24px; }
.checker-item.checker-item-lg .label { line-height: 24px; }

.checker-item .icon i:nth-of-type(1) { position: relative; }

.checker-item .icon i:nth-of-type(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.checker-item .label {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 20px;
  vertical-align: middle;
  font-size: 14px;
}
.checker-item .label:empty:before {
  content: '-';
  opacity: 0;
  width: 0;
}

.checker-item .icon i:nth-of-type(1) { display: inline-block; }
.checker-item .icon i:nth-of-type(2) { display: none; }
.checker-item input:checked ~ .label-group .icon i:nth-of-type(1) { display: none; }
.checker-item input:checked ~ .label-group .icon i:nth-of-type(2) { display: inline-block; }
.checker-item.only-icon input:checked ~ .icon i:nth-of-type(1) { display: none; }
.checker-item.only-icon input:checked ~ .icon i:nth-of-type(2) { display: inline-block; }


.theme-dark .checker-container > .label { color: #a7a7a7; }
.theme-dark .checker-item { color: #d8d8d8; }
.theme-dark .checker-item input:disabled + .label-group { color: rgba(141, 141, 141, .3) }


/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 14. Content Switcher ---------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.content-switcher {
  width: 100%;
  text-align: center;
}
.content-switcher ul {
  display: inline-block;
  max-width: 378px;
}
.content-switcher ul > li { display: inline-block; }
.content-switcher ul > li:first-child:nth-last-child(1) { width: 100%; }

.content-switcher ul > li:first-child:nth-last-child(2),
.content-switcher ul > li:first-child:nth-last-child(2) ~ li { width: calc(100% / 2); }

.content-switcher ul > li:first-child:nth-last-child(3),
.content-switcher ul > li:first-child:nth-last-child(3) ~ li { width: calc(100% / 3); }

.content-switcher ul > li:first-child:nth-last-child(4),
.content-switcher ul > li:first-child:nth-last-child(4) ~ li { width: calc(100% / 4); }

.content-switcher ul > li:first-child:nth-last-child(5),
.content-switcher ul > li:first-child:nth-last-child(5) ~ li { width: calc(100% / 5); }

.content-switcher ul > li:first-child:nth-last-child(6),
.content-switcher ul > li:first-child:nth-last-child(6) ~ li { width: calc(100% / 6); }

.content-switcher.content-switcher-xs ul > li > button.switcher { line-height: 34px; }
.content-switcher.content-switcher-md ul > li > button.switcher { line-height: 40px; }
.content-switcher.content-switcher-lg ul > li > button.switcher { line-height: 48px; }
.content-switcher ul > li > button.switcher {
  position: relative;
  display: inline-block;
  width: 100%;
  line-height: 40px;
  background-color: #e9e9e9;
  color: #4c4c4c;
  padding: 0 16px;
}
.content-switcher ul > li + li > button.switcher:before {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  content: '';
  width: 1px;
  height: 20px;
  background-color: #d8d8d8;
  transform: translateY(-50%);
}
.content-switcher ul > li.on + li > button.switcher:not(:disabled):before,
.content-switcher ul > li.on > button.switcher:not(:disabled):before {
  display: none;
}
.content-switcher ul > li > button.switcher:hover  {
  background-color: #d8d8d8;
  color: #101314;
}
.content-switcher ul > li.on > button.switcher {
  background-color: #101314;
  color: #f8f8f8;
}
.content-switcher ul > li > button.switcher:disabled {
  background-color: rgba(202, 202, 202, .3);
  color: #cacaca;
  pointer-events: none;
}
.content-switcher ul > li:first-of-type > button.switcher { border-radius: 4px 0 0 4px; }
.content-switcher ul > li:last-of-type > button.switcher { border-radius: 0 4px 4px 0; }

.content-switcher-content { display: none; }
.content-switcher-content.on { display: block; }


.theme-dark .content-switcher ul > li > button.switcher {
  background-color: rgba(76, 76, 76, .5);
  color: #d8d8d8;
}
.theme-dark .content-switcher ul > li + li > button.switcher:before { background-color: #4c4c4c; }
.theme-dark .content-switcher ul > li > button.switcher:hover {
  background-color: rgba(110, 110, 110, .5);
  color: #f8f8f8;
}
.theme-dark .content-switcher ul > li > button.switcher:disabled {
  background-color: rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}
.theme-dark .content-switcher ul > li.on > button.switcher {
  background-color: #e9e9e9;
  color: #101314;
}





/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 15. Data Table ---------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.data-table-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 20px;
}
.data-table-wrapper.responsive {
  width: 100%;
  min-width: auto;
}
.data-table-wrapper.responsive .data-table-container {
  width: 100%;
  min-width: auto;
  overflow-x: auto;
}

.data-table-tools {
  display: table;
  width: 100%;
  height: auto;
  content: '';
  clear: both;
  margin-bottom: 12px;
}

.data-table-tools .tools {
  display: inline-block;
  float: left;
  width: auto;
  height: auto;
}
.data-table-tools .tools .tools-group {
  display: inline-block;
  vertical-align: middle;
}
.data-table-tools .tools .tools-group + .tools-group:before {
  display: inline-block;
  content: '';
  width: 1px;
  height: 14px;
  margin: 0 6px;
  vertical-align: middle;
  background-color: rgba(216, 216, 216, .3);
}
.data-table-tools .tools .tools-item + .tools-item { margin-left: 4px; }
.data-table-tools .tools .btn .icon i { font-size: 20px; }

.data-table-tools .btn-group {
  display: inline-block;
  float: right;
  width: auto;
  height: auto;
}

.data-table-container {
  display: block;
  width: 100%;
  height: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  color: #101314;
  text-align: center;
  border: 1px solid transparent;
}
.data-table th,
.data-table td {
  white-space: nowrap;
  /*line-height: 15px;*/
  /*padding: 9px 8px;*/
  padding: 0 8px;
  line-height: 39px;
  background-clip: padding-box; /* Add this line */
}
.data-table.data-table-sm th,
.data-table.data-table-sm td {
  /*padding: 9px 8px*/
  line-height: 33px;
}
.data-table > thead > tr > th,
.data-table > thead > tr > td {
  background-color: rgba(239, 239, 240, .5);
  border: 1px solid #A7A7A7;
}
.data-table > tbody > tr > th {
  background-color: rgba(239, 239, 240, .5);
  border: 1px solid #A7A7A7;
}
.data-table > tbody > tr > td {
  background-color: #F8F8F8;
  border: 1px solid #D8D8D8;
  cursor: pointer;
}
.data-table > tbody > tr > td:hover { background-color: rgba(233, 233, 233, .5); }

.data-table > tbody > tr > td.on { position: relative; }
.data-table > tbody > tr > td.on:before {
  position: absolute;
  content: '';
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid #E54E2B;
  z-index: 9;
  pointer-events: none;
}
.data-table > tbody > tr > td.on:after {
  position: absolute;
  content: '';
  right: -1px;
  bottom: -1px;
  width: 4px;
  height: 4px;
  background-color: #E54E2B;
  border-top: 2px solid #F8F8F8;
  border-left: 2px solid #F8F8F8;
  z-index: 10;
  pointer-events: none;
}
.data-table > tbody > tr > td.disabled {
  pointer-events: none;
  background-color: rgba(202, 202, 202, .3) !important;
  color: rgba(202, 202, 202, 1) !important;
}
.data-table > tbody > tr > td.with-tools.disabled .tools .btn-tool .icon i,
.data-table > tbody > tr > td.with-tools.disabled .tools .btn-tool .icon i:before,
.data-table > tbody > tr > td.with-tools.disabled .tools .btn-tool .icon i:after {
  color: #CACACA;
}
.data-table > tbody > tr > td.disabled.with-input-box { background-color: transparent !important; }
/*.data-table > tbody > tr > td.disabled .checker-item { color: #cacaca; }*/


.data-table .with-tools {
  position: relative;
  padding-right: 32px !important;
}
.data-table .with-tools .tools {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.data-table .with-tools .tools .btn-tool .icon > i:before { color: #101314; }
.data-table .with-tools .tools .btn-tool.btn-sorter .icon > i {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.data-table .with-tools .tools .btn-tool.btn-sorter.default .icon > i { background-image: url('../images/icon-solter-on_light.svg'); }
.data-table .with-tools .tools .btn-tool.btn-sorter.increase .icon > i { background-image: url('../images/icon-solter-increase-on_light.svg');}
.data-table .with-tools .tools .btn-tool.btn-sorter.decrease .icon > i { background-image: url('../images/icon-solter-decrease-on_light.svg'); }

/* with components */
.data-table th.with-input-box,
.data-table td.with-input-box {
  padding: 0;
  /*background-color: initial !important;*/
}
.data-table .overflow:hover { background-color: transparent !important; }
.data-table .input-box {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 0;
  border-color: transparent;
}
.data-table .input-box:focus { border-color: transparent !important; }
.data-table td.direct-edit.on {
  padding: 0;
  padding-right: 0 !important;
}
.data-table td.direct-edit .direct-edit-target { display: inline-block; }
.data-table td.direct-edit .input-container {
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  display: none;
  width: 100%;
}
.data-table td.direct-edit > .input-container .input-box { text-align: left; }
.data-table td.direct-edit.on > .input-container {
  display: block;
  z-index: 1;
}
.data-table td.direct-edit.on > .direct-edit-target,
.data-table td.direct-edit.on > .tools { display: none; }



.data-table .checker-item { overflow: visible; }
.data-table .checker-item .label { line-height: 15px; }
.data-table .checker-item .icon {
  top: 50%;
  transform: translateY(-50%);
}

.data-table td.legend-cell .chip {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 4px;
  height: 100%;
}
.data-table td.disabled.legend-cell .chip { display: none; }
/* negative */
.data-table td.legend-cell.negative01 { background-color: rgba(255, 234, 70, .3); }
.data-table td.legend-cell.negative01 .chip { background-color: #ffea46; }
.data-table td.legend-cell.negative02 { background-color: rgba(248, 190, 0, .3); }
.data-table td.legend-cell.negative02 .chip { background-color: #f8be00; }
.data-table td.legend-cell.negative03 { background-color: rgba(252, 160, 94, .3); }
.data-table td.legend-cell.negative03 .chip { background-color: #fca05e; }
.data-table td.legend-cell.negative04 { background-color: rgba(255, 147, 190, .3); }
.data-table td.legend-cell.negative04 .chip { background-color: #ff93be; }
.data-table td.legend-cell.negative05 { background-color: rgba(193, 115, 48, .3); }
.data-table td.legend-cell.negative05 .chip { background-color: #c17330; }
.data-table td.legend-cell.negative06 { background-color: rgba(240, 77, 142, .3); }
.data-table td.legend-cell.negative06 .chip { background-color: #f04d8e; }
.data-table td.legend-cell.negative07 { background-color: rgba(255, 91, 47, 0.3); }
.data-table td.legend-cell.negative07 .chip { background-color: #ff5b2f; }
.data-table td.legend-cell.negative08 { background-color: rgba(229, 19, 19, 0.3); }
.data-table td.legend-cell.negative08 .chip { background-color: #e51313; }
.data-table td.legend-cell.negative09 { background-color: rgba(120, 1, 22, 0.3); }
.data-table td.legend-cell.negative09 .chip { background-color: #780116; }
.data-table td.legend-cell.negative10 { background-color: rgba(120, 1, 111, 0.3); }
.data-table td.legend-cell.negative10 .chip { background-color: #78016f; }

/* negative - dark */
.theme-dark .data-table td.legend-cell.negative01 { background-color: rgba(255, 236, 89, .3); }
.theme-dark .data-table td.legend-cell.negative01 .chip { background-color: #ffec59; }
.theme-dark .data-table td.legend-cell.negative02 { background-color: rgba(249, 197, 26, .3); }
.theme-dark .data-table td.legend-cell.negative02 .chip { background-color: #f9c51a; }
.theme-dark .data-table td.legend-cell.negative03 { background-color: rgba(252, 170, 110, .3); }
.theme-dark .data-table td.legend-cell.negative03 .chip { background-color: #fcaa6e; }
.theme-dark .data-table td.legend-cell.negative04 { background-color: rgba(255, 158, 197, .3); }
.theme-dark .data-table td.legend-cell.negative04 .chip { background-color: #ff9ec5; }
.theme-dark .data-table td.legend-cell.negative05 { background-color: rgba(199, 129, 69, .3); }
.theme-dark .data-table td.legend-cell.negative05 .chip { background-color: #c78145; }
.theme-dark .data-table td.legend-cell.negative06 { background-color: rgba(242, 95, 154, .3); }
.theme-dark .data-table td.legend-cell.negative06 .chip { background-color: #f25f9a; }
.theme-dark .data-table td.legend-cell.negative07 { background-color: rgba(255, 108, 68, .3); }
.theme-dark .data-table td.legend-cell.negative07 .chip { background-color: #ff6c44; }
.theme-dark .data-table td.legend-cell.negative08 { background-color: rgba(234, 66, 66, .3); }
.theme-dark .data-table td.legend-cell.negative08 .chip { background-color: #ea4242; }
.theme-dark .data-table td.legend-cell.negative09 { background-color: rgba(147, 52, 69, .3); }
.theme-dark .data-table td.legend-cell.negative09 .chip { background-color: #933445; }
.theme-dark .data-table td.legend-cell.negative10 { background-color: rgba(147, 52, 140, .3); }
.theme-dark .data-table td.legend-cell.negative10 .chip { background-color: #93348c; }

/* positive */
.data-table td.legend-cell.positive01 { background-color: rgba(149, 226, 218, .3); }
.data-table td.legend-cell.positive01 .chip { background-color: #95e2da; }
.data-table td.legend-cell.positive02 { background-color: rgba(170, 224, 89, .3); }
.data-table td.legend-cell.positive02 .chip { background-color: #aae059; }
.data-table td.legend-cell.positive03 { background-color: rgba(97, 214, 130, .3); }
.data-table td.legend-cell.positive03 .chip { background-color: #61d682; }
.data-table td.legend-cell.positive04 { background-color: rgba(53, 208, 255, .3); }
.data-table td.legend-cell.positive04 .chip { background-color: #35d0ff; }
.data-table td.legend-cell.positive05 { background-color: rgba(133, 149, 234, .3); }
.data-table td.legend-cell.positive05 .chip { background-color: #8595ea; }
.data-table td.legend-cell.positive06 { background-color: rgba(38, 117, 255, .3); }
.data-table td.legend-cell.positive06 .chip { background-color: #2675ff; }
.data-table td.legend-cell.positive07 { background-color: rgba(86, 43, 229, .3); }
.data-table td.legend-cell.positive07 .chip { background-color: #562be5; }
.data-table td.legend-cell.positive08 { background-color: rgba(0, 118, 105, .3); }
.data-table td.legend-cell.positive08 .chip { background-color: #007669; }
.data-table td.legend-cell.positive09 { background-color: rgba(0, 13, 157, .3); }
.data-table td.legend-cell.positive09 .chip { background-color: #000d9d; }
.data-table td.legend-cell.positive10 { background-color: rgba(0, 72, 64, .3); }
.data-table td.legend-cell.positive10 .chip { background-color: #004840; }

/* positive - dark */
.theme-dark .data-table td.legend-cell.positive01 { background-color: rgba(170, 232, 226, .3); }
.theme-dark .data-table td.legend-cell.positive01 .chip { background-color: #aae8e2; }
.theme-dark .data-table td.legend-cell.positive02 { background-color: rgba(187, 230, 122, .3); }
.theme-dark .data-table td.legend-cell.positive02 .chip { background-color: #bbe67a; }
.theme-dark .data-table td.legend-cell.positive03 { background-color: rgba(129, 222, 155, .3); }
.theme-dark .data-table td.legend-cell.positive03 .chip { background-color: #81de9b; }
.theme-dark .data-table td.legend-cell.positive04 { background-color: rgba(93, 218, 255, .3); }
.theme-dark .data-table td.legend-cell.positive04 .chip { background-color: #5ddaff; }
.theme-dark .data-table td.legend-cell.positive05 { background-color: rgba(158, 170, 238, .3); }
.theme-dark .data-table td.legend-cell.positive05 .chip { background-color: #9eaaee; }
.theme-dark .data-table td.legend-cell.positive06 { background-color: rgba(81, 145, 255, .3); }
.theme-dark .data-table td.legend-cell.positive06 .chip { background-color: #5191ff; }
.theme-dark .data-table td.legend-cell.positive07 { background-color: rgba(120, 85, 234, .3); }
.theme-dark .data-table td.legend-cell.positive07 .chip { background-color: #7855ea; }
.theme-dark .data-table td.legend-cell.positive08 { background-color: rgba(51, 145, 135, .3); }
.theme-dark .data-table td.legend-cell.positive08 .chip { background-color: #339187; }
.theme-dark .data-table td.legend-cell.positive09 { background-color: rgba(51, 61, 177, .3); }
.theme-dark .data-table td.legend-cell.positive09 .chip { background-color: #333db1; }
.theme-dark .data-table td.legend-cell.positive10 { background-color: rgba(66, 131, 69, .3); }
.theme-dark .data-table td.legend-cell.positive10 .chip { background-color: #428345; }


/* size */
.data-table.data-table-sm { font-size: 13px; }
.data-table.data-table-sm .checker-item .label { font-size: 13px; }
.data-table.data-table-sm .input-box { font-size: 13px; }


/* split */
.data-table-wrapper,
.data-table-container {
  display: inline-block;
  width: auto;
  min-width: 100%;
}
.data-table {
  width: auto;
  min-width: 100%;
}


.theme-dark .data-table {
  color: #a7a7a7;
  /*border: 1px solid #4C4C4C;*/
}
.theme-dark .data-table > thead > tr > th,
.theme-dark .data-table > thead > tr > td,
.theme-dark .data-table > tbody > tr > th {
  background-color: rgba(76, 76, 76, .3);
  border-color: rgba(112, 112, 112, .3);
}
.theme-dark .data-table > tbody > tr > td {
  background-color: rgba(46, 48, 49, .5);
  border: 1px solid rgba(112, 112, 112, .5);
}
.theme-dark .data-table > tbody > tr > td.disabled {
  background-color: rgba(141, 141, 141, .3) !important;
  color: rgba(141, 141, 141, .3) !important;
}
.theme-dark .data-table > tbody > tr > td:hover { background-color: rgba(76, 76, 76, .5); }
.theme-dark .data-table > tbody > tr > td.on:after {
  border-left: 2px solid #2E3031;
  border-top: 2px solid #2E3031;
}
.theme-dark .data-table > tbody > tr > td.with-tools.disabled .tools .btn-tool .icon i,
.theme-dark .data-table > tbody > tr > td.with-tools.disabled .tools .btn-tool .icon i:before,
.theme-dark .data-table > tbody > tr > td.with-tools.disabled .tools .btn-tool .icon i:after {
  color: #8D8D8D;
}


.theme-dark .data-table td.with-input-box .input-box { background-color: transparent !important; }
.theme-dark .data-table .input-container.disabled .dropdown:after { color: #8D8D8D; }
/*.theme-dark .data-table .with-input-box { background-color: transparent; }*/

.theme-dark .data-table .with-tools .tools .btn-tool .icon > i:before { color: #a7a7a7; }
.theme-dark .data-table .with-tools .tools .btn-tool.btn-sorter.default .icon > i { background-image: url('../images/icon-solter-on_dark.svg'); }
.theme-dark .data-table .with-tools .tools .btn-tool.btn-sorter.increase .icon > i { background-image: url('../images/icon-solter-increase-on_dark.svg');}
.theme-dark .data-table .with-tools .tools .btn-tool.btn-sorter.decrease .icon > i { background-image: url('../images/icon-solter-decrease-on_dark.svg'); }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 16. Divider ------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #d8d8d8;
  margin: 14px 0;
}
.divider-inline {
  position: relative;
  padding-left: 17px;
}
.divider-inline:before {
  position: absolute;
  display: inline-block;
  content: '';
  left: 8px;
  top: 50%;
  width: 1px;
  height: 80%;
  background-color: #d8d8d8;
  transform: translateY(-50%);
}

.theme-dark .divider { background-color: #4c4c4c; }
.theme-dark .divider-inline { background-color: #4c4c4c; }


/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*=17. Drop Down------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.input-container.disabled .dropdown:after { color: #cacaca; }
.input-container.disabled .dropdown.dropdown-multiple .dropdown-multiple-clear {
  display: none;
}
.dropdown > input:not(.input-box) {
  width: 0;
  height: 0;
  font-size: 0;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}
.dropdown > .input-box {
  padding-right: 30px;
  vertical-align: middle;
}
.dropdown > button.input-box:focus { border: 1px solid #d8d8d8; }
.dropdown > button.input-box:disabled {
  color: #cacaca;
  background-color: rgba(202, 202, 202, .3);
}

.dropdown:after {
  position: absolute;
  top: 0;
  right: 6px;
  font-size: 16px;
  content: '\e911';
  font-family: 'Licon';
  line-height: 16px;
  padding: 12px 4px;
  pointer-events: none;
}
.dropdown.open:after { content: '\e967' }

.input-container.input-container-sm .dropdown:after {
  padding-top: 9px;
  padding-bottom: 9px;
}

.input-container.input-container-md .dropdown:after {
  padding-top: 12px;
  padding-bottom: 12px;
}
.input-container.input-container-lg .dropdown:after {
  padding-top: 16px;
  padding-bottom: 16px;
}
.dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #d8d8d8;
  background-color: #f8f8f8;
  border-radius: 2px;
  overflow: hidden;
  z-index: 200;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
}
.dropdown.open > .dropdown-menu { display: block; }

.dropdown.right {
  left: auto;
  right: 0;
}


.dropdown .dropdown-menu .dropdown-menu-body {
  display: block;
  width: 100%;
  max-height: 186px;
  overflow-y: auto;
}
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li {
  display: block;
  white-space: nowrap;
}
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px 12px 16px;
  background-color: #f8f8f8;
  text-decoration: none;
  font-size: 14px;
  color: #4c4c4c;
  line-height: 16px;
  border-bottom: 1px solid #d8d8d8;
}
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.selected:not(.checkbox) {
  background-color: #E9E9E9;
}
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li:last-child .dropdown-menu-item {
  border-bottom: 0;
}
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item:hover {
  background-color: rgba(233, 233, 233, .5);
}
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.checkbox {
  padding-left: 44px;
}
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.checkbox .icon {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 18px;
  font-size: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  transform: translateY(-50%);
}
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.checkbox .icon i { font-size: 20px; }
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.checkbox .icon > i:first-child { display: inline-block; }
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.checkbox .icon > i:last-child { display: none; }
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.checkbox.selected .icon > i:first-child { display: none; }
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.checkbox.selected .icon > i:last-child { display: inline-block; }
.dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item:disabled { pointer-events: none; }


.input-container.input-container-sm .dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item {
  padding-top: 9px;
  padding-bottom: 9px;
}
.input-container.input-container-md .dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item {
  padding-top: 12px;
  padding-bottom: 12px;
}
.input-container.input-container-lg .dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item {
  padding-top: 16px;
  padding-bottom: 16px;
}
.dropdown > .dropdown-menu > .dropdown-menu-footer {
  text-align: right;
  border-top: 1px solid #d8d8d8;
}
.dropdown.dropdown-multiple {
  font-size: 0;
}
.dropdown .dropdown-multiple-clear {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  padding: 0 16px 0 4px;
  background-color: #101314;
  vertical-align: middle;
  margin-right: 4px;
}
.dropdown .dropdown-multiple-clear:after {
  position: absolute;
  top: 50%;
  right: 2px;
  content: '\e909';
  font-size: 14px;
  font-family: 'Licon';
  transform: translateY(-50%);
}
.dropdown .dropdown-multiple-value {
  display: inline-block;
  font-size: 14px;
}
.dropdown .dropdown-multiple-commit {
  display: inline-block;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: underline;
  color: #101314;
}

.theme-dark .dropdown > .dropdown-menu {
  border: 1px solid #6e6e6e;
  background-color: #4c4c4c;
}
.theme-dark .dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item {
  background-color: #4c4c4c;
  color: #cacaca;
  border-bottom: 1px solid #6e6e6e;
}
.theme-dark .dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item:hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.selected:not(.checkbox) { background-color: #6e6e6e; }
.theme-dark .dropdown .dropdown-multiple-clear {
  background-color: #f8f8f8;
  color: #101314;
}
.theme-dark .dropdown > .dropdown-menu > .dropdown-menu-body ul.dropdown-menu-options li .dropdown-menu-item.checkbox { color: #f8f8f8; }
.theme-dark .dropdown > .dropdown-menu > .dropdown-menu-footer { border-top: 1px solid #6e6e6e; }
.theme-dark .dropdown .dropdown-multiple-commit { color: #f8f8f8; }



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 18. File Uploader-------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.file-uploader {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.file-uploader .file-uploader-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.file-uploader .file-uploader-head {
  display: block;
  width: 100%;
  height: auto;
}
.file-uploader .file-uploader-head .title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: calc((-16 / 1000) * 1em);
  line-height: 22px;
}
.file-uploader .file-uploader-head .description {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: calc((-16 / 1000) * 1em);
  line-height: 22px;
  color: #4C4C4C;
  margin-top: 8px;
}
.file-uploader .file-uploader-head .btn-uploader { margin-top: 18px; }

.file-uploader .file-uploader-area {
  position: relative;
  display: block;
  width: 270px;
  height: 154px;
  background-color: #E9E9E9;
  border: 1px dashed #D8D8D8;
  border-radius: 2px;
  margin-top: 18px;
  text-align: center;
  color: #8D8D8D;
  line-height: 22px;
  font-size: 13px;
  transition: all ease-in-out .15s;
}
.file-uploader .file-uploader-area.is-dragover {
  background-color: #D8D8D8;
  border-color: #E54E2B;
}
.file-uploader .file-uploader-area .btn-uploader {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
.file-uploader .file-uploader-area .btn-uploader a {
  color: #8d8d8d;
  font-weight: 700;
  text-decoration: underline;
  text-underline-position: under;
}

.file-uploader .file-uploader-tags {
  display: block;
  margin-top: 10px;
}

/* disabled */
.file-uploader.disabled { pointer-events: none; }
.file-uploader.disabled .file-uploader-head { color: #cacaca; }
.file-uploader.disabled .file-uploader-head .description { color: #cacaca; }
.file-uploader.disabled .file-uploader-area {
  color: #CACACA;
  background-color: rgba(233, 233, 233, .3);
  border-color: rgba(216, 216, 216, .3);
}
.file-uploader.disabled .file-uploader-area .btn-uploader a { color: #CACACA; }

/*
 * Theme Dark
 */
.theme-dark .file-uploader .file-uploader-head .description { color: #CACACA; }
.theme-dark .file-uploader .file-uploader-area {
  color: #6e6e6e;
  background-color: rgba(76, 76, 76, .5);
  border-color: rgba(76, 76, 76, 1);
}
.theme-dark .file-uploader .file-uploader-area .btn-uploader a { color: #6e6e6e; }
.theme-dark .file-uploader .file-uploader-area.is-dragover {
  background-color: rgba(110, 110, 110, .5);;
  border-color: #E54E2B;
}
.theme-dark .file-uploader.disabled .file-uploader-head,
.theme-dark .file-uploader.disabled .file-uploader-head .description { color: rgba(141, 141, 141, .3); }
.theme-dark .file-uploader.disabled .file-uploader-area {
  color: rgba(141, 141, 141, .3);
  background-color: rgba(141, 141, 141, .3);
  border-color: rgba(216, 216, 216, .3);
}
.theme-dark .file-uploader.disabled .file-uploader-area .btn-uploader a { color: rgba(141, 141, 141, .3); }



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 19. Handler-------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
body.split-mode {
  width: 100%;
  height: 100%;
}
body.split-mode #wrapper {
  width: 100%;
  height: 100%;
}
body.split-mode #wrapper #contents-wrapper {
  width: 100%;
  height: 100%;
}
body.split-mode #wrapper #contents-wrapper .content-body {
  width: 100%;
  height: 100%;
}
body.split-mode #wrapper #contents-wrapper .content-body .container {
  width: 100%;
  height: 100%;
}
.gutter {
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter.gutter-horizontal {
  cursor: col-resize;
  background-image: url('../images/handler-horizontal-default-on_light.svg');
}
.gutter.gutter-horizontal:hover { background-image: url('../images/handler-horizontal-hover-on_light.svg'); }
.gutter.gutter-horizontal:active { background-image: url('../images/handler-horizontal-active-on_light.svg'); }
.gutter.gutter-vertical {
  cursor: row-resize;
  background-image: url('../images/handler-vertical-default-on_light.svg');
}
.gutter.gutter-vertical:hover { background-image: url('../images/handler-vertical-hover-on_light.svg'); }
.gutter.gutter-vertical:active { background-image: url('../images/handler-vertical-active-on_light.svg'); }


.split {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.split.split-horizontal,
.gutter.gutter-horizontal {
  height: 100%;
  float: left;
}

.split.content {
  overflow: auto;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
}

.split-box {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  /*padding: 16px;*/
  border-radius: 4px;
}


/*
 * Theme Dark
 */

.theme-dark .gutter.gutter-horizontal { background-image: url('../images/handler-horizontal-default-on_dark.svg');}
.theme-dark .gutter.gutter-horizontal:hover { background-image: url('../images/handler-horizontal-hover-on_dark.svg'); }
.theme-dark .gutter.gutter-horizontal:active { background-image: url('../images/handler-horizontal-active-on_dark.svg'); }
.theme-dark .gutter.gutter-vertical { background-image: url('../images/handler-vertical-default-on_dark.svg'); }
.theme-dark .gutter.gutter-vertical:hover { background-image: url('../images/handler-vertical-hover-on_dark.svg'); }
.theme-dark .gutter.gutter-vertical:active { background-image: url('../images/handler-vertical-active-on_dark.svg'); }
.theme-dark .split.content { background-color: #2E3031; }
.theme-dark .split-box { background-color: #2E3031; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 20. Input Box-----------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.input-container {
  position: relative;
  display: block;
}
.input-container.input-container-inline {
  display: inline-block;
  width: auto;
}
.input-container.input-container-inline > label {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}
.input-container.input-container-inline > label + .input-group {
  display: inline-block;
  vertical-align: middle;
  margin-left: 14px;
}
.input-container > label {
  display: block;
  font-size: 13px;
  letter-spacing: -0.1px;
  margin-bottom: 8px;
}
.input-container > .input-group {
  position: relative;
}
.input-container > .input-group .input-group-tools {
  position: absolute;
  top: 0;
  right: 6px;
  font-size: 0;
  pointer-events: none;
}
.input-container > .input-group .input-group-tools > button {
  display: inline-block;
  color: #a7a7a7;
  padding: 12px 4px;
  font-size: 0;
  vertical-align: middle;
  background-color: transparent;
}
.input-container > .input-group .input-group-tools > button.type > i:before,
.input-container > .input-group .input-group-tools > button.type > i:after {
  color: #101314;
}
.input-container > .input-group .input-group-tools > button.option.view-password {
  color: #101314;
  pointer-events: all;
}
.input-container > .input-group .input-group-tools > button.clear {
  display: none;
  pointer-events: all;
}
.input-container > .input-group .input-group-tools > button.clear.on { display: inline-block; }
.input-container > .input-group .input-group-tools > button.clear:hover { color: #8D8D8D; }
.input-container > .input-group .input-group-tools > button.clear:active { color: #6E6E6E; }

.input-container > .input-group .input-group-tools > button.option.error,
.input-container > .input-group .input-group-tools > button.option.success { display: none; }
.input-container > .input-group .input-group-tools > button > i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  overflow: hidden;
}
.input-container > .input-group .input-group-tools > button.search {
  pointer-events: all;
  color: #101314;
}
.input-container.disabled > .input-group .input-group-tools > button.search { color: #CACACA; }
.input-container.disabled > .input-group .input-group-tools > button.search i:before { color: #CACACA; }
.input-container > .input-group .input-group-tools > button.search > i {
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.input-container > .input-group .input-group-tools > button.search:hover { background-color: rgba(233, 233, 233, .5); }
.input-container > .input-group .input-group-tools > button.search:active { background-color: rgba(233, 233, 233, 1); }
.input-container > .status-message {
  display: none;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: calc((-13 / 1000) * 1em);
}

.input-container.input-container-sm .input-box { line-height: 16px; }
.input-container.input-container-sm .input-group-tools > button {
  padding-top: 9px;
  padding-bottom: 9px;
}
.input-container.input-container-sm .input-group-tools > button.search {
  padding-top: 7px;
  padding-bottom: 7px;
}
.input-container.input-container-sm .input-group-tools > button.search i {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
.input-container.input-container-md .input-box { line-height: 22px; }
.input-container.input-container-md .input-group-tools > button {
  padding-top: 12px;
  padding-bottom: 12px;
}
.input-container.input-container-md .input-group-tools > button.search {
  padding-top: 8px;
  padding-bottom: 8px;
}
.input-container.input-container-md .input-group-tools > button.search i {
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.input-container.input-container-lg .input-box {
  line-height: 30px;
  font-size: 16px;
}
.input-container.input-container-lg .input-group-tools > button {
  padding-top: 16px;
  padding-bottom: 16px;
}
.input-container.input-container-lg .input-group-tools > button.search {
  padding-top: 12px;
  padding-bottom: 12px;
}
.input-container.input-container-lg .input-group-tools > button.search i {
  font-size: 24px;
  width: 24px;
  height: 24px;
}


/* search bar */
/* search bar - search filter */
.input-container.search-bar .search-filter-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}
.input-container.search-bar .search-filter {
  position: relative;
  width: auto;
  height: auto;
  padding: 0 32px 0 16px;
}
.input-container.search-bar .search-filter:after {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  right: 16px;
  width: 1px;
  height: 20px;
  background-color: #D8D8D8;
  transform: translateY(-50%);
}
.input-container.search-bar .search-filter .select {
  border: 0;
  line-height: 40px;
}
.input-container.search-bar .search-filter .select.select-overlap .select-menu { top: 1px; }

/* disabled */
.input-container.search-bar.disabled .search-filter {
  color: #cacaca;
}

/* search bar - search history panel */
.input-container.search-bar .search-history-panel {
  position: absolute;
  display: none;
  top: 100%;
  width: 100%;
  height: auto;
  z-index: 10;
}
.input-container.search-bar .search-history-panel .search-history-panel-dim {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
}
.input-container.search-bar .search-history-panel.on { display: block; }
.input-container.search-bar .search-history-panel .inner {
  position: relative;
  background-color: #F8F8F8;
  border: 1px solid #D8D8D8;
  border-radius: 2px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}
.input-container.search-bar .search-history-panel .list {
  display: block;
  width: 100%;
  height: auto;
}
.input-container.search-bar .search-history-panel .list > ul > li:last-of-type .search-history-item { border-bottom: 0; }
.input-container.search-bar .search-history-panel .list .search-history-item {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(216, 216, 216, .5);
}
.input-container.search-bar .search-history-panel .list .search-history-item .history-call {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  background-color: transparent;
  padding: 12px 48px 12px 16px;
  color: #101314;
}
.input-container.search-bar .search-history-panel .list .search-history-item .history-call:hover { background-color: rgba(233, 233, 233, .5); }
.input-container.search-bar .search-history-panel .list .search-history-item .history-remove {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: #A7A7A7;
  background-color: transparent;
}
.input-container.search-bar .search-history-panel .list .search-history-item .history-remove i {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.input-container.search-bar .search-history-panel .tools {
  display: block;
  width: auto;
  height: auto;
  background-color: #E9E9E9;
  padding: 8px 16px;
}
.input-container.search-bar .search-history-panel .tools .tools-item {
  color: #4C4C4C;
  font-size: 12px;
  background-color: transparent;
}
.input-container.search-bar .search-history-panel .tools .tools-item + .tools-item:before {
  display: inline-block;
  content: '';
  width: 1px;
  height: 12px;
  background-color: #D8D8D8;
  vertical-align: middle;
  margin: 0 8px;
}

/* search bar - input group tools */
.input-container.search-bar > .input-group .input-group-tools { right: 0; }
.input-container.search-bar > .input-group .input-group-tools button {
  padding-left: 8px;
  padding-right: 8px;
}

/* search bar - search detail */
.search-detail { position: relative; }
.search-detail.on .popup { display: block; }
.search-detail .popup {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding: 0;
  width: 400px;
  z-index: 10;
  cursor: auto;
}
.search-detail .popup .popup-dim {
  z-index: 9;
}
.search-detail .popup .popup-inner {
  z-index: 10;
}

.input-container.search-bar > .input-group .input-group-tools button:first-of-type { padding-left: 12px; }

/* search bar - size - sm */
.input-container.input-container-sm.search-bar .search-filter .select { line-height: 34px; }
.input-container.input-container-sm.search-bar .search-filter .select.select-overlap .select-menu { top: -2px; }

/* search bar - size - lg */
.input-container.input-container-lg.search-bar .search-filter:after { height: 28px; }
.input-container.input-container-lg.search-bar .search-filter .select { line-height: 48px; }
.input-container.input-container-lg.search-bar .search-filter .select.select-overlap .select-menu { top: 5px; }

.input-container.input-container-lg.search-bar > .input-group .input-group-tools button {
  padding-left: 12px;
  padding-right: 12px;
}
.input-container.input-container-lg.search-bar > .input-group .input-group-tools button:first-of-type {
  padding-left: 16px;
  padding-right: 8px;
}



.input-box {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 22px;
  color: #101314;
  background-color: #f8f8f8;
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  text-align: left;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, background-color ease-in-out .15s;
}
.input-box::-ms-clear { display: none; }
.input-box::placeholder { color: #d8d8d8; }
.input-box:hover {
  background-color: rgba(233, 233, 233, .5);
}
.input-box:focus {
  border-color: #101314;
  caret-color: #e54e2b;
}
.input-group.input-group-select:after {
  position: absolute;
  top: 0;
  right: 6px;
  font-size: 16px;
  content: '\e911';
  font-family: 'Licon';
  line-height: 16px;
  padding: 12px 4px;
  pointer-events: none;
}
.input-group.input-group-select .input-box { padding-right: 30px; }
select.input-box + .input-group-tools { pointer-events: none; }
.input-container.input-container-sm .input-group.input-group-select:after {
  padding-top: 9px;
  padding-bottom: 9px;
}
.input-container.input-container-md .input-group.input-group-select:after {
  padding-top: 12px;
  padding-bottom: 12px;
}
.input-container.input-container-lg .input-group.input-group-select:after {
  padding-top: 16px;
  padding-bottom: 16px;
}

.input-container.error .input-box,
.input-container.error .input-box:focus { border-color: #E51313; }
.input-container.error .status-message {
  display: block;
  color: #E51313;
}
.input-container.error .input-group-tools > button.option.error {
  display: inline-block;
  color: #E51313;
}
.input-container.success .input-box,
.input-container.success .input-box:focus { border-color: #2675FF; }
.input-container.success .status-message {
  display: block;
  color: #2675FF;
}
.input-container.success .input-group-tools > button.option.success {
  color: #2675FF;
  display: inline-block;
}
.input-container.success .input-group-tools > button.option.success i:before {
  color: #2675FF;
}

.input-container.disabled { pointer-events: none; }
.input-container.disabled label { color: #cacaca }
.input-container.disabled .status-message { display: none; }

.input-container.disabled .input-box:not(:disabled),
.input-container:not(.disabled) .input-box:disabled {
  color: #CACACA;
  background-color: rgba(202, 202, 202, .3);
  border-color: transparent;
}
.input-container.disabled > .input-group .input-group-tools > button.type:not(:disabled) > i:before,
.input-container.disabled > .input-group .input-group-tools > button.type:not(:disabled) > i:after,
.input-container:not(.disabled) > .input-group .input-group-tools > button.type:disabled > i:before,
.input-container:not(.disabled) > .input-group .input-group-tools > button.type:disabled > i:after { color: #CACACA; }
.input-container:not(.search-bar).disabled .input-group-tools .error,
.input-container:not(.search-bar).disabled .input-group-tools .success { display: none; }
.input-container.disabled.search-bar .input-group-tools > *:not(.search) { display: none !important; }



.theme-dark .input-box {
  border-color: transparent;
  background-color: rgba(76, 76, 76, .5);
  color: #d8d8d8;
}
.theme-dark .input-box::placeholder { color: #6e6e6e; }
.theme-dark .input-box:hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .input-box:disabled {
  background-color: rgba(141, 141, 141, .3);
  color: #8d8d8d;
}
.theme-dark .input-box:focus {
  border-color: #6e6e6e;
  caret-color: #e54e2b;
}

.theme-dark .input-container.disabled .input-box:not(:disabled),
.theme-dark .input-container:not(.disabled) .input-box:disabled {
  color: rgba(141, 141, 141, .3);
  background-color: rgba(141, 141, 141, .3);
}
.theme-dark .input-container.disabled .input-group .input-group-tools > button.type > i:before,
.theme-dark .input-container.disabled .input-group .input-group-tools > button.type > i:after { color: rgba(141, 141, 141, .3); }

.theme-dark .input-container:not(.disabled) .input-group .input-box:disabled ~ .input-group-tools > button.type > i:before,
.theme-dark .input-container:not(.disabled) .input-group .input-box:disabled ~ .input-group-tools > button.type > i:after { color: rgba(141, 141, 141, .3); }


.theme-dark .input-group .input-group-tools > button { color: #d8d8d8; }
.theme-dark .input-group .input-group-tools > button.type > i:before,
.theme-dark .input-group .input-group-tools > button.type > i:after { color: #D8D8D8; }

.theme-dark .input-group .input-group-tools > button.clear { color: #4c4c4c; }
.theme-dark .input-container.error .input-box,
.theme-dark .input-container.error .input-box:focus { border-color: #e82b2b; }



.theme-dark .input-container.search-bar .search-filter:after { background-color: #4c4c4c; }
.theme-dark .input-group .input-group-tools > button.clear:hover { color: #6E6E6E; }
.theme-dark .input-group .input-group-tools > button.clear:active { color: #8D8D8D; }
.theme-dark .input-group .input-group-tools > button.search { color: #D8D8D8; }
.theme-dark .input-container.disabled > .input-group .input-group-tools > button.search { color: #8D8D8D; }
.theme-dark .input-container.disabled > .input-group .input-group-tools > button.search i:before { color: #8D8D8D; }
.theme-dark .input-group .input-group-tools > button.search:hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .input-group .input-group-tools > button.search:active { background-color: rgba(110, 110, 110, 1); }


.theme-dark .input-container.search-bar .search-history-panel .inner {
  background-color: #4c4c4c;
  border-color: #4c4c4c;
}
.theme-dark .input-container.search-bar .search-history-panel .list .search-history-item { border-color: #6E6E6E; }
.theme-dark .input-container.search-bar .search-history-panel .list .search-history-item .history-call { color: #D8D8D8; }
.theme-dark .input-container.search-bar .search-history-panel .list .search-history-item .history-call:hover {
  color: #F8F8F8;
  background-color: rgba(110, 110, 110, .5);
}
.theme-dark .input-container.search-bar .search-history-panel .list .search-history-item .history-call:active { background-color: #6E6E6E; }
.theme-dark .input-container.search-bar .search-history-panel .list .search-history-item .history-remove { color: #6E6E6E; }
.theme-dark .input-container.search-bar .search-history-panel .tools { background-color: #2E3031; }
.theme-dark .input-container.search-bar .search-history-panel .tools .tools-item { color: #CACACA; }
.theme-dark .input-container.search-bar .search-history-panel .tools .tools-item + .tools-item:before { background-color: #6e6e6e; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 21. Link----------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
a.link {
  display: inline-block;
  color: #e54e2b;
}
a.link .label {
  text-decoration: underline;
  text-underline-position: under;
}
a.link:hover { color: #922412 }

a.link:active {
  color: #531006;
  text-decoration-color: #531006;
}
a.link.disabled {
  color: #cacaca;
  text-decoration-color: #cacaca;
  pointer-events: none;
}
a.link:visited {
  color: #531006;
  text-decoration-color: #531006;
}

a.link .icon,
a.link .icon i {
  font-size: inherit;
  vertical-align: middle;
}
a.link .icon i { line-height: 1; }
a.link .icon + .label {
  text-decoration: none;
  vertical-align: middle;
}
a.link .icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
a.link .label {
  display: inline-block;
}

.theme-dark a.link {
  color: #e54e2b;
  text-decoration-color: #e54e2b;
}
.theme-dark a.link:hover {
  color: #9d3a2a;
  text-decoration-color: #9d3a2a;
}
.theme-dark a.link:active {
  color: #65281f;
  text-decoration-color: #65281f;
}
.theme-dark a.link.disabled {
  color: rgba(141, 141, 141, .3);
  text-decoration-color: rgba(141, 141, 141, .3);
}
.theme-dark a.link:visited {
  color: #65281f;
  text-decoration-color: #65281f;
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 22. LIST: Table---------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background-color: #f8f8f8;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  padding: 8px;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  vertical-align: top;
}
.table > tbody > tr > th,
.table > tbody > tr > td,
.table.table-md > tbody > tr > th,
.table.table-md > tbody > tr > td {
  padding: 18px 8px;
}
.table.table-sm > tbody > tr > th,
.table.table-sm > tbody > tr > td {
  padding: 12px 8px;
}

.table > thead > tr > th:first-child,
.table > thead > tr > td:first-child,
.table > tbody > tr > th:first-child,
.table > tbody > tr > td:first-child,
.table > tfoot > tr > th:first-child,
.table > tfoot > tr > td:first-child {
  padding-left: 16px;
}
.table > thead > tr > th:last-child,
.table > thead > tr > td:last-child,
.table > tbody > tr > th:last-child,
.table > tbody > tr > td:last-child,
.table > tfoot > tr > th:last-child,
.table > tfoot > tr > td:last-child {
  padding-right: 16px;
}
.table > thead > tr > th,
.table > thead > tr > td {
  font-weight: 700;
  border-bottom: 1px solid #8d8d8d;
  color: #101314;
}
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  font-weight: 400;
  color: #4c4c4c;
  border-bottom: 1px solid #d8d8d8;
}
.table > tbody > tr.disabled > th,
.table > tbody > tr.disabled > td,
.table > tfoot > tr.disabled > th,
.table > tfoot > tr.disabled > td {
  pointer-events: none;
  opacity: .1;
}

.table.table-select > tbody .checker-item { pointer-events: none; }
.table.table-select > tbody > tr:hover > th,
.table.table-select > tbody > tr:hover > td {
  background-color: rgba(233, 233, 233, .5);
  cursor: pointer;
}
.table > tbody > tr.on > th
.table > tbody > tr.on > td {
  background-color: rgba(233, 233, 233, 1);
}
.table.table-sm.table-portrait-label { padding-left: 36px; }
.table.table-sm.table-portrait-label .portrait {
  width: 28px;
  height: 28px;
}
.table-portrait-label {
  position: relative;
  display: inline-block;
  padding-left: 42px;
}
.table-portrait-label .portrait {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 0;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
}
.table .checker-item .icon
.table.table-md .checker-item .icon {
  width: 24px;
  height: 24px;
}
.table .checker-item.only-icon.sm .icon i,
.table.table-sm .checker-item.only-icon.sm .icon i { font-size: 24px; }

.table.table-sm .checker-item .icon {
  width: 20px;
  height: 20px;
}
.table.table-sm .checker-item.only-icon.sm .icon i { font-size: 20px; }


.theme-dark .table { background-color: #101314; }
.theme-dark .table > thead > tr > th,
.theme-dark .table > thead > tr > td {
  border-bottom: 1px solid #4c4c4c;
  color: #d8d8d8;
}
.theme-dark .table > tbody > tr > th,
.theme-dark .table > tbody > tr > td,
.theme-dark .table > tfoot > tr > th,
.theme-dark .table > tfoot > tr > td {
  color: #cacaca;
  border-bottom: 1px solid rgba(76, 76, 76, .5);
}

.theme-dark .table.table-select > tbody > tr:hover > th,
.theme-dark .table.table-select > tbody > tr:hover > td {
  background-color: rgba(76, 76, 76, .5);
}
.theme-dark .table > tbody > tr.on > th
.theme-dark .table > tbody > tr.on > td {
  background-color: rgba(76, 76, 76, 1);
}



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 23. List: Gallery ------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.list-gallery {}
.list-gallery .fotorama__arr {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  background-image: none;
  background-position: center;
  background-color: rgba(16, 19, 20, .8);
  text-align: center;
}
.list-gallery .fotorama__arr.fotorama__arr--next { right: 0; }
.list-gallery .fotorama__arr.fotorama__arr--next:before {
  display: inline-block;
  content: '\e947';
  font-family: 'Licon';
  font-size: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #F8F8F8;
}
.list-gallery .fotorama__arr.fotorama__arr--prev { left: 0; }
.list-gallery .fotorama__arr.fotorama__arr--prev:before {
  display: inline-block;
  content: '\e91f';
  font-family: 'Licon';
  font-size: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #F8F8F8;
}
.list-gallery .fotorama__thumb-border {
  border-color: #E54E2B;
  background-image: none;
}
.list-gallery .fotorama__thumb { border-radius: 2px; }
.list-gallery .fotorama__dot {
  display: block;
  width: 9px;
  height: 9px;
  position: relative;
  top: 12px;
  left: 6px;
  border-radius: 6px;
  /*border: 1px solid #7f7f7f;*/
  background-color: rgba(23, 40, 46, .2);
  border: 0;
}
.list-gallery .fotorama__nav__frame.fotorama__active .fotorama__dot {
  width: 9px;
  height: 9px;
  background-color: #17282E;
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 24. Loading ------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.loading {
  display: block;
  width: 100%;
  height: 100%;
}
/* loading full screen */
.loading.loading-full-screen {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 999;
}
.loading.loading-full-screen.on { display: block; }
.loading.loading-full-screen .loading-dim {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 19, 20, .8);
}
.loading.loading-full-screen .indicator {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
}
.loading.loading-full-screen .indicator .progress-rail {
  display: block;
  width: 90px;
  height: 90px;
  background-size: 90px auto;
  background-image: url('../images/loading-rail-on_light.svg');
}
.loading.loading-full-screen .indicator .progress {
  display: block;
  width: 100%;
  height: 90px;
  background-size: 90px auto;
  background-image: url('../images/loading-progress.svg');
}
.loading.loading-full-screen .indicator p {
  font-size: 13px;
  color: #E54E2B;
  text-align: center;
  font-weight: 700;
}

/* loading bar */
.loading.loading-bar .info-bar {
  display: block;
  width: 100%;
  height: auto;
}
.loading.loading-bar .info-bar {
  font-size: 11px;
  color: #6E6E6E;
  margin-bottom: 4px;
}
.loading.loading-bar .progress-rail {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background-color: rgba(93, 106, 113, .2);
  overflow: hidden;
}
.loading.loading-bar .progress-rail .progress {
  display: block;
  width: 0;
  height: 100%;
  background-color: #E54E2B;
}

/* loading simple */


/* loading simple */
.loading.loading-simple {
    display: inline-block;
    font-size: 12px;
    color: #4C4C4C;
}
.loading.loading-simple > span.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/loading-icon-on_light.svg');
    background-size: 16px;
    vertical-align: middle;
    animation: rotating 1.2s linear infinite;
}
.loading.loading-simple > span { vertical-align: middle; }
.loading.loading-simple > span.spinner + span { margin-left: 8px; }


/**
 * Theme Dark
 */
.theme-dark .loading.loading-full-screen .indicator .progress-rail { background-image: url('../images/loading-rail-on_dark.svg'); }
.theme-dark .loading.loading-bar .info-bar { color: #8D8D8D; }
.theme-dark .loading.loading-bar .progress-rail { background-color: rgba(93, 106, 113, .3); }
.theme-dark .loading.loading-simple { color: #A7A7A7; }
.theme-dark .loading.loading-simple > span.spinner { background-image: url('../images/loading-icon-on_dark.svg'); }



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 26. Notification -------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.noti {
  display: block;
  width: 100%;
  height: auto;
  font-size: 0;
  background-color: #17282E;
  color: #F8F8F8;
}

.noti.noti-toast {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 16px;
}
.noti.noti-toast .noti-description > .title { padding-right: 32px; }
.noti.noti-toast .noti-description > .title + .description { margin-top: 8px; }
.noti.noti-toast .noti-description > .description + .timestamp { margin-top: 12px; }
.noti.noti-toast .noti-icon { top: 14px; }
.noti.noti-toast .close {
  top: 16px;
  right: 16px;
  transform: none;
}

.noti.noti-inline {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 14px 48px 14px 16px;
}

/* icon */
.noti .noti-icon {
  position: absolute;
  top: 12px;
  left: 16px;
  display: none;
  margin-right: 8px;
  font-size: 0;
}

/* description */
.noti .noti-description {
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: top;
  white-space: normal;
}
.noti.noti-inline .noti-description > * { line-height: 16px; }
.noti.noti-inline .noti-description > .title + .description { margin-top: 4px; }

/* close */
.noti .close {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  border: 0;
  color: #F8F8F8;
  transform: translateY(-50%);
}
.noti .close .icon i { font-size: 16px; }

/* status */
.noti.error,
.noti.warning,
.noti.success {
  padding-left: 44px;
}
.noti.error .noti-icon,
.noti.warning .noti-icon,
.noti.success .noti-icon {
  display: inline-block;
}

.noti.error:before,
.noti.warning:before,
.noti.success:before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.noti.error .noti-icon:before,
.noti.warning .noti-icon:before,
.noti.success .noti-icon:before {
  position: relative;
  content: '';
  font-family: 'Material Icons';
  font-size: 20px;
  line-height: normal;
}

/* error */
.noti.error { color: #E82B2B; }
.noti.error:before { background-color: #E82B2B; }
.noti.error .noti-icon:before { content: 'error_outline'; }

/* warning */
.noti.warning { color: #F0C11B; }
.noti.warning:before { background-color: #F0C11B; }
.noti.warning .noti-icon:before { content: 'help_outline'; }

/* success */
.noti.success { color: #4488FF; }
.noti.success:before { background-color: #4488FF; }
.noti.success .noti-icon:before { content: 'check_circle_outline'; }


/* noti wrapper */
.noti-group-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99;
  width: 288px;
  overflow-y: auto;
}
.noti-group-toast .noti + .noti { margin-top: 8px; }


/**
 * Theme Dark
 */
.theme-dark .noti {
  background-color: #EFEFF0;
  color: #101314;
}
.theme-dark .noti .close { color: #101314; }

/* error */
.theme-dark .noti.error { color: #C13239; }
.theme-dark .noti.error:before { background-color: #C13239; }

/* warning */
.theme-dark .noti.warning { color: #D8B024; }
.theme-dark .noti.warning:before { background-color: #D8B024; }

/* success */
.theme-dark .noti.success { color: #296BDD; }
.theme-dark .noti.success:before { background-color: #296BDD; }



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 27. Number -------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/


/*인풋 넘버 이니셜라이징*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance:textfield;
}


.input-container > .input-group .input-group-tools {
  position: absolute;
  height: 100%;
  top: 0;
  right: 10px;
  font-size: 0;
}
.input-container > .input-group .input-group-tools .number-spin-group {
  display: inline-block;
  width: 24px;
  height: 100%;
  position: relative;
  pointer-events: all;
}
.input-container > .input-group .input-group-tools .number-spin-group > button {
  appearance: none;
  display: block;
  width: 100%;
  height: 12px;
  line-height: 12px;
  font-size: 0;
  background: transparent;
  position: absolute;
  left: 0;
  border-radius: 2px;
}

.input-container > .input-group .input-group-tools .number-spin-group > button:hover {
  background: rgba(0,0,0,0.05);
}

.input-container > .input-group .input-group-tools .number-spin-group > button:after {
  content: '';
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.input-container > .input-group .input-group-tools .number-spin-group > button.btn-increase { bottom: 50%; }
.input-container > .input-group .input-group-tools .number-spin-group > button.btn-increase:after {
  border-top: none;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 5px solid #101314;
  bottom: 3px;
}

.input-container > .input-group .input-group-tools .number-spin-group > button.btn-decrease { top: 50%; }
.input-container > .input-group .input-group-tools .number-spin-group > button.btn-decrease:after {
  border-top: 5px solid #101314;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: none;
  top: 3px;
}

.input-container.disabled > .input-group .input-group-tools .number-spin-group { pointer-events: none; }
.input-container.disabled > .input-group .input-group-tools .number-spin-group > button.btn-increase:after { border-bottom: 5px solid #CACACA; }
.input-container.disabled > .input-group .input-group-tools .number-spin-group > button.btn-decrease:after { border-top: 5px solid #CACACA; }

.theme-dark .input-container > .input-group .input-group-tools .number-spin-group > button.btn-increase:after { border-bottom: 5px solid #D8D8D8; }
.theme-dark .input-container > .input-group .input-group-tools .number-spin-group > button.btn-decrease:after { border-top: 5px solid #D8D8D8; }

.theme-dark .input-container.disabled > .input-group .input-group-tools .number-spin-group > button.btn-increase:after { border-bottom: 5px solid rgba(141, 141, 141, .3); }
.theme-dark .input-container.disabled > .input-group .input-group-tools .number-spin-group > button.btn-decrease:after { border-top: 5px solid rgba(141, 141, 141, .3); }



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 28. Overflow -----------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.overflow {
  position: relative;
  display: inline-block;
  font-size: 0;
  color: #101314;
  line-height: 1;
}
/* hover */
.overflow:hover { background-color: rgba(233, 233, 233, .5); }
/* active */
.overflow:active { background-color: #E9E9E9; }
/* disabled */
.overflow.disabled { color: #CACACA; }

.overflow > i { font-size: 24px; }

.overflow.on { z-index: 99; }
.overflow.on .overflow-menu { display: block; }
.overflow .overflow-menu {
  position: absolute;
  display: none;
  top: 24px;
  right: 0;
  border-radius: 2px;
  background-color: #F8F8F8;
  border: 1px solid #D8D8D8;
  z-index: 200;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
}
.overflow .overflow-menu > ul > li + li {
  border-top: 1px solid #D8D8D8;
}
.overflow .overflow-menu > ul > li > .overflow-menu-item {
  display: block;
  width: 100%;
  height: auto;
  padding: 0 16px;
  line-height: 40px;
  white-space: nowrap;
  text-align: left;
  font-size: 14px;
  color: #4C4C4C;
  min-width: 160px;
}

/* size - small */
.overflow.overflow-sm .overflow-menu > ul > li > .overflow-menu-item { line-height: 34px }
.overflow.overflow-md .overflow-menu > ul > li > .overflow-menu-item { line-height: 40px }
.overflow.overflow-lg .overflow-menu > ul > li > .overflow-menu-item { line-height: 48px }

/* hover */
.overflow .overflow-menu > ul > li > .overflow-menu-item:hover { background-color: rgba(233, 233, 233, .5); }
.overflow .overflow-menu > ul > li > .overflow-menu-item:active { background-color: #E9E9E9; }
/* disabled */
.overflow .overflow-menu > ul > li > .overflow-menu-item.disabled {
  color: #CACACA;
  pointer-events: none;
}
/* position */
.overflow.overflow-right .overflow-menu {
  left: auto;
  right: 0;
}
.overflow.overflow-left .overflow-menu {
  left: 0;
  right: auto;
}


/**
 * Theme Dark
 */
.theme-dark .overflow { color: #D8D8D8; }
.theme-dark .overflow:hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .overflow:active { background-color: rgba(110, 110, 110, 1); }
.theme-dark .overflow.disabled { color: #8D8D8D; }

.theme-dark .overflow .overflow-menu {
  background-color: #4c4c4c;
  border-color: #6E6E6E;
}
.theme-dark .overflow .overflow-menu > ul > li + li { border-color: #6E6E6E; }
.theme-dark .overflow .overflow-menu > ul > li > .overflow-menu-item { color: #CACACA; }
.theme-dark .overflow .overflow-menu > ul > li > .overflow-menu-item:hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .overflow .overflow-menu > ul > li > .overflow-menu-item:active { background-color: rgba(110, 110, 110, 1); }
.theme-dark .overflow .overflow-menu > ul > li > .overflow-menu-item.disabled {
  color: rgba(141, 141, 141, .3);
  /*background-color: rgba(141, 141, 141, .3);*/
}


/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 29. Pagination ---------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.pagination-wrapper {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
}
.pagination {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 auto;
}
.pagination .pagination-group > ul > li {
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.pagination .pagination-group {
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.pagination .pagination-group + .pagination-group { margin-left: 32px; }
.pagination .pagination-group > ul > li + li { margin-left: 28px; }
.pagination .pagination-group.direction > ul > li + li { margin-left: 8px; }
.pagination .pagination-group > ul > li.on .pagination-item { font-weight: 700; }
.pagination .pagination-group > ul > li.on .pagination-item:after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #101314;
}
.pagination .pagination-item {
  position: relative;
  display: inline-block;
  min-width: 20px;
  font-size: 14px;
  color: #101314;
  text-align: center;
}
.pagination:not(.pagination-option) .pagination-item i {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  font-style: normal;
}
.pagination:not(.pagination-option) .pagination-item i.Licon { font-size: 20px; }

.pagination .pagination-item:hover { background-color: rgba(233, 233, 233, .5); }
.pagination .pagination-item:active { background-color: rgba(233, 233, 233, 1); }


/* disabled */
.pagination.disabled { pointer-events: none; }
.pagination.disabled .pagination-item { color: #CACACA; }
.pagination.disabled .pagination-group > ul > li.on .pagination-item:after { display: none; }


.pagination .pagination-group > ul > li.disabled { pointer-events: none; }
.pagination .pagination-group > ul > li.disabled .pagination-item { color: #CACACA; }
.pagination .pagination-group > ul > li.disabled.on .pagination-item:after { display: none; }

/**
 * Theme Dark
 */
.theme-dark .pagination .pagination-item { color: #D8D8D8; }
.theme-dark .pagination .pagination-item:hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .pagination .pagination-item:active { background-color: rgba(110, 110, 110, 1); }
.theme-dark .pagination .pagination-group > ul > li.on .pagination-item:after { background-color: #8D8D8D; }
.theme-dark .pagination.disabled .pagination-item { color: rgba(141, 141, 141, .3); }
.pagination .pagination-group > ul > li.disabled .pagination-item { color: rgba(141, 141, 141, .3); }


/* pagination option -------------------------------------------------------------------------------------------------*/
.pagination.pagination-option {
  width: 100%;
  background-color: #EFEFF0;
  border-top: 1px solid #d8d8d8;
  font-size: 0;
}
.pagination.pagination-option .pagination-option-item {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  /*padding: 0 16px;*/
  line-height: 48px;
  color: #101314;
  vertical-align: middle;
}
.pagination.pagination-option .pagination-option-item + .pagination-option-item:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 1px;
  height: 100%;
  background-color: #D8D8D8;
}
.pagination.pagination-option a.pagination-option-item {
  line-height: normal;
  /*padding: 16px;*/
}
.pagination.pagination-option .pagination-option-item .label {
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
}
.pagination.pagination-option .pagination-option-item > i {
  display: inline-block;
  font-size: 16px;
  line-height: 48px;
}
.pagination.pagination-option .pagination-option-item .select .select-text,
.pagination.pagination-option .pagination-option-item .select .select-drop {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}
.pagination.pagination-option .pagination-option-item .select .select-menu {
  top: 3px;
  left: -13px;
}
.pagination.pagination-option .pagination-option-item .select:hover,
.pagination.pagination-option a.pagination-option-item:hover { background-color: rgba(221, 223, 224, .5); }
.pagination.pagination-option .pagination-option-item .select:active,
.pagination.pagination-option a.pagination-option-item:active { background-color: #DDDFE0; }

.pagination.pagination-option .pagination-option-item .select.disabled,
.pagination.pagination-option a.pagination-option-item.disabled {
  pointer-events: none;
  color: #CACACA;
}

/**
 * Theme Dark
 */
.theme-dark .pagination.pagination-option {
  background-color: rgba(76, 76, 76, .5);
  border-color: #4C4C4C;
}
.theme-dark .pagination.pagination-option .pagination-option-item { color: #D8D8D8; }
.theme-dark .pagination.pagination-option .pagination-option-item + .pagination-option-item:before { background-color: #4C4C4C; }
.theme-dark .pagination.pagination-option .pagination-option-item .select:hover,
.theme-dark .pagination.pagination-option a.pagination-option-item:hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .pagination.pagination-option .pagination-option-item .select:active,
.theme-dark .pagination.pagination-option a.pagination-option-item:active { background-color: rgba(110, 110, 110, 1); }

.theme-dark .pagination.pagination-option .pagination-option-item .select.disabled,
.theme-dark .pagination.pagination-option a.pagination-option-item.disabled { color: rgba(141, 141, 141, .3); }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 30. Popup --------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.popup-wrapper {
  position: fixed;
  display: none;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
}
.popup-wrapper.on {
  display: block;
}

.popup-dim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #101314;
  opacity: .5;
}
.popup-wrapper .popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup.popup-full { width: 100%; }
.popup.popup-warning .popup-inner:before {
  position: relative;
  display: block;
  content: '';
  width: 100%;
  height: 4px;
  background-color: #E51313;
}
.popup {
  display: block;
  padding: 28px;
  width: auto;
  height: auto;
  text-align: left;
}
.popup .popup-inner {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  max-height: 100vh;
  background-color: #EFEFF0;
  border-radius: 4px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  overflow: hidden;
}
.popup .popup-inner .popup-title {
  position: relative;
  padding: 24px 24px 16px;
}

.popup .popup-inner .popup-title:after {
  position: absolute;
  bottom: 0;
  left: 24px;
  content: '';
  width: calc(100% - 48px);
  border-bottom: 1px solid #D8D8D8;
}
.popup .popup-inner .popup-title .title-wrap {
  position: relative;
  /*border-bottom: 1px solid #D8D8D8;*/
}
.popup .popup-inner .popup-title .title-wrap .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  line-height: normal;
}
.popup .popup-inner .popup-title .title-wrap .close i { font-size: 16px; }

.popup .popup-inner .popup-contents {
  display: block;
  width: 100%;
  max-height: calc(100vh - 280px);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 24px 24px 16px;
  overflow-y: auto;
}
.popup .popup-inner .popup-contents .popup-panel { margin-top: 16px; }
.popup .popup-inner .popup-tools { padding: 16px 24px 24px; }


/**
 * Theme Dark
 */
.theme-dark .popup .popup-inner {
  background-color: #4c4c4c;
  color: #d8d8d8;
}
.theme-dark .popup .popup-inner .popup-title:after { border-color: #6e6e6e; }
.theme-dark .popup .popup-inner .popup-title .title-wrap .title { color: #d8d8d8; }
.theme-dark .popup .popup-inner .popup-title .title-wrap .sub-title { color: #cacaca; }
.theme-dark .popup .popup-inner .popup-title .title-wrap .close { color: #d8d8d8; }

.theme-dark .popup .popup-inner .popup-contents { color: #d8d8d8; }

@media (max-width: 599px) {
  .popup {
    padding: 16px;
    width: 100%;
  }
  .popup.popup-full {
    padding: 0;
    top: 0;
    left: 0;
    transform: none;
  }
  .popup.popup-full .popup-inner {
    height: 100vh;
    border-radius: 0;
  }
  .popup.popup-full .popup-inner .popup-contents {
    height: auto;
    max-height: none;
  }
}
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 31. Quick Menu----------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.quick-menu {
  position: fixed;
  top: 32px;
  right: 16px;
  display: inline-block;
  width: auto;
  height: auto;
  z-index: 100;
  background-color: #f8f8f8;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  overflow: hidden;
  border-radius: 4px;
}
.quick-menu.disabled { pointer-events: none; }
.quick-menu ul { overflow: visible; }
.quick-menu ul li {
  position: relative;
  display: block;
  float: none;
  width: auto;
  height: auto;
  overflow: visible;
}
.quick-menu ul li a {
  display: inline-block;
  padding: 12px 8px;
  text-align: center;
  width: 80px;
  font-size: 0;
}
.quick-menu ul li a:hover { background-color: rgba(233, 233, 233, .5); }
.quick-menu ul li a:active { background-color: rgba(233, 233, 233, 1); }
.quick-menu.disabled a .icon,
.quick-menu.disabled a .label {
  color: #cacaca;
}
.quick-menu ul li:first-child a { padding-top: 16px; }
.quick-menu ul li:last-child a { padding-bottom: 16px; }
.quick-menu ul li + li a:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #d8d8d8;
}
.quick-menu ul li a .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: #101314;
}
.quick-menu.type-icon ul li a .icon {
  width: 32px;
  height: 32px;
}
.quick-menu.type-icon ul li a .icon .badge {
  top: -6px;
  left: calc(100% - 16px);
}
.quick-menu ul li a .icon i {
  display: inline-block;
  font-size: 24px;
}
.quick-menu.type-icon ul li a .icon i { font-size: 32px; }
.quick-menu ul li a .label {
  display: block;
  font-size: 11px;
  color: #161616;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.quick-menu ul li a .icon + .label {
  margin-top: 6px;
}
.quick-menu.type-icon ul li a {
  width: 64px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.quick-menu.type-icon .label {
  display: none;
}

.theme-dark .quick-menu {
  background-color: #4c4c4c;
  border: 1px solid #6e6e6e;
}
.theme-dark .quick-menu a .icon { color: #f8f8f8; }
.theme-dark .quick-menu a .label { color: #d8d8d8; }
.theme-dark .quick-menu ul li + li a:before { background-color: #6e6e6e; }
.theme-dark .quick-menu a:hover { background-color: rgba(110, 110, 110, .5); }
.theme-dark .quick-menu a:active { background-color: rgba(110, 110, 110, 1); }
.theme-dark .quick-menu.disabled { border-color: rgba(141, 141, 141, .3); }
.theme-dark .quick-menu.disabled ul li + li a:before { background-color: rgba(141, 141, 141, .3); }
.theme-dark .quick-menu.disabled a .icon,
.theme-dark .quick-menu.disabled a .label { color: rgba(141, 141, 141, .3); }


/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 34. Select -------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.select {
  position: relative;
  display: inline-block;
}
.select .select-input {
  position: absolute;
  width: 0;
  height: 0;
  font-size: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}
.select .select-text { font-size: 14px !important; }
.select .select-dim {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 90;
  cursor: default;
  /*background-color: rgba(0, 0, 0, .3);*/
}
.select.select-overlap .select-menu {
  top: -8px;
  left: -25px;
}

.select.on .select-menu { display: block; }
.select.on > .select-dim { display: block; }
.select.on > *:not(.select-dim) { z-index: 100; }

.select.select-right .select-menu,
.select.select-right.top .select-menu {
  top: -8px;
  left: 100%;
}
.select.select-right.bottom .select-menu {
  top: auto;
  bottom: -8px;
  left: 100%;
}

.select-menu {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  width: auto;
  height: auto;
  padding: 8px 0 8px;
  background-color: #F8F8F8;
  border: 1px solid #D8D8D8;
  border-radius: 4px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  line-height: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #101314;
  z-index: 100;
}
.select-menu .select-menu-item {
  display: block;
  width: 100%;
  padding: 0 16px 0 8px;
  font-size: 14px;
  color: #4C4C4C;
  font-weight: 400;
  text-align: left;
}
.select-menu .select-menu-item:hover {
  background-color: rgba(233, 233, 233, .5);
  color: #101314;
}
.select-menu .select-menu-item:active {
  background-color: #E9E9E9;
}
.select-menu .select-menu-item .label {
  position: relative;
  display: block;
  width: 100%;
  padding-left: 16px;
}
.select-menu ul li.on .select-menu-item { color: #101314; }
.select-menu ul li.on .select-menu-item .label:before {
  position: absolute;
  top: 50%;
  left: 0;
  content: 'check';
  font-family: 'Material Icons';
  font-size: 12px;
  transform: translateY(-50%);
  font-feature-settings: 'liga';
}

/* disabled */
.select-menu.disabled,
.select-menu.disabled ul li:not(disabled) .select-menu-item,
.select-menu:not(.disabled) ul li.disabled .select-menu-item {
  pointer-events: none;
  color: #CACACA;
}


/**
 * Theme Dark
 */
.theme-dark .select-menu {
  background-color: #4C4C4C;
  border-color: #6E6E6E;
  color: #D8D8D8;
}
.theme-dark .select-menu .select-menu-item { color: #CACACA; }
.theme-dark .select-menu .select-menu-item:hover {
  color: #F8F8F8;
  background-color: rgba(110, 110, 110, .5);
}
.theme-dark .select-menu .select-menu-item:active { background-color: #6E6E6E; }
.theme-dark .select-menu ul li.on .select-menu-item { color: #F8F8F8; }

.theme-dark .select-menu.disabled {
  color: rgba(141, 141, 141, .3);
  border-color: rgba(141, 141, 141, .3);
}
.theme-dark .select-menu.disabled ul li:not(disabled) .select-menu-item,
.theme-dark .select-menu:not(.disabled) ul li.disabled .select-menu-item { color: rgba(141, 141, 141, .3); }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 35. Sheet: Bottom ------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.sheet-wrapper {
  position: fixed;
  display: none;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 99;
  pointer-events: none;
}

.sheet-wrapper.sheet-on-contents { display: block; }
.sheet-wrapper.sheet-on-contents .sheet .sheet-contents { display: none; }
.sheet-wrapper.on,
.sheet-wrapper.open,
.sheet-wrapper.open .sheet .sheet-contents { display: block; }

.sheet-wrapper.sheet-bottom .sheet {
  bottom: 0;
  box-shadow: -6px 0 10px 0 rgba(0, 0, 0, .10) ;
}
.sheet-wrapper .sheet-dim {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .16);
  pointer-events: all;
}
.sheet {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100% / 2);
  background-color: #f8f8f8;
  pointer-events: all;
}
.sheet .sheet-title {
  display: block;
  padding: 18px;
  border-bottom: 1px solid #D8D8D8;
}
.sheet .sheet-title .title-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.sheet .sheet-title .title-wrap .title {
  color: #101314;
  line-height: 1.2;
}
.sheet .sheet-title .title-wrap .close,
.sheet .sheet-title .title-wrap .toggle {
  position: absolute;
  right: 0;
  top: 0;
  color: #101314;
}
.sheet-wrapper.sheet-on-contents .sheet .sheet-title .title-wrap .toggle .icon i:nth-of-type(1) { display: inline-block; }
.sheet-wrapper.sheet-on-contents .sheet .sheet-title .title-wrap .toggle .icon i:nth-of-type(2) { display: none; }
.sheet-wrapper.sheet-on-contents.open .sheet .sheet-title .title-wrap .toggle .icon i:nth-of-type(1) { display: none; }
.sheet-wrapper.sheet-on-contents.open .sheet .sheet-title .title-wrap .toggle .icon i:nth-of-type(2) { display: block; }

.sheet .sheet-title .title-wrap + .sub-title {
  margin-top: 6px;
  color: #4C4C4C;
}
.sheet .sheet-contents {
  position: relative;
  display: block;
  padding: 18px;
  width: 100%;
  height: auto;
  overflow-y: auto;
}

@media (max-width: 599px) {
  .sheet-wrapper.sheet-on-contents.open .sheet-dim,
  .sheet-wrapper.on .sheet-dim { display: block; }
}

/**
 * Theme Dark
 */
.theme-dark .sheet { background-color: #4c4c4c; }
.theme-dark .sheet .sheet-title { border-color: #6E6E6E; }
.theme-dark .sheet .sheet-title .title-wrap .title { color: #D8D8D8; }
.theme-dark .sheet .sheet-title .title-wrap .btn { color: #F8F8F8; }
.theme-dark .sheet .sheet-title .title-wrap + .sub-title { color: #CACACA }
.theme-dark .sheet .sheet-contents { color: #D8D8D8; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 36. Sheet: Side --------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.sheet-wrapper.sheet-left .sheet {
  width: 320px;
  height: 100vh;
  max-height: 100%;
  top: 0;
  left: 0;
  box-shadow: 6px 0 10px 0 rgba(0, 0, 0, .10) ;
}
.sheet-wrapper.sheet-right .sheet {
  width: 320px;
  height: 100vh;
  max-height: 100%;
  top: 0;
  right: 0;
  box-shadow: -6px 0 10px 0 rgba(0, 0, 0, .10) ;
}
.sheet-wrapper.sheet-right .sheet .sheet-contents { max-height: 100%; }


@media (max-width: 599px) {
  .sheet-wrapper.sheet-right .sheet,
  .sheet-wrapper.sheet-left .sheet { width: 100%; }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 37. Slider -------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.input-container-lg .input-group.with-slider { padding-right: 88px; }
.input-container-lg .input-group.with-slider input[type="number"] { width: 72px;}

.input-container-sm .input-slider { height: 34px; line-height: 34px; }
.input-container-md .input-slider { height: 40px; line-height: 40px; }
.input-container-lg .input-slider { height: 48px; line-height: 48px; }

.input-container-lg .input-slider .slider-min { font-size: 16px; }
.input-container-lg .input-slider .slider-max { font-size: 16px; }
.input-container-lg .rangeslider__handle { width: 16px; height: 16px;}

.theme-dark .input-slider .slider-min { color: #D8D8D8; }
.theme-dark .input-slider .slider-max { color: #D8D8D8; }

.theme-dark .rangeslider:before { background: #4C4C4C; }
.theme-dark .rangeslider__fill { background: #D8D8D8; }
.theme-dark .rangeslider__handle {  background: #D8D8D8; }


.input-group.with-slider {
  padding-right: 82px;
}

.input-group.with-slider input[type="number"] {
  position: absolute;
  width: 66px;
  top: 0;
  right: 0;
  text-align: center;
}

.input-slider {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 30px 0 10px;
  position: relative;
}

.disabled .input-slider,
.input-slider.disabled {
  opacity: 0.3;
  pointer-events: none;
}



.input-slider .slider-min {
  display: inline-block;
  width: 10px;
  height: inherit;
  line-height: inherit;
  font-size: 14px;
  text-align: right;
  position: absolute;
  top: 0;
  left: 0;
}

.input-slider .slider-max {
  display: inline-block;
  width: 30px;
  height: inherit;
  line-height: inherit;
  font-size: 14px;
  text-align: left;
  position: absolute;
  top: 0;
  right: 0;
}


.input-slider .slider-bar {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 8px;
}

.input-slider input[type="range"] {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}


.rangeslider,
.rangeslider__fill {
  display: block;
}

.rangeslider {
  position: relative;
}

.rangeslider:before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #D8D8D8;
}

.rangeslider--horizontal {
  height: 100%;
  width: 100%;
}


.rangeslider--disabled {
  opacity: 0.3;
}

.rangeslider__fill {
  background: #101314;
  position: absolute;
}

.rangeslider--active .rangeslider__fill {
  background: #E54E2B;
}

.rangeslider--horizontal .rangeslider__fill {
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.rangeslider__handle {
  background: #101314;
  cursor: pointer;
  display: inline-block;
  width: 14px;
  height: 14px;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
}

.rangeslider__handle:hover {
  transform: translateY(-50%) scale(1.4,1.4);
}

.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
  transform: translateY(-50%) scale(1.4,1.4);
  background: #E54E2B;
}
.rangeslider--horizontal .rangeslider__handle {
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 38. Stepper ------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.stepper-wrapper {
  position: relative;
  display: block;
  width: auto;
  height: auto;
}
.stepper-wrapper label {
  display: block;
  font-size: 13px;
  letter-spacing: -0.1px;
  margin-bottom: 8px;
}
.stepper-wrapper .status-message {
  display: none;
  width: 100%;
  font-size: 11px;
  color: #E51313;
  margin-top: 4px;
}
.stepper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.stepper .stepper-input {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 22px;
  color: #101314;
  background-color: #f8f8f8;
  border: 1px solid #d8d8d8;
  text-align: center;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, background-color ease-in-out .15s;
}
.stepper .stepper-input:focus {
  border: 1px solid #101314;
  caret-color: #e54e2b;
}
.stepper .stepper-input:hover { background-color: rgba(233, 233, 233, .5); }

.stepper .stepper-item:not(.count) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


.stepper .btn-step {
  /*border: 1px solid transparent;*/
  width: 40px;
  height: 40px;
  border: 1px solid #d8d8d8;
  color: #101314;
  background-color: #f8f8f8;
  border-radius: 0;
}
.stepper .btn-step .icon i { font-size: 16px; }
.stepper .btn-step:hover {
  background-color: rgba(233, 233, 233, .5);
}
.stepper .btn-step:active {
  background-color: rgba(46, 48, 49, .1);
}

/* stepper type - center */
.stepper-wrapper.stepper-type-center .stepper {
  padding: 0 40px;
}
.stepper-wrapper.stepper-type-center .stepper .stepper-item:first-of-type { left: 0; }
.stepper-wrapper.stepper-type-center .stepper .stepper-item:first-of-type .btn-step {
  border-radius: 2px 0 0 2px;
  border-right: 1px solid transparent;
}
.stepper-wrapper.stepper-type-center .stepper .stepper-item:last-of-type { right: 0; }
.stepper-wrapper.stepper-type-center .stepper .stepper-item:last-of-type .btn-step {
  border-radius: 0 2px 2px 0;
  border-left: 1px solid transparent;
}

/* stepper type - default */
.stepper-wrapper.stepper-type-default .stepper { padding: 0 80px 0 0; }
.stepper-wrapper.stepper-type-default .stepper .stepper-item.count .stepper-input { border-radius: 2px 0 0 2px; }
.stepper-wrapper.stepper-type-default .stepper .stepper-item:nth-of-type(2) { right: 40px; }
.stepper-wrapper.stepper-type-default .stepper .stepper-item:nth-of-type(2) .btn-step { border-left: 0; }
.stepper-wrapper.stepper-type-default .stepper .stepper-item:nth-of-type(3) { right: 0; }
.stepper-wrapper.stepper-type-default .stepper .stepper-item:nth-of-type(3) .btn-step {
  border-left: 0;
  border-radius: 0 2px 2px 0;
}

/* stepper type - button */
.stepper-wrapper.stepper-type-button .stepper { padding: 0 80px 0 0; }
.stepper-wrapper.stepper-type-button .stepper .stepper-item.count .stepper-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 0;
  padding: 0;
  border-radius: 2px 0 0 2px;
  pointer-events: none;
}
.stepper-wrapper.stepper-type-button .stepper .stepper-item.count .stepper-count {
  font-size: 14px;
  color: #101314;
  line-height: 40px;
}
.stepper-wrapper.stepper-type-button .stepper .stepper-item:nth-of-type(2) { right: 40px; }
.stepper-wrapper.stepper-type-button .stepper .stepper-item:nth-of-type(2) .btn-step { border-radius: 2px 0 0 2px; }
.stepper-wrapper.stepper-type-button .stepper .stepper-item:nth-of-type(3) { right: 0; }
.stepper-wrapper.stepper-type-button .stepper .stepper-item:nth-of-type(3) .btn-step {
  border-left: 0;
  border-radius: 0 2px 2px 0;
}

/* stepper size */
.stepper-wrapper.stepper-sm .stepper-input { line-height: 16px; }
.stepper-wrapper.stepper-sm .btn-step {
  width: 34px;
  height: 34px;
}
.stepper-wrapper.stepper-sm .btn-step .icon i { font-size: 16px; }
.stepper-wrapper.stepper-type-center.stepper-sm .stepper { padding: 0 34px; }
.stepper-wrapper.stepper-type-button.stepper-sm .stepper .stepper-item .stepper-count { line-height: 34px; }
.stepper-wrapper.stepper-type-default.stepper-sm .stepper,
.stepper-wrapper.stepper-type-button.stepper-sm .stepper { padding-right: 68px; }
.stepper-wrapper.stepper-type-default.stepper-sm .stepper .stepper-item:nth-of-type(2),
.stepper-wrapper.stepper-type-button.stepper-sm .stepper .stepper-item:nth-of-type(2) { right: 34px; }


.stepper-wrapper.stepper-md .stepper-input { line-height: 22px; }
.stepper-wrapper.stepper-md .btn-step {
  width: 40px;
  height: 40px;
}
.stepper-wrapper.stepper-md .btn-step .icon i { font-size: 16px; }
.stepper-wrapper.stepper-type-center.stepper-md .stepper { padding: 0 40px; }
.stepper-wrapper.stepper-type-button.stepper-md .stepper .stepper-item .stepper-count { line-height: 40px; }
.stepper-wrapper.stepper-type-default.stepper-md .stepper,
.stepper-wrapper.stepper-type-button.stepper-md .stepper { padding-right: 80px; }
.stepper-wrapper.stepper-type-default.stepper-md .stepper .stepper-item:nth-of-type(2),
.stepper-wrapper.stepper-type-button.stepper-md .stepper .stepper-item:nth-of-type(2) { right: 40px; }


.stepper-wrapper.stepper-lg .stepper-input {
  font-size: 16px;
  line-height: 30px;
}
.stepper-wrapper.stepper-lg .btn-step {
  width: 48px;
  height: 48px;
}
.stepper-wrapper.stepper-lg .btn-step .icon i { font-size: 20px; }
.stepper-wrapper.stepper-type-center.stepper-lg .stepper { padding: 0 48px; }
.stepper-wrapper.stepper-type-button.stepper-lg .stepper .stepper-item .stepper-count {
  font-size: 16px;
  line-height: 48px;
}
.stepper-wrapper.stepper-type-default.stepper-lg .stepper,
.stepper-wrapper.stepper-type-button.stepper-lg .stepper { padding-right: 96px; }
.stepper-wrapper.stepper-type-default.stepper-lg .stepper .stepper-item:nth-of-type(2),
.stepper-wrapper.stepper-type-button.stepper-lg .stepper .stepper-item:nth-of-type(2) { right:48px; }


/* disabled */
.stepper-wrapper.disabled .stepper .stepper-input,
.stepper-wrapper.disabled .stepper .stepper-item.count .stepper-count,
.stepper-wrapper.disabled .stepper .btn-step,
.stepper .stepper-input:disabled,
.stepper .btn-step:disabled {
  color: #CACACA;
  pointer-events: none;
}

/* error */
.stepper-wrapper.error .stepper:after {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100%);
  height: calc(100%);
  content: '';
  border: 1px solid #E51313;
  border-radius: 2px;
  pointer-events: none;
}
.stepper-wrapper.error .stepper .stepper-input:focus { border-color: #d8d8d8; }
.stepper-wrapper.error .status-message { display: block; }

/* theme-dark ------------------------------------------------------------------------------------------------------- */
.theme-dark .stepper .stepper-input,
.theme-dark .stepper .btn-step {
  color: #D8D8D8;
  background-color: rgba(76, 76, 76, .5);
  border: 1px solid #4C4C4C;
}
.theme-dark .stepper .btn-step:hover {
  background-color: rgba(110, 110, 110, .5);
}
.theme-dark .stepper-wrapper.stepper-type-button .stepper .stepper-item.count .stepper-count { color: #D8D8D8 }

.theme-dark .stepper-wrapper.error .stepper:after { border: 1px solid #C61212; }
.theme-dark .stepper-wrapper.error .stepper .stepper-input:focus { border-color: #4c4c4c; }



.theme-dark .stepper-wrapper.stepper-type-button.disabled .stepper .stepper-item.count .stepper-count { color: rgba(141, 141, 141, .3); }
.theme-dark .stepper-wrapper.disabled .stepper .stepper-input:not(:disabled),
.theme-dark .stepper-wrapper.disabled .stepper .btn-step:not(:disabled) {
  color: rgba(141, 141, 141, .3);
  background-color: rgba(141, 141, 141, .3);
  border-color: rgba(141, 141, 141, .3);
}

.theme-dark .stepper-wrapper .stepper .stepper-input:disabled,
.theme-dark .stepper-wrapper .stepper .btn-step:disabled {
  color: rgba(141, 141, 141, .3);
  background-color: rgba(141, 141, 141, .3);
  border-color: rgba(141, 141, 141, .3);
}

.theme-dark .stepper-wrapper.stepper-type-center .stepper .stepper-item:first-of-type .btn-step { border-right-color: transparent; }
.theme-dark .stepper-wrapper.stepper-type-center .stepper .stepper-item:last-of-type .btn-step { border-left-color: transparent; }
/*.theme-dark .stepper-wrapper.disabled .stepper .stepper-input:disabled,*/
/*.theme-dark .stepper-wrapper.disabled .stepper .btn-step:disabled,*/
/*.theme-dark .stepper .stepper-input:disabled,*/
/*.theme-dark .stepper .btn-step:disabled { opacity: .3 }*/

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 39. Step----------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.step {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.step ul {
  position: relative;
  display: block;
  width: 100%;
}
.step ul > li { position: relative; }

.step.step-count-2 ul > li { width: 50%; }

.step.step-count-3 ul > li { width: calc(100% / 4); }
.step.step-count-3 ul > li:nth-child(2) { width: calc(100% / 4 * 2); }

.step.step-count-4 ul > li { width: calc(100% / 6 * 2); }
.step.step-count-4 ul > li:first-of-type,
.step.step-count-4 ul > li:last-of-type { width: calc(100% / 6); }

.step.step-count-5 ul > li { width: calc(100% / 8 * 2); }
.step.step-count-5 ul > li:first-of-type,
.step.step-count-5 ul > li:last-of-type { width: calc(100% / 8); }

.step.step-count-6 ul > li { width: calc(100% / 10 * 2); }
.step.step-count-6 ul > li:first-of-type,
.step.step-count-6 ul > li:last-of-type { width: calc(100% / 10); }

.step.step-count-7 ul > li { width: calc(100% / 12 * 2); }
.step.step-count-7 ul > li:first-of-type,
.step.step-count-7 ul > li:last-of-type { width: calc(100% / 12); }

.step.step-count-8 ul > li { width: calc(100% / 14 * 2); }
.step.step-count-8 ul > li:first-of-type,
.step.step-count-8 ul > li:last-of-type { width: calc(100% / 14); }

.step ul > li:before,
.step ul > li:after {
  position: absolute;
  top: 12px;
  content: '';
  width: 50%;
  height: 4px;
  background-color: #d8d8d8;
}
.step ul > li:before { left: 0; }
.step ul > li:after { right: 0; }
.step ul > li:first-of-type:before { display: none; }
.step ul > li:first-of-type:after { width: calc(100% - 24px); }
.step ul > li:last-of-type:before { width: calc(100% - 24px); }
.step ul > li:last-of-type:after { display: none; }


.step ul > li.on:before,
.step ul > li.on:after,
.step ul > li.done:after,
.step ul > li.done:after,
.step ul > li.on + li:before,
.step ul > li.done + li:before { background-color: #E54E2B; }
.step ul > li.on > .step-item .step-circle,
.step ul > li.done > .step-item .step-circle { background-color: #E54E2B; }
.step ul > li.on > .step-item .step-circle:before {
  width: 18px;
  height: 18px;
  background-color: #E54E2B;
  border: 4px solid #f8f8f8;
}
.step ul > li.done > .step-item .step-circle:before {
  background-color: #E54E2B;
  border: 0;
}
.step ul > li.done > .step-item .step-circle:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-image: url('../images/icon-check.svg');
  background-size: 24px;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
}

/* Error */
.step ul > li.error > .step-item .step-circle,
.step ul > li.error > .step-item .step-circle:before { background-color: #E51313; }
.step ul > li.error > .step-item .step-circle:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-image: url('../images/icon-alert.svg');
  background-size: 24px;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
}
.step ul > li.error > .step-item .label { color: #E51313; }

/* 좌우 붙이기 */
.step ul > li:first-of-type { text-align: left; }
.step ul > li:last-of-type { text-align: right; }
.step ul > li:first-of-type > .step-item,
.step ul > li:last-of-type > .step-item { display: inline-block; }
.step ul > li:not(:first-of-type):not(:last-of-type) > .step-item { display: block; }

.step ul > li > .step-item {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  text-align: center;
  z-index: 2;
}
.step ul > li > .step-item .step-circle {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.step ul > li > .step-item .step-circle:before {
  position: absolute;
  display: inline-block;
  content: '';
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #d8d8d8;
  transform: translate(-50%, -50%);
}
.step ul > li > .step-item .label {
  margin-top: 12px;
  display: block;
  width: auto;
  font-size: 14px;
  color: #8D8D8D;
}
.step ul > li.on > .step-item .label,
.step ul > li.done > .step-item .label {
  color: #101314;
}

.step ul > li.on > .step-item .label { font-weight: 700; }

/* default hover */
.step ul > li:not(.error) > .step-item:hover .step-circle { background-color: #A7A7A7; }
.step ul > li:not(.error) > .step-item:hover .step-circle:before {
  width: 16px;
  height: 16px;
  background-color: #A7A7A7;
  border: 2px solid #f8f8f8;
}
/* default active */
.step ul > li:not(.error) > .step-item:active .step-circle { background-color: #8D8D8D; }
.step ul > li:not(.error) > .step-item:active .step-circle:before {
  width: 16px;
  height: 16px;
  background-color: #8D8D8D;
  border: 2px solid #f8f8f8;
}
/* on hover */
.step ul > li.on > .step-item:hover .step-circle { background-color: #531006; }
.step ul > li.on > .step-item:hover .step-circle:before {
  width: 18px;
  height: 18px;
  background-color: #531006;
  border: 4px solid #f8f8f8;
}
/* on active */
.step ul > li.on > .step-item:active .step-circle { background-color: #922412; }
.step ul > li.on > .step-item:active .step-circle:before {
  width: 12px;
  height: 12px;
  background-color: #922412;
  border: 4px solid #f8f8f8;
}
/* done hover */
.step ul > li.done > .step-item:hover .step-circle { background-color: #922412; }
.step ul > li.done > .step-item:hover .step-circle:before {
  border: 0;
  background-color: transparent;
}
/* done active */
.step ul > li.done > .step-item:active .step-circle { background-color: #531006; }
.step ul > li.done > .step-item:active .step-circle:before {
  border: 0;
  background-color: transparent;
}

/* more info */
.step ul + .more-info { margin-top: 32px; }
.step ul + .more-info .title + .sub-title { margin-top: 8px; }
.step ul + .more-info .title { color: #161616; }
.step ul + .more-info .sub-title { color: #4c4c4c; }



/* disabled */
.step.disabled { pointer-events: none; }
.step.disabled ul > li:before,
.step.disabled ul > li:after,
.step.disabled ul > li.on + li:before,
.step.disabled ul > li.done + li:before { background-color: rgba(202, 202, 202, .3); }
/*.step.disabled ul > li.on:before,*/
/*.step.disabled ul > li.done:before { background-color: #cacaca; }*/

.step.disabled ul > li > .step-item .step-circle {
  background-color: transparent;
}
.step.disabled ul > li > .step-item .step-circle:before,
.step.disabled ul > li.on > .step-item .step-circle:before,
.step.disabled ul > li.done > .step-item .step-circle:before,
.step.disabled ul > li.error > .step-item .step-circle:before {
  background-color: rgba(202, 202, 202, .3);
  width: 16px;
  height: 16px;
  border: 0;
}
.step.disabled ul > li > .step-item .step-circle:after,
.step.disabled ul > li.on > .step-item .step-circle:after,
.step.disabled ul > li.done > .step-item .step-circle:after,
.step.disabled ul > li.error > .step-item .step-circle:after {
  display: none;
}

.step.disabled ul > li > .step-item .label  {
  color: #cacaca;
  font-weight: 400;
}

.step.disabled ul + .more-info .title,
.step.disabled ul + .more-info .sub-title { color: #cacaca; }

/* theme-dark ------------------------------------------------------------------------------------------------------- */
.theme-dark .step ul > li:before,
.theme-dark .step ul > li:after,
.theme-dark .step ul > li + li:before,
.theme-dark .step ul > li > .step-item .step-circle:before { background-color: #2E3031; }

.theme-dark .step:not(.disabled) ul > li.on:before,
.theme-dark .step:not(.disabled) ul > li.on:after,
.theme-dark .step:not(.disabled) ul > li.done:after,
.theme-dark .step:not(.disabled) ul > li.done:after,
.theme-dark .step:not(.disabled) ul > li.on + li:before,
.theme-dark .step:not(.disabled) ul > li.done + li:before { background-color: #E54E2B; }

.theme-dark .step:not(.disabled) ul > li.on > .step-item .step-circle:before {
  background-color: #E54E2B;
  border-color: #101314;
}
.theme-dark .step:not(.disabled) ul > li.done > .step-item .step-circle:before { background-color: #E54E2B; }
.theme-dark .step:not(.disabled) ul > li.error > .step-item .step-circle,
.theme-dark .step:not(.disabled) ul > li.error > .step-item .step-circle:before { background-color: #E82B2B; }

/* hover: default */
.theme-dark .step ul > li:not(.error) > .step-item:hover .step-circle { background-color: #6e6e6e; }
.theme-dark .step ul > li:not(.error) > .step-item:hover .step-circle:before {
  background-color: #6e6e6e;
  border-color: #101314;
}
/* hover: on */
.theme-dark .step ul > li.on > .step-item:hover .step-circle { background-color: #924030; }
.theme-dark .step ul > li.on > .step-item:hover .step-circle:before {
  background-color: #924030;
  border-color: #101314;
}
/* hover: done */
.theme-dark .step ul > li.done > .step-item:hover .step-circle,
.theme-dark .step ul > li.done > .step-item:hover .step-circle:before { background-color: #924030; }

/* active: default */
.theme-dark .step ul > li:not(.error) > .step-item:active .step-circle { background-color: #8D8D8D; }
.theme-dark .step ul > li:not(.error) > .step-item:active .step-circle:before {
  background-color: #8D8D8D;
  border-color: #101314;
}
/* active: on */
.theme-dark .step ul > li.on > .step-item:active .step-circle { background-color: #65281F; }
.theme-dark .step ul > li.on > .step-item:active .step-circle:before {
  background-color: #65281F;
  border-color: #101314;
}
/* active: done */
.theme-dark .step ul > li.done > .step-item:active .step-circle,
.theme-dark .step ul > li.done > .step-item:active .step-circle:before { background-color: #65281F; }


.theme-dark .step ul > li > .step-item .label { color: #8d8d8d; }
.theme-dark .step ul > li.on > .step-item .label,
.theme-dark .step ul > li.done > .step-item .label { color: #d8d8d8; }
.theme-dark .step:not(.disabled) ul > li.error > .step-item .label { color: #E82B2B; }


/* more info */
.theme-dark .step ul + .more-info .title { color: #D8D8D8; }
.theme-dark .step ul + .more-info .sub-title { color: #CACACA; }


/* disabled */
.theme-dark .step.disabled { opacity: .3; }
.theme-dark .step.disabled ul > li:before,
.theme-dark .step.disabled ul > li:after,
.theme-dark .step.disabled ul > li.on + li:before,
.theme-dark .step.disabled ul > li.done + li:before,
.theme-dark .step.disabled ul > li > .step-item .step-circle:before { background-color: #8D8D8D; }

.theme-dark .step.disabled ul > li > .step-item .label,
.theme-dark .step.disabled ul + .more-info .title,
.theme-dark .step.disabled ul + .more-info .sub-title { color: #8D8D8D; }

/* Responsive ------------------------------------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .step ul + .more-info,
  .step ul > li > .step-item .label { display: none; }
  .step ul > li:first-of-type:after { width: calc(100% - 14px); }
  .step ul > li:last-of-type:before { width: calc(100% - 14px); }
}



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 40. Tab ----------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.tab {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.tab .tab-menu.tab-horizon:before {
  position: absolute;
  bottom: 0;
  left: -16px;
  right: -16px;
  height: 1px;
  content: '';
  background-color: #D8D8D8;
}
.tab .tab-menu > ul > li {
  display: inline-block;
  width: auto;
  height: auto;
}
.tab .tab-menu > ul > li > .tab-item {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #4C4C4C;
  line-height: 46px;
  padding: 0 4px;
  border-bottom: 2px solid transparent;
}
.tab.tab-md .tab-menu > ul > li > .tab-item { line-height: 46px; }
.tab.tab-lg .tab-menu > ul > li > .tab-item { line-height: 54px; }

.tab .tab-menu > ul > li > .tab-item:hover { color: #101314; }
.tab .tab-menu > ul > li.on > .tab-item {
  color: #E54E2B;
  border-color: #E54E2B;
}
.tab .tab-menu > ul > li.disabled > .tab-item {
  color: #CACACA;
  pointer-events: none;
}
.tab .tab-menu > ul > li + li { margin-left: 32px; }
.tab-contents { display: none; }
.tab-contents.on { display: block;}

.theme-dark .tab .tab-menu.tab-horizon:before { background-color: #4C4C4C; }
.theme-dark .tab .tab-menu > ul > li > .tab-item { color: #A7A7A7; }
.theme-dark .tab .tab-menu > ul > li.on > .tab-item {
  color: #D8D8D8;
  border-color: #E54E2B;
}
.theme-dark .tab .tab-menu > ul > li > .tab-item:hover { color: #CACACA; }
.theme-dark .tab .tab-menu > ul > li.disabled > .tab-item {
  color: #8D8D8D;
  opacity: .3;
}

.tab .tab-dropdown { display: none; }

@media (max-width: 599px) {
  .tab .tab-horizon { display: none; }
  .tab .tab-dropdown { display: block; }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 41. Tag ----------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.tag {
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: middle;
  border-radius: 20px;
  border: 1px solid #D8D8D8;
  background-color: #f8f8f8;
  overflow: hidden;
  font-size: 0;
  padding: 0 16px;
  color: #101314;
  white-space: nowrap;
}
.tag:not(.disabled) { cursor: pointer; }
.tag > .label {
  display: inline-block;
  font-size: 14px;
  line-height: 38px;
  vertical-align: middle;
}
.tag > .img-box + .label { margin-left: 4px; }

/* With Tools */
.tag.tag-with-tools {
  padding-right: 0;
}
.tag > .tools {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  padding: 0 8px;
}
.tag > .tools > .tools-item {
  display: inline-block;
  background-color: transparent;
  color: #A7A7A7;
}
.tag > .tools > .tools-item.error {
  display: none;
  color: #E51313;
}
.tag > .tools > .tools-item > i {
  font-size: 16px;
  line-height: inherit;
}
.tag > .tools > .tools-item.loading > i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../images/loading-icon-on_light.svg');
  background-size: 16px 16px;
}
.tag.loading:not(.done) > .tools > .tools-item.loading > img,
.tag.loading:not(.done) > .tools > .tools-item.loading > i { animation: rotating 1.2s linear infinite; }

.tag.loading:not(.done) > .tools .tools-item.remove { display: none; }
.tag.loading.done > .tools .tools-item.loading { display: none; }
.tag.loading.done > .tools .tools-item.remove { display: inline-block; }

/* With Image */
.tag.tag-with-img { padding-left: 3px; }
.tag.tag-with-img .img-box {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #E9E9E9;
}
.tag.tag-with-img .img-box:before {
  display: block;
  content: '';
  padding-top: 100%;
}
.tag.tag-with-img > .img-box > img {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.tag.tag-with-img > .img-box > i {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  font-size: 34px;
}

/* Error */
.tag.error > .tools > .tools-item.error { display: inline-block; }
.tag.error > .tools > .tools-item.error + .tools-item { margin-left: 4px; }
.tag.error { border-color: #E51313; }

/* hover */
.tag:hover { background-color: rgba(233, 233, 233, .5); }
/* active */
.tag:active {
  background-color: #f8f8f8;
  border-color: #101314;
}
/* selected */
.tag.on {
  border-color: #101314;
  background-color: #101314;
  color: #F8F8F8;
}
.tag.on > .img-box { color: #101314; }

/* disabled */
.tag.disabled {
  background-color: rgba(202, 202, 202, .3);
  color: #CACACA;
  border-color: transparent;
}
.tag.disabled .Licon:before { color: #CACACA; }
.tag.disabled > .tools > .tools-item {
  color: #CACACA;
  cursor: default;
}



/* Size - Large */
.tag.tag-lg { border-radius: 24px; }
.tag.tag-lg > .label { line-height: 46px; }
.tag.tag-lg.tag-with-img > .img-box {
  width: 40px;
  height: 40px;
}
.tag.tag-lg.tag-with-img > .img-box > i { font-size: 40px; }

/* Size - Medium */
.tag.tag-md { border-radius: 20px; }
.tag.tag-md > .label { line-height: 38px; }
.tag.tag-md.tag-with-img > .img-box {
  width: 34px;
  height: 34px;
}
.tag.tag-sm.tag-with-img > .img-box > i { font-size: 34px; }

/* Size - Small */
.tag.tag-sm { border-radius: 17px; }
.tag.tag-sm > .label { line-height: 32px; }
.tag.tag-sm.tag-with-img > .img-box {
  width: 28px;
  height: 28px;
}
.tag.tag-sm.tag-with-img > .img-box > i { font-size: 28px; }


/* Tag Group */
ul.tag-group {
  display: block;
  width: 100%;
  height: auto;
  font-size: 0;
}
ul.tag-group li {
  display: inline-block;
  float: none;
  width: auto;
  height: auto;
  font-size: 0;
  padding: 4px 2px;
}

/*
 * Theme Dark
 */
/* normal */
.theme-dark .tag {
  color: #D8D8D8;
  background-color: rgba(76, 76, 76, .5);
  border-color: #4C4C4C;
}
.theme-dark .tag.tag-with-img .img-box {
  color: #f8f8f8;
  background-color: #2e3031;
}
.theme-dark .tag > .tools > .tools-item { color: #4C4C4C; }
.theme-dark .tag > .tools > .tools-item.loading > i {
  background-image: url('../images/loading-icon-on_dark.svg');
}
/* hover */
.theme-dark .tag:not(.disabled):hover {
  background-color: rgba(110, 110, 110, .5);
  border-color: rgba(110, 110, 110, .5);
}
.theme-dark .tag:not(.disabled) > .tools > .tools-item.remove:hover { color: #6e6e6e; }

/* active */
.theme-dark .tag:active {
  background-color: #6E6E6E;
  border-color: transparent;
}
.theme-dark .tag > .tools > .tools-item.remove:active { color: #8D8D8D; }

/* selected */
.theme-dark .tag.on {
  background-color: #E9E9E9;
  color: #101314;
  border-color: transparent;
}
.theme-dark .tag.on .img-box {
  background-color: #2E3031;
}

/* disabled */
.theme-dark .tag.disabled {
  background-color: rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
  border-color: transparent;
}
.theme-dark .tag.disabled.tag-with-img .img-box {
  color: rgba(141, 141, 141, .3);;
  background-color: rgba(141, 141, 141, .3);;
}
.theme-dark .tag.disabled > .tools > .tools-item { color: rgba(141, 141, 141, .3); }

/* loading */
.theme-dark .tag.loading > .tools > .tools-item.loading {
  color: rgba(93, 106, 113, .3);
}

/* error */
.theme-dark .tag.error {
  border-color: #D63F36;
}
.theme-dark .tag.error > .tools > .tools-item.error { color: #D63F36; }
.theme-dark .tag.error:hover { border-color: #D63F36 }


/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 42. Text Area ----------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.textarea {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.textarea label {
  display: block;
  width: 100%;
  color: #4C4C4C;
  font-size: 13px;
  margin-bottom: 8px;
}
.textarea textarea {
  display: block;
  width: 100%;
  font-size: 14px;
  color: #101314;
  caret-color: #e54e2b;
  padding: 12px 16px;
  background-color: #F8F8F8;
  border: 1px solid #D8D8D8;
  border-radius: 2px;
}
.textarea textarea::placeholder {
  color: #8D8D8D;
}
.textarea .message-box {
  position: relative;
  display: block;
  width: 100%;
  height: 13px;
  margin-top: 6px;
  padding-right: 100px;
}
.textarea .message-box .error-message {
  display: none;
  font-size: 11px;
  color: #E51313;
}
.textarea .message-box .tools {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0;
}
.textarea .message-box .tools .count {
  color: #6E6E6E;
  font-size: 11px;
}
.textarea .message-box .tools .clear {
  position: relative;
  color: #4C4C4C;
  padding-left: 17px;
  font-size: 11px;
  background-color: transparent;
}
.textarea .message-box .tools .clear:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 8px;
  width: 1px;
  height: 8px;
  background-color: #d8d8d8;
  transform: translateY(-50%);
}


/* hover */
.textarea textarea:hover { background-color: rgba(233, 233, 233, .5); }
/* active */
.textarea textarea:focus { border-color: #101314; }
/* error */
.textarea.error textarea { border-color: #E51313; }
.textarea.error .message-box .error-message { display: block; }

/* disabled */
.textarea.disabled { pointer-events: none; }
.textarea.disabled label { color: #CACACA; }
.textarea.disabled textarea {
  border-color: transparent;
  background-color: rgba(202, 202, 202, .3);
  color: #cacaca;
}
.textarea.disabled textarea::placeholder { color: #cacaca }
.textarea.disabled .message-box .error-message { display: none; }
.textarea.disabled .message-box .tools .count,
.textarea.disabled .message-box .tools .clear { color: #CACACA; }
.textarea.disabled .message-box .tools .clear:before { background-color: #CACACA; }

/*
 * Theme Dark
 */
.theme-dark .textarea label { color: #A7A7A7; }
.theme-dark .textarea textarea {
  background-color: rgba(76, 76, 76, .5);
  border-color: transparent;
  color: #D8D8D8;
}
.theme-dark .textarea textarea::placeholder { color: #6E6E6E; }
.theme-dark .textarea .message-box .tools .count { color: #6E6E6E; }
.theme-dark .textarea .message-box .tools .clear { color: #8D8D8D; }
/* hover */
.theme-dark .textarea textarea:hover { background-color: rgba(110, 110, 110, .5); }
/* active */
.theme-dark .textarea textarea:focus { border-color: #6E6E6E; }
/* error */
.theme-dark .textarea.error textarea { border-color: #E82B2B; }


/* disabled */
.theme-dark .textarea.disabled label { color: #A7A7A7; }
.theme-dark .textarea.disabled textarea {
  border-color: transparent;
  background-color: rgba(141, 141, 141, .3);
  color: #8D8D8D;
}
.theme-dark .textarea.disabled .message-box .tools .count { color: rgba(141, 141, 141, .3); }
.theme-dark .textarea.disabled .message-box .tools .clear { color: rgba(141, 141, 141, .3); }
.theme-dark .textarea.disabled .message-box .tools .clear:before { background-color: rgba(76, 76, 76, .3); }



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 43. Toggle -------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.toggle-group {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.toggle-group .toggle-group-label {
  padding-bottom: 16px;
  border-bottom: 1px solid #D8D8D8;
  font-weight: 700;
  color: #4C4C4C;
}
.toggle-group .toggle-group-label + ul.toggles { padding-top: 16px; }
.toggle-group ul.toggles li + li { margin-top: 12px; }

.toggle {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  clear: both;
}
.toggle:after {
  content: '';
  display: table;
  clear: both;
}
.toggle > .label {
  display: inline-block;
  font-size: 14px;
  color: #101314;
  padding: 4px 0;
  float: left;
}
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  float: right;
}
.toggle .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background-color: #8D8D8D;
  transition: .15s;
}
.toggle .switch .slider:hover { background-color: #6E6E6E; }
.toggle .switch .slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #F8F8F8;
  border-radius: 50%;
  transition: .15s;
}

/* Toggle Small */
.toggle-group.toggle-group-sm .toggle .label,
.toggle.toggle-sm .label { padding: 0; }
.toggle-group.toggle-group-sm .toggle .switch,
.toggle.toggle-sm .switch {
  width: 32px;
  height: 16px;
}
.toggle-group.toggle-group-sm .toggle .switch .slider:before,
.toggle.toggle-sm .switch .slider:before {
  width: 10px;
  height: 10px;
}
.toggle-group.toggle-group-sm .toggle .switch input:checked + .slider:before,
.toggle.toggle-sm .switch input:checked + .slider:before { transform: translateX(16px); }

/* Checked */
.toggle .switch input:checked + .slider { background-color: #E54E2B; }
.toggle .switch input:checked + .slider:before { transform: translateX(24px); }
.toggle .switch input:checked + .slider:hover { background-color: #922412; }

/* Disabled */
.toggle.disabled { pointer-events: none; }
.toggle.disabled .label { color: #CACACA; }
.toggle.disabled .switch input:checked + .slider,
.toggle.disabled .switch .slider { background-color: rgba(202, 202, 202, .3); }
.toggle.disabled .switch .slider:before { background-color: #CACACA; }


/*
 * Theme Dark
 */
.theme-dark .toggle-group .toggle-group-label {
  color: #E9E9E9;
  border-color: #4C4C4C;
}
.theme-dark .toggle .label { color: #D8D8D8; }
.theme-dark .toggle .switch .slider { background-color: #4C4C4C; }
.theme-dark .toggle .switch .slider:hover { background-color: #6E6E6E; }
.theme-dark .toggle .switch input:checked + .slider { background-color: #E54E2B; }
.theme-dark .toggle .switch input:checked + .slider:hover { background-color: #9D3A2A; }
.theme-dark .toggle.disabled .label { color: rgba(141, 141, 141, .3); }
.theme-dark .toggle.disabled .switch input:checked + .slider,
.theme-dark .toggle.disabled .switch .slider { background-color: rgba(141, 141, 141, .3); }
.theme-dark .toggle.disabled .switch .slider:before { background-color: rgba(141, 141, 141, .3); }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 44. Tooltip ------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.tooltip-container {
  position: relative;
}
.tooltip-container:not(.tooltip-click):hover .tooltip {
  display: inline-block;
}
.tooltip-container.tooltip-click .tooltip-click-trigger { cursor: pointer; }
.tooltip-container.tooltip-click.on .tooltip {
  display: inline-block;
}
.tooltip {
  position: absolute;
  display: none;
  width: auto;
  height: auto;
  max-width: 256px;
  background-color: #17282E;
  color: #F8F8F8;
  font-size: 13px;
  border-radius: 2px;
  font-weight: 400;
  letter-spacing: calc((-15 / 1000) * 1em);
  line-height: 21px;
  z-index: 99;
  text-align: left;
}
.tooltip:after {
  content: '';
  width: 0;
  height: 0;
  display: inline-block;
  position: absolute;
}

/* position - bottom */
.tooltip-container.tooltip-bottom .tooltip {
  margin-top: 10px;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}
.tooltip-container.tooltip-bottom .tooltip:after {
  left: 50%;
  top: -10px;
  margin-left: -5px;
  border-style: solid;
  border-width: 5px 5px 5px 5px;
  border-color: transparent transparent #17282E transparent;
}
.tooltip-container.tooltip-bottom.left .tooltip {
  left: 0;
  right: auto;
  transform: none;
}
.tooltip-container.tooltip-bottom.left .tooltip:after {
  left: 12px;
  right: auto;
}
.tooltip-container.tooltip-bottom.right .tooltip {
  left: auto;
  right: 0;
  transform: none;
}
.tooltip-container.tooltip-bottom.right .tooltip:after {
  left: auto;
  right: 12px;
}


/* position - top */
.tooltip-container.tooltip-top .tooltip {
  margin-bottom: 10px;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
}
.tooltip-container.tooltip-top .tooltip:after {
  left: 50%;
  bottom: -10px;
  margin-left: -5px;
  border-style: solid;
  border-width: 5px 5px 5px 5px;
  border-color: #17282E transparent transparent transparent;
}
.tooltip-container.tooltip-top.left .tooltip {
  left: 0;
  right: auto;
  transform: none;
}
.tooltip-container.tooltip-top.left .tooltip:after {
  left: 12px;
  right: auto;
}
.tooltip-container.tooltip-top.right .tooltip {
  left: auto;
  right: 0;
  transform: none;
}
.tooltip-container.tooltip-top.right .tooltip:after {
  left: auto;
  right: 12px;
}


/* position - left */
.tooltip-container.tooltip-left .tooltip {
  margin-right: 10px;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}
.tooltip-container.tooltip-left .tooltip:after {
  top: 50%;
  right: -10px;
  margin-top: -5px;
  border-style: solid;
  border-width: 5px 5px 5px 5px;
  border-color: transparent transparent transparent #17282E;
}
.tooltip-container.tooltip-left.top .tooltip {
  top: 0;
  bottom: auto;
  transform: none;
}
.tooltip-container.tooltip-left.top .tooltip:after {
  bottom: auto;
  top: 12px;
}
.tooltip-container.tooltip-left.bottom .tooltip {
  bottom: 0;
  top: auto;
  transform: none;
}
.tooltip-container.tooltip-left.bottom .tooltip:after {
  top: auto;
  bottom: 12px;
}


/* position - right */
.tooltip-container.tooltip-right .tooltip {
  margin-left: 10px;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}
.tooltip-container.tooltip-right .tooltip:after {
  top: 50%;
  left: -10px;
  margin-top: -5px;
  border-style: solid;
  border-width: 5px 5px 5px 5px;
  border-color: transparent #17282E transparent transparent;
}
.tooltip-container.tooltip-right.top .tooltip {
  top: 0;
  bottom: auto;
  transform: none;
}
.tooltip-container.tooltip-right.top .tooltip:after {
  bottom: auto;
  top: 12px;
}
.tooltip-container.tooltip-right.bottom .tooltip {
  bottom: 0;
  top: auto;
  transform: none;
}
.tooltip-container.tooltip-right.bottom .tooltip:after {
  top: auto;
  bottom: 12px;
}

/* style - icon */
.tooltip-container.tooltip-top.tooltip-icon .tooltip { margin-bottom: 9px; }
.tooltip-container.tooltip-right.tooltip-icon .tooltip { margin-left: 9px; }
.tooltip-container.tooltip-bottom.tooltip-icon .tooltip { margin-top: 9px; }
.tooltip-container.tooltip-left.tooltip-icon .tooltip { margin-right: 9px; }
.tooltip-container.tooltip-icon .icon { display: inline-block; }
.tooltip-container.tooltip-icon .tooltip {
  padding: 5px 16px;
}

/* style - interactive */
.tooltip-container.tooltip-top.tooltip-interactive .tooltip { margin-bottom: 13px; }
.tooltip-container.tooltip-right.tooltip-interactive .tooltip { margin-left: 13px; }
.tooltip-container.tooltip-bottom.tooltip-interactive .tooltip { margin-top: 13px; }
.tooltip-container.tooltip-left.tooltip-interactive .tooltip { margin-right: 13px; }
.tooltip-container.tooltip-interactive .tooltip {
  width: 256px;
  padding: 16px;
}
.tooltip-container.tooltip-interactive .tooltip > .tooltip-description + .tooltip-tools { margin-top: 16px; }
.tooltip-container.tooltip-interactive .tooltip > .tooltip-tools > ul > li > .link { line-height: 34px; }

/* style - definition */
.tooltip-container.tooltip-top.tooltip-definition .tooltip { margin-bottom: 9px; }
.tooltip-container.tooltip-right.tooltip-definition .tooltip { margin-left: 9px; }
.tooltip-container.tooltip-bottom.tooltip-definition .tooltip { margin-top: 9px; }
.tooltip-container.tooltip-left.tooltip-definition .tooltip { margin-right: 9px; }
.tooltip-container.tooltip-definition .tooltip {
  width: 160px;
  padding: 8px 16px;
}
.tooltip-container.tooltip-definition > span { border-bottom: 1px dotted; }
.tooltip-container.tooltip-definition:hover > span { border-color: #E54E2B; }


/*
 * Theme Dark
 */
.theme-dark .tooltip {
  color: #101314;
  background-color: #DCDFE0;
}
.theme-dark .tooltip-container.tooltip-bottom .tooltip:after { border-color: transparent transparent #DCDFE0 transparent; }
.theme-dark .tooltip-container.tooltip-top .tooltip:after { border-color: #DCDFE0 transparent transparent transparent; }
.theme-dark .tooltip-container.tooltip-left .tooltip:after { border-color: transparent transparent transparent #DCDFE0; }
.theme-dark .tooltip-container.tooltip-right .tooltip:after { border-color: transparent #DCDFE0 transparent transparent; }



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 45. Browser Tab --------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.browser-tab {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-right: 120px;
}
.browser-tab .tabs {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.browser-tab .tabs ul {
  display: block;
  width: 100%;
  height: auto;
  font-size: 0;
}
.browser-tab .tabs ul::-webkit-scrollbar { display: none; }
.browser-tab .tabs ul li {
  display: inline-block;
  width: auto;
  float: none;
}
.browser-tab .tabs ul li + li {
  margin-left: 2px;
}
.browser-tab .tabs ul li.on .tab {
  background-color: #101314;
  color: #F8F8F8;
}
.browser-tab .tabs ul li.on .tab .tools .btn { color: #F8F8F8; }
.browser-tab .tabs ul li.lock .tab .tools .btn.tab-lock { color: #E54E2B; }
.browser-tab .tabs .tab:hover {
  background-color: #8F989E;
}
.browser-tab .tabs ul li.disabled .tab {
  background-color: rgba(202, 202, 202, .3);
  color: #CACACA;
  pointer-events: none;
}
.browser-tab .tabs ul li.disabled .tab .tools .btn { color: #CACACA; }
.browser-tab .tabs .tab {
  padding: 0 14px 0 16px;
  background-color: #B6BDC1;
  border-radius: 10px 0 0 0;
  color: #101314;
  font-size: 0;
  line-height: 40px;
  cursor: pointer;
}
.browser-tab > .tabs .tab > span {
  vertical-align: middle;
  font-size: 14px;
}
.browser-tab > .tabs .tab > .tools {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: normal;
  font-size: 0;
  margin-left: 8px;
  vertical-align: middle;
}
.browser-tab > .tabs .tab > .tools .btn + .btn {
  margin-left: 4px;
}
.browser-tab .tabs .tab button.btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 0;
}
.browser-tab .tabs .tab button.btn .icon i {
  font-size: 16px;
}
.browser-tab > .tools {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0;
}
.browser-tab > .tools > .navigator {
  display: inline-block;
  line-height: 38px;
  border: 1px solid #B9BEC2;
  background-color: #DCDFE0;
}
.browser-tab > .tools > .navigator > ul { overflow: visible; }
.browser-tab > .tools > .navigator > ul > li {
  position: relative;
  display: inline-block;
  float: none;
  font-size: 0;
  width: auto;
  padding: 0 8px;
}
.browser-tab > .tools > .navigator > ul > li + li:not(:last-of-type):before {
  position: absolute;
  content: '';
  display: inline-block;
  width: 1px;
  height: 18px;
  top: 50%;
  left: 0;
  background-color: #B9BEC2;
  transform: translateY(-50%);
}
.browser-tab > .tools > .navigator > ul > li:last-of-type { border-left: 1px solid #B9BEC2; }
.browser-tab > .tools > .navigator .btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 0;
}
.browser-tab > .tools > .navigator .btn .icon { color: #101314; }
.browser-tab > .tools > .navigator .btn .icon i {
  font-size: 24px;
}
.browser-tab > .tools > .navigator .dropdown:after { display: none; }
.browser-tab > .tools > .navigator .dropdown > .dropdown-menu {
  top: 24px;
  right: 0;
  left: auto;
}
.browser-tab > .tools > .navigator .btn:disabled { opacity: .3; }

/**
 * Theme Dark
 */
.theme-dark .browser-tab > .tabs .tab {
  background-color: #1E2629;
  color: #D8D8D8;
}
.theme-dark .browser-tab > .tabs .tab .tools .btn { color: #D8D8D8; }
.theme-dark .browser-tab > .tabs .tab:hover { background-color: #233339; }
.theme-dark .browser-tab > .tabs > ul > li.on .tab {
  background-color: #EFEFF0;
  color: #101314;
}
.theme-dark .browser-tab > .tabs > ul > li.on .tab .tools .btn { color: #101314; }
.theme-dark .browser-tab > .tabs > ul > li.lock .tab .tools .btn.tab-lock { color: #E54E2B; }
.theme-dark .browser-tab > .tabs > ul > li.disabled .tab {
  background-color: rgba(141, 141, 141, .3);
  color: rgba(141, 141, 141, .3);
}
.theme-dark .browser-tab > .tabs > ul > li.disabled .tab .tools .btn { color: rgba(141, 141, 141, .3); }

.theme-dark .browser-tab > .tools > .navigator {
  background-color: #1d1f21;
  border: 1px solid #4c4c4c;
}
.theme-dark .browser-tab > .tools > .navigator > ul > li:last-of-type { border-left: 1px solid #4c4c4c; }
.theme-dark .browser-tab > .tools > .navigator > ul > li + li:not(:last-of-type):before { background-color: #4c4c4c; }
.theme-dark .browser-tab > .tools > .navigator .btn .icon { color: #D8D8D8; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 46. Legend -------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.legend-container {
  padding: 12px 0;
  display: block;
  width: 100%;
  text-align: right;
}
.legend-container.left,
.legend-container.left .legend.legend-vertical { text-align: left; }
.legend-container.right,
.legend-container.right .legend.legend-vertical { text-align: right; }
.legend {
  position: relative;
  display: inline-block;
  width: auto;
  text-align: right;
}
.legend.legend-vertical {
  float: none;
  display: block;
  width: 100%;
}

.legend li,
.legend.legend-horizon li {
  display: inline-block;
  width: auto;
  font-size: 0;
  float: none;
}
.legend.legend-vertical li {
  display: block;
  width: 100%;
}
.legend.legend-vertical li .legend-item {
  margin-right: 0;
  margin-bottom: 2px;
}
.legend.legend-vertical li .legend-item:after { display: none; }
.legend.legend-vertical li:last-child .legend-item { margin-bottom: 0; }

.legend-item {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  padding: 3px 0;
}
.legend.legend-horizon li .legend-item {
  margin-right: 12px;
}
.legend li .legend-item:after {
  content: '';
  border-right: 1px solid #d8d8d8;
  position: absolute;
  top: 50%;
  right: -6px;
  height: 14px;
  transform: translateY(-50%);
}
.legend li:last-child .legend-item { margin-right: 0; }
.legend li:last-child .legend-item:after { display: none; }
.legend-item .legend-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 4px;
}
.legend-item .legend-label {
  color: #101314;
  font-size: 12px;
  letter-spacing: calc((-8 / 1000) * 1em);
  vertical-align: middle;
}
.legend-item.legend-edit {
  background-color: transparent;
  color: #101314;
  font-size: 0;
  padding: 0;
}
.legend-item.legend-edit i { font-size: 20px; }
.legend-item.legend-edit i:before,
.legend-item.legend-edit i:after { color: #101314; }

.theme-dark .legend-item .legend-label { color: #D8D8D8; }
.theme-dark .legend li .legend-item:after { border-right: 1px solid #4C4C4C; }
.theme-dark .legend-item.legend-edit { color: #D8D8D8; }
.theme-dark .legend-item.legend-edit i:before,
.theme-dark .legend-item.legend-edit i:after { color: #D8D8D8; }
/**
 * Color / Negative
 */
.negative01 { background-color: #ffea46;}
.negative02 { background-color: #f8be00;}
.negative03 { background-color: #fca05e;}
.negative04 { background-color: #ff93be;}
.negative05 { background-color: #c17330;}
.negative06 { background-color: #f04d8e;}
.negative07 { background-color: #ff5b2f;}
.negative08 { background-color: #e51313;}
.negative09 { background-color: #780116;}
.negative10 { background-color: #78016f;}

.theme-dark .negative01 { background-color: #ffec59;}
.theme-dark .negative02 { background-color: #f9c51a;}
.theme-dark .negative03 { background-color: #fcaa6e;}
.theme-dark .negative04 { background-color: #ff9ec5;}
.theme-dark .negative05 { background-color: #c78145;}
.theme-dark .negative06 { background-color: #f25f9a;}
.theme-dark .negative07 { background-color: #ff6c44;}
.theme-dark .negative08 { background-color: #ea4242;}
.theme-dark .negative09 { background-color: #933445;}
.theme-dark .negative10 { background-color: #93348c;}

.positive01 { background-color: #95e2da; }
.positive02 { background-color: #aae059; }
.positive03 { background-color: #61d682; }
.positive04 { background-color: #35d0ff; }
.positive05 { background-color: #8595ea; }
.positive06 { background-color: #2675ff; }
.positive07 { background-color: #562be5; }
.positive08 { background-color: #007669; }
.positive09 { background-color: #000d9d; }
.positive10 { background-color: #004840; }

.theme-dark .positive01 { background-color: #aae8e2; }
.theme-dark .positive02 { background-color: #bbe67a; }
.theme-dark .positive03 { background-color: #81de9b; }
.theme-dark .positive04 { background-color: #5ddaff; }
.theme-dark .positive05 { background-color: #9eaaee; }
.theme-dark .positive06 { background-color: #5191ff; }
.theme-dark .positive07 { background-color: #7855ea; }
.theme-dark .positive08 { background-color: #339187; }
.theme-dark .positive09 { background-color: #333db1; }
.theme-dark .positive10 { background-color: #428345; }

.chart01 { background-color: #e54e2b; }
.chart02 { background-color: #2b73e5; }
.chart03 { background-color: #e59d2b; }
.chart04 { background-color: #44be66; }
.chart05 { background-color: #f04d8e; }
.chart06 { background-color: #562be5; }
.chart07 { background-color: #bd6424; }
.chart08 { background-color: #007669; }
.chart09 { background-color: #b235bc; }
.chart10 { background-color: #000d9d; }
.chart11 { background-color: #780116; }
.chart12 { background-color: #004840; }
.chart13 { background-color: #78016f; }
.chart14 { background-color: #6a78c3; }
.chart15 { background-color: #1e8cad; }
.chart16 { background-color: #78aa2d; }

.theme-dark .chart01 { background-color: #e54e2b; }
.theme-dark .chart02 { background-color: #4181e8; }
.theme-dark .chart03 { background-color: #e8a741; }
.theme-dark .chart04 { background-color: #57c576; }
.theme-dark .chart05 { background-color: #f25f9a; }
.theme-dark .chart06 { background-color: #7855ea; }
.theme-dark .chart07 { background-color: #ca8350; }
.theme-dark .chart08 { background-color: #339187; }
.theme-dark .chart09 { background-color: #c25dca; }
.theme-dark .chart10 { background-color: #333db1; }
.theme-dark .chart11 { background-color: #933445; }
.theme-dark .chart12 { background-color: #336d66; }
.theme-dark .chart13 { background-color: #93348c; }
.theme-dark .chart14 { background-color: #8893cf; }
.theme-dark .chart15 { background-color: #4ba3be; }
.theme-dark .chart16 { background-color: #93bb57; }



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 47. Animation ----------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes skeleton {
  from { left: 0; }
  to { left: 100%; }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 48. Pattern: Empty States ----------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.empty-states-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
}
.empty-states {
  display: inline-block;
  width: 240px;
  height: auto;
  text-align: center;
}
.empty-states .icon-area {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #E9E9E9;
}
.empty-states .icon-area i {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 56px;
  transform: translate(-50%, -50%);
}
.empty-states .icon-area i:before,
.empty-states .icon-area i:after {
  color: #4C4C4C;
}
.empty-states .icon-area img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.empty-states .icon-area + .message-area { margin-top: 20px; }
.empty-states .message-area + .btn-area { margin-top: 20px; }

.empty-states.error .icon-area { background-color: rgba(229, 19, 19, .1); }
.empty-states.error .icon-area i:before,
.empty-states.error .icon-area i:after { color: #E51313; }

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 48. Pattern: Login -----------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.popup .login-panel {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  padding: 0;
}
.login-panel-wrapper {
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  /*background-image: url('../images/sample-photo-1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;*/
}
.login-panel {
  display: block;
  width: 420px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}
.login-panel.fixed {
  position: relative;
  width: 100%;
  height: auto;
  top: auto;
  left: auto;
  transform: none;
  padding: 0;
}
.login-panel .title-area {
  display: block;
  width: 100%;
  height: auto;
}
.login-panel .title-area > .logo {
  display: block;
  height: 20px;
  width: auto;
  background-image: url('../images/seah-logo_color.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.login-panel .title-area + .form-area { margin-top: 32px; }
.login-panel .form-area + .more-area { margin-top: 48px; }
.login-panel .more-area,
.popup .more-area {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
}

.login-panel .more-area .center-wrapper,
.popup .more-area .center-wrapper {
  display: inline-block;
}
.login-panel .more-area .center-wrapper > ul > li,
.popup .more-area .center-wrapper > ul > li {
  position: relative;
  display: inline-block;
  width: auto;
}
.login-panel .more-area .center-wrapper > ul > li > a,
.popup .more-area .center-wrapper > ul > li > a {
  /*color: #5D6A71;*/
  font-size: 12px;
  vertical-align: middle;
}
.login-panel .more-area .center-wrapper > ul > li + li:before,
.popup .more-area .center-wrapper > ul > li + li:before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 1px;
  height: 8px;
  background-color: #B6BDC1;
  margin: 0 12px;
}
.popup .popup-tools.popup-login-more {
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #DCDFE0;
}

.theme-dark .login-panel .title-area > .logo { background-image: url('../images/seah-logo.svg'); }
.theme-dark .popup .popup-tools.popup-login-more {
  background-color: transparent;
}

@media (max-width: 599px) {
  .login-panel { width: 100%; }
}



/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*= 49. Pattern: Sign Up ---------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
.signup {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.signup .title-area { border-bottom: 1px solid #101314; }




.theme-dark .signup .title-area { border-bottom: 1px solid #D8D8D8; }