/*!
 *  -------------------------------------------------
 *  Hybrid MLM  Copyright (c) 2018 All Rights Reserved
 *  -------------------------------------------------
 *
 *  @author Acemero Technologies Pvt Ltd
 *  @link https://www.acemero.com
 *  @see https://www.hybridmlm.io
 *  @version 1.00
 *  @api Laravel 5.4
 */

$bottom-margin: 50px;
$line-width: 2px;
$line-color: rgba(#FFF, 0.7);
$bg-color: #EFE6E2;


.hv-wrapper{
  display: flex;
//   justify-content: center;
  .hv-item{
    display: flex;
    flex-direction: column;
    margin: auto;
    .hv-item-parent{
      margin-bottom: $bottom-margin;
      position: relative;
      display: flex;
      justify-content: center;      
      &:after{
        position: absolute;
        content: '';
        width: $line-width;
        height: $bottom-margin / 2;
        bottom: 0;
        left: 50%;
        background-color: $line-color;
        transform: translateY(100%);
      }
    }
    .hv-item-children{
      display: flex;
      justify-content: center;
      .hv-item-child{
        padding: 0 15px;
        position: relative;
        
        &:before, &:after{
          content: '';
          position: absolute;
          background-color: $line-color;
          left: 0;
        }
        
        &:before{
          left: 50%;
          top: 0;
          transform: translateY(-100%);
          width: $line-width;
          height: $bottom-margin / 2;
          
        }
        
        &:after{
          top: -$bottom-margin / 2;
          transform: translateY(-100%);
          height: $line-width;
          width: 100%;
        }
        
        &:first-child:after{
          left: 50%;
          width: 50%;
        }

        &:last-child:after{
          width: calc(50% + 1px);
        }        
        
      }
    }
  }
}