.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
  overflow: auto;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 0px;
  background: #fff;
  min-width: 20%;
  max-width: 60%;
  position: relative;
  transition: all 5s ease-in-out;
  z-index: 99999;
  border-radius: 6px;
}

.popup-lg {
  max-width: 90%;
}

.popup .header-red {
    min-height: 25px;
    padding: 10px 20px !important;
    color: white !important;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    background-color: #283593;
    border-bottom: 2px solid #ef7a2d;
}

.popup .header-green {
    background-color: #b71c1c;
    min-height: 30px;
    padding: 10px 20px !important;
    color: white !important;
}

.popup .content {
    padding: 20px;
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: white;
  filter: none;
  text-shadow: none;
}
.popup .close:hover {
  color: #ef7a2d;
  opacity: 1;
  filter: none;
  text-shadow: none;
}

.card {
    position: relative;
    padding:10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.25rem;
    border: none;
    background: #ffffff;
    margin-top:10px;
}

.main-section{
    margin-top:10px;
}

.d-flex{
    display:flex;
}

.ml-1{
    margin-left:5px;
}

.mr-1{
    margin-right:5px;
}

.mr-2{
    margin-right:10px;
}

.mr-3{
    margin-right:15px;
}

.w-100{
    width:100%;
}

.icon-company{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.top-bar-custom{
    background-color: #0f4c81;
    width: 123%;
    left: -10px;
    margin-left: -60px;
    height: 50px;
    position:relative;
}

.w-100{
    width:100%;
}

.border{
    border-top: 1px dotted #bcbcbc;
        margin-top: 15px;
    margin-bottom: 15px;
}
.shadow{
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.card-bg {
  background-image: url(https://source.unsplash.com/Q7PclNhVRI0);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  padding: 10px 10px 5px 10px;
  border-bottom-right-radius: 0px!important;
  border-bottom-left-radius: 0px!important;
      background-size: 100% 100%;
}


.blur {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    height: 100%;
    width: 100%;
    padding: 15px 15px 5px 15px;
}

.timeline {
    padding: 10px;
    overflow: auto;
    height: 300px;
    margin-bottom: 15px;
}

.tl-content .tl-header, 
.tl-content .tl-body {
  padding-left: 25.6px;
  
  border-left: 3px solid gainsboro;
}

.tl-body {
  /* padding-bottom:1rem; */
}

.btn-secondary{
    background-color: #717171;
    border-color: #717171;
    color:white;
}

.mb-0{
    margin-bottom:0px;
}

.tl-content:last-child .tl-body {
  border-left: 3px solid transparent;
}

.tl-header {
  position: relative;
  display: grid;
  
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.tl-title {
  font-weight: 600;
  font-size: 1em;
  
  border-bottom: 1px solid gainsboro;
}

.tl-time {
  font-size: 0.7em;
}

.tl-marker {
  display:block;
  position: absolute;

  width: 16px;
  height: 16px;
  border-radius: 50% / 50%;
  
  background: gainsboro;
  
  left: -1.1rem;
  top: 50%;
  
  transform: translate(50%,-50%);
}

.tl-content-active .tl-marker {
  padding: 1.6px;
  
  left: -1.25rem;
  
  width: 18px;
  height: 18px;
  
  border: 2px solid limegreen;
  
  background-color: limegreen;
  background-clip: content-box;
  
  box-shadow: 0 0 15px -2px limegreen;
}

.tl-content-active .tl-title {
  font-weight: 700;
  
  color: green;
}

.text-center{
    text-align:center;
}

.card-custom-header{
    font-size:13px;
}

.mx-0{
    margin:0px;
}

.demo-bg {
    opacity: 0.1;
    position: absolute;
    right: 0px;
    bottom: 5px;
    /* width: 120px; */
    /* height: auto; */
    font-size: 50px;
    color: #0f4c81;
}

.box{
    width: 50%;
    position: relative;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
    padding: 20px;
}