/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 12 Apr, 2019, 4:24:52 PM
    Author     : qainfotech
*/


.pricingdiv{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

.pricingdiv ul.theplan{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    color: white;
    background: #fc7f0c;
    position: relative;
    width: 250px; /* width of each table */
    margin-right: 10px; /* spacing between tables */
    margin-bottom: 1em;
    transition: all .5s;
}

.pricingdiv ul.theplan:hover{ /* when mouse hover over pricing table */
    transform: scale(1.05);
    transition: all .5s;
    z-index: 100;
    box-shadow: 0 0 10px gray;
}

.pricingdiv ul.theplan li{
    margin: 10px 20px;
    position: relative;
}

.pricingdiv ul.theplan li.title{
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    text-transform: uppercase;
    border-bottom: 5px solid white;
}

.pricingdiv ul.theplan:nth-of-type(2){
    background: #92278f;
}

.pricingdiv ul.theplan:nth-of-type(3){
    background: #e84b3a;
}

.pricingdiv ul.theplan:last-of-type{ /* remove right margin in very last table */
    margin-right: 0;
}

/*very last LI within each pricing UL */
.pricingdiv ul.theplan li:last-of-type{
    text-align: center;
    margin-top: auto; /*align last LI (price botton li) to the very bottom of UL */
}  

.pricingdiv a.detailbutton{
    background: white;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
    margin: 10px auto;
    border-radius: 5px;
    color: navy;
    text-transform: uppercase;
}

@media only screen and (max-width: 500px) {
    .pricingdiv ul.theplan{
        border-radius: 0;
        width: 100%;
        margin-right: 0;
    }

    .pricingdiv ul.theplan:hover{
        transform: none;
        box-shadow: none;
    }

    .pricingdiv a.detailbutton{
        display: block;
    }
}
#coursesModal .modal-body{
   max-height: calc(100vh - 210px);
    overflow-y: auto;
}