@font-face {
    font-family: UbuntuBold;
    src: url(/assets/fonts/Ubuntu-Bold.ttf);
}
@font-face {
    font-family: UbuntuMedium;
    src: url(/assets/fonts/Ubuntu-Medium.ttf);
}
@font-face {
    font-family: UbuntuRegular;
    src: url(/assets/fonts/Ubuntu-Regular.ttf);
}
body{
    margin:0;
    padding:0;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:hsl(215, 100%, 97%);
}
/*Spacial CSS for hiding elements*/
.hide{
    display:none !important;
}
/*Special CSS ending*/
.outer-container{
    height:100vh;
    width:100vw;
    background-color:hsl(0, 0%, 100%);
    border-radius:15px;
    box-shadow:0px 20px 40px hsla(225, 12%, 87%, 0.801);
    display:flex;
    flex-direction:column;
}
.col-1,.col-2{
    height:100%;
}
.col-1{
    flex:30%;
    background-image: url(/assets/images/bg-sidebar-mobile.svg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: start;
    padding:0rem 3rem 0rem 3rem;
}
.col-2{
    flex:70%;
}
/*CSS for left column tabs mobile*/
.pg-num{
    display:flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    color:hsl(231, 100%, 99%);
    padding:4rem 0.6rem 0rem 0.6rem;
}
.pg-num span{
    width:30px;
    height:30px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: UbuntuBold;
    outline:2px solid hsl(231, 100%, 99%);
    border-radius:50px;
}
.active-num-col{/*Active css class for upper row number tabs*/
    color:hsl(210, 100%, 15%) !important;
    background-color:hsl(206, 88%, 87%) !important;
}
/*CSS for form container on mobile*/
.form-container{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:center;
}
.upper-row{
    width:80%;
    background-color:hsl(0, 0%, 100%);
}
.bottom-row{
    width:90%;
    display:flex;
    flex-direction: row;
    justify-content: end;
    align-items:center;
}

form{
    height:100%;
    display:flex;
    flex-direction:column;
}
.form-title{
    font-family: UbuntuBold;
    color:hsl(213, 91%, 18%);
}
.form-desc{
    font-family: UbuntuRegular;
    color:hsl(230, 3%, 63%);
    margin:-1rem 0rem 1rem 0rem !important;
}
.frm-label,.frm-err-msgs{
    font-size:14px;
    font-family: UbuntuBold;
    margin:14px 0px;
}
.frm-label-container{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}
.frm-input{
    width:100%;
    outline:1px hsl(255, 5%, 85%) solid;
    border:0px;
    padding:10px 0px;
    padding-left:10px;
    margin-left:-5px;
    margin-top:-1.5rem;
    border-radius:4px;
}
.frm-input:focus{
    outline:1px hsl(245, 32%, 44%) solid;
    padding-left:10px;
}
.frm-err-msgs{
    color:red;
}
.frm-input-err{
    outline:1px red solid;
}
.frm-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    padding-left: 10px;
    font-family: UbuntuBold;
    color:hsl(240, 4%, 64%);
}
.frm-input::-moz-placeholder { /* Firefox 19+ */
    padding-left: 10px;
    font-family: UbuntuBold;
    color:hsl(240, 4%, 64%);
}
.frm-input:-ms-input-placeholder { /* IE 10+ */
    padding-left: 10px;
    font-family: UbuntuBold;
    color:hsl(240, 4%, 64%);
}
.frm-input:-moz-placeholder { /* Firefox 18- */
    padding-left: 10px;
    font-family: UbuntuBold;
    color:hsl(240, 4%, 64%);
}
.b-r-right-btn{
    border:0px;
    outline:0px;
    background-color: hsl(215, 89%, 18%);
    color:hsl(180, 100%, 98%);
    border-radius:5px;
    padding:1rem 1.5rem;
    transition:0.6s;
    font-family: UbuntuBold;
}
.b-r-right-btn:hover{
    background-color:hsl(215, 72%, 32%);
    cursor:pointer;
    transition:0.6s;
}
.b-r-left-btn{
    border:0px;
    outline:0px;
    background-color: hsl(0, 0%, 100%);
    color:hsl(240, 4%, 62%);
    border-radius:8px;
    padding:1rem 1.5rem;
    transition:0.6s;
    font-family: UbuntuBold;
}
.b-r-left-btn:hover{
    color:hsl(215, 72%, 32%);
    cursor:pointer;
    transition:0.6s;
}
/*CSS for plans container on mobile*/
.multi-bottom-row{
    width:90%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
}
.plan-container{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:center;
}
.plans-outer-container{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:center;
    margin-top:1rem;
}
.plan{
    width:90%;
    display:flex;
    flex-direction: row;
    justify-content: start;
    align-items:center;
    border:1px solid hsl(240, 3%, 86%);
    padding:1rem;
    margin:6px 0px;
    border-radius:8px;
    transition:0.6s;
}
.plan:hover{
    cursor:pointer;
    transition:0.6s;
    background-color:hsl(230, 75%, 98%);
    border:1px solid hsl(245, 32%, 45%);
}
.plan-selected{
    background-color:hsl(230, 75%, 98%);
    border:1px solid hsl(245, 32%, 45%);
}
.plan img{
    width:35px;
}
.plan-details h3,.plan-details p{
    margin:0px;
}
.plan-price{
    display:flex;
    flex-direction:row;
    justify-content:start;
    align-items:center;
    font-family: UbuntuRegular;
    color:hsl(240, 7%, 71%);
    margin:5px 0px;
}
.plan h3{
    font-family: UbuntuBold;
    color:hsl(215, 89%, 18%);
}
.free-mon-txt{
    font-family: UbuntuMedium;
    font-size:14px;
}
.mon-annual-selection{
    background-color:hsl(230, 75%, 98%);
    border-radius:8px;
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items:center;
    margin:1rem 0rem;
}
.mon-annual-selection p{
    font-family: UbuntuBold;
    color:hsl(240, 6%, 62%);
}
.mon-active{
    color:hsl(214, 91%, 18%) !important;
}
.select-btn-outer-container{
    display:flex;
    flex-direction: row;
    justify-content:start;
    align-items:center;
    background-color:hsl(214, 91%, 18%);
    width:35px;
    height:20px;
    border-radius:45px;
    margin:0rem 1rem;
    padding:0px 4px;
}
.select-btn-yr{
    justify-content:end !important;
}
.select-btn{
    background-color:hsl(180, 100%, 100%);
    width:15px;
    height:15px;
    border-radius:45px;
}
/*CSS for add-ons container on mobile*/
.adds-container{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:center;
}
.addons-outer-container{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:center;
    margin-top:1rem;
}
.addons{
    width:95%;
    display:flex;
    flex-direction: row;
    justify-content: start;
    align-items:center;
    border:1px solid hsl(240, 3%, 86%);
    padding:1rem;
    margin:6px 0px;
    border-radius:8px;
    transition:0.6s;
}
.addons:hover{
    cursor:pointer;
    transition:0.6s;
    background-color:hsl(230, 75%, 98%);
    border:1px solid hsl(245, 32%, 45%);
}
.addons-selected{
    background-color:hsl(230, 75%, 98%);
    border:1px solid hsl(245, 32%, 45%);
}
.addons-details h3,.addons-details p{
    margin:0px;
}
.addons-details{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
}
.addons-txts{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
}
.addons-txts input{
    transform: scale(1.5);
    accent-color: hsl(242, 92%, 62%);
}
.addons-txts input:hover{
    cursor:pointer;
}
.addons-txt-desc{
    margin-left:1rem;
}
.addons-desc{
    font-family: UbuntuRegular;
    font-size:12px;
    color:hsl(231, 4%, 62%);
}
.addons-price{
    display:flex;
    flex-direction:row;
    justify-content:start;
    align-items:center;
    font-family: UbuntuRegular;
    color:hsl(244, 34%, 48%);
    margin:5px 0px;
    font-size:12px;
}
.addons h3{
    font-family: UbuntuBold;
    color:hsl(215, 89%, 18%);
    font-size:14px;
}
/*CSS for summary container on mobile*/
.summary-container{
    font-family: UbuntuRegular;
    color:hsl(240, 5%, 64%);
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: space-between;
}
.summary-outer-container{
    margin-top:2rem;
}
.summary-inner-container{
    background-color:hsl(230, 75%, 98%);
    padding:1.5rem;
    border-radius:15px;
}
.summary-top-txt,.summary-addon,.summary-bottom-txt{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}
.summary-bottom-txt{
    padding:1.5rem;
}
.s-top-left,.summary-mid-txt{
    display:flex;
    flex-direction:column;
    align-items:start;
    justify-content:center;
}
.s-top-right,.sum-addon-price-section,.sum-bottom-right{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:end;
}
.s-top-plan-time,.sum-bottom-left{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:start;
}
.summary-container p{
    margin:0;
}
.summary-hr{
    border:1px solid hsl(230, 19%, 94%);
    margin:0.5rem 0rem !important;
}
.summary-addon{
    width:100%;
    margin:0.5rem 0rem !important;
}
.s-top-plan-time p,.s-top-right p{
    font-family: UbuntuMedium;
    color:hsl(216, 66%, 17%);
    font-size:18px;
}
.s-top-plan-change{
    text-decoration:underline;
}
.sum-bottom-right{
    font-family: UbuntuBold;
    font-size:20px;
    color:hsl(243, 62%, 55%);
}
.s-top-plan-change{
    color:hsl(240, 5%, 57%);
    margin:0.5rem 0rem !important;
}
.s-top-plan-change:hover{
    cursor:pointer;
}
.confirm-btn{
    background-color: hsl(244, 100%, 62%);
    padding:1rem 1.5rem !important;
    transition: 0.6s;
}
.confirm-btn:hover{
    background-color: hsl(244, 100%, 67%);
    transition: 0.6s;
}
/*CSS for thanks continer on mobile*/
.thnx-container{
    font-family: UbuntuRegular;
    color:hsl(240, 5%, 64%);
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:center;
}
.thnx-container .upper-row{
    height:70%;
    width:80%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    text-align: center;
}
.thanks-title{
    font-family: UbuntuBold;
    color:hsl(213, 95%, 15%);
    font-size:30px;
}
.thanks-desc{
    padding:0 !important;
    margin:0rem 0rem !important;
    width:85%;
}
.thanks-desc a{
    text-decoration: none;
    font-family: UbuntuMedium;
    color:hsl(240, 3%, 53%);
    transition: 0.6s;
}
.thanks-desc a:hover{
    color:hsl(240, 3%, 43%);
    transition: 0.6s;
}


@media only screen and (min-width:768px){/*Special extra class for tablets*/
    .multi-bottom-row{
        width:94%;
    }
}


@media only screen and (max-width:1279px){
    .num-desc{
        display:none;
    }
    .col-1{
        height:30vh;
    }
    .col-2{
        height:70vh;
    }
    .upper-row{
        margin-top:-7rem;
        padding:25px;
        border-radius:10px;
        box-shadow:0px 15px 8px hsl(207, 22%, 92%);
    }
    .bottom-row,.multi-bottom-row{
        background-color:hsl(0, 0%, 100%);
        padding:20px;
    }
    .form-container,.plan-container,.adds-container,.summary-container,.thnx-container{
        background-color: hsl(215, 81%, 96%);
    }
    .plan-details{
        margin-left:1rem;
    }
    
}

@media only screen and (min-width:1280px){
    /*CSS for desktop containers*/
    .outer-container{
        height:70vh;
        width:65vw;
        box-shadow:0px 20px 40px hsla(225, 12%, 87%, 0.801);
        flex-direction:row;
        padding:1rem;
    }
    .col-1,.col-2{
        height:100%;
    }
    .col-1{
        flex:25%;
        border-radius:15px;
        background-image: url(/assets/images/bg-sidebar-desktop.svg);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:bottom center;
        display:flex;
        flex-direction:column;
        justify-content: start;
        padding:0rem 3rem 0rem 3rem;
    }
    .col-2{
        flex:75%;
        border-radius:15px;
        padding:0rem 4rem 0rem 4rem;
    }
    /*CSS for left column tabs desktop*/
    .pg-num{
        padding:2rem 0rem 0rem 0rem;
    }
    .num-desc{
        margin-left:1rem;
    }
    .num-step{
        font-family: UbuntuRegular;
        font-size:12px;
        color:hsl(241, 100%, 86%);
    }
    .num-name{
        padding-top:5px;
        font-family: UbuntuBold;
        font-size:14px;
    }
    /*CSS for form container*/
    .form-container{
        align-items:start;
    }
    .upper-row{
        width:100%;
        height:70%;
    }
    .bottom-row{
        width:100%;
    }
    .frm-input{
        margin-top:-1.5rem;
        border-radius:4px;
    }
    /*CSS for plans container*/
    .multi-bottom-row{
        width:100%;
    }
    .plan-container{
        height:98%;
    }
    .plans-outer-container{
        flex-direction:row;
        margin-top:2.5rem;
    }
    .plan{
        height:10rem;
        width:7rem;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
    }
    .free-mon-txt{
        font-size:12px;
    }
    .mon-annual-selection{
        margin:2rem 0rem;
    }
    .select-btn-outer-container:hover{
        cursor:pointer;
    }
    /*CSS for add-ons container*/
    .addons{
        width:95%;
    }
    .addons-details{
        width:100%;
    }
    .addons-txts input{
        transform: scale(1.5);
    }
    .addons-txt-desc{
        margin-left:1rem;
    }
    .addons-desc{
        font-size:12px;
    }
    /*CSS for summary container*/
    .s-top-plan-time p,.s-top-right p{
        font-size:20px;
    }
    .sum-bottom-right{
        font-size:25px;
    }
    .confirm-btn{
        padding:1rem 2rem !important;
    }
    /*CSS for thanks continer*/
    .thnx-container .upper-row{
        height:100%;
    }
}