/* Adjust the Montly/Yearly toggle switch colour because I just want it to indicate which mode is selected, not if yearly is on/off. */
.form-switch .form-check-input,
.form-switch .form-check-input:focus,
.form-switch .form-check-input:checked {
    /* Fill is used to adjust the round button colour. %23 is '#' (e.g. #ffffff is %23ffffff) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236d3e94'/%3e%3c/svg%3e");
    background-color: white;
    border-color:var(--color-purple);
}
.form-switch .form-check-input:focus{
    box-shadow: var(--box-shadow-purple) !important;
}

.plan-header{
    padding:8px 0;

    /* When we have a featured column, the plan-header gets a border but 
        the body has its the top-border removed. This is added so that
        each plan's text vertically aligns. */
    border-top:1px solid transparent !important;
}
.featured > .plan-header{
    text-align:center;
    color:white;
    background-color:var(--color-dark-purple);

    border:1px solid var(--color-dark-purple) !important;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

.plan-body{
    border:1px solid #dee2e6 !important;
    border-radius:5px;
    background-color: white; /* so the border of the ribbon it darwn over making it look like it wraps around this box*/
}
.featured > .plan-body{
    /* Adjust the top border radius because the plan-header is visible for the featured item */
    border-top-left-radius:0;
    border-top-right-radius:0;

    /* An inner shadow that matches the border colour to make this section stand out a bit */
    box-shadow: 0 0 5px #dee2e6 inset;
}

.colorStarter{color:var(--color-blue);}
.colorBusiness{color:var(--color-purple);}
.colorPremium{color:var(--color-green);}

.CurrencySymbol{
    font-size: 20px;
    vertical-align: super;
}
#StarterPlanPrice,#BusinessPlanPrice,#PremiumPlanPrice/*,
    #StarterPlanPriceSale,#BusinessPlanPriceSale*/{
    font-size:36px;
    font-weight:600;
}
    /*#StarterPlanPrice,#BusinessPlanPrice { font-size:30px;font-weight:300;text-decoration:line-through; }*/ /*temporarly on sale */

#StarterDetailPlanPrice,#BusinessDetailPlanPrice,#PremiumDetailPlanPrice /*,
    #BusinessDetailPlanPriceSale,#StarterDetailPlanPriceSale*/ {
    font-size: 24px;
    font-weight: 600;
}
    /*#BusinessDetailPlanPrice,#StarterDetailPlanPrice{font-size:20px;font-weight:300;text-decoration:line-through; }*/ /*temporarly on sale */


.GreyText{color:var(--color-grey);}

.FeatureList{
    list-style:none;
    padding-left:40px;
}
.FeatureList > li {                
    font-size:15px;
    line-height: 1.5em;
    padding-left:1.5em; /* Moves the text away from the right edge of the image. Also, so that the text is indented if it wraps (may need to adjust margin-left in the ::before styles if you adjust this value) */
    padding-bottom:6px;
}
.FeatureList > li::before{
    content: "CC"; /* background-image wouldn't display for me without there being some text */
    font-size: 16pt; /* so the text makes the space big enough for the checkmark background */
    color:transparent; /* don't show the text */
    vertical-align: middle;
    margin-left: -1.2em; /* move the content past the left edge of the list items so they don't wrap under the checkmark */
    
    /* %3c for the < character
    %3e for the > character
    %23 for the # character */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='%23198f54' class='bi bi-check' viewBox='0 0 16 16'%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 28px; 
}


.btn-starter,.btn-premium {color:var(--btn-text-color);}
.btn-starter{background-color:var(--color-blue);}
.btn-premium{background-color:var(--color-green);}

    .btn-starter:hover,.btn-starter:focus,.btn-starter:active{
        color:var(--btn-text-color);
        background-color:var(--color-blue-hover);
        box-shadow: var(--box-shadow-blue);
    }
.btn-premium:hover, .btn-premium:focus, .btn-premium:active {
    color: var(--btn-text-color);
    background-color: var(--color-green-hover);
    box-shadow: var(--box-shadow-green);
}

    .btn-starter:hover>span,.btn-starter:focus>span,.btn-starter:active>span,
    .btn-premium:hover>span,.btn-premium:focus>span,.btn-premium:active>span {
        position: relative;
        top:1px;
        left:1px;
    }


/* Prevent the bottom border on the footer's row */
.footerRow, .footerRow TD { border-bottom-style: none; }


/* 'SALE' ribbon */
/* position at the top-left of the box so that it exceeds the edge of the box by a bit */
.SaleRibbonContainer{position: relative;}
.SaleRibbon{position:absolute;left:-19px;top:-19px;overflow:hidden;width:95px;height:95px;}

/* sets a border at the edge to look like the ribbon is wrapping */
.SaleRibbon::before,.SaleRibbon::after{position:absolute;content:'';display:block;border:3px solid #ff1e1e;z-index:-1;}
.SaleRibbon::before{top:0;right:0;}
.SaleRibbon::after{bottom:0;left:0;}
.SaleRibbon SPAN {
    font-size: 24px;
    font-weight: 700;
    width:150px;
    text-align:center;
    background-color:#ff1e1e;
    color:white;
    box-shadow:0 3px 1px rgba(0,0,0,.1);

    /* rotate and put in upper left */
    position:absolute;
    transform:rotate(-45deg);
    left:-40px;
    top:17px;
}