@media (min-width: 576px) {
    .modal {
        padding-left: 17px;
    }

    .modal-lg {
        max-width: 1050px !important;
        margin: 1.75rem auto;
    }
}


circle.event {
    fill: #ffe5af;
    outline: 0;
}
circle.event.active {
    fill: #fcb525;
}
circle.event-border, line.event-border {
    opacity: 0;
}
circle.event-border.active, line.event-border.active {
    stroke: #fcb525;
    opacity: 1;
}

circle:focus.event-border {
  opacity: 0.5;
}

.timeline-popover {
    position: absolute; 
    border-top: 4px solid #fcb525; 
    pointer-events: none;
}

.timeline-popover-content {
    margin-left: 15px; 
    pointer-events: all; 
    width: calc(100% - 15px);
    background-color: white; 
    border: 2px solid #bebebe; 
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 
    justify-content: center; 
    padding: 5px;
}

.timeline-popover-content-margin-left {
    width: calc(100% - 45px);
    margin-left: 45px;
    margin-right: 0px;
}

.timeline-popover-content-margin-right {
    width: calc(100% - 45px);
    margin-left: 0px;
    margin-right: 45px;
}

.popover-img {
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 100px;
}

.popover-title {
    width: 100%;
    text-align: center;
    color: #696969;
    font-size: 1.2rem;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.popover-desc {
    font-size: 0.8rem;
    width: 100%;
    padding: 0 5px;
    max-height: 200px;
    overflow-y: scroll;
    scrollbar-width: thin;
    overflow-x: hidden;
}

.popover-desc-sm {
  max-height: 100px;
}

/* width */
.popover-desc::-webkit-scrollbar {
    width: 5px;
    }

    /* Track */
    .popover-desc::-webkit-scrollbar-track {
    background: #f1f1f1; 
    }
    
    /* Handle */
    .popover-desc::-webkit-scrollbar-thumb {
    background: #888; 
    }

    /* Handle on hover */
    .popover-desc::-webkit-scrollbar-thumb:hover {
    background: #555; 
    }

.popover-desc img {
    max-width: 100px;
    max-height: 100px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom:5px;
    margin-top: 5px;
}

.popover-desc p {
    font-size: 0.8rem !important;
}

#timeline-popover {
    z-index: 1;
}

.history-heading {
    border-bottom: 5px solid #156481;
    text-align: center;
    color: #000;
    font-family: 'Oswald', "Arial Narrow", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2.3rem;
    padding-bottom: 5px;
  }
  
  .milestone-year {
    fill: #CCC;
    font: 35px 'Oswald', "Arial Narrow", sans-serif;
  }
  
  .milestone-year-sm {
    fill: #CCC;
    font: 25px 'Oswald', "Arial Narrow", sans-serif;
  }
  
  #timeline-container {
    background-image: url("/images/template/images/top_right_swing.svg"), url("/images/template/images/bottom_left_swing.svg");
    background-position: right top, left bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 50%, 50%;
    position: relative; 
    width: 100%; 
    max-width: 345px;
  }
  
  #history-modal .modal-content {
    background-image: url("/images/template/images/top_right_swing.svg"), url("/images/template/images/bottom_left_swing.svg");
    background-position: right top, left bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 30%, 30%;
    position: relative; 
    width: 100%
  }
  
  #timeline-container-modal:after {
    content: "";
    display: table;
    clear: both;
  
  }
  
  #timeline-container-modal {
    .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before,
    .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
      border-color: transparent;
    }
  
    .tooltip-inner {
        background-color: white; 
        border: 2px solid #bebebe; 
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        min-width: 200px;
        border-radius: 0;
    }
  
    .tooltip-inner .popover-title {
      color: #696969;
      font-size: 1.0rem;
    }
  
    .tooltip-inner .popover-desc {
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-bottom: 0;
      -webkit-line-clamp: 3;
  
      font-family: 'Fira Sans Condensed', sans-serif;
      font-weight: 400;
      font-size: 0.8rem;
    }
  }
  
  .btn-history-expand {
    border: 1px solid #575757;
    color: #434343;
    fill: #575757;
    background-color: transparent;
  }
  
  #modal-svg-container {
    width: 340px;
  }

  .sidebar-contact .section-block-wrapper p {
    font-size: 1.15rem;
  }

  circle.event {
    cursor: pointer;
  }


  .tab-pane .accordion:nth-of-type(1) .card {
    border-top: 1px solid rgba(0,0,0,.125);
  }
  .accordion .card {
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
  }

  .accordion .card .card-header {
    background-color: transparent;
    padding: 5px 0px !important;
  }

  .accordion .card .card-header button  {
    color: #000;
    width: 100%;
    text-align: left;
  }

  [data-toggle="collapse"][aria-expanded="true"] {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="gray" class="bi bi-dash-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/></svg>') right no-repeat;
    font-weight: 600 !important;
  }

  [data-toggle="collapse"][aria-expanded="false"] {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="gray" class="bi bi-plus-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>') right no-repeat;
    font-weight: 600 !important;
  }

  .mw-100px {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
  }