@import url('https://fonts.googleapis.com/css2?family=Poppins:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

:root {
    --bg-element: #fffdff;
    --color-element: #797dd5;
}

.badge {
    border: 2px solid var(--color-element);
    padding: 5px 10px;
    border-radius: 30px;
    margin: 3px 0;
    width: min-content;
}

.white05 {
    color: rgba(255,255,255, 0.5)
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-5 {
    margin-top: 5px;
}

.logo-blue {
    color: #797dd5;
}

.logo-green {
    color: #7b8e39
}

*[data-title] {
    position: relative;
}
/*
*[data-title]:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.85);
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    max-width: 130px;
    white-space: break-spaces;
    overflow: hidden;
}*/

*[title-direct=down]:hover::after {
    top: calc(100% + 5px);
}


.rank-table input[type='checkbox'] {
    -webkit-appearance: none;
    margin-right: 10px;
    width: 17px;
    height: 17px;
    border-radius: 3px;
    border: 1px solid #777;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
    vertical-align: middle;
}

.rank-table  input[type='checkbox']:before {
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    color: #f6f6f6;
}

.rank-table input[type='checkbox']:checked {
    background: #797dd5 ;
}
.rank-table input[type='checkbox']:checked:before {
    visibility: visible;
}

.myinputDiv {
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
    font-size: 1rem;
}

.myinputDiv p{
    font-size: 0.9em;
    color: #949494;
}

.myinput {
    font-size: 1em;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.myinput:disabled {
    background: #f6f6f6;
}

.mymodal {
    display: none;
    animation: toDown 0.3s forwards;
    border-radius: 15px;
    background: #f6f6f6;
}

@keyframes show_card {
    0% {visibility: hidden; opacity: 0;}
    50% {visibility: visible; opacity: 1;}
    100% {transform: translate(-5px,-5px); box-shadow: 5px 7px 5px 0px #9a9a9a;}

}

@keyframes toDown {
    0% {

        visibility: hidden;
        opacity: 0;
        transform: translate(-50%,-60%);
    }
    100% {
        visibility: visible;
        opacity: 1;

        transform: translate(-50%,-50%);
    }
}

@keyframes toUp {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translate(-50%,-40%);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%,-50%);
    }
}

@keyframes toLeft {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translate(-40%,-50%);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%,-50%);
    }
}

@keyframes toRight {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translate(-60%,-50%);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%,-50%);
    }
}

.center-fixed{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.w100 {
    width: 100%;
}

.success {
    color: #13b66f;
}

.danger {
    color: #e17779;
}

.success-bg {
    background: #13b66f;
}

.danger-bg {
    background: #e17779;
}

.pointer {
    cursor: pointer;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    scrollbar-width: thin;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /*font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Ubuntu', sans-serif;*/
}

.description {
    font-family: "Open Sans", sans-serif;
}

*::-webkit-scrollbar {
    width: 8px;
    background: #ddd;
}

*::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

@keyframes highlight_animate {
    0%{color: red;}
    50%{color: unset;}
    100%{color: red;}
}
.highlight {
    box-shadow: 0 0 0 10000px rgba(0,0,0,0.5) !important;
    animation: highlight_animate 1s infinite;
    z-index: 5000;
}

*.purple {
    color: #797dd5 !important;
}

*.bg-purple {
    color: #797dd5 !important;
}

*.blue {
    color: #6ab5e9;
}

*.bg-blue {
    background: #6ab5e9;
}

li {
    list-style-type: none;
}

details {
    color: white;
    cursor: pointer;
    transition: 0.5s;
    transition: 0.5s;
}

@keyframes sweep {
    0%    { height: 0;}
    100%  { height: auto;}
}

details[open] summary ~ * {
    animation: sweep 0.5s ease-in-out;
    padding: 10px;
    text-align: right;
}
@keyframes show_div {
    0%{opacity: 0; transform: translateX(60px);}
    100%{opacity: 1; transform: translateX(0px); }
}
.client-content > div.show{
    animation: show_div 0.5s forwards;
    transition: 0.3s !important;
}

/*Begin---breakpoints---*/

.normal
{}
.xl
{}
.small
{}



/*---breakpoints---END*/

.add-stuff {
    width: 150px;
    height: 50px;
    border-radius: 10px;
    align-self: flex-start;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
}
.add-stuff img {
    width: 32px;
    opacity: 0.7;
}

.add-stuff button {
    width: 90px;
    height: 30px;
    padding: 0 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
}


.btn
{
    text-align: center;
    color: #333;
    padding: 10px 20px;
    border-radius: 5px;
    border:1px solid #ddd;
    cursor: pointer;
    letter-spacing: 2px;
    font-size: 1.1rem;
}

.btn:hover
{
    background: rgba(255,255,255,0.3);
}

button:focus, input:focus, div:focus
{
    outline: none;
}

body
{
    background: #f5f4f6;
    /*background: #eaeaea;
    background: #f5f7f9;*/
    position: relative;
    overflow-x: hidden;
    scrollbar-width: thin;
}

body::-webkit-scrollbar {
    width: 8px;
    background: #ddd;
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}


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

img
{
    max-width: 100%;
    opacity: 1;
}


.wrapper
{
    display: grid;
    grid-template: 1fr / 1fr;
    align-items: center;
}

.wrapper.blur
{
    filter: blur(7px);
}


.wrapper-mask, #info, #info-bonus
{
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

#svg-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
}

.container
{
    width: 85%;
    padding: 10px 20px;

}

.header
{
    width: 100% ;
    padding: 35px 0;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
    background: transparent;
    color: white;
    z-index: 100;
    transition: 0.5s;
}

.header.sticky
{
    padding: 0;
    background: rgba(0,0,0,0.8);
    transition: 0.5s;
}

.header-content
{    width: 100%;
    display: flex;
    align-items: center;

}

.logo
{
    flex: 0 1 15%;
    display: flex;
    align-items: center;
    justify-content: start;

}

.logo h2
{
    padding-left: 10px;
    letter-spacing: 3px;
    color: white;
}

.logo img
{
    max-width: 40px;
    cursor: pointer;
}

.mobile-menu {
    display: flex;
    position: fixed;
    flex-direction: column;
    right: 100%;
    padding: 20px;
    width: 100%;
    background-color: white;
    z-index: 10000;
    transition: 0.3s;
    height: 100vh;
}

.mobile-menu.show {
    right: 0;
}

.mobile-menu .mobile-header {
    margin-left: auto;
}

.mobile-menu .mobile-header i{
    font-size: 1.4rem;
}

.mobile-menu a{
    padding: 15px 8px;
    color: #5c5c5c;
}

.header__menu
{
    display: flex;
    justify-content: start;
    align-items: center;
}

.header__menu-burger {
    display: none;
    font-size: 1.8rem;
}

.menu-element
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-element img {
    filter: invert();
    width: 24px;
}

.header__menu a {
    text-decoration: none;
    color:white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 400;
    transition: background-color 0.2s;
}
.header__menu a#drive2-link {
  background: #c03;
}

.header__menu a:not(#drive2-link):hover {
    /*background: rgba(255,255,255,0.3);*/
    background-color: #13b66f;
}

.header__tools
{
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 50px;

}

.header__tools .search-vin {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border-radius: 30px;
    padding: 5px 15px;
    overflow: hidden;
    width: 55px;
    height: 35px;
}

@keyframes show_search {
    0% {background: transparent;}
    50% {background: white; width: 55px;}
    100% {width: 300px; background: white; padding: 5px 15px;}
}

@keyframes show_search_input {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.header__tools .search-vin.active {
    animation: show_search 1s forwards;
}

.header__tools .search-vin.active input{
    animation: show_search_input 0.3s forwards;
    animation-delay: 1s;
}

.header__tools .search-vin input {
    opacity: 0;
    border: none;
    font-size: 1.1rem;
    background: transparent;
    width: 100%;
    padding-right: 5px;
}

.header__tools .search-vin i.fa-times{
    display: none;
    margin-right: 5px ;
}

.header__tools .search-vin input::placeholder {
    color: #777;
}


.header__tools .search-vin i.active,  .header__tools .search-vin i.fa-times {
    filter: none;
    color: #777;
    transition: 0.75s;
}


.header__tools a
{
    font-size: 1.3rem;
    white-space: nowrap;
    flex: 1 1 50%;
}

.header__tools img, .header__tools i
{
    /*filter: invert();*/
    cursor: pointer;
    /*min-width: 30px;
    max-width: 30px;*/
    font-size: 1.4rem;
}

.my-icon-invert {
    filter: invert();
}

.my-icon-invert, .my-icon {
    cursor: pointer;
}

.header__tools img, .header__tools i {

}

.logout{


    cursor: pointer;
    font-size: 1.3rem;
    white-space: nowrap;
    flex: 1 1 50%;
    position: relative;
}

.logout span{
    vertical-align: middle;
}

.logout img{
    margin-left: 0;
    vertical-align: middle;
}

.logout-menu {
    position: absolute;
    transition: 1s;
    padding: 10px;
    background: rgba(0,0,0,0.7);
    display: none;
    animation: logout-menu_show 0.5s forwards;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    margin-top: 20px;
    right: 0;
}

@keyframes logout-menu_show {
    0% {display:block !important; opacity:0; transform: translateY(-20px);}
    100% {display:block !important; opacity:1; transform: translateY(0);}
}

.logout-menu.show{
    display:block;
}

.logout-menu div{

    padding: 10px;
    cursor: pointer;
}

.logout-menu div:hover{

    background: #5c5c5c;
}

/*.main {
    width: 100%;
    min-height: 100vh;
    /*background-image: url(../img/aston-martin-rapide-ksenon.jpg);
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}*/

.main {
    display: grid;
    grid-template: auto / 1fr;
    align-items: center;

}

.main.is_cabinet {
    min-height: auto !important;

}

.main__header
{
    color: white;
    text-align: center;
    margin-top: 100px;
}


.zero
{
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    /*background: linear-gradient(45deg, black 30%, transparent 100%),
                url("/assets/img/main.png");*/
}
.zero-content
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
}

.zero.bg-image {
    background-image: url("/assets/img/main-bg2.jpg");
}

@keyframes zero-left {
    0%{
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.left-body
{
    text-align: center;
    animation: zero-left 1s forwards;
}

.left-body span
{
    font-size: 3rem;
}

.left-body h2
{
    padding: 10px 0;

}
.left-body h1
{
    padding: 10px 0;
    margin-bottom: 30px;
}

/*.left-body button
{
    margin-top: 10px;
    padding: 20px 50px;
    border-radius: 10px;
    background-color: #7b8e39;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1.3rem;
    width: 250px;
    text-decoration: none;
    opacity: 0.8;
}

.left-body button:hover
{
    opacity: 1;
}*/

.left-body button
{
    margin-top: 10px;
    padding: 20px 50px;
    border-radius: 30px;
    /*background-color: #7b8e39;*/
    background-color: #13b66f;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1.3rem;
    width: 250px;
    text-decoration: none;
    box-shadow: 0 8px 15px -7px #13b66f;
}

.left-body button:hover
{
    background: #33cb89;
}

.left-body button:active
{
    transform: translate(2px,3px);
    box-shadow: 0 3px 15px -7px #13b66f;
}

.left-body a
{
    margin-top: 10px;
    padding: 20px 50px;
    border-radius: 10px;
    background-color: #7b8e39;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1.3rem;
    width: 250px;
    text-decoration: none;
    opacity: 0.8;
}

@keyframes zero-right {
    0%{
        opacity: 0;
        transform: translateX(70px);
        visibility: hidden;
    }
    100% {
        transform: translateY(0px);
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.right-body
{

    transition: visibility 1s;
    text-align: center;
    animation: zero-right 1s forwards;

}

/*.promo-img
{
    width: 600px;
}*/

.video
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -100;
    pointer-events: none;
    /*-o-filter: blur(7px);
    filter: blur(7px);*/
}

.video-mask
{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -99;

}

video
{
    pointer-events: none;
    /*width: 2560px;*/
    width: 100%;
}

@media (max-width: 1925px) {
    video
    {
        width: 1920px;
        height: auto;
    }

}

/*.calc {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px;
    position: relative;
}*/

@media (max-width: 1200px){
    .calc {
        grid-template: auto 1fr / minmax(auto,600px) !important;
        grid-gap: 20px;
        justify-content: center;
    }
    .calc-desc {grid-column: unset !important;
        grid-row: 1}
    #calc-wrapper {grid-column: unset !important;}
}

.calc {
    display: grid;
    width: 100%;
    /*grid-template: auto / 1fr minmax(auto,600px) minmax(auto,600px) 1fr;*/
    align-items: center;
    position: relative;
    grid-gap: 70px;
    padding: 30px 10px;
}


@keyframes test-background_show {
    0%{left:-50%;}
    100%{left: 0;}
}

.test-background.show
{

    position: absolute;
    top: 0;
    left: -50%;
    height: 100%;
    width: 50%;
    background: #6ab5e9;
    /*background: linear-gradient(to left,#6ab5e9 60%,white);*/
    transform: skewX(30deg);
    transform-origin: 100% bottom;
    pointer-events: none;
    z-index: 0;
    animation:  test-background_show 1s forwards;
    animation-delay: 0.8s;
}

.calc .container
{
    position: relative;
    height: 800px;

}

.test-content
{
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    height: 100%;

}

.test-promo
{
    flex: 1 1 60%;
    height: 100%;
}

.promo-img
{
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    perspective: 1700px;
    position: absolute;
    pointer-events: none;
    width: 50%;
    top:50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: 1s;
    z-index: 45;
}

@keyframes promo-img_show {
    0% {opacity: 0; visibility: hidden; transform: translate(-100px,-50%)}
    100% {opacity: 1; visibility: visible; transform: translate(0px,-50%)}
}

.promo-img.show
{
    animation: promo-img_show 2s forwards;
}

@keyframes promo-img_child2_show {
    0% {opacity: 0; visibility: hidden; transform: translate(0px,-50%)}
    100% {opacity: 1; visibility: visible; transform: translate(200px,-50%)}
}

.promo-img:nth-child(2).show
{
    animation: promo-img_child2_show 2s forwards;
}

@keyframes promo-img_child3_show {
    0% {opacity: 0; visibility: hidden; transform: translate(0px,-50%)}
    100% {opacity: 1; visibility: visible; transform: translate(400px,-50%)}
}

.promo-img:nth-child(3).show
{
    animation: promo-img_child3_show 2s forwards;

}

.test-promo img
{
    transform: rotateY(40deg);
    width: 600px;
    height: 400px;
    pointer-events: initial;
    transition: 1s;
}



.test-text
{
    flex: 1 1 40%;
    padding: 4%;
    visibility: hidden;
    opacity: 0;
    transform: translateX(100px);
    line-height: 30px;
    text-indent: 30px;

}

.test-text.show
{
    visibility: visible;
    opacity: 1;
    transition: 1.5s;
    transform: translateX(0px);
}

/*.quiz-card:hover
{
    z-index: 10000 !important;
    transform: translateX(100px) !important;
}*/

.calc, .whyus {
    background-color: white;
}

.check-vin, .about {
    background-color: transparent;
}

.whyus, .check-vin, .check-vin1, .about {
    color: #333;
    display: grid;
    grid-template: minmax(auto, 150px) 1fr/ minmax(auto,1600px);
    /*grid-template: minmax(auto, 150px) 1fr/ minmax(auto,1100px);*/
    grid-gap: 30px;
    /*padding: 50px 0;*/
    font-size: 1rem;
    align-items: center;
    /*min-height: calc(100vh - 60px);*/
    overflow: hidden;
    justify-content: center;
    padding: 100px 20px;
}

.whyus {
    grid-template: minmax(auto, 150px) 1fr/ minmax(auto,1100px);
}

.check-vin, .check-vin1 {
    color: #333;
    display: grid;
    /*grid-template: 1fr /  1fr minmax(auto,1600px) 1fr;*/
    grid-template: 1fr /  minmax(auto,1600px);
    /*padding: 50px 0;*/
    font-size: 1rem;
    align-items: center;
    /*height: calc(100vh - 60px);*/
    overflow: hidden;
    justify-content: center;
    /*padding: 20px;*/
}

.check-vin1 {
    background: linear-gradient(45deg, #0f207a, #c94db4);
    color: white;
    overflow: unset;
}

.check-vin1-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    column-gap: 30px;
    row-gap: 100px;
}

.whyus .title {
    width: 100%;
    text-align: center;
    position: relative;
}

.about .title, .check-vin .title, .check-vin1 .title {
    width: 100%;
    text-align: center;
    position: relative;

}

.whyus .title p, .about .title p, .check-vin .title p, .check-vin1 .title p{
    font-size: 2.5em;
    font-weight: 600;
}

/*.whyus .title p:last-child, .about .title p:last-child{
    margin: 20px 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
}*/

.whyus .title p span{
    /*color: #797dd5;*/
    /*color: #13b66f;*/
}

.whyus .content {
    grid-column: 2/3;
    width: 100%;
    display: grid;
    grid-template: auto / repeat(3,150px);
    text-align: center;
    justify-content: space-between;
    position: relative;
    grid-row-gap: 50px;
}

.check-vin .catalogs-wrapper {
    /*grid-column: 2/3;*/
    width: 100%;
    overflow: hidden;

}

.whyus .content i{
    font-size: 5em;
    margin-bottom: 10px;
    color: #777;
}


#whyus-content {
    display: grid;
    grid-gap: 50px;
}

#whyus-content > div:nth-child(3n+3) {
    justify-self: end;
    transform: translateX(-50px);
}

#whyus-content > div:nth-child(3n+2) {
    justify-self: center;
    transform: translateX(-50px);
}

#whyus-content > div:nth-child(3n+1) {
    transform: translateX(-50px);
}

.whyus-item {
    visibility: hidden;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 10px;
    align-items: center;
    justify-items: center;
    width: 90%;
    padding: 20px 10px;
    /*background: cadetblue;*/
    background: #797dd5;
    color: white;
    transition: 0.7s;
    opacity: 0;
    box-shadow: 10px 12px 7px 0 rgb(0 0 0 / 25%);
    transform-origin: center;
    left: 5%;
}

.whyus-item.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px) !important;
    /*transform: translateX(0) perspective(800px) rotateY(20deg) !important;*/
}

/*.whyus-item > div:last-child {
    justify-self: flex-end;
}*/

.whyus-item-desc{
    display: grid;
    grid-gap: 15px;
}

.whyus-item-img p {
    font-size: 7em;
}

.whyus-item-img img{
    width: 200px;
}

.whyus-item-desc p {
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
}
/*

.about {
    background: white;
    color: #333333;
    min-height: calc(100vh - 60px);
}
*/

#hot-line-wrapper
{
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 1001;
    transition: 0.2s;
    color: white;
}

#hot-line-wrapper #chat {
    cursor: auto;
}

.hot-line {
    position: relative;
}

.chat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #13b66f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
}

/*.hot-line img
{
    filter: invert();

}*/
/*
.hot-line:hover
{
    transform: scale(1.1);
    transition: 0.2s;
}*/

.totop
{
    position: fixed;
    left: 50px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*background-color: #7b8e39;*/
    background-color: #13b66f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: 0.2s;
}

.totop img
{
    filter: invert();

}

.totop:hover
{
    transform: scale(1.1);
    transition: 0.2s;
}

@keyframes signin_show {
    0% {
        opacity: 0;
        transform: translate(-50%,-70%);
    }
    100% {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}

.signin-wrapper
{
    position: fixed;
    display: none;
    width: 350px;
    height: 500px;
    background: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    z-index: 5000;
    border:none;
    padding: 4px;
    transition: 0.5s;
    animation: signin_show 0.5s forwards;

}

.signin
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to top, #6ab5e9,#d0e7f9);*/
    background: rgba(255,255,255,0.3);
    padding: 0 30px;
    border-radius: 7px;
    align-items: center;

}

/*.signin-background-top
{
    position: absolute;
    top: 0;
    right: 0;
    height: 50%;
    width: 100%;
    background: rgb(161, 192, 77);
    background: linear-gradient(to left,#6ab5e9 60%,white);
    transform: skewY(30deg);
    transform-origin: 100% left;
    pointer-events: none;
    z-index: 0;
}


.signin-background-bottom
{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: rgb(106, 181, 233);
    background: linear-gradient(to left,#6ab5e9 60%,white);
    transform: skewY(-30deg);
    transform-origin: 100% right;
    pointer-events: none;
    z-index: 0;
}*/

.signin-header
{
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.signin-header h1
{
    color: white;
    font-weight: 700;


}

.signin-content
{

    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1 1 70%;

}

.input-box
{
    position: relative;
}

.input-box input, #phoneCode
{
    width: 100%;
    border: none;
    border-bottom: 1px solid gray;
    margin-bottom: 20px;
    height: 30px;
    background: transparent;
    outline: none;
    font-size: 1.2rem;
    padding: 5px 10px;

    color: white;
    font-weight: 700;
}

.input-box input:hover, #phoneCode:hover
{
    border-bottom: 1px solid white;
}

/*.input-box input:nth-child(2)
{
    width: 100%;
    border: none;
    border-bottom: 1px solid gray !important;
    margin-bottom: 10px;
    height: 40px;
    background: transparent;
    outline: none;
    font-size: 1.2rem;
    padding: 5px;

}*/

.input-box label{
    position: absolute;
    left: 0;
    color: white;
    pointer-events: none;
    letter-spacing: 2px;
    padding: 5px 10px;
    transition: 0.4s;
}

.input-box input:focus
{
    outline: none;
    /*box-shadow: 0px 0px 5px 0px #a1c04d;*/

}

.input-box input:focus ~ label,
.input-box input:valid ~ label
{
    display: none;

}

.forgot-pass {
    margin-top: 10px;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;

}
.forgot-pass:hover {
    color: #f6f6f6;
}


.signin-content button:nth-child(odd)
{
    width: 100%;
    height: 40px;
    background: transparent;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 30px;
    border:1px solid white;
    cursor: pointer;
    margin: 20px 0;
}

.signin-content button {
    background: transparent;
    color: white;
    font-size: 0.9em;
    letter-spacing: 0.8px;
    border:none;
    cursor: pointer;
}

#reg-slider button {
    background: transparent;
    color: white;
    font-size: 0.9em;
    letter-spacing: 0.8px;
    border:none;
    cursor: pointer;
}

.signin-content button:nth-child(odd):hover
{
    background: rgba(255,255,255,0.3);
}

.or
{
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    position: relative;
    text-align: center;
}

.or span
{
    position: absolute;
    right: 50%;
    top: -10px;
    transform: translateX(50%);
    background-color: white;
    color: gray;
    font-size: 0.8rem;
    padding: 0 10px;
}

.signin-footer
{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;


}

.signin-footer a
{
    color: gray;
    font-weight: 300;
}

.signin-close
{
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    /*right: -15px;
    top: -16px;*/
    left: calc(50% - 12px);
    bottom: -16px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.signin-close img
{
    opacity: 0.7;
}

.signin-logo
{
    width: 100px;
    height: 100px;
    flex: 1 1 30%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.signin-message
{
    display: none;
    width: 70%;
    padding: 10px;
    position: absolute;
    bottom: 10px;
    left:50%;
    transform: translateX(-50%);
    color: #f77171;

}

#register-slider {
    position: fixed;
    display: none;
    width: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    z-index: 5000;
    border:none;
    transition: 0.5s;
    animation: toDown 0.5s forwards;
    border-radius: 5px;

}

#register-slider > div {
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,1);
    padding: 30px;
    border-radius: 7px;
    color: #333;
}

#register-slider > div form {
    display: flex;
    width: 100%;
    flex-direction: column;
}

#register-slider > div form p {
    margin-bottom: 20px;
}

#dadata-answer > div {
    margin: 10px 0 !important;
}

#register-slider h2 {
    margin-bottom: 10px;
}

#dadata-answer p {
    margin-bottom: 3px !important;
    color: #777 !important;
    min-height: 0 !important;

}

#register-slider > div form input {
    padding: 10px 15px;
    width: 100%;
    border-radius: 30px;
    border: none;
    transition: background-color 0.5s;
}

#register-slider > div form input.error {
    transition: background-color 0.5s;
    background: #d47878;
}

#register-slider > div form button {
    width: 100%;
    height: 40px;
    background: transparent;
    color: #333333;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 30px;
    border:1px solid #333333;
    cursor: pointer;
    margin-top: 15px;
}

/*start--auth---*/
#auth {
    position: relative;
}

#auth .close-auth, #catalogs .close-catalogs, #information-wrapper .close-information, .closeCalc, .close-password, .closeInstruction {
    position: absolute;
    top: 6px;
    right: 10px;
    cursor: pointer;
    font-size: 1.1rem;
}

#auth .close-auth i, .closeCalc i, close-password i{
    color: #777;
}

#auth .register-policy {
    color: #777;
}

#auth .register-policy.error {
    color: #f77171;
}

#auth .register-policy span a {
    text-decoration: underline !important;
}

#auth #check-policy {
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #777;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 4px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

#auth #check-policy:checked::before {
    visibility: visible;
}

#auth #check-policy::before {
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    color: #777;
}

#auth .register-policy label {
    cursor: pointer;
    font-size: 0.8rem !important;
}

.modal {
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    z-index: 5000;
    border:none;
    transition: 0.5s;
    animation: toDown 0.5s forwards;
    border-radius: 5px;
}

/*#auth-wrapper, #catalogs-wrapper {
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    z-index: 5000;
    border:none;
    transition: 0.5s;
    animation: toDown 0.5s forwards;
    border-radius: 5px;
}*/

#auth-wrapper #auth, #change-password-wrapper #change-password{
    width: 350px;
    position: relative;
    background-color: white;
    border-radius: 5px;
    display: grid;
    align-items: center;
    padding: 30px;
    min-height: 450px;
    grid-template-rows: 50px 1fr;
}
.auth-header, .change-password__header {
    font-size: 1.8rem;
    color: #777;
}

.auth-content, .change-password__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-content .auth-info, .change-password__content .change-password__info {
    margin: 10px 0;
    color: #ff7070;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}

.auth-content .auth-info.show, .change-password__content .change-password__info.show {
    visibility: visible;
    opacity: 1;
}

.auth-content #activation-form span:first-of-type {
    color: #797dd5 !important;
    font-size: 0.9rem !important;
}

.auth-content form > span, .change-password__content form > span {
    color: #777;
    font-size: 0.8rem;
    margin-bottom: 15px;
}

.auth-content form p, .change-password__content form p{
    font-size: 1rem;
    color: #ff7070;
    min-height: 30px;
}

#reset-form p {
    color: #797dd5 !important;
}

.auth-content form, .change-password__content form{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-content form > div:first-child, .change-password__content form > div:first-child{
    min-height: 50px;
}

.auth-content form button.access-btn1, .change-password__content form button{
    margin: 20px 0;
    position: relative;
}

.auth-content form button.access-btn1:before, .change-password__content form button:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 1px;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
    background-color: white;
    transform-origin: right;
}

.auth-content form button.access-btn1:after, .change-password__content form button:after{
    position: absolute;
    content: "";
    width: 10px;
    height: 1px;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(-45deg);
    background-color: white;
    transform-origin: right;
}

.auth-content form a, .close-auth a, .change-password__content form a, .close-password a{
    color: #797dd5 !important;
    font-size: 0.9rem !important;
    margin-bottom: 10px;
    cursor: pointer;
}

.auth-content form[page="3"] a:first-of-type{
    align-self: flex-end;
}

.auth-content form a, .change-password__content form a{
    align-self: center;
}

.auth-content form .box-input, .change-password__content form .box-input{
    display: grid;
    grid-template-columns: 25px 1fr;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    align-items: center;
    margin: 10px 0;
}

.auth-content form .box-input.password, .change-password__content form .box-input.password{
    grid-template-columns: 25px 1fr 25px;
}

.auth-content form .box-input i, .change-password__content form .box-input i{
    color: #c3c3c3;
    font-size: 1.2rem;
}

.auth-content form .box-input input, .change-password__content form input {
    position: relative;
    border: none;
    margin-left: 10px;
    font-size: 1rem;
    background-color: transparent;
    color: #777;
}

.auth-content form .box-input input::placeholder, .change-password__content form .box-input input::placeholder {
    color: #c3c3c3;
    font-size: 1rem;
    font-weight: 300;
}

#sign-form[data-type='email'] .fa-phone, #sign-form[data-type='email'] #sign-phone, #sign-form[data-type='email'] .sign-type span[data-type='email']{
    display: none;
}

#sign-form[data-type='phone'] .fa-envelope, #sign-form[data-type='phone'] #login, #sign-form[data-type='phone'] .sign-type span[data-type='phone']{
    display: none;
}

.sign-type {
    align-self: flex-start !important;
    margin: 0 !important;
}


/*#auth-wrapper #auth a:first-child:before{
    content: '';
    position: absolute;
    height: 70%;
    width: 2px;
    background-color: #777;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
}*/

/*---auth--end*/

.register-wrapper, .activation-wrapper
{
    position: fixed;
    display: none;
    width: 350px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    z-index: 5000;
    border:none;
    transition: 0.5s;
    animation: toDown 0.5s forwards;
    border-radius: 5px;
}

.register, .activation-code
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.3);
    padding: 0 30px;
    border-radius: 7px;
    color: white;
    align-items: center;
}

.register-message
{
    display: none;
    width: 70%;
    padding: 10px;
    position: absolute;
    bottom: -50px;
    left:50%;
    transform: translateX(-50%);
    color: #f77171;
    text-align: center;
    font-size: 1.4rem;
}

.register .input-box label{
    position: absolute;
    pointer-events: none;
    padding: 0;
    top: 6px;
    white-space: nowrap;

}

.register .input-box input{
    margin-top: 5px;
}

.register .input-box input.error{
    border-color: red;
}

.register .input-box input:focus
{
    outline: none;
}

.register .input-box input:focus ~ label,
.register .input-box input:valid ~ label
{
    display: none;

}

.register-header
{
    position: relative;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.register-header h1
{
    color: white;
    font-weight: 700;
    letter-spacing: 2px;


}

.register-content
{

    display: flex;
    justify-content: center;
    flex-direction: column;
}

.fio
{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.fio div:nth-child(1), .fio div:nth-child(2){
    margin-right: 10px;

}

.register-contacts
{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 20px;
}

.register-contacts div
{
    flex:1 1 50%;
}

.register-contacts div:nth-child(1)
{
    margin-right: 10px;
}

/*start--policy---*/

.register-policy
{
    color: white;
}

.register-policy.error
{
    color: #f77171;
}

.register-policy span a
{
    text-decoration: underline !important;
}

#check-policy {
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid white;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 7px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

#check-policy:checked::before {
    visibility: visible;
}

#check-policy::before {
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    color: #f6f6f6;
}

.register-policy label {
    cursor: pointer;
    font-size: 0.9rem;
}

/*---policy--end*/

/*start--policy---*/

.register-policy
{
    color: white;
}

.register-policy.error
{
    color: #f77171;
}

.register-policy span a
{
    text-decoration: underline !important;
}

#check-policy {
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid white;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 7px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

#check-policy:checked::before {
    visibility: visible;
}

#check-policy::before {
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    color: #f6f6f6;
}

.register-policy label {
    cursor: pointer;
    font-size: 0.9rem;
}

/*---policy--end*/

.register-footer
{
    display: inline-block;
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.register button, .activation-code button

{
    height: 50px;
    background: transparent;
    color: white;
    font-size: 1.1rem;
    padding: 0 40px;
    border-radius: 30px;
    border:1px solid white;
    cursor: pointer;
    letter-spacing: 2px;
}

.register button:hover, #register-slider div form button:hover
{
    background: rgba(255,255,255,0.3);
}


.success-wrapper
{
    position: absolute;
    display: none;
    width: 700px;
    height: 450px;

    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    z-index: 5000;
    border:none;

    transition: 0.5s;
    animation: register_show 0.5s forwards;
    border-radius: 5px;

}
.register-success
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.3);
    padding: 60px;
    border-radius: 7px;
    color: white;
    align-items: center;
    font-size: 1.3rem;
    line-height: 25px;
    letter-spacing: 1.2px;
}

.register-success img
{
    width: 128px;
    filter: invert();
    margin-bottom: 30px;
}

.register-success button
{
    margin-top: 30px;
}

.no-account {
    text-align: center;
}

.no-account span{
    margin-left: 5px;

}

.price
{
    /*background-color: #6ab5e9;*/
    display: grid;
    width: 100%;
    grid-template: auto / 1fr minmax(auto,800px) 1fr;
    align-items: center;
    text-align: center;
    position: relative;
    grid-gap: 30px;
    justify-items: center;
    height: 100%;
    overflow: hidden;
    background: url("/assets/img/vinpin_girl.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: multiply;
}

.price-content {
    z-index: 1;
    grid-column: 2/3;
    width: 100%;
    display: flex;
    padding: 60px 0;
    background: transparent;
    justify-content: space-between;
    align-items: center;
}

.price-box{
    border-radius: 10px;
    width: 300px;
    height: 400px;
    background: #f6f6f6;
    margin: 0 20px;
}

.background-image
{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("/assets/img/vinpin_girl.jpg");
    background-size: cover;
    z-index: 100;
    filter: blur(2px);
    filter: brightness(0.4);;
}


/*.catalogs
{
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px;
    height: 100%;
    position: relative;
    overflow: hidden;

    !*background: url("/assets/img/vinpin_girl.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: multiply;*!
}

@keyframes catalogs-background_show {
    0%{right:-50%;}
    100%{right: 0;}
}

.catalogs-background.show
{
    position: absolute;
    top: 0;
    right: -50%;
    height: 100%;
    width: 50%;
    background: #6ab5e9;
    !*background: linear-gradient(to left,#6ab5e9 60%,white);*!
    transform: skewX(-30deg);
    transform-origin: 100% bottom;
    pointer-events: none;
    z-index: 0;
    animation:  catalogs-background_show 1s forwards;
    animation-delay: 0.8s;
}

!*
.catalogs-content
{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    justify-content: space-around;
}
*!

.catalogs-text
{
    flex: 1 1 50%;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-100px);
    line-height: 30px;
    text-indent: 30px;
}

.catalogs-text.show
{
    visibility: visible;
    opacity: 1;
    transition: 1.5s;
    transform: translateX(0px);
}

.catalogs-text span
{
    word-wrap: normal;
    width: 80%;
    display: block;
    margin: 0 auto;
}

.catalogs-promo
{
    flex: 1 1 50%;
    visibility: hidden;
    opacity: 0;

    transform: translateX(100px);
}

.catalogs-promo.show
{
    visibility: visible;
    opacity: 1;
    transition: 1.5s;
    transform: translateX(0px);
}

.catalogs-promo img
{
    width: 600px;
    transform: scale(-1,1);
}*/

.cabinet-wrapper {
    height: 100vh;
    display: grid;
    grid-template: 1fr / fit-content(250px) 1fr;
    overflow-y: auto;
    overflow-x: hidden;
}

.cabinet-wrapper.active {
    background-color: #335d82;
}


.cabinet-header
{

    width: 100% ;
    background: #013048;
    /*background: rgba(0,0,0,0.8);*/
    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    z-index: 100;
    transition: 0.5s;
}



.cabinet-left {
    min-height: 100%;
    min-width: 200px;
    display: grid;
    grid-template: 60px 1fr / 1fr ;
    justify-items: center;
    transition: 0.5s;
    background: #013048;
    /*background: rgba(0,0,0,0.7);*/
    padding: 0 10px;
    grid-row: span 2;
    grid-gap: 30px;
    /*overflow: auto;*/
}

#calendar-wrapper {
}

.main-account-info button > p {
    padding: 0;
    margin: 5px 0;
    font-size: 0.9em;
}

.main-account-info button > p:first-of-type {
    font-size: 1.2em;
    word-break: break-all;
}

.main-account-info > div:hover, .main-account-info button:hover {
    cursor: auto !important;
    background: none !important;
}

.main-account-info > div {
    display: block !important;
}

.cabinet-menu > ul > li > div.main-account-info__element:hover {
    background: none !important;
}

.cabinet-menu > ul > li > div.main-account-info__element p:first-child {
    word-break: break-word;
}

@media (max-height: 800px) {
    .cabinet-left {
        grid-gap: 10px;
    }
}

@media (max-width: 1280px) {

    .check-vin1-content {
        grid-template-columns: 1fr;
    }

    .check-vin1-search-wrapper {
        grid-column: unset !important;
    }

    .contact-wrapper {
        right: 10px !important;
    }

    .main-wrapper {
        grid-template-columns: auto !important;
    }

    .main-wrapper .mini-info, .card-wrapper.debit {
        grid-column: unset !important;
    }

    .cabinet-left {
        max-width: 50px !important;
        min-width: 50px !important;
        transition: 0.5s;
        padding: 0;
    }

    .main-account-info {
        display: none !important;
    }

    .logo h2{
        display: none;
    }

    @keyframes button_show_1280 {
        0%{display: none; opacity: 0; transform: translateX(10px);}
        100%{display: inline-block; opacity: 1; transform: translateX(0px);}
    }

    .cabinet-menu button {
        z-index: 1000;
        position: absolute;
        left: 95%;
        display: none;
        padding: 5px 15px;
        border-radius: 5px;
        background: #013048 !important;
    }

    .cabinet-menu li div {
        padding: 10px 5px !important;
        justify-content: center;
    }

    .cabinet-menu li div:hover button {
        display: block;
        animation: button_show_1280 0.2s forwards;
    }
    /* .cabinet-left:hover {
         min-width: 200px !important;
         transition: 0.5s;
     }*/

    .menu-list:after{
        display: none;
    }

    .cabinet-left:hover .menu-list:after{
        content: '';
        position: absolute;
        border: 7px solid;
        border-color: transparent transparent transparent #eee;
        top: 28px;
        right: 5px;
        transition: 0.5s;
        display: block;
    }

    .client-content {
        flex-direction: column !important;
    }

    .client-content > div{
        flex: none !important;
        width: 90% !important;
    }
}

.cabinet-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;

    width: 100%;


}

.cabinet-menu img
{
    filter: invert();
    vertical-align: middle;
    min-width: 30px;
}

.cabinet-menu i
{
    color: var(--bg-element);
    justify-self: center;
}

.cabinet-menu ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

.cabinet-menu ul li{
    width: 100%;
    position: relative;

}

.cabinet-menu ul li .menu-desc{
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right:-30px;

}

.cabinet-menu > ul > li > div
{
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    background: none;
    position: relative;
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 40px 1fr;
}

.cabinet-menu > ul > li > div:hover, .cabinet-menu > ul > li > div.active {
    background: var(--color-element) !important;
}

/*.cabinet-menu > ul > li ul{
    color: white;
    height: 0;
    overflow: hidden;
    transition: 0.5s;
    text-align: left;
    margin-left: 65px;
}*/

.menu-drop{
    color: white;
    height: 0;
    overflow: hidden;
    transition: 0.5s;
    text-align: left;
    background: #333333;
    font-size: 1.1rem;
}

.menu-drop li{
    cursor: pointer;
}

@keyframes ul_show {
    0%{opacity: 0;}
    100%{opacity: 1;}

}
.menu-drop.show {
    height: auto;
    /*transition: 0.5s;
    animation: ul_show 2s forwards;*/
    padding: 15px;
    padding-left: 30%;

}


/*.cabinet-menu > ul > li ul.show{
    height: auto;
    transition: 0.5s;
    margin-top: 20px;
    animation: ul_show 2s forwards;
}*/

/*.cabinet-menu > ul > li:hover ul{
    height: auto;
    transition: 0.5s;
    margin-top: 20px;
    animation: ul_show 2s forwards;
}*/

.menu-list.rotate:after {
    content: '';
    position: absolute;
    border: 7px solid;
    border-color: transparent transparent transparent #eee;
    top: 25px;
    right: 5px;
    transition: 0.5s;
    transform: rotate(90deg);
;

}

@keyframes button_show {
    0%{display: none; opacity: 0; transform: translateX(10px);}
    100%{display: inline-block; opacity: 1; transform: translateX(0px);}
}

.cabinet-menu button {
    color: white;
    font-size: 1.1rem;
    border: none;
    text-align: left;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    margin: 0 15px;
    animation: button_show 0.2s forwards;
    animation-delay: 0.3s;
    overflow: hidden;
    vertical-align: middle;

}

@keyframes show_cabinet_right {
    0% {opacity:0; visibility:hidden; transform: translateX(100px)}
    100% {opacity:1; visibility:visible; transform: translateX(0px)}
}

.cabinet-right
{
    font-size: 1rem;
    min-height: 100%;
    vertical-align: top;
    padding: 30px;
    overflow: auto;

}

.cabinet-right.show
{
    animation: show_cabinet_right 0.5s forwards;
}



.cabinet-sidebar
{
    position: fixed;
    right: 0;
    bottom: 10%;
    /*height: 80%;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    grid-template: repeat(6,1fr) / 1fr;
    grid-auto-flow: row;
    grid-gap: 20px;
    padding: 30px 30px 0 0;*/
    padding: 30px 0 30px 0;
    z-index: 1000;

}

.cabinet-sidebar i
{
    margin: 10px;
    font-size: 2rem;
    color: rgba(0,0,0,0.5);
}

.sidebar-element {

    display: flex;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    transition: 0.5s;
    width: 200px;
    transform: translateX(75%);
}

.sidebar-element:hover {
    transition: 0.5s;
    transform: translateX(0);
}

.cabinet-title
{
    font-size: 1.5rem;
}

.account-wrapper
{

    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding-top: 100px;
}

/*.account-wrapper button:nth-child(even)
{
    background: transparent;
    color: red;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 20px;
    border: none;
    width: 200px;
}
.account-wrapper button:nth-child(even):hover
{
    color:gray;
    background: transparent;
}*/

.account-wrapper button
{
    padding: 5px 10px;
    width: 150px;
    background: transparent;
    border-radius: 30px;
    border: 1px solid gray;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 20px;
}

.account-wrapper button:hover
{
    background: rgba(0,0,0,0.5);
    color: white;

}


.account-content
{
    width: 700px;

    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: hidden;
    transition: 0.5s;
    padding: 25px;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    border-radius: 10px;
}

.account-content.show
{
    height: 300px;
}

.account-content .inputbox
{
    margin: 12px;
    display: flex;
    width: 100%;
    font-size: 1.1rem;
    min-height: 35px;
    align-items: center;

}

.inputbox span
{
    flex: 1 1 30%;
}

.inputbox input
{
    flex: 1 1 70%;
    font-size: 1.1rem;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 10px;
}


/*---Subsribtion---*/

.subscription-wrapper
{
    flex: 1 1 85%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.subscription-content
{
    width: 80%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.subscription-add-wrapper
{
    display: none;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height:100%;
    max-width: 1400px;
    max-height: 700px;
    z-index: 2001;
    border-radius: 10px;
    animation: quiz_show 0.5s forwards;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

}

.subscription-add
{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 10px;
    flex: 1 1 auto;
    color: #333;
    transition: 1.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #f8fbff;
    box-shadow: 13px 15px 50px -3px rgba(0,0,0,0.62);
    padding: 20px;
}

.subscription-add-close
{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    cursor: pointer;
}

.subscription-add-close img
{

}

.subscription-add-header
{

}

.subscription-carousel
{
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    position: relative;
}


.subscription-card
{
    width: 90px !important;
    height: 100px;
    border-radius: 5px;
    background: white;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    box-shadow: 1px 2px 15px -5px gray;
    cursor: pointer;

}


.subscription-card:hover
{
    border: 2px solid #797dd5;
}


.card-top{
    flex: 0 0 50%;
    background: linear-gradient(to right, #3da7f0, #98cbee);
    border-radius: 12px 12px 0 0;
    padding: 20px;
    color: white;
    overflow: hidden;
}

.card-top div{
    padding: 10px;
}

.card-duration{
    font-size: 1rem;
}

.card-cost{
    font-size: 1rem;
}

.card-cost i{
    margin-left: 3px;
    font-size: 0.9em;
}

.card-title{
    font-size: 1rem;
}

.card-bottom{
    flex: 0 0 50%;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.card-bottom div{

}

.subscription-card button{
    background: #3da7f0 !important;
    border: none !important;
    color: white !important;
}

.subscription-card button:hover{
    background: #fff !important;
    border: 1px solid #3da7f0 !important;
    color: #3da7f0 !important;
}

.subscription-card:last-child
{
    margin-right: 0 !important;

}

.subscription-summa
{
    font-size: 1.3rem;
}

.subscription-add button
{
    width: 150px;
    min-height: 35px;
    font-size: 1.2rem;
    border-radius: 30px;
    border: 1px solid #333;
    margin-top: 15px;
    background: transparent;
    color: #333;
    cursor: pointer;

}

.subscription-add button:hover
{
    background: rgba(0,0,0,0.7);
    color: white;
}

.subscription-type{
    font-size: 1.5rem;
    font-weight: bold;
}

.subscription-active
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 350px;
    height: 300px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 15px;
}

.subscription-date{
    align-self: flex-start;
}

.subscription-info
{
    text-align: center;
}

.subscription-info div
{
    margin: 20px;
}

.subsription-duration{
    font-size: 1.2rem;
}

.subscription-cost
{
    height: 30px;
    text-align: right;
    vertical-align: center;
}

.subscription-accept
{

    text-align: center;

}

.subscription-accept button
{
    width: 170px;
    min-height: 35px;
    font-size: 1.2rem;
    border-radius: 30px;
    border: 1px solid #333;
    margin-top: 15px;
    background: transparent;
    color: #333;
    cursor: pointer;
    margin: auto;
    padding: 8px;
}

.subscription-accept button:hover
{
    background: rgba(0,0,0,0.5);
    color: white;

}

/*---Subsribtion---*/

/*---Tarif---*/

/*.tarif-wrapper {

    display: grid;
    grid-template: fit-content(70px) repeat(4,minmax(auto, 170px))/ minmax(auto,1fr) minmax(auto,3fr) 1fr;
    grid-gap: 20px;

    max-width: 1600px;
    padding: 0 20px 0 20px;
}*/

.catalogs-wrapper {
    display: grid;
    grid-template: 70px minmax(800px, 1fr)/ fit-content(200px) 1fr;
    grid-gap: 10px;
    padding: 0 20px 0 20px;
    /*height: calc(100vh - 60px);*/
    width: 100%;
    /*height: 100%;*/
}

.catalogs-wrapper > div{
    box-shadow: 0px 0px 10px 1px #ddd;
    background-color: rgba(255,255,255,0.6);
}

#check-vin .catalogs-wrapper > div{
    /*box-shadow: 0px 0px 10px 1px #ddd;*/
    background-color: white;
}

#check-vin .catalogs-header input {
    background-color: #f5f4f6;
}

.catalogs-left {
    padding: 15px 0;
    display: grid;
    grid-gap: 50px;
    align-content: flex-start;
    min-width: 200px;
    overflow: hidden;
}

.catalogs-left p{
    width: 100%;
    padding: 10px;
    /*transition: background-color, color 0.1s;*/
}

.catalogs-left i{
    display: none;
    font-size: 1.1em;
}

.catalogs-left #types-vehicles > div, .catalogs-left #regions > div{
    cursor: pointer;
    transition: transform 0.1s;
}

.catalogs-left #types-vehicles > div:hover, .catalogs-left #regions > div:hover{
    /*background-color: #335d82;*/
    background: var(--color-element);
    color: white;
    border-left: 2px solid rgba(255,255,255,0.6);
    border-right: 2px solid rgba(255,255,255,0.6);
}

.catalogs-left #types-vehicles > div.active, .catalogs-left #regions > div.active{
    /*background-color: #335d82;*/
    background: var(--color-element);
    color: white;
    border-left: 2px solid rgba(255,255,255,0.6);
    border-right: 2px solid rgba(255,255,255,0.6);
}

.catalogs-content {
    grid-column: 2/4;
    background: #f6f6f6;
    /*display: grid;
    grid-template-columns: repeat(auto-fill, 186px);
    grid-gap: 5px;*/
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    overflow: auto;
    padding: 15px;
    align-content: flex-start;
    justify-content: center;
}

.catalogs-header {
    grid-column: 1 / 4;
    display: grid;
    justify-content: center;
    align-items: center;
    background: #f6f6f6;
    /*background-color: rgb(246, 246, 246);*/
    color: #333;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}

.catalogs-header span {
    font-size: 1.5rem;
    font-weight: bold;
    justify-self: flex-start;
    padding-left: 10px;
}

.catalogs-header input{
    width: 400px;
    border: none;
    /*border-radius: 30px;*/
    border: 1px solid #ddd;
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: white;
}

.catalogs-header input::placeholder {
    text-align: center;
}

.cats {
    display: none;
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 0 0 5px 5px;
}
.cats a{
    color: #333333;
    display: block;
    padding: 10px 0;
    text-align: center;
}

.cats p{
    padding: 10px 0;
    text-align: center;
}

.cats p:hover, .cats a:hover{
    /*background-color: #335d82;*/
    background: var(--color-element);
    color: white;
}

.catalogs-content > div {
    /*border-radius: 5px;*/
    width: 170px;
    height: 50px;
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 5px 10px 2px rgba(0,0,0,0.1);
}

.catalogs-content > div:hover, .mini-catalogs-main > div:hover {
    transform: translateY(-3px);
    transition: transform 0.3s;
    z-index: 1000;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 10px 2px rgba(0,0,0,0.4);
    background-color: white;
}

.catalogs-content > div:hover .cats, .mini-catalogs-main > div:hover .cats {
    display: block;
    border-top: none;
    box-shadow: 0 15px 10px 1px rgba(0,0,0,0.4);
}


/*---Tarif---*/

/*---News-cabinet---*/

.news-wrapper {
    display: grid;
    grid-gap: 20px;
    max-width: 900px;
    margin: auto;
}

.news-wrapper a{
    color: var(--color-element) ;
}

.news-wrapper > div {
    box-shadow: 0 10px 15px -10px #b5b5b5;
}

.news-wrapper .card-header {
    display: grid;
    justify-content: unset;
    font-size: 1em;
    border-bottom: 1px solid #ddd;
    align-content: center;
}

.news-wrapper .card-header > div {
    padding: 3px 0;
}

.news-wrapper .card-content {
    line-height: 1.4;
}
.news-wrapper .card-header .news-title {

}

.news-wrapper .card-header .news-date {
    font-weight: lighter;
    font-size: 0.9em;
    color: grey;
}

/*---News-cabinet---*/


/*---Courses-cabinet---*/

.courses-wrapper, .referal-wrapper {
    display: grid;
    grid-gap: 50px;
    max-width: 900px;
}

#tab-users, #tab-main, .user-to-course{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#tab-users > div, .user-to-course > div:last-of-type{
    display: flex;
    justify-content: space-between;
}

#tab-courses, #tab-referal {
    display: none;
}

#tab-courses .courses{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#tab-courses .courses .courses-cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

.courses-wrapper > .courses-tabs, .referal-wrapper > .referal-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    border-radius: 30px;
    border: 1px solid #797dd5;
    width: 350px;
    overflow: hidden;
}

.courses-wrapper > .courses-tabs .tabs{
    flex: 1;
    padding: 10px 15px;
    position: relative;
    cursor: pointer;
    color: #797dd5;
    transition: background-color 0.3s;
}

.courses-wrapper > .courses-tabs .tabs:hover, .courses-wrapper > .courses-tabs .tabs.active{
    background-color: #797dd5;
    color: white;
}

.courses-wrapper > .courses-tabs .tabs:not(:last-child):before {
    content: "";
    position: absolute;
    width: 1px;
    left: 100%;
    height: 100%;
    top: 0;
    background-color: #797dd5;
}

.courses-wrapper table td:last-child{
    width: 50px !important;
}

.courses-wrapper #tab-courses .courses-card{
    display: grid;
    padding: 25px;
    grid-template: 1fr 30px / 2fr 1fr;
    height: 190px;
    max-width: 420px;
    overflow: hidden;
    border-radius: 3px 10px 10px 3px;
    cursor: pointer;
    transition: 0.2s;
    background: white;
    border-left: 4px solid #797dd5;
    box-shadow: 0 10px 15px -10px #b5b5b5;
}

.courses-wrapper #tab-courses .courses-card .courses-price{
    text-align: center;
}


.courses-wrapper #tab-courses .courses-card .courses-name span, .courses-wrapper #tab-courses .courses-card .courses-footer span, .courses-wrapper #tab-courses .courses-card .courses-price p{
    font-weight: normal;
    color: #949494;
}

.courses-wrapper #tab-courses .courses-card:hover{
    background-color: #797dd5;
    box-shadow: 5px 5px 20px 0px rgb(0 0 0 / 40%);
    color: white !important;
}

.courses-wrapper #tab-courses .courses-card:hover .courses-name span, .courses-wrapper #tab-courses .courses-card:hover .courses-footer span, .courses-wrapper #tab-courses .courses-card:hover .courses-price p{
    color: white !important;
}

.courses-wrapper #tab-courses .courses-card h3{
    margin-top: 5px;
}

.courses-wrapper #tab-courses .user-to-course .access-back{
    padding: 30px 0;
}

.courses-wrapper #tab-courses .user-to-course.show{
    display: flex;
    animation: access-tarif 0.5s forwards;
}

.courses-wrapper #tab-courses .user-to-course select{
    border-radius: 5px;
    height: 100%;
    margin-right: 7px;
    padding: 0 10px;
    border: 1px solid #333;
}

.courses-wrapper #tab-courses .user-to-course .access-addbtn{
    border-radius: 5px;
}

.courses-wrapper #tab-courses .user-to-course .access-btn2{
    border-radius: 5px;
    align-self: end;
    box-shadow: none;
    margin: 0;
}

.courses-wrapper #tab-courses .user-stat {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.courses-wrapper #tab-courses .user-stat .access-search{
    max-width: 300px;
}

.courses-wrapper #tab-courses .user-info{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    color: #777 !important;
    font-size: 0.95em;
}

/*---Courses-cabinet---*/

/*---Main-cabinet---*/

.main-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
    height: 100%;
    grid-template-rows: max-content;
}

.main-wrapper .mini-info{
    grid-column: span 3;
}

.main-element {
    color: #333;
    box-shadow: 2px 2px 10px 5px #ddd;
    background: #f6f6f6;
    border-radius: 5px;

    padding: 15px;

    transition: 0.5s;
    display: grid;
    align-items: center;
    text-align: left;
    grid-template: 1fr 3fr / 1fr;
}

.main-element span {
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.main-element__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    color: #333333 !important;
}
.main-element__content a{
    color: #333333 !important;
    font-size: 1.5rem;
    padding: 5px;
    display: flex;
    align-items: center;
}

.contrafakt{
    width: 200px;
}
.gibdd{
    width: 60px;
}

.main-element__content button {
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 1.2rem;
    padding: 10px 20px;
    cursor: pointer;
    margin: 20px 20px 20px 0;
    min-width: 200px;
}


.cabinet-main-header {

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: start;
    box-shadow: 2px 2px 10px 5px #ddd;
    border-radius: 5px;
    padding: 15px;
    background: #f6f6f6;
    color: #333;
    font-size: 1.3rem;
}

.cabinet-main-header span {
    justify-self: start;
}

.cabinet-main-header input {
    justify-self: end;
    border-radius: 5px;
    padding: 10px;
    background: transparent;
    border: 1px solid #ddd;
    font-size: 1.1rem;
}


/*---Main-cabinet---*/

/*---Access_Form-cabinet---*/

@keyframes access-tarif {
    0% {opacity: 0; visibility: hidden; transform: translateX(30px)}
    100% {opacity: 1; visibility: visible; transform: translateX(0)}
}

@keyframes access-content {
    0% {opacity: 0; visibility: hidden; transform: translateX(-30px)}
    100% {opacity: 1; visibility: visible; transform: translateX(0)}
}

@keyframes access-chat {
    0% {opacity: 0; visibility: hidden; transform: translateX(30px)}
    100% {opacity: 1; visibility: visible; transform: translateX(0)}
}

.access-wrapper {
    display: grid;
    grid-template: minmax(auto,80px) 4fr / minmax(auto,1280px);
    /*grid-template: repeat(3,minmax(auto,80px)) 4fr / minmax(370px,960px);*/
    font-size: 1rem;
}

.access-wrapper > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f6f6f6;
    border: 1px solid #ddd;
    box-shadow: 0 10px 15px -10px #b5b5b5;
    padding: 30px;
    color: #333333;
}

.access-wrapper > div:first-child button{
    border: none;
    background: transparent;
    font-size: 1em;
    color: #797dd5;
    font-weight: bold;
    color: #333333;
}
.access-wrapper > div:first-child button:first-child{
    margin-right: 20px;
}
.access-wrapper .lang {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.access-wrapper .lang img {
    width: 30px;
    margin-left: 5px;
}


.access-content {
    display: none;
    grid-template: repeat(2,minmax(auto,80px)) 3fr / minmax(370px,1280px);
}

.access-content.show {
    display: grid;
    animation: access-content 0.5s forwards;
}

.access-content > div:nth-child(1) {
    padding-top: 80px;
    justify-content: space-between;
}

.access-content > div:nth-child(1) span {
    font-size: 1.5em;
    color: rgba(0,0,0,0.6);
}

.access-content > div:last-child {
    width: 100%;
    padding: 0 30px;
}

.access-content > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 30px;
}

.access-wrapper button {
    cursor: pointer;
}

.access-btn1 {
    border-radius: 30px;
    background: #797dd5;
    padding: 10px 30px;
    border: none;
    color: #f6f6f6;
    box-shadow: 0 8px 15px -7px #797dd5;
    font-size: 1em;
    cursor: pointer;
    transition: 0.2s;
}

.access-btn1:active {
    transform: translate(2px,3px);
    box-shadow: 0 3px 15px -7px #797dd5;
}

.access-btn1:hover {
    background: #9497da;
}

.access-btn2 {
    border-radius: 30px;
    background: #13b66f;
    padding: 10px 30px;
    border: none;
    color: #f6f6f6;
    box-shadow: 0 8px 15px -7px #13b66f;
    font-size: 1em;
    cursor: pointer;
    width: min-content;
    min-width: 200px;
    margin: auto;
}

.access-btn2:hover {
    background: #33cb89;
}

.access-btn2:active {
    transform: translate(2px,3px);
    box-shadow: 0 3px 15px -7px #13b66f;
}

.access-addbtn {
    border-radius: 30px;
    border: 2px solid #797dd5;;
    padding: 10px 30px;
    color: #797dd5;
    font-size: 1em;
    cursor: pointer;
}

.access-addbtn:hover {
    background: #e4e5f7;
}

.access-btndel {
    border-radius: 30px;
    color: #e17779;
    border: 2px solid #e17779;
    padding: 8px 30px;
    font-weight: bold;
    margin-left: 10px;
    font-size: 1em;
    cursor: pointer;
}

.access-btndel:hover {
    background: #f6d3d4;
}

.access-search {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd;
}

.access-search i {
    color: #797dd5;
}

.access-search input {
    border: none;
    background: transparent;
    padding: 10px;
    font-size: 1em;
    background: transparent;
}

.add-user-wrapper, .access-confirm-wrapper, .vmware-instruction {
    font-size: 1.2rem;
    display: grid;
    grid-gap: 20px;
    padding: 30px;
    z-index: 4000;
    background: #f6f6f6;
    width: 320px;
    height: 400px;
    align-items: center;
    border-radius: 10px;
    animation: toDown 0.4s forwards;
}

.vmware-instruction{
    width: 500px;
    height: auto;
}

.vmware-instruction a{
    color: green;
}

.add-user-wrapper .pass {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-user-wrapper > div:not(:last-child){
    border-bottom: 1px solid #ddd;
}

.add-user-wrapper input {
    border: none;
    padding: 10px 0;
    width: 100%;
    flex: 1;
    background: transparent;
    font-size: 1rem;
}

.add-user-wrapper .btn-group button, .access-confirm-wrapper .btn-group button  {
    margin-top: 10px;
    width: 100%;
    margin-left: 0;
    padding: 8px;
    font-size: 0.9em;
}

.mini-catalogs-wrapper {
    font-size: 1rem;
    display: grid;
    grid-gap: 20px;
    padding: 20px;
    z-index: 4000;
    background: #f6f6f6;
    width: 95%;
    height: max-content;
    align-items: center;
    border-radius: 10px;
    animation: toDown 0.4s forwards;
    max-width: 1200px;
    max-height: 90vh;
    overflow: auto;
    justify-items: center;
}

.mini-catalogs-wrapper .close{
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.5rem;
}

.mini-catalogs-wrapper .mini-catalogs-main {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding: 15px;
    overflow: auto;
    align-content: flex-start;
    justify-content: center;
}

.mini-catalogs-wrapper .mini-catalogs-main > div{
    width: 120px;
    height: 35px;
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 5px 10px 2px rgba(0,0,0,0.1);
}

.mini-catalogs-wrapper .mini-catalogs-main > div .cats a:hover{
    background: rgba(0,0,0,0.3);
}

.users-table, .balance-history-table, .manager-table, .debit-table, .rank-table {
    border-collapse: collapse;
    border: none;
    width: 100%;
}

/*.debit-table, .rank-table {
    overflow-y: scroll;
    height: 700px;
    display: block;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.debit-table::-webkit-scrollbar, .rank-table::-webkit-scrollbar {
    width: 0;
    background-color: #f9f9fd;
}*/

.users-table thead tr, .balance-history-table thead tr, .manager-table thead tr{
    border-bottom: 2px solid #333;
    color: #777 !important;
    font-size: 0.85em;
}
.debit-table thead tr, .rank-table thead tr{
    border-bottom: 1px solid #ddd;
    font-size: 1em;
    font-weight: 600;
}

.users-table tbody tr, .balance-history-table tbody tr, .manager-table tbody tr, .debit-table tbody tr, .rank-table tbody tr{
    border-bottom: 1px solid #ddd;
}

.users-table .user-check {
    -webkit-appearance: none;
    margin-right: 10px;
    width: 17px;
    height: 17px;
    border-radius: 3px;
    border: 1px solid #777;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
    vertical-align: middle;
}

.users-table .user-check:disabled {
    opacity: 0.4;
}

.users-table tr.active {
    background: #f0f0f0;
}



.users-table .user-name {
    cursor: pointer !important;
}

.users-table .user-check:before {
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    color: #f6f6f6;
}

.users-table .user-check:checked {
    background: #797dd5 ;
}
.users-table .user-check:checked:before {
    visibility: visible;
}

.users-table td,th , .balance-history-table td, th, .manager-table td, th, .debit-table td, th, .rank-table td, th{
    padding: 10px;
    text-align: left;
    font-weight: inherit;
    vertical-align: middle;
    white-space: nowrap;
}

.users-table td i{color: #c0c0c0; margin: 0 10px; cursor: pointer; vertical-align: middle;}
.users-table td i.active{color: #797dd5;}
.users-table td > div {
    display: inline-block;
    align-items: center;
}
.users-table .credentional {
    white-space: nowrap;
    border: none;
    background: transparent;
    padding: 10px;
    font-size: 1rem;
    box-shadow: 0 0 3px 1px #797dd5;
    cursor: pointer;
    border-radius: 5px;
    margin: 0 !important;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    max-width: 120px;
}

.users-table .user-expired, .userExpired {
    max-width: 110px;
}

.users-table .credentional.deactive {
    box-shadow: none;
    cursor: auto;
}

.users-table *[data-title]:hover::after {
    font-size: 0.9em;
    content: attr(data-title);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.85);
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    max-width: 130px;
    white-space: break-spaces;
    overflow: hidden;
}

.users-table *[data-gift]:hover::after {
    font-size: 0.9em;
    content: attr(data-title);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.85);
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    width: 200px;
    white-space: break-spaces;
    overflow: hidden;
}


.debit-table td:last-of-type, .debit-table th:last-of-type {
    float: right;
}

.access-chat {
    display: none;
    grid-template: repeat(2,minmax(auto,80px)) 3fr / minmax(370px,960px);
}

.access-chat.show {
    display: grid;
    animation: access-chat 0.5s forwards;
}


.access-tarif {
    display: none;
    grid-template: minmax(auto,80px) 2fr 1fr fit-content(2fr) 2fr / 1fr;

}
.access-tarif.show {
    display: grid;
    animation: access-tarif 0.5s forwards;
}

.access-tarif > div:not(:first-child):not(.checkbox-switch) {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.access-tarif > .checkbox-switch {
    display: grid;
    align-items: stretch;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    justify-self: center;
    max-width: 60%;
}

.access-tarif > .checkbox-switch {
    margin-top: 0 !important;
}

.access-tarif > .checkbox-switch > div{
    max-width: 200px !important;
}


.access-tarif > div:nth-child(2) {
    padding-top: 30px;
}

.access-tarif > div:nth-child(2) p{
    color: #777 !important;
    font-size: 2em;
    text-align: center;
}

.access-tarif > div:nth-child(3) p{
    color: #777 !important;
    font-size: 1.5em;
}

.access-tarif .checkbox-switch > div.tarif-element{
    /*display: flex;
    align-items: center;
    width: 320px;
    justify-content: space-between;
    color: #777;*/
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    width: 360px;
    align-items: center;
    justify-content: space-between;
    color: #777;
}

.access-tarif .checkbox-switch > div.tarif-element.disable{
    pointer-events: none;
    opacity: 0.8;
}

.access-tarif .period-choice, .access-tarif .renewal {
    display: none;
}

/*Start--monthly tarifs--*/

.monthly-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.access-tarif.monthly .period-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    padding: 4px;
    align-items: center;
    border: 1px solid #c4c4c4;
    margin-top: 10px;
    width: 250px;
}

.access-tarif.monthly .period-choice.disable {
    pointer-events: none;
}

.access-tarif.monthly .renewal {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.access-tarif.monthly .checkbox-switch[data-period='1'] [data-period='1'],
.access-tarif.monthly .checkbox-switch[data-period='3'] [data-period='3'],
.access-tarif.monthly .checkbox-switch[data-period='6'] [data-period='6'],
.access-tarif.monthly .checkbox-switch[data-period='12'] [data-period='12'] {
    display: block;
}

.access-tarif.monthly .checkbox-switch[data-period='1'] .tarif-element span[data-period]:not([data-period='1']),
.access-tarif.monthly .checkbox-switch[data-period='3'] .tarif-element span[data-period]:not([data-period='3']),
.access-tarif.monthly .checkbox-switch[data-period='6'] .tarif-element span[data-period]:not([data-period='6']),
.access-tarif.monthly .checkbox-switch[data-period='12'] .tarif-element span[data-period]:not([data-period='12']) {
    display: none;
}

.access-tarif.monthly .checkbox-switch p {
    grid-column: unset;
}

.access-tarif.monthly .period-choice > button{
    padding: 10px 7px;
    border: none;
    font-size: 0.9rem;
}

.access-tarif.monthly .period-choice > button.active{
    background: var(--color-element);
    color: white;
}

.access-tarif.monthly > .checkbox-switch > div{
    max-width: none !important;
}
.checkbox-switch > div span:last-of-type{
}
.access-tarif.monthly > .checkbox-switch > div span[data-period]{
    font-size: 1em;
    color: #b3b3b3;
}

.access-tarif.monthly span.daily{
    display: none;
}


/*--monthly tarifs--End*/
.access-back {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 30px;
    border-bottom: 1px solid #ddd;

}

.access-back button {
    border: none;
    background: transparent;
    color: #777 !important;
    font-size: 0.85em;
    cursor: pointer;
}

.accessUsersList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.accessUsersList > div{
    background: #e1e1e1;
    align-items: center;
    display: flex;
    padding: 15px 25px;
    border-radius: 5px;
    margin: 20px 10px 0 10px;
    font-size: 0.9em;
    color: #0f0953;
}

.accessUsersList i{
    cursor: pointer;
    margin-left: 5px;
}

.access-tarif-choice {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    border: none;
    color: #797dd5;
    margin-top: 20px;
}

.access-tarif-choice > div {
    padding: 15px 20px;
    cursor: pointer;
    font-size: 0.9em;
    border: 2px solid #797dd5;
    width: 100%;
    transition: 0.3s;
}

.access-tarif-choice > div:nth-child(2) {
    border-left: none ;
    border-right: none ;
}

.access-tarif-choice > div:nth-child(1) {
    border-radius: 30px 0 0 30px;

}

.access-tarif-choice > div:nth-child(3) {
    border-radius: 0 30px 30px 0;
}

.access-tarif-choice > div.active, .switch-vin > div.active {
    color: white;
    background: #797dd5;
    transition: 0.3s;
    box-shadow: 0 8px 15px -7px #797dd5;

}

.access-tarif-switch {
    text-align: center;
}

.access-tarif-switch > div{
    display: none;
}

.access-tarif-switch > div p, .additions > p{
    margin-bottom: 15px;
    color: #777;
}

@keyframes tarif-switch {
    0% {opacity: 0; visibility: hidden; transform: translateY(20px)}
    100% {opacity: 1; visibility: visible; transform: translateY(0)}
}
.access-tarif-switch > div.show{
    display: block;
    animation: tarif-switch 0.5s forwards;
}

.switch-vin {
    display: grid;
    grid-template: 1fr / repeat(4,1fr);
    grid-gap: 40px;
    align-items: center;
    justify-items: center;
}
.switch-vin > div {
    display: grid;
    grid-template: repeat(2,minmax(50%,50%)) / 1fr;
    align-items: center;
    text-align: center;
    padding: 5px 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    color: #777;
    cursor: pointer;
    transition: 0.3s;
}

.switch-vin > div:hover {
    /*transform: translateY(-4px);
    box-shadow: 0 10px 15px -7px #797dd5;*/
    transition: 0.5s;
    border-color: #797dd5;

}

.switch-vin > div.active{
    border-color: #797dd5 !important;
}

.switch-vin > div.active span:first-child{
    border-bottom: 1px solid #f6f6f6 !important;
}

.switch-vin > div span:first-child{
    padding: 5px;
}

.switch-vin > div span:first-child{
    border-bottom: 1px solid #777;
}

.additions {

    width: 100%;

}

.additions-switch {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 10px;
}
.additions-switch > div{
    cursor: pointer;
    width: 100px;
    height: 90px;
    border: 2px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.access-tarif-sum > p:first-of-type span {
    color: #797dd5;
}

.access-tarif-sum > p:last-of-type {
    font-size: 1.8em;
    margin: 10px;
    font-weight: bold;
}

/*---Access_Form-cabinet-END-*/


/*Begin---clients---*/

.clients-wrapper
{
    flex: 1 1 85%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.clients-content {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    overflow: hidden;
}

.clients-tools {
    display: flex;
    align-items: center;
}

.clients-tools .add-stuff{
    margin: 0;
}

.search-clients {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;

}

.search-clients input {
    border: none;
    border-right: 1px solid #ddd !important;
    background: white;
    padding: 7px 10px;
    font-size: 1.1rem;
    border-radius: 5px;

}

.search-clients img{
    display: flex;
    align-items: center;
    padding: 5.5px 10px;
    cursor: pointer;
    background: gray;
    border-radius: 0 5px 5px 0;
    border: none;
}

.search-clients img:hover{
    background: #ddd;
    filter: invert();
}

.clients-table
{
    /*border-collapse: collapse;*/
    margin: 25px 0;
    width: 100%;
    overflow: hidden;
    /*box-shadow: 0 0 20px rgba(0,0,0,0.15);*/

    border-spacing: 0 10px;
}

.clients-table thead tr
{
    text-align: left;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}




.clients-table thead th{
    padding: 20px 15px;
    background: white;
    position: relative;
}

.clients-table thead th:first-child, .clients-table tbody td:first-child {
    border-radius: 5px 0 0 5px !important;

}

.clients-table thead th:last-child, .clients-table tbody td:last-child {
    border-radius: 0 5px 5px 0 !important;
}

.clients-table tbody tr{
    font-size: 0.9em;
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;
}

.clients-table tr:hover{
    background: #6ab5e9 !important;
}

.clients-table tbody tr.show{
    animation: show_div 0.3s forwards;
}

.clients-table tbody tr.active-row{
    font-weight: bold !important;
    color: #6ab5e9;
}

/*.clients-table tbody tr:nth-child(even){
    background: #eee;
}*/


.clients-table tbody td {
    padding: 12px 15px;
    background: white;
    position: relative;
}

/*.clients-table tbody td:first-child, .clients-table thead th:first-child {
    border-right: 2px solid #e1eaf2;
}*/

.clients-table tbody td:not(:last-child):after, .clients-table thead th:not(:last-child):after {
    content: '';
    position: absolute;
    height: 60%;
    border-right: 2px solid #e1eaf2;
    right: 0;
    top: 20%;
}

.client-content {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-wrap: wrap;
}

.client-content > div {
    width: 90%;
    margin: 20px;
    border: 1px solid #ddd;
    border-radius: 7px;
    height: 50px;
    box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.15);

    overflow: hidden;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    opacity: 0;
}

.client-content > div.open{
    height: auto;
    transition: 0.3s;
}

.client-content > div .client-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-size: 1.1rem;
    border-radius: 7px 7px 0 0;
    min-height: 50px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    color: white;
}

.client-content > div .client-desc{
    flex: 1 1 auto;
    height: auto;
    width: 100%;
    border: none;
    overflow: hidden;
    transition: 0.3s;
    background: #fff;
    padding: 15px;
}

.client-toggle{
    position: relative;
}

.client-toggle:before{
    content: '';
    position: absolute;
    left:-15px;
    display: block;
    width: 15px;
    border-bottom: 2px solid white;
}
.client-toggle:after{
    content: '';
    position: absolute;
    left:-15px;
    display: block;
    width: 15px;
    border-bottom: 2px solid white;
    transform: rotate(90deg);
    transition: 0.3s;

}

.client-toggle.plus:after{
    content: '';
    position: absolute;
    left:-15px;
    display: block;
    width: 15px;
    border-bottom: 2px solid white;
    transform: rotate(0deg);
    transition: 0.3s;
}

.client_money{
    color: green;
}

/*.client-content > div:hover {
    transform: translate(0,-15px) !important;
    box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.15);
}*/

/*---clients---END*/

.billing-wrapper {
    position: fixed;
    width: 350px;
    height: 100vh;
    right: 0;
    transition: transform 0.3s;
    transform: translateX(100%);
    z-index: 2001;
    background: #f5f4f6;
    overflow: hidden;
    padding: 40px 5px 5px 5px;
    display: grid;
    align-content: baseline;
}

.billing-card {
    background: #fffdff;
    padding: 10px;
    border-radius: 5px;
    color: white;
}

.billing-card__header {
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.billing-content {
    font-size: 0.9em;
    padding: 10px ;
    display: grid;
    grid-gap: 20px;
    overflow: auto;
    height: 100%;
    align-content: baseline;
}

.billing-card__content {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 5px;
}

.billing-card__content span:nth-child(odd){
    font-weight: bold;
}

.closeBilling {
    position: absolute;
    top: 10px;
    cursor: pointer;
    left: 10px;
    font-size: 1.4rem;
}

.billing-wrapper.active {
    transform: translateX(0);
}


.balance
{
    flex: 1 1 50%;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 1.4rem;
    padding: 5px;
    margin-right: 10px;
}

.balance img
{

    margin-right: 10px;
}

.cabinet-footer
{
    width: 100%;
    height: 60px;
    background: rgba(0,0,0,0.8);
    color: #ddd;

    padding: 20px;
}

.cabinet-footer .social img
{

}

.swiper-container {
    width: 100%;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
}

@keyframes show_activation {
    0%{ opacity: 0; transform: translateY(-50px); }
    100%{ opacity: 1; transform: translateY(0px); }
}

.activation
{
    font-size: 1.5rem;
    animation: show_activation 0.5s forwards;
}


.inn
{
    display: none;
    width: 420px;
    height: 50px;
    border-radius: 5px;
    position: absolute;
    background: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 300;
}

.inn.show
{
    display: block;
}

.tinkoff{


}

.tinkoffPayRow{
    display:block;
    margin:1%;
    width:160px;
}

.breadcrumbs{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    flex-wrap: wrap;
    align-self: baseline;
}

.breadcrumbs div:last-child{
    cursor: auto;
}

.breadcrumbs__element{
    cursor: pointer;
}

.breadcrumbs img{
    width: 24px;
    transform: rotate(90deg);

    margin: 0 10px;
}

.breadcrumbs > span{
    color: rgba(0,0,0,0.5);
    font-size: 1em;
}

.breadcrumbs > span:hover, .breadcrumbs > span:last-child{
    color: var(--color-element) !important;
}

.client_status.active {
    color: green;
}

.client_status.disable {
    color: red;
}


/*---TarifCalculator---*/

/*#calc:before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("https://store.epcinfo.ru/assets/img/epcinfo_c.png");
    filter: opacity(0.1);
}*/

#calc #calc-wrapper {
    z-index: 1;
    grid-column: 2/3;
    width: 100%;
}

#tarif-calc {
    max-width: 600px;
    max-height: 780px;
    align-items: center;
    padding: 20px;
    background: #f5f4f6;
    /*border-radius: 15px;*/
    font-size: 1rem;
    /*min-height: 770px;*/
    transition: 0.5s;
    /*box-shadow: 5px 5px 10px 3px #ddd;*/
}

/*.tarif-calc > div:first-child {

    display: grid;
    grid-template: 1fr / 1fr 1fr;
    align-items: center;
}

.tarif-calc > div:first-child button {
    border: none;
    position: relative;
    font-size: 1.2em;
    background: transparent;
    padding: 20px;
    cursor: pointer;
}*/

/*#tarif-calc > div:first-child button:first-of-type:before {
    !*    box-shadow: 0 10px 15px -10px #b5b5b5;*!
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 1px;
    border-right: 2px solid #ddd;
}*/

.calc-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /*display: grid;
    grid-template: repeat(4,auto) / 1fr;
    align-items: center;
    text-align: center;
    grid-gap: 30px;*/
    height: 100%;
    padding-top: 20px;

}

.calc-content > div:not(:first-child){
    display: grid;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}

.calc-days {
    display: grid;
    grid-template: 1fr 1fr / repeat(3,minmax(auto,100px));
    grid-gap: 20px;
}

.calc-days > div {
    width: 100px;
    height: 90px;
}

.calc-desc {
    text-align: center;
    /*grid-column: 3/4;*/
    display: grid;
    grid-template: repeat(3,auto) / 1fr fit-content(500px) 1fr;
    align-items: center;
    justify-items: center;
    font-size: 3rem;
    width: 100%;
    grid-gap: 20px;
    padding: 30px 0 0 0;
    opacity: 0;
    transform: translateY(-50px);
    visibility: hidden;
    transition: 0.7s;
}

.calc-desc.active{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
}

.calc-desc > div, .calc-desc > button{
    grid-column: 2/3;
}

.calc-desc div:first-of-type, .check-vin1-desc div:first-of-type{
    font-weight: bold;
}

.check-vin1-desc {
    opacity: 0;
    transform: translateY(-50px);
    visibility: hidden;
    text-align: center;
    display: grid;
    align-items: center;
    justify-items: center;
    font-size: 3em;
    max-width: 600px;
    grid-gap: 20px;
    padding: 30px 0 0 0;
    transition: 0.7s;
}

.check-vin1-desc.active {
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
}

.check-vin1-content > img {
    width: 90% !important;
}

.check-vin1-content > img, #calc-wrapper {
    opacity: 0;
    transform: translateY(50px);
    visibility: hidden;
    transition: 0.7s;
}

.check-vin1-content > img.active, #calc-wrapper.active {
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
}

.check-vin1-search-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 2;
    row-gap: 20px;
}

.check-vin1-search-wrapper > *{
    opacity: 0;
    transform: translateY(50px);
    visibility: hidden;
    transition: 0.7s;
}

.check-vin1-search-wrapper .catalogs-content.show {
    display: flex !important;
}

.check-vin1-search-wrapper .catalogs-content {
    display: none;
    overflow: unset !important;
    background: none !important;
}

.check-vin1-search-wrapper .catalogs-content > div {
    background: rgba(255,255,255,0.2);
}

.check-vin1-search-wrapper .catalogs-content > div:hover {
    background: rgba(255,255,255,0.9) !important;
    color: gray;
}

.check-vin1-search-wrapper .catalogs-content > div:hover, .check-vin1-search-wrapper .catalogs-content .cats a{
    color: gray;
}

.check-vin1-search-wrapper .catalogs-content > div:hover, .check-vin1-search-wrapper .catalogs-content .cats a:hover{
    background: #efebf4;
}

.check-vin1-search-wrapper > *.active{
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
}

.check-vin1-search-wrapper > i {
    font-size: 4em;
}

.check-vin1-search-wrapper .title{
    font-size: 2em;
}

.check-vin1-search {
    width: 550px;
    border-radius: 30px;
    padding: 20px 30px;
    display: flex;
    background: white;
    align-items: center;
}

.check-vin1-search i {
    font-size: 1.3em;
    color: gray;
}

.check-vin1-search i.fa-times {
    margin-right: 5px;
    display: none;
}

.check-vin1-search input{
    background: transparent;
    border: none;
    flex: 1;
    width: 100%;
    font-size: 1.1em;
    padding: 0 !important;
}

.check-vin1-search:focus, .check-vin1-search:hover{
    box-shadow: 0 0 5px 0 #797dd5;
}

.check-vin1-search:focus i, .check-vin1-search:hover i{
    color: #797dd5;
}

.calc-desc div:nth-child(2), .check-vin1-desc div:nth-child(2){
    font-size: 0.5em;
    font-family: "Open Sans", sans-serif;
}

.calc-desc > button {
    font-size: 0.5em;
    border-radius: 30px;
    padding: 10px 30px;
    cursor: pointer;
    margin-top: 20px;
    white-space: nowrap;
}

.calc {
    /*padding: 20px;*/
    /*min-height: calc(100vh - 60px);*/
    padding: 100px 20px;
}



#new-calc-wrapper {
    position: fixed;
    width: 100%;
    height: 100dvh;
    background-color: white;
    display: grid;
    place-items: center;
    z-index: 101;
    padding: 40px;
}

#new-calc-close {
    position: fixed;
    right: 30px;
    top: 30px;
    font-size: 2rem;
    opacity: 0.7;
}

#new-calc-content {
    display: grid;
    gap: 60px;
}


#new-calc-content .calc-tarif-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

#new-calc-content .money-input {
    display: none;
    justify-items: center;
}

#new-calc-content .total-days{
    display: grid;
    justify-items: center;
}

#new-calc-content .money-input div, #new-calc-content .total-days div{
    border: 1px solid #ddd;
    border-radius: 15px;
    width: 250px;
    padding: 12px 15px;
    font-size: 1.7rem;
    display: flex;
    gap: 10px;
    align-items: baseline;
}

#new-calc-content .money-input-range {
    display: grid;
    gap: 50px;
}

#new-calc-content .money-input-range input {
    width: 100%;
    accent-color: var(--color-element);
    position: relative;
}

#new-calc-content .money-input-range input[type="range"]::-webkit-slider-thumb,
#new-calc-content .money-input-range input[type="range"]::-moz-range-thumb {
    cursor: pointer;
    z-index: 150;
}

#new-calc-content .money-input-range div:not(.input-range-wrapper){
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: var(--color-element);
    font-size: 2rem;
}

#new-calc-content .money-input-range div.input-range-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    flex-direction: column;
}

#new-calc-content .money-input-range div.input-range-wrapper .steps-wrapper {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50px;
    background-color: #a8a8a8;
    z-index: 50;
    pointer-events: none;
    top: 50%;
    transform:  translateY(-50%);
}

#new-calc-content .money-input-range div.input-range-wrapper .steps-wrapper .steps{
    position: relative;
}

#new-calc-content .money-input-range div.input-range-wrapper .steps-wrapper .steps:before{
    position: absolute;
    content: attr(data-price) ' ' attr(data-rub);
    color: #333;
    font-size: 1.5rem;
    white-space: pre;
    bottom: calc(100% + 10px);
}

#new-calc-content .money-input-range div.input-range-wrapper .steps-wrapper:nth-child(even) .steps::before{
    top: calc(100% + 20px);
}

/*datalist {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr;
    width: 200px;
}*/

option {
    padding: 0;
}

#new-calc-content .money-input-range div.input-range-wrapper .steps-wrapper.first-step .steps:before{
    left: -5px;
}

#new-calc-content .money-input-range div.input-range-wrapper .first-step {
    left: 2px;
}

#new-calc-content .money-input-range div.input-range-wrapper .second-step {
    left: 2px;
}

#new-calc-content .money-input-range div.input-range-wrapper .fifth-step {
    right: 0;
}

#new-calc-content .money-input div input, #new-calc-content .total-days div input{
    border: none;
    width: 100%;
    font-size: 1.7rem;
}

#new-calc-content .checkbox-element{
    width: 300px;
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 12px 15px;
    font-size: 1.7rem;
    font-weight: bold;
}

#new-calc-content .checkbox-element span{
    flex: 1;
    text-align: left;
}

#new-calc-content p{
   text-align: center;
    font-weight: bold;
    font-size: 2.8rem;
    margin-bottom: 20px;
}

#new-calc-content .checkbox-element i{
    cursor: pointer;
}

#new-calc-content .total-days{
    margin: auto;
    display: grid;
    align-items: center;
}

#new-calc-content .total-days span{
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-element);
}

@media (max-width:600px) {
    #new-calc-content .checkbox-element {
        padding: 7px 15px;
    }

#new-calc-content .money-input{
  display: grid;
}

    #new-calc-content .money-input > div{
        padding: 7px 15px;
        font-size: 1.4rem;
    }

    #new-calc-content .money-input input{
        font-size: 1.4rem;
    }

    #new-calc-content .checkbox-element span{
    font-size: 1.1rem;
}

    #new-calc-content .money-input-range{
        display: none;
    }
    #new-calc-content {
        gap: 10px;
    }

    #new-calc-content .total-days {
        display: flex;
        align-items: baseline;
        gap: 15px;
    }

    #new-calc-content .total-days span {
        font-size: 1.7rem;
    }

#new-calc-close {
    top: 10px;
    right: 20px;
}

    #new-calc-wrapper {
        padding: 20px 10px 20px 10px;
    }

    .calc-tarif-wrapper {
        gap: 7px !important;
    }

    #new-calc-content p {
        font-size: 1.2rem;
        margin-bottom: 7px;
    }

    .card-wrapper.debit, .card-wrapper.rank {
        display: none;
    }

    #tarif-calc {
        font-size: 0.9rem;
    }
    .access-tarif-choice > div {
        padding: 10px 5px;
    }

    .switch-vin {
        grid-template: 1fr 1fr / repeat(2,1fr);
        grid-gap: 20px;
    }

    .calc-desc {
        font-size: 2rem;
    }
}



@media (max-width:450px) {
    #tarif-calc {
        font-size: 0.8rem;
    }

    .additions-switch > div {
        width: 80px;
        height: 40px;
        margin: 5px 0;
    }

    .additions-switch {
        flex-direction: column;
    }

    #tarif-calc {
        padding: 10px 5px;
    }

    .calc-days > div {
        width: 80px;
        height: 70px;
    }

    .switch-vin > div span:last-of-type{
        align-self: flex-end;
    }

    .calc-desc {
        font-size: 1.5rem;
    }

    .calc {
        padding: 20px 10px;
    }
}

/*---TarifCalculator-END-*/

/*START--balance---*/
.popolnenie p:not(:first-child) {
    justify-self: center;
    text-align: center;
}

.popolnenie-header {
    display: flex !important;
    justify-content: space-between;
    width: 100%;
}

.popolnenie-header button{
    padding: 8px 14px;
    background: var(--color-element);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 0.75em;
    cursor: pointer;
    width: max-content !important;
}

.popolnenie .desc p span{
    color: red;
    font-weight: 600;
    font-size: 1.2rem;
}

.qr-choice {
    display: none;
    position: relative;
    text-align: center;
}

.qr-choice.active {
    display: block !important;
}

#qr-choice img{
    width: 100%;
    width: 250px;
}

#qr-choice i.close{
    position: absolute;
    left: calc(100% + 10px);
    top: 3px;
    font-size: 1.2rem;
}

#lico-choice {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#lico-choice a {
    padding: 15px;
    border: 2px solid #333333;
    margin: 15px;
    width: 150px;
    height: 200px;
    text-align: center;
    border-radius: 5px;
    background-color: transparent;
    color: #333333;
    transition: 0.1s;
}

#lico-choice a img {
    margin-bottom: 10px;
}

#lico-choice a span {
    font-weight: 600;
}

#lico-choice a:hover {
    background-color: var(--color-element);
    color: white;
    cursor: pointer;
    border: 2px solid var(--color-element);;
}

#lico-choice a:hover img{
    filter: invert();
}

.balance-wrapper {
    display: grid;
    font-size: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 30px;
}

.balance-wrapper > div, .balance-history {
    background: var(--bg-element) !important;
}

.balance-content, .balance-history, .popolnenie, .ostatok-wrapper, .promocode-wrapper {
    background: #f6f6f6;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;
}

.ostatok-wrapper{
    display: grid;
    grid-template-rows: 50px;
    grid-gap: 15px;
    height: 300px;
}

.ostatok-wrapper > div:nth-child(2){
    font-size: 4em;
    margin: 0 0 10px 0;
    display: grid;
    /* place-items: center; */
    grid-template-columns: fit-content(50px) 20px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ostatok-wrapper > div:nth-child(2) i {
    font-size: 0.8em !important;
}

.popolnenie, .promocode-wrapper{
    display: grid;
    grid-template-rows: 40px auto 50px;

    grid-auto-rows: auto;
    justify-items: center;
    align-items: center;
    height: 300px;
}

.popolnenie > p, .promocode-wrapper > p{
    justify-self: flex-start;
}
.popolnenie > div:first-child,  .promocode-wrapper > div {
    display: grid;
    place-items: center;
}

.popolnenie > div > div:first-child, .promocode-wrapper > div > div:first-child {
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
    width: 280px;
}

.popolnenie > div > div:first-child {
    display: grid;
    grid-template-columns: 55% 38% 7%;
    align-items: center;
}

.popolnenie > div > div:nth-child(2) {
    display: none;
}


.popolnenie input, .promocode-wrapper input{
    border: none;
    background: transparent;
    font-size: 1.2em;
    padding: 5px 10px;
    position: relative;

}

.promocode-wrapper input{
    text-align: center;
    width: 100%;
}

.popolnenie input::placeholder, .promocode-wrapper input::placeholder{
    font-size: 0.8em;
    color: #777;
}


.popolnenie .bonus, .popolnenie.billing .bonus{
    color: #13b66f;
    font-size: 1em;
    visibility: hidden;
    margin: 0 10px;
}

.popolnenie .bonus.show, .popolnenie.billing bonus.show{
    visibility: visible;
}

.popolnenie button, .promocode-wrapper button {
    width: 250px;
}

/*.balance-sum {
    font-size: 3em;
}*/

#promo-sum {
    font-size: 3em;
}

.add-promocode {
    position: relative;
    display: grid;
    grid-gap: 10px;
    width: 100%;
}

.promocode-price {
    display: none;
    justify-content: space-between;
    border: none !important;
    justify-content: center;
}

.promocode-price.show {
    display: flex;
}

.promocode-btn {
    width: 100%;
}

/*#promocode {
    position: absolute;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 0px #777;
    visibility: hidden;
    background: #797dd5;
    top: -40px;
    left: 50%;
    display: flex;
    align-items: center;
}

#promocode input{
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    background: #f6f6f6;
    font-size: 1em;
    color: #777;
}

#promocode:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top: 10px solid #797dd5;
}

#promocode button {
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    background: #13b66f;
    margin-left: 5px;
    color: white;
    width: 100%;
    height: auto;
    font-size: 1em;
}

#promocode.active {
    animation: toUp 0.4s forwards;
}*/

.balance-history {
    /*grid-column: span 6;*/
    margin-top: 30px;
}

/*---balance-END*/

@keyframes errormes {
    0%{ right: -200px;}
    10%{ right: 0;}
    90%{ right: 0;}
    100%{ right:-250px;}
}
#errorMessage {
    position: fixed;
    padding: 10px 15px;
    word-break: break-word;
    color: white;
    border-radius: 5px 0 0 5px;
    width: 250px;
    right: -250px;
    bottom: 100px;
    animation: errormes 5s forwards;
    z-index: 50001;
    text-align: center;
}

.checkbox-switch {
    width: 100%;
    margin-top: 30px;

}

.checkbox-switch p{
    font-size: 1.3em;
    margin-bottom: 15px;
    grid-column: span 2;
}

.checkbox-switch > div {
    /*display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 15px 0;*/
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    width: 90%;
    margin: 5px 0;
    align-items: center;
    justify-content: space-between;
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 30%);
    padding: 15px 10px;
    grid-gap: 10px;
}

.checkbox-switch > div:hover {
    background: white;
}

.checkbox-switch > div span{
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkbox-switch > div span:first-of-type {
    grid-column: span 2;
}

.checkbox-switch > div span:last-of-type{
    font-size: 1em;
    color: #b3b3b3;
}

.checkbox-switch .mycheckbox {
    justify-self: flex-end;
    order: 2;
}

.mycheckbox {
    -webkit-appearance: none;
    height: 24px;
    width: 40px;
    border-radius: 30px;
    position: relative;
    transition: 0.3s;
    border: none;
    cursor: pointer;
    background: #ddd;
}

.mycheckbox:checked {
    background: #797dd5;
    border: none;
}

.mycheckbox:before {
    content: '';
    position: absolute;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    border-radius: 50%;
    width: 20px;
    transition: 0.3s;
    background: #f6f6f6;
    border: none;
}

.mycheckbox:checked:before {
    left: 18px;
    border: none;
}

.mycheckbox3 {
    -webkit-appearance: none;
    height: 32px;
    width: 55px;
    border-radius: 30px;
    position: relative;
    transition: 0.3s;
    border: none;
    cursor: pointer;
    background: #ddd;
}

.mycheckbox3:checked {
    background: #797dd5;
    border: none;
}

.mycheckbox3:before {
    content: '';
    position: absolute;
    height: 28px;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    border-radius: 50%;
    width: 28px;
    transition: 0.3s;
    background: #f6f6f6;
    border: none;
}

.mycheckbox3:checked:before {
    left: 25px;
    border: none;
}

/*start--mycheckbox2--*/

.mycheckbox2 {
    -webkit-appearance: none;
    margin-right: 10px;
    width: 17px;
    height: 17px;
    border-radius: 3px;
    border: 1px solid #777;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
    vertical-align: middle;
}

.mycheckbox2:before {
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    color: #f6f6f6;
}

.mycheckbox2:checked {
    background: #797dd5 ;
}
.mycheckbox2:checked:before {
    visibility: visible;
}

/*--mycheckbox2--end*/

.range-switch {
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    width: 90%;
    grid-column-gap: 40px;
    grid-row-gap: 20px;
}

.range-switch input{
    width: 100%;
    border: none;
    background: transparent;
}

.range-switch input::-webkit-inner-spin-button{
    opacity: 1;
}

/*
.range-switch .range-users input[type=number]::-webkit-inner-spin-button,
.range-switch .range-users input[type=number]::-webkit-outer-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

.range-switch .range-users input[type=number]
{
    -moz-appearance: textfield;
}
*/

.range-switch .range-users i{
    color: #777;
    margin-right: 10px;
}

/*.myrange {
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    border-radius: 30px;
    background: #ddd;
    cursor: pointer;
    grid-column: span 2;
}

.myrange::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 40px;
    width: 15px;
    border-radius: 5px;
    background: #797dd5;
    cursor: pointer;
    border: none;
}

.myrange::-moz-range-thumb {
    height: 40px;
    width: 15px;
    border-radius: 5px;
    background: #797dd5;
    cursor: pointer;
    border: none;
}*/

/*.myrange::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
}*/

/*.myrange::-moz-range-progress {
    background-color: #43e5f7;
}
/* .myrange::-moz-range-track {
    background-color: #9a905d;
}
.myrange::-ms-fill-lower {
    background-color: #43e5f7;
}
.myrange::-ms-fill-upper {
    background-color: #9a905d;
}
*/
.range-summa, .range-users, .check-tarif, .show-bonus, .range-days {
    text-align: left;
    align-self: flex-start;
    transition: 0.5s;
    height: 70px;
}

.updown {
    display: flex;
    flex-direction:  column;
    height: 30px;
    width: 25px;
}

.updown > div {
    position: relative;
    height: 50%;
}


.updown .up-button:before {
    position: absolute;
    content: "\003E";
    transform: rotate(-90deg) translate(-50%,-50%);
    top: 50%;
    left: 50%;
    transform-origin: top;
}

.updown .down-button:before {
    position: absolute;
    content: "\003C";
    transform: rotate(-90deg) translate(-50%,-50%);
    top: 50%;
    left: 50%;
    transform-origin: top;
}

.range-summa input, .range-users input, .check-tarif input, .show-bonus span, .range-days input {
    border: none;
    background: transparent;
    font-size: 1.2em;
    width: 100%;
}

.range-summa > div > div, .range-users > div > div, .check-tarif > div > div, .show-bonus > div > div, .range-days > div > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
    font-size: 1.3em;
}

.range-days span{
    margin-left: 15px;
}

.range-summa > div i , .range-users > div i, .check-tarif > div i, .show-bonus > div i, .range-days > div i {
    font-size: 0.8em;
}

.access-confirm > div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    text-align: left;
}

.povinut_sum, .offline_sum, .all_sum {
    font-size: 1.2em;
}

.all_sum {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: first baseline;
}

.all_sum span{
    margin: 0;
}

.all_sum span:nth-child(2) {
    font-size: 0.6em;
}

.show-bonus > div > span {
    color: #13b66f;
}

.show-bonus .help, .range-days .help {
    margin-left: 10px;
    font-size: 1.1em;
    position: relative;
    color: #797dd5;
}

.bonus-info, .days-info{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #797dd5;
    max-width: 350px;
    border-radius: 5px;
    padding: 10px 20px;
    color: white;

}

.bonus-info ol, .days-info ol{
    padding-left: 20px;
}

.bonus-info li, .days-info li{
    list-style-type: decimal;
    margin: 10px 0;
}

.bonus-info h3, .days-info h3 {
    margin: 15px 0;
}


/*Start--PayStatus---*/
.paystatus-wrapper {
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    box-shadow: 5px 5px 10px 0px #777;
    width: 500px;
    height: 350px;
    background: white;
    z-index: 3000;
}

.paystatus-wrapper i{
    font-size: 8rem;
    margin-bottom: 20px;
}

.paystatus-wrapper button{
    width: 100px;
    margin-top: 20px;
    font-size: 0.7em;
}

/*---PayStatus--END*/

/*Start--Manager---*/
.manager-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px ;
    justify-content: center;
}

.manager-wrapper > button{
    width: 300px;
}

.manager-table td{
    overflow: hidden;
}

.manager-table .comment{
    max-width: 500px;
    max-height: 70px;
    word-break: break-word;
    white-space: break-spaces;
    overflow: auto;
}

.manager-table input{
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
}

.vk-button, .tg-button {
    background-color: #0077FF;
    border: none;
    color: white;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 0.9rem;
    position: relative;
    width: 100%;
}

.divider {
    border-bottom: 1px solid #ddd;
    position: relative;
    margin: 20px auto;
    width: 90%;

}

.auth-content .divider:before {
    content: 'ИЛИ';
    background: white;
    padding: 10px;
    color: gray;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);}

.vk-button::before {
    content: '';
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("/assets/img/VKontakte-Emblem_150.png");
    width: 40px;
    height: 20px;
    z-index: 10;
}

.tg-button::before {
    content: '';
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("/assets/img/tg_logo.webp");
    width: 30px;
    height: 30px;
    z-index: 10;
}

#tg-auth {
    margin-top: 10px;
    background-color: #28a4e3 !important;
}

.manager-table .phone, .manager-table .name{
    max-width: 120px;
}

.manager-table .second_name, .manager-table .surname, .manager-table .email{
    max-width: 160px;
}


.manager-table div {
    background: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.manager-table .desc{
    border-radius: 5px;
    padding: 10px;
    word-break: break-word;
}

.manager-table .coln{
    width: 30%;
}

/*---Manager--End*/

/*Start--card---*/

.card-wrapper {
    border-radius: 5px;
    overflow: auto;
    display: grid;
    grid-template: 70px fit-content(100px) / 1fr;
    align-items: center;
    padding: 0 15px 15px 15px;
    background:  var(--bg-element);
    visibility: hidden;
    opacity: 0;
    /*transform: translate(5px,5px);*/
    font-size: 1rem;
    grid-gap: 10px;
    box-shadow: 0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;
}

.card-wrapper.balance {
    max-width: 300px;
}

.card-content.balance {
    font-size: 4em;
}

.card-content.account {
    display: grid;
    grid-gap: 25px;
}

.card-wrapper.account {
    overflow: unset !important;
}

#company-name {
    font-size: 0.8em;
}

.card-wrapper.account .access-btn1 {
    width: 200px;
    justify-self: center;
}

.card-content.account > div{
    display: grid;
    grid-template-columns: 70px 1fr;
    /*grid-template-columns: repeat(auto-fit,minmax(250px,1fr));*/
    grid-gap: 20px;
    align-items: center;
}


.card-content.account p {
    color: #333;
}

.card-wrapper.debit {
    grid-column: span 2;
}

.card-content.debit, .card-content.debit {
    height: 500px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.card-content.debit::-webkit-scrollbar, .card-content.debit::-webkit-scrollbar {
    width: 0;
    background-color: #f9f9fd;
}

.card-wrapper.show{
    opacity: 1;
    visibility: visible;
    transition: 0.4s;
}

.card-header {
    text-align: left;
    /*height: 100%;*/
    display: flex;
    align-items: center;
    color: #333;
    font-size: 1.3em;
    font-weight: 600;
    justify-content: space-between;
}

.card-header button {
    float: right;
    padding: 8px 15px;
    background: var(--color-element);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 0.65em;
    cursor: pointer;
}


/*---card--End*/

/*Start--mini-card---*/

.mini-card-wrapper {
    font-size: 1rem;
    height: 180px;
    border-radius: 5px;
    background-color:  var(--bg-element);
    display: grid;
    grid-template: repeat(3,1fr) / 1fr;
    grid-gap: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;
}

.mini-card-wrapper:hover {
    background-color: #797dd5;
    transform: translate(-3px, -7px);
    box-shadow: 5px 5px 20px 0px rgb(0 0 0 / 40%);
}


.mini-card-wrapper:hover .mini-card-content {
    color: white;
}

.mini-card-wrapper:hover .mini-card-content i{
    color: white;
}


.mini-card-wrapper:hover .mini-card-footer {
    color: rgba(255,255,255,0.8);
}

.mini-card-content {
    font-size: 3em;
    grid-row: span 2;
    align-self: end;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mini-card-content i{
    font-size: 1.4em;
    margin-left: 10px;
}


.mini-card-footer {
    font-size: 1.1em;
    color: #949494;
}

.mini-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-gap: 30px;
}
/*---mini-card--End*/

/*Start--infoMEssage---*/

#info, #info-bonus
{
    display: block !important;
}

#info-wrapper {
    text-align: center;
    line-height: 1.4;
}

#info-wrapper a {
    color: red !important;
    font-size: 1.2em;
}

#infoMessage, #info-wrapper{
    font-size: 1rem;
    display: grid;
    grid-gap: 20px;
    padding: 30px;
    z-index: 4000;
    background: #f6f6f6;
    max-width: 350px;
    min-height: 250px;
    align-items: center;
    border-radius: 10px;
    animation: toDown 0.4s forwards;
}

#info-wrapper.push-news{
    max-width: 900px;
}

.info-wrapper {
    font-size: 1rem;
    display: grid;
    grid-gap: 20px;
    padding: 30px;
    z-index: 4000;
    background: #f6f6f6;
    width: 320px;
    min-height: 250px;
    align-items: center;
    border-radius: 10px;
}

#infoMessage form > div {
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#infoMessage form button {
    width: 100%;
    margin-top: 10px;
}

#infoMessage form i {
    color: #c3c3c3;
    font-size: 1.2em;
}

#infoMessage input {
    border: none;
    flex: 1;
    background: transparent;
    padding: 10px;
    font-size: 1em !important;
}

#infoMessage .access-btndel {
    margin: 0;
}

/*---infoMessage--End*/


/*Start--loader---*/

.loader-wrapper {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.65);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
}

.preloader {
    z-index: 11000;
}

.loader {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.loader div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #797dd5;
    animation: loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loader div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
}
.loader div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
}
.loader div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
}
@keyframes loader {
    0% {
        top: 8px;
        height: 64px;
    }
    50%, 100% {
        top: 24px;
        height: 32px;
    }
}

/*---loader--End*/

/*Start--profile---*/


.profile-wrapper {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) 1fr 1fr;
    grid-gap: 20px;
}


.profile-wrapper .card-wrapper.settings {
    grid-column: span 2;
}

.profile-wrapper .card-content.settings{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 40px;
}

.profile-wrapper .card-content.settings .vk-profile{
    width: min-content;
}

.profile-wrapper .card-content.settings .vk-profile div{
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-wrapper .card-content.settings .vk-profile p, .profile-wrapper .card-content.settings .vk-profile a{
    white-space: nowrap;
}

.profile-wrapper .card-content.settings .vk-profile a{
    color: #797dd5;
}

.profile-wrapper .card-content.settings .vk-profile a:hover{
    color: #9497da;
}

/*.profile-wrapper .card-content.settings > div{
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}*/

.profile-wrapper .card-content.settings form {
    pointer-events: none;
    display: flex;
    align-items: center;
    position: relative;
}


.profile-wrapper .card-content.settings form .form-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    z-index: 1000;
    display: block;
}


.profile-wrapper .card-content.settings .access-btn2 {
    height: 30px;
    padding: 0 20px !important;
    margin-left: 5px;
    box-shadow: none;
}

/*.profile-wrapper .card-content.settings form input {
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    background: transparent;
    font-size: 1rem;
}*/

.profile-wrapper .card-content.settings .low-balance > div {
    display: flex;
    align-items: center;
}

.profile-wrapper .card-content.settings .low-balance > p, .profile-wrapper .card-content.settings .vk-profile > p {
    margin-bottom: 10px;
    color: #777;
}

.profile-wrapper .card-content.settings .low-balance > div > input{
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 10px;
}

.profile-wrapper .card-content.settings .low-balance > div > input:checked + form{
    pointer-events: auto;
}

.profile-wrapper .card-content.settings .low-balance > div > input:checked + form .form-mask{
    display: none;
}

/*---profile--End*/

/*Start--catalogs---*/

#catalogs-wrapper {
    z-index: 4000;
    max-height: 500px;
    max-width: 700px;
}

#catalogs {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: white;
    overflow: auto;
}

#catalogs > p {
    margin-bottom: 20px;
    font-size: 1.5rem;
}

#catalogs > div {
    display: grid;
    grid-gap: 20px;
}

#catalogs .card > div {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#catalogs .card > p {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

#catalogs .card {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/*---catalogs--End*/


/*Start--check-vin---*/

/*#check-vin {
    min-height: calc(100vh - 60px);
    display: grid;
    place-items: center;
}*/

#check-vin .content .search-vin {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border-radius: 30px;
    padding: 10px 25px;
    overflow: hidden;
    width: 95px;

}

@keyframes show_search_vin {
    0% {background: transparent;}
    30% {background: white; width: 95px;}
    80% {width: 500px; background: white; padding: 10px 25px;}
    100% {width: 500px; background: white; padding: 10px 25px;  box-shadow: 5px 8px 10px -2px rgba(0, 0, 0, 0.2); transform: translate(-10px,-10px);}
}

@keyframes show_search_vin_input {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#check-vin .content .search-vin.active {
    animation: show_search_vin 1.5s forwards;
}

#check-vin .content .search-vin.active input{
    animation: show_search_vin_input 0.3s forwards;
    animation-delay: 1.3s;
}

#check-vin .content .search-vin input {
    opacity: 0;
    border: none;
    font-size: 1.3rem;
    background: transparent;
    width: 100%;

}

#check-vin .content .search-vin input::placeholder {
    color: #777;
}


#check-vin .content .search-vin i.active {
    filter: none;
    color: #777;
    transition: 0.75s;
}

#check-vin .content .search-vin i {
    font-size: 3rem;
    cursor: pointer;
    color: #777;
}

/*---check-vin--End*/


@keyframes show_tooltip {
    0% {opacity: 0; visibility: hidden; transform: translateY(10px);}
    10% {opacity: 1; visibility: visible; transform: translateY(0px);}
    90% {opacity: 1; visibility: visible; transform: translateY(0px);}
    100% {opacity: 0; visibility: hidden; transform: translateY(10px);}
}
/*
@keyframes show_tooltip {
    0% {opacity: 0; visibility: hidden; transform: translateY(10px);}
    100% {opacity: 1; visibility: visible; transform: translateY(0px);}
}*/


.tooltip {
    max-width: 350px;
    border-radius: 5px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.85);
    color: white;
    font-size: 0.9rem;
    position: fixed;
    visibility: hidden;
    animation: show_tooltip 4s forwards;
}

.tooltip:before {
    position: absolute;
    content: '';
    border: 6px solid transparent; border-top: 6px solid rgba(0,0,0,0.85);
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/*Start--Footer---*/

.footer{
    /*min-height: calc(100vh - 60px);*/
    width: 100%;
    /*background: rgb(51, 51, 51);*/
    background: #514f4f;
    justify-content: center;
    padding: 20px;
    display: grid;
    color: white;
    font-size: 1rem;
    place-items: center;
}

#footer-wrapper {
    width: 100%;
    padding: 20px;
    display: grid;
    /*grid-template: minmax(200px, 500px) /  repeat(2, minmax(350px ,600px));*/
    grid-template: minmax(200px, auto) /  repeat(2, minmax(350px ,600px));
    align-items: flex-start;
    grid-gap: 20px;
}

#footer-wrapper > div {

    width: 100%;
}

#footer-desc {
    grid-column: span 2;
}

#footer-desc img {
    width: 100px;
}

#footer-contacts, #footer-mail, #footer-contacts > div {
    display: grid;
    grid-gap: 15px;
}

#footer-contacts > div > div{
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-gap: 10px;
    align-items: center;
}

#footer-contacts > div > div:not(:first-child){
    white-space: nowrap;
}

#footer-contacts > div > div i{
    font-size: 1.3em;
    text-align: center;
    color: #13b66f;
}

#footer-mail > form {
    display: grid;
    grid-gap: 15px;
    grid-template: minmax(50px,200px) repeat(3, 40px) / repeat(3, 1fr);
}

#footer-mail > form > textarea, #footer-mail > form > p, #footer-mail > form > button{
    grid-column: span 3;
}

#footer-mail > form > textarea, #footer-mail > form > input, #footer-mail > form > button {
    border-radius: 5px;
    border: none;
    width: 100%;
    padding: 0 15px;
}

#footer-mail > form > button {
    font-size: 1.2em;
    padding: 8px;
}

#footer-mail > form > textarea {
    padding: 15px;
}

.footer-contacts img
{
    width: 24px;
    filter: invert();
    cursor: pointer;
    margin-right: 10px;
    opacity: 0.7;
}

.phone
{
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.phone span{
    margin-left: 10px;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.7);
}

.email
{
    display: flex;
    flex-direction: column;
}

.email__element
{
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.email__element span
{
    margin-left: 10px;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.7);
}

.footer-contacts logo
{
    flex: 1 1 33.333%;
}

.footer-content .logo h2
{
    color: rgba(255,255,255,0.7) !important;
}

.social
{
    display: flex;
    align-items: center;
    flex: 1 1 33.333%;
    justify-content: center;
}

.social img
{
    filter: invert();
    opacity: 0.7;
    width: 24px;
    height: 24px;
    margin-right: 35px;
    cursor: pointer;
    transition: 0.3s;
}

.social img:hover
{
    transform: scale(1.2);
    transition: 0.3s;
}

/*---Footer--End*/


/*Start--Chat---*/
#chat-wrapper {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: none;
}

#chat {
    height: 550px;
    width: 450px;
    display: grid;
    grid-template-rows: 60px 1fr;
    transition: 0.2s;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 10px 15px 0px rgba(0,0,0,0.3);
    font-size: 1rem;
}

.chat-header {
    color: white;
    background-color: #13b66f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-radius: 5px 5px 0 0;
}

.chat-close {
    cursor:pointer;
}

.chat-main {
    border-top: none !important;
    background-color: white;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 80px;
    overflow: hidden;
}

.chat-message {
    display: grid;
    grid-template: 1fr 25px / 1fr 30px ;
    font-size: 1em;
    padding: 7px;
}

.chat-message textarea {
    height: 100%;
    width: 100%;
    border: none;
    resize: none;

}

.chat-message textarea:focus {
    outline: none;
}

#mess-send {
    display: grid;
    place-items: center;
}

#mess-send i {
    font-size: 1.3em;
    color: rgba(0,0,0,0.5);
    cursor: pointer;
}

#mess-tools i {
    font-size: 1.1em;
    color: rgba(0,0,0,0.5);
    cursor: pointer;
}

#mess-tools {
    grid-column: span 2;
    display: flex;
    align-items: center;
    color: #333333;
}

.chat-content {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    /*background: url( http://store.epcinfo.ru/assets/img/chat-fon.png);*/
    background: #f5f4f6;
    /*background: linear-gradient(180deg, rgb(198, 234, 249) 0%, rgb(226, 235, 249) 100%);*/
}

#chat .chat-item {
    padding: 8px;
    border-radius: 5px;
    margin: 5px 0;
    max-width: 80%;
    position: relative;
    color: #333333;
    box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.3);
}

#chat .chat-item span{
    float: right;
    font-size: 0.7em;
    margin-left: 5px ;
}

#chat .item-in {
    align-self: flex-start;
    background-color: white;
}

#chat .item-in::after{
    position: absolute;
    content: '';
    left: -12px;
    width: 0;
    height: 0;
    border: 7px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    bottom: 0;
    border-color: transparent white white transparent;
}

#chat .item-out {
    align-self: flex-end;
    background-color: #cbfbca;

}

#chat .item-out::after{
    position: absolute;
    content: '';
    right: -12px;
    width: 0;
    height: 0;
    border: 7px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    bottom: 0;
    border-color: transparent transparent #cbfbca #cbfbca;
}
#upload_img {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.upload_img_name {
    margin-right: 7px;
}

.chat-error {
    color: red;
    transition: 0.3s;
    visibility: hidden;
}

.chat-error.active {
    visibility: visible;
}

#chat .lightbox {
    position: unset;
}

/*---Chat--End*/

/*Start--Chat---*/

.stat-wrapper {
    height: 100%;
    display: grid;
    grid-gap: 15px;
    grid-template-rows: fit-content(200px) fit-content(200px) fit-content(200px);
}

.stat-total {
    width: max-content;
}

.stat-total .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    font-size: 1.3rem;
}

.stat-table thead {
    position: sticky;
    top: 0;
    background: white;
}

.card-wrapper.stat {
    overflow: inherit;
}
.request-form {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.request-form * {
    font-size: 1rem;
}

.date-input {
    border-radius: 3px;
    border: 1px solid #ddd;
    display: flex;
    width: 250px;
    padding: 5px;
    align-items: center;
}

#stat-clients {
    display: none;
}

.date-input, #type-report, .custom-datalist, #stat-clients {
    height: 40px;
}

#type-report, .custom-datalist, #stat-clients {
    min-width: 150px;
}

#type-report, #stat-clients {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 3px;
}

.request-form .date-input input, .custom-datalist input {
    border: none;
    width: 100%;
    text-align: center;
}

.custom-datalist {
    position: relative;
    padding: 5px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
}

.custom-datalist > div.options{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ddd;
    background: white;
    max-height: 200px;
    overflow: auto;
}

.custom-datalist > div.options p{
    padding: 7px;
    cursor: pointer;
}
.custom-datalist > div.options p:hover{
    background: var(--color-element);
    color: white;
}

/*---Chat--End*/



@media screen and (max-width: 1600px) {
    .container{width: 100%;}
    /*.tarif-element{grid-column: 1/2}*/
    .tarif-content{grid-column: 2/3}
    .tarif-header {grid-column: 1/3}
    /*.tarif-wrapper {
        !*grid-template: repeat(4, minmax(auto, 200px)) / minmax(auto,1fr) minmax(auto,3fr)*!
        grid-template: fit-content(70px) repeat(4, minmax(auto, 170px)) / minmax(auto,1fr) minmax(auto,3fr);
    }*/

    .popolnenie, .promocode-wrapper {
        /*grid-column: span 3;*/
    }

    .ostatok-wrapper {
        /*grid-column: span 6;*/
        /*height: max-content;*/
        /*grid-template-rows: unset;*/
    }

    .ostatok-wrapper > div:last-child {
        /*font-size: 1.5em;*/
        /*margin: 0;*/
        /*justify-content: flex-start !important;*/
    }
}

@media (max-width:900px) {

    #footer-wrapper {
        grid-template: unset;
        grid-gap: 50px;
    }

    #footer-mail > form {
        grid-template: minmax(50px,200px) repeat(5, 40px) / 1fr;
    }

    #footer-mail > form > textarea, #footer-mail > form > p, #footer-mail > form > button {
        grid-column: unset;
    }

    .catalogs-content > div {
        width: 130px;
        height: 40px;
    }

    *[data-title]:hover::after {
        font-size: 0.9em;
    }

    .catalogs-left *[data-title]:hover::after {
        content: attr(data-title);
        position: absolute;
        bottom: calc(100% + 5px);
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0,0,0,0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 10px;
        max-width: 130px;
        white-space: break-spaces;
        overflow: hidden;
    }

    .header__menu-burger {
        display: block;
    }

    .header__menu {
        display: none;
    }

    .cabinet-right {
        padding: 10px;
    }
    .balance-wrapper {
        font-size: 0.8rem;
    }
    .profile-wrapper {
        grid-template-columns: 1fr !important;
    }
    .popolnenie, .promocode-wrapper {
        /*grid-column: span 6;*/
    }

    .catalogs-wrapper {
        grid-template: 70px minmax(70px,auto) 1fr / 1fr;

    }

    .catalogs-left {
        min-width: auto;
        grid-gap: 15px;
        overflow: visible;
    }

    #types-vehicles {
        gap: 20px;
    }

    #regions {
        gap: 10px;
    }

    #types-vehicles, #regions {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .catalogs-left #types-vehicles > div:hover, .catalogs-left #regions > div:hover{
        color: #335d82;
        background-color: transparent;
        border: none;
        transform: scale(1.1);
    }

    .catalogs-left #types-vehicles > div.active, .catalogs-left #regions > div.active{
        color: #335d82;
        background-color: transparent;
        border: none;
        transform: scale(1.1);
    }

    .catalogs-left #types-vehicles > div.active i, .catalogs-left #regions > div.active i{
        font-weight: bold;
    }

    .catalogs-left p{
        display: none;
    }

    .catalogs-left i{
        display: block;
    }

    .catalogs-wrapper .catalogs-content, .catalogs-wrapper .catalogs-header  {
        grid-column: unset;
    }

    .contact-wrapper {display: none !important;}

}


@media (max-width: 480px) {
    .billing-wrapper {
        width: 100%;
    }
    .whyus .content {
        grid-template: auto / repeat(2,110px) !important;
        justify-content: center;
    }
    .whyus .content i{
        font-size: 4em;
    }
    .catalogs-header input{
        width: 320px;
    }

    .whyus .title p, .about .title p, .check-vin .title p, .check-vin1 .title p{
        font-size: 2em;
        font-weight: 600;
    }

    .whyus, .check-vin, .check-vin1, .about {
        font-size: 0.8rem;
    }
    .whyus-item-desc p {
        font-size: 1em;
    }

    .whyus-item {
        width: 100%;
    }

    .whyus-item-img {
        display: none;
    }

    .whyus-item {
        grid-template-columns: unset;
    }
}

@media (max-width: 640px) {

    .check-vin1-content {
        row-gap: 50px !important;
    }

    .check-vin1-search {
        width: 330px;
        padding: 15px 20px;
    }

    .checkbox-switch > div span {
        font-size: 1.2em;
    }

    .whyus, .check-vin, .check-vin1, .about, .calc {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #whyus-content {
        grid-gap: 15px;
    }

    .whyus-item-img p {
        font-size: 6em;
    }

    .whyus-item-desc p {
        font-size: 1em;
    }

    #lico-choice a {
        padding: 10px;
        border: 2px solid #333333;
        margin: 10px;
        width: 120px;
        height: 160px;
        text-align: center;
        border-radius: 5px;
        background-color: transparent;
        color: #333333;
        transition: 0.1s;
    }

    #chat {
        width: 350px;
    }

    #hot-line-wrapper {
        right: 10px;
    }

    .chat-item {
        max-width: 90%;
    }

    .cabinet-left {
        max-width: 0px !important;
        min-width: 0px !important;
        transition: 0.5s;
        padding: 0;
        overflow: hidden;
    }

    .subscription-content {
        align-items: center !important;
    }

    .add-stuff {
        align-self: center;
    }

    .whyus .content {
        grid-template: auto / repeat(2,150px);
    }

    .about .content .card:last-child{
        grid-column: span 2;
    }

    .catalogs-wrapper {
        padding: 0;
    }
}


.contact-wrapper {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    width: 70px;
    z-index: 10;
    align-items: center;
    justify-content: center;
}

@keyframes show_contact {
    0% {opacity:0; transform: translateX(20px);}
    100% {opacity:1; transform: translateX(0px);}
}

.contact-wrapper i {
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    margin: 15px 0;
    cursor: pointer;
    font-size: 2rem;
    transition: transform 0.5s;
    color: rgba(255,255,255,0.5);

    /*animation: show_contact 1s forwards;*/
}

.contact-wrapper i.invert {
    filter: invert();
}

.contact-wrapper i.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
    transition: 0.5s;
}

.contact-wrapper i:hover {
    transform: scale(1.15) !important;
    transition: 0.2s;
}

.contact-wrapper i.scl {
    transform: scale(1.5) !important;
    transition: 0.6s;
}


/*Start--wizzard---*/

#wizzard-wrapper {
    position: fixed;
    z-index: 50000;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#wizzard-content{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    background: #f6f6f6;
    border-radius: 10px;
    padding: 15px 20px;
    display: grid;
}

#wizzard-content .wizzard-body {
    margin: 30px 0;
}

#wizzard-wrapper .add-user-wrapper {
    animation: unset;
    width: auto;
    padding: 0;
    height: unset !important;
}

.add-user-wrapper > div {
    border-bottom: 1px solid #ddd;
}

.chosen-tarifs {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chosen-tarifs > div {
    font-size: 0.8em;
    border-radius: 30px;
    padding: 7px 15px;
    background: var(--color-element);
    color: white;
}

#wizzard-content .btn-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#wizzard-content .checkbox-switch > div span {
    font-size: 1.1em;
}

#wizzard-content .checkbox-switch > div span:first-of-type {
    grid-column: span 2;
}

#wizzard-content .checkbox-switch .mycheckbox {
    order: 2;
}

#wizzard-content .checkbox-switch > div {
    width: 100%;
    margin: 0;
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 30%);
    padding: 5px 7px;
    grid-template: 1fr 1fr / 1fr 1fr;
}

#wizzard-content .checkbox-switch > div:hover {
    background: white;
}

#wizzard-content .checkbox-switch {
    display: grid;
    grid-gap: 15px;
    margin: 30px 0;
    grid-template-columns: 1fr 1fr;
}

#wizzard-content .access-confirm > div {
    margin: 0 !important;
}

/*---wizzard--End*/

.preloader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    place-items: center;
    display: grid;
    opacity: 1;
}

.preloader.fadeout{
    transition: opacity 0.3s;
    opacity: 0;
}

.preloader.hide {
    display: none;
}

@keyframes rotatelogo {
    0%{ transform: rotateY(0deg);}
    50%{ transform: rotateY(180deg);}
    100%{ transform: rotateY(0deg);}
}

.preloader.hide img{
    animation: none !important;
}

.preloader img{
    width: 100px;
    animation: rotatelogo 1s infinite;
}