.@{prefix}{

  &card{
    background: #fff;
    border: 1px @line-color-light solid;
    border-radius: 2*@radius;


    .card-header{
      position: relative;
      display: flex;
      justify-content: center;
      border-bottom:1px @line-color-light solid;
      align-items:  center;

      .card-title{
        font-size: @font-size-md;
        font-weight: normal;
        padding: 0.6em @padding-vertical;
        text-align: left;
        flex: 1;
      }

      .card-addon{
        padding-right: @padding-vertical;
        color: @font-color-light;
      }
    }



    .card-content{
      padding: 0.5em @padding-vertical;
      text-align: left;
    }

    .card-footer{
      display: flex;
      justify-content: center;
      border-top:1px @line-color-light solid;
      align-items:  center;
      padding: 0.5em @padding-vertical;
      text-align: left;
      .card-footer-left{
        flex:1;
      }
      .card-footer-right{

      }
    }
  }


  &card-underline{
    border:0px;
    border-bottom: 1px @line-color-light solid;
  }

  &card-primary{
    border-left: @r*4px @color-primary solid;
  }

  &card-highlight{
    border-left: @r*4px @color-highlight solid;
  }

  &card-comfort{
    border-left: @r*4px @color-comfort solid;
  }

  &card-new{
    border: 1px @line-color-light solid;
    border-radius: 2*@radius;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    min-height: @r*100px;

    .card-content{
      i{
        font-size: @r*28px;
        color: @font-color-light;
      }
      p{
        padding: 0;
        margin:0;
        color: @font-color-light;
      }
    }
  }

  &card-square{
    border-radius: 0;
    border-right:0;
    border-left:0;
  }
}