@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
}

body {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
  }
  .loading-codepen {
     height: 600px;
     width: 100%;
     text-align: center;
      background: #000;
  }
  .loading-codepen i {
      margin-top: 250px;
      color: #fff;
  }
  .codepen-box pre {
    background: #000;
    color: #fff;
    margin: 0;
  }
  .codepen-box .click-to-run-container {
    background: #28282a;
    padding: 10px 0;
    text-align: center;
  }
  .codepen-box .click-to-run {
    background: #212121;
    color: #ffffff;
    box-shadow: inset 0px 3px #ff8a00;
    border: 0;
    padding: 10px;
    border-radius: 2px 2px 0 0;
    cursor: pointer;
  }
  .codepen-example {
    background: #28282a;
    padding: 5px 0;
    margin-top: 50px;
  }
  #investigate_vehicle_example {
    margin-top: 0;
  }
  .codepen-example h2, .codepen-example p {
    color: #fff;
    padding-left: 5px;
    margin: 10px 0;
  }
  .codepen-example pre {
    padding: 10px;
    margin: 10px;
    border-radius: 4px;
    border: 1px solid gray;
    overflow-x: auto;
  }
  .codepen-example pre:hover {
    border-color: #ff8a00;
  }
  #loadTags, #loadTagSet {
    overflow: visible !important;
    max-height: max-content !important;
  }
  .sdk_introduction pre {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1.5em;
  }
  .safari-fix .click-to-run-container {
    display: none;
  }
   
  .safari-fix .tab__container {
    margin-top: 35px;
  }
  .safari-fix li.tab {
    color: #fff;
  }
  .safari-fix .tab__pane.result {
    max-height: 50vh;
    overflow-y: auto;
  }
  .safari-fix .tab__pane.result pre {
    background: #fff;
    color: #000;
  }
  .safari-fix li.tab {
    border: 1px solid transparent;
  }
  .safari-fix li.tab.active {
    border: 1px solid orange;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
  }
  .safari-fix li.tab.active {
    color: orange;
    font-weight: normal;
  }
  .safari-fix .nohighlight.code {
    border-color: orange !important;
  }
  .safari-fix .tab__container > ul {
    top: -2.1rem;
    right: 1rem !important;
    left: auto;
  }

  .safari-fix.codepen-box.with-fullscreen-feature {
    max-height: 300vh !important;
  }
   
  @media only screen
      and (orientation : landscape) {
      .safari-fix .tab__pane.result {
        max-height: 200vh;
        overflow-y: auto;
      }
      .safari-fix.with-fullscreen-feature .tab__pane.result {
        max-height: 250vh;
        overflow-y: auto;
      }
      .safari-fix#imageGallery, .safari-fix#imageGallerySet {
        max-height: 300vh !important;
      }
      .safari-fix#imageGallery pre code.result, .safari-fix#imageGallerySet pre code.result {
        max-height: 300vh;
        overflow-y: auto;
      }
  }
  @keyframes glow_feature {
    from {
      box-shadow: 0 0 5px 0 limegreen;
    }
    to {
      box-shadow: 0 0 5px 5px limegreen;
    }
  }
  @keyframes glow_damage {
    from {
      box-shadow: 0 0 5px 0 red;
    }
    to {
      box-shadow: 0 0 5px 5px red;
    }
  }