body {
    padding-top: 70px;
    background: #F1F2F7;
}

/*************************************************************
  Cart
*************************************************************/

.cart input { max-width: 100px; display: inline-block; }
.cart .item td { line-height: 34px;}
.cart .table > tfoot > tr > td {border-top: 0; padding: 5px;}
.cart tfoot { border-top: 2px solid #ddd;}
.cart .table > tfoot > tr.total-row > td  { border-top: 1px solid #ddd; }
.cart .table > tfoot > tr.total-row > td.no-border { border: 0; }
.cart .img-responsive {width: 100%;}
.cart .table td.no-border { border: 0; }

/*************************************************************
  chargeCredit card
*************************************************************/

.chargeCard img {margin: 20px auto 0 auto; max-width: 225px;}
div.chargeCard { padding-bottom: 15px; }
.chargeCard .jumbotron {background: none;}

.nextButton { margin-right: 15px; }


/*************************************************************
  chargeCredit card
*************************************************************/

.orderSummary h3 a {font-size: 14px; font-weight: normal;}
.orderSummary tfoot { border-top: 2px solid #ddd;}
.orderSummary .table > tfoot > tr.total-row > td.no-border { border: 0; }
.orderSummary .btn {margin: 10px;}


/*************************************************************
  havecoupon
*************************************************************/

.havecoupon .btn {font-size: 18px; }
.havecoupon p em {padding: 0 30px; }
.havecoupon h2 {padding-bottom: 40px; }



/*************************************************************
  havecoupon
*************************************************************/

div.applycoupon { padding-bottom: 20px;}
.applycoupon h2 {padding-bottom: 10px; }

/*************************************************************
  Setup Pages
*************************************************************/

.setup body {
    padding-top: 20px;
    background: #311A41;
}

.setup .navbar {
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}



.setup .navbar-brand {
    float: none;
    padding: 5px;
    margin-bottom: 20px;
}

.setupbox {
    -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.1);
    box-shadow: 0 4px 5px rgba(0,0,0,.1);
    border-radius: 4px;
    padding: 10px 20px 20px 20px;
    min-height: 200px;
}

/* content not to exceed 400px */
.button_container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap: wrap-reverse;
}

.button_container .filler {
    flex-grow: 1;
    margin: -15px;
}

.button_container .btn {
    flex-shrink: 0;
    min-width: min-content;
}

.setupbox {
    min-width: 225px;
}

@media (max-width: 400px) {
  .button_container .btn {
    width: 100%;
  }

  .button_container .filler {
      display: none;
  }
}

button {
    border-radius: 3px;
    padding: 10px 12px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-default {
    background: #92cf5c;
    border-color: #92cf5c;
    color: #fff;
}

.btn-default:hover {
    color: #92cf5c;
    background: #FFF;
    border-color: #92cf5c;
}

.btn-primary {
    background: #FFF;
    border-color: #AAA;
    color: rgb(49, 26, 65);
}

.btn-primary:hover {
    background: #FFF;
    border-color: #92cf5c;
    color: #92cf5c;
}

.setup #footer hr {
    display: none;
}

.setup #footer {
    padding-top: 20px;
    text-align: center;
}

#progressbar {
    margin-top: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
    text-align: center;
    padding: 0;
}

#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    float: left;
    position: relative;
}

#progressbar.third li {
    width: 33.33%;
}

#progressbar.quarter li {
    width: 25%;
}

#progressbar.fifth li {
    width: 20%;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    line-height: 30px;
    display: block;
    font-size: 14px;
    color: #666775;
    background: #FFF;
    border-radius: 50px;
    margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #FFF;
    position: absolute;
    left: -50%;
    top: 14px;
    z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}

#progressbar li.active:before,  #progressbar li.active:after{
    background: #92cf5c;
    color: #FFF;
}

.setup .pricing {
    min-height: 400px;
}

.setup .monthly form, .setup .lifetime form {
    padding: 0 0 20px 0;
    text-align: center;
}

.setup .pre-paid form {
    padding: 0 0 0 0;
    text-align: center;
}

.setup .pricing form .form-group {
    padding-top: 8px;
    margin-top: 7px;
    border-top: 1px solid #EEE;
}

.setup .monthly, .setup .lifetime {
    border-right: 1px solid #DDD;
}

.setup .monthly:hover, .setup .lifetime:hover, .setup .pre-paid:hover {
    background: #EEE;
}

.setup .pricing h3 {
    text-align: center;
}

.setup .monthly h4, .setup .lifetime h4, .setup .pre-paid h4 {
    font-size: 36px;
    text-align: center;
}

.setup .monthly h4 small, .setup .lifetime h4 small, .setup .pre-paid h4 small {
    font-size: 14px;
}

.setup .pricing h3 {
    margin-top: 10px;
}

.setup .pricing p {
    font-size: 11px;
}


/*************************************************************
  Main Navigation
*************************************************************/

.navbar {
    background: #594f8d;
    border: none;
    padding: 10px 0;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
}

.navbar-brand {
    display: block;
    width: 130px;
    height: 50px;
    background: url(/assets/img/logo.png) center center no-repeat;
    background-size: 100px auto;
    width: 100px;
    margin: 0 18px 0 5px;
}

.navbar .navbar-nav>li>a {
    color: #bdb8d7;
    padding: 10px 10px;
    margin: 8px 5px 0 5px;
}


.navbar .navbar-nav>li>a:before, .navbar-text:before {
    padding-right:5px;
    font-size: 120%;
    vertical-align: bottom;
    line-height: 120%;
    display: none;
}

.navbar-text:before {
    padding-right:5px;
    font-size: 120%;
}

.navbar .navbar-nav>li.active>a:before {
    display: inline-block;
}



.navbar-inverse .navbar-text {
    color: #bdb8d7;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
    background-color: #92cf5c;
    border-radius: 4px;
}

.navbar-inverse .navbar-link {color: #92cf5c; text-decoration: none;}


/* triangle drop down */
.navbar #login .triangle:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid;
    border-top-color: inherit;
    margin-left: 5px;
    top: 13px;
    position: relative;
    opacity: 0.2;
}

.navbar-text {
    margin-top: 18px;
    margin-bottom: 0;
}


/* UNDO THE NAVBAR COLLAPSE -- maybe we don't want that */

.navbar-collapse.collapse {
    display: block;
    overflow-y: visible;
    border: none;
    box-shadow: none;
    padding: 0;
}

.navbar-toggle {
    display: none;
}

.navbar-nav>li, .navbar-nav {
    float: left;
    margin: 0;
}

.navbar-nav.navbar-right:last-child {
    margin-right: -15px;
}

.navbar-right {
    float: right;
}

.navbar-header {
    float: left;
}

/*************************************************************
  Box Colors
*************************************************************/


.yellow {background-color: #EBBF00; color: #fff;}

.green {background-color: #92cf5c; color: #fff;}

.purple {background-color: #594f8d; color: #fff;}

.orange {background-color: #E97F02; color: #fff;}

.blue {background-color: #4BC1E6; color: #fff;}

.pink {background-color: #FF61F1; color: #fff;}
.grey {background-color: #444554; color: #9999A1;}

.shade {background-color: rgba(0,0,0,0.1);}
.purple .shade {background-color: rgba(255,255,255,0.1);}

.white {background-color: #FFF; color: #333;}
.settings .white {color: #333;}

hr {border-top: 1px solid #DDD;}



h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    line-height: 1em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: 10px;
    margin-bottom: 20px;
}



/*************************************************************
  Misc Formatting Overrides
*************************************************************/

h3 {
    margin: 30px 0 15px 0;
    color: #669;
}



/*************************************************************
  Legal Doc styles
*************************************************************/

#tos { border: 1px solid black; }
div.legal {width: 100%; max-width: 800px; font-family: sans-serif; color: #333; margin: 30px auto 30px auto;}
.legal ol { list-style-type: decimal; }
.legal ol ol { list-style-type: lower-alpha; }
.legal ol ol ol { list-style-type: lower-roman; }

/*************************************************************
  Mobile Styles
*************************************************************/

@media (max-width: 479px) {

}


@media (max-width: 767px) {

    .navbar .navbar-nav>li>a {
        color: #bdb8d7;
        padding: 0;
        margin: 6px 40px 0 0px;
        visibility: hidden;
        width: 40px;
        height: 1px;
        overflow-x: visible;
    }

    .navbar {
        padding: 0;
        min-height: 55px;
    }

    .navbar-header {
        display: none;
    }

    .navbar-text {
        margin-top: 5px;

    }

    .navbar-text a {
        display: none;
    }

    .navbar-text span {
        visibility: visible;
        color: #fff;
        height: 20px;
    }

    .navbar .navbar-nav>li.active>a:before {

        background-color: #92cf5c;
    }

    .navbar .navbar-nav>li>a:before, .navbar-text:before {
        padding: 5px;
        font-size: 200%;
        border-radius: 4px;
        width: 70px;
        text-align: center;
        vertical-align: bottom;
        line-height: 120%;
        display: inline-block;
        visibility: visible;
    }

    .navbar-text:before {
        width: 30px;
        padding-right: 0px;
    }

    h3 {
        font-size: 18px;
    }


    h2 {
        font-size: 24px;
    }


}