:root {
  --medium-purple: mediumpurple !important;
  --pleasanton-blue: #edf0f4;
  --bright-blue: #007bff !important;
  --text-cyan: #65abf6;
  --ghost-white: ghostwhite;
  --alice-blue: aliceblue;
  --white: white;
  --text-light-green: rgb(144, 238, 144);
  --bg-green: green !important;
  --slate-gray: lightslategray;
  --silver: silver;
  --graphite: #506578;
  --light-graphite: rgba(80, 101, 120, .9);
  --lighter-graphite: rgba(80, 101, 120, .7);
  --very-light-graphite: rgba(80, 101, 120, .5);
  --lightest-graphite: rgba(80, 101, 120, .3);
  --ultra-light-graphite: rgba(80, 101, 120, .1);
  --dark-gray: #555555;
  --sky-blue: deepskyblue;
  --trench-blue: #8ea5be !important;
  --header-blue: #355672;
  --light-coral: #e35158;
  --footer-slate: #e6e8f1;
  --nd-dark-blue: #0c2340 !important;
  --nd-med-blue: #143865 !important;
  --renton: #f7f7f7 !important;
  --chocolate: chocolate !important;
}

/* Root styles */
html {
  font-size: 100%;
}

body {
  background: var(--pleasanton-blue) !important;
  color: var(--graphite);
  box-sizing: border-box;
  font-family: 'Figtree', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold !important;
}

#banner-brand a {
  font-size: inherit;
}

/* utilities */
.opacity-25 {
  opacity: .25;
}

.opacity-50 {
  opacity: .50;
}

.opacity-75 {
  opacity: .75;
}

.text-larger {
  font-size: 1.5rem;
}

.fast-forward {
  transform: skewX(-10deg);
  /* transform: translateX(-100px); */
}

.text-decoration-none {
  text-decoration: none;
}

/* Special gutters for container-fluid pages */
.px-20 {
  padding-left: 8rem;
  padding-right: 8rem;
}

/* colors */
.bg-nd-dark-blue {
  background: var(--nd-dark-blue);
}

.bg-nd-med-blue {
  background: var(--nd-med-blue);
}

.bg-renton {
  background: var(--renton) !important;
}

.bg-green {
  background: var(--bg-green) !important;
}

.chocolate {
  color: var(--chocolate);
}

.bright-blue {
  color: var(--bright-blue);
}

.text-light-green {
  color: var(--text-light-green) !important;
}

.bg-trench-blue {
  color: var(--trench-blue) !important;
}

.medium-purple {
  color: var(--medium-purple);
}

.footer-social {
  color: var(--white) !important;
  margin-left: .75rem;
  margin-right: .75rem;
}

.footer-social:hover {
  color: lightslategray !important;
  text-decoration: none;
}

#software-version {
  color: var(--white);
  font-size: 2rem;
}

.navbar-brand {
  font-size: 2.5rem;
  font-weight: 400 !important;
}

.bootstrapr-span {
  font-family: "Leckerli One", cursive;
  color: white !important;
  transform: skewX(-8deg);
  background: transparent;
  padding: 3px 22px 3px 15px;
  border-radius: 12px;
  border: 2px solid white;
  font-size: 2.1rem;
  margin-right: 1rem;
}

.breadcrumb {
  background-color: #ffffff;
  padding: .8rem;
  border-radius: 6px;
}

.text-white {
  color: var(--white);
}

.bright-blue {
  color: var(--bright-blue) !important;
}

.pointer {
  cursor: pointer;
}

.fa-gray-nav {
  color: #abb3bc;
  margin-right: 1rem;
}

/* Card hover effect */
.card-hover-effect {
  transition: transform 0.2s ease-in-out;
  /* Smooth transition for the transform effect */
}

.card-hover-effect:hover {
  transform: translate(0px, -20px);
  /* Move the card 10px right and 10px up on hover */
}

/* Linenums for code wells */
/* Adds individual lines to prettyprint */
ol.linenums {
  counter-reset: linenumber;
}

ol.linenums li {
  list-style-type: none;
  counter-increment: linenumber;
  background: transparent !important;
}

ol.linenums li:before {
  content: counter(linenumber);
  float: left;
  margin-left: -4em;
  text-align: right;
  width: 3em;
}

.stepwise {
  font-size: 18px;
  height: 39.6px;
  width: 39.6px;
  padding: 7px;
  border-radius: 45px;
  background: var(--graphite);
  color: var(--white);
  text-align: center;
}

/* #home-page-cards .card-body {
  background: var(--trench-blue) !important;
} */

#home-page-cards .card-text {
  line-height: 1.25;
}

.outline-none {
  outline: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.card-img-top {
  width: 100%;
  height: 15vw;
  object-fit: cover;
}

/* Back to top button */
#topper {
  display: none;
  position: fixed;
  bottom: 50%;
  right: 0px;
  z-index: 100;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  padding: 8px 4px 10px 4px;
  border-radius: 3px 0 0 3px;
  cursor: pointer;
  font-size: 1rem;
}

#topper:hover {
  background-color: #0069d9;
}

.bg-version {
  background: #adb5bd;
  font-size: 1.25rem;
}

.bg-code {
  background: #25364a;
}

#submit-buttons {
  padding-top: 1rem;
  border-top: 1px solid var(--silver);
  margin-top: 2rem;
}

/* Reset dialog */
#dialog-confirm {
  font-size: 1rem;
}

.ui-widget {
  font-family: 'Figtree', Arial, sans-serif;
}

.ui-widget-content {
  background: var(--white);
  border: none;
  padding: 1rem;
  border-radius: 8px;
}

.ui-widget-header {
  /* background: rgba(0, 0, 0, .08); */
  margin-bottom: 1rem;
  font-weight: bold;
}

.ui-dialog .ui-dialog-buttonpane {
  font-size: 1rem !important;
  margin-top: 0;
  /* padding: .3em 1em .5em .4em; */
}

/* .ui-dialog-buttonpane button {
  font-size: .9rem;
} */

.ui-dialog-buttonset .btn-default {
  color: var(--bright-blue);
  /* background: rgba(0, 0, 0, .05); */
}

/* Style the reset modal ---------------  */
.ui-widget-header {
  background: none;
  border: none;
}

.ui-widget-overlay {
  background: black;
  opacity: .7;
}

.ui-sortable-helper {
  margin-left: 3rem;
}

.ui-state-highlight {
  background: var(--alice-blue) !important;
}

/* Prettyprint basic styling --------------------- */
.prettyprint {
  font-family: "Menlo", "Monaco", "Consolas", monospace !important;
  background: #20364C;
  border-radius: 3px;
  border: none !important;
  padding: 20px !important;
  font-size: 16px;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}

#code,
#css-code,
#js-code {
  outline: none !important;
  tab-size: 2;
}

#code-buttons,
#code-button {
  border-bottom: 1px dashed #4a5b6d;
  padding: .5rem 1rem 1.5rem;
}

optgroup {
  font-size: .5rem;
  font-variant: small-caps;
}

.page-heading {
  font-size: 3.25rem;
}

/* Build button animation --------------------------------------------- */
/* Shout out to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate2 */
#build-button {
  position: relative;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

#build-button:after {
  content: "";
  background: white;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 1s;
}

#build-button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s;
}

#settings-section .form-check-input {
  width: 60px !important;
}

#settings-section .form-check-input:checked {
  background-color: #6aa84f;
  border-color: #6aa84f;
  width: 60px;
}

::placeholder {
  color: #c0c0c0 !important;
}

.example-label {
  font-variant: small-caps;
  color: var(--silver);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 3px;
}

a {
  text-decoration: none;
}

/* Teamplates on Pages page */
#templates-section {
  background: var(--white);
  padding: 1rem 1.5rem;
}

.template-images {
  /* width: 200px !important;
  height: 200px !important; */
  text-align: center;
  margin: 1.2rem .15rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--graphite);
}

.template-images img {
  max-width: 375px;
}

.downloaded-check {
  margin-top: -175px;
  color: green;
}

/* Filter/search for utilities */
#utilities-filter-input {
  box-shadow: none;
  outline: none;
  color: var(--slate-gray);
}

.small-caps {
  font-variant: small-caps;
  font-size: larger;
}

/* Utilities List Copy buttons */
#utility-list-items .copy-util {
  font-family: "Menlo", "Monaco", "Consolas", monospace !important;
  background: #20364C;
  /* background: var(--footer-slate); */
  border-radius: .25rem;
  border: none;
  /* text-indent: -2rem; */
  padding: .75rem 1rem .75rem 2.5rem;
  font-size: 16px;
  color: var(--white) !important;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
  cursor: pointer;
}

#utility-list-items .copy-util .bi {
  color: var(--text-cyan);
  margin-right: 1.25rem;
  margin-left: .5rem;
  font-size: 1.5rem;
}

#utility-list-items .list-group-item {
  border-top: 0;
  margin-bottom: 1rem;
  border-radius: .25rem;
}

.border-silver {
  border-color: silver;
}

/* .input-group input[type="number"] {
  min-width: 200px;
} */

/* .copy-util {
  position: relative;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
} */

/* Animations for the copy button */
/* .copy-util:after {
  content: "";
  background: white;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 1s;
} */

/* .copy-util:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s;
} */

/* Selection formatting */
.copy-util::selection {
  background-color: transparent;
  /* Changes the text color of the selection */
}

input[type="number"] {
  max-width: 175px;
}