#main_sidebar {padding: 0!important; position:unset; height:inherit; -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; width:100%;  transition: 0.3s;}
#main_sidebar.shrunk { -webkit-box-flex: 0!important; -ms-flex: 0 0 48px!important; flex: 0 0 48px!important; max-width: 48px!important; transition: 0.7s;}
#main_sidebar.shrunk .unshrunk-only {display:none;}
#main_sidebar.shrunk .nav-link {overflow:visible!important; padding:0.93em 0; text-align:center;}

/* custom colors are fun */
.bg-fiord{background:#3d5170!important;} .border-fiord{border-color:#3d5170!important;}
.bg-reagent{background:#818ea3!important;} .border-reagent{border-color:#818ea3!important;}
.bg-shuttle{background:#4a5159!important;} .border-shuttle{border-color:#4a5159!important;}
.border-info{border-width:1px; border-style:solid;}

/* shards dashboard broke alerts so we do this  */
.alert-dismissible {padding-right: 3rem!important;}
.alert-link {text-decoration: underline;}

/* and they broke dark navbar links */
.navbar-dark .navbar-nav .nav-link {color:rgba(255,255,255,.8); padding:0;}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.9); padding:0;}

/* I like my icons a bit bigger */
.nav-link .fa, .nav-link .fab, .nav-link .fal, .nav-link .far, .nav-link .fas {font-size: 120%!important;}
.btn .fa, .btn .fab, .btn .fal, .btn .far, .btn .fas {font-size: 150%!important;}

/* misc UI stuff */
.info-badge{position: absolute; left: -0.5em; top: -0.5em; font-size: 2em; border-radius: 1em; border:2px solid var(--info); color:white; background-color:var(--info)}
.table-hover tr.bams-clickable-row { cursor: pointer;}
.table-hover td.bams-clickable-cell{ cursor: pointer;}
.bams-more-info{ color: var(--gray); opacity:0.5; margin-bottom: .5rem!important; margin-top: .5rem!important; float:right!important;}
tr:hover .bams-more-info{ color: var(--primary); opacity:1;}
.form-check{margin-top: .2rem!important; margin-bottom: .2rem!important;}
.form-check-label{cursor: pointer;}

.bg-fiord kbd {
  background-color: rgba(33, 37, 41, 0.66)!important;;
  border-radius: 0.25rem;
	border: 1px solid #212529!important;
	letter-spacing: 1px;
}

#admin-subheader-tabs {
	border-bottom: 1px solid #818ea3;
}
#admin-subheader-tabs > .nav-link.active {
	border-color: #818ea3  #818ea3 #fbfbfb;
}
#admin-subheader-tabs > .nav-link:hover {
	border-color: #8aaed7 #8aaed7 #fbfbfb;
}


/* wizard steps style, medium and large screens */
.wizard-steps-container { overflow: hidden; position: relative;}
.wizard-step-progress { position: absolute; top: 14px; left: 0; width: 100%; }
.wizard-step { position: relative; float: left; padding: 0 6px; text-align:center;}
.wizard-step-icon {
	display: inline-block; width: 40px; height: 40px; margin-top: 4px; line-height: 40px;
	background: var(--light); color: var(--gray);
	-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.wizard-step > .bg-primary {color: #fff;}
#wizard-current-icon {
	width: 48px; height: 48px; margin-top: 0; font-size: 24px; line-height: 48px;
}
/* wizard steps style, small and tiny screens */
@media (max-width: 640px) {
	.wizard-steps-container { overflow: hidden; position: relative;}
	.wizard-step-progress { position: absolute; top: 11px; left: 0; width: 100%; }
	.wizard-step { position: relative; float: left; width: 25.0%; padding: 0 2px; text-align:center; font-size:14px}
	.wizard-step-icon {
		display: inline-block; width: 34px; height: 34px; margin-top: 3px; line-height: 36px;
		background: var(--light); color: var(--gray);
		-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
	}
	.wizard-step > .bg-primary {color: #fff;}
	#wizard-current-icon {
		width: 38px; height: 38px; margin-top: 0; font-size: 20px; line-height: 40px;
	}
}

/* switches for radio inputs */
.switch {
  font-size: 1rem;
  position: relative;
}
.switch input {
  position: absolute;
  height: 1px;
  width: 1px;
  background: none;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
}
.switch input + label {
  position: relative;
  min-width: calc(calc(2.375rem * .8) * 2);
  border-radius: calc(2.375rem * .8);
  height: calc(2.375rem * .8);
  line-height: calc(2.375rem * .8);
  display: inline-block;
  cursor: pointer;
  outline: none;
  user-select: none;
  vertical-align: middle;
  text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem);
}
.switch input + label::before,
.switch input + label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(calc(2.375rem * .8) * 2);
  bottom: 0;
  display: block;
}
.switch input + label::before {
  right: 0;
  background-color: #818ea3;
  border-radius: calc(2.375rem * .8);
  transition: 0.2s all;
}
.switch input + label::after {
  top: 2px;
  left: 2px;
  width: calc(calc(2.375rem * .8) - calc(2px * 2));
  height: calc(calc(2.375rem * .8) - calc(2px * 2));
  border-radius: 50%;
  background-color: white;
  transition: 0.2s all;
}
.switch input:checked + label::before {
  background-color: #007bff;
}
.switch input:checked + label::after {
  margin-left: calc(2.375rem * .8);
}
.switch input:focus + label::before {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
}
.switch input:disabled + label {
  cursor: not-allowed;
}
.switch input:disabled + label::before {
  opacity:0.3;
}
.switch.switch-sm {
  font-size: 0.875rem;
}
.switch.switch-sm input + label {
  min-width: calc(calc(1.9375rem * .8) * 2);
  height: calc(1.9375rem * .8);
  line-height: calc(1.9375rem * .8);
  text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem);
}
.switch.switch-sm input + label::before {
  width: calc(calc(1.9375rem * .8) * 2);
}
.switch.switch-sm input + label::after {
  width: calc(calc(1.9375rem * .8) - calc(2px * 2));
  height: calc(calc(1.9375rem * .8) - calc(2px * 2));
}
.switch.switch-sm input:checked + label::after {
  margin-left: calc(1.9375rem * .8);
}
.switch.switch-lg {
  font-size: 1.25rem;
}
.switch.switch-lg input + label {
  min-width: calc(calc(3rem * .8) * 2);
  height: calc(3rem * .8);
  line-height: calc(3rem * .8);
  text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
}
.switch.switch-lg input + label::before {
  width: calc(calc(3rem * .8) * 2);
}
.switch.switch-lg input + label::after {
  width: calc(calc(3rem * .8) - calc(2px * 2));
  height: calc(calc(3rem * .8) - calc(2px * 2));
}
.switch.switch-lg input:checked + label::after {
  margin-left: calc(3rem * .8);
}
.switch + .switch {
  margin-left: 1rem;
}

/* stripe country selector */
#flag_span.us::before {
  background-position: -475px -135px;
}
#flag_span.at::before {
  background-position: -165px -10px;
}
#flag_span.au::before {
  background-position: -196px -10px;
}
#flag_span.be::before {
  background-position: -227px -10px;
}
#flag_span.br::before {
  background-position: -351px -10px;
}
#flag_span.ca::before {
  background-position: -382px -10px;
}
#flag_span.ch::before {
  background-position: -475px -10px;
}
#flag_span.cn::before {
  background-position: -41px -35px;
}
#flag_span.de::before {
  background-position: -134px -35px;
}
#flag_span.dk::before {
  background-position: -196px -35px;
}
#flag_span.es::before {
  background-position: -320px -35px;
}
#flag_span.eu::before {
  background-position: -351px -35px;
}
#flag_span.fi::before {
  background-position: -382px -35px;
}
#flag_span.fr::before {
  background-position: -413px -35px;
}
#flag_span.gb::before {
  background-position: -475px -35px;
}
#flag_span.hk::before {
  background-position: -41px -60px;
}
#flag_span.ie::before {
  background-position: -196px -60px;
}
#flag_span.it::before {
  background-position: -351px -60px;
}
#flag_span.jp::before {
  background-position: -444px -60px;
}
#flag_span.lu::before {
  background-position: -258px -85px;
}
#flag_span.mx::before {
  background-position: -475px -85px;
}
#flag_span.nl::before {
  background-position: -103px -110px;
}
#flag_span.no::before {
  background-position: -134px -110px;
}
#flag_span.nz::before {
  background-position: -165px -110px;
}
#flag_span.pt::before {
  background-position: -413px -110px;
}
#flag_span.se::before {
  background-position: -103px -135px;
}
#flag_span.sg::before {
  background-position: -134px -135px;
}