@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?2rz7d5');
    src:  url('../fonts/icomoon.eot?2rz7d5#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?2rz7d5') format('truetype'),
    url('../fonts/icomoon.woff?2rz7d5') format('woff'),
    url('../fonts/icomoon.svg?2rz7d5#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    display: inline-block;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    color: #858a92;
    transition: .4s ease-in-out;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:active, :hover, :focus {
    outline: 0;
    outline-offset: 0;
    box-shadow: none!important;
}

.icon-eye:before {
    content: "\e90f";
}
.icon-locked:before {
    content: "\e90d";
}
.icon-profile:before {
    content: "\e90e";
}

.icon-avatar:before {
    content: "\e900";
}
.icon-briefcase:before {
    content: "\e901";
}
.icon-chat:before {
    content: "\e902";
}
.icon-check:before {
    content: "\e903";
    color: #96989c;
}
.icon-clipboard:before {
    content: "\e904";
}
.icon-danger:before {
    content: "\e905";
}
.icon-shield:before {
    content: "\e90d";
}
.icon-envelope:before {
    content: "\e906";
}
.icon-help-button:before {
    content: "\e907";
}
.icon-logout:before {
    content: "\e908";
}
.icon-padlock:before {
    content: "\e909";
}
.icon-pie-chart:before {
    content: "\e90a";
}
.icon-shopping-bag:before {
    content: "\e90b";
}
.icon-wallet:before {
    content: "\e90c";
}


@font-face {
    font-family: 'Gotham Pro Regular';
    src: url('../fonts/GothamPro.eot');
    src: url('../fonts/GothamPro.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GothamPro.woff') format('woff'),
    url('../fonts/GothamPro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'GothamPro-Bold';
    src: url('../fonts/GothamPro-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/GothamPro-Bold.otf')  format('opentype'),
    url('../fonts/GothamPro-Bold.woff') format('woff'), url('../fonts/GothamPro-Bold.ttf')  format('truetype'), url('../fonts/GothamPro-Bold.svg#GothamPro-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'GothamPro-Light';
    src: url('../fonts/GothamPro-Light.eot?#iefix') format('embedded-opentype'),  url('../fonts/GothamPro-Light.woff') format('woff'), url('../fonts/GothamPro-Light.ttf')  format('truetype'), url('../fonts/GothamPro-Light.svg#GothamPro-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro-Medium';
    src: url('../fonts/GothamPro-Medium.eot?#iefix') format('embedded-opentype'),  url('../fonts/GothamPro-Medium.woff') format('woff'), url('../fonts/GothamPro-Medium.ttf')  format('truetype'), url('../fonts/GothamPro-Medium.svg#GothamPro-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{
    font-family: 'Gotham Pro Regular';
    margin: 0;
    color: #ffffff;
    background: #000000;
}

a:hover{
    text-decoration: none;
}

*,:hover, :focus, :active{
    outline: 0;
    outline-offset: 0;
}

.orange-c, .orange-c:hover{
    color: #ff7300!important;
}

.orange-c:hover{
    text-decoration: underline;
}

.space-around{
    justify-content: space-around!important;
}

.header div.space-around .aside-nav-link:nth-child(2){
    margin: 0;
}

h2{
    font-size: 20px;
    font-family: 'GothamPro-Bold';
    text-align: left;
    margin-bottom: 35px;
}

h3{
    font-size: 13px;
    font-family: 'GothamPro-Bold';
    text-align: left;
    margin-bottom: 30px;
}

p{
    text-align: left;
    font-size: 15px;
    font-family: 'GothamPro-Light';
}
.white-x{
    color: #ffffff !important;
}

.white-3{
    color: rgba(255,255,255,.3);
}

.white-5{
    color: #fff;

    /*color: rgba(255,255,255,.5);*/
}

ul{
    list-style: none;
    padding-left: 0;
}

.flex{
    display: flex;
}

.no-wrap{
    white-space: nowrap;
}

.bb-input{
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .25)!important;
    background: transparent!important;
    border-radius: 0!important;
    padding-left: 0!important;
    padding-top: 10px!important;
}

.small-text{
    color: #858a92;
    font-size: 12px;
}

.form-group{
    position: relative;
}

.form-group .form-label{
    font-size: 15px;
}

.accept-color{
    color:#24a55a!important;
    letter-spacing: 1.5px;
}
.green-c{
    color: #24a55a !important;
}
.red-c{
    color: #cf5367!important;
}

.orange-c{
    color: #e26906;
}

.mb20{
    margin-bottom: 20px!important;
}

.mb30{
    margin-bottom: 30px!important;
}

.mb40{
    margin-bottom: 40px;
}

.mb50{
    margin-bottom: 50px;
}

.mt35{
    margin-top: 35px;
}

button:focus{
    outline: none;
}

.btn-modal{
    color: #858a92;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    background: transparent;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 20px;
}

.wrapper{
   overflow: hidden;
    background: #26282c;
    position: relative;
    height: 100vh;
}

.cat-name{
    font-size: 13px;
}

.cat-name .cat, .cat-name .name {
    display: inline-block;
}

.cat-name .cat{
    color: #858a92;
}

.cat-name .name{
    width: auto;
    margin-left: 3px;
}

.online{
    margin-left: 20px!important;
    position: relative;
    text-transform: uppercase;
    padding-left: 10px!important;
    width: 15%;
}


.online:before{
    content: ' ';
    position: relative;
    display: inline-block;
    width: 3px;
    background: rgb(141, 249, 58);
    height: 3px;
    border-radius: 50%;
    z-index: 9999;
    margin-right: 10px;
    line-height: 24px;
    vertical-align: middle;
    transform: translateY(-2px);
}

.offline{
    position: relative;
    text-transform: uppercase;
    padding-left: 10px!important;
    width: 15%;
}

.offline:before{
    content: ' ';
    position: relative;
    display: inline-block;
    width: 3px;
    background: rgb(207, 83, 103);
    height: 3px;
    border-radius: 50%;
    z-index: 9999;
    margin-right: 10px;
    line-height: 24px;
    vertical-align: middle;
    transform: translateY(-2px);
}

.grey-form{
    background: #26282c;
    color: #ffffff;
    padding: 40px 30px 30px;
    border-radius: 6px;
    overflow: hidden;
}

.grey-form .heading{
    font-size: 20px;
}

.grey-form *{
    width: 100%;
}

.grey-form pre{
    color:white;
}

.grey-form hr{
    width: 200%;
    margin-left: -50%;
    background-color: rgb(49, 51, 55);
}

.select2{
    margin-bottom: 20px;
    color: red;
    max-width: 100%;
    width: 100%!important;
}

.grey-form label{
    color: rgba(255,255,255,.35);
    font-size: 12px;
}
.sendpass-form .select2 .select2-selection{
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    padding: 12px;
    height: 100%;
    display: inline-block;
}

.grfield,
.grey-form .select2 .select2-selection,
.grey-form input,
.grey-form textarea{
    background: #1c1e21;
    color: #ffffff;
    font-size: 15px;
    padding: 12px;
    height: 100%;
}
.grfield,
.grey-form input, .grey-form textarea{
    border-color: transparent;
    border-radius: 6px;
    margin-bottom: 20px;
    height: 54px;
}

.grey-form textarea{
    height: initial;
}

.grey-form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgba(255, 255, 255, 0.302);
}
.grey-form input::-moz-placeholder { /* Firefox 19+ */
    color: rgba(255, 255, 255, 0.302);
}
.grey-form input:-ms-input-placeholder { /* IE 10+ */
    color: rgba(255, 255, 255, 0.302);
}
.grey-form input:-moz-placeholder { /* Firefox 18- */
    color: rgba(255, 255, 255, 0.302);
}


.select2-container--open .select2-dropdown--below{
    color: #ffffff;
    border-radius: 6px!important;
    border-color: transparent;
}

.select2-container--default .select2-selection--single{
    border-color: transparent;
    border-radius: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    top: 50%;
    transform: translateY(-50%);
}

.select2-container--open .select2-selection--single .select2-selection__arrow{
    transform: rotate(180deg) translateY(50%) translateX(50%);
}

.select2-container--open .select2-selection--single .select2-selection__arrow b:before,
.select2-container--open .select2-selection--single .select2-selection__arrow b:after{
    background: #ffffff;
}

.select2-selection__arrow b{
    border: 0!important;
    position: relative;
}

.select2-selection__arrow b:before, .select2-selection__arrow b:after{
    content: '';
    display: inline-block;
    width: 1px;
    height: 6px;
    background-color: rgb(92, 94, 97);
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: rgba(255, 255, 255, 0.302);
}

.select2-container--below .select2-selection--single .select2-selection__rendered{
    color:#ffffff;
}

.select2-selection__arrow b:after{
    transform: rotate(-45deg);
    left: -4px;
}

.select2-dropdown{
    background: #1c1e21;
    top: 10px;
}
.select2-search--dropdown{
    display: none;
}

.select2-container--default .select2-results>.select2-results__options{
    border-radius: 6px!important;
    border: 1px solid rgb(49, 51, 55);
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background: transparent;
    color: rgb(133, 138, 146);
}


.select2-container--default .select2-results__option[aria-selected=true]{
    background: transparent;
}

.basket .select2-results__options li:first-of-type,
.feedback .select2-results__options li:first-of-type{
    display: none;
}

.select2-results__option:hover{
    color: #e27c1c!important;
}

.tabCat-form .select2-container{
    width: 100%!important;
}

.tabCat-form .select2-selection{
    background: #26282c;
    height: 34px;
}

.tabCat-form .select2-container--default .select2-selection--single .select2-selection__rendered{
    color: rgba(255,255,255,1);
    font-size: 15px;
    padding-top: 3px;
}

.logo, .in-cart{
    display: inline-block;
    height: 48px;
    line-height: 48px;
    width: 78px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    background: #2b2e32;
    text-align: center;
}

.logo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 270px;
}

.logo .quantity{
    height: initial;
    position: relative;
    padding: 7px 18px;
    color: #ffffff;
    font-size: 12px;
    border-radius: 6px;
    background: #3c3e42;
    margin-right: 48px;
    line-height: 18px;
    max-height: 30px;
}

.logo .quantity:after{
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    display: inline-block;
    width: 25px;
    height: 24px;
    background-image: url(../images/watermelon.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.in-cart{
    left: auto;
    position: absolute;
    top: 0;
    right: 0;
    color: white;
}

.in-cart div{
    display: inline-block;
    width: 100%;
    color: #ffffff;
}

.in-cart span:after{
    content: '';
    width: 15px;
    height: 15px;
    margin-left: 13px;
    display: inline-block;
    background: url("../images/shopping-basket.png");
}

.aside .logo a{
    padding-left: 21px;
    height: 48px;
    width: 78px;
}

.header{
    position: fixed;
    left: 78px;
    right: 0;
    top: 0;
    z-index: 3;
    background: #26282c;
    height: 48px;
    transition: 0.3s ease-in-out;
}

.menu-show .header{
    left: 270px;
    transition: 0.3s ease-in-out;
}

.header-nav{
    line-height: 48px;
    font-size: 13px;
}

.header-nav a{
    color: #858a92;
    transition: 0.3s ease-in-out;
}

.header-nav a:hover{
    color: #ffffff;
    transition: 0.3s ease-in-out;
    font-family: 'GothamPro-Bold';
}

.header-nav a.active{
    color: #ffffff;
    font-family: 'GothamPro-Bold';
}

.header-nav a:after{
    display: block;
    content: attr(title);
    font-family: 'GothamPro-Bold';
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.header-nav .row{
    justify-content: center;
}

.header .aside-nav-link:nth-child(2){
    margin: 0 150px;
}

.menu-btn-row{
    display: flex;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    transition: .3s ease-in-out;
    overflow: hidden;
    position: relative;
}

.menu-show .menu-btn-row{
    background: #1d1e22;
    transition: .3s ease-in-out;
}

.aside-account{
    position:  relative;
    z-index: 1;
    left: -220px;
    transition: 0.3s ease-in-out;
}

.aside-account .packet{
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-top: 10px;
}

.aside-account .packet .packet-name{
    margin-right: 10px;
}

.aside-account .packet .turn{
    padding: 3px 10px;
    background: #141418;
    border-radius: 12px;
}

.menu-btn-row:after{
    opacity: 0;
    content: '';
    background: rgba(16,17,20,.4);
    position: absolute;
    left: 0;
    right: -120%;
    bottom: 0;
    top: 0;
    transform: rotate(-22deg);
    transition: .3s ease-in-out;
}

.menu-show .menu-btn-row:after{
    opacity: 1;
    transition: .3s ease-in-out;
}

.menu-show .aside-account{
    left: 27px;
    transition: 0.3s ease-in-out;
}

.pro{
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    padding: 2px 8px;
    background: #4a4b4e;
    border-radius: 6px;
    margin-right: 10px;
}
.aside-account .name{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
}

.header .row.two-items .aside-nav-link{
    margin: 0 100px;
}

.heading{
    text-align: center;
    /*color: rgba(255,255,255,.5);*/
    color: #fff;
    padding: 45px 0;
    z-index: 2;
    position: relative;
}

.heading p{
    width: 100%;
    margin-bottom: 0;
}

.heading p:first-child{
    margin-bottom: 0;
}

.icon-money:after,
.heading span:after, .bonus span:before{
    content: '';
    margin-left: 7px;
    transform: translateY(2px);
    display: inline-block;
    width: 25px;
    height: 24px;
    background-image: url("../images/watermelon.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.aside{
    background: #26282c;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 48px;
    bottom: 0;
    transition: .3s ease-in-out;
    padding-top: 0;
    padding-bottom: 45px;
}

.menu-show .aside{
    width: 270px;
    transition: .3s ease-in-out;
}


.menu-show .menu-btn span:before{
    left: 4px;
}

.menu-show .menu-btn span:after{
    left: 9px;
    transition: .2s ease-in-out;
}

.menu-show .aside a:hover{
    background: rgba(255,255,255,0.04);
    transition: .3s ease-in-out;
    color: #ffffff;
}

.menu-show .aside a:hover span{
    color: #ffffff;
}

.menu-show .aside a:hover .svg{
    background: transparent;
}

.aside-nav-group{
    margin-bottom: 4vh;
}

.aside HR{
border-top:1px solid rgba(255,255,255,.1);
}

.aside a{
    display: flex;
    align-items: center;
    line-height: 57px;
    width: 100%;
    transition: .3s ease-in-out;
    padding-left: 15px;
    overflow: hidden;
    position: relative;
}

.aside a:before{
    content: '';
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    background: #ff8300;
    display: inline-block;
    width: 3px;
    height: 100%;
    transition: .3s ease-in-out;
}

.aside a .svg{
    min-width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 0 solid transparent;
    transition: .4s ease-in-out;
}

.aside a .svg [class^="icon-"]{
    font-size: 18px;
    line-height: 50px;
}

.aside a:hover .svg{
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    transition: .4s ease-in-out;
}

.aside a.active .svg{
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

.aside a.active [class^="icon-"]{
    color: #ffffff;
}

.aside a:hover [class^="icon-"]{
    color: #ffffff;
    transition: .4s ease-in-out;
}

.aside a span{
    display: inline-block;
    margin-left: 15px;
    color: #a9afb6;
    font-size: 13px;
    font-family: 'GothamPro-Bold';
}

/*.aside-nav{*/
    /*padding-left: 15px;*/
/*}*/

.aside-nav-link svg path, .aside-nav-link svg circle{
    fill: #858a92;
}


.main{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 78px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transition: .3s ease-in-out;
    width: calc(100% - 78px);
}
body.menu-show .main{
    width: calc(100% - 270px);
}

.menu-show .main{
    transition: .3s ease-in-out;
}

.content{
    position: relative;
    background-image: url("../images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 48px;
    box-sizing: border-box;
}

.main-page .content:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0, .15);
}


/*
.main-page .form-control{
    max-width: 415px;
}
*/



.main-page .form-control:focus{
    border-bottom: 2px solid rgba(255,255,255,1);
}


.btn{
    position: relative;
    font-family: 'GothamPro-Bold';
    font-size: 12px;
    padding-left: 69px;
    padding-right: 89px;
    height: 65px;
    background: #ff7b00;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #ffffff;
    transition: .3s ease-in-out;
    border-radius: 6px;
    z-index: 1;
}
.btn.btn-sm{
    font-family: 'GothamPro';
    font-size:10px;
    font-weight:normal;
    letter-spacing:0.5px;
    height:30px;
    padding:0 5px;
}


.main-page .btn:before{
    display: inline-block!important;
    position: absolute; /* Абсолютное позиционирование */
    right: 50px;
    top: calc(50% - 1.5px);
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left: 13px solid #ffffff;
}

.btn:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #ff8900;
    height: 100%;
    width: 0;
    transition: .3s ease-in-out;
    z-index: -1;
}

/*.btn:hover{*/
    /*background: #ffffff;*/
/*}*/

.btn:hover{
    color: #2f3135;
}

.btn:hover:before{
    border-left: 7px solid #2f3135;
}

.btn:hover:after{
    width: 100%;
}

.btn-submit{
    background: none;
    border: 2px solid #ffffff;
    border-radius: 5px;
    height: 80px;
    padding-left: 61px;
    padding-right: 81px;
    font-size: 14px;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-submit:hover{
    background: none;
}

.btn-submit:after{
    background: #ffffff;
}

.btn-submit:before{
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    border: 5px solid transparent;
    border-left: 7px solid #ffffff;
}

.menu-btn{
    display: inline-block;
    width: 23px;
    padding: 10px 0;
    position: absolute;
    left: 28px;
    z-index: 2;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.menu-btn span{
    position: absolute;
    display: inline-block;
    height: 1px;
    width: 23px;
    background: #ffffff;
    /*transition: .3s ease-in-out;*/
}

.menu-btn span:before{
    content: '';
    display: inline-block;
    width: 19px;
    height: 1px;
    background: #ffffff;
    top: -9px;
    left: 2px;
    position: absolute;
    transition: .3s ease-in-out;
}

.menu-btn span:after{
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: #ffffff;
    top: 9px;
    left: 4px;
    position: absolute;
    transition: .34s ease-in-out;
}

.products{
    position: relative;
    z-index: 2;
}

.products-container{
    display: flex;
    flex-wrap: wrap;
}

.products-container .product{
    width: calc((100% - 44px)/5);
    margin: 0 5.5px;
    border: 1px solid #2a343a;
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
    transition: .3s ease-in-out;
    position: relative;
    overflow: hidden;
    transition: .3s ease-in-out;
    margin-bottom: 11px;
}

.catalog-page .white-5{
    text-align: center;
    line-height: 26px;
}

.catalog-page .content{
    padding-bottom: 43px;
}

.catalog-page .callback p{
    margin-bottom: 0;
}

.catalog-page .footer{
    padding-top: 0;
}

.product:nth-child(5n+1){
    margin-left: 0;
}

.product:nth-child(5n){
    margin-left: 0;
}

.product .nav-link{
    display: flex;
    padding: 22px;
    border: none;
    transition: .3s ease-in-out;
}

.product:hover .nav-link, .product.nav-item .nav-link.active{
    background: #283239;
    transition: .3s ease-in-out;
}

.product .nav-link:before{
    content: '';
    position: absolute;
    background: #ed7161;
    height: 4px;
    display: inline-block;
    width: 100%;
    bottom: -4px;
    left: 0;
    transition: .3s ease-in-out;
}

.product:hover .nav-link:before, .product.nav-item .nav-link.active:before{
    bottom: 0;
}

.product-image{
    min-width: 40px;
    max-height: 42px;
    text-align: center;
    margin-right: 30px;
    margin-left:0 !important;
}

.product-image img{
    max-width: 100%;
}

.product-name{
    font-size: 13px;
    color: #ffffff;
    font-family: 'GothamPro-Medium';
    height: 38px;
}


.list-style, .tile-style{
    display: none;
}

.list-view .list-style,.tile-view .tile-style{
    display: block;
}

.cards{
    margin-top: 25px;
}

.card{
    /*background-image:url("../images/card-bg.png");*/
    /*background-color: #303439;*/
    background: #2832396b;
    /*background-repeat: no-repeat;
    background-size: cover;*/
    color: #a1a7b1;
    margin-bottom: 22px;
    border: none;
}

.cards .card-header{
    display: flex;
   justify-content: space-between;
    font-size: 13px;
    padding: 22px 17px 25px 6px;
    /*background-color: #3c4046;*/

}




.cards .card-header:hover{
    background-color: #454a50;
    cursor: pointer;
}

.cards .card-header .checkmark  {
    background-color: #3c4046;
    border: 1px solid #787b84;
    border-radius: 50%;
}

.cards .card-header .checkmark:hover  {
    background-color: #3c4046;
    border: 1px solid #ff8300;
}

.card .card-header{
    padding: 0;
}
.card .card-header .amount{
    line-height: 32px;
}

.header-left{
    display: flex;
}


.list-view .list{
    color:#e26906;
}

.list-view .list g{
    fill: #e26906;
}

.tile-view .tile{
    color:#e26906;
}

.tile-view .tile g{
    fill: #e26906;
}

.card-header .header-left{
    align-items: flex-start;
    margin: 15px 5px 15px;
}

.tile-style .card-footer{
    overflow: hidden;
    width: 100%;
}

.tile-style .card-footer .footer-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}


.popover{
    padding: 10px;
    background: #2e3034;
    border-radius: 5px;
    box-shadow: 0px 13px 60px 0px rgba(0, 0, 0, 0.5)!important;
}

/* Needed to have the triangle match the grey background of the popover */
.popover .arrow:after {
    border-color: #2e3034;
}


.card-image:hover{
    cursor: pointer;
}

.card-image:hover .image-tooltip{
    display: block;
}

.tile-style .card-footer > *{
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
    max-width: 100%;
}

.tile-style .card-footer ul{
    list-style: disc;
    padding-left: 20px;
}

.tile-style .card-footer.collapsed > *{
    white-space: normal;
}

.card-header .header-left .card-name{
    /*
    overflow: hidden;
    */
    width: 100%;
}

.card-header .header-left .add-cart{
 /*   margin-right: 15px;
    margin-top: 20px*/
    padding-right: 10px;
    margin-top: 5px;
}

.card-header .card-image:before{
    display: none!important;
}

.card-header > .card-image img{
    width: 32px;
    height: 32px;
    box-shadow: none;
}

.card-image>img {
    width: 32px;
    height: 32px;
}

.card-header .header-right{
    min-width: 84px;
}

/*
.list-style .card-header .header-right .watermelon-block{
    height: 100%;
}
*/

.card-header .watermelon-block .amount:after{
    margin-top: 3px;
}


/*.monster-class{
    margin-bottom: 15px;
}*/

.listview_desc{
    /*white-space: nowrap;
    overflow: hidden;*/
    text-overflow: ellipsis;
    font-size: 14px;
    color:#a1a7b1;
    border: 2px solid #303236;
    padding: 10px;
    border-radius: 18px;
    transition: .3s ease-in-out;
    margin-bottom: 10px;
    background: #2832396b;
}
.card-header .header-left .monster-class > *{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    font-size: 13px;
}

.card-header .header-left .monster-class ul{
    list-style: disc;
    padding-left: 20px;
}

.card-header .header-left .monster-class.hidden-content ul li:first-of-type{
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    margin-bottom: 0;
}
.card-header .header-left .monster-class.hidden-content ul li:not(:first-of-type){
    display: none;
}
.card-header .header-left .monster-class.collapsed ul li{
    display: list-item!important;
    white-space: normal!important;
}

.card-header .header-left .monster-class.collapsed > *{
    white-space: normal;
}

.card-header .header-left .monster-class{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.hidden-content .collapse-btn{
    display: block;
}

.collapse-btn{
/*    display: none;*/
    position: relative;
    min-width: 100px;
    margin-left: 50px;
    cursor: pointer;
}

.collapse-btn:before,.collapse-btn:after{
    content: '';
    position: absolute;
    top: 10px;
    width: 8px;
    height: 1px;
    background: #eaeaea;
    transition: .4s ease-in-out;
}

.collapse-btn:before{
    right: 8px;
    transform: rotate(-45deg);
}

.collapse-btn:after{
    right: 13px;
    transform: rotate(45deg);
}

.collapsed .collapse-btn{
    min-width: 90px;
}


.tile-style .card{
    min-height: 130px;
}
.server_2 .tile-style .card{
    min-height: unset;
}

.tile-style .card-footer img{
    margin-right: 13px;
}

.collapsed .collapse-btn:before{
    transform: rotate(45deg);
}

.collapsed .collapse-btn:after{
    transform: rotate(-45deg);
}

.card-header .card-image{
    display: flex;
    position: relative;
}

.card-header .card-image:before{
    content: '';
    display: inline-block;
    width: 90px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 60px;
    background-size: 100%;
    background-image: url('../images/image-decor.png');
    background-repeat: no-repeat;
    position: absolute;
}

.card-header > img{
    box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.card-footer{
    font-size: 13px;
}

.card-footer p{
    margin-bottom: 0;
}
/*
.card-footer p:before{
    content: '•';
    margin-right: 6px;
}*/

.card-name{
    margin-left: 5px;
    /*height: 32px;*/
    line-height: 32px;
}

.card-name .name{
    color:#ffffff;
    font-size: 15px;
    font-family: 'GothamPro-Bold', sans-serif;
}


.nav-tooltip{
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: fixed;
    font-size: 13px;
    font-style: italic;
    background: #303236;
    padding: 0 25px;
    height: 50px;
    border-radius: 5px;
}

.nav-tooltip:before{
    content: '';
    position: absolute;
    border: 10px solid transparent;
    border-right: 10px solid #303236;
    left: -20px;
    top: 15px;
}



/* Customize the label (the container) */
.checkbox {
    display: block;
    position: relative;
    padding-right: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color:#ffffff;
}

.add-cart{
    display: inline-block;
    margin-bottom: 7px;
}

.watermelon-block .amount{
    color: #8cc65f;
    font-size: 15px;
    line-height: 19px;
    font-family: 'GothamPro-Bold', sans-serif;
    text-align: right;
}

.watermelon-block .amount.red{
    color: #ff0000;
    text-decoration:line-through;
}


.card .header-right{
    margin-top:15px;
}


.watermelon-block .amount:after{
    content: '';
    display: inline-block;
    width: 25px;
    height: 24px;
    margin-left: 10px;
    vertical-align: top;
    background-image: url("../images/watermelon.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

.btn-group-toggle>.btn input[type=checkbox], .btn-group-toggle>.btn input[type=radio]{
    width:unset;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    line-height: 25px;
    width: 25px;
  /*  background-color: #26282c;
    border: 0 solid transparent;*/
    border-radius: 50%;
    text-align: center;
    background-color: #3c4046;
    border: 1px solid #787b84;
}

/* On mouse-over, add a grey background color */

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark:before {
    content: "\e903";
    color: #ffc107;
    font-family: 'icomoon';
    /*background-image: url("../images/svg/check.svg");*/
    /*background-size: 100%;*/
    /*background-position: center center;*/
    /*background-repeat: no-repeat;*/
}

#wrapperScroll{
    margin-top: 10px;
    position: relative;
    display: inline-block;
    max-height: calc(100vh - 180px);
    width: 100%;
    overflow: hidden;
}

#scroller{
    padding-left: 0;
}

.iScrollVerticalScrollbar{
    left: 71px;
    transition: .3s ease-in-out;
}


#iScrollIndicator{
    display: none!important;
}

.menu-show .iScrollVerticalScrollbar{
    left: 263px;
    transition: .3s ease-in-out;
    opacity: 1!important;
    transition-delay: 1.5s;
}

.callback{
    text-align: center;
    font-size: 15px;
    /*color: rgba(255,255,255,.5);*/
    color: #fff;

    font-family: 'GothamPro-Light';
    margin-top: 25px;
}

.callback p{
    width: 100%;
    text-align: center;
}

.callback p span{
    color: #ff7300;
}

.footer{
    padding: 30px 0;
    background: #211f22;
  text-align: center;
    box-sizing: border-box;
}

.footer .change{
    /*color: rgba(255,255,255,.5);*/
    color: #fff;

    font-size: 15px;
    width: 100%;
    margin-top: 45px;
    margin-bottom: 5px;
}

.accordion .card-header {
    display: flex;
    justify-content: space-between;
}

.accordion .products-container .product{
    width: 100%;
    margin: 0 0 15px 0;
}

.accordion .product-image img {
    max-width: 60%;
}

.accordion .product:hover .nav-link,
.accordion .product.nav-item .nav-link.active {
    background-color: transparent;
}

.accordion .product .nav-link:before {
    background-color: transparent;
}

.accordion .product-image {
    margin-right: 0;
    padding-top:4px;

}

.accordion .product .nav-link {
    padding: 6px;
    background: #303439;

}
.accordion .product .nav-link:hover {
    background:#283239;
}

.accordion .product-name {
    padding: -10px 0 0 10px;
    line-height:38px;
    font-size:16px;
}

.accordion .card {
    margin-bottom: 15px;
}

.accordion .product-image {
    width: 20px;
}

.accordion-body .nav-link {
    position: relative;
}

.accordion-body .nav-link.collapsed:after {
    position: absolute;
    content: '';
    top: 19px;
    right: 22px;
    width: 8px;
    height: 8px;
    border-left: 1px solid white;
    border-top: 1px solid white;
    transform: rotate(-135deg);
}

.accordion-body .nav-link:after {
    position: absolute;
    content: '';
    top: 23px;
    right: 22px;
    width: 8px;
    height: 8px;
    border-left: 1px solid #e26906;
    border-top: 1px solid #e26906;
    transform: rotate(45deg);
}




.list-view .products {
    display: none;
}

.tile-view .products {
    display: flex;
}

.tile-view .accordion-main {
    display: none;
}

.list-view .accordion-main {
    display: block;
}


@media (min-width: 768px) {

    .main-page .form-group input{
        padding-left: 0;
        padding-bottom: 10px;
    }

    .main-page .form-control:focus~.form-label, .main-page .form-control:not(:focus):valid~.form-label{
        top: -35px;
    }

    .main-page .form-group .form-label{
        left: 0;
        top: 9px;
    }

    .menu-show .main {
        left: 270px;
    }

    .menu-show .menu-btn{
        left: calc(100% - 23px);
        transition: 0.3s ease-in-out;
    }

    .menu-btn:hover span:before{
        left: 4px;
        transition: .3s ease-in-out;
    }

    .menu-btn:hover span:after{
        left: 9px;
        transition: .34s ease-in-out;
    }

    .menu-show .aside a:hover:before{
        top: 0;
        opacity: 1;
        transition: .3s ease-in-out;
    }
}


/*main*/
.main-page .wrapper{
    height: 100vh;
    min-height: 450px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.bg-image{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-page .bg-image{
    background-image: url("../images/main-bg.png");
}

.welcome .content{
    min-height: 100vh;
    background-image: url("../images/welcome-bg.png");
    background-size: cover;
}

.welcome .footer{
    position: absolute;
    bottom: 0;
    right: 0;
    background: transparent;
    padding: 0 50px 40px 0;
    color: rgba(255,255,255,.25);
}

.welcome .visitor-block p{
    text-align: center;
}

.bg-image:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.6);
}

.bg-image:after{
    content: '';
    position: absolute;
    width: 53%;
    height: 150%;
    transform: rotate(10deg);
    top: -10%;
    left: -10%;
    bottom: 0;
    background: rgba(0,0,0,.5);
}

.games-container{
    position: relative;
    top: -50%;
    transform: translateY(-50%);
}

.games .nav-tabs{
    align-items: center;
}

.nav-tabs{
    border-bottom: none;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    color:black;
    background: transparent;
    border: none;
}

.games .nav-tabs .nav-link{
    position: relative;
    display: flex;
    align-items: center;
    height: 150px;
}

.games .nav-tabs .nav-link:before{
    content: '';
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    background: transparent;
    border-radius: 50%;
    transition: .3s;
}

.games .nav-tabs .nav-link:hover:before, .games .nav-tabs .nav-link.active:before{
    background: rgba(255,255,255,.1);
    transition: .3s;
    width: 199px;
    height: 199px;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
    border: none;
}

.choosen-game{
    color: #9f9494;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 3px;
    font-family: 'Gotham Pro Regular';
}

.game-name{
    font-size: 48px;
    line-height: 1;
    margin-top: 30px;
    color: #ffffff;
    font-family: 'GothamPro-Bold';
}

.games-container .form {
    margin-top: 75px;
}
.games-container .form-group {
    position: relative;
    margin-bottom: 60px;
}
.security_field{
    line-height: 50px;
}
.login-captcha{
    position: relative;
    top: -30px;
}

.form-group.login:before, .form-group.password:before{
    display: inline-block;
    font-family: 'icomoon';
    color: rgba(255,255,255,.25);
    position: absolute;
    left: -40px;
    bottom: 25px;
    font-size: 20px;
    transition: .3s ease-in-out;
}


.main-page .form-group.login:before, .main-page .form-group.password:before{
    bottom: 20px;
}

.main-page .form-group.focus:before{
    color: #ffffff;
    transition: .3s ease-in-out;
}

.form-group.login:before{
    content: "\e90e";
}

.form-group.password:before{
    content: "\e90d";
}

.form-control {
    width: 100%;
    //height: 63px;
    height: 40px;
    padding: 5px 15px;
}


.forum .form .form-group,
.mail-page .form .form-group{
    margin-top: 30px;
}

.forum .form-group .form-label,
.mail-page .form-group .form-label{
    line-height: 1;
}

.forum .form-group .form-control,
.mail-page .form-group .form-control{
    height: 40px;
}

.forum .show-pass:before,
.mail-page .show-pass:before{
    top: 6px;
}

.form-label{
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 0;
    line-height: 40px;
    transition: .3s;
    color: rgba(255,255,255,.5);
    font-size: 24px;
}



.form-control, .form-control:focus {
    border: none;
    border-bottom: 2px solid rgba(255,255,255,.25);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    color: #ffffff;
}

.form-control:focus~.form-label,
.form-control:not(:focus):valid~.form-label {
    top: -15px;
    font-size: 12px;
}

.main-page footer{
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 40px;
    display: flex;
    justify-content: space-between;
}

footer .copyright{
    color: rgba(255,255,255,.25);
    font-size: 14px;
}

footer .recovery, .footer .authorization{
    color: #ffffff;
    font-size: 14px;
}

footer .recovery span, footer .authorization span{
    margin-right: 20px;
    color: #ffffff;
}

footer .recovery a, footer .authorization a{
    color: #ffffff;
}

/*recovery*/
.recovery-text{
    color: #ffffff;
    font-size: 12px;
    font-family: 'GothamPro-Light';
}

.enter-login{
    font-size: 18px;
    margin-top: 75px;
    color: #ffffff;
    font-family: 'GothamPro-Bold';
}

.recovery-block .form{
    margin-top: 35px;
}

.visitor-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 730px;
    text-align: center;
}

.visitor{
    font-size: 30px;
    margin-bottom: 5%;
    font-family: 'GothamPro-Bold';
}

.visitor-block .btn{
    margin-top: 3%;
}

.visitor-block p{
    text-align: center;
}

.support{
    position: relative;
}

.support:before{
    content: '';
    background-image: url("../images/support-bg.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 20%;
    top: 0;
    bottom: 0;
    right: 0;
}



.support svg{
    width: 150px;
    margin-bottom: 8%;
}

.support path, .support circle{
    fill:rgba(255,255,255,.1)
}

.history .content, .history-visits .content, .statistics .content, .mail-page .content, .password-page .content, .message-history .content,
.feedback .content, .characters .content, .inventory .content, .sell .content, .authentication .content{
    background-image: url("../images/bg-history.png");
    background-size: cover;
    min-height: 100vh;
}

.heading-content{
    margin: 35px 0;
    font-size: 20px;
    font-family: 'GothamPro-Bold';
}

.table{
    border: 0 solid transparent;
    border-radius: 6px;
    overflow: hidden;
}

.table-sell .price{
    white-space: nowrap;
}

table {
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
}

thead tr{
    background: #313337;
}

tbody tr{
    background:#26282c;
    overflow: hidden;
}

.table th, .table td {
    border-top: none;
    text-align: left;
    padding: 15px 0 15px 30px;
    font-size: 13px;
    line-height: 26px;
    vertical-align: middle;
}

.table-change-colors td{
    font-size:16px;
}
.table-change-colors td a {
    display: block;
    height: 100%;
    width: 100%;
}
.table-change-colors td:first-child{
    /*text-align:right;*/
    padding-right:20px !important;
}
.sm-p th, .sm-p td{
    padding-top: 16px;
    padding-bottom: 16px;
}

.table tr:not(:last-child){
    border-bottom: 1px solid rgb(49, 51, 55);
}


.table thead th{
    border-bottom: none;
    color: rgb(133, 138, 146);
    vertical-align: top;
}

.table thead th:last-child{
    padding-right: 25px;
}

.table td:nth-child(2){
    color: rgb(133, 138, 146);
}

/*
.table td:nth-child(4){
    text-align: right;
}
*/

.pay-step2 .table td:nth-child(2) span{
    color: #ffffff;
}

.history .table td:nth-child(4):after, .pay .table td:nth-child(1) span:after, .pay-step2 .table td:nth-child(2) span:after,
.basket .table td:nth-child(3):after, .basket-step3 .table td:nth-child(3):after{
    content: '';
    display: inline-block;
    margin-left: 5px;
    width: 25px;
    height: 24px;
    vertical-align: middle;
    background-image: url("../images/watermelon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-2px);
}

.pay .table td:nth-child(1) span{
    white-space: nowrap;
}

.table td:last-child{
    /*text-transform: uppercase;*/
    color: rgb(133, 138, 146);
    font-size: 12px;
}

.pay-step1 .table td:last-child{
    text-transform: none;
    color: #fff;
    font-size: 12px;
}

.pay-step1 .table td:last-child{
    padding-right: 25px;
}
/*
.pay-step1 .table tr:first-child td:last-child{
    color: rgb(133, 138, 146);
}
*/
.history .table td:nth-child(4), .history .table th:nth-child(4){
    padding-right: 20px;
}

.history .table td:last-child:after{
    content: "\e90f";
    font-family: 'icomoon';
    margin-left: 15px;
    line-height: 15px;
}


/*pay*/

.pay .content, .basket-step3 .content{
    background-image: url("../images/bg-pay.png");
    background-size: cover;
    background-position: center center;
    min-height: 100vh;
}

.pay .heading{
    font-size: 15px;
    color: rgb(255, 255, 255);
    text-align: center;
}

.back{
    position: absolute;
    left: 57px;
    top: 50%;
    transform: translateY(-50%);
    /*color: rgb(121, 126, 134);*/
    color: #ffffff;
}

.back:before{
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    left: -42px; top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right: 7px solid #ffffff;
    z-index: 2;
}

.back:after{
    content: '';
    position: absolute;
    width: 47px;
    height: 47px;
    left: -57px;
    top: 50%;
    transform: translateY(-50%);
    background: #313337;
    border-radius: 50%;
}

.back:hover{
   /* color: rgb(121, 126, 134);*/
    color: #ffffff;
}

.payment-container{
    margin-bottom: 50px;
}

.payment-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 200px;
    background: #26282c;
    color: #ffffff;
    border-radius: 18px;
    padding-bottom: 30px;
    transition: .3s ease-in-out;
}

.payment-card:hover{
    color: #ffffff;
    margin-top: 12px;
    height: 180px;
    padding-bottom: 15px;
}

.payment-card:hover + .bonus{
    margin-top: 28px;
}

.payment-card .name-card{
    margin-top: 25px;
}

.bonus{
    color: rgba(255, 255, 255, 0.502);
    font-size: 15px;
    text-align: center;
    margin-top: 20px;
    transition: .3s ease-in-out;
}

.bonus span{
    margin-left: 4px;
    margin-right: 15px;
}

.pay footer{
    position: relative;
    left: 0;
    right: 0;
    /*color:rgba(255,255,255,.5);*/
    color: #fff;
    bottom: 0;
    font-size: 15px;
    text-align: center;
}

.pay .table-change-colors tbody tr:nth-child(odd){
    background: #313337;
}

.pay .table-change-colors tbody td:last-child{
    background: #36393e;
    padding-left: 13px;
    padding-right: 13px;
    text-align: center;
}

.pay .table tr:not(:last-child){
    border-bottom: none;
}


.pay-step2 tbody tr:nth-child(odd) td:last-child{
    background: #40444a;
}

.pay-step2 tbody td:last-child{
    transition: .3s ease-in-out;
    cursor: pointer;
    color: #ffffff;
    letter-spacing: 1.5px;
}

.pay-step2 tbody td:last-child:hover{
    background: #ff7b00!important;
    color: #ffffff;
}

.pay-step2 .table td:nth-child(2) div{
    display: inline-block;
    /*border: 1px solid rgb(67, 69, 73);
    border-radius: 20px;*/
    padding: 5px 10px;
}

.pay-step3 footer{
    margin-top: 100px;
}

.td-rouble{
    font-size: 18px;
    text-align: right;
}

.table .td-del{
    padding-right: 25px;
    text-align: right;
}

.td-del span{
    position: relative;
    display: inline-block;
    width: 11px;
    height: 11px;
    cursor: pointer;
}

.td-del span:before,.td-del span:after{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    bottom: 0;
    display: inline-block;
    width: 12px;
    height: 2px;
    transform: rotate(45deg);
    background: #c85164;
}

.td-del span:after{
    transform: rotate(-45deg);
}

.td-rouble:after{
    content: '₽';
    margin-left: 11px;
}

.td-quantity span{
    display: inline-block;
    background: #1c1e21;
    border-radius: 3px;
    padding: 8px 25px;
    color: #ffffff;
    font-family: 'GothamPro-Bold';
}

.pay-step2 .table th, .pay-step2 .table td{
    padding: 11px 0 11px 30px;
    font-weight:normal;
}

.pay-step2 .table td:nth-child(1) {
    color: rgb(133, 138, 146);
}
.pay-step2 .table td:nth-child(2),
.pay-step2 .table td:nth-child(1) span {
    color:white;
}
/*
.pay-step2 .table td:first-of-type:after{
    content: '';
    display: inline-block;
    margin-left: 5px;
    width: 25px;
    height: 24px;
    vertical-align: middle;
    background-image: url(../images/watermelon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-2px);
}*/

.pay-step2 .td-rouble{
    font-size: 18px;
    text-align: right;
    padding-right: 20px !important;
}
/*
.pay-step2 footer{
    bottom: 28px;
}
*/
.pay-step2 footer p{
    color: rgba(255,255,255,.3);
    margin-bottom: 0;
}

.pay-step2 footer p:first-child{
    margin-bottom: 5px;
}

.pay-step2 .content,
.pay-step3 .content{
    background-image: url("../images/bg-pay2.png");
}

/*pay-3*/
.account{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 470px;
    max-width: 100%;
    margin: 0 auto;
    background: #26282c;
    border-radius: 10px;
    padding-top: 37px;
    padding-bottom: 37px;
}

.account .account-name{
    font-size: 30px;
}

.account .bonus{
    margin-top: 0;
}

.account .bonus span{
    color: #ffffff;
}

.account .bonus span:before{
    margin-right: 9px;
}

.account .btn{
    height: 65px;
    line-height: 49px;
    padding-right: 34px;
    padding-left: 34px;
    font-size: 12px;
    margin-top: 30px;
}

.account .btn:before{
    display: none;
}

/*pay-good*/
.pay-good .visitor-block p{
    max-width: 300px;
}

.pay-good .content{
    background-image: url("../images/payment-sucess.png");
}

.pay-good .support:before{
    left: 0;
}

.pay-good .btn{
    padding-right: 61px;
}

    /*pay-bad*/
.pay-bad .content{
    background-image: url("../images/payment-fail.png");
}

.pay-bad .visitor-block p{
    max-width: 400px;
}

.pay-bad .btn{
    padding-right: 61px;
}

.pay-bad .btn:before{
    display: none;
}

/*basket*/
.basket .content{
    min-height: 100vh;
    background-image: url("../images/bg-pay2.png");
    background-size: cover;
}

.basket .table thead th:last-child{
    text-align: right;
}

.basket .grey-form{
    max-width: 414px;
    margin: 30px auto 0;
    padding-top: 0;
}

.basket .grey-form .heading-content{
    font-size: 20px;
    font-family: 'Gotham Pro Regular';
    text-align: center;
    max-width: 250px;
    margin: 35px auto;
}

.basket .sm-p th:nth-child(3), .basket .sm-p td:nth-child(3){
    text-align: right;
    padding-right: 30px;
}

.basket td b, .basket-step3 .table td b{
    font-family: 'GothamPro-Bold';
}

.character{
    margin-top: 20px;
}

.character-image{
    position: relative;
}

.character-image:before,
.character-image:after{
    content: '';
    background-image: url('../images/image-decor.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -5%;
    right: 0;
    top: 0;
    bottom: 0;
    width: 85px;
}

.character-image:after{
    left: 70%;
}

.character-name{
    color: rgba(255, 255, 255, 0.251);
    font-size: 12px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.character-name .nickname{
    font-size: 15px;
    color: #ffffff;
    padding-bottom: 20px;
    padding-top: 10px;
    border-bottom: 1px solid rgba(255,255,255,.251);
    position: relative;
}

.character-name .nickname:before{
    content:'';
    display: inline-block;
    width: 13px;
    height: 10px;
    position: absolute;
    right: 0;
    top: 16px;
    background-image: url("../images/check-green.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/*ip*/
.ip-page .content{
    min-height: 100vh;
    background-image: url("../images/ip.png");
    background-size: cover;
}

.ip-page .modal-image{
    max-height: 41px;
}

.step span{
    display: inline-block;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
    text-align: center;
    min-width: 25px;
    max-width: 25px;
    height: 25px;
    line-height: 26px;
    color: #1c1e21;
    font-size: 11px;
}


.step-name{
    display: inline-block;
    width: initial;
    margin-left: 15px;
    font-size: 13px;
}

.step .btn-group-toggle{
    border-radius: 20px;
    height: 38px;
    position: relative;
    background: #373740;
}

.step-header{
    display: flex;
    align-items: center;
}

.btn-group-toggle.buttons-3 .btn{
    width: 33.33%;
}

.step .btn-group-toggle .btn{
    width: 50%;
    background: transparent;
    height: 40px;
    font-size: 13px;
    text-transform: initial;
    text-align: center;
    border-color:transparent;
    letter-spacing: initial;
    border: none;
    padding: 0;
    line-height: 40px;
    color: #eee;/*#858a92;*/
    margin: 0;
    font-family: 'Gotham Pro Regular', sans-serif;
    transition: .3s ease-in-out;
    letter-spacing: 0.2px;
}

.step .btn-group-toggle .active{
    color: #ffffff;
    font-family: 'GothamPro-Bold', sans-serif;
    transition: .3s ease-in-out;
}

.step .btn-group-toggle .btn:after,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/*.step .btn-group-toggle .btn:last-child:after{*/
    /*display: none;*/
/*}*/

/*.step .btn-group-toggle .btn:after{*/
    /*width: 100%;*/
/*}*/

/*.step .btn-group-toggle .active:after{*/
    /*background-color: rgb(36, 165, 90)!important;*/
    /*border-radius: 20px;*/
/*}*/

/*.step .btn-group-toggle .btn:first-of-type:not(.active):after{*/
    /*left: 100%;*/
    /*background-color: rgb(36, 165, 90)!important;*/
    /*border-radius: 20px;*/
/*}*/

.step .btn-group-toggle .bg-toggle{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    background-color: rgb(36, 165, 90);
    border-radius: 20px;
    transition: .3s ease-in-out;
}

.step .btn-group-toggle.buttons-3 .bg-toggle{
    width: 33.33%;
}

.step .btn-group-toggle .btn:nth-child(2).active ~ .bg-toggle{
    left: 50%;
    transition: .3s ease-in-out;
}

.step .btn-group-toggle.buttons-3  .btn:nth-child(2).active ~ .bg-toggle{
    left: 33.33%;
    transition: .3s ease-in-out;
}

.step .btn-group-toggle.buttons-3  .btn:nth-child(3).active ~ .bg-toggle{
    left: 66.66%;
    transition: .3s ease-in-out;
}

.step .btn-submit{
    height: 60px;
    line-height: 60px;
    padding: 0;
    margin-top: 40px;
}

.step .btn-submit:before{
    display: none;
    /*border: none;*/
    /*background-image: url("../images/svg/power-button.svg");*/
    /*width: 15px;*/
    /*height: 15px;*/
}

.step:nth-of-type(2) .small-text{
    margin-bottom: 15px;
}

.your-ip{
    font-size: 13px;
    color: #858a92;
    font-family: 'Gotham Pro Regular';
    text-align: right;
}

.your-ip span{
    color: #ffffff;
    margin-left: 20px;
}

.ips{
    margin-top: 45px;
    font-size: 13px;
}

.ips p{
    color: #858a92;
    font-family: 'GothamPro-Light';
    margin-top: 45px;
}

.ips p span{
    color: #ffffff;
}

.ip{
    font-size: 15px;
    color: #ffffff;
    padding: 15px 30px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    margin-bottom: 20px;
    position: relative;
}

.ip .del{
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
}

.ip .del:before, .ip .del:after{
    content: '';
    display: inline-block;
    width: 12px;
    height: 2px;
    transform: rotate(45deg);
    top: 50%;
    background: #c85164;
    position: absolute;
    left: 5px;
}

.ip .del:after{
    transform: rotate(-45deg);
}

.info-heading{
    display: flex;
    align-items: center;
    margin-top: 50px;
    font-size: 13px;
    color: #858a92;
}

.info-heading:before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("../images/information.png");
    margin-right: 25px;
}

.info-heading:after{
    content: '';
    display: inline-block;
    width: 90px;
    left: 20px;
    top: 30px;
    transform: translate(-50%,-50%);
    height: 60px;
    background-size: 100%;
    background-image: url('../images/image-decor.png');
    background-repeat: no-repeat;
    position: absolute;
}

.info p{
    margin-top: 25px;
    color: #858a92;
    font-size: 13px;
}

/*history-visits*/
.history-visits p{
    color: #666a70;
    font-family: 'GothamPro-Light';
}

.history-visits .table td:nth-child(4),
.history-visits .table th:nth-child(4){
    padding-left: 40px;
    text-align: left;
}

.history-visits .table thead th:last-child{
    text-align: left;
    padding-left: 60px;
}

.history-visits .table td:last-child{
    text-align: left;
    padding-left: 60px;
    color: #24a55a;
    font-family: 'GothamPro-Bold';
}

.history-visits td:nth-child(4){
    color:#858a92;
}


.history-visits .error-tr td:nth-child(2),
.history-visits .error-tr td:last-child{
    color: #cf5367;
}

/*.statistics*/
.statistics p{
    color: #858a92;
    font-family: 'GothamPro-Light';
}

.statistics .table{
    margin-bottom: 40px;
}

.statistics .table td:first-of-type{
    letter-spacing: 1.5px;
}

.statistics .table:last-child th:first-of-type{
    width: 47.5%;
}

.statistics .table td:nth-child(2){
    color: #ffffff;
}

.statistics .table td:nth-last-child(2){
    color: rgb(133, 138, 146);
}

.statistics .table td:last-child,
.statistics .table th:last-child{
    padding-right: 25px;
    text-align: right;
}

.mail-page .col-lg-6{
    margin-top: 110px;
    padding-right: 70px;
}

.mail-page .info-heading, .mail-page .heading-content{
    margin-top: 0;
}

.mail-page .info-heading:before{
    margin-right: 40px;
}

.mail-page .col-lg-6:last-of-type{
    border-left: 1px solid rgb(49, 51, 55);
    padding-left: 70px;
}

.mail-page p{
    font-size: 13px;
    color: #858a92;
    font-family: 'GothamPro-Light';
    line-height: 2;
}


.mail-page .info-heading p{
    margin-bottom: 0;
}

.mail-page .info-heading p:first-of-type{
    margin-bottom: 5px;
    color: #ffffff;
}

.mail-page .info-heading:before{
    min-width: 40px;
    height: 40px;
    background-size: cover;
}

.mail-page .form-group.password:before{
    display: none;
}

.mail-page .old-email:before{
    content:'';
    display: inline-block;
    width: 13px;
    height: 10px;
    position: absolute;
    right: 0;
    top: 13px;
    background-image: url("../images/check-green.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.old-email-empty:before{
    content:'';
    display: inline-block;
    width: 13px;
    height: 10px;
    position: absolute;
    right: 0;
    top: 13px;
    background-image: url("../images/check-green.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.old-email-empty{
    height: 40px;
}

.mail-page .btn-submit{
    width: 100%;
    padding: 0;
    font-size: 12px;
    height: 60px;
    margin-bottom: 10px;
}

.mail-page .btn-submit:before{
    display: none;
}

.mail-page .form-control:focus~.form-label,.mail-page .form-control:not(:focus):valid~.form-label{
    top: -20px;
}

.mail-page .form-control, .mail-page .form-control:focus{
    border-bottom: 1px solid rgba(255,255,255,.25);
}

.show-pass:before{
    content: "\e90f";
    font-family: icomoon;
    position: absolute;
    right: 0;
    top: 13px;
    color: #5c5e61;
}
.show-pass-btn{
    font-family: icomoon;
    position: absolute;
    right: 0;
    top: 13px;
    color: #5c5e61;
}

/*delete*/

.delete .content{
    min-height: 100vh;
    background-image: url("../images/delete.png");
    background-size: cover;
}

.delete p{
    color: #858a92;
    font-size: 13px;
    font-family: 'GothamPro-Light';
    line-height: 2;
    text-align: center;
}

.delete p b{
    font-family: 'GothamPro-Bold';
}

.delete .btn-submit:before{
    display: none;
}

/*feedback*/
.feedback-group{
    margin-top: 50px;
}

.feedback-link a{
    display: flex;
    justify-content: space-between;
    /*color: rgba(255,255,255,.5);*/
    color: #fff;

    background: #26282c;
    border-radius: 12px;
    border: 1px solid transparent;
    margin-bottom: 20px;
    transition: .3s ease-in-out;
    overflow: hidden;
    /*min-height: 110px;*/
}

.feedback-link a:hover{
    border-color: #cf5367;
    transition: .3s ease-in-out;
}

.feedback-link a:hover .arrow{
    background: #cf5367;
    transition: .3s ease-in-out;
}

.feedback-link .text-block{
    padding: 15px;
}

.feedback-link a .name{
    color: #ffffff;
    margin-bottom: 9px;
    font-size: 14px;

}

.feedback-link .text{
    font-size: 13px;
}






.arrow{
    min-width: 135px;
    position: relative;
    border-left: 1px solid rgba(255,255,255,.1);
    transition: .3s ease-in-out;
}

.arrow:before{
    right: 50%;
    top: 50%;
    transform: translate(50%,-50%);
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    border: 5px solid transparent;
    border-left: 7px solid #ffffff;
}

/*chat*/
.message-number{
    display: inline-block;font-size: 14px;
    font-family: 'GothamPro-Light';
    float: right;
}

.chat{
    background: #26282c;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 85px;
}

.chat-header{
    display: flex;
    justify-content: space-between;
    background: #313337;
    padding: 20px 30px;
}

.chat-body{
    position: relative;
    padding: 7px 30px 30px;
}

.chat .date{
    display: inline-block;
    position: relative;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: #858a92;
    background: #313337;
    border-radius: 25px;
    font-size: 11px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.chat-body:after, .message-container:after{
    content: '';
    display: block;
    clear: both;
}

.chat-body:before {
    content: '';
    background-image: -moz-linear-gradient( 90deg, rgba(38,40,44,0) 0%, rgba(38,40,44,0) 0%, rgb(38,40,44) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgba(38,40,44,0) 0%, rgba(38,40,44,0) 0%, rgb(38,40,44) 100%);
    background-image: -ms-linear-gradient( 90deg, rgba(38,40,44,0) 0%, rgba(38,40,44,0) 0%, rgb(38,40,44) 100%);
    position: absolute;
    left: 0;
    right: 0;
    height: 101px;
}


.message-container{
    margin-top: 20px;
}

.message-container.your + .message-container.your{
    margin-top: 1px;
}

.message{
    background: #313337;
    display: inline-block;
    max-width: 67%;
    border-radius: 20px 20px 20px 0;
    padding: 20px 20px 20px 30px;
}

.message-header{
    display: flex;
    justify-content: space-between;
}

.message .name{
    font-size:13px;
    color: #89b087;
    margin-bottom: 5px;
}

.your .name{
    color: #5f91b8;
}

.message .time{
    font-size: 11px;
    color: #858a92;
}

.your .message{
    float: right;
    border-radius: 20px 20px 0 20px;
}

.message-body{
    font-size: 13px;
}

.chat-footer{
    display: flex;
    font-size: 13px;
    border-top: 1px solid #313337;
}

.chat-text{
    padding: 16px 30px 0;
    width: 100%;
}

.chat-text textarea{
    background: none;
    width: 100%;
    border: none;
    color: #ffffff;
    overflow: hidden;
    resize: none;
}

.chat-footer .btn-submit{
    display: inline-block;
    background: #ff7b00;
    height: 64px;
    min-width: 193px;
    border: none;
    border-radius: 0;
    padding: 0;
    line-height: 64px;
}

.chat-footer .btn-submit:before{
    content: '';
    border: none;
    background-image: url("../images/svg/send.svg");
}

.message-history .table td:first-child{
    color: #ff7300;
}

.message-history .table td:last-child{
    color: #ffffff;
    text-align: right;
    padding-right: 25px;
}
.message-history .table th:last-child{
    text-align: right;
}

/*feedback*/
.feedback .heading{
    padding-bottom: 0;
    padding-top: 30px;
}

.feedback .heading .back{
    transform: none;
    top: 30px;
}

.feedback .heading > div{
    max-width: 820px;
    margin: 0 auto;
    color: #858a92;
    font-size: 15px;
}

.feedback .heading > div p{
    margin-bottom: 30px;
    text-align: center;
}

.feedback .heading > div p a{
    margin-top: 5px;
}

.feedback .visitor-container{
    min-width: 700px;
    top: 56%;
}

.feedback .grey-form{
    max-width: 900px;
    margin: 0 auto;
}

.feedback .grey-form .heading{
    padding: 5px;
    padding-bottom: 50px;
    color: #ffffff;
}

.feedback .grey-form .btn{
    display: block;
    width: 250px;
    margin: 0 auto;
}

/*characters*/
.characters .heading-content{
    margin-bottom: 20px;
}

.characters .heading-content p,
.inventory .heading-content p{
    font-size: 13px;
    color: #858a92;
    font-family: 'GothamPro-Light';
    margin-top: 15px;
    margin-bottom: 40px;
}

.characters .table td:nth-child(4){
    text-align: left;
}

.characters .table td:nth-child(5){
    color: #858a92;
}

.characters .table th:last-child, .characters .table td:last-child{
    text-align: right;
}

.characters .table td:last-child{
    padding-right: 15px;
}

/*.characters .online:after, .characters .offline:after{*/
    /*left: 15px;*/
/*}*/

.characters .table .online{
    color:#24a55a;
}

.in-city:after{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../images/svg/building.svg") no-repeat center center;
    background-size: contain;
}

.characters .btn-submit{
    height: 42px;
    padding-left: 27px;
    padding-right: 20px;
    letter-spacing: 1px;
    font-size: 12px;
    margin: 0 10px;
    border-width: 1px;
}

.btn-submit:before{
    display: none;
}

.characters .btn-submit:after{
    position: relative;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

.characters .btn-submit:hover{
    color: #ffffff;
}

.characters .in-city:hover:after{
    width: 16px;
}

.inventorymenu:after{
    content: '';
    display: inline-block;
    width: 20px;
    height: 10px;
    background: url("../images/svg/inventory.svg") no-repeat center center;
    background-size: contain;
}

.characters .inventorymenu:hover:after{
    width: 20px;
}

/*inventory*/
.inventory .heading-content{
    margin-bottom: 40px;
    margin-top: 10px;
}

.inventory-container{
    display: flex;
    align-items: center;
}

.inventory-container .name{
    margin-bottom: 8px;
}

.inventory-container .img{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    min-width: 60px;
    height: 60px;
    box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    margin-right: 30px;
}

.inventory-container .img:before{
    content: '';
    display: inline-block;
    width: 90px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 60px;
    background-size: 100%;
    background-image: url('../images/image-decor.png');
    background-repeat: no-repeat;
    position: absolute;
}

.change{
    padding: 0;
    padding-left: 20px;
    padding-right: 17px;
    height: 43px;
    line-height: 43px;
    letter-spacing: 1px;
    border-width: 1px;
}

.change:after{
    content: '';
    position: relative;
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url("../images/svg/refresh.svg") no-repeat center center;
    background-size: contain;
    margin-left: 10px;
    vertical-align: middle;
}

.change:hover{
    color: #ffffff;
}

.change:hover:after{
    width: 13px;
}

.inventory .table td:last-child,
.inventory .table th:last-child,
.inventory .table td:nth-last-child(2),
.inventory .table th:nth-last-child(2){
    text-align: right;
}

.inventory .table td:nth-last-child(2){
    color: #ffffff;
}

.inventory .table td:last-child{
    padding-right: 25px;
}

/*sell*/
.sell .step{
    position: relative;
}

.sell .step:first-of-type:before,
.forum .form-group:not(.email):before{
    content:'';
    display: inline-block;
    width: 13px;
    height: 10px;
    position: absolute;
    right: 0;
    top: 40px;
    background-image: url("../images/check-green.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.forum .form-group:not(.email):before{
    top: 13px;
}

.price:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("../images/coin.svg");
    transform: translateY(3px);
    margin-right: 13px;
}
.table-sell td:first-child{
    color: #858a92;
}

.table-sell td:nth-child(1){
    color: #ffffff;
}

.table-sell td:nth-child(3){
    text-align: right;
}

.table-sell td:last-child{
    color: #24a55a;
    text-align: right;
    padding-right: 25px;
    text-transform: initial;
}

.table-sell th:last-child{
    text-align: right;
}
.table-sell-favorites td{
    padding: 10px 5px;
}
.table-sell-favorites td:last-child{
    padding: 10px;
}

/*404*/
.page-404 .content{
    min-height: 100vh;
    background-image: url(../images/bg-404.png);
    background-size: cover;
}

.page-404 p{
    max-width: 390px;
    font-size: 15px;
    font-family: 'GothamPro-Light';
    text-align: center;
}

.page-404 .btn-submit{
    padding-left: 75px;
    padding-right: 48px;
    padding-top: 0;
    padding-bottom: 0;
    line-height:76px;
    width: 200px;
}


.page-404 .btn-submit:before{
    display: inline-block;
    left: 50px;
    right: auto;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    border: 5px solid transparent;
    border-left: 7px solid #ffffff;
    transition: .3s ease-in-out;
}

.page-404 .btn-submit:hover:before{
    border-left: 7px solid #2f3135;
    transition: .3s ease-in-out;
}

/*authintication*/
.authentication p{
    font-size: 13px;
    color: #858a92;
    font-family: 'GothamPro-Light';
}

.authentication .white{
    color: rgba(255,255,255,.8);
}

.authentication .apps{
    display: flex;
    justify-content: center;
}

.authentication .app{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 15px;
    text-align: center;
    width: 167px;
    height: 167px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    padding: 30px 20px;
    color: #ffffff;
}

.authentication .app:last-of-type{
    padding-bottom: 20px;
}

.authentication .app-name{
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'GothamPro-Bold';
}

.authentication .app .app-logo{
    height: 100%;
    position: relative;
}

.authentication .app img{
    width: 170px;
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%,-50%);
    margin-bottom: 30px;
}

.qr{
    max-width: 320px;
}

.qr img{
    border: 12px solid #ffffff;
    border-radius: 12px;
    max-width: 100%;
}

.authentication-2 .app{
    height: 160px;
}

.authentication-2 .app:first-of-type{
    margin-left: 0;
}

.authentication-2 .app:last-of-type{
    margin-right: 0;
}

.authentication-2 .grey-form{
    padding-top: 25px;
}

/*notices*/
.modal-notice{
    text-align: right;
}

.modal-notice .modal-dialog{
    width: 245px;
    margin-top: 78px;
    margin-right: 30px;
}

.modal-notice.fade .modal-dialog{
    transform: translate(25%,0);
}

.modal-notice.show .modal-dialog {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

.modal-body{
    text-align: center;
    padding: 0;
    padding-top: 4px;
}

.modal-image{
    text-align: center;
}

.modal-image *{
    max-width: 41px;
}

.modal-content{
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
    border-radius: 12px;
}

.modal-content:before{
    content: '';
    background-image: url(../images/support-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 190px;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-45%, -30%);
    top: 50%;
    bottom: 0;
    right: 0;
}

.modal-orange .modal-content{
    background: #e59c3c;
    box-shadow: 0px 13px 35px 0px rgba(121, 84, 36, 0.36);
}

.modal-red .modal-content{
    background: #cf5353;
    box-shadow: 0px 13px 35px 0px rgba(207, 83, 83, 0.36);
}


.modal-grey .modal-content{
    background: #26282c;
    box-shadow: 0px 13px 60px 0px rgba(0, 0, 0, 0.36);
}

.modal-green .modal-content{
    background: #6aa23e;
    box-shadow: 0px 13px 35px 0px rgba(106, 162, 62, 0.36);
}

.modal-red .modal-content:after,
.modal-green .modal-content:after,
.modal-grey .modal-content:after{
    content: '';
    background: rgba(255,255,255,.12);
    position: absolute;
    left: 0;
    right: -120%;
    bottom: 0;
    top: 0;
    transform: rotate(-37deg);
}

.modal-grey .modal-content{
    /*padding-right: 23px;*/
    /*padding-left: 23px;*/
}

.modal-grey .modal-text{
    padding: 0;
    margin-top: 30px;
}

.modal-grey .modal-content:after{
    background: rgba(255,255,255,.03);
    right: -150%;
}

.modal-grey .accept{
    height: 42px;
    border-width: 1px;
    border-color: rgba(255,255,255,.3);
    padding: 0;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 15px;
    margin-right: 23px;
    margin-left: 23px;
    width: initial;
    text-align: center;
}

.modal-notice .close{
    opacity: 1;
    text-align: right;
    z-index: 2;
}

.modal-notice .close span{
    display: inline-block;
    margin-right: 15px;
    margin-top: 11px;
    font-size: 20px;
    color: #ffffff;
    text-shadow: none;
}

/*.modal-grey .close span{*/
    /*margin-right: -10px;*/
/*}*/

.modal-big .modal-dialog{
    max-width: 914px;
    width: 100%;
}

.modal-big .modal-body{
    padding-left: 50px;
    padding-right: 50px;
}

.modal-big .modal-dialog .modal-content:after,
.modal-big .modal-dialog .modal-content:before{
    display: none;
}

.modal-text{
    margin-top: 17px;
    font-size: 13px;
    padding: 0 22px;
    line-height: 1.769;
}

.accept{
    position: relative;
    z-index: 99;
}

.acceptModal .modal-dialog{
    margin: 0 auto;
}

.acceptModal.fade .modal-dialog{
    transform: translate(0,-25%);
}

.acceptModal.fade.show .modal-dialog{
    transform: translate(0,0);
}

.pagination{
    display: none;
}

.pagination ul{
    display: flex;
    max-width: 290px;
    margin: 0 auto;
    justify-content: space-between;
}

.pagination ul a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.pagination ul a.active{
    border: 1px solid rgba(255,255,255,.3);
}

.forum .form-label{
    left: 0;
}

.forum input, .mail-page input{
    padding-left: 0;
}

.mail-page .form-label{
    left: 0;
}

.list-container{
    display: flex;
    justify-content: flex-end;
}

.list-container .tile{
    margin-left: 27px;
}

.list, .tile{
    display: inline-flex;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.list .list-icon, .tile .list-icon{
    margin-left: 10px;
}

.list:hover,.tile:hover{
    color: #e26906;
}

.list g,.tile g{
    transition: 0.3s ease-in-out;
}

.list:hover g,.tile:hover g{
    fill: #e26906;
}




@media(min-width: 1441px){
    .games .nav-tabs .nav-link{
        height: 200px;
    }
}
.center{
    text-align:center;
}

@media(max-width: 1440px){
    .visitor-block{
        margin-top: -15%;
    }
}

@media(max-width: 1279px){
    .feedback .heading > div p{
        margin-top: 40px;
    }
}

@media (min-width: 1200px){

}

@media (max-width: 1199px){
    .grey-form .btn{
        padding: 0;
    }

    .characters .table td,
    .characters .table th{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .mail-page .form-label{
        font-size: 18px;
    }

    .sell .col-xl-5{
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) and (max-width: 1199px){
    .games .nav-tabs .nav-link:hover:before, .games .nav-tabs .nav-link.active:before{
    	width: 160px;
    	height: 160px;
    }
    .game img{
    	display: block;
    	max-width: 80%;
    	margin: 0 auto;
    }
    .games-container .row{
        justify-content: space-between;
    }
    .games-container .row .d-flex{
        max-width: 45%;
    }
}

@media (min-width: 992px){
     .card-header .header-left {
        max-width: calc(100% - 50px);
    }
    .card-header .header-right {
        border-left: 1px solid #3b3d41;
    }

    .mail-page .header-nav .space-around,
    .ip-page .header-nav .space-around{
        max-width: calc(100% - 48px);
    }

    .basket .td-quantity{
        width: 15%;
    }

    .basket-step3 .table th:nth-child(3),
    .basket-step3 .table td:nth-child(3){
        text-align: right;
        padding-right: 40px;
        min-width: 150px;
    }

    .basket-step3 .table th:nth-child(4){
        text-align: right;
    }


 /*   .pay-step2 tbody td:nth-child(1){
        width:11%;
    }*/

    .ip-page .content-heading .col-lg-6:first-of-type{
        padding-right: 30px;
    }
    .ip-page .content-heading .col-lg-6:nth-of-type(2){
        padding-left: 30px;
    }
}


@media (min-width: 992px) and (max-width: 1199px){
    .character-image:before, .character-image:after {
        width: 60px;
    }

    .product .nav-link{
        padding: 15px;
    }

    .product-image{
        margin-right: 10px;
    }

    .authentication-2 .app{
        height: 140px;
        padding: 20px;
    }

    .authentication-2 .app-name{
        font-size: 12px;
    }

    .authentication-2 .app img{
        margin-bottom: 10px;
    }

    .characters .btn-submit{
        width: 177px;
    }

    .characters .btn-submit:first-of-type{
        margin-bottom: 10px;
    }

}

@media (min-width: 1371px) and (max-width: 1510px){
    .products-container.role_tiles .product {
        width: calc((100% - 20px) / 4);
        margin-left:0;
        height: 65px;
    }

    .role_tiles  .product:hover .nav-link, .role_tiles  .product.nav-item .nav-link.active {
        height: 90px;
    }
    .product-name{
        font-size: 12px;
    }
    .products-container .product:nth-child(3n){
        margin-right:0;
    }
    .product .nav-link{
        padding: 10px 5px;
    }
}
@media (min-width: 992px) and (max-width: 1370px){
    .products-container.role_tiles .product {
        width: calc((100% - 11px) / 3);
        margin-left:0;
        height: 65px;
    }

    .role_tiles  .product:hover .nav-link, .role_tiles  .product.nav-item .nav-link.active {
        height: 90px;
    }
    .product-name{
        font-size: 12px;
    }
    .products-container .product:nth-child(3n){
        margin-right:0;
    }
    .product .nav-link{
        padding: 10px 5px;
    }
}
@media (max-width: 991px){

    .tile-style .card {
        min-height: unset;
    }
    .card-footer{
        padding: 10px;
    }
    .card-header .header-right{
        position: absolute;right: 0;
        top: 0;
        border-left: none;
    }


    .cards .card-header{
        padding-right: 22px;
    }

    .card-header .header-left .card-name{
        margin-left: 5px;
        margin-right: 45px;
        height:auto;

    }

    .collapse-btn{
        margin-top: 10px;
    }

    .card-header .header-left .monster-class > *{
        max-width: 100%;
        white-space: normal;
    }

    .card-header .header-left .monster-class{
        flex-direction: column;
        align-items: flex-start;
    }

    .card-header .header-left .collapse-btn{
        margin-left: 0;
    }

    .card-header .header-left{
        /*flex-direction: column;*/
        margin-left: 5px !important;
        margin-right: 5px !important;
    }
    .card-header .header-left .checkbox{
        padding-right:25px;
    }

  /*  .tile-style .card-header .header-left{
        flex-direction: row;
    }*/
    .character{
        text-align: center;
    }
    .characters .table .online{
        width: 100%;
    }

    .character-image{
        display: inline-block;
        width: initial;
    }

    .character-image:before{
        left: -100px;
    }

    .character-image:after{
        left: 80px;
    }

    .qr{
        margin: 0 auto;
    }

    table {
        border: 0;
        border-radius: 0;
    }

    table thead {
        display: none;
    }

    table tr {
        margin-bottom: 25px;
        display: block;
        border-radius: 6px;
    }

    table td {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px solid rgba(255,255,255,.251);
    }

    table td:last-child {
        border-bottom: 0;
    }

    table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
        margin-right: 20px;
    }

    /*.characters .online:before, .characters .offline:before{*/
        /*color: #ffffff;*/
    /*}*/

    table td:first-of-type:before{
        margin-bottom: 20px;
    }

    /*basket-step3*/
    .basket-step3 .content-heading .row{
        flex-direction: column-reverse;
    }

    .basket-step3 .content-heading .row .col-lg-4{
        margin-bottom: 30px;
    }

    .td-quantity:before{
        line-height: 40px;
    }

    .online{
        margin-left: 0!important;
    }

    .online:before, .offline:before{
        display: none;
    }

    .mail-page .col-lg-6{
        margin-top: 30px;
        padding-right: 15px;
    }

    .mail-page .col-lg-6:last-of-type{
        padding-left: 15px;
        border: none;
    }

    .history td.no-wrap{
        text-align: left;
    }

    .history-visits .table td:last-child,
    .history-visits .table td:nth-child(4), .history-visits .table th:nth-child(4){
        text-align: left;
    }

    .your-ip{
        text-align: left;
    }

    .modal-big .modal-dialog{
        max-width: 95%;
    }

    .pay-step2 .table td{
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .recovery-block .btn-submit{
        width: 100%;
        padding: 0;
    }

    .recovery-block .btn-submit:before{
        display: none!important;
    }

    .table-sell td:last-child{
        text-align: left;
    }

    .statistics .table td:last-child, .statistics .table th:last-child{
        text-align: left;
    }

    .products-container.role_tiles .product {
        width: calc((100% - 11px) / 2);
        margin-left:0;
        height: 65px;
    }

    .role_tiles  .product:hover .nav-link, .role_tiles  .product.nav-item .nav-link.active {
        height: 90px;
    }
    .product-name{
        font-size: 12px;
    }
    .products-container .product:nth-child(3n){
        margin-right:0;
    }
    .product .nav-link{
        padding: 10px 5px;
    }
}

@media (min-width: 768px) and (max-width: 991px){
    .header .row.two-items .aside-nav-link{
        margin: 0 50px;
    }

    .pay-step2 .content .content-heading{
        padding-bottom: 15px;
    }

    .header{
        left: 78px;
    }

    .header .header-nav{
        margin-right: 78px;
    }

    .header .aside-nav-link:nth-child(2){
        margin: 0 20px;
    }

    .history .header .aside-nav-link:nth-child(2){
        margin: 0 50px;
    }

    .product .nav-link{
        padding: 15px 5px;
    }
    .product-image{
        display:none;
    }

    .cards .card-header{
        display: block;
    }

    .card-header .header-left {
        justify-content: space-around;
        align-items: self-start;
    }

    .monster-class{
        margin-bottom: 0;
    }

    .add-cart{
        display: block;
    }

    .add-cart .checkmark{
        top: -4px;
    }

    .characters .table td:last-child{
        display: flex;
        align-items: center;
    }

    .inventory .table td:first-of-type{
        display: flex;
        align-items: center;
    }

    .inventory .table td:first-of-type:before{
        margin-bottom: 0;
        margin-right: 50px;
    }

    .inventory .table td:nth-last-child(2){
        text-align: left;
    }

    .inventory .table td:last-child{
        display: flex;
        align-items: center;
    }
}

@media (max-width: 767px) {

    .product-image{
        display:none;
    }
        /* .tile-style .card-header .header-left .card-name{
             margin-left: 12px;
         }*/
    .list-type{
        margin-bottom: 20px;
    }

    .cards .card-header {
        display: block;
    }

    .menu-show .iScrollVerticalScrollbar{
        display: none;!important;
    }

    .visitor-container{
        position: relative;
        transform: none;
        top: 0;
        left: 0;
        margin-bottom: 25px;
    }

    .chat-header{
        flex-direction: column;
    }
    .main-page .form-control{
        max-width: 100%;
    }

    .authentication .app .app-logo{
        margin-top: -25px;
    }

    .step .btn-group-toggle .btn{
        font-size: 12px;
    }

    .welcome .content{
        margin-top: 48px;
    }

    .welcome .footer{
        position: relative;
        margin-top: 50px;
        padding: 0;
        margin-bottom: 30px;
    }

    .btn{
        width: 290px;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
        display: block;
        margin: 0 auto;
    }

    .logo .quantity{
        display: none;
    }

    .content{
        background-image: none !important;
        padding-top: 55px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .cards{
        margin-top: 0;
    }

    .header{
        left: 0;
    }

    .aside{
        top: 0;
        padding-top: 0;
        z-index: 2;
    }

    #wrapperScroll{
        width: 0;
    }

    .menu-show #wrapperScroll{
        width: 100%;
        overflow-y: scroll;
        max-height: 900px;
        margin-top: 0;
        padding-top: 70px;
    }

    #scroller{
        height: 1200px;
    }

    .menu-show .menu-btn-row{
        background: transparent;
        padding: 0;
    }

    .menu-show .wrapper{
        max-height: 100vh;
    }

    .menu-show .menu-btn-row:after/*, .aside-account*/{
        display: none;
    }

    .aside-account{
        margin-left: 50px;
    }
    .aside-account .name{
        display: none;
    }

    .menu-btn{
        position: fixed;
        top:12px;
        left: 25px;
    }

    .menu-show .menu-btn span{
        transform: rotate(45deg);
    }

    .menu-show .menu-btn span:before {
        left: 0;
        transform: rotate(90deg);
        top: -1px;
        width: 23px;
    }

    .menu-show .menu-btn span:after{
        opacity: 0;
        transform: rotate(0);
        transition: .3s ease-in-out;
    }



    .main{
        left: 0;
        width: 100%;
    }

    .aside{
        /*position: absolute;*/
        right:100%;
        width: 0;
        transition: .3s ease-in-out;
    }

    .menu-show .aside{
        position: fixed;
        width: 100%;
        right: 0;
        z-index: 3;
        transition: .3s ease-in-out;
    }

    .aside{
        bottom: auto;
        padding-bottom: 0;
    }

    .aside a{
        line-height: 40px;
    }

    .menu-show .aside a{
        padding-left: 35px;
    }

    .aside .logo a {
        display: inline-block;
        padding-left: 0;
        width: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .aside a:before{
        display: none;
    }

    .aside a .svg{
        display: none;
    }

    .aside-nav-group{
        margin-bottom: 15px;
    }

    .logo{
        width: auto;
        left: 50%;
        transform: translateX(-50%);
        background: transparent;
    }

    .menu-show .logo{
        display: none;
    }

    .header-nav{
        line-height: 1.6;
    }

    .header .aside-nav-link{
        /*margin: 75px 1px 0;*/
        /*z-index: 2;*/
        /*width: 32.9%;*/
        /*text-align: center;*/
        display: none;
    }

    .header .aside-nav-link:nth-child(2){
        margin: 75px 0 0;
    }

    .menu-show .aside a:hover {
        background: transparent;
    }

    .catalog-page .heading p:first-child{
        margin-bottom: 20px;
        font-size: 12px;
        color: #ffffff;
    }


    .heading span{
        transform: translateY(3px);
    }

    /* .callback, .footer .change{
        display: none;
    }*/

    .cards .card-header{
        display: block;
    }

    .card-header .header-right{
        text-align: right;
        display: block;
    }

    .add-cart{
        margin-bottom: 0;
    }

    /*.watermelon-block .amount{*/
        /*text-align: right;*/
    /*}*/

    .monster-class{
        font-size: 12px;
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .card-name .name{
        font-size: 16px;
    }

    .footer p{
        display: none;
    }

    .pagination{
        display: block;
    }

    /*authentication*/
    .authentication .apps{
        display: block;
    }

    .authentication .apps .app{
        display: block;
        margin: 0 auto 20px;
    }

    .characters .table td:last-child{
        text-align: left;
    }

    .characters .table td:last-child .btn-submit{
        width: 170px;
        margin-top: 10px;
        margin-left: 0;
    }

    .characters .table td:last-child:before{
        float: none;
    }

    /*chat*/
    .message{
        max-width: 90%;
    }

    .chat .date{
        font-size: 12px;
        padding: 12px 15px;
    }

    .chat-footer{
        display: block;
    }

    .chat-footer .btn-submit{
        min-width: 100%;
    }

    /*feedback*/
    .feedback-link a{
        display: block;
    }

    .feedback-link .arrow{
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.1);
        height: 50px;
    }

    .grey-form{
        padding: 20px 10px;
    }


    .grey-form .row{
        margin: 0;
    }

    .grey-form .row > div{
        padding: 0;
    }

    .feedback .grey-form .heading{
        padding: 10px 0;
    }

    .history .table td:nth-last-of-type(2){
        display: flex;
    }

    .bg-image{
        position: absolute;
        top: 0;
        left: 0;
    }

    .choosen-game{
        margin-top: 20px;
    }

    .games-container{
        top: 0;
        transform: none;
    }

    .games-container .col-md-6:first-of-type{
        padding: 0;
    }

    .games-container .form{
        margin-top: 20px;
    }

    .games-container .form-group{
        margin-bottom: 20px;
    }

    .games{
        overflow-x: auto;
        overflow-y: hidden;
        margin-top: 30px;
    }
    /* хром, сафари */
    .games::-webkit-scrollbar { width: 0; }

    /* ie 10+ */
    .games { -ms-overflow-style: none; }

    /* фф (свойство больше не работает, других способов тоже нет)*/
    .games { overflow: -moz-scrollbars-none; }

    .games .nav-tabs{
        width: 430px;
        display: flex;
        flex-direction: row!important;
        margin: 0 auto;
    }

    .games .nav-tabs .nav-link{
        max-width: 100px;
    }

    .games .nav-tabs .nav-item:not(:last-of-type){
        margin-right: 10px;
    }

    .games .nav-tabs .nav-link:after{
        content: '';
        width: 100px;
        height: 100px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 50%;
        position: absolute;
        display: inline-block;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .games .game, .games .game img{
        max-width: 100%;
    }

    .game-name{
        font-size: 33px;
    }

    .games .nav-tabs .nav-link:hover:before, .games .nav-tabs .nav-link.active:before{
        width: 100px;
        height: 100px;
    }

    .form-group.login:before, .form-group.password:before{
        left: -10px;
    }

    .main-page footer{
        position: relative;
        left: 0;
        flex-direction: column-reverse;
        margin-top: 70px;
        text-align: center;
        bottom: 0;
        margin-bottom: 30px;
    }

    .main-page .wrapper{
        overflow-y: auto;
        overflow-x: hidden;
        background: rgba(0,0,0,.95);
    }

    .bg-image:after{
        display: none;
    }

    footer .copyright{
        margin-top: 10px;
    }

    .inventory .table td:first-of-type:before{
        display: block;
        float: none;
    }

    .inventory .table td:nth-last-child(2){
        text-align: left;
    }

    .inventory .table td:last-child{
        display: flex;
        align-items: center;
    }

    .inventory .btn{
        width: 150px;
        margin-left: 0;
    }

    .inventory-container{
        display: block;
    }

    .inventory-container .img{
        margin-bottom: 20px;
    }

    .step .btn-submit{
        width: 100%;
        letter-spacing: 1.5px;
    }

    .modal-notice.show .modal-dialog{
        margin: 50px auto;
    }


    .modal-big .modal-body{
        padding-left: 20px;
        padding-right: 20px;
    }

    .modal-grey .modal-text{
        margin-top: 10px;
    }

    .payment-card{
        max-width: 330px;
        margin: 0 auto;
    }

    .pay footer{
        position: relative;
        margin-top: 50px;
    }

    .pay .heading p{
        margin-top: 70px;
    }

    .pay-step2 .btn{
        width: 270px;
    }

    .sell .btn-group-toggle .btn{
        font-size: 11px;
    }
}

@media (min-width: 768px) and (max-width: 1440px) and (max-height: 850px){
    .enter-login{
        margin-top: 35px;
    }
    .recovery-block .form{
        margin-top: 15px;
    }
    .main-page .form-control:focus~.form-label, .main-page .form-control:not(:focus):valid~.form-label{
        top: -15px;
    }
    .welcome .footer{
        height: initial!important;
    }
}

@media (min-width: 768px) and (max-width: 1440px) and (max-height: 800px){
    .enter-login{
        margin-top: 15px;
    }
}

@media (min-width: 768px) and (max-width: 1440px) and (max-height: 750px){
    .games-container .form-group{
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) and (max-width: 1440px) and (max-height: 700px){
    .game-name{
        font-size: 34px;
    }

    .games .nav-tabs .nav-link{
        height: 120px;
    }

    .games .nav-tabs .nav-link:before{
        display: none;
    }

    .games-container .form{
        margin-top: 15px;
    }
    .games-container .form-group{
        margin-bottom: 30px;
    }
    .form-control{
        height: 48px;
    }
    .form-group.login:before, .form-group.password:before{
        bottom: 15px;
    }
    .main-page .form-group input{
        padding-bottom: 10px;
    }
    .btn-submit{
        height: 60px;
    }
    .visitor-block{
        margin-top: -30%;
    }
}

@media (min-width: 768px) and (max-width: 1440px) and (max-height: 600px){
    .main-page footer{
        bottom: 20px;
    }
    .game-name{
        margin-top: 10px;
    }
    .visitor-block{
        margin-top: -45%;
    }
}

@media (min-width: 768px) and (max-width: 1440px) and (max-height: 550px){
    .games .nav-tabs .nav-link{
        height: 90px;
    }
    .game-name{
        font-size: 28px;
    }
    .games-container .form-group{
        margin-bottom: 10px;
    }
    .btn-submit{
        height: 50px;
    }
    .visitor{
        font-size: 28px;
    }
}

@media (min-width: 768px) and (max-width: 1440px) and (max-height: 500px){
    .recovery-block{
        padding: 0;
    }
    .games-container .form {
        margin-top: 5px;
    }
    .main-page footer{
        bottom: 10px;
    }
    .games-container{
        top: -52%;
    }
    .welcome .footer{
        padding-bottom: 15px;
    }
}
@media (min-width: 768px) and (max-width: 1440px){
    .product-name{
        font-size: 11px;
    }
}



.transparent-bg-input{
    background: transparent;
    border: transparent;

}

/*@media (max-width: 414px) {*/
    /*.aside-nav-link {*/
        /*position: relative;*/
    /*}*/

    /*.aside-nav-link a{*/
        /*position: absolute;*/
        /*left: 50%;*/
        /*transform: translateX(-50%);*/
        /*text-align: left;*/
    /*}*/

/*}*/





.popover{
    max-width: 800px;

}
.popover-body IMG{
    width: 100%;
}

.basket-step3 .grfield2,
.basket-step3 .grfield {
    width: 80px;
    padding: 8px 10px;
    border-radius: 3px;
    height: 42px;
    margin-bottom: 0;
    text-align: center;
}

.basket-step3 .grfield {
    display: inline-block;
    background: #1c1e21;
    color: #ffffff;
    font-family: 'GothamPro-Bold';
}
/*
.collapsible .hidden,
.collapsible.collapsed .shown_cut{
    display:none;
}
.collapsed .hidden{
    display:block;
}*/
.pointer{
    cursor:pointer;
}
.pointermore{
    cursor:help;
}

[v-cloak] > * { display:none; }
[v-cloak]::before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
}