html {
    font-size:16px;  
    height: 100%;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    background: #f4f4f4;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 100%;
    padding-bottom:160px;
    position:relative;
    -webkit-font-smoothing: antialiased;
}

body.no-footer-padding {
    padding-bottom:0;
}

a:hover { color:#304DF0; text-decoration: none; }

.have-insight { color:#1D6089; }

img.sm { width:32px; height:32px; }
img.error { background:#eee; }

i.loading-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(/img/loading.png) no-repeat center;
    background-size: 12px 12px;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 4px; }

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

.m-r-minus { margin-right:-6px; }
.m-r-minus-sm { margin-right:-12px; }
.m-r-minus-xs { margin-right:-16px; }

hr { border-color:#DEDEDE; margin-top:1rem; margin-bottom:1rem; }

.bold { font-weight:bold; }

.blue { color:#3240F0; }
.red { color:#ec474e; }

.points { color:#b47f85; }
.tooltip { font-size:13px; font-family: inherit; }
.tooltip-inner { max-width: 350px !important; word-break: keep-all; }

.text-muted { }
.text-muted strong { color:#333; }

.text-medium { font-weight:400 !important; }
.text-normal { font-weight:normal !important; }
.text-strong { font-weight:bold !important; }

.text-point { color:#000; }
.text-underline { text-decoration: underline; }
.text-border-bottom { border-bottom:1px solid #000; padding-bottom:0px; }

.lh-xs { line-height:1.4; }
.lh-sm { line-height:1.7; }
.lh-md { line-height:1.95; }

h3.main-title { font-size: 18px; font-weight: bold; color:#000; }

/* DEFAULT COLOR */
.btn {
    position:relative;
    font-weight:500;
}

.btn-block:last-child {
    margin-bottom:0 !important;
}

.btn {
    font-size:0.8rem;
    line-height:2.2rem;
}

.btn-sm {
    font-size:0.75rem;
}

.btn-low {
    padding-left:5px;
    padding-right:5px;
    line-height: 26px;
    height:28px;
}
.btn-low-md {
    line-height:30px;
    height:32px;
}

.btn-link {
    padding-left:0; padding-right:0;
    color:#000;
    text-decoration:none;
}
.btn-link.btn-low { line-height:28px; }

.btn-link:hover, .btn-link:focus, .btn-link:active {
    color:#3240F0;
    text-decoration: none;;
}

.btn-link .material-icons:first-child {
    margin-left:-4px;
}

.btn-link-border-bottom {
    border-bottom:1px solid #000;
    border-radius: 0;
    line-height: 18px;
}
.btn-link-border-bottom:hover, .btn-link-border-bottom:focus, .btn-link-border-bottom:active {    
    border-bottom:1px solid #3240f0;
}

.btn-go-link { color:#B4B4B4; padding:0; line-height:inherit; box-shadow:none; }
.btn-go-link:active { box-shadow:none; }
.btn-go-link:after { display:inline-block; font-family: "Material Icons"; content: "chevron_right"; font-size: 20px; line-height: 20px; vertical-align: middle; margin-top: -2px; }
.btn-go-link:hover { color:#3240F0; }

.btn-default {
    text-align:left;
    color:#000;
    fill:#000;
    border:1px solid #C4C4C4;
    background:#fff;
    box-shadow:0px 1px 2px rgba(0,0,0,0.04);
    border-radius:4px;
    transition:0.1s;
}
    
.btn-default.open:not(.disabled),
.btn-default:hover:not(.disabled),
.btn-default:focus:not(.disabled) {
    color:#304DF0;
    fill:#304DF0;
    border-color:#304DF0;
    background-color:#fff;
}

.btn-default:active,
.btn-default:active:hover,
.btn-default:active:focus {
    color:#304DF0;
    fill:#304DF0;
    border-color:#304DF0;
    background-color:#f4f4f4;
    box-shadow:inset 0px 1px 1px rgba(0,0,0,0.1);
}

.btn-default.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-default.active, 
.open>.dropdown-toggle.btn-default,
.open>.dropdown-toggle.btn-default:hover,
.open>.dropdown-toggle.btn-default:focus { background:#fafafa; /*border-bottom-left-radius: 0; border-bottom-right-radius: 0;*/ }
/*
.dropdown.open>.dropdown-toggle.btn-default,
.dropdown.open>.dropdown-toggle.btn-default:hover,
.dropdown.open>.dropdown-toggle.btn-default:focus { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }*/

.bootstrap-select.btn-group .dropdown-menu { margin-top: 0; margin-top:-1px; border-top-left-radius: 0; border-top-right-radius: 0; border-color:#adadad; }

.btn-primary,
.btn-primary:visited,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary:active:hover {
    background-color:#304DF0;
    border:1px solid #304DF0;
    text-decoration:none;
}

.btn-primary:active:hover, 
.btn-primary.active:hover, 
.open>.dropdown-toggle.btn-primary:hover, 
.btn-primary:active:focus, 
.btn-primary.active:focus, 
.open>.dropdown-toggle.btn-primary:focus, 
.btn-primary:active.focus, 
.btn-primary.active.focus, 
.open>.dropdown-toggle.btn-primary,
.open>.dropdown-toggle.btn-primary.focus {   background-color:#304DF0; }

.btn-primary[disabled],
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary[disabled]:focus:active,
.btn-primary.disabled,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled:focus:active {
    background: #eee;
    color: #999;
    border-color: transparent;
}


.btn-danger,
.btn-danger:visited,
.btn-danger:active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active:focus {
    background-color:#f03623;
    border:1px solid #f03623;
}

.btn-danger[disabled],
.btn-danger[disabled]:hover,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:active,
.btn-danger[disabled]:focus:active,
.btn-danger.disabled,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active,
.btn-danger.disabled:focus:active {
    background: #eee;
    color: #999;
    border-color: transparent;
}

.btn-analysis,
.btn-analysis:visited,
.btn-analysis:active,
.btn-analysis:hover,
.btn-analysis:focus,
.btn-analysis:active:focus {
    background-color:#FFDD00;
    border:1px solid #A69000;
}

.btn-analysis.ing,
.btn-analysis.ing:visited,
.btn-analysis.ing:active,
.btn-analysis.ing:hover,
.btn-analysis.ing:focus,
.btn-analysis.ing:active:focus {
    background-color:#00F359;
    border:1px solid #0AAE98;
}


.btn-block+.btn-block { margin-top:10px; }

.btn svg {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    margin-top: -5px;
    margin-left: -5px;
}

.btn .right-icon {
    position:absolute;
    right:6px;
    top:0;
}

.btn .right-icon .material-icons {
    font-size: 18px;
    margin-top: -3px;
    margin-left: -2px;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; opacity:0.4; }

.btn + .sep { display:inline-block; border-right:1px solid #eee; vertical-align: middle; height:18px; margin-left:5px; margin-right:5px; }
.btn + .sep.point { border-color:#cecece; }

.btn.have-dropdown-icon { position:relative; padding-right:34px !important; }
.btn.have-dropdown-icon .dropdown-icon { position:absolute; right:0; border-left:1px solid rgba(0,0,0,0.2); }

/* icon */
.material-icons.mini { font-size:13px; }

/* bg */
.bg-light-gray { background:#f4f4f4; }
.bg-note { background:#fff4d4; }

.category { display:inline-block; width:16px; height:16px; border-radius:2px; vertical-align: middle; margin-right:4px; }
.category-진보 {  background:rgb(48, 77, 240); border-color:rgb(48, 77, 240); color:#fff; }
.category-중도진보 {  background:rgb(0, 227, 150); border-color:rgb(0, 227, 150); color:#000; }
.category-중도 {  background:rgb(244, 225, 67); border-color:rgb(244, 225, 67); color:#000; }
.category-중도보수 {  background:rgb(255, 129, 35); border-color:rgb(255, 129, 35); color:#fff; }
.category-보수 {  background:rgb(240, 48, 77); border-color:rgb(240, 48, 77); color:#fff; }

.category-네이버 { background:url(/img/icon_naver.png) no-repeat center; }
.category-다음 { background:url(/img/icon_daum.png) no-repeat center; }
.category-페이스북 { background:url(/img/icon_facebook.png) no-repeat center; }
.category-유튜브 { background:url(/img/icon_youtube.png) no-repeat center; }

.with-icon-group-41:before { content:''; background: url(/img/icon_facebook.png) no-repeat center; width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 5px;}
.with-icon-group-42:before { content:''; background: url(/img/icon_youtube.png) no-repeat center; width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 5px;}

@media 
    (-webkit-min-device-pixel-ratio: 1.5), 
    (min-resolution: 144dpi) { 
        .category-네이버 { background-image:url(/img/icon_naver@2x.png); background-size:16px 16px; }
        .category-다음 { background-image:url(/img/icon_daum@2x.png); background-size:16px 16px; }
        .category-페이스북 { background-image:url(/img/icon_facebook@2x.png); background-size:16px 16px; }
        .category-유튜브 { background-image:url(/img/icon_youtube@2x.png); background-size:16px 16px; }
        .with-icon-group-41:before { background-image: url(/img/icon_facebook@2x.png); background-size:16px 16px; }
        .with-icon-group-42:before { background-image: url(/img/icon_youtube@2x.png); background-size:16px 16px; }

    }

/* label */
.label-status { padding:0px 12px; font-size:12px; line-height:22px; height:22px; }
.label-primary { background:#304DF0; }
.label-danger { background:#F0326D; }
.label-sm { font-size: 82%; padding: 4px 4px; }

.label-result { display:inline-block; border-radius: 5px; background: #000; color: #fff; padding: 2px 10px; font-size: 12px; }

.label.group-41 { background-color:#3b5998; }
.label.group-42 { background-color:#FF0000; }

.label.category-진보 { min-width:28px; text-align:center; }
.label.category-중도진보 { min-width:28px; text-align:center;  }
.label.category-중도 { min-width:28px; text-align:center;  }
.label.category-중도보수 { min-width:28px; text-align:center;  }
.label.category-보수 { min-width:28px; text-align:center;  }

.label-naver { background:#03cf5d; color:#fff; }
.label-daum { background:#0089ff; color:#fff; }

.label-custom-group { padding:2px 0; width:14px; font-weight:bold; text-align:center; background:#c7c7c7; color:#fff; }
.label-custom-group-1 { background:rgb(48, 77, 240); }
.label-custom-group-2 { background:rgb(0, 227, 150); }
.label-custom-group-3 { background:rgb(240, 48, 77); }

/* category select */

.category1:before { display: inline-block; font-size: 10px; padding: 1px 3px; border-radius: 2px; }
.category1-:before { content: '';  color: #fff; background-color: rgb(200,200,200); min-width: 24px; height: 16px; text-align: center; vertical-align: middle;; }
.category1-진보:before { content: '진보'; display: inline-block; color: #fff; background-color: rgb(79, 104, 242); }
.category1-중도진보:before { content: '중진'; display: inline-block; color: #000; background-color: rgb(0, 227, 150); }
.category1-중도:before { content: '중도'; display: inline-block; color: #000; background-color:rgb(244, 225, 67);  }
.category1-중도보수:before { content: '중보'; display: inline-block; color: #fff; background-color: rgb(255, 129, 35); }
.category1-보수:before { content: '보수'; display: inline-block; color: #fff; background-color: rgb(240, 48, 77); }

.bootstrap-select.btn-group .dropdown-menu .label { margin-left: 20px; margin-right: 2px; }
.bootstrap-select.btn-group .dropdown-menu .category1:before { margin-left: 23px; margin-right: -16px; }

/* change */
.change { display:inline-block; letter-spacing:-1px; }
.change.up { color:#007bff; }
.change.down { color:#dc3545; }
.change .count:before { font-family: "Material Icons"; vertical-align: middle; margin-right: -2px; margin-left: -2px; }
.change.up .count:before { content: "arrow_drop_up"; color:#007bff; }
.change.down .count:before { content: "arrow_drop_down"; color:#dc3545; }

/* badge */
.text-primary { color: #007bff; }
.text-danger { color: #dc3545; }

/* max text */
.text-max {
    max-width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}
.text-max-300 {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}
.text-max-400 {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}
.text-max-500 {
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.form-control,
input[type=text].form-control,
input[type=number].form-control {
    border-radius:4px;
    border-color: #c4c4c4;
    background-color: #fff;
    box-shadow:none;
    font-weight:normal;
}

.form-control-date,
input[type=text].form-control-date { 
    cursor:pointer;
}
.form-control-date:hover,
input[type=text].form-control-date:hover {
    border-color:#304df0;
}
.form-control-date.date-open,
input[type=text].form-control-date.date-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color:#c4c4c4;
    background:#fafafa;
    box-shadow:inset 0px 1px 1px rgba(0,0,0,0.12);
}

.form-control-sm {
    font-size:14px;
    height:36px;
}

.input-group .form-control-xs,
.form-control-xs {
    font-size:14px;
    height:28px;
    padding:2px 10px;
}

.dropdown-menu>li>a {
    padding:4px 10px;
    font-size:13px;
    margin-top:0;
} 
.dropdown-menu>li {
    position:relative;
}
.dropdown-menu>li>.count {
    position: absolute;
    right: 5px;
    top: 3px;
    line-height: 14px;
    display: inline-block;
    padding: 2px 6px;
    background: #eee;
    border-radius: 4px;
    font-size: 12px;
    pointer-events:none;
}

.dropdown-menu>li.footer {
    background: #f4f4f4;
    margin-top: -4px;
    margin-bottom: -4px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.dropdown-menu>li.footer:hover {
    background:#eee;
}

.dropdown-menu>li>a.have-menu-icon {
    position:relative;
    padding-left:30px;
}
.dropdown-menu>li>a.have-menu-icon .material-icons {
    position:absolute; left:6px;
}

.dropdown-menu {
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* progress-list */
.progress-list {}
.progress-list li { position:relative; height:26px; display:block; }
.progress-list li .title { width:90px; text-align:right; position:absolute; left:0; top:0; padding-right:10px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
.progress-list li .graph { margin-left:100px; margin-right:100px; padding-top:9px; display:block; height:100%; }
.progress-list li .graph .progress { height: 7px; display: block; background-color:#F2F2F2; }
.progress-list li .graph .progress .progress-bar { background-color:#3240F0; }
.progress-list li .count { width:90px; position:absolute; right:0; top:0; padding-left:10px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }

/* LAYOUT */
#main-banner { display:none; position:fixed; top:0; left:0; right:0; height:120px; background-position:center; background-repeat:no-repeat; background-size:1920px 120px; background-color:#534461; z-index:300; }
#main-banner a.link { position:absolute; left:0; top:0; right:0; bottom:0; z-index:99; }
#main-banner .tool { position:absolute; right:16px; bottom:12px; z-index:100; }
#main-banner .tool a { display:inline-block; color:#fff; font-size:13px; }
#main-banner .tool a:hover { text-decoration:underline; }
#main-banner .tool a + a { margin-left:5px; }
.have-banner  #main-banner { display:block; }

#header { position:fixed; top:0; left:0; right:0; height:46px; background:#fff; border-bottom:1px solid #CBCBCB; box-shadow:0px 1px 4px rgba(0,0,0,0.05); z-index:300; font-size:0; line-height:0; }
#header .back-link { vertical-align: middle; margin-left:10px; }
#header .back-link:after { content:''; display:inline-block; margin-left:14px; height:10px; border-left:1px solid #DDDDDD; }
#header .logo { display:inline-block; width:90px; height:30px; margin:8px 14px; margin-right:10px; background:url(/img/layout/logo_bluedot.svg) no-repeat center / contain; text-indent:-1000px; overflow:hidden; vertical-align: middle; }
#header .title { font-size: 16px; display: inline-block; letter-spacing: 0px; color: #000; vertical-align: middle; height: 30px; line-height: 27px; font-weight: bold; }
#header .sub-log { vertical-align: top; height: 25px; font-size: 12px; line-height: 22px; display: inline-block; margin: 10px 0; font-weight: bold; color: #fff; background: #000000; padding: 0px 10px; border-radius: 4px; }
#header .user { margin-right:14px; }
#header .user > a { padding-top:9px; padding-bottom:9px; transition:background 0.3s;  }
#header .user > a:hover { background-color:#f4f4f4; }
#header .user .profile { display:inline-block; width:26px; height:26px; border-radius:50%; overflow:hidden; background:#000; margin-right:8px; vertical-align:middle; }
#header .user .display-name { display:inline-block; font-size:12px; color:#393939; text-decoration: none; vertical-align: middle; line-height:22px; }

#header ul.main-menu { display:inline-block; height:46px; vertical-align: top; margin-left:10px; }
#header ul.main-menu li { position:relative; display:inline-block; margin-top:10px;  }
#header ul.main-menu li + li.active,
#header ul.main-menu li.active + li { margin-left:6px; }
#header ul.main-menu li.have-icon a { padding-left:10px; width:94px; }
#header ul.main-menu li a { display:inline-block; line-height:46px; position:relative; padding-left:28px; padding-right:10px; text-align:center; color:#000000; opacity:0.5; font-size:13px; line-height: 22px; height:24px; position:relative; }
#header ul.main-menu li a:hover { opacity:1; }
#header ul.main-menu li a .material-icons { position: absolute; left: 7px; top: 50%; margin-top: -7px; line-height: 14px; }
#header ul.main-menu li.active { }
#header ul.main-menu li.active a { background: #000; color: #fff; opacity: 1; border-radius: 4px; box-shadow: 0px 2px 3px rgba(0,0,0,0.15) }
#header ul.main-menu li.active.have-icon a { padding-left:20px; width:98px; }
#header ul.main-menu li.active.have-icon a .material-icons { left:10px; }
#header ul.main-menu li.active + li.have-icon { margin-left:8px; }
#header .pull-right { margin:0; }

.have-banner #header { top:120px; }

body.menu-ranking #header { background:#333; border-bottom-color:#333; }
body.menu-ranking #header .logo { background-image:url(/img/logo_light.svg); }
body.menu-ranking #header .user > a { color:#fff; }
body.menu-ranking #header .user .profile { background-color:#fff; }
body.menu-ranking #header .user .display-name { color:#fff; }
body.menu-ranking #header .user > a:hover,
body.menu-ranking #header .user.open > a { background-color:#5e5e5e; }
body.menu-ranking #header ul.main-menu li a { color:#fff; }
body.menu-ranking #header ul.main-menu li.active a { color:#000; background:#fff; }

footer { background:#898989; position:absolute; left:0; width:100%; bottom:0; padding-top:30px; padding-bottom:30px; text-align:right; }
footer .container { position:relative; }
footer .logo-footer { position:absolute; left:0; top:0; width:108px; height:24px; background:url(/img/logo_footer.svg) no-repeat center; background-size:contain; }
footer .address { font-size:13px; color:#fff; margin-bottom:21px; line-height:18px; }
footer .menus {}
footer .menus a { display:inline-block; padding-left:30px; font-size:13px; color:#fff; font-weight:bold; }

/* Sidebar */
.sidebar {
  position:fixed;
  top: 46px;
  bottom: 0;
  left: 0;
  width:160px;
  z-index: 100; /* Behind the navbar */
  border-right:1px solid #D1D1D1;
  padding:10px 0;
}
.sidebar-right {
    left:auto;
    right:0;
}
.have-banner .sidebar {
    top:166px;
}
.sidebar-float {
    position:fixed;
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 72px);
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar-sticky.have-footer {
    height: calc(100vh - 92px);
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .sidebar-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 159px;
    padding: 0 15px;
    font-size: 13px;
    background: #f4f4f4;
}

.sidebar .sidebar-footer a {
    color:#999;
}

.sidebar .nav-link {
    color: #333;    
    font-size: 13px;
    font-weight:normal;
    line-height: 1rem;
    margin: 0px 7px;
    padding: 6px 8px;    
}

.sidebar .nav-link:hover {
    color:#3240F0;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:active,
.sidebar .nav-link:focus,
.sidebar .nav-link:active:focus {
    background:transparent;
}

.sidebar .nav-link.disabled { 
    color:#bbb;
    cursor:not-allowed;
}

.sidebar .material-icons {
    font-size: 1rem;
}

.sidebar hr {
    border-color:rgba(0,0,0,0.08);
    margin-left:10px;
    margin-right:10px;
}

body.menu-ranking .sidebar hr {
    border-color:rgba(255,255,255,0.08);
}

.sidebar .nav-link .material-icons {
    margin-right: 2px;
    margin-top:-2px;
}

.sidebar .nav-link .material-icons.dummy { 
    min-width:16px; min-height:16px;
}
 
.sidebar .nav-link.active,
.sidebar .nav-link:active.active,
.sidebar .nav-link:focus.active {
    color: #fff;
    background: #3240F0;
    border-radius: 4px;
    font-weight:500;
}

.sidebar .nav-link.active .material-icons,
.sidebar .nav-link:hover .material-icons {
  color: inherit;
}

.sidebar .nav-link.selected,
.sidebar .nav-link:active.selected,
.sidebar .nav-link:focus.selected {
    color:#3240F0;
    font-weight:500;
}

.sidebar .nav-link .tool {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.sidebar .nav-link .tool .badge {
    line-height: 8px;
    height: 16px;
    width: auto;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
}

.sidebar .nav-link.active .badge,
.sidebar .nav-link:active.active .badge,
.sidebar .nav-link:focus.active .badge {
    background: #fff;
    color: #3240f0;
}

.sidebar-heading {
    position: relative;
    font-size: 11px;
    text-transform: uppercase;
    color: #aaa;
    padding-bottom: 3px;
    margin: 0 14px;
    font-weight:400;
}

.sidebar .nav + .sidebar-heading {
    border-top:1px dotted #E4E4E4;
    padding-top:8px;
}

.sidebar-heading .right {
    position:absolute;
    right:-6px;
    top:11px;
    line-height:12px;
}

.sidebar-heading .right a {
    padding: 4px 5px;
    display: inline-block;
    color:#666;
}

.sidebar-heading .right a.active {
    background: #3240F0;
    color: #fff;
    font-weight: normal;
    border-radius: 4px;
}

.sidebar-heading .right a.active:hover {
    color:#fff;
}

.sidebar-heading .right a .material-icons {
    margin-top:-3px;
}

.sidebar-heading .right a:hover { color:#000; }

.nav + .sidebar-heading { margin-top:10px; }

.have-banner #wrapper { padding-top:120px; }

#wrapper.max-width .container-fluid { min-height:100vh; max-width:1280px; position:relative; border-left:1px solid rgba(120, 120, 120, 0.2); border-right:1px solid rgba(120, 120, 120, 0.2); }
#wrapper.max-width .container-fluid .sidebar { position:absolute; }
#wrapper.max-width .container-fluid .sidebar-sticky { top:58px; }

body.menu-ranking .sidebar { background-color:#2e3e4e; padding:0; }
body.menu-ranking .sidebar .sidebar-sticky { height:calc(100vh - 46px); padding:12px 0; }
body.menu-ranking .sidebar .nav-link { color:#fff; transition:background 0.2s; }
body.menu-ranking .sidebar .nav-link:hover { background:rgba(255,255,255,0.1); }
body.menu-ranking .sidebar .nav-link.active, 
body.menu-ranking .sidebar .nav-link:active.active, 
body.menu-ranking .sidebar .nav-link:focus.active { background-color:#d84e5e; }


/*
 * Content
 */
main { padding-top: 46px; }
main.full { min-height: calc(100vh - 46px); position:relative; }
.have-left-sidebar main { margin-left: 160px; }
.have-right-sidebar main { margin-right:140px; }

main[role="main"] {
  margin-left:0; 
  margin-top:0;
  padding-top: 133px; /* Space for fixed navbar */
}

@media (min-width: 768px) {
  main[role="main"] {
    padding-top: 46px; /* Space for fixed navbar */
  }
}

main .header { padding:17px 22px; border-bottom:1px solid #E4E4E4; position:relative; min-height:46px; }
main .header .is-test { text-align: center; border-top: 1px solid #c70b0b; position: absolute; left: 0; top: 0; width: 100%; color: #c70b0b; padding-top: 7px; font-size: 13px; box-shadow: inset 0px 5px 10px -5px rgba(255,0,0,0.05); }
main .header .is-test span { display:inline-block; padding:4px 30px; background:#c70b0bc7; color:#fff; border-radius:30px; box-shadow:0px 1px 2px rgba(0,0,0,0.15); }
main .header h3 { font-size:13px; line-height:17px; margin:0; padding:0; color:#000; }
main .header .left { position:absolute; left:22px; top:11px; }
main .header .right { position:absolute; right:22px; top:11px; }
main .header .sep { display:inline-block; border-left:1px solid #ddd; height: 14px; vertical-align: middle; margin-left: 6px; margin-right: 8px; }
main .header .form-control { display:inline-block; width:auto; font-size: 13px; line-height: 28px; height: 28px; border-color:#B4B4B4; box-shadow:0px 2px 4px rgba(0,0,0,.05); font-weight: normal; color: #666; }

main .header.no-border { border-bottom:0; }
main .header.no-border .btn { height:28px; line-height:28px; box-shadow:0px 2px 4px rgba(0,0,0,.05); font-weight: normal; }
main .header.no-border .btn-default { line-height:26px; }

main .header .keyword { position:relative; background: #2f4cf0; font-size: 13px; color: #fff; margin-left: 5px; padding-left:8px; padding-right:8px; }
main .header .keyword a.full { position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; }
main .header .keyword .btn-reset-keyword { color:#fff; position:relative; z-index:1; }
main .header .keyword .btn-reset-keyword:hover { opacity:0.5; }

.input-with-icon { display:inline-block; position:relative; vertical-align: middle; border-radius: 4px; border: 1px solid #c4c4c4; background: #fff; box-shadow:0px 2px 4px rgba(0,0,0,.05); font-weight: normal; box-sizing: border-box; height:28px; }
.input-with-icon .material-icons { position: absolute; left: 8px; top: 50%; margin-top: -9px; }
.input-with-icon input[type=text].form-control { padding-left:30px; border:0; padding-top:4px; background:transparent; box-shadow:none; }

.search-input-group .input-group-btn { width:auto; }
.search-input-group .input-group-btn a.btn { border-left:1px solid #c4c4c4; height:28px; line-height:26px; }

main .content { padding:22px; }

/* NAV MENU */
.nav-menu { margin-top:20px; margin-bottom:20px; position:relative; }
.nav-menu a { color:#767676; font-size:13px; text-decoration:none; }
.nav-menu a:hover { color:#333; }
.nav-menu .right { position:absolute; right:0; top:0; }

/* BOX */
.box {
    border:1px solid #CBCBCB;
    position:relative;
}
.box.box-border-dark {
    border-color:#666;
}
 .box-height-sm {
     min-height:160px;
 }
.box-shadow {
    box-shadow:0px 2px 4px rgba(0,0,0,.05);
}
.box-radius {
    border-radius:4px;
    /*overflow:hidden;*/
}
.box-header {
    color:#000;
    padding:0.8rem 1rem;
    border-bottom:1px solid #EDEDED;    
    font-size:0;
}
.box-header h4 {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.5rem;
}
.box-header .sep {
    display: inline-block;
    border-left: 1px solid #ddd;
    border-right:0;
    margin-left: 10px;
    margin-right: 10px;
    height: 14px;
    vertical-align: middle;
}
.box-header p.hint {
    font-size: 13px;
    line-height: 22px;
    color: #646464;
    font-weight: normal;
    margin-top: 8px;
    margin-bottom: 4px;
}
.box-header p.hint strong {
    color:#000;
    font-weight:bold;
}
.box-header .sub-title {
    display:inline-block;
    color:#777;
    font-size:11px;
    line-height:15px;
    margin-left:5px;
    vertical-align: middle;;
}
.box-header .btn {
    font-size:0.75rem;
}
.box-tool .sep {
    height: 14px;
    vertical-align: middle;
    margin-left: 1px;
    margin-right: 4px;
    margin-top:-2px;
    font-weight:500;
}

.box-tool .sep.size-sm {
    margin-left: 4px;
    margin-right: 8px;
}

.box-tool .label-status { display:inline-block; font-size:13px;  background:transparent; color:#4D4F5C; }
.box-tool .label-status:before { content:''; display:inline-block; vertical-align:middle; }
.box-tool .label-status-positive:before,
.box-tool .label-status-negative:before { width:14px; height:14px; border-radius:100%; margin-right:8px; background:#F0F0F0; }
.box-tool .label-status-positive:before { background:#342EF0; }
.box-tool .label-status-avg:before { width:2px; height:14px; background:#000; margin-right:8px; }

.box-tool .label-rank { display:inline-block; font-size:12px ;  background:transparent; color:#4D4F5C; }
.box-tool .label-rank:before { content:''; display:inline-block; vertical-align:middle; }
.box-tool .label-rank1:before,
.box-tool .label-rank2:before,
.box-tool .label-rank3:before { width:14px; height:14px; border-radius:100%; margin-right:8px; background:#8E8E8E; }
.box-tool .label-rank1:before { background:#342EF0; }
.box-tool .label-rank2:before { background:#9FA1FF; }

.box-float-header {
    position:absolute;
    left:18px; top:14px;
    color:#000;
    z-index:100;
}
.box-float-header h3 {
    font-size:24px; font-weight:bold;
    line-height:30px;
}
.box-float-header h3 .changed { 
    display:inline-block;
    font-size:15px;
}
.box-float-header h3 .changed.up {
    color:#304DF0;
}
.box-float-header h3 .changed.up:before {
    font-size: 22px;
    vertical-align: bottom;
    display: inline-block;
    line-height: 20px;
    margin-right:-2px;
    font-family: "Material Icons"; content: "arrow_drop_up";
}
.box-float-header h3 .changed.down {
    color:#D53434;
}
.box-float-header h3 .changed.down:before {
    font-size: 22px;
    vertical-align: bottom;
    display: inline-block;
    line-height: 20px;
    margin-right:-2px;
    font-family: "Material Icons"; content: "arrow_drop_down";
}
.box-float-header h4 {
    font-size:12px; font-weight:normal;
    line-height:22px;
}
.box-tool {
    top:10px;
}
.box-tool.up-1 {
    top:9px;
}
.box-tool.right-sm {
    right:8px;
}
.box-tool.in-button{
    top:13px;
}
.box-tool a {
    color:#626262;
    display: inline-block;
    margin-top: 4px;
}
.box-tool a.btn {
    line-height: 27px;
    padding: 0 10px;
    margin-top: 0;
}
.box-tool a.btn-primary {
    color:#fff;
}
.box-tool a.btn-default {
    color: #333;
}
.box-tool a.btn i {
    margin-right: 0;
    font-size: 17px;
    margin-top: -2px;
}
.box-tool .image-checkbox {
    margin-top: 1px;
    vertical-align: top;
    height: 28px;
}
.box-menu {
    list-style: none;
    padding-top: 10px;
    padding-left: 16px;
    font-size: 0;
    background: #f4f4f4;
}
.box-menu li.nav-item {
    display:inline-block;
}
.box-menu li.nav-item a.nav-link {
    display:inline-block;
    padding-left:15px;
    padding-right:15px;
    font-size:13px;
    line-height:34px;
    color:#555;
}
.box-menu li.nav-item a.nav-link:hover {
    color:#304DF0;
}

.box-menu li.nav-item a.nav-link.active {
    position: relative;
    font-weight: bold;
    color: #000;
    background: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.box-menu li.nav-item a.nav-link.active:after {
    /*content:'';
    position:absolute;
    bottom:0;
    height:2px;
    left:0; right:0;
    background:#000;*/
}
.box-menu + .table {
    border-top:0;
}

.box-menu.pills { padding-right:16px; padding-top:8px; padding-bottom:8px; border-bottom:1px solid #e0e0e0; line-height:0; }
.box-menu.pills li.nav-item a.nav-link { border-radius:0; background:#fff; border:1px solid #ccc; border-right:0; line-height:28px; text-decoration:none; }
.box-menu.pills li.nav-item a.nav-link.active { border-radius:0; }
.box-menu.pills li.nav-item:first-child a.nav-link { border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.box-menu.pills li.nav-item:last-child a.nav-link { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right:1px solid #ccc; }
.box-menu.pills li.nav-item a.nav-link.active { background:#eee; }

.box-menu.pills.three li.nav-item { width:33.333% }
.box-menu.pills.three li.nav-item a.nav-link { width:100%; text-align:center; }

.box-body {    
    position:relative;
    border-bottom:1px solid #EDEDED;    
}
.box-body.colored,
.box-footer.colored { background:#FAFAFA; }

.box-body:last-child {
    border-bottom:0;
}
.box-body .full-link { position:absolute; left:-1px; top:-1px; right:-1px; bottom:-1px; border-radius:4px; border:1px solid transparent; transition:0.3s; }
.box-body .full-link:hover { border:1px solid #304DF0; }

.box-body.box-max-height-150 { max-height:150px; overflow:hidden; position:relative; transition:height 0.3s; }
.box-body.box-max-height-150 img { display:none; }
.box-body .box-more-view-height { display:none; }
.box-body.box-max-height-150 a.box-more-view-height { display:block; position:absolute; left:0; right:0; bottom:0; padding-top:4px; padding-bottom:4px; text-align:center; background:#fff; box-shadow:0px -18px 8px rgba(255,255,255,1); }
.box-body.box-max-height-150 a.box-more-view-height:hover { background-color:#f4f4f4; }

.box-body > ul {}
.box-body > ul li { margin-bottom:10px; }
.box-body > ul li:last-child { margin-bottom:0; }

.box-body > hr { margin-left:-15px; margin-right:-15px; }

.box-body > h5 {     
    font-size: 15px;
    color: #43425D;
    margin-bottom: 14px;
    font-weight: 500;
}

.box-body > h6 {     
    font-size: 13px;
    line-height:13px;
    color: #989898;    
    font-weight: 500;
    margin-bottom:10px;
}

.box-list {
    
}
.box-list > li {
    position:relative;
    padding:15px 20px;
    border-bottom:1px solid #ededed;
    font-size:13px;
}

.box-list > li .profile {
    display:inline-block;
    width:20px; height:20px;
    border-radius:50%;
    background:#000;
    margin-right:5px;
    vertical-align: middle;
}

.box-list > li .username {
    display:inline-block;
    vertical-align: middle;
    font-weight:500;
}

.box-list > li .right {
    position:absolute;
    right:20px; top:14px;
}

.box-list > li svg {
    vertical-align: middle;
    margin-top: -2px;
}

.box-list > li .btn {
    padding: 0 12px;
    line-height: 28px;
    font-size:13px;
}

.box-list > li .btn-mini { 
    font-size: 0.75rem;
    line-height: 24px;
    padding: 0px 8px;
}

.box-list > li .text-muted {
    color:#AAAAAA;
    vertical-align:middle;
}

.box-list > li a.text-muted:hover { 
    color:#304DF0; 
}

.box-footer {
    position:relative;
    font-size:13px;
    padding:16px 20px;
}
.box-footer .left,
.box-footer .right {
    position:absolute;
    right:0;
    top:0;
    padding:16px 20px;
}
.box-footer .left { 
    left:0;
    right:auto;
}
.box-footer .left p,
.box-footer .right p {
    line-height:36px;
}
.box-footer a:not(.btn) {
    color:#999;
    text-decoration: none;
}
.box-footer .bootstrap-select.btn-group.size-sm .dropdown-toggle {
    height:32px;
}

.box-footer .pagination-wrap  {}
.box-footer .pagination-wrap .sep { width: 1px; height: 21px; background: #e8e8e8; display: inline-block; vertical-align: middle; margin-left: 8px; margin-right:8px; }

.box-footer .pagination {
    margin:0;
    vertical-align: middle;
}
.box-footer .pager {
    display:inline-block;
    margin:0;
    vertical-align: middle;
    font-size:0;
}
.box-footer .pager li { 
    display:inline-block;
}
.box-footer .pager li>a {
    height: 32px;
    border-radius: 4px;
    line-height: 22px;
    padding: 5px 12px;
    vertical-align: middle;
    border-color:#C4C4C4;
    box-shadow:0px 1px 2px rgba(0,0,0,0.05);
    font-size:13px;
}
.box-footer .pager li>a:hover {
    background-color:inherit;
    border-color:#304DF0;
    color:#304DF0;
}
.box-footer .pager li>a.disabled {
    cursor: default;
    border-color:#eee;
    color:#ccc
}
.box-footer .pager li>a.disabled .text {
    cursor: default;
    color:#ccc;
}
.box-footer a.primary {
    color:#304DF0;
}
.box-footer .btn + .btn {
    margin-left:5px;
}
.box .hint {
    font-size:0.8rem;
    color:#959595;
}
.box .hint.point,
.box .hint strong {
    color:#555;
}
.box-header.sm,
.box-footer.sm {
    padding:0.68rem 0.7rem;
}

.box .hint-wrap {}
.box .hint-wrap h5 { font-size:13px; color:#0A0A0A; font-weight:bold;}
.box .hint-wrap p { font-size:13px; color:#8E8E8E; }

.box .hint-wrap .hint-title { margin-bottom:10px; }
.box .hint-wrap .hint-title h4 { font-size:14px; color:#000; }
.box .hint-wrap .hint-title p {}

.box-primary { background-color:#4254DE; border-color:#4254DE; color:#fff; }

.box .box-split-wrap { display:flex; }
.box .box-split-content { flex:1;  }
.box .box-split-menu { width:220px; background:#F2F2F2; }
.box .box-split-menu .box-header { border-bottom-color:#e4e4e4; }
.box .box-split-menu .menu { }
.box .box-split-menu .menu li { position:relative; border-bottom:1px solid #E0E0E0; }
.box .box-split-menu .menu li .changed { position:absolute; right:12px; top:0; font-size:11px; transition:right 0.2s; }
.box .box-split-menu .menu li .changed:before { font-family: "Material Icons"; vertical-align: middle; content: "arrow_drop_up"; display:inline-block; }
.box .box-split-menu .menu li a.link { display:block; font-size:13px; color:#707070; line-height:30px; padding-left:12px; padding-right:12px; transition:background 0.1s; text-decoration:none; }
.box .box-split-menu .menu li:hover a.link { background:#f8f8f8; }
.box .box-split-menu .menu li a.go { position:absolute; right:11px; top:2px; opacity:0; transition:opacity 0.3s; }
.box .box-split-menu .menu li a.go:hover { color:#304DF0; }
.box .box-split-menu .menu li.active a { background:#fff; color:#000; }

.box .box-split-menu .menu li:hover .changed { color:#007bff; right:35px; }
.box .box-split-menu .menu li:hover a.go { opacity:1; }

/* INFO WITH COUNT */
.title-with-count { }
.title-with-count .count { font-size:20px; font-weight:bold; line-height:28px; }
.title-with-count .count-muted { font-size:16px; font-weight:500; line-height:28px; }
.title-with-count .title { font-size:14px; font-weight:500; line-height:20px; }
.title-with-count .text-muted { color:#aaa; }

/* LIST BOX */
.list-box { position:relative; overflow:hidden; transition:0.3s; margin-bottom:1rem; }
.list-box:hover { border-color:#919191; /*background-color:#F8F8F8;*/ }
.list-box.box-border-dark:hover { border-color:#666; }
.list-box .list-box-link { position:absolute; left:0; top:0; width:100%; height:100%; }
.list-box .box-body { padding:14px; }
.list-box-data { position:relative; min-height:38px; }
.list-box-data .list-box-cover { position:absolute; left:0; top:0; width:38px; height:38px; border-radius:4px; background:#F0F0F0; }
.list-box-data .list-box-cover .material-icons { color: #000; margin-left: 8px; margin-top: 7px; }
.list-box-data .list-box-body { padding-left:52px; font-size:0; line-height:0; }
.list-box-data .list-box-body h3 { font-size:13px; line-height:20px; font-weight:500; color:#000000; margin:0; margin-bottom:2px; }
.list-box-data .list-box-body span.info { font-size:12px; line-height:16px; font-weight:500; color:#808080; }


/* STATS BOX */
.stats-box { position:relative; min-height:55px; }
.stats-box .stats { position:absolute; left:0; bottom:0; width:110px; font-size:30px; font-weight:bold; color:#000; }
.stats-box .graph { margin-left:120px; }

/* date picker */

.datepicker {
    position:relative;
    padding-left:10px;
    padding-right:40px;
}

.datepicker .material-icons {
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -9px;
    font-size: 20px;
}

.daterangepicker.show-calendar.dropdown-menu {
    min-width:500px;
}

.daterangepicker.single.show-calendar.dropdown-menu {
    min-width:250px; margin-top:-1px;
}

.daterangepicker { border:1px solid #c4c4c4; margin-top:-2px; border-top-left-radius: 0; }
.daterangepicker.view-right { border-top-left-radius:4px; border-top-right-radius:0; }

.daterangepicker.opensright:before,
.daterangepicker.opensright:after { display:none; }

.daterangepicker.single .calendar.left { border-left:0; margin-left:0; }

.daterangepicker .ranges { margin:0; }
.daterangepicker .ranges li { color:#2b2b2b; border:transparent; border-radius:2px; background:#fff; margin-bottom:0; }
.daterangepicker .ranges li:last-child { margin-bottom:0; }
.daterangepicker .ranges li:hover { background:#f4f4f4; }
.daterangepicker .ranges li.active { color:#fff; background:#304DF0; border:transparent; margin-bottom:6px; margin-top:6px; }


.daterangepicker .ranges li:first-child { 
    border-bottom:1px solid #eee;
    margin-bottom:6px;
}

.daterangepicker .ranges li[data-range-key="직접 선택"] {
    border-top: 1px solid #eee;
    padding-top: 5px;
    margin-top:6px;
}

.daterangepicker td.in-range { background:#eceffe; }
.daterangepicker td.active, 
.daterangepicker td.active:hover { background-color:#304DF0; }
.daterangepicker .calendar th, 
.daterangepicker .calendar td { line-height:22px; }

@media (min-width: 564px) {
    .daterangepicker.ltr .calendar.left {
        border-left: 1px solid #f4f4f4;
        margin-left: 10px;
        padding-left: 6px;
    }
    .daterangepicker.ltr.single .calendar.left {
        border-left:0;
        padding-left:0;
    }
}

/* block-wrap */
.block-wrap { max-width:550px; margin:0 auto; }
.block-wrap.block-lg { max-width:896px; }
.block-wrap.block-md { max-width:700px; }

.block-wrap > .title-wrap { margin-bottom:20px; }
.block-wrap > .title-wrap > h3 { font-size:17px; color:#000000; font-weight:bold; margin-bottom:2px; }
.block-wrap > .title-wrap > h4 { font-size:13px; color:#646464; font-weight:400; }
.block-wrap > .title-wrap > h4 strong { color:#333; }

/* header-wrap */
.header-wrap { position:relative; width:100%; padding-bottom: 16px; }
.header-wrap h3 { color:#333; font-size:15px; line-height:28px; font-weight:500; }
.header-wrap .hint { font-size: 0.8rem; color: #959595; }
.header-wrap .tool { text-align:right; position:absolute; right:0; top:0; bottom:0; }
.header-wrap .tool .btn {}

/* view-wrap */
.view-wrap { padding-top:12px; }
.view-wrap .view-navigation { }
.view-wrap .view-navigation h2 { height: 22px; font-size: 18px; font-weight: bold; color: #000; line-height: 30px; }
.view-wrap .view-navigation h2.lg { font-size: 20px; line-height: 32px; }
.view-wrap .view-navigation .sep { display:inline-block; border-left:1px solid #ddd; margin-left:6px; margin-right:6px; height:20px; vertical-align:middle; }

body.menu-ranking .view-wrap { padding-left:20px; padding-right:20px; padding-top:16px; }

/* view content */
.view-content {}
.view-content img { display:block; max-width:100%; height:auto; margin-bottom:10px; }

/* control */
.input-with-button { position:relative; padding-right:98px; }
.input-with-button .btn-group { width:100% !important; }
.input-with-button .btn-primary { position:absolute; right:0; top:0; width:88px; font-size:14px; height:36px; line-height:34px; }
.input-with-button .hint { display:block; margin-top:5px; color:#aaa; font-size:12px; }

/* modal */
.modal-content { box-shadow:0 7px 14px 0 rgba(60,66,87, .12), 0 3px 6px 0 rgba(0,0,0, .12); border:0; }
.modal-title { font-size:15px; }
.modal-header { padding:8px 20px; color:#000; position:relative; }
.modal-header .close { margin-top:0; opacity:1; position:absolute; top:50%; right:20px; margin-top:-10px; opacity:.2; }
.modal-header .close:hover { opacity:1; }
.modal-body { padding: 20px 20px; font-size: 14px; font-weight: 300; position:relative; }
.modal-body.colored { background: #fafafa; }
.modal-footer .btn { font-size: 14px; height: 32px; line-height: 30px; padding-left:10px; padding-right:10px; }
.modal-footer .btn + .btn { margin-left:8px; }
.modal-sub-title { color: #000; font-size: 15px; font-weight: 500; text-align: left; padding: 20px; padding-bottom: 0; margin-bottom: -20px; z-index: 100; position: relative; }
.modal-sub-title svg { height: 16px; margin-right: 4px; vertical-align: middle; }
.modal-sub-title .title { display:inline-block; vertical-align:middle; }
.modal-sub-title .title .placeholder { height: 25px; width: 350px; background: rgba(0,0,0,0.1); display: inline-block; }
.modal-body { position:relative; }
.modal-body .placeholder { background: rgba(247, 250, 250, 0.5); position: absolute; left: 0; top: 15px; width: 100%; bottom: 0; z-index: 100; opacity:1; transition:opacity 0.3s; }
.modal-body .placeholder .loading { position: absolute; top: 50%; margin-top: -52px; left: 50%; margin-left: -32px; }
.modal-body .placeholder .loading div { border-color:#000000; }
.modal-body .placeholder.hide { opacity:0; pointer-events: none;}

.modal-backdrop.in { opacity:.3; }

.bootbox-alert .modal-header { padding:14px 20px; } 
.bootbox-alert .modal-body { padding:18px 20px; }
/*.bootbox-alert .close { margin-top:-10px; }*/
.bootbox-body dl {}
.bootbox-body dl dt { font-size:13px; }
.bootbox-body dl dd { font-size:13px; margin-bottom:10px; }


/* LAYER */
.data-info-wrap {}
.data-info-wrap .no-margin { margin-left: -20px; margin-right: -20px; }
.data-info-wrap h5 { font-size:13px; color:#000; }
.data-info-wrap .extra { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
.data-info-wrap .description { word-break:break-word; font-size:13px; line-height:18px; }
.data-info-wrap .description img { max-width:100%; }
.data-info-wrap .table { width: auto; max-width: initial; word-break:break-word; }
.data-info-wrap .table td:first-child,
.data-info-wrap .table th:first-child { padding-left:20px; }

/* loading */
.lds-ripple {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
  }
  .lds-ripple div {
    position: absolute;
    border: 4px solid #304DF0;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 28px;
      left: 28px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: -1px;
      left: -1px;
      width: 58px;
      height: 58px;
      opacity: 0;
    }
  }
  

/* form-group */
/*
.form-group .error { display:none; }
.form-group.has-error {}
.form-group.has-error input[type=text].form-control { border-color:#cc0000; border-bottom:1px solid #cc0000; color:#cc0000; box-shadow:none; }
.form-group.has-error .error { display:inline-block; font-size: 13px; color: #cc0000; padding-top:4px; }
.form-group label,
.form-group label.form-control-label { font-size:13px; color:#313131; }
.form-group textarea.form-control { border:1px solid #BBBBBB; border-radius:4px; font-size:13px; line-height:20px; padding:4px 10px; }
.form-group .form-control-sm { font-size: 13px; height: 28px; line-height: 1; padding: 0 8px; color: #000; }
.form-group .hint { margin-top:5px; }*/

/* table */
.table-fixed { table-layout:fixed; }

.table > thead > tr.bg > th,
.table > tbody > tr.bg > td { background-color:#f4f4f4; border-color:#d8d8d8; }
.table > tbody > tr.border-light > td, 
.table > tbody > tr.border-light > th, 
.table > tfoot > tr.border-light > td, 
.table > tfoot > tr.border-light > th { border-color:#f5f5f5;}

.table tr > th.single-line,
.table tr > td.single-line { overflow:hidden; white-space:nowrap; }

.table tr > th .right,
.table tr > td .right { position: absolute; right: 0; background: #fff; padding: 6px 8px; top:50%; margin-top: -15px; box-shadow: -5px 0px 10px rgba(255,255,255,1); }

.table tr > th.fitwidth,
.table tr > td.fitwidth  { width: 1px; white-space: nowrap; }

.table.table-scroll th,
.table.table-scroll td { min-width:100px; }

/* Setting TABLE */
.page-form .table.setting-table { border:1px solid #C9C9C9; border-radius:4px; box-shadow:0px 1px 1px rgba(0,0,0,0.05); }
.page-form .table.setting-table>thead>tr>th { padding:10px; background:#fff; border-bottom:1px solid #C9C9C9; }
.page-form .table.setting-table>tbody>tr>td { padding:10px 10px; border-bottom:1px solid #c9c9c9; }
.page-form .table.setting-table>tbody>tr.today>td { background:#e6e6e6; }
.page-form .table.setting-table>tfoot>tr>td { background:transparent; }
.page-form .table.setting-table .value-wrap .value { text-decoration:underline; }

/* 인기 키워드 */
.table.top-keywords-by-group-type {}

/* items wrap */
.items-wrap .table tr { border-bottom:1px solid #eee; }
.items-wrap .table tr:last-child { border-bottom:0; }

.items-wrap .table tr td { padding-top:18px; padding-bottom:0; border:0; }
.items-wrap .table tr td.cover { width:140px; padding-right:0; vertical-align:top; }
.items-wrap .table tr td.cover img { width:140px; height:140px; object-fit:cover; }
.items-wrap .table tr td.cover .empty { width:140px; height:140px;  background:#eee; position:relative; }
.items-wrap .table tr td.cover .empty .material-icons { position: absolute; color: #ccc; font-size: 50px; left: 50%; top: 50%; margin-top: -25px; margin-left: -25px; }
.items-wrap .table tr td.item-information { vertical-align:top; padding-bottom:18px; }
.items-wrap .table tr.more-wrap td { padding-top:5px; padding-bottom:5px; }

.item-information { position:relative; }
    .item-information h4 { display:inline-block; font-size:13px; line-height:20px; margin-bottom:4px; }
    .item-information p { font-size:13px; line-height:20px; height:40px; overflow:hidden; }
    
    .item-information .item-header { position:relative; }
    .item-information .item-header .right { position:absolute; right:0; /*top:3px;*/ top:0; }
    .item-wrap .item-information .item-header .right { top:0; font-size:12px; }

    .item-information .item-header span,
    .item-information .item-header a { color:#333; }
    .item-information .item-header a span,
    .item-information .item-header .right a { color:#304DF0; font-weight:400; }
    
    .item-information .item-header a:hover { color:#333; }

    .item-information .item-header .left span:before,
    .item-information .item-header .left a:before { display:inline-block; content:'·'; margin-left:4px; margin-right:6px; }
    .item-information .item-header .left span:first-child:before,
    .item-information .item-header .left a:first-child:before { display:none; }

    .item-information .item-footer { position:absolute; bottom:10px; font-size:12px; color:#A8A8A8; }
    .item-information .item-footer a,
    .item-information .item-footer span { display:inline-block; color:#888; text-decoration:none; }
    .item-information .item-footer a:hover { color:#666; }
    .item-information .item-footer a:after,
    .item-information .item-footer span:after { display:inline-block; content:'·'; margin-left:8px; margin-right:4px; }
    .item-information .item-footer a:last-child:after,
    .item-information .item-footer span:last-child:after { display:none; }

    .item-information .item-stats { border-top:1px dashed #EDEDED; padding-top:16px; margin-top:16px; }
    .item-information .item-stats .item-stat {}
    .item-information .item-stats .item-stat .value { display:block; color:#000000; font-size:16px; font-weight:bold; line-height:22px; }
    .item-information .item-stats .item-stat .key { display:block; color:#747474; font-size:12px; font-weight:500; line-height:22px; }

    .item-information .item-stats .item-stat.have-insight .value,
    .item-information .item-stats .item-stat.have-insight .key { color:#1D6089; word-break:keep-all; }

.item-wrap { position:relative; }
    .item-wrap .item-cover { position:absolute; left:0; top:0; width:140px; height:140px; }
    .item-wrap .item-cover img { width:140px; height:140px; object-fit:cover; }
    .item-wrap .item-information { margin-left:160px; }

/* table */

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tbody>tr>td { padding-left:8px; padding-right:8px; }

.table>thead>tr>th:first-child,
.table>thead>tr>th:last-child,
.table>tbody>tr>th:first-child,
.table>tbody>tr>th:last-child,
.table>tbody>tr>td:first-child,
.table>tbody>tr>td:last-child { padding-left:16px; padding-right:16px; }

.table tr.border-bottom-light td { border-top-color:#eee; border-top-style:dotted; }
.table tr td svg { vertical-align: text-bottom; display: inline-block; margin-right: 4px; height:16px; }
.table tr.point td { background: #f4f4f4; color: #000; font-weight: 500; border-bottom:1px solid #d4d4d4; }
.table tr td a.link { border-bottom:0; }
.table tr.b-t td { border-top:1px solid #ddd; }
.table tr.more-wrap td { text-align:center; border-top:1px solid #ddd; padding:0 !important; }
.table tr.more-wrap td a { display:block; }
.table tr.more-wrap td a:hover { background:#f3f3f3; }
.table tr.more-wrap td a:active { box-shadow:inset 0px 1px 1px rgba(0,0,0,.1); }
.table tr.more-wrap td a.disabled { overflow:hidden; }
.table tr.more-wrap td a.disabled .material-icons { display:none; }
.table tr.more-wrap td a.disabled:before { content:'로딩중..'; }
.table span.point { color:#666; }
.table span.note { display: inline-block; background: #feff9c; padding-left: 2px; padding-right: 2px; color: #333; }
.table span.good { display:inline-block; border-bottom:1px solid rgba(48, 77, 240, 0.5); }
.table span.bad { display:inline-block; border-bottom:1px solid rgba(240, 48, 77, 0.5); }

.table thead.muted tr {}
.table thead.muted tr th { color:#9F9F9F; font-size:13px; font-weight:normal; }

/* cover-wrap */
.table .cover-wrap { position:relative; padding-left:40px; }
.table .cover-wrap .cover { position: absolute; left: 6px; top: 50%; width: 25px; height: 25px; background: #eee; margin-top: -12.5px; }
.table .cover-wrap .cover img { width:25px; height:25px; object-fit:cover; border-radius:2px; }
.table .cover-wrap .cover img  { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition:0.3s all; }
.table .cover-wrap:hover .cover img {  -webkit-filter: grayscale(0%); filter: grayscale(0%); }

.table .cover-wrap.big { padding-left:78px; } 
.table .cover-wrap.big .cover { width:60px; height:60px; margin-top:-30px; }
.table .cover-wrap.big .cover img { width:60px; height:60px; }

.table .cover-wrap svg { opacity:0.5; }
.table .cover-wrap a.title { font-weight:500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.table .cover-wrap a.title:not(:hover) { color:#000; }
.table .cover-wrap a.link { position: absolute; right: 0; border-bottom: 0; font-size: 12px; vertical-align: top; font-weight:normal; background:rgba(255,255,255,0.8); }
.table .cover-wrap .extra { font-weight: normal; font-size: 12px; color:#999; margin-top: 10px; border-top: 1px dashed #eee; padding-top: 10px; }
.table .cover-wrap .extra a:not(:hover) { color:#999; }
.table .cover-wrap .extra a.link { right:16px; }
.table .cover-wrap .extra a.link:not(:hover) { color:#999; } 
.table .cover-wrap .extra .date:before { content:'·'; display:inline-block; margin-left: 4px; margin-right: 6px; color: #aaa; }

.table tr.point .cover-wrap a.title:not(:hover) { color:#000; }
.table tr.point .cover-wrap .extra { border-color:#ddd; }
.table tr.point .cover-wrap a.link { background:rgba(244,244,244,0.8); }

.table .views, .table .likes, .table .comments, .table .shares, .table .score, .table .score_likes, .table .score_comments, .table .score_views { padding-left: 20px; position: relative; display:inline-block; word-break:keep-all; }
.table .score_views:before,
.table .views:before { position:absolute; left:0; top:2px; display:inline-block; font-family: "Material Icons"; content: "visibility"; }
.table .score_likes:before, 
.table .likes:before { position:absolute; left:0; top:2px; display:inline-block; font-family: "Material Icons"; content: "whatshot"; }
.table .score_comments:before,
.table .comments:before { position:absolute; left:0; top:2px; display:inline-block; font-family: "Material Icons"; content: "comment"; }
.table .score_shares:before,
.table .shares:before { position:absolute; left:0; top:2px; display:inline-block; font-family: "Material Icons"; content: "share"; }
.table .score:before { position:absolute; left:0; top:0; display:inline-block; font-family: "Material Icons"; content: "stars"; }

/* ranking-vendor-table */
.ranking-vendor-table {}
.ranking-vendor-table td { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-vendor-table td .info { overflow: hidden; text-overflow: ellipsis; }
.ranking-vendor-table td.rank { width:45px; padding-right:5px; }
.ranking-vendor-table td.rank span { display:inline-block; font-size:12px; font-weight:500; color:#000; background:#EFEFEF; width:20px; height:20px; line-height:18px; text-align:center; border-radius:2px; }
.ranking-vendor-table td.info-wrap { padding-left:0; }
.ranking-vendor-table td.info-wrap img.profile { display:inline-block; width:20px; height:20px; margin-right:2px; vertical-align: text-bottom; }
.ranking-vendor-table td.info-wrap img.profile   { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition:0.3s all; }
.ranking-vendor-table tr:hover td.info-wrap img.profile  {  -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.ranking-vendor-table tr.point td { background:transparent; border-color:#eee; border-top:0; }
.ranking-vendor-table tr.point td.rank span { background:#8B8B8B; color:#fff; }

/* scrapper-table */
table.scrapper-table {}
table.scrapper-table tr.b-t {}
table.scrapper-table tr.b-t td { border-top:1px solid #ccc; }

table.scrapper-table tr.have-bg td { background-color:#f8f8f8; }
table.scrapper-table tr.selected td { background-color:#fff9e8; }

table.scrapper-table tr td a.link { border:0; font-size: 12px; }

table.scrapper-table tr td.cover { width:50px; vertical-align:top; }
table.scrapper-table tr td.cover img { width:50px; height:50px; object-fit:cover; border-radius:5px; }
table.scrapper-table tr td.cover .empty { width:50px; height:50px;  background:#eee; position:relative; }
table.scrapper-table tr td.cover .empty .material-icons {     position: absolute; color: #ccc; font-size: 26px; left: 50%; top: 50%; margin-top: -13px; margin-left: -11px; }

table.scrapper-table tr td h3 { font-size:14px; line-height: 14px; margin-bottom: 6px;  }
table.scrapper-table tr td h3 a:not(:hover) { color:#000; }
table.scrapper-table tr td h3 a.info-link { color:#aaa; font-size:12px; font-weight:normal; }
table.scrapper-table tr td p { color:#999; font-size:13px; line-height:16px; word-break:break-all; }

table.scrapper-table tr td .line-list { margin-top:5px; font-size:0; line-height:0; }
table.scrapper-table tr td .line-list li { display:inline-block; line-height:0; }
table.scrapper-table tr td .line-list li a { display: inline-block; background: #304DF0; color: #fff; font-size: 12px; line-height: 20px; font-weight: 500; padding: 0 5px; border-radius: 4px; }
table.scrapper-table tr td .line-list li .label { display: inline-block; font-size: 10px; line-height: 16px; font-weight: 500; padding: 0 5px; border-radius: 4px;  }
table.scrapper-table tr td .line-list li .label.new { background:#d97f4f; }
table.scrapper-table tr td .line-list li .label.hot { background:#d9534f; }
table.scrapper-table tr td .line-list li .label.date { background:transparent; color:#333; }
table.scrapper-table tr td .line-list li .label.date:before { display:inline-block; font-family: "Material Icons"; content: "access_time"; vertical-align:middle; margin-right:4px; }

table.scrapper-table tr td .line-list li { margin-right:5px; }
table.scrapper-table tr td .line-list li:last-child { margin-right:0; }
table.scrapper-table tr td .rank { display: inline-block; border: 1px solid #C3C3C3; border-radius: 4px; height: 26px; padding: 0 4px; color: #888; font-size: 12px; line-height: 24px; font-weight: 500 }
table.scrapper-table tr td .rank-1 { border-color:#304DF0; color:#304DF0; }
table.scrapper-table tr td .rank-2,
table.scrapper-table tr td .rank-3 { border-color:#666; color:#666  ; }

table.scrapper-table tr td .view-type-description h3 { font-weight: normal; line-height: 22px; display: block; }
table.scrapper-table tr td .view-type-description h3 a { }
table.scrapper-table tr td .view-type-description p { color: #2b2b2b; border: 1px solid #e2e2e2; padding: 10px; border-radius: 4px; margin-top: 5px; font-size:12px; line-height: 20px; box-shadow: 0px 1px 1px rgba(0,0,0,0.03); }
table.scrapper-table tr td .view-type-description p a { text-decoration:underline; }
table.scrapper-table tr td .view-type-description .line-list { margin-top:10px; }

.scrapper-info { position:relative; padding-left:70px; min-height:40px; }
.scrapper-info .cover { position:absolute; width:56px; height:100%; left:0; top:0; }
.scrapper-info .cover img { width:100%; height:100%; object-fit: cover; }
.scrapper-info .info { line-height:0; }
.scrapper-info .info h3 { font-size: 14px; line-height: 16px; color: #000000; margin-bottom: 4px; padding-top: 3px; }
.scrapper-info .info .extra { display:inline-block; font-size:13px; line-height:13px; color:#666; font-weight:normal; }
.scrapper-info .info .extra span { display:inline-block; }
.scrapper-info .info .extra span + span:before { content:'·'; display:inline-block; margin-left:3px; margin-right:6px; }

/* page header */
.page-header { position:relative; padding-bottom:16px; }
    .page-header h2 { color:#333; font-size:18px; font-weight:bold; }
    .page-header p { color:#707070; font-size:14px; letter-spacing:-0.5px; line-height:26px; }
    .page-header .right { position:absolute; right:0; top:0; }

.page-header nav { border-bottom:1px solid #CFCFCF; }
.page-header nav h2 { display:inline-block; font-size:16px; line-height:30px; padding-bottom:6px; font-weight:normal; color:#838383; margin-right:20px; }
.page-header nav h2 a:not(:hover) { color:#838383; }
.page-header nav h2:last-child { margin-right:0; }
.page-header nav h2.active { color:#333; font-weight:bold; position:relative; }
.page-header nav h2.active:after { position:absolute; content:''; width:100%; height:3px; background:#333; bottom:-1px; left:0; }
.page-header nav .right { top:4px; }

.page-header .page-header-tool { position:absolute; right:0; top:0; }
.page-header .page-header-tool .sep { display:inline-block; border-left:1px solid #ddd; height: 18px; vertical-align: middle; margin-left: 3px; margin-right: 4px; }

/* page tabs */
.page-tabs {}
    .page-tabs .box { overflow:hidden; }
    .page-tabs ul {height:30px; }
    .page-tabs ul li { display:inline-block; height:30px; }
    .page-tabs ul li a { display:inline-block; padding-left:18px; padding-right:18px; line-height:30px; color:#707070; font-size:13px; }
    .page-tabs ul li.active a { font-weight:500; color:#000000; background:#F0F0F0; }

/* targets */
.target-list { padding-top:60px; padding-bottom:60px; }
    
    .target-list .target-data {}
    .target-list .target-data > h3.title { color:#000; font-size: 15px; font-weight: bold; margin-bottom: 1rem; }

    .target-list .target-data .target-item { }
    .target-list .target-data .target-item .box-body { position:relative; }
    .target-list .target-data .target-item .box-body .box-tool { position:absolute; right:0.8rem; top:0.8rem; }

    .target-list .target-data .target-item .cover { position:relative; height:56px; margin-bottom:14px; }
    .target-list .target-data .target-item .cover .cover-item { pointer-events: none; width:56px; height:56px; position:absolute; top:0; left:0; box-shadow:1px 0px 0px rgba(0,0,0,0.1); border-radius:4px; background-color:#eee; background-repeat:no-repeat; background-size:cover; background-position:center; transition:0.3s; }
    .target-list .target-data .target-item .cover .cover-item:first-child { pointer-events:all; }

    .target-list .target-data .target-item .cover .cover-item a { position:absolute; left:0; top:0; width:100%; height:100%; }
    .target-list .target-data .target-item .cover .cover-item .material-icons { margin: 0 auto; display: block; text-align: center; margin-top: 16px; color: #aaa; }
    .target-list .target-data .target-item .cover .cover-item.view { transform: translate(40px, 0); }

    .target-list .target-data .target-item h3 { font-size:16px; font-weight:bold; color:#000; line-height:30px; margin-bottom:4px; }
    .target-list .target-data .target-item ul.social-networks { height:68px; }
    .target-list .target-data .target-item ul.social-networks li { display:block; padding-left:22px; position:relative; font-size:13px; line-height:20px; height:20px; margin-bottom:4px; color:#999; }
    .target-list .target-data .target-item ul.social-networks li:before { content: ''; width: 15px; height: 15px; border-radius: 2px; background: #eee; left: 0; top: 4px; display: block; position: absolute; }

    .target-list .target-data .target-item ul.social-networks li.active { color:#666; }
    .target-list .target-data .target-item ul.social-networks li.active:before { background:url(/img/icon_check.svg) no-repeat center #666; }

    .target-list .target-data .target-item ul.social-networks li:last-child { margin-bottom:0; }
    .target-list .target-data .target-item .extra { position:relative; margin-top:16px; padding-top:14px; border-top:1px solid #EDEDED; color:#9B9B9B; font-size:13px; line-height:13px; }
    .target-list .target-data .target-item .extra a.icon { position: absolute; right: 0; top: 50%; margin-top: -2px; color: #9B9B9B; }
    .target-list .target-data .target-item .extra a.icon .material-icons { font-size:20px; }

/* target setting */
.target-setting-wrap {}
.target-setting-wrap .page-header { padding-bottom: 13px; border-bottom: 1px solid #ddd; margin-bottom: 16px; }

/* UI */
.popover{
    min-width:200px;
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

/* dashboard */
.dashboard-wrap { padding-bottom:16px; }

/* PAGINATION */
.pagination-wrap { text-align:center; }
    .pagination-wrap .page-wrap { line-height:0; }

    .pagination { margin:40px 0; }
    .pagination>li>a, .pagination>li>span { border:0; border-radius:4px; margin-left:4px; margin-right:4px; font-size:15px; color:#666; transition:all ease-in-out 0.2s; }
    .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color:#3fcc91; }

/* channel info */
.channel-infos {}
.channel-infos .channel-info-header { position:relative; margin-bottom:10px; padding-bottom:5px; }
.channel-infos .channel-info-header h3 { font-size:14px; font-weight:bold; padding-top: 5px; color: #000; }
.channel-infos .channel-info-header .tool { position:absolute; right:0; top:0; }
.channel-infos .channel-info-wrap .less-tool  { display:none; }

.channel-infos .channel-info-wrap.less-mode { position:relative; max-height: 160px; overflow: hidden; }
.channel-infos .channel-info-wrap.less-mode .less-tool { position: absolute; bottom: 0; display: block; text-align: center; width: 100%; background: #f4f4f4c7; padding-top: 10px; padding-bottom: 10px; box-shadow: inset 0px -10px 10px #f4f4f4; }
.channel-infos .channel-info-wrap.less-mode .less-tool a { }

.channel-info-box { position:relative; height:114px; padding:12px; }
.channel-info-box .profile { display:none; position:absolute; left:12px; top:12px; width:90px; height:90px; background:#eee; }
.channel-info-box .info { position:relative; margin-left:0; height:90px; }
.channel-info-box .info h4 { font-size:15px; color:#000; font-weight:bold; margin-bottom:4px; }
.channel-info-box .info .stats { font-size:13px; color:#404040; font-weight:normal; }
.channel-info-box .info .buttons { position:absolute; left:0; bottom:0; }

.channel-info-box.have-profile .profile { display:block; }
.channel-info-box.have-profile .info { margin-left:114px; }

/* PLUGIN */
#wrapper .apexcharts-tooltip * { line-height:20px; }
#wrapper .apexcharts-tooltip-y-group { padding:0; }

#wrapper .apexcharts-canvas svg:not(:root) { overflow:visible; }

#wrapper .jqstooltip { width: auto !important; height: auto !important; font-family:'Noto Sans KR'; display:block; }

/* Changeslog */
.changes #HW_badge_cont { width:auto; }
.changes #HW_badge_cont:before { content: '변경사항'; display: inline-block; margin-right: 5px; vertical-align: top; }
.changes #HW_badge { position: initial; display: inline-block; vertical-align: top; }
#HW_frame_cont.HW_visible { margin-left: 15px; margin-top: -10px !important; }

/* bootstrap select */
.bootstrap-select > .dropdown-toggle { padding-left:10px; }
.bootstrap-select.max-option-text .filter-option { max-width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.bootstrap-select.max-option-text-md .filter-option { max-width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.bootstrap-select.max-option-text-lg .filter-option { max-width: 250px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.dropdown-menu .divider { margin:4px 0; }

/* progress */
.vote-progress {
    width: 50px;
    display: inline-block;
    vertical-align: middle;
    height: 8px;
    margin: 0;
    margin-left: 5px;
    margin-top:5px;
    border-radius: 2px;
    float:right;
}

.vote-progress .progress-bar { border-radius:2px; }

/* nav-content-tab */
ul.nav-content-tabs { display:flex; margin-bottom:1.5rem; background:#F7F7F7; border-radius:4px; overflow:hidden; }
div.nav-content-tabs { margin-bottom:1.5rem; background:#F7F7F7; border-radius:4px; overflow:hidden; }
div.nav-content-tabs ul { display:flex; }
.nav-content-tabs li { flex:1 1 0%; }
.nav-content-tabs li a { white-space:nowrap; position:relative; display:block; text-align:center; color:#696969; padding:8px; font-size:13px; box-shadow:inset -1px 0 #e3e8ee; transition:0.3s; }
.nav-content-tabs li a.disabled { pointer-events: none; opacity: 0.4; background: #e2e2e2; text-shadow: 0px 1px rgba(255,255,255,1); }
.nav-content-tabs li a:hover { color:#000; background:#fafafa; }
.nav-content-tabs li.active a { background:#fff; color:#4C78FF; font-weight:bold; text-decoration:none; }
.nav-content-tabs li.active a:after { content:''; position:absolute; width:100%; height:3px; background:#4C78FF; left:0; bottom:0; }
div.nav-content-tabs .sub-tabs { border-top:1px solid #CBCBCB; background:#EDEDED; padding:8px 20px; padding-bottom:11px; font-size:0; line-height:0; }
div.nav-content-tabs .sub-tabs a { display:inline-block; font-size:13px; color:#707070; line-height:24px; }
div.nav-content-tabs .sub-tabs a:hover { color:#000; }
div.nav-content-tabs .sub-tabs a.selected { position:relative; font-weight:bold; color:#000; }
div.nav-content-tabs .sub-tabs a.selected:before { content:''; position:absolute; bottom:0; left:0; right:0; background:#3338F0; height:2px; }
div.nav-content-tabs .sub-tabs a + a { margin-left: 20px; }

.nav-content-tabs.sm li a { font-size:12px; padding:6px; }

span.label-rank { display:inline-block; padding-left:5px; padding-right:5px; height:20px; font-size:13px; line-height:20px; text-align:center; font-weight:bold; border-radius:4px; background:#8E8E8E; color:#fff; }
span.label-rank-1 { background:#3338F0; }
span.label-rank-2 { background:#9FA1FF; }

/* timeline-wrap */
.timeline-wrap { position:relative; }
.timeline-wrap .one-size {  font-size:11px; display:inline-block; width:120px; height: 34px; }
.timeline-wrap .timeline-title { height:34px; border-bottom:1px solid #eaeaea; }
.timeline-wrap .timeline-title .title { display:inline-block; line-height: 34px; font-size:12px; font-weight:500; }

.timeline-wrap .timeline-menu { max-width:300px; border-right:1px solid #EAEAEA; }
.timeline-wrap .timeline-menu ul {}
.timeline-wrap .timeline-menu ul li { position:relative; font-size:13px; height: 34px; overflow: hidden; word-break: break-all; padding-left:40px; padding-right:12px; padding-top:5px; padding-bottom:5px; }
.timeline-wrap .timeline-menu ul li:last-child { margin-bottom:0; }
.timeline-wrap .timeline-menu ul li:nth-child(even) { background-color:#F8F8F8; }
.timeline-wrap .timeline-menu ul li span.rank { position:absolute; left:12px; top:7px; border-radius:2px; width:20px; height:18px; line-height:15px; border:1px solid #6C6C6C; color:#6C6C6C; font-size:12px; text-align:center; font-weight:bold; }
.timeline-wrap .timeline-menu ul li span.point { position:absolute; right:12px; top:5px;  text-align:right; color:#434343; background:#fff; box-shadow:-5px 0px 5px rgba(255,255,255,1); }
.timeline-wrap .timeline-menu ul li:nth-child(even) span.point { background:#f8f8f8; box-shadow:-5px 0px 5px rgba(248,248,248,1); }

.timeline-wrap .timeline-data {  position: absolute; left: 300px; top: 0; right: 0; bottom: 0; overflow:hidden; }
.timeline-wrap .timeline-data .timeline-title .title { border-right: 1px solid #eaeaea; padding-left: 10px;  }
.timeline-wrap .timeline-data .timeline-title .title:last-child { border-right:0; }

.timeline-wrap .timeline-data .timeline-data-content { min-width:100%; width:1000px; font-size:0; }
.timeline-wrap .timeline-data .timeline-data-content .line { height:34px; transition:background 0.1s; }
.timeline-wrap .timeline-data .timeline-data-content .line:nth-child(even) { background-color:#F8F8F8; }
.timeline-wrap .timeline-data .timeline-data-content .line:hover { background:#f0f0f0; }

.timeline-wrap .timeline-data .timeline-data-content .line .graph { display:block; border-radius:30px; margin-left:6px; margin-right:6px; margin-top:12px; height:15px; background:#8E8E8E; }
.timeline-wrap .timeline-data .timeline-data-content .line .not-have-data .graph { display:none; }
.timeline-wrap .timeline-data .timeline-data-content .line .have-data { position:relative; }
.timeline-wrap .timeline-data .timeline-data-content .line .have-data + .have-data:before { content:''; position:absolute; left:-20px; width:40px; height:15px; top:12px; }

.timeline-wrap .timeline-data .timeline-data-content .line .color-1 .graph { background:#3338F0; }
.timeline-wrap .timeline-data .timeline-data-content .line .color-2 .graph { background:#9FA1FF; }

.timeline-wrap .timeline-data .timeline-data-content .line .color-3 + .color-3:before { background:#8e8e8e; }
.timeline-wrap .timeline-data .timeline-data-content .line .color-2 + .color-2:before { background:#9FA1FF; }
.timeline-wrap .timeline-data .timeline-data-content .line .color-1 + .color-1:before { background:#3338F0; }

/* rank list */
.rank-list {}
.rank-list .rank-item { display:block; padding:4px 15px; border-bottom:1px solid #eee; }
.rank-list .rank-item:nth-child(6n+1),
.rank-list .rank-item:nth-child(6n+2),
.rank-list .rank-item:nth-child(6n+3) { background:#fafafa; }

.rank-list .rank-item:last-child { margin-bottom:0; border-bottom:0; }
.rank-list .rank-item .rank-index { border-radius:2px; width:20px; height:18px; line-height:15px; border:1px solid #6C6C6C; color:#6C6C6C; font-size:12px; text-align:center; font-weight:bold; display:inline-block; vertical-align:middle; margin-right:8px; }
.rank-list .rank-item .rank-index-1 { border-color:#3338F0; background:#3338F0; color:#fff; }
.rank-list .rank-item .rank-index-2 { border-color:#9FA1FF; background:#9FA1FF; color:#fff; }
.rank-list .rank-item .rank-index-3 { border-color: #666; background:#666; color: #fff; }

.rank-list .rank-item .rank-value { display:inline-block; vertical-align:middle; font-size:13px; }

/* tag-list */
.tag-list-container { margin-bottom:-10px; }
.tag-list-wrap { display:inline-block; border-right:1px solid #dedede; padding-right:5px; margin-right:10px; }
.tag-list-wrap:last-child { border-right:0; margin-right:0; }
ul.tag-list { font-size:0; display:inline-block; }

ul.tag-list li { display:inline-block; vertical-align: middle; margin-bottom:10px; }
ul.tag-list li.tag-item-tools { display:block; margin-bottom:0; }
ul.tag-list li.tag-item { padding:6px 8px; color:#000; font-weight:bold; font-size:12px; line-height:14px; border-radius:4px; border:1px solid #CECECE; box-shadow:0px 1px 2px rgba(0,0,0,0.05); background:#fff; margin-right:10px; }
ul.tag-list li.sep { margin-left: 13px; margin-right:13px; width:1px; height:18px; background: #DBDBDB; }
ul.tag-list li.tag-item span.text { display:inline-block; vertical-align: middle; }
ul.tag-list li.tag-item a.clear { display:inline-block; vertical-align: middle; }

ul.tag-list li.tag-item.is-good { border: 1px solid #0a00a2; background: #e8e4ff; color: #0a00a2; }
ul.tag-list li.tag-item.is-good a.clear { color:#0a00a2; }
ul.tag-list li.tag-item.is-bad { border: 1px solid #a20000; background: #ffd3c5; color:#a20000; }
ul.tag-list li.tag-item.is-bad a.clear { color:#a20000; }

/* positive-rates */
dl.positive-rates { position:relative; height:22px; }
dl.positive-rates dt { width:160px; position:absolute; left:0; top:0; font-weight:500; color:#000; font-size:13px; line-height:22px; }
dl.positive-rates dd { margin-left:160px; position:relative; height:22px; }
dl.positive-rates dd .text { font-size:12px; line-height:22px; color:#000; font-weight:500; text-align: right; width: 100px; display: inline-block; }
dl.positive-rates dd .bar { display:inline-block; position:absolute; left:110px; right:0px; } 
dl.positive-rates dd .bar .bg { display:inline-block; position:absolute; background:#F0F0F0; top:5px; width:100%; height:18px; border-radius:4px; }
dl.positive-rates dd .bar .now { display:inline-block; position:absolute; background:#3338F0; left:0; top:5px; height:18px; border-radius:4px; }
dl.positive-rates dd .bar .now.same-now-avg { border-top-right-radius: 0; border-bottom-right-radius: 0;}
dl.positive-rates dd .bar .avg { display: inline-block; position: absolute; border-left: 2px solid #000; color: #000; top: 0; height: 28px; width: 0; }

/* info group */
.info-group { margin:0; padding:0; position:relative; padding-left:18px; font-size:13px; line-height:21px; font-weight:normal; }
.info-group:before { content:''; display:block; position:absolute; left:0; top:0; bottom:0; width:6px; background:#747474; border-radius:2px; }

/* count title */
main .content .empty-count-title { height:45px; }
main .content .count-title { min-width:40px; line-height: 25px; height: 45px; display:inline-block; }
main .content .count-title + .count-title { margin-left:20px; }
main .content .count-title .title { display:block; font-size:12px; font-weight:500; line-height:15px; margin-bottom:5px; color:#333; vertical-align: bottom; }
main .content .count-title .count { display:block; font-size:24px; font-weight:bold; color:#333; vertical-align: middle; margin-right:6px; }

/* count text */
main .content .empty-count-text { height:25px; }
main .content .count-text { line-height: 25px; height: 25px; }
main .content .count-text .count { display:inline-block; font-size:25px; font-weight:bold; color:#4D4F5C; vertical-align: middle; margin-right:6px; }
main .content .count-text .text { display:inline-block; font-size:13px; font-weight:500; line-height:15px; color:#333; vertical-align: bottom; }

@media (max-width: 1380px) {
    main .content .empty-count-text { padding-top:10px; height:40px;}
    main .content .count-text { height:40px; }
    main .content .count-text .text { display:block; margin-top:6px; }
}

main .content > h3 { font-size:17px; color:#000000; font-weight:bold; margin:0; margin-bottom: 14px; }
main .content > h4 { font-size:15px; color:#9A9A9A; font-weight:500; margin-bottom:14px; }
main .content > h4 strong { font-weight:bold; color:#000; }

main .content dl { margin-bottom:10px; }
main .content dl:last-child { margin-bottom:0; }
main .content dl dt { font-weight:normal; }
main .content dl dd { font-weight:normal; }

/* iframe */
#iframe-site { position:absolute; border: none; width: 100%; display: block; height: 100%; }

/* page-form */

.page-form {}
.page-form .form-header { position:relative; padding:0; padding-bottom:24px; margin-bottom: 22px; border-bottom:1px solid #D5D5D5; }
    .page-form .form-header h3 { font-size:16px; font-weight:bold; margin:0; color:#000000; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 20px; }
    .page-form .form-header h3 span.success { color:#3147F0; }
    .page-form .form-header h3 span.fail { color:#CC0000; }
    .page-form .form-header div { font-size:14px; color:#797979; line-height:21px; }
    .page-form .form-header div a { color:#434343; font-weight:500; }
    .page-form .form-header small { display:block; font-size:13px; margin-top:10px; }
    .page-form .form-header .form-tool { position:absolute; right:0; top:0; }

.page-form .form-hint { padding: 10px 15px; border: 1px solid #ccc; background: #fff; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0,0,0,0.1); }

.page-form .form-info { border-bottom:1px solid #D5D5D5; padding-bottom:24px; margin-bottom: 20px; }
.page-form .form-info h3 { font-size:13px; color:#000000; margin:0; margin-bottom:4px; font-weight:bold; }

.page-form table.table>thead>tr>th, 
.page-form table.table>tbody>tr>td { padding:4px 0; border-color:transparent; }

.page-form table.table a { font-weight:400; }
/*.page-form table.table a .material-icons { opacity:0; transition:0.2s; }
.page-form table.table a:hover .material-icons { opacity:1; }*/

.page-form .form-footer { border-top:1px solid #D5D5D5; padding-top:24px; }
.page-form .form-header + .form-footer { border-top:0; padding-top:0; }

/* Crawler Edit */
.crawler-edit-wrap { position:relative; height:calc(100vh - 46px); }
.crawler-edit-wrap .left { position:absolute; left:0; top:0; width:50%; height:100%; }
.crawler-edit-wrap .right { position:absolute; right:0; top:0; width:50%; height:100%; border-left:1px solid #D1D1D1; }

.crawler-edit-wrap .header { height:53px; padding:12px; border-bottom:1px solid #D1D1D1; }
.crawler-edit-wrap .header .sep { display: inline-block; height: 16px; margin-left: 8px; margin-right: 10px; vertical-align: middle; border-left: 1px solid #ddd; }
.crawler-edit-wrap .header nav { font-size:0; display:inline-block; margin-left: -12px; margin-top: -12px; margin-bottom: -12px; }
.crawler-edit-wrap .header nav a { font-size:14px; display:inline-block; line-height:52px; color:#B9B9B9; padding-left:15px; padding-right:15px; text-decoration:none; }
.crawler-edit-wrap .header nav a + a { border-left:1px solid #D1D1D1; }
.crawler-edit-wrap .header nav a.selected { height:53px; color:#000; font-weight:bold; background:#f4f4f4; }
.crawler-edit-wrap .header nav a.selected:last-child { border-right:1px solid #d1d1d1; }

.crawler-edit-wrap .edit-content { position:relative; width: 100%; height: calc(100% - 53px); overflow:hidden; }
.crawler-edit-wrap .edit-content .loading { display:none; position:absolute; left:0; top:0; width:100%; height:100%; z-index:100; background:rgba(244,244,244,0.9); }
.crawler-edit-wrap .edit-content .loading.show { display:block; }
.crawler-edit-wrap .edit-content .loading .spinner { position:absolute; zoom:0.5; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; }

.crawler-edit-wrap .jsoneditor { border:0; }
.crawler-edit-wrap pre,
.crawler-edit-wrap .CodeMirror { border:0; background:transparent; overflow-y:auto; height:100%; }

.crawler-edit-wrap div.jsoneditor-value.jsoneditor-string { font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new","Noto Sans KR",courier,monospace,sans-serif; }
.crawler-edit-wrap .jsoneditor-tree select { line-height: 23px; height: 25px; vertical-align: middle; margin-top: 4px; }

/* BUZZ */
.buzz-graph-wrap { margin-bottom: 20px; margin-top: 20px; }
.buzz-graph-wrap h3 { font-size:13px; font-weight:bold; text-align:center; margin:0; margin-bottom:10px; color:#000; }
.buzz-graph { position:relative; width:200px; height:100px; margin:0 auto; }
.buzz-graph .buzz-before,
.buzz-graph .buzz-now { position:absolute; border-radius:50%; }
.buzz-graph .buzz-before { background:rgba(49,71,240,0.3); }
.buzz-graph .buzz-now { background:rgba(236,71,78,0.7); }
.buzz-graph .buzz-now.point { background:rgba(236,71,78,1); box-shadow:0px 0px 10px rgba(235,71,78,0.6); }
.buzz-graph .buzz-text-wrap { position:absolute; left:0; top:50%; margin-top:-12px; line-height:24px; width:100%; text-align:center; }
.buzz-graph .buzz-text-wrap .buzz-text { color:#000; font-size:12px; font-weight:500; display:inline-block; text-shadow:0px 1px 2px rgba(0,0,0,0.2) }

.buzz-graph-label { display:inline-block; font-size:12px; }
.buzz-graph-label:before { display:inline-block; content:''; border-radius:50%; background:rgba(236,71,78,0.7); width:16px; height:16px; margin-right:5px; vertical-align: middle; margin-top:-2px; }

.buzz-before-graph-label { display:inline-block; margin-left:14px; font-size:12px; }
.buzz-before-graph-label:before { display:inline-block; content:''; border-radius:50%; background:rgba(49,71,240,0.3); width:16px; height:16px; margin-right:5px; vertical-align: middle; margin-top:-2px; }

.buzz-daily { width: 100%; margin-bottom:20px; padding-left:5%; padding-right:5%; position:relative; }
.buzz-daily:before { content: ''; left: 0; top: 50%; border-top: 1px solid #eaeaea; position: absolute; right: 0; margin-left: -5%; margin-right: -5%; margin-top: 17px; }
.buzz-daily-item { float: left; width: 9.1%; margin-left: -1%; margin-right:-1%; }
.buzz-daily .buzz-graph-wrap {}
.buzz-daily .buzz-graph-wrap h3 { font-size:13px; font-weight:bold; text-align:center; margin:0; margin-bottom:10px; color:#000; }
.buzz-daily .buzz-graph-wrap .buzz-graph { width: 100%; height: auto; padding-top: 100%; }
.buzz-daily .buzz-graph-wrap .buzz-graph .buzz-now { width: 100%; height: auto; padding-top: 100%; margin-top: -50%; margin-left: -50%; left: 50%; top: 50%; }
.buzz-daily .buzz-graph-wrap .buzz-graph .buzz-text-wrap .buzz-text { font-size:14px; }


/* loading spinner */
.loading-data {
    transition:opacity 0.3s;
    opacity:0.5;
}

.loading {
    text-align: center;
}
.loading.v-middle {
    position: absolute;
    left:50%; top:50%;
    margin-left: -80px;
    margin-top: -80px;
}
.loading.sm {
    transform: scale(0.5);
}
.loading.sm.v-middle {
    margin-left: -40px;
    margin-top: -40px;
}
.loading-finish .loading {
    opacity:0;
}
.lds-spinner { color: official; display: inline-block; position: relative; width: 80px; height: 80px; } .lds-spinner div { transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite; } .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 37px; width: 6px; height: 18px; border-radius: 20%; background: #aaa; } .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } }


/* CODE IGNITER */
#codeigniter_profiler { padding-left:160px !important; background:transparent !important; }
#codeigniter_profiler td { line-height:18px; word-break:normal; }
#codeigniter_profiler code { padding:0; background:transparent; }

/* SaaS Info */
.saas-application-info { border-top: 1px solid #eee; padding-top: 8px; margin-top: 8px; font-size: 12px; }
.saas-application-info span { display:inline-block; line-height: 18px; vertical-align: middle;  }
.saas-application-info span + span { margin-left:4px; }

.saas-application-info span.title { font-size:11px; }
.saas-application-info span.success { font-weight:bold; font-size:10px; padding:0 4px; border-radius:4px; background:#5cb85c; color:#fff; }
.saas-application-info span.warning { font-weight:bold; font-size:10px; padding:0 4px; border-radius:4px; background:#f0ad4e; color:#fff; }
.saas-application-info span.danger { font-weight:bold; font-size:10px; padding:0 4px; border-radius:4px; background:#d9534f; color:#fff; }

.saas-stats-count { display: grid; gap:4px 10px; justify-content: space-evenly; grid-template-columns: repeat(2, 1fr); }
.saas-stats-count li { margin:0 !important; }
.saas-stats-count li .title { font-weight:bold; }