.account-setting-menu {
    width: 200px;
    float: left;
    border: 1px solid;
    border-color: lightgray;
}

.account-setting-area {
    max-width: 1050px;
    border-left: 1px solid;
    border-color: lightgray;
    margin-left: 15px;
}

.card-account {
    border: 0;
}
    .card-account .card-body {
        align-self:center;
        padding:0;
    }

.card-header-center {
    text-align: center;
}

.tariff {
    border:1px solid;
    border-color:lightgray;
    border-radius:2px;
    margin-right:10px;
}
    .tariff:hover {
        box-shadow: 0 0 5px grey;
    }

.tariff-header {
    text-align: center;
    height: 40px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid;
    border-color: lightgray;
    background-color: #28a74599;
}

.tariff-amount {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid;
    border-color: lightgray;
    margin:10px;
    height:160px;
}
    .tariff-amount span {
        font-size: 55px;
        color: #6200eeb3;
     /*  #ee8f00*/
    }
    .tariff-amount label {
        font-size: 15px;
        color: gray;
    }
    .tariff-amount p {
        margin:0px;
    }

    .tariff-body ul {
        margin: 0;
        padding: 0;
    }
    .tariff-body li {
        list-style-type: none;
        height:35px;
    }
    .tariff-body span {
        margin-right:10px;
    }
.tariff-bottom {
    text-align: center;
    border-top: 1px solid;
    border-color: lightgray;
    margin: 10px;
    padding:10px;
}
.subscribe-button{
    font-size:20px;
}
.period-price {
    margin: auto;
    display:flex;
    padding: 10px;
    font-weight: bold;
    color: gray;
}
    .period-price >label {
        margin-right:10px;
    }

.period-price-active {
    color: #007bff;
}
.toolbar-text {
    vertical-align: text-top;
    margin: 0;
    margin-right: 3px;
}
.save-amount {
    color: #089408eb;
    margin: 0;
}
.tariff-body {
    padding: 15px;
}


/* credit card */
.card-form{
    width:480px;
}
 .card-form >div{
     margin-bottom:10px;
 }
.credit-card {
    height: 33px;
    margin: 0;
    padding: 0;
    width: 51px;
    margin-left: 4px;
    border-radius: 3px;
}
    .credit-card object {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

.card-field {
    width: 300px;
}

.visa-card {
    border: 1px solid darkgray;
}

.mc-card {
    background-color: black;
}

.credit-card-grid {
    width: 500px;
}
.credit-card-grid-row {
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid lightgray;
    margin-bottom:5px;
}
    .credit-card-grid-row:hover {
        background-color: whitesmoke;
    }

.credit-card-form {
    width: 700px;
}
.card-input{
}
    .card-input input {
        outline: none;
        border: 1px solid darkgray;
        border-radius: 3px;
        height: 33px;
    }
        .card-input input:focus {
            outline: none;
            border: 1px solid;
            border-radius: 3px;
            border-color: #67b3f1;
            box-shadow: 0 0 0 3px #acd5f6;
        }
        .card-input input::-webkit-outer-spin-button,
        .card-input input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.invalid-field{
}
    .invalid-field input {
        color: orangered;
}
    .invalid-field span {
        color: orangered;
    }

.credit-card-exp {
    width: 1.7em;
    margin-left: 5px !important;
    margin-right: 5px !important;
    outline: none;
    border: 0;
    height: 31px;
    margin: 0;
    padding: 0;
    text-align: center;
}
    .credit-card-exp span {
        font-size: 0.9em;
    }
.cvc-input {
    margin-left:10px;
}
    .cvc-input input {
        width: 3.5em;
        text-align:center;
    }
.exp-class-input {
    border: 1px solid darkgray;
    border-radius: 3px;
}
.exp-class-input-focus {
    border: 1px solid;
    border-radius: 3px;
    border-color: #67b3f1;
    box-shadow: 0 0 0 3px #acd5f6;
}
.exp-class-input-invalid {
    border: 1px solid;
    border-radius: 3px;
    border-color: coral;
}
.card-field{
    text-align:center;
    padding:0;
}