:root {
    --main-color: #ff0068;
}

@font-face {
    font-family: 'averta-regular';
    src: url('../fonts/AvertaStdPE-Regular.otf'); /*URL to font*/
}
@font-face {
    font-family: 'averta-bold';
    src: url('../fonts/AvertaStdPE-Bold.otf'); /*URL to font*/
}
@font-face {
    font-family: 'averta-semibold';
    src: url('../fonts/AvertaStdPE-Semibold.otf'); /*URL to font*/
}

@font-face {
    font-family: 'aeonik';
    src: url('../fonts/Aeonik-Regular.otf'); /*URL to font*/
}
@font-face {
    font-family: 'aeonik-bold';
    src: url('../fonts/Aeonik-Bold.otf'); /*URL to font*/
}

.main-wrapper{
    background: #F7F7F7 !important;
    font-family: 'averta-regular';
}

.container{
    padding: 0 !important;
    height: 100%;
}

.topbar-nav{
    height: 65px;
    background: #FFF;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    border-bottom: 1px solid #E6E5E5;
    justify-content: space-between;
    padding: 0 10%;
}

.card-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 65px);
    padding: 0 20px;
}
.card-wrapper-content{
    background: #FFF;
    border: 1px solid #E6E5E5;
    border-top-right-radius: 20px;
    width: 100%;
    max-width: 900px;
    height: 570px;
}

.card-wrapper-content .card-content {
    margin: 0;
    height: 100%;
}
.card-wrapper-content .card-content .card-l{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.card-wrapper-content .card-content .card-l .title{
    font-family: 'aeonik-bold' !important;
    font-size: 32px !important;
    line-height: 40px;
    color: #171717;
    margin-top: 18px;
}
.card-wrapper-content .card-content .card-l .extrainfo,
.card-wrapper-content .card-content .card-r .extrainfo.extrainfo-bottom{
    font-family: 'averta-regular';
    font-size: 14px;
    line-height: 20px;
    color: #8C8987;
}
.avatar-initials{
    font-family: 'averta-regular' !important;
}
.card-wrapper-content .card-content .card-r{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    border-left: 1px solid rgba(0,0,0,0.1);
}
.card-wrapper-content .card-content .card-r .card-r-top-avatar{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.card-wrapper-content .card-content .card-r .card-r-top-error{
    font-family: 'averta-regular';
    text-align: center;
}
.card-wrapper-content .card-content .card-r .card-r-top-error h2{
    font-size: 18px;
    line-height: 26px;
    margin-top: 10px;
}
.card-wrapper-content .card-content .card-r .card-r-top-error p{
    font-size: 18px;
    line-height: 26px;
    color: #666;
    margin-top: 10px;
}
.card-wrapper-content .card-content .card-r .card-r-top-avatar .avatar-bottom-info{

    font-family: 'averta-regular';
    font-style: normal;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    color: #000;

}
.card-wrapper-content .card-content .card-r .card-r-top-avatar .avatar-bottom-amount{
    font-family: 'averta-regular';
    font-style: normal;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #000;
}
.card-wrapper-content .card-content .card-r .card-r-top-avatar .avatar-bottom-concept{
    font-family: 'averta-regular';
    font-style: normal;
    font-size: 18px;
    line-height: 26px;
    color: #AAAAA7;
}
.card-wrapper-content .card-content .card-btn{
    text-transform: none;
    font-family: 'averta-bold';
    font-style: normal;
    font-size: 18px;
    letter-spacing: normal;
    border-radius: 8px;
}
.aiab-block .aiab-info{
    padding: 3px 15px 0;
    flex: 1
}
.aiab-block .aiab-info p{
    font-family: 'averta-regular';
    margin-bottom: 3px;
}
.aiab-block .aiab-info p.name{
    font-family: 'averta-bold';
    font-size: 16px;
    line-height: 22px;
    color: #000; 
}
.aiab-block .aiab-info p.desc{
    font-size: 14px;
    line-height: 20px;
    color: #8C8987; 
}
.aiab-block .aiab-amount{
    padding-top: 3px;
    font-family: 'averta-regular';
    font-size: 16px;
    line-height: 22px;
    color: #000; 
}

#personal-data-form h2.form-title{
    font-family: 'averta-regular';
    font-weight: bold;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 30px;
}

#personal-data-form .v-input{
    font-family: 'averta-regular';
    font-size: 16px;
    line-height: 22px;
    color: #666;
    padding-top: 0;
}

#personal-data-form .check-legal{
    margin-top: 0;
}

.theme--light.v-tabs-items{
    background: none !important;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0
}

.error-wrapper .error-title{
    font-family: 'averta-regular';
    font-weight: bold;
    font-size: 18px;
    color: #333;
}
.error-wrapper .error-message{
    font-family: 'averta-regular';
    font-size: 18px;
    line-height: 26px;
    color: #8C8987;
}
.result-content .card-img{
    transform: rotate(-4deg);
}
.result-content h2{
    font-family: 'averta-regular';
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    color: #333;
}
.result-content p{
    font-family: 'averta-regular';
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #8C8987;

}

@media only all and (max-width:959px) { 
	.main-wrapper{
        background: #FFF !important;
    }
    .topbar-nav{
        height: 120px;
        border: none;
        justify-content: center;
    }
    .card-wrapper{
        align-items: flex-start;
        height: calc(100% - 120px);
        padding: 20px;
        box-sizing: border-box;
    }
    .card-wrapper-content{
        height: auto;
        border: none;
    }
    .card-wrapper .card-l{
        display: none !important;
    }
    .card-wrapper-content .card-content .card-r{
        border: none;
        padding: 30px 0 0 0 !important;
    }
    .card-wrapper-content .card-content .card-r .card-r-top-avatar .avatar-bottom-concept{
        color: var(--main-color);
    }
    
    .card-wrapper-content .card-content .card-r .extrainfo.extrainfo-bottom{
        display: block !important;
        margin-top: 100px;
        text-align: center;
        margin-bottom: 30px;
    }
    .card-wrapper-content .card-content .card-r .card-r-top-avatar.step-data-form {
        display: block;
    }
    .card-wrapper-content .card-content .card-r .card-r-top-avatar .aiab-block{
        display: flex !important;
        margin: 0 0 40px !important;
    }
    
}