/*************************************/
/*************************************/
/*               Navbar              */
/*************************************/
/*************************************/
@media (min-width: 768px) {
    .navbar-nav.abs {
        position: absolute;
        width: auto;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
}

.dropdown-toggle::after {
    margin-left: 0;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--brandDarker);
}

/*************************************/
/*************************************/
/*               Forms               */
/*************************************/
/*************************************/
.form-check-input {
	border-color: #a9acb0!important;
}

.form-check-input.is-valid:checked {
	border-color: #198754;
	background-color: #198754;
}

/*************************************/
/*************************************/
/*                Tabs               */
/*************************************/
/*************************************/
.tab-content {
	border-left: 1px solid #9c9ea1; 
	border-right: 1px solid #9c9ea1; 
	border-bottom: 1px solid #9c9ea1;
}

.nav-tabs .nav-link {
	color: var(--brand)!important;
	border-bottom: 1px solid #9c9ea1;
}

.nav-tabs .nav-link.active {
	color: #000000;
	border-color: #9c9ea1;
	border-bottom: none;
}

.nav-tabs .nav-link.active:hover {
	border-bottom: none;
}

.nav-tabs .nav-link:hover {
	border-bottom: 1px solid #9c9ea1;
}

/*************************************/
/*************************************/
/*                Pills               */
/*************************************/
/*************************************/
.nav-pills .nav-link {
	border: 1px solid var(--brand);
	color: var(--brand);
}

.nav-pills .nav-link.active {
	background-color: var(--brand);
	color: #ffffff;
}

/*************************************/
/*************************************/
/*              Buttons              */
/*************************************/
/*************************************/
.btn-block {
	display: block;
    width: 100%;
}


/*************************************/
/*************************************/
/*              Buttons              */
/*************************************/
/*************************************/
.btn-toggle {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.btn-toggle input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.btn-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 34px;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.btn-toggle-slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	border-radius: 50%;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .btn-toggle-slider {
	background-color: var(--brand);
}

input:focus + .btn-toggle-slider {
	box-shadow: 0 0 0.2rem var(--brand);
}

input:checked + .btn-toggle-slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/*************************************/
/*************************************/
/*        Responsive Helpers         */
/*************************************/
/*************************************/
/* This file used to carry ~360 lines of hand-rolled mt-/mb-/px-/py-/pt- utilities keyed to a
   1000px breakpoint. They shadowed Bootstrap's own identically-named classes -- which key to
   576px (sm) and 768px (md) -- so `mt-md-3` meant different things depending on which file won,
   and the `.mb-md-*` rules set margin-top instead of margin-bottom. All of them are gone; the
   markup now uses Bootstrap's utilities directly. The `-sm-` usages were rewritten to their
   unconditional form (`mb-sm-2 mb-md-0` -> `mb-2 mb-md-0`) because Bootstrap's `-sm-` means
   "576px and up" while the old custom one meant "1000px and down" -- the opposite direction.

   Only the four helpers below survive: they are still used in markup and Bootstrap has no
   equivalent. They now key to Bootstrap's md breakpoint so one scale governs the whole site. */
@media screen and (max-width: 767.98px) {
	.text-center-sm {
		text-align: center!important;
	}

	.d-mobile-none {
		display: none!important;
	}
}

@media screen and (min-width: 768px) {
	.text-left-md {
		text-align: left!important;
	}

	.d-computer-flex {
		display: flex!important;
	}
}