/* DIRTY Responsive pricing table CSS */

/*
- make mobile switch sticky

*/
    div#pricing {
      box-sizing:border-box;
      padding:0;
      margin:0;
       outline: 0;
    }
    article {
      width:100%;
      max-width:1000px;
        margin:auto;
      margin-bottom:20px;
      height:auto;
      position:relative;
    }
    div#pricing ul {
      display:flex;
      top:0px;
      z-index:10;
      padding-bottom:14px;
    }
    div#pricing li {
      list-style:none;
      flex:1;
    }
    div#pricing li:last-child {
      border-right:1px solid #DDD;
    }
    div#pricing button {
      width:100%;
      border: 1px solid #DDD;
      border-right:0;
      border-top:0;
      padding: 10px;
      background:#FFF;
      font-size:14px;
      font-weight:bold;
      height:60px;
      color:#999
    }
    div#pricing li.active button {
      background:#F5F5F5;
      color:#000;
    }
    div#pricing table { border-collapse:collapse; table-layout:fixed; width:100%; }
    div#pricing th { background:#F5F5F5; display:none; }
    div#pricing td, th {
      height:53px
    }
    div#pricing td,th { border:1px solid #DDD; padding:10px;}
    div#pricing td,th {
      text-align:left;
    }
    div#pricing td+td, th+th {
      text-align:center;
      display:none;
    }
    div#pricing td.default {
      display:table-cell;
    }

    .bg-purple {
      border-top:3px solid #A32362;
    }

    .bg-blue {
      border-top:3px solid #0097CF;
      font-size: 20px;
    }
    .bg-blue:hover{
        cursor: pointer;

    }
    .price_feats{
        font-weight:bold;
        font-size: 13px;

    }
    .sep {
      background:#F5F5F5;
      font-weight:bold;
    }
    .txt-l { font-size:28px; font-weight:bold; }
    .txt-top { position:relative; top:-9px; left:-2px; }
    .tick { font-size:18px; color:#2CA01C; }
    .cross_out { font-size:18px; color:#bb0000 }
    .hide {
      visibility: hidden;
    }

    @media (min-width: 640px) {
      div#pricing ul {
        display:none;
      }
      div#pricing td,th {
        display:table-cell !important;
      }
      div#pricing td,th {
        width: 330px;

      }
      div#pricing td+td, th+th {
        width: auto;
      }
    }

    .tooltip.bottom .tooltip-arrow {
        border-bottom-color: #6c7779;
    }

    .tooltip-inner {
        background-color: #6c7779 !important;
      /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
      color: #fff;
    }

    .calculator_container{

        background-color: rgba(82, 84, 87, 0.05);
        margin-top: 40px;
        padding-top: 5px;
    }

    .calculator_heading_container{
         background-color: rgba(82, 84, 87, 0.56);
        color: ghostwhite;

        height: 60px;
        padding-left: 10px;
        padding-top: 11px;
        font-size: x-large;
        width: 90%;
        margin:auto;
        margin-top: 15px;

    }

    .calculator_item_container{
        height:80px;
        width: 90%;
        margin:auto;
        margin-top: 15px;
        overflow: hidden;
    }

    .calc_item_with{
        width: 30%;
    }

    .high_container{

        height:190px;
    }

    .hr_margins{
        margin: 0;
        margin-top: 3px;
        margin-bottom: 3px;
        width: 20%;
        height: 1px;
        color: red;
        background-color: red;
    }