/* SWITCH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.switch-wrapper {
    position: relative;
    text-align: center;
    display: inline-flex;
    padding: 4px;
    border: 1px solid  #a0a5ac;
    margin: 10px auto 40px;
    border-radius: 30px;
    background: #fff;
}

.switch-wrapper [type="radio"] {
    position: absolute;
    left: -9999px;
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
.switch-wrapper [type="radio"]:checked#annual ~ label[for="annual"] {
    color: #fff;
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
.switch-wrapper [type="radio"]:checked#annual ~ label[for="annual"]:hover {
    background: #0a4199;
}

.switch-wrapper
[type="radio"]:checked#monthly
+ label[for="annual"]
~ .highlighter {
    transform: none;
}

.switch-wrapper
[type="radio"]:checked#annual
+ label[for="monthly"]
~ .highlighter {
    transform: translateX(100%);
}

.switch-wrapper label {
    font-size: 16px;
    z-index: 1;
    min-width: 100px;
    line-height: 32px;
    cursor: pointer;
    border-radius: 30px;
    transition: color 0.25s ease-in-out;
}

.switch-wrapper label:hover {
    background: #eee;
}

.switch-wrapper .highlighter {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 30px;
    background: #0057A8;
    transition: transform 0.25s ease-in-out;
}


.hide {
    display: none;
}

.plan-wrapper {
    align-items: stretch;
}

.plan-wrapper .col-3:first-child {
    align-items: center;
}

.plan-wrapper .col-3 {
    display: flex;
    flex-grow: 1;
}

.plan-wrapper .col-3 {
    padding: 1.5rem 1.25rem;
    overflow: hidden;
    margin: 0 0 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border: 1px solid #a0a5ac;
    border-width: 1px 0 0 1px;
    border-radius: 0
}

.plan-wrapper .col-3.charitableCard {
    background: #d8e4f0;
}

.plan-wrapper .col-3:first-child {
    border-width: 1px 0 0 0;
}

.plan-wrapper .plan-item h2{
    font-weight: 600;
    margin-bottom: 0;
}

.plan-wrapper .plan-item .charitable {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1rem;
    margin-bottom: 1rem;
    color:#0057A8
}

.plan-wrapper .plan-item .bestvalue {
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1rem;
    margin-bottom: 1rem;
    color: #222222
}

.plan-wrapper .plan-item .placeholder {
    visibility: hidden;
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1rem;
    margin-bottom: 1rem;
}

.plan-item .list {
    text-align: left;
    padding: 15px 10px 0;
}

.plan-wrapper .plan-item .subtitle {
    font-size: 14px;
}

.plan-wrapper .plan-item .info {
    text-transform: none;
}

.plan-wrapper .plan-item .price {
    border: none;
    font-size: 20px;
    line-height: 1;
    text-align: left;
    position: relative;
    padding: 22px 0 30px;
    background: transparent !important;
}

.plan-wrapper .plan-item .price .amount {
    font-weight: 600;
    font-size: 28px;
}

.plan-wrapper .plan-item .price .amount span {
    font-weight: 400 !important;
    font-size: 20px !important;
}

.plan-wrapper .plan-item .description, .plan-wrapper .plan-item .discountcode {
    margin-bottom: 0 !important;
    margin-top: 5px;
    display: block;
    font-size: 11px;
    font-weight: 500;
}

.plan-wrapper .plan-item .btn-blue {
    margin-top: 20px;
}

.plan-wrapper .plan-item .information-block {
    text-align: left;
    padding: 4px 0 40px;
}

.plan-wrapper .plan-item .link {
    font-weight: 600;
    font-size: 15px;
    color: #0d4fc0;

}

.plan-wrapper .plan-item .link-icon:before {
    content: "\e900";
    font-family: icomoon !important;
    font-size: 16px;
    margin-right: 14px;
    margin-left: 2px;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 5px;
    font-weight: 400;
    color: #0d4fc0;
}

.plan-wrapper .plan-item .link-icon.active:before{
    content: "\e90e";
}

.plan-wrapper .plan-item .text-block {
    border: none;
    padding: 20px 0 15px;
    text-align: left;
}

.plan-wrapper .plan-item{
    margin-bottom: 0;
}

.new-payment-form div[class^=col-]{
    align-items: stretch;
}

.sidebar-plans{
    text-align: center;
}

.sidebar-plans .side-plans{
    text-align: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.sidebar-plans .side-plans .plan-item{
    border: 1px solid #a0a5ac;
    padding: 20px 20px 30px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.sidebar-plans .plan-item .price{
    padding-bottom: 0;
}

.sidebar-plans .plan-item .placeholder{
    display: none;
}

.sidebar-plans .plan-item .price{
    text-align: center;
}

.sidebar-plans .charitableCard .plan-item{
    background: #d8e4f0;
}

.sidebar-plans .switch-wrapper{
    margin-bottom: 20px;
}

.form-title{
    border-bottom: 1px solid #9b9fa7;
    padding-bottom: 7px;
    margin-bottom: 30px;
}

.form-title h2{
    font-weight: 500;
    font-size: 24px;
    margin: 0;
}

.new-payment-form .right .btn{
    margin-top: 10px;
}

.side-payment .side-form-holder{
    border-bottom: 1px solid #9b9fa7;
}

.side-payment{
    background: #ebedee;
    padding: 30px 20px;
    border-radius: 5px;
    margin-top: 0;
    height: 100%;
}

.side-payment .side-form-holder{
    padding: 20px 0;
}

.side-payment .side-form-holder .billing-holder p{
    margin-bottom: 23px;
    font-size: 16px;
}

.side-payment .side-form-holder:first-child{
    padding-top: 0;
}

.side-payment .side-form-holder:last-child{
    padding-bottom: 0;
    border: none;
}

.side-payment .side-form-title span{
    font-size: 16px;
    font-weight: 500;
}

.side-payment .side-form-title h2{
    font-weight: 500;
    margin-bottom: 0;
    font-size: 24px;
}

.side-payment .promo-block{
    display: flex;
    margin-bottom: 30px;
}

.side-payment .promo-block:last-child{
    margin-bottom: 0;
}

.side-payment .promo-block .btn{
    width: 107px;
    margin: 0;
}

.side-payment .promo-block .form-control{
    width: calc(100% - 107px);
    margin: 0;
    border-color: #caccd0;
    font-weight: 500;
    color: #222;
}

.side-payment .promo-block .form-control:-ms-input-placeholder {
    font-weight: 500;
    color: #222 !important;
}

.side-payment .select-holder{
    width: 205px;
}

.side-payment .select-holder select{
    margin: 0 !important;
    color: #222 !important;
    font-weight: 500 !important;
    border-color: #caccd0 !important;
}

.side-payment .billing-holder{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content:space-between;
    margin-bottom: 10px;
}

.side-payment .billing-holder p{
    margin-bottom: 0 !important;
    font-weight: 500;
    display: inline-block;
}

.side-payment .promo-holder{
    padding: 20px 0;
}

.side-payment .desc-plan {
    color: #666666;
    font-size: 13px;
    text-align: right;
    font-weight: 500;
    width: 100%;
    display: block;
}

.side-payment .total-holder,
.mobile-box .total-holder{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.mobile-box{
    background: #ebedee;
    padding: 15px 10px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 20px;
    display: none;
}

.mobile-box h3{
    margin-bottom: 0;
}

.side-payment .total-holder h3,
.mobile-box h3{
    margin-right: 10px;
    margin-bottom: 0;
    font-weight: 500;
}

.side-payment .total-holder .payment-holder h3,
.mobile-box .payment-holder h3{
    font-weight: 600;
}

.side-payment .total-holder h3:last-child,
.payment-holder h3:last-child{
    margin-right: 0;
}

.new-payment-form{
    margin-bottom: 30px;
}

.new-payment-form #PaymentTotalCost{
    text-align: left;
    width: 77px;
    border: none;
    font-size: 20px;
    font-weight: 600;
    padding: 0;
    height: auto;
    margin: 0 0 0 5px;
}

@media (max-width: 1250px){

    .side-payment .billing-holder{
        justify-content: flex-end;
    }

    .side-payment .side-form-holder p{
        font-size: 14px;
        margin-bottom: 10px;
    }

    .side-payment .billing-holder p{
        margin-bottom: 10px;
    }

    .side-payment .select-holder{
        width: 100%;
        font-size: 14px;
    }

    .side-payment .side-form-title span{
        font-size: 14px;
    }

    .side-payment .promo-block .form-control{
        font-size: 14px;
    }

    .side-payment .promo-holder{
        padding: 0;
    }

    .side-payment .promo-block{
        margin-bottom: 10px;
    }
}

@media (max-width: 1023px){

    .form-title h2{
        font-size: 21px;
    }

    .plan-wrapper .plan-item .text-block {
        display: block;
    }

    .plan-wrapper .plan-item .price{
        padding: 15px 0 10px;
    }

    .plan-wrapper .plan-item .text-block{
        padding: 20px 0 0;
    }

    .plan-wrapper .plan-slide{
        display: none;
    }

    .plan-wrapper .plan-item .link{
        cursor: pointer;
    }

    .plan-wrapper .plan-item .list{
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-plans .side-plans .plan-item{
        padding: 20px 10px;
    }


    .side-payment .promo-block .form-control,
    .side-payment .promo-block .btn{
        width: 100%;
    }

    .side-payment .promo-block .form-control{
        border-radius: 5px 5px 0 0 !important;
        text-align: center;
    }

    .side-payment .promo-block .btn{
        width: 100%;
        border-radius: 0 0 5px 5px !important;
        font-size: 14px;
        height: 40px !important;
        text-align: center;
    }

    .side-payment .total-holder{
        justify-content: flex-end;
    }

    .side-payment .promo-block{
        display: block;
    }

}

@media (max-width: 767px){

    .plan-wrapper .col-3 {
        border-width: 1px 0 0 0;
        margin-bottom: 0;
    }

    .plan-wrapper .plan-item .placeholder{
        display: none;
    }

    .new-payment-form .col-4{
        order: 1;
        margin-bottom: 30px;
    }

    .new-payment-form .col-8{
        order: 2;
    }

    .side-payment .billing-holder{
        justify-content: space-between;
    }

    .side-payment .total-holder{
        justify-content: space-between;
    }

    .side-payment .promo-block{
        display: flex;
    }

    .side-payment .promo-block .form-control{
        border-radius: 5px 0 0 5px !important;
        font-size: 16px;
        text-align: left;
    }

    .side-payment .promo-block .btn{
        height: 50px !important;
        border-radius: 0 5px 5px 0 !important;
        font-size: 16px;
        width: 107px;
    }

    .side-payment .select-holder{
        width: 205px;
    }

    .side-payment{
        padding-left: 10px;
        padding-right: 10px;
    }

    .side-payment .side-form-holder p{
        font-size: 16px;
    }

    .side-payment .side-form-holder .billing-holder p{
        margin-bottom: 0;
    }

    .new-payment-form .checkbox-holder{
        font-size: 12px;
    }

    .checkbox-holder .custom-checkbox+label::before{
        top: -3px;
    }

    .mobile-box{
        display: block;
    }

    .new-payment-form{
        margin-bottom: 15px;
    }

    .new-payment-form .right{
        text-align: center;
    }
}

@media (max-width: 499px){
    .side-payment .side-form-holder .billing-holder p{
        margin-bottom: 10px;
    }

    .side-payment .billing-holder{
        justify-content: flex-end;
    }

    .side-payment .select-holder{
        width: 100%;
    }
}