/* Dashboard/Developers only styles */
body { padding-top: 0; background-color: #f3f6fa; }

/* Customized Tooltips */
.tooltip { font-size: 14px; }
.tooltip-inner { background-color: #4a5056; color: #fff; border-radius: .65rem; padding: .25rem .75rem; opacity: 1; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #4a5056; }
.bs-tooltip-top .arrow::before { border-top-color: #4a5056; }
.bs-tooltip-left .arrow::before { border-left-color: #4a5056; }
.bs-tooltip-right .arrow::before { border-right-color: #4a5056; }

.new-alert { position: relative; }
.new-alert:after { content: ''; display: block; position: absolute; top: 6px; right: 8px; background: #f72845; width: 8px; height: 8px; border-radius: 50%; }


/* Mobile Flyout Menu */
#toggle-flyout { display: block; background-color: rgba(255,255,255,.1); font-size: 26px; line-height: 38px; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; text-align: center; color: rgba(255,255,255,.6); transition: all .2s ease; }
#toggle-flyout:hover { background-color: #f4f4f4; color: #000; }

.flyout-overlay {
	background-color: #000;
	bottom: 0;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	opacity: 0.4;
	width: 100%;
	z-index: 1060;
	display: none;
}
#close-flyout { display: none; }

.flyout-panel { background-color: #132130; height: 100%; position: fixed; bottom: 0px; right: 0; top: 0px; z-index: 1070; transform: translate3d(100%, 0px, 0px); transition: all .4s ease; }
.flyout-panel.shown { transform: translate3d(0px, 0px, 0px); }
.flyout-panel-wrap { height: 100%; overflow-y: auto; }
.flyout-panel-content { padding: 4.5rem 1.5rem 1.5rem 1.5rem; width: 280px; }
#close-flyout { display: block; position: absolute; top: 13px; right: 1rem; background-color: rgba(255,255,255,.1); font-size: 26px; line-height: 40px; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; text-align: center; color: rgba(255,255,255,.6); transition: all .2s ease; }
#close-flyout:hover { background-color: #f4f4f4; color: #000; }

/* Dashboard Layout */
.dashboard-layout {  }

.dashboard-nav { background-color: #132130; color: rgba(255,255,255,.75); padding: .75rem 1rem; }
.dashboard-nav .navbar-brand { padding: 0; }
.dashboard-nav .navbar-brand img { height: 36px; }
.dashboard-main-content {  }

/* Top Nav Layout */
.layout-top-nav { flex-direction: column; }

/* Side Nav Layout */
@media (min-width: 992px) {
	.dashboard-layout { display: flex; }
	.layout-side-nav .dashboard-nav { padding: 1.5rem; width: 264px; height: 100vh; overflow-y: scroll; -ms-overflow-style: none; flex-direction: column; align-items: flex-start; }
	.layout-side-nav .dashboard-nav .navbar-brand { margin-bottom: 1.75rem; }
	.layout-side-nav .dashboard-nav .navbar-brand img { height: 40px; }

	.layout-side-nav .dashboard-main-content { overflow: hidden; flex: 1; max-width: calc(100vw - 264px); }
	.layout-side-nav .dashboard-main-content > .container { padding-left: 3rem; padding-right: 3rem; }

	.layout-side-nav .flyout-panel { position: static; transform: none; bottom: initial; right: initial; top: initial; height: initial; }
	.layout-side-nav .flyout-panel-content { padding: 0; width: initial; }
	.layout-side-nav .flyout-toggle, .layout-side-nav #close-flyout { display: none; }

}
@media (max-width: 992px) {
	.dashboard-main-content > .container { padding-left: 1.75rem; padding-right: 1.75rem; }
}


/* Sidebar Navigation */

.level-top { color: #fff; display: block; padding: .75rem 0; font-size: 1rem; margin: 0; font-weight: 500; }
a.level-top:hover { text-decoration: none; color: rgba(255,255,255,.8); }

.level-secondary { margin-bottom: 1rem; margin-left: 1.25rem; }
.level-secondary .nav-link { font-size: .925rem; color: rgba(255,255,255,.6); padding: .2rem .5rem .2rem 1.25rem; position: relative; transition: all .1s ease; }
.level-secondary .nav-link:before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); position: absolute; top: 50%; left: .25rem; transform: translate(0,-50%); cursor: pointer; }
.level-secondary .nav-link:hover { color: #fff; }
.level-secondary .nav-link:hover:before { background: #3f81f3; }

.level-secondary .active { color: #00a3ff; }
.level-secondary .active:before { background: #00a3ff; }

a .hover-show { opacity: 0; transition: all .2s ease; }
a:hover .hover-show { opacity: 1; }

.n-icon { margin-right: .4rem; }


/* Buttons */
.btn { border-radius: 0; }
.app-buttons .btn, .btn-app { background-color: #eff3f6; background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%); border: 1px solid rgba(27,31,35,0.2); color: #24292e; border-radius: .25rem; }
.app-buttons .btn:hover, .btn-app:hover { background-color: #e6ebf1; background-image: linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%); background-position: -.5em; border-color: rgba(27,31,35,0.35); }
.btn-app.active { background: #2a6187; color: #fff; }

.btn-circle { padding: 0; text-align: center; border-radius: 50%; width: 36px; height: 36px; background: #e4e6eb; position: relative; }
.btn-circle .material-icons { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.btn-circle:hover { background: #d8dadf; }

.btn-action:hover { background: #297df6; color: #fff; }
.btn-delete:hover { background: #c42e36; color: #fff; }


/* Forms */
.control-simplified { border: none; background: none; border-bottom: 2px solid #cbd2db; padding: .5rem 0; border-radius: 0; box-shadow: none; }
.control-simplified:focus { border-color: #1777d8; background: none; }
/* .form-check-input { margin-top: .2rem; }*/
.custom-control-label::after, .custom-control-label::before { top: .2rem; }


/* Cards */
.card { /*box-shadow: 0 0.1875rem 0.375rem rgba(33, 37, 41, 0.05);*/ box-shadow: none; border: 1px solid #dee2e6; border-radius: 0; }
.card-header { background: #fff; padding: 1rem 1.25rem; }
.card-header:first-child { border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0; }
.card-body { padding: 1.5rem; }
.card-footer { background: #fff; }
.card-footer:last-child { border-radius: 0 0 calc(.5rem - 1px) calc(.5rem - 1px); }


/* Custom Components */
.content-list-head {  }
.content-list-body { margin-bottom: 0.75rem; border-radius: 0.5rem; padding: 1rem; background: #e9ecef; }

.live-notifications { position: fixed; top: 125px; right: 15px; }

@media (max-width: 768px) {
	.live-notifications { top: 200px; left: 50%; transform: translate(-50%,0); right: initial; }
}


/* Custom Nav Tabs */
.nav-line-tabs { border-bottom: 1px solid #e4e8ed; }
.nav-line-tabs .nav-link { color: #6a7384; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav-line-tabs .nav-link:hover { color: #111; border-color: #c6d3e6; }
.nav-line-tabs .nav-link.active { color: #2c4da1; border-color: #3b83f3; }

@media (max-width: 576px) {
	.nav-line-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 0 .5rem; }
	.nav-line-tabs .nav-link { font-size: .875rem; padding: .5rem; white-space: nowrap; }
}


/* Nav Tabs */
.nav-page .nav-item {}
.nav-page .nav-link:not(.active) { color: rgba(33, 37, 41, 0.5); }
.nav-page .nav-link.active, .nav-page .nav-item.show .nav-link {
	color: #007bff;
	background-color: #fff;
	border-color: transparent;
}

@media (max-width: 992px) {
	.nav-page .nav-link { font-size: 0.875rem; }
}


/* Global Notice Bar */
.notice-upgrade { background: url(/images/v2/members/bg-notice-effect-left.png) left center/235px auto no-repeat #fff; }


/* Charts */
.usage-donut-chart { position: relative; }
.call-percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.custom-charts .google-visualization-tooltip { border-radius: 5px; border-color: #dae2ee; color: #768192; }


/* Colors */
.bg-gradient { background-image: linear-gradient(-45deg,#014ba7,#0183d0); }

.bg-soft-primary { background: #e7effb; }
.bg-soft-secondary { background: #eef0f2; }
.bg-soft-success { background: #e5f9f0; }
.bg-soft-info { background: #e8f7fe; }
.bg-soft-warning { background: #fcf0e9; }
.bg-soft-dark { background: #e2e3e5; }

.bg-200 { background: #eef2f8; }

.icon-gradient { background: linear-gradient(135deg, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


/* Tables */
.table-hover tbody tr:hover { background: #eef2f8; }


/* Badges */
.badge-pill { padding-right: .71111em; padding-left: .71111em; border-radius: 10rem; }

.badge-soft-primary { color: #1c4f93; background-color: #d5e5fa; }
.badge-soft-secondary { color: #7d899b; background-color: #e3e6ea; }
.badge-soft-success { color: #00864e; background-color: #ccf6e4; }
.badge-soft-info { color: #1978a2; background-color: #d4f2ff; }
.badge-soft-warning { color: #c46632; background-color: #fde6d8; }
.badge-soft-danger { color: #932338; background-color: #fad7dd; }
.badge-soft-dark { color: #070f19; background-color: #ced1d4; }

/* Modals */
.modal-header { background: #007bff; color: #fff; align-items: center; padding: 1rem 1.5rem; }
.modal-header .close { margin: 0; background: rgba(255, 255, 255, 0.25); text-shadow: none; color: #fff; border-radius: 50%; width: 36px; height: 36px; position: relative; }
.modal-header .close .material-icons, .modal-header .close span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.modal-footer { background: #e9ecef; }
.modal-body { padding: 1.5rem; }

/* Dropdowns */
.dropdown-menu { box-shadow: 0 0.1875rem 0.375rem rgba(33, 37, 41, 0.1); padding-left: 0.5rem; padding-right: 0.5rem; font-size: .875rem; }
.dropdown-item { border-radius: 0.25rem; padding: 0.25rem 0.875rem; }
.dropdown-item:hover { background-color: #e9ecef; }
.dropdown-item.active:hover { background: #277af1; }
.dropdown-item.active:active { color: #fff; }
.dropdown-item:active { color: #006fe6; background-color: #e9ecef; }
.dropdown-header { padding: 0.25rem 0.875rem; font-size: .9rem; }

/* Overrides */
.rounded-lg { border-radius: .5rem !important; }
.rounded-sm { border-radius: .1rem !important; }