:root {
  --bg-color: #eee;
  --border-color: #ccc;
  --main-color: #00bcd4;
}

*, :after, :before {
	box-sizing: border-box;
}

a:visited {
	/* faded pink */
	color: hsl(314, 31%, 61%);
}

body {
	padding-top: 50px;
	background-color: var(--bg-color);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.fixed-panel {
	max-height: 300px;
	overflow-y: scroll;
}

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-fill {
	-webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.no-padding {
	padding: 0;
}

.popover {
	max-width: none;
}

.popover-content > table {
	margin-bottom: 0;
}

.main {
	padding-top: 20px;
}

.main>.nav-pills {
	margin-bottom: 20px;
}

.sidebar {
	position: fixed;
	top: 51px;
	bottom: 0;
	left: 0;
	display: block;
	padding: 0 20px;
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 1px solid var(--border-color);

	background-color: #fff;
	box-shadow: -1px 2px 2px 0 rgba(0, 0, 0, 0.14),
				0 1px 5px 0 rgba(0, 0, 0, 0.12),
				-1px 3px 1px -2px rgba(0, 0, 0, 0.2);
}

.nav-sidebar {
	margin-right: -21px;
	margin-bottom: 20px;
	margin-left: -20px;
}

.nav-sidebar > .active {
	background-color: var(--bg-color);
}

.nav-sidebar-heading {
	padding: 15px;
	border-bottom: 1px solid var(--border-color);
}

.nav-sidebar-item {
	padding: 10px 15px;
	display: block;
}

/* Custom theme */
/* push the hamburger-menu icon to the left */
.navbar-left {
	margin-left: -15px;
}

.navbar-inverse {
	background-color: #00bcd4;
	border-color: rgb(0, 153, 172);
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-text,
.navbar-inverse .navbar-nav>li>a {
	color: #fff;
}

@media (max-width: 767px) {
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
		color: #fff;
	}
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.active {
	background-color: rgb(0, 171, 193);
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border-color: rgb(0, 153, 172);
}

.navbar-inverse .navbar-toggle {
	border-color: rgb(0, 153, 172);
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
	background-color: #00bcd4;
}

.navbar-btn,
.navbar-btn:hover,
.navbar-btn:active {
	margin-right: 5px;
	border-color: rgb(0, 153, 172);
}

.panel-default > .panel-heading {
	padding: 5px 10px;
	font-weight: 500;
	background-color: #a5ecf5;
	border-color: #85c7d0;
}

.panel-heading-secondary {
	border-radius: 0;
	border-top: 1px solid;
}

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

.border-top {
	border-top: 1px solid var(--border-color);
}

.list-group-scrollable {
	max-height: 350px;
	overflow-y: auto;
}

/* table style: special */

.table,
th {
	background-color: #fff;
}

.table-special > thead > tr > th {
	background-color: var(--bg-color);
	border-bottom: 1px solid var(--border-color);
}

.table-special > thead > tr > th {
	border-bottom: 0;
}

.table-special > tbody > tr > td {
	padding: 12px;
}

.table-special > tbody > tr {
	background-color: #fff;
	border: 1px solid #ddd;
}

.bg-warning {
	/* light red */
	background-color: #f0d8d8;
}

.bg-success {
	/* light green */
	background-color: #dff0d8 !important;
}

.rank-shield {
	height: 50px;
}

/* dismiss table row */

.dismiss {
   background-color: #C9C9C9;
}

.medium {
	 background-color: #ffff66;
}

.warning {
	 background-color: #ff6666;
}


/* BOOTSTRAP 4 CLASSES */
.d-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.justify-content-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mr-1 {
	margin-right: 1rem;
}

.mr-3 {
	margin-right: 3rem;
}

.mt-1 {
	margin-top: 1rem;
}

.mt-2 {
	margin-top: 1.5rem;
}

/* CHECKBOX */
input[type="checkbox"].ios8-switch {
    position: absolute;
    margin: 8px 0 0 16px;
}
input[type="checkbox"].ios8-switch + label {
    position: relative;
    padding: 15px 0 0 35px;
}
input[type="checkbox"].ios8-switch + label:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 40px; /* x*5 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].ios8-switch + label:after {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 24px; /* x*3 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].ios8-switch + label:hover:after {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
input[type="checkbox"].ios8-switch:checked + label:after {
    margin-left: 16px;
}
input[type="checkbox"].ios8-switch:checked + label:before {
    background: #55D069;
}

.float-top-secondary {
	position: fixed;
	top: 51px;
	left: 0;
	right: 0;
	padding: 1rem;
	z-index: 99;
	background-color: var(--main-color);
	border-bottom: 1px solid rgb(0, 153, 172);
}

.float-top-secondary + .container {
	margin-top: 60px;
}
