﻿.pricingdiv{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  justify-content: center;
 
}
   

.border-none{border: none !important;}

.pricingdiv ul.theplan{
  list-style: none;
  margin: 0;
  border-radius: 14px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  color: #5d5d5d;
  width: 100%;
  margin-right: 20px; /* spacing between tables */
  margin-bottom: 1em;
  border: 1px solid rgb(200, 200, 200);
  transition: all .5s;
}

.pricingdiv ul.theplan:hover{ /* when mouse hover over pricing table */
 
  transition: all .5s;
  z-index: 100;
  box-shadow: 0 0 10px rgb(200, 200, 200);
  top: -5px;
}

.beforespan_close::before{

 color: red;
  content: "✕";
  margin-right: 10px;

}

.beforespan::before{
  color: #83d604;

  content: "✓";
  margin-right: 10px;
}

}

.pricingdiv ul.theplan .center{
  margin: 0 auto;
  text-align: center;
}

.paddingstyle{
  padding: 5px 0px !important;
}

.textstyle{
  font-size: 14px;
  color: #6c6c6c;
  padding: 2px 35px 1px 23px !important;
}

.colr{
  color: #ff9700;
  font-weight: 500;
  font-size: 14px;
}
 
.nav .ul_lI_pricing{
  width: 48% !important;
  text-align: center;
  font-weight: 700;
  }


  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
 
    white-space: inherit !important;
}

.pricingdiv ul.theplan img{
  max-width: 80%;
  height: auto;
}

.pricingdiv ul.theplan li{
  padding:  10px 10px;
  position: relative;
  border-bottom: 1px solid #eee;
}

.starFree{

  color: #ff9700;
  border: 2px solid #ff9700;
  padding: 7px 30px;
  border-radius: 4px;
}

.bm-none{
  border-bottom: none !important;
}

.fSize{font-size: 34px;}

.pricingdiv ul.theplan li.title{
  font-weight: bold;
  text-align: center;
      margin: 0px 14px;
    top: -14px;
  
    position: absolute;

  background: #ff9700;
  color: white;
  box-shadow: 0 -10px 5px rgba(0,0,0,.1) inset;
  text-transform: uppercase;
  border-radius: 10px;
  border: none;
}

.pricingdiv ul.theplan:nth-of-type(2) li.title{
  background: rgb(249, 111, 118);
  color: white;
  position:absolute;
}
    
.pricingdiv ul.theplan:nth-of-type(3) li.title{
  background: rgb(210, 117, 251);
  color: white;
}
 
.pricingdiv ul.theplan li.title b{
  font-size: 250%;
}

.pricingdiv ul.theplan:last-of-type{ 
  margin-right: 0;
}

/*very last LI within each pricing UL */
.pricingdiv ul.theplan li:last-of-type{
  text-align: center;
  margin-top: auto;  
}  

.pricingdiv a.pricebutton{
  letter-spacing: 1px;
    text-decoration: none;
    display: inline-block;
    margin: 10px auto;
    color: white;
    border-radius: 5px;

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.2);
    width: 100%;
   
  
  padding: 10px;
 
}



@media only screen and (max-width: 600px) {
  .pricingdiv ul.theplan{
    border-radius: 0;
    width: 100%;
    margin-right: 0;
  }
  
  .pricingdiv ul.theplan:hover{
    transform: none;
    box-shadow: none;
  }
  
  .pricingdiv a.pricebutton{
    display: block;
  }
}


.lidisc{
  
  list-style: disc;
  margin-left: 23px;

}