main > .page-holder.login { margin-top:5rem;color:#444; }
#navbar-toggle i.material-icons { margin-right:0.25rem;font-size:1.3rem;color:#20a2bd;}
i.material-icons { position:relative;top:0.1rem; }

/*header .navbar-collapse .nav-item > a { border-bottom:2px solid transparent;color:#fff;transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;} */
#navbar-toggle .nav-item > a { border-bottom:2px solid transparent;color:#fff;transition: all 0.5s ease;}
#navbar-toggle .nav-item > a:hover,
#navbar-toggle .nav-item > a.on {
  color:#96e5fb;;
  border-bottom:2px solid #96e5fb;;
  box-shadow: 0px 0px 2px rgba(223, 220, 64,0);
}
body { background:#f9f9f9; }

#navbar-toggle a.on p { color:#40c4df; }
#navbar-toggle a:hover i.mdi::before,
#navbar-toggle a.on i.mdi::before { color:#40c4df; }
header .nav-item { white-space:nowrap; }
main .container table { width:100%; }

#navbar-toggle .nav-item button {background-color:transparent;border:none;}
#navbar-toggle .nav-item button > i.material-icons {position:relative;top:4px !important; }
/*
table.responsive {max-width: 100%;}
table.responsive.table-sm {font-size:0.95rem;}
table.responsive thead th {white-space:nowrap;}
table.responsive tbody tr:nth-child(odd) {background-color:rgba(192,192,192,0.2); }
table.responsive tbody tr:hover { background-color:rgba(192,192,192,0.5); }

table.responsive th, table.responsive td { text-align:left;padding:0.15rem 0.5rem;vertical-align:middle; }
table.responsive th .btn-sm, table.responsive td .btn-sm { font-size:0.95rem;padding:0.15rem 0.5rem; }
table.responsive td::before { display: none; }
@media screen and (max-width: 680px) {
 table.responsive {border: 0;display: block;box-shadow: none;}
 table.responsive thead {position: absolute;opacity: 0;}
 table.responsive tbody {display: block;width: 100%;min-width: 19em;max-width: 25em;}
 table.responsive tr { border-top: 2px solid #3c3c3b;border-bottom: 1px solid #3c3c3b;display: grid;grid-template-columns: max-content auto;margin-bottom: 1em;}
 table.responsive td { display: contents;}
 table.responsive td::before { display: inline-block; font-weight: bold; padding: 0.5em; border-bottom: 1px solid; }
 table.responsive td span { padding: 0.5em; border-bottom: 1px solid; }
 table.responsive td:last-child { border-bottom: 0; }
}
*/
.pagination .ellipsis {padding:0.2rem 0.5rem;display:inline-block; }
.page-link { padding:.3rem .57rem; }

header > nav.navbar {background-color:#262626; }
a.navbar-brand > img {height:35px;}

tbody tr.bg-alt { background-color:rgba(64,255,64,0.1) !important; }
.chart h3 { font-size:1.1rem; }

.card.trend {padding-left:0;padding-right:0;margin:0;}
.card-header h3 { font-size:1.1rem;white-space:nowrap; }
main.dashboard .card.trend .card-header { background-color:#fff; }
main.dashboard .card.trend .card-header { font-size:1.12rem;font-weight:500; }
main.dashboard .card.trend.rounded-left .card-body { border-bottom-left-radius:0.25rem !important; }
main.dashboard .card.trend.rounded-right .card-body { border-bottom-right-radius:0.25rem !important; }

main.dashboard .card.trend .card-body dt { font-size:1.2rem; }
main.dashboard .card.trend .card-body dd { font-size:0.8rem; }
main.dashboard .card.trend .card-body dd small { padding-left:0.07rem; }
main.dashboard .card.trend .card-body dd.up { color:blue; }
main.dashboard .card.trend .card-body dd.down { color:green; }
main.dashboard .card.trend .card-body dd i.material-icons { font-size:1.1rem;position:relative;top:0.25rem; }
/*
main.dashboard .card.trend .card-body .d-flex .up i.material-icons { font-size:1.3rem; }
main.dashboard .card.trend .card-body .d-flex .down i.material-icons { font-size:1.3rem; }
*/

.card-body.p-0 > table thead th { border-top:0; }
.card.trend h3 + .d-flex > span { padding:0.2rem 0.5rem; }
.card.trend h3 + .d-flex > span:first-child { border-right:1px solid rgba(64,64,64,0.1); }
/* .card.trend .card-body .text-value { font-size:1.2rem;text-align:center;font-weight:bold; } */
main.log .card.trend .card-body.text-value,
main.blacklist .card.trend .card-body.text-value { font-size:1.1rem; }

.card.trend h3 > i.material-icons { font-size:1.4rem;font-weight:bold;margin-left:0.2rem;position:relative;top:0.4rem;}
/*
.card.trend.up { color:blue; }
.card.trend.down { color:green; }
*/
.card.trend .text-value > small { padding-left:0.12rem; }


.card.trend i.material-icons.up { color:blue; }
.card.trend i.material-icons.down { color:green; }
.card.trend i.material-icons.flat { color:lightgray; }
.card.trend ul { list-style-type:none;padding:0;margin:0; }
.card.trend ul li { padding-top:0.2rem;padding-bottom:0.2rem; }
.card.trend ul li small {padding-left:0.08rem; }
.card.trend ul li span.up,
.card.trend ul li span.up + small { color:blue; }
.card.trend ul li span.down,
.card.trend ul li span.down + small { color:green; }
.card.trend ul li span.up + small, .card.trend ul li span.down + small { padding-left:0.01rem; }
.card.trend ul.ago { font-size:0.84rem; }
.card.trend ul.ago li { margin-top:0.06rem; }


input[name="days"].has-label,
input[name="ago"].has-label  { display:none; }
input[name="days"].has-label + label,
input[name="ago"].has-label + label { cursor:pointer; }
input[name="days"]:checked.has-label + label ,
input[name="ago"]:checked.has-label + label { background-color:#dc3545;border-color:#dc3545; }

.d-flex > .card.pageview { width:70%; }
.d-flex > .card.device { width:29.6%; }


/*
.breadcrumb-arrow{height:36px;padding:0;line-height:36px;list-style:none;background-color:#e6e9ed}
.breadcrumb-arrow li:first-child a{border-radius:4px 0 0 4px;}
.breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span{display:inline-block;vertical-align:top}
.breadcrumb-arrow li:not(:first-child){margin-left:-5px}
.breadcrumb-arrow li+li:before{padding:0;content:""}
.breadcrumb-arrow li span{padding:0 10px }
.breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span{height:36px;padding:0 10px 0 25px;line-height:36px }
.breadcrumb-arrow li:first-child a{ padding:0 10px; }
.breadcrumb-arrow li a{ position:relative;color:#fff;text-decoration:none;background-color:#00116f;border:1px solid #00116f }
.breadcrumb-arrow li:first-child a{ padding-left:10px }
.breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before{ position:absolute;top:-1px;width:0;height:0;content:'';border-top:18px solid transparent;border-bottom:18px solid transparent }
.breadcrumb-arrow li a:before{ right:-10px;z-index:3;border-left-color:#00116f;border-left-style:solid;border-left-width:11px }
.breadcrumb-arrow li a:after{ right:-11px;z-index:2;border-left:11px solid #0000cd; }
.breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover{ background-color:#0000cd;border:1px solid #0000cd; }
.breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before{ border-left-color:#0000cd; }
.breadcrumb-arrow li a:active{ background-color:#00008b;border:1px solid #00008b; }
.breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before{ border-left-color:#00008b; }
.breadcrumb-arrow li span{ color:#434a54; }
*/
ul.breadcrumb > li.breadcrumb-item:first-child { border-left:6px solid #116dcf;padding-left:0.5rem;font-weight:bold;font-size:1.3rem; }


#geoip-location { height:420px; }

.wiggle { animation:wiggle 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px;}
@keyframes wiggle{
  10%, 90% {transform: translate3d(-1px, 0, 0);}
  20%, 80% {transform: translate3d(2px, 0, 0);}
  30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
  40%, 60% {transform: translate3d(4px, 0, 0);}
}


i.material-icons.pc { color:dimgray;}
i.material-icons.mobile {color:royalblue;}

.d-flex.by-5 > .container { width:20%; }


.switch { position:relative; display:inline-block;width:60px;height:26px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s; }
.slider:before { position:absolute; content:""; height:18px; width:18px; left:4px; bottom:4px; background-color:white; -webkit-transition:.4s; transition:.4s; }
input:checked + .slider { background-color:#2196F3; }
input:focus + .slider { box-shadow:0 0 1px #2196F3; }
input:checked + .slider:before {
  -webkit-transform:translateX(30px);
  -ms-transform:translateX(30px);
  transform:translateX(30px);
}
.slider.round { border-radius:26px; }
.slider.round:before { border-radius:50%; }
label.switch input + .slider:after {
  z-index:100;
  padding-top:2px;
  position:absolute;
  left:32px;
  content:"끔";
  color:#999;
  font-size:0.85rem;
}
label.switch input:checked + .slider:after {
  left:8px;
  content:"켬";
  color:#fff;
}

td .input-group-sm .switch { position:relative; display:inline-block;width:48px;height:20px; }
td .input-group-sm .slider:before { height:16px;width:16px;left:4px;bottom:2px;}
td .input-group-sm input:checked + .slider:before {
  -webkit-transform:translateX(24px);
  -ms-transform:translateX(24px);
  transform:translateX(24px);
}
td .input-group-sm .slider.round { border-radius:12px; }
label.switch.notification input + .slider:after {
  z-index:100;
  padding-top:1px;
  position:absolute;
  left:28px;
  content:"끔";
  color:#999;
  font-size:0.7rem;
}
label.switch.notification input:checked + .slider:after {
  left:8px;
  content:"켬";
  color:#fff;
}


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[type="number"]:hover, input[type="number"]:focus { -moz-appearance: number-input; }

.card.chart canvas+.legend { font-size:0.9rem; }

header .visual {border-bottom:1px solid #ccc;display:flex;justify-content:space-between;align-items:end;margin-top:1rem; }
header .visual .stuff { width:312px;height:85px;background:url("/i/stuff.png") no-repeat 0 0; }
header .visual h1 { color:#888;font-size:1.3rem;font-weight:500;letter-spacing:-0.02rem;padding-bottom:0.8rem;padding-left:0.5rem; }
header .visual h2 { font-size:1.3rem;font-weight:500; }

.card-header .nav-tabs a { color:#888; }
.card-header .nav-tabs a.active { color:#00116f; }

.pagination .page-item.active .page-link {
  background-color:#343a40;
  border-color:#343a40;
  color:#fff;
}

.pagination .page-item .page-link { color:#495057; }

.pagination .page-item::focus { outline:0;box-shadow:0 0 0 transparent; }
.pagination .disabled .page-item::focus { outline:0;box-shadow:0 0 0 transparent; }

.pagination .page-item a.page-link:hover,
.pagination .page-item a.page-link:active,
.pagination .page-item a.page-link:focus { outline:0;box-shadow:0 0 0 .2rem rgba(196,196,196,.2); }

.d-flex > .card:first-child.rounded-left { border-top-right-radius:0 !important;border-bottom-right-radius:0 !important; }
.d-flex > .card:last-child.rounded-right { border-top-left-radius:0 !important;border-bottom-left-radius:0 !important; }

time > .time { color:999 !important; }

table.table.narrow { font-size:0.84rem;letter-spacing:-0.04rem; }
table.table.narrow td.narrow { font-size:0.82rem; }

table.table.narrow .input-group-sm .switch { top:0.15rem; }
table.table.narrow td button.btn-sm { font-size:0.85rem; }
/* table.table.narrow td .notification:not(.switch) { max-height:0.84rem;} */
table.table.narrow td .notification button.btn-sm { font-size:1rem;line-height:1rem; }

table.table tbody tr.ad td { background-color:rgba(152,251,152,0.1); }
table.table tbody tr.channel td { background-color:rgba(64,224,208,0.1); }
td.staff > .item {font-size:0.9rem;font-weight:normal;border:1px solid rgba(123,123,123,0.05) }
td.staff > .item:after { content:", ";color:#888; }
td.staff > .item:last-child:after { content:""; }
.nav-item.badge { font-size:1rem;font-weight:normal; }

.alert i.material-icons { font-size:1.2rem;position:relative;top:-3px; }

dl,dl dt,dl dd { margin:0;padding:0; }
.alert.client dt { color:#007bff; }
.alert.client dt > .text-muted { font-weight:normal; }
.alert.client dt > .text-secondary:after { content:' : ';color:#ccc; }
.alert.client dd { margin-left:1rem; }

.alert a[rel="external"] { margin-left:0.5rem; }
.alert a[rel="external"] i.material-icons { position:relative;top:2px;color:#aaa; }

.list-group.geoip .badge { font-size:0.95rem;padding:0.25rem 1rem; }
.form .input-group-preppend.btn-group .btn {
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;
}
.form .input-group-prepend.btn-group input:first-child + .btn {
  border-top-left-radius:0.2rem !important;
  border-bottom-left-radius:0.2rem !important;
}


.nav-tabs .nav-item .nav-link {
  width: 160px;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  Text-align: left;
  padding-left: 25px;
  background: #f0f0f0;
}
.nav-tabs .nav-item .nav-link:first-child {
  border-left: 1px solid #ddd;
}
.nav-tabs .nav-item .nav-link.active {
  height:45px;
  background: white;
  border-bottom: 0px;
  margin-top:-5px;
  text-shadow: 1px 1px 1px #acacac;
  font-size: 17px;
}

/* main > .container > .card > .card-body.bg-white { min-height:30rem; } */
tfoot td.text-center.text-muted.py-3 {
  padding-top:10rem !important;
  padding-bottom:10rem !important;
}

.unrank .progress { background-color:transparent !important; }
main.dashboard .card { border-width:2px !important; }

.modal-content.api h4 { font-size:1.3rem; }
.modal-content.api h5 { font-size:1.1rem; }



#page-login {position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;background-image:url(/i/backdrop.jpg);background-size:cover;background-repeat:no-repeat;color:#fff;}
#page-login > .backdrop {opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000; }
#page-login a.logo > img {height:35px;}
#page-login  a.logo > img {height:35px;}
#page-login .modal { color:#444;}
#page-login nav > .container { border-bottom:2px solid #fff;padding-top:0.5rem;padding-bottom:0.5rem;display:flex;align-items:flex-end;justify-content:space-between; }
#page-login h1 { font-size:2em;margin:0.2rem; }
#page-login h2 { font-size:1.4em; }
#page-login .page-holder.login { margin-top:7rem; }

.modal-dialog.modal-lg.fullsize { width:1200px !important;min-width:1200px !important;max-width:1200px; }
#ip-history .modal-body { min-height:320px; }


body.modal-open {padding-right: 0 !important}
.cursor-pointer	{cursor: pointer}