.card-footer {
    padding-bottom: 3rem;
}

.form-control-disabled {
    background-color: #fff !important;
    color: #888 !important;
    cursor: pointer !important;
}

/* 
	Bug fix for introjs when it was trying to highlight some elements
	https://stackoverflow.com/questions/15967289/intro-js-highlighted-area-doesnt-work-as-expected
*/
.introjs-helperLayer {
    background: transparent;
}

.introjs-overlay {
    opacity: 0 !important;
}

.introjs-helperLayer:before {
    opacity: 0;
    content: '';
    position: fixed;
    width: inherit;
    height: inherit;
    border-radius: 0.5em;
    box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
    opacity: 1;
}

.introjs-helperLayer:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

/* 
	Customizing Intro.js
 */
.customDefault {
  color: #fff;
  font-weight: bold;
  background-color: #fab526;
}

.customDefault .introjs-skipbutton {
  font-size: 0.8rem;
  color: black;
}

.customDefault .introjs-nextbutton {
  font-size: 0.8rem;
  color: black;
}

.customDefault .introjs-prevbutton {
  font-size: 0.8rem;
  color: black;
}

/* 
	Customizing dataTable
 */
table.dataTable {
  border-collapse: collapse !important;
}


/*
   Squad Map
 */
.note {
	background-color: #fdf6b0;
	box-shadow: 2px 4px 2px lightblue;
	display: inline-block;
	margin: 10px;
	padding: 8px;	
}

.note a {
	color: black;
	font-weight: 500;
}

.note h5 {
    font-size: 1rem;	
}

.note .row {
	margin-bottom: 16px;
}

.text-purple {
	color: purple;
}

.ic1z:before {
  content: "\f21b";
}
.ic2z:before {
  content: "\f024";
}
.ic3z:before {
  content: "\f135";
}

.position-relative {
    position: relative!important
}

.mt-5 {
    margin-top: 3rem!important
}

@media (prefers-reduced-motion:reduce) {
    .navbar-vertical .docs-info {
        transition: none
    }
}

.navbar-vertical .nav-item .nav-link {
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: .375rem;
    margin-bottom: 1.5px;
    margin-top: 1.5px
}

.navbar-vertical .nav-item .nav-link+.collapse .nav .nav-item>.nav-link,.navbar-vertical .nav-item .nav-link+.collapse .nav .nav-item>.nav-link+.collapse .nav .nav-item .nav-link,.navbar-vertical .nav-item .nav-link+.collapse .nav .nav-item>.nav-link+.collapsing .nav .nav-item .nav-link,.navbar-vertical .nav-item .nav-link+.collapsing .nav .nav-item>.nav-link,.navbar-vertical .nav-item .nav-link+.collapsing .nav .nav-item>.nav-link+.collapse .nav .nav-item .nav-link,.navbar-vertical .nav-item .nav-link+.collapsing .nav .nav-item>.nav-link+.collapsing .nav .nav-item .nav-link {
    margin-top: 1.5px;
    margin-bottom: 1.5px
}

.navbar-vertical .nav-item:hover .nav-link,.navbar-vertical .nav-item:hover .nav-link+.collapse .nav .nav-item+.collapse .nav .nav-item:hover .nav-link,.navbar-vertical .nav-item:hover .nav-link+.collapse .nav .nav-item:hover>.nav-link {
    background-color: hsla(0,0%,78%,.2);
    border-radius: .375rem
}
.nav.nav-pills .nav-link .material-icons {
    top: 3px
}
.nav.nav-pills {
    background: #f8f9fa;
    border-radius: .75rem;
    position: relative
}

.nav.nav-pills.nav-pills-vertical {
    border-radius: 1.1875rem
}

.nav.nav-pills.nav-pills-vertical .nav-link.active {
    border-radius: .875rem
}

.nav.nav-pills .nav-link {
    z-index: 3;
    color: #344767;
    border-radius: .5rem;
    background-color: inherit
}

.nav.nav-pills .nav-link.active {
    animation: .2s ease
}

.nav.nav-pills .nav-link:hover:not(.active) {
    color: #344767
}

.nav.nav-pills.nav-pills-primary {
    background: #fff;
    color: #fff
}

.nav.nav-pills.nav-pills-primary .nav-link.active {
    color: #fff
}

.nav.nav-pills.nav-pills-primary .moving-tab .nav-link.active {
    background: #ec407a;
    color: #ec407a
}

.nav.nav-pills.nav-pills-info {
    background: #fff;
    color: #fff
}

.nav.nav-pills.nav-pills-info .nav-link.active {
    color: #fff
}

.nav.nav-pills.nav-pills-info .moving-tab .nav-link.active {
    background: #49a3f1;
    color: #49a3f1
}

.nav.nav-pills.nav-pills-success {
    background: #fff;
    color: #fff
}

.nav.nav-pills.nav-pills-success .nav-link.active {
    color: #fff
}

.nav.nav-pills.nav-pills-success .moving-tab .nav-link.active {
    background: #66bb6a;
    color: #66bb6a
}

.nav.nav-pills.nav-pills-warning {
    background: #fff;
    color: #fff
}

.nav.nav-pills.nav-pills-warning .nav-link.active {
    color: #fff
}

.nav.nav-pills.nav-pills-warning .moving-tab .nav-link.active {
    background: #ffa726;
    color: #ffa726
}

.nav.nav-pills.nav-pills-danger {
    background: #fff;
    color: #fff
}

.nav.nav-pills.nav-pills-danger .nav-link.active {
    color: #fff
}

.nav.nav-pills.nav-pills-danger .moving-tab .nav-link.active {
    background: #ef5350;
    color: #ef5350
}

.nav.nav-pills .nav-item {
    z-index: 3
}

.moving-tab {
    z-index: 1!important
}

.moving-tab .nav-link {
    color: #fff;
    transition: .2s ease;
    border-radius: .5rem
}

.moving-tab .nav-link.active {
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 5px 1px #ddd;
    animation: .2s ease;
    background: #fff
}

.moving-tab .nav-link:hover:not(.active) {
    color: #344767
}

.page-item.active .page-link {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.09),0 2px 3px -1px rgba(0,0,0,.07)
}

table.dataTable>tfoot>tr>th {
    font-size: 0.75rem;
    text-transform: uppercase;
}