/*--Pricing Initial---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.pricing-title{
    color:var(--dark-blue);
    padding-bottom:2rem;
    padding-top:2rem;
    font-size:1.5rem;
    width:100%;

    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;
}

/*--Pricing Plan-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.plan-holder{
    justify-content:center;
    align-items:center;
    display:flex;

    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%);
    margin-left:50%;

    height:fit-content;
    width:fit-content;
    overflow:hidden;
}
.plan{
    background-color:var(--background-white);
    color:var(--dark-blue);
    max-width:48vw;
    padding:1rem;
    height:46rem;
    width:20rem;
}
.plan:nth-child(2){
    border-left:1px solid var(--border-gray-1);
}
.plan-title{
    justify-content:center;
    align-items:center;
    white-space:nowrap;
    font-weight:bold;
    overflow:hidden;
    display:flex;

    color:var(--accent-blue-1);
    margin-bottom:2rem;
    font-size:1.5rem;
    width:100%;
}
.plan-value{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    margin-bottom:1rem;
    font-size:2.5rem;
    width:100%;
}
.plan-text-small{
    justify-content:center;
    align-items:center;
    display:flex;

    transform:translateY(-75%);
    color:var(--gray-1);
    width:100%;
}
button.plan-button{
    margin-left:calc(50% - min(7.5rem, 17.5vw));
    max-width:35vw;
    width:15rem;
}
.plan-divider{
    background-color:var(--background-gray-2);
    margin-bottom:1rem;
    margin-top:2rem;
    margin-left:10%;
    height:1px;
    width:80%;
}
.plan-content-list{
    height:fit-content;
    width:100%;
}
.plan-content-item{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-bottom:0.5rem;
    min-height:2rem;
    width:100%;
}
.plan-check-mark{
    background-image:url("../assets/icons/check.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:100%;

    margin-right:1rem;
    flex-shrink:0;
    height:2rem;
    width:2rem;
}
.plan-content-value{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    font-size:0.9rem;
    height:100%;
    width:100%;
}
.plan-pad{
    height:4rem;
}
.plan-owned{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    color:var(--accent-blue-1);
    font-size:2rem;
    height:4rem;
    width:100%;
}

/*--Pricing Plan Info--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.plan-info{
    background-image:url("../assets/icons/info.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:100%;

    transition:ease-in-out 0.05s;
    user-select:none;
    cursor:pointer;

    margin-top:0.25rem;
    margin-left:1rem;
    flex-shrink:0;
    height:1.5rem;
    width:1.5rem;
}
.plan-info:hover{
    transform:scale(1.05);
}
.plan-info:active{
    transform:scale(0.95);
}
.plan-info-window{
    box-shadow:0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.1);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translateY(-50%);
    left:calc(50% + 23rem);
    position:absolute;
    display:none;
    padding:1rem;
    top:50%;
}
.plan-info-window-row{
    color:var(--dark-blue);
    margin-bottom:1rem;
    width:20rem;
    max-width:42vw;
}

/*--Payment Finished Screen--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.payment-title{
    color:var(--dark-blue);
    font-weight:bold;
    margin-left:3rem;
    margin-top:3rem;
    font-size:3rem;
}
button.payment-return{
    margin-left:3rem;
    width:10rem;
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:1500px){
    .plan-info-window{
        transform:translate(calc(-1 * min(21.5rem, 47vw)), -50%);
        top:calc(50% + 8rem);
        left:50%;
    }
}