body{
    line-height: 1.2;
    background-color: #f5f5f5;
}

a{
    text-decoration: none;
    color: inherit;
}

a:hover{
    color: inherit;
}

#app{
    /* height: calc(100vh - 57px); */
}

.form-control{
    padding: 0.875rem 0.75rem;
    border: 0px;
}

.form-select{
    padding: 0.875rem 2.25rem 0.875rem 0.75rem;
}

.form-select:focus{
    box-shadow: 0 0 10px 0 rgb(13 110 253 / 25%);
}

.btn{
    padding: 0.875rem 0.75rem;
}

[v-cloak] {
    display: none;
}

.form-control:focus{
    box-shadow: 0 0 10px 0 rgb(13 110 253 / 25%);
}

.main-header{
    /* background: linear-gradient(90deg, rgba(255,238,205,1) 0%, rgba(235,202,255,1) 100%); */
    /* background: linear-gradient(90deg, rgba(255,238,205,1) 0%, rgba(235,202,255,1) 100%); */
    background-color: #ededed;
    padding: 10px 0px;
    align-items: center;
    box-shadow: 0 0 12px #0000002b;
}

/* transition */

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* transition-end */

/* transition2 */

.fade2-enter-active,
.fade2-leave-active {
    transition: opacity 0.8s ease;
}

.fade2-enter-from,
.fade2-leave-to {
    opacity: 0;
}

/* transition2-end */

.main-header__logo{
    width: 60px;
}

.main-header__icon{
    width: 20px;
}

.user-panel{
    display: flex;
    padding: 25px 0px;
    align-items: center;
}

.user-panel__avatar{
    width: 60px;
    border-radius: 100%;
    margin-right: 15px;
}

.user-panel__name{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 3px;
}

.user-panel__place{
    font-size: 14px;
    color: #adadad;
}

.add-code-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #1b719b;
    border-radius: 5px;
    padding: 15px;
    color: white;
    margin-bottom: 30px;
}

.add-code-btn:hover{
    color: white;
}

.add-code-btn img{
    width: 30px;
    margin-right: 10px;
}

.menu{
    margin-right: 0;
    margin-left: 0;
}

.menu-card-wr{
    padding-right: calc(var(--bs-gutter-x) * .25);
    padding-left: calc(var(--bs-gutter-x) * .25);
    margin-bottom: calc(var(--bs-gutter-x) * .5);
}

.menu-card{
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 15px 0px;
    background-color: #ffffff;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: 500;
    color: #626262;
    display: block;
    font-size: 14px;

}

.menu-card img{
    margin-bottom: 10px;
    width: 40px;
}

.title{
    font-size: 22px;
    font-weight: 500;
    margin: 15px 0px;
    margin-bottom: 25px;
}

.code-card{
    background-color: #ffffff;
    margin: 0px;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.code-card.code-card--pay{
    background-color: #e5eff5;
}

.code-card__code{
    font-size: 22px;
    font-weight: 700;
}

.code-card__status{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: rgb(138, 138, 138);
    margin-right: 10px;
}

.code-card__status.code-card__status--1{
    background-color: #3ebd1e;
}

.code-card__status.code-card__status--2{
    background-color: #19b7db;
}

.code-card__status.code-card__status--3{
    background-color: #dbb119;
}

.code-card__status.code-card__status--4{
    background-color: #db1919;
}

.code-card__status-wrap{
    display: flex;
    justify-content: end;
    align-items: center;
}

.code-card__status-text{
    color: #959595;
}

.code-card hr{
    margin: 8px 0px;
    background-color: #999999;
}

.form-btn{
    width: 100%;
    background-color: #1b719b;
    color: white;
}

.form-btn:hover{
    color: white;
}

.form-btn .spinner-border{
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 5px;
}

.form-error{
    background-color: #ededed;
    padding: 15px;
    margin-top: 10px;
}

.pr-filters{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.pr-filters__item{
    border: 1px solid #ffffff;
    background-color: #ffffff;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
    color: #747474;
}

.pr-filters__item.active{
    background-color: #1b719b;
    border: 1px solid #1b719b;
    color: white;
}

.pr-info{
    margin-bottom: 10px;
}

.pr-info__item{
    background-color: #ffffff;
    height: 100%;
    border-radius: 5px;
    padding: 15px 5px;
}

.pr-info__title{
    font-size: 12px;
    color: #858585;
    margin-bottom: 5px;
}

.pr-info__value{
    font-weight: 500;
    font-size: 18px;;
}

.reg-form__counter{
    font-weight: 500;
    margin-bottom: 30px;
    text-align: center;
}

.reg-form__code-input{
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.reg-form__code-input input{
    width: 55px;
    text-align: center;
}

.reg-form__code-box{
    background-color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 3px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    padding-top: 20px;
}

.reg-form__p-btns-row{
    display: flex;
}

.reg-form__p-btns{
    margin-bottom: 10px;
}

.reg-form__p-btns-item{
    width: 33%;
    text-align: center;
    height: 60px;
    border: 1px solid #ffffff;
    font-weight: 700;
    line-height: 60px;
    font-size: 18px;
    border-radius: 5px;
}

.reg-form__message{
    background-color: #dfdfdf;
    padding: 15px;
}

.big-logo{
    width: 150px;
}

.account-form label{
    margin-bottom: 10px;
    font-weight: 500;
}