/* typography */
/* get your beautiful color names from: http://www.colors.commutercreative.com/grid/ */
/* media queries */
/* timeline layout */

  body {
    color: #898c8f !important;
  }
  
  .timeline {
    position: relative;
    margin-left: 15px;
  }
  .timeline:before {
    /* vertical line*/
    content: "";
    position: absolute;
    top: 10px;
    /* to align with midline*/
    left: 7px;
    width: 3px;
    height: 94%;
    background-color: #6c757d;
  }
  
  .timeline__block {
    position: relative;
    margin-bottom: 30px;
    padding-left: 15px;
  }
  .timeline__block:last-child {
    margin-bottom: 3em;
  }
  .timeline__block:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .timeline__midpoint {
    position: absolute;
    top: 6px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #6c757d;
    z-index: 500;
  }

  .timeline__midpoint:hover {
    transform: scale(1.2);
    cursor: pointer;
    box-shadow: 0px 0px 5px 5px #17a2b8;
    background: #dee2e6;
  }

  .timeline__midpoint.active {
    transform: scale(1.2);
    cursor: pointer;
    box-shadow: 0px 0px 5px 5px #17a2b8;
    background: #dee2e6;
  }
  
  .timeline__content {
    position: relative;
    margin-left: 20px;
  }
  .timeline__content p + p {
    padding-top: 0;
  }
  .timeline__content:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .timeline__midpoint--highlight > .timeline__year {
    display: none;
  }
  
  /* timeline typography */
  .timeline__content .timeline__year {
    text-align: left;
  }
  
  .timeline__midpoint--highlight .timeline__year {
    color: #fff;
    line-height: 4;
  }
  
  .timeline__year,
  .timeline__midpoint--highlight + .timeline__content {
    font-weight: 600;
  }
  
  /* .timeline__content > p {
    font-size: 0.88em;
  } */
  
  /* timeline layout for desktop */
  @media (min-width: 1024px) {
    .timeline {
      margin-left: 0;
    }
    .timeline:before {
      /* vertical line */
      left: 50%;
      margin-left: -1px;
    }
  
    .timeline__midpoint {
      left: 50%;
      margin-left: -6px;
    }
   
    .timeline__midpoint--highlight {
      top: 0;
      width: 76px;
      height: 76px;
      margin-left: -29px;
      margin-left: -38px;
      text-align: center;
    }
    .timeline__midpoint--highlight.no-top-margin {
      margin-top: 0;
    }
    .timeline__midpoint--highlight .timeline__year {
      display: block;
    }
  
    .timeline__midpoint--highlight:before,
  .timeline__midpoint.timeline__midpoint--highlight:after {
      content: none;
    }
  
    .timeline__midpoint--highlight,
  .timeline__midpoint--highlight + .timeline__content {
      margin-top: 2em;
      margin-bottom: 2em;
    }
  
    .timeline__content {
      width: 50%;
    }
    .timeline__content .timeline__year--mobile {
      display: none;
    }
  
    .timeline__content--left {
      margin-left: -6%;
    }
    .timeline__content--left .timeline__year {
      left: 120%;
    }
  
    .timeline__year {
      position: absolute;
      width: 100%;
      margin-top: 0;
    }
  
    .timeline__text--left {
      padding-right: 10px;
      text-align: right;
      font-size: 10px;
    }
  
    .timeline__content--right {
      float: right;
      width: 53%;
      left: 11%;
    }
    .timeline__content--right .timeline__year {
      right: 134%;
      text-align: right;
    }
    .timeline__content--right .timeline__text--right {
      margin-top: 0;
    }
  
    .timeline__img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  
    .timeline__content--left .timeline__img {
      left: 127%;
    }
  
    .timeline__content--right .timeline__img {
      right: 133.5%;
    }
  }

  .sort-desc::before{
    content: "";
    border-style: solid;
    border-width: 15px 10px;
    border-color: transparent transparent #6ca795 transparent;
    display: block;
    width: 0;
    height: 0;
    position: relative;
    bottom: 5px;
    cursor: pointer;
  }

  .sort-asc::before{
    content: "";
    border-style: solid;
    border-width: 15px 10px;
    border-color: #6ca795 transparent transparent transparent;
    display: block;
    width: 0;
    height: 0;
    position: relative;
    top: 10px;
    cursor: pointer;
  }

  .timeline__point__notice {
    display: inline-block;
    line-height: 15px;
    background: #6ca795;
    border-radius: 100%;
    padding: 10px;
    width: 50px;
    height: 50px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    box-shadow: 0px 0px 0px 4px #91cdbc, 0px 0px 0px 10px #919396, 0px 0px 2px 15px #babcbe;
    position: absolute;
    margin-top: -10px;
    left: 25px;
  }

  .timeline__point__notice::before {
    content: "";
    border-style: solid;
    border-width: 13px 25px;
    border-color: transparent transparent transparent #babcbe;
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: -59px;
  }

  .timeline__point__notice__right {
    display: inline-block;
    line-height: 15px;
    background: #6ca795;
    border-radius: 100%;
    padding: 10px;
    width: 50px;
    height: 50px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    box-shadow: 0px 0px 0px 4px #91cdbc, 0px 0px 0px 10px #919396, 0px 0px 2px 15px #babcbe;
    position: absolute;
    margin-top: -10px;
    right: 25px;
  }

  .timeline__point__notice__right::before {
    content: "";
    border-style: solid;
    border-width: 13px 25px;
    border-color: transparent #babcbe transparent transparent;
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: -61px;
  }


  .timeline__text_title {
    margin: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 500;;
  }

  .timeline__text_border {
    margin: 0;
    border-color: #6c757d;
    border-top-width: 3px;
  }

  .timeline__text_description {
    text-align: right;
    font-size: 10px;
  }

  .popover__wrapper {
    position:absolute;
    width:60px;
  }
  
  .popover__title {
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    margin-top: -30px;
  }

  .popover__detail {
    width: 150px;
    font-size:10px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    margin-top: -15px;
  }

  .dot-block {
    width: 100%;
    height: 25px;
    border-radius: 0px 0 0 10px;
    border-style: dotted;
    border-width: 0 0 2px 2px;
  }

  .dot-block::before{
    content: "";
    display: block;
    border-width: 5px;
    border-color: #828589;
    border-style: solid;
    width: 0;
    height: 0;
    border-radius: 50px;
    position: absolute;
    margin-left: -6px;
    margin-top: -7px;
  }


  .popover__wrapper__right {
    position:absolute;
    width:60px;
    left: 300px;
  }
  
  .popover__title__right {
    text-align: center;
    position: absolute;
    left: 100%;
    top: 0;
    transform: translate(-50%, -50%);
    margin-top: -30px;
  }

  .popover__detail__right {
    width: 150px;
    font-size:10px;
    text-align: center;
    position: absolute;
    left: 100%;
    top: 0;
    transform: translate(-50%, -50%);
    margin-top: -15px;
  }

  .dot-block-right {
    width: 100%;
    height: 25px;
    border-radius: 0 0 10px 0px;
    border-style: dotted;
    border-width: 0 2px 2px 0;
  }

  .dot-block-right::before{
    content: "";
    display: block;
    border-width: 5px;
    border-color: #828589;
    border-style: solid;
    width: 0;
    height: 0;
    border-radius: 50px;
    position: absolute;
    margin-left: 54px;
    margin-top: -6px;
  }

  .rotate-block::before{
    content: "";
    display: block;
    border-style: solid;
    border-width: 10px;
    border-color: #6ba795;
    width: 0;
    height: 0;
    border-radius: 50px;
    position: absolute;
    top: 55px;
    box-shadow: 0px 0px 0px 3px #8cc8b6;
    z-index: 100;
  }

  .table-wrapper::before {
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    border-width: 15px;
    position: absolute;
    top: 0;
    left: 70%;
  }

  /* #table {
    height: 200px;
    display: block;
    width: 100%;
    overflow-y: auto;
  } */

  #table tbody tr:first-child {
    background: -webkit-linear-gradient(top, #b3b3b2 0%,#dbdee0 50%,#d2d8d6 100%);
  }

  #table tbody tr {
    background: #dfe4e7;
  }

  #table tbody tr:last-child {
    background: -webkit-linear-gradient(top, #e2e7e8 0%,#dee2e6 25%,#9da29d 100%);
  }

  #table tbody tr:hover {
    background: #ced4da;
  }
  
  #table tbody tr td {
    padding: 10px;
    cursor: pointer;
  }

  #table tbody tr.active {
    background: #fefefe;
  }

  #table tbody tr.active td {
    border-right: solid 1px #9da29d;
  }

  #table tbody tr.active td:last-child {
    border:none;
  }
  #table tbody tr.active td:last-child::before {
    content: "";
    width: 0;
    display: block;
    border-style: solid;
    border-width: 10px 20px;
    position: absolute;
    border-color: transparent #7aa697 transparent transparent;
    margin-left: 90px;
    margin-top: 3px;
  }

  #first_circle_wrapper {
    width:600px;
    height:600px;
    padding:60px;
  }

  #second_circle_wrapper {
    width: 450px;
    height: 450px;
    padding: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #last_circle_wrapper {
    width: 210px;
    height: 210px;
    padding: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .dot__node {
    position: absolute;
    background: #828589;
    color: papayawhip;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    transition: transform 0.2s ease 0s;
    width: 10px;
    height: 10px;
    line-height: 35px;
    border-radius: 100%;
  }

  .dot__node.active {
    /* transform: scale(1.2); */
    cursor: pointer; 
    background: #6ca795;
    box-shadow: 0px 0px 0px 3px #91cdbc;
  }

  .dot__node:hover { 
    /* transform: scale(1.2); */
    cursor: pointer; 
    background: #6ca795;
    box-shadow: 0px 0px 0px 3px #91cdbc;
  }

  #first_circle_box { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    border-radius: 50%; 
    width: 600px; 
    height: 600px; 
  }

  #second_circle_box { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    border-radius: 50%; 
    width: 450px; 
    height: 450px; 
  }

  #last_circle_box { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    border-radius: 50%; 
    width: 210px; 
    height: 210px; 
  }

  .selected__shape {
    height: 190px;
    position: absolute;
    transform-origin: bottom right;
    left: 50%;
    top: 50%;
  }