/* Pricing */
/* CSS for the pricing tier boxes and table of features */
/* No styling for containing page, so that this may be used in the marketing site or the app */

/* Contains the three main boxes of pricing tiers */
div.pricing_container {
    width:100%;
    display: flex;
	}
    
    /* Box */   	
    div.pricing_tier {
	    float:left;
		flex-grow: 1;
        background: white;
        border:var(--divider-light);
        padding:var(--margin-m);
        border-radius:var(--radius-tight);
        text-align:center;
		}
		
		div.pricing_tier:nth-child(1) {
			margin:0px var(--margin-s) 0px 0px;
			width:calc(40% - var(--margin-s));
			}
		
		div.pricing_tier:nth-child(2) {
			margin:0px var(--margin-s) 0px 0px;
			width:calc(40% - var(--margin-s));
			}
		
		div.pricing_tier:nth-child(3) {
			margin:0px;
			width:20%;
			}
		
    div.pricing_tier h2 {
        margin-bottom:var(--margin-s);
        font-size:18px;
        line-height:18px;
        height:30px;
		}
		
    div.pricing_tier p.price {
	    margin-left:10%;
        font-size:18px;
        line-height:16px;
        font-weight:500;
        color:var(--color-blue);
        width:80%;
        border-bottom:var(--divider-light);
        text-align:center;
    	}
    	
    div.pricing_tier p.tier_description {
        margin:var(--margin-s) 0px;
        font-size:16px;
        line-height:18px;
        height:60px;
		}
    	
    a.text {
	    display: flex;
		justify-content: center;
		align-items: center;
	    height:var(--button-height);
	    font-size:16px;
	    line-height:16px;
        border:var(--divider-light);
        padding:var(--margin-xs);
        border-radius:var(--radius-tight);
        width:100%;
		}
		
		
/* Features Table */
.features {
    margin-top:var(--margin-l);
	}
	
.features table {
    width: 100%;
    border-collapse: collapse;
	}
	
    .features th, .features td {
        padding:var(--margin-m);
        background-color:white;
        border-bottom:2px solid var(--color-very-light);
        border-top:2px solid var(--color-very-light);
        text-align:center;
        line-height:20px;
		}
		
    .features th {
        background-color:var(--color-orange);
        color:white;
        padding:var(--margin-xs);
    	}
    
    .features td {
        border-left:2px solid var(--color-very-light);
        min-width:100px;
    	}
    
    .features td:first-child {
        text-align:left;
        border-left:none;
    	}
    
    .features td svg {
        color:green;
    	}
    
    .features td.pricing_section {
	    background-color:var(--color-blue);
	    color:white;
	    font-weight:600;
    	}
  
/* Pricing Promotion */
a.pricing_promotion {
	width:100%;
	height:var(--button-height);
	display:block;
	position:relative;
	padding:0px;
    border-radius:var(--radius-tight);
	background-color:var(--color-purple);
    margin-bottom:var(--margin-m);
	}
	
div.pricing_promotion {
	position:relative;
	width:100%;
	height:var(--button-height);
	color:white;
	background-color:var(--color-purple);
    padding:var(--margin-xs);
    border-radius:var(--radius-tight);
    margin:0px;
    margin-bottom:var(--margin-m);
	}
	
	div.pricing_promotion p:nth-child(1){
		position:absolute;
		top:2px;
		left:var(--margin-s);
		text-transform:uppercase;
		font-weight:300;
		font-size:12px;
		}
	
	div.pricing_promotion p:nth-child(2){
		position:absolute;
		top:18px;
		left:var(--margin-s);
		font-weight:700;
		font-size:16px;
		}


/* Toggle Switch */
div.pricing_toggle {
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	height:var(--button-height);
	font-size:16px;
	font-weight:400;
	line-height:16px;
    box-shadow:1px 1px 2px rgb(0,0,0,.3);
    padding:var(--margin-xs);
    border-radius:var(--radius-tight);
    margin-bottom:var(--margin-m);
	}
	
	
	div.pricing_toggle div {
		width:33%;
		}
	
	div.pricing_toggle div:nth-child(1) {
		text-align: right;
		}
	
	div.pricing_toggle div:nth-child(2) {
		text-align: center;
		width:80px;
		}
		
	div.pricing_toggle div span:nth-child(1){
		display:inline-block;
		font-weight:500;
		color:var(--color-blue);
		}
		
	div.pricing_toggle div span:nth-child(3){
		display:inline-block;
		font-weight:300;
		font-size:14px;
		height:40%;
		}
	
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
    margin: 0 10px;
	}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
	}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow:inset 1px 1px 2px rgb(0,0,0,.3);
    background-color:var(--color-light);
    transition: 0.4s;
    border-radius: 25px;
	}

.slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color:white;
    box-shadow:1px 1px 2px rgb(0,0,0,.3);
    transition: 0.4s;
    border-radius: 50%;
	}

input:checked + .slider {
	}

input:checked + .slider::before {
    transform: translateX(24px);
	}

.hidden {
    display: none;
	}



 /* Responsive Style for Mobile Screens */
@media (max-width: 700px) {

	div.pricing_container {
	    display:block;
		}
	
	    /* Box */   	
	    div.pricing_tier {
		    float:left;
	        background: white;
	        border:var(--divider-light);
	        padding:var(--margin-m);
	        border-radius:var(--radius-tight);
	        text-align:center;
			}
			
			div.pricing_tier:nth-child(1), 
			div.pricing_tier:nth-child(2), 
			div.pricing_tier:nth-child(3) {
				margin:0px 0px var(--margin-s) 0px;
				width:100%;
				}
	
	    div.pricing_tier p.tier_description {
	        height:40px;
			}
			
	.features th, .features td {
	    padding:var(--margin-xs);
	    min-width:80px;
	    }
	} /* END Responsive Style */