/* Core Variables */
:root {

  /* Init FT Color Scheme */
  --ftblack: #111;
  --ftdark: #333;
  --ftgrey: #ccc;
  --ftlight: #dedede;
  --ftwhite: #fff;
  --ftblue: #2a71ff;
  --ftorange: #e75c16;

  /* Override Bootstrap Vars */
  --bs-body-bg: var(--ftblack);
  --bs-nav-link-color: var(--ftwhite);
  --bs-dropdown-link-disabled-color: var(--ftwhite);
  --bs-dropdown-link-disabled-color: var(--ftgrey);
}

body {
  overflow-y: scroll;
}

/* Nav Bar */
header nav {
  border-bottom: 1px solid var(--ftblue);
}

.navbar-brand img {
  opacity: 1.0;
  transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}

.navbar-brand img:hover,
.navbar-brand img:focus {
  opacity: 0.6;
  transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
}

.nav-link {
  color: var(--ftwhite);
}

.nav-link:focus,
.nav-link:hover {
  color: var(--ftblue);
}

/* Nav Bar > Dropdown Menus */
.dropdown-menu.show {
  border: 1px solid var(--ftblue);
}

.dropdown-item {
  color: var(--ftwhite);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--ftwhite);
  background-color: var(--ftdark);
}

/* Nav Bar > Dropdown Menus > Animation */
/* Forked from https://jsfiddle.net/StartBootstrap/o7ev9czn/ */
@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

/* Black background override */
.bg-ftblack {
  background-color: var(--ftblack);
}

/* App Gallery Cards */
.card {
  height: 100%;
}

.card img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  max-width: 100%;
  opacity: 1.0;
  transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -webkit-transition: all .15s ease-in-out;
}

.card img:hover,
.card img:focus {
  opacity: 0.6;
  transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -webkit-transition: all .15s ease-in-out;
}

.card h3>a {
  color: var(--ftwhite);
  text-decoration: none;
  transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -webkit-transition: all .15s ease-in-out;
}

.card h3>a:hover,
.card h3>a:focus {
  color: var(--ftblue);
  transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -webkit-transition: all .15s ease-in-out;
}

/* App Tech Icon Badges */
.ft-php-badge {
  color: #a561fd;
}

.ft-js-badge {
  color: #e4d04b;
}

.ft-html-badge {
  color: #cf6246;
}

.ft-scss-badge {
  color: #ce679a;
}

.ft-css-badge {
  color: #3595cf;
}

.ft-exe-badge {
  color: #57ce5d;
}

/* Discord Page Styles */
.btn-bd-colors {
  background-color: #3a71c1;
  border: 1px solid #3a71c1;
}

/* Fuel Calculator Page Styles */
form#fuel-calc-form {
  label {
    color: var(--ftlight);
  }
}

form#fuel-calc-form .form-control.is-invalid {
  border-color: var(--ftlight);
}

#results .progress {
  height: 3em;
  margin-bottom: 1.5em;
}

#results div.progress-bar {
  font-size: 1.35em;
  font-weight: bold;
}

/* CMS Stratification Page Styles */
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: center !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>*,
.table-striped>tbody>tr:nth-of-type(even)>* {
  color: var(--ftlight);
}

.medal {
  color: white;
  text-align: center;
  font-size: .8em;
  background-size: 100% 100%;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
  display: inline-block;
  min-width: 100px;
}

.medal-copper {
  background-image: linear-gradient(200deg, #D09050, #A06020, #703000);
}

.medal-bronze {
  background-image: linear-gradient(200deg, #efba6a, #C08020, #6e3f04);
}

.medal-silver {
  background-image: linear-gradient(200deg, #ffffff, #cfcfcf, #808080);
}

.medal-gold {
  background-image: linear-gradient(200deg, #FFFF80, #FFCC00, #B38F00);
}

.medal-platinum {
  background-image: linear-gradient(200deg, #f3f3f3, #c5b9f3, #999999);
  box-shadow: 0 0 4px 2px rgb(128 97 255);
}

.arrow-red {
  color: #ce5757;
}

.arrow-green {
  color: #57ce5d;
}

.badge-class-red {
  background-color: #e21e19;
}

.badge-class-blue {
  background-color: #005096;
}

.badge-class-green {
  background-color: #009635;
}

.badge-class-orange {
  background-color: #d3660d;
}

.badge-class-cyan {
  background-color: #00a8e6;
}

/* Project Changelogs & FAQs */
.accordion-item {
  max-width: 550px;
}

.accordion-button {
  padding: 10px 16px;
}

.accordion-body {
  padding: 0px 16px 10px;
}

.accordion-button:not(.collapsed) {
  color: var(--ftblue);
  background-color: var(--ftblack);
  box-shadow: none;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232a71ff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}

/* Footer */
footer {
  border-top: 1px solid var(--ftorange);
}

footer .social-links a {
  color: var(--bs-body-color);
  text-decoration: none;
  transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -webkit-transition: all .15s ease-in-out;
}

footer .social-links a:hover,
footer .social-links a:hover {
  color: var(--ftblue);
  transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -webkit-transition: all .15s ease-in-out;
}