.custom-highlight {
    background-color: transparent !important;
    opacity: 1 !important;
}

header.masthead {
    padding-top: 6.5rem;
    padding-bottom: 6rem;
}

@media (min-width: 768px) {
    header.masthead .masthead-heading {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 2rem;
    }
}

.btn-lg, .btn-group-lg > .btn {
    font-size: 1.2rem;
}

#myVideo {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    max-height: 100%;
}

.content {
    position: fixed;
    top: 50%;
    left: 0;
    background: rgba(255, 255, 255, 1);
    color: #0a0a0a;
    width: 100%;
    padding: 20px;
    height: 190px;
    margin-top: -95px;
    text-align: center;
}

.btn {
    box-shadow: 0 0 0 0.14rem var(--brand-color) !important;
}

.btn.btn-rectangle {
    box-shadow: 0 0 0 0.14rem var(--brand-color) !important;
}

.container.cover-img {      
    /* background-color: rgba(0, 247, 216, 0.8); */
    /* background-color: rgba(96, 125, 139, 0.8); */ /* #607D8B */
    background-color: rgb(20 20 20 / 80%);
    width: 100%;
    height: 100%;
}

a {
    color: var(--brand-color);
}

.amcharts-export-menu.amcharts-export-menu-top-right.amExportButton {
    display: none;
}

.card-header {
    background-color: white;
}

.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(assets/img/loading-2.gif) 50% 50% no-repeat #f9f9f9;
    opacity: 1;
}

#side-by-side-panel {
    margin-bottom: 40px;
}

/* SM Small Device :320px. */
@media only screen and (min-width: 280px) and (max-width: 1024px) {

  span.link {
    display: none;
  } 

  #side-by-side-panel {
    /* margin-bottom: 60px; */
  }

  #panel-inner-row {
    height: unset !important;
  }
}

@media only screen and (max-width: 896px) and (orientation: landscape) {
  .col-md-6.panel {
    height: 100vh !important;
    overflow-y: auto !important;
  }

  .row.flex-row {
    flex-wrap: nowrap !important;
  }

  .sticky-top {
    position: relative;
  }

  #side-by-side-panel {
    margin-bottom: 60px;
  }

  #panel-inner-row {
    height: unset !important;
  }
}

ion-icon {
    font-size: 20px;
}

.card-body {
  max-height: 600px;
  overflow-y: auto;
}

.blue-hover:hover,
.btn-outline-secondary:hover {
  background-color: #3F51B5 !important;
  color: white !important;
}

.popover-header {
    display: none;
}

.popover-body {
    background: linear-gradient(to top right, #b91d73, #f953c6);
    color: white;
    border: solid 2px yellow;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.22;
}

.popover-body strong {
    color: yellow;
}

.popover-body img {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 200px;
    text-align: center;
    /* border: solid yellow 1px; */
}

button.nav-link.active {
    background: linear-gradient(to top right, #b91d73, #f953c6);
    color: white !important;
    /* border: solid 2px yellow !important; */
}

#wiki-list-1 img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    margin: 5px;
}

.description {
    color: #525252;
    font-size: 16.69px;
}

.card.shadow {
    box-shadow: none !important;
}

#depth-panel {
    background-color: #fafafa;
}

.introjs-helperLayer {
    border: 1px solid rgb(255 255 255 / 87%) !important;
}

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

.introjs-tooltiptext {
    font-size: 18px;
    line-height: calc(var(--line-height-unit) * 1.22) !important;
}

.analyze-btn {
    box-shadow: 0 0 0 0.14rem var(--brand-color-break) !important;
}

.analyze-btn:hover {
    background: #00bfa6;
}


.browse-btn {
    color: var(--dark);
    box-shadow: 0 0 0 0.14rem var(--brand-color-break) !important;
}

.browse-btn:hover {
    color: white;
}

.analyze-btn,
.browse-btn {
    width: 150px;
}

#browseNewsModal p.card-text {
    font-size: 14px;
}

.card-img-top.news-modal {
    height: 230px;
    object-fit: cover;
}

.nav-tabs .nav-link {
    border: 1px solid #cbcbcb;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: #cbcbcb;
}

.category-link:hover {
    color: var(--brand-hover-color);
}

.bright-link-hover:hover {
    color: var(--brand-hover-color);
}

.category-no-link {
    color: grey;
    text-decoration: none;
}

.category-no-link:hover {
    color: grey;
    text-decoration: none;
    cursor: text;
}

.form-control:focus {
    box-shadow: 0 0 0 0.2rem var(--brand-color);
}

#shot { opacity: 0; transition: opacity .25s ease; }
#shot[src*="screenshot?"] { opacity: 1; }      /* once set */
#shot[src$=".svg"] { opacity: 1; }             /* fallback */