/* Place custom styles here */

/* Adjustment for text after the typed text in a typed-headline div. */
/* If the font scheme is changed, this adjustment should be revised. */
span.after-typed-text {
  margin-left: -10px;
}

/* Twirl animation for the BugSwarm logo. */
@-webkit-keyframes twirl {
  0% {
    -webkit-transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
  }
}

/* Adjustment for logo in navigation bar. */
nav.bar .logo-wrapper {
  position: relative;
  width: 60px;
}

nav.bar .logo {
  position: absolute;
  width: 60px;
  max-height: none;
  transform: none;
  left: 0;

  /* I'd normally just use translate: 0 -50%, but the translate rule was only 
  added to chromium relatively recently (mid-2022). */
  top: -33px;
}
nav.bar .logo:hover {
  animation: twirl 1s ease-in-out;
  -moz-animation: twirl 1s ease-in-out
  -webkit-animation: twirl 1s ease-in-out;
}

@media (min-width: 1200px){
  .bar {
    padding: 3.0em !important;
  }
}

@media (max-width: 1199px){
  .bar {
    padding: 1.0em !important;
  }
}

@media (max-width: 1024px){
  nav.bar {
    margin-left: 5%;
  }

  ul.menu-horizontal {
    margin-left: 50%;
  }
}

@media (max-width: 992px) {
  .bar {
    padding: .5em !important;
  }
}


@media (max-width: 767px){
  .bar {
    padding: .5em !important;
  }
}


/* Adjustment for mobile logo in navigation bar. */
div.bar .mobile-logo {
  display: block;
  float: right;
  height: 80px;
  max-height: none;
  width: 80px;
}

/* Adjust the logo placement on medium-sized devices. */
@media all and (min-width: 768px) and (max-width: 991px) {
  .logo-adjust-md {
    position: absolute;
    top: 20px;
    right: 110px;
  }
}

/* Increase space between top left global navigation items */
.menu-horizontal li:not(:last-child) {
  margin-right: 1.7em;
}

/* Fix button and typed-headline spacing by overriding a theme style for medium viewports. */
/* Overriding the @media all and (max-width: 767px) style. */
@media all {
  .btn:not(:last-child) {
    margin-bottom: inherit;
  }
}
@media all and (max-width: 767px) {
  .btn {
    margin-top: 0.5em;
  }
}
@media all and (max-width: 767px) {
  .typed-headline {
    margin-bottom: 0;
  }
}

/* Fix the footer to the bottom of the window when page content is shorter than
   the window. This class is applied via JavaScript. */
.footer--fixed {
  bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 2;
}

/* Adjust button state user experience. */
.btn {
  transition: 0.05s linear;
}
.btn:hover {
  transition: 0.05s linear;
  transform: translate3d(0, -1px, 0);
  -webkit-transform: translate3d(0, -1px, 0);
}
.btn:active {
  transform: translate3d(0, -1px, 0) scale(0.99);
  -webkit-transform: translate3d(0, -1px, 0) scale(0.99);
  transition-duration: 0;
  -moz-transition-duration: 0;
  -webkit-transition-duration: 0;
}
.btn--primary:active {
  background: #fe9c0e;
}

/* Add a border to the top of the footer. */
footer:not(.bg--dark) {
  border-top: 1px solid #ebebeb;
}

/* Add space before fine print spans in the footer. */
footer span.type--fine-print:not(:first-child) {
  margin-left: 1.85714286em;
}

/* Adjust text spacing in the footer. */
footer h6:not(:last-child), footer .h6:not(:last-child) {
  margin-bottom: 1em;
}

/* Adjust spacing above last row in the footer. */
footer.footer-2 .row:last-child {
  margin-top: 2em;
}

/* Fix to ensure that any "Small Feature" blocks maintain equal height. */
@media all and (min-width: 768px) {
  .display-flex {
    display: flex;
  }
  .display-flex .feature {
    height: 100%;
  }
}

/* Adjust checkbox inputs. */
.input-checkbox {
  margin-top: 0;
}
.input-checkbox + span > label {
  font-size: 1em;
}

/* Adjust radio inputs. */
.input-radio + span {
  display: inline-block;
  position: relative;
  bottom: 10px;
  margin-left: 0.92857143em;
  font-size: 0.85714286em;
  white-space: nowrap;
}
.input-radio + span > label {
  font-size: 1em;
}

/* Add ability to type into number inputs that also have the chevron controls. */
.input-number .input-number__controls {
  pointer-events: none;
}
.input-number .input-number__controls > span {
  pointer-events: all;
}

/* Adjust the line height of form labels. */
label {
  line-height: 1.42857143em;  /* From bootstrap.css body style. */
}

/* Hover animation for navigation bar menu. */
.menu-horizontal li.dropdown .dropdown__trigger:after {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
}
.menu-horizontal li.dropdown:hover .dropdown__trigger:after {
  transform: translate3d(2px, 0, 0);
  -webkit-transform: translate3d(2px, 0, 0);
}

/* Adjust the hover state for navigation bar dropdown menus. */
.dropdown .dropdown__content:not([class='bg--dark']) .menu-vertical li a:hover {
  color: #252525;
}

/* Create a class for rows that require a top margin. */
.row-top-margin {
  margin-top: 10px;
}

/* Fix the width of a button without the type=submit attribute. */
button.btn {
  width: 100%;
}

/* Initially hide the artifact table container until the styling has been adjusted by the JavaScript. */
#artifact-table-container {
  visibility: hidden;
  table-layout: fixed;

}

/* Adjust DataTables styles. Note that most of the table styling is done in JavaScript because DataTables ignores */
/* this CSS file by overriding styling with JavaScript. */
/* Adjust the DataTables entries-per-page dropdown */
div.dataTables_wrapper div.dataTables_length select {
  line-height: initial;
  width: 50px;
}

/* Adjust the position of the check in checkbox elements. */
.input-checkbox input:checked + label:after {
  left: 1px;
  line-height: 1.85714286em;  /* From theme.css body style. */
}

/* Adjust the logos in the acknowledgements banner. */
.list-inline--images img {
  max-height: 50px;
}

/* Adjust the font color for dropdown menus in dark navigation bars. */
/* This selector comes from theme.css. */
.dropdown .dropdown__content:not([class='bg--dark']) .menu-vertical a {
  color: #666;
}

/* Adjust the height of the content on the custom error pages. */
.error-page-vertical-fill {
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  overflow: scroll;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -9999;
}

/* Style an animated loader for forms with long-running processing (e.g. mailing list form). */
div.form-loader {
  animation: spin 2s linear infinite;
  border: 4px solid #d7d7d7;     /* Background color. */
  border-top: 4px solid #f18f01; /* Foreground color. */
  border-radius: 50%;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Style the contact form. */
.form-contact-box {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  padding-top: 34px;
}
#form-contact > div {
  margin-bottom: 25px;
}
#form-contact label {
  color: #3a4466;;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
#form-contact .help-text {
  color: #555;
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 10px;
}

/* Style call to action sections. */
/* This fix is needed after enclosing the call to action section tag with an anchor tag. */
a.cta-link:hover {
  color: #fff;
}

.table {
    width: 55%;
}

/* Style the "Clear" link */
a.clear-link {
    font-size: .75em;
    color: #0101FE !important;
}

a.clear-link:hover {
    color: #0CD6FE !important;
    cursor: pointer;
}

span.passed-diff-url {
    color: #39aa56;
}

span.failed-diff-url {
    color: #db4545;
}

/* Make body text more readable. */
.body-text {
  font-size: 1.1rem;
  color: #444444;
}

.body-text * {
  line-height: 1.5em !important;
}

.body-text ol,
.body-text ul {
  padding-left: 2em;
}

.body-text p:not(:last-child),
.body-text ol li:not(:last-child),
.body-text ul li:not(:last-child),
.body-text ol:not(:last-child),
.body-text ul:not(:last-child) {
  margin-bottom: 1em;
}