@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 300;
    font-style: normal;

    font-display: swap;
    src: url('../fonts/FFMetaPro-Light.woff') format('woff'),
    url('../fonts/FFMetaPro-Light.ttf') format('truetype');
}

@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 300;
    font-style: italic;

    font-display: swap;
    src: url('../fonts/FFMetaPro-LightItalic.woff') format('woff'),
    url('../fonts/FFMetaPro-LightItalic.ttf') format('truetype');
}

@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 400;
    font-style: normal;

    font-display: swap;
    src: url('../fonts/FFMetaPro-CondensedNormal.woff') format('woff'),
    url('../fonts/FFMetaPro-CondensedNormal.ttf') format('truetype');
}

@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 400;
    font-style: italic;

    font-display: swap;
    src: url('../fonts/FFMetaPro-CondensedNormalItalic.woff') format('woff'),
    url('../fonts/FFMetaPro-CondensedNormalItalic.ttf') format('truetype');
}

@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 500;
    font-style: normal;

    font-display: swap;
    src: url('../fonts/FFMetaPro-CondensedMedium.woff') format('woff'),
    url('../fonts/FFMetaPro-CondensedMedium.ttf') format('truetype');
}

@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 500;
    font-style: italic;

    font-display: swap;
    src: url('../fonts/FFMetaPro-CondensedMediumItalic.woff') format('woff'),
    url('../fonts/FFMetaPro-CondensedMediumItalic.ttf') format('truetype');
}

@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 900;
    font-style: normal;

    font-display: swap;
    src: url('../fonts/FFMetaPro-CondensedBook.woff') format('woff'),
    url('../fonts/FFMetaPro-CondensedBook.ttf') format('truetype');
}

@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 800;
    font-style: normal;

    font-display: swap;
    src: url('../fonts/FFMetaPro-CondensedExtrabold.woff') format('woff'),
    url('../fonts/FFMetaPro-CondensedExtrabold.ttf') format('truetype');
}

@font-face
{
    font-family: 'FFMetaPro';
    font-weight: 800;
    font-style: italic;

    font-display: swap;
    src: url('../fonts/FFMetaPro-CondensedExtraboldItalic.woff') format('woff'),
    url('../fonts/FFMetaPro-CondensedExtraboldItalic.ttf.ttf') format('truetype');
}


*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*:before,
*:after
{
    box-sizing: border-box;
}

img
{
    border: none;
}

textarea
{
    overflow: auto;
}

input,
textarea,
input:active,
textarea:active
{
    -webkit-border-radius: 0;
            border-radius: 0;
         outline: none transparent !important;
    box-shadow: none;

    -webkit-appearance: none;
            appearance: none;
    -moz-outline: none !important;
}

input[type=submit],
button[type=submit],
input[type=reset],
button[type=reset]
{
    -webkit-border-radius: 0;

    -webkit-appearance: none;
}

:focus
{
    outline: none;
}

:hover,
:active
{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}


::-ms-clear
{
    display: none;
}



/*---------------
    Main styles
---------------*/
html
{
    height: 100%;

    background: #000000;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
        -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}


body
{
    height: 100%;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-overflow-scrolling: touch;
    text-rendering: optimizeLegibility;
    text-decoration-skip: objects;

    font: 14px 'FFMetaPro';
    color: #9a97a0;
}

b{
    font-weight: 800;
}

.main{
    min-height: 100%;
    overflow: hidden;
}


::-webkit-input-placeholder
{
    color: rgba(242,242,242,.5);
}

:-moz-placeholder
{
    color: rgba(242,242,242,.5);
}

:-ms-input-placeholder
{
    color: rgba(242,242,242,.5);
}


.modal_cont
{
    position: relative;
}

.mini_modal
{
    position: absolute;
    z-index: 999;
    top: calc(100% + 30px);
    left: 0;

    visibility: hidden;

    transition: .2s linear;

    opacity: 0;
}

.mini_modal.active
{
    top: 100%;

    visibility: visible;

    opacity: 1;
}


.scroll_el{
    overflow-x: auto;
    height: calc(100% - 55px);
}

.scroll_el::-webkit-scrollbar
{
    width: 6px;
    height: 4px;

    border-radius: 0;
    background-color: transparent;

    -webkit-appearance: none;
}

.scroll_el::-webkit-scrollbar-thumb
{
    border-radius: 0;
    background-color: #0d0c11;
}


.flex
{
    display: flex;

    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}


.main__title
{
    color: #001424;
    font-size: 24px;
    font-weight: 700;
    line-height: 40px;
}




.check_small input[type=checkbox]
{
    display: none;
}

.check_small
{
    display: block;

    height: 17px;
    width: 17px;
}

.check_small .label_check{
    display: block;
}

.check_small .label_check input[type=checkbox] + .check_text
{
    display: block;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
}

.check_small .label_check input[type=checkbox] + .check_text:before{
    position: absolute;
    top: 0;
    left: 0;

    width: 17px;
    height: 17px;

    content: '';
    transition: .2s linear;
    border-radius: 2px;
    border: 2px solid #a4a2a9;
    transition: .2s linear;
}

.check_small .label_check input[type=checkbox]:checked + .check_text:before{
    background: #9a97a0;
    border-color: #9a97a0;
}

.check_small .label_check input[type=checkbox] + .check_text:after
{
    position: absolute;
    top: 0;
    left: 0;

    width: 17px;
    height: 17px;

    content: '';
    transition: .2s linear;
    background: url(../images/ic_check.svg) 50% no-repeat;
    opacity: 0;
}

.check_small .label_check input[type=checkbox]:checked + .check_text:after
{
    opacity: 1;
}



.check_normal input[type=checkbox]
{
    display: none;
}

.check_normal .label_check
{
    display: table-cell;

    cursor: pointer;
    vertical-align: middle;
    height: 35px;
}

.check_normal .label_check .check_text
{
    position: relative;

    display: block;

    padding-left: 30px;
    line-height: 21px;

    transition: .2s linear;
}

.check_normal .label_check input[type=checkbox]:checked + .check_text{
    color: #fff;
}

.check_normal .label_check input[type=checkbox] + .check_text:before{
    position: absolute;
    top: 2px;
    left: 0;

    width: 17px;
    height: 17px;

    content: '';
    transition: .2s linear;
    border-radius: 2px;
    border: 2px solid #a4a2a9;
    transition: .2s linear;
}

.check_normal .label_check input[type=checkbox]:checked + .check_text:before{
    background: #9a97a0;
    border-color: #9a97a0;
}

.check_normal .label_check input[type=checkbox] + .check_text:after
{
    position: absolute;
    top: 2px;
    left: 0;

    width: 17px;
    height: 17px;

    content: '';
    transition: .2s linear;
    background: url(../images/ic_check.svg) 50% no-repeat;
    opacity: 0;
}

.check_normal .label_check input[type=checkbox]:checked + .check_text:after
{
    opacity: 1;
}
/*---------------
   Header
---------------*/
header
{
    background: #292530;
    padding: 13px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

header .user .logo{
    width: 35px;
    height: 35px;
    background: #45414f;
    border-radius: 50%;

    font-size: 16px;
    line-height: 35px;
    text-align: center;
    overflow: hidden;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
}

header .user .box{
    width: calc(100% - 43px);
    margin-left: 8px;
}

header .user .name{
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Fira Sans';
}

header .user .link{
    line-height: 16px;
}

header .user .link a{
    font-size: 16px;
    color: #9a97a0;
    font-weight: 500;
    text-decoration: none;
}

header .list_fate{
    border: 1px solid #45414e;
    overflow: hidden;
    border-radius: 2px;
}

header .list_fate .item a{
    padding: 0 13px;
    display: block;
    font-size: 16px;
    line-height: 33px;
    color: #9a97a0;
    font-weight: 500;

    text-decoration: none;
}

header .list_fate .item a.active,
header .list_fate .item a:hover{
    background: rgba(53,49,61,.77);
}

header .datepicker-here{
   width: 230px;
   height: 35px;
   border: 1px solid #45414e;
   border-radius: 2px;
   background: transparent url(../images/ic_date.svg) 12px 50% no-repeat;
   font: 15px 'Fira Sans';
   color: #cccccc;
   padding: 0 15px 0 38px;
   margin-left: 12px;

}

header .datepicker-style{
   width: 230px;
   height: 35px;
   border: 1px solid #45414e;
   border-radius: 2px;
   background: transparent url(../images/ic_date.svg) 12px 50% no-repeat;
   font: 15px 'Fira Sans';
   color: #cccccc;
   padding: 0 15px 0 38px;
   margin-left: 12px;

}

header .open_list{
    width: 20px;
    height: 19px;
    display: block;
    background: url(../images/ic_list.svg) 0 0 no-repeat;
}

/*---------------
   Main section
---------------*/
.page_contant{
    margin-left: -1px;
}

.block_page{
    width: 33.333%;
    border-top: 1px solid #0c0b10;
    border-left: 1px solid #0c0b10;
    background: #292530;

    position: relative;
    display: block;
    overflow-x: hidden;
}

.block_page .handle{
    content: '';
    position: absolute;
    left: 5px;
    top: 19px;
    width: 5px;
    height: 17px;
    background: url(../images/ic_sortable.svg) 0 0 no-repeat;
    z-index: 99;
    opacity: 0;
    transition: .2s linear;
}

.block_page:hover .handle{
    opacity: 1;
}
.block_page:hover .user-info-sort-block .handle{
    top: 15px;
    opacity: 0;
}
.block_page:hover .user-info-sort-block:hover .handle{
    top: 15px;
    opacity: 1;
}


.top_el{
    padding: 15px 20px;
    flex-wrap: nowrap;
    position: relative;
    background: #2e2b36;
    align-items: center;

    border-bottom: 1px solid #0c0b10;
}

.choice_el{
    position: relative;
    margin-right: 14px;
    width: 32px;
    height: 20px;
    align-items: center;
    align-content: center;
}

.choice_el .modal_cont{
    width: 15px;
    height: 17px;
    position: static;
}

.choice_el .modal_cont .mini_modal_link{
    width: 15px;
    height: 17px;
    display: block;
    position: relative;
}

.choice_el .modal_cont .mini_modal_link:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    right: 0;
    border: 4px solid transparent;
    border-top: 4px solid #a4a2a9;

    margin-top: -3px;
}

.choice_el .mini_modal{
    background: #35313d;
    padding: 15px;
    min-width: 146px;
}

.choice_el .mini_modal.active{
    top: calc(100% + 17px);
}

.choice_el .menu div{
    white-space: nowrap;
}

.choice_el .menu div + div{
    margin-top: 14px;
}

.choice_el .menu a{
    font-size: 15px;
    font-weight: 900;
    color: #9a97a0;
    transition: .2s linear;
    text-decoration: none;
}

.choice_el .menu a:hover{
    color: #fff;
}

.top_el .title{
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #9a97a0;
    font-weight: 500;
    margin-right: auto;
    line-height: 25px;
    padding-right: 18px;
    max-width: calc(100% - 58px);
}

.top_el.lot .title{
    max-width: calc(100% - 128px);
}

.refresh{
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 18px;
}

.refresh svg{
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.refresh svg  path{
    transition: .2s linear;
}

.refresh:hover svg path{
    fill: #fff;
}

.modal_search{
    position: static;
}

.link_search{
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link_search svg{
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.link_search svg  path{
    transition: .2s linear;
}

.link_search:hover svg path{
    fill: #fff;
}

.search{
    top: 10px;
    left: 20px;
    width: calc(100% - 40px);
    background: #2e2b36;
}

.search.active{
    top: 10px;
}

.search form{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.search .input{
    width: 100%;

    height: 35px;
    border: 1px solid #45414e;
    border-radius: 2px;
    background: transparent;
    font: 15px 'Fira Sans';
    color: #cccccc;
    padding: 0 40px 0 15px;
}

.search .submit_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 35px;
    height: 35px;
    margin-left: -35px;
}

.search .submit_btn svg{
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.search .submit_btn svg  path{
    transition: .2s linear;
}

.search .submit_btn:hover svg path{
    fill: #fff;
}

.small_menu{
    margin-left: 18px;
}

.small_menu .mini_modal_link{
    width: 20px;
    height: 20px;
    padding-top: 3px;
    display: block;
}

.small_menu .mini_modal_link span{
    margin: 1px auto 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c4c0cc;
    transition: .2s linear;
    display: block;
}

.small_menu .mini_modal_link span + span{
    margin-top: 2px;
}

.small_menu .mini_modal_link:hover span{
    background: #fff;
}

.small_menu .mini_modal{
    right: 0;
    left: auto;
    background: #35313d;
    padding: 15px;
    min-width: 146px;
}

.small_menu .mini_modal.active{
    top: calc(100% + 17px);
}

.small_menu .menu div{
    white-space: nowrap;
}

.small_menu .menu div + div{
    margin-top: 14px;
}

.small_menu .menu  a{
    font-size: 15px;
    font-weight: 900;
    color: #9a97a0;
    transition: .2s linear;
    text-decoration: none;
}

.small_menu .menu a:hover{
    color: #fff;
}



.finance_all .item{
    border-bottom: 1px solid #0c0b10;
    background: #292530;
    padding: 20px;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
}

.finance .item{
    border-bottom: 1px solid #0c0b10;
    background: #292530;
    padding: 20px;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
}

.finance .item:after{
    content: '';
    position: absolute;
    right: 20px;
    bottom: 12px;
    width: 8px;
    height: 14px;
    background: url(../images/arrow1.svg) 0 0 no-repeat;
    z-index: 1;
    opacity: 0;
}

.finance .item:hover:after{
    opacity: 1;
}

.finance .item .box{
    width: calc(100% - 140px);
}

.finance .item .name{
    font-size: 16px;
    color: #9a97a0;
    font-weight: 900;
}

.finance .item .amount{
    font-size: 24px;
    font-weight: 500;
    color: #cccccc;
    font-family: 'Fira Sans';
    margin-top: 5px;
}

.finance .item .chart{
    width: 120px;
}

.finance .item .chart img{
    display: block;
    margin-left: auto;
    max-height: 100%;
}


.list_users .item{
    position: relative;
}

.list_users .item > a{
    text-decoration: none;

    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid #0c0b10;
    background: #292530;
    padding: 12px 20px;
}

.list_users .item > a:visited,
.list_users .item > a.visited{
    background: #2e2b36;
}

.list_users .item.choice_user > a{
    background: #35313d;
}

.list_users .item .handle{
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 17px;
    background: url(../images/ic_sortable.svg) 0 0 no-repeat;
    z-index: 99;
    opacity: 0;
    transition: .2s linear;
}

.list_users .item:hover .handle{
    opacity: 1;
}
.list_users .item.hidden{
    display: none;
}

.list_users .item > a:after{
    content: '';
    position: absolute;
    right: 20px;
    bottom: 12px;
    width: 8px;
    height: 14px;
    background: url(../images/arrow1.svg) 0 0 no-repeat;
    z-index: 1;
    opacity: 0;
}

.list_users .item > a:hover:after{
    opacity: 1;
}

.list_users .item.no_after > a:hover:after{
    opacity: 0;
}


.list_users .item .small_menu{
    position: absolute;
    right: 18px;
    bottom: 6px;
    width: 26px;
    height: 26px;
}

.list_users .item .small_menu .mini_modal_link{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    width: 26px;
    height: 26px;
}

.list_users .item .small_menu .mini_modal_link span{
    margin: 0;
    width: 4px;
    height: 4px;
}

.list_users .item .small_menu .mini_modal_link span + span{
    margin: 0 0 0 3px;
}

.list_users .item .small_menu .mini_modal{
    display: none;
}

.list_users .item .small_menu .mini_modal.active{
    display: block;
    top: 100%;
}

.list_users .check_small .label_check input[type=checkbox] + .check_text:before{
    border-color: #44414d;
}

.list_users .check_small .label_check input[type=checkbox]:checked + .check_text:before{
    border-color: #9a97a0;
}

.list_users .box{
    width: calc(100% - 82px);
}

.list_users .bank{
    width: 34px;
    height: 34px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #46434f;
    margin-bottom: 20px;
}

.list_users .bank img{
    display: block;
    max-height: 100%;
    max-width: 100%;
}

.list_users .top{
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
}

.list_users .name{
    font-size: 14px;
    color: #e0e0e0;
    margin-right: 10px;
}

.list_users .offlite{
    width: 6px;
    height: 6px;
    background: #44414d;
    border-radius: 50%;
    margin-right: 10px;
}

.list_users .onlite{
    width: 6px;
    height: 6px;
    background: #e0e0e0;
    border-radius: 50%;
    margin-right: 10px;
}

.list_users .playing{
    width: 6px;
    height: 6px;
    margin-right: 10px;
    position: relative;
}

.list_users .playing:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -3px;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-left: 6px solid #f1f1f2;
}

.list_users .time{
    margin-left: auto;
    font-size: 14px;
    font-weight: 300;
    color: #9a97a0;
}

.list_users .time .number{
    font-family: 'Fira Sans';
}

.list_users .time .sep{
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 4px;
    background: #9a97a0;
    border-radius: 50%;
    margin: 0 2px;
}

.list_users .time span{
    text-transform: uppercase;
}

.list_users .info{
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    margin-top: 2px;
}

.list_users .activity{
    font-size: 14px;
    line-height: 19px;
    color: #9a97a0;
}

.list_users .vip{
    padding: 0 4px;
    line-height: 14px;
    background: #c8c8ce;
    border-radius: 2px;
    font-weight: 500;
    color: #292530;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    margin-left: 10px;
}

.list_users .bot{
    align-items: center;
    align-content: center;
    margin-left: -8px;
}

.list_users .act{
    font-size: 14px;
    line-height: 19px;
    color: #9a97a0;
    margin-left: 8px;
}

.list_users .act span{
    font-family: 'Fira Sans';
    line-height: 16px;
}

.list_users .manager{
    width: 18px;
    height: 18px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    margin-left: 8px;

    background-color: #45414f;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    text-transform: uppercase;
}

.list_users .manager_act{
    font-size: 14px;
    line-height: 19px;
    color: #9a97a0;
    margin-left: 8px;
}


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


.page_login .form_login{
    width: 400px;
    max-width: calc(100% - 20px);
    padding: 30px;
    background: #2e2b36;
    border-radius: 2px;
    border: 1px solid #0c0b10;
    margin: auto 0;
}

.page_login .form_login .title{
    font-size: 30px;
    font-weight: 500;
    color: #cccccc;
    text-align: center;
    margin-bottom: 30px;
}

.page_login .form_login .line_form{
    margin-bottom: 20px;
}

.page_login .form_login .input{
    width: 100%;

    height: 45px;
    border: 1px solid #45414e;
    border-radius: 2px;
    background: transparent;
    font: 15px 'Fira Sans';
    color: #cccccc;
    padding: 0 15px;
}

.page_login .form_login .submit{
    text-align: center;
}

.page_login .form_login .submit_btn{
    display: inline-block;
    vertical-align: top;
    background: #45414e;
    border: none;
    height: 45px;
    border-radius: 2px;
    font: 20px 'FFMetaPro';
    color: #e0e0e0;
    cursor: pointer;
    transition: .2s linear;
    min-width: 200px;
    padding: 0 25px;
    text-transform: uppercase;
}

.page_login .form_login .submit_btn:hover{
    background: #0c0b10;
    color: #fff;
}

.lang{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;

    margin-bottom: 20px;
}

.lang .sep{
    color: #9a97a0;
    margin: 0 4px;
}

.lang a{
    font-size: 16px;
    color: #9a97a0;
    text-decoration: none;
    transition: .2s linear;
    text-transform: uppercase;
    font-weight: 500;
}

.lang a:hover,
.lang a.active{
    color: #fff;
}

.sortable_placeholder{
    border: 3px solid #292530;
    width: 33.333%;
    height: 100px;
    margin-top: 20px;
}




/*DENIS*/
#add-field-template{
    display: none;
}
#add-parameter-template{
    display: none;
}
#user-info-template{
    display: none;
}
.add-field-form{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #2e2b36;
    z-index: 100;
    top: 0;
    left: 100%;
    transition: all 300ms ease-out;
}
.add-field-form.showfield{
    left: 0;
}
.add-field-form.hidefield{
    transition: all 300ms ease-in;
    left: 100%;
}

.add-field-form .top_el{
    border: 0;
}
.add-parameter-form{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #2e2b36;
    z-index: 100;
    top: 0;
    left: 100%;
    transition: all 300ms ease-out;
}
.add-parameter-form.showfield{
    left: 0;
}
.add-parameter-form.hidefield{
    transition: all 300ms ease-in;
    left: 100%;
}

.add-parameter-form .top_el{
    border: 0;
}
.add-parameter-form{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #2e2b36;
    z-index: 100;
    top: 0;
    left: 100%;
    transition: all 300ms ease-out;
}
.add-parameter-form.showfield{
    left: 0;
}
.add-parameter-form.hidefield{
    transition: all 300ms ease-in;
    left: 100%;
}

.add-parameter-form .top_el{
    border: 0;
}
.user-info-form{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #2e2b36;
    z-index: 100;
    top: 0;
    left: 100%;
    transition: all 300ms ease-out;
}
.user-info-form.showfield{
    left: 0;
}
.user-info-form.hidefield{
    transition: all 300ms ease-in;
    left: 100%;
}

.user-info-form .top_el{
    border: 0;
}
.user-info-form .top_el{
    margin-bottom: 20px;
}
.add-field-back{
    position: relative;
    top: -2px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
.add-field-input{
    position: relative;
    margin: 0 15px;
    margin-bottom: 10px;
}
.add-field-input .input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 0;
    border-bottom: 1px solid #45414e;
    border-radius: 0;
    background: transparent;
    font: 15px 'Fira Sans';
    color: #cccccc;
}
.item-field{
    position: relative;
    display: block;
    background: #292530;
}
.item-field .handle{
    content: '';
    position: absolute;
    left: 5px;
    top: 25px;
    transform: translateY(-50%);
    width: 5px;
    height: 17px;
    background: url(../images/ic_sortable.svg) 0 0 no-repeat;
    z-index: 99;
    opacity: 0;
    transition: .2s linear;
}
.item-field:hover .handle{
    opacity: 1;
}
.item-field-data{
    margin: 0 15px;
    border-bottom: #35313d solid 1px;
}
.item-field-title{
    line-height: 50px;
    top: 2px;
    font: 15px;
    color: #cccccc;
}
.item-field-title svg{
    position: absolute;
    right: 35px;
    top: 25px;
    margin-top: -7px;
    transition: all 200ms ease-out;
}
.item-field .small_menu{
    position: absolute;
    right: 7px;
    top: 25px;
    margin-top: -10px;
    opacity: 0;
    visibility: hidden;
    transition: all 200ms linear;
}
.item-field:hover .item-field-title svg{
    right: 35px;
}
.item-field:hover .small_menu{
    opacity: 1;
    visibility: visible;
}
.item-field .small_menu .mini_modal.active {
    top: calc(100% + 5px);
}
.item-field-item{
    line-height: 27px;
    top: -5px;
    position: relative;
    padding-bottom: 5px;
}
.item-field-item span{
    position: relative;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 27px;
    width: calc(100% - 50px);
}
.item-field-tumbler{
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
    margin-top: -9px;
    height: 18px;
    border-radius: 9px;
    transition: all 200ms ease-out;
    background: #46434f;
    width: 36px;
}
.item-field-tumbler:after{
    position: absolute;
    display: block;
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #fff;
    left: 0;
    top: 0;
    transition: all 200ms ease-out;
}
.item-field-item.checked .item-field-tumbler:after{
    left: 18px;
}
.item-field-item.checked .item-field-tumbler{
    background: #189945;
}
.item-field-items{
    display: none;
}
.item-field[type='checkbox'] .item-field-items{
    display: block;
}
.item-field[type='checkbox'] .item-field-title svg{
    display: none;
}
.item-field[type='text'] .item-field-items{
    display: block;
}
.item-field[type='text'] .item-field-title svg{
    display: none;
}
#add-input-template{
    display: none;
}
.add-field-type{
    position: relative;
    display: block;
    margin: 0 15px;
    height: 33px;
    border: #45414e solid 1px;
    border-radius: 3px;
    white-space: nowrap;
    font-size: 0;
    overflow: hidden;
}
.add-field-type-item{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    box-sizing: border-box;
    height: 33px;
    line-height: 33px;
    color: #9a97a0;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.add-field-type-item:first-child{
    border-right: #45414e solid 1px;
}
.add-field-type-item.active{
    background: #36323f;
}
.user-info-type{
    position: relative;
    display: block;
    margin: 0 15px;
    height: 33px;
    border: #45414e solid 1px;
    border-radius: 3px;
    white-space: nowrap;
    font-size: 0;
    overflow: hidden;
}
.user-info-type-item{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    box-sizing: border-box;
    height: 33px;
    line-height: 33px;
    color: #9a97a0;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.user-info-type-item:first-child{
    border-right: #45414e solid 1px;
}
.user-info-type-item.active{
    background: #36323f;
}
.user-info-activity{
    position: absolute;
    display: block;
    color: #9a97a0;
    font-size: 14px;
}
.item-field-z{
    position: absolute;
    display: block;
    right: 15px;
    top: 0;
    font-size: 15px;
    line-height: 50px;
    color: #9a97a0;
    transition: all 200ms linear;
}
.item-field:hover .item-field-z{
    opacity: 0;
}
.scroll_el{
    height: calc(100% - 56px);
}

.scroll_el::-webkit-scrollbar {
    width: 5px;
}

.scroll_el::-webkit-scrollbar-track {
    background: transparent;
}

.scroll_el::-webkit-scrollbar-thumb {
    background: #0d0c11;
}
.list_users .item:last-child > a{
    border-bottom: 0;
}
.more-btn{
    position: relative;
    display: block;
    line-height: 50px;
    padding-left: 40px;
    color: #9a97a0;
    text-transform: uppercase;
    font-family: 'Fira Sans';
    font-size: 15px;
    text-decoration: none;
    background: #2e2b36;
}
.title-status-icon{
    position: relative;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 5px;
    vertical-align: middle;
}
.title.play .title-status-icon{
    height: 7px;
    background: url(../images/play_icon.svg) no-repeat;
    background-size: 100% 100%;
}
.title.online .title-status-icon{
    border-radius: 6px;
    background: #fff;
}
.title.offline .title-status-icon{
    border-radius: 6px;
    background: #ffffff22;
}
.title-vip{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 23px;
    line-height: 14px;
    background: #c8c8ce;
    border-radius: 2px;
    font-weight: 500;
    color: #292530;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    margin-left: 5px;
}
.user-info-form .item-field{
    background: #2e2b36;
}
.user-info-pages{
    position: relative;
    display: block;
    height: calc(100% - 120px);
    margin-top: 12px;
    overflow: hidden;
}
.user-info-pages .scroll_el{
    height: 100%;
}
.user-info-form .item-field-title svg{
    right: 15px;
    top: auto;
    bottom: 18px;
}
.user-info-form .item-field-title svg{
    right: 15px;
    top: auto;
    bottom: 15px;
}
.user-info-form .item-field:hover .item-field-title svg{
    right: 15px;
    top: auto;
    bottom: 15px;
}
.item-field-text{
    position: relative;
    display: block;
    top: -13px;
    /*margin-bottom: 5px;*/
}
.item-field.money-block .item-field-text{
    font-family: 'Fira Sans';
    font-size: 15px;
}
.item-field.money-block.red-color .item-field-text{
    color: #990012;
}
.item-field.money-block.green-color .item-field-text{
    color: #189945;
}
.item-field-text-divider{
    position: relative;
    display: block;
    line-height: 50px;
    font-size: 16px;
    margin: 0 15px;
    margin-bottom: -10px;
}
.user-info-sort-block{
    position: relative;
    display: block;
    background: #2e2b36;
    border-bottom: 5px solid #0c0b10;
}
.sortable{
    overflow: hidden;
    /*min-height: calc(100% - 95px);*/
}
.user-info-page{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: all 300ms ease-out;
    border-top: 1px solid #0c0b10;

}
.user-info-page:nth-child(2),
.user-info-page:nth-child(3),
.user-info-pages.history .user-info-page:nth-child(3){
    left: 100%;
}
.user-info-pages.history .user-info-page,
.user-info-pages.tab3 .user-info-page,
.user-info-pages.tab3 .user-info-page:nth-child(2){
    left: -100%;
}
.user-info-pages.history .user-info-page:nth-child(2){
    left: 0;
}
.user-info-pages.tab3 .user-info-page:nth-child(3){
    left: 0;
}
.user-info-history-header{
    position: relative;
    display: block;
    height: 55px;
    border-bottom: 1px solid #0c0b10;
}
.user-info-history-header .link_search{
    position: absolute;
    right: 15px;
    top: 17px;
}
.user-info-history-header .search{
    left: 15px;
    width: calc(100% - 30px);
}
.user-info-history-header .user-info-datepicker {
    width: 230px;
    height: 52px;
    border: 0;
    border-radius: 2px;
    background: transparent url(../images/ic_date_o.svg) 0px 50% no-repeat;
    font: 15px 'Fira Sans';
    color: #9997a0;
    padding: 0 0 0 20px;
    margin-left: 15px;
}
.history-footer-form{
    position: absolute;
    display: block;
    bottom: 0;
    height: auto;
    width: 100%;
    border-top: 1px solid #0c0b10;
    background: #2e2b36;
}
.history-textarea{
    border: 0;
    width: calc(100% - 80px);
    margin: 15px 60px 10px 20px;
    font-size: 15px;
    line-height: 22px;
    font-family: 'FFMetaPro';
    background: transparent;
    color: #9997a0;
    resize: none;
    height: 22px;
}
.history-footer-form button{
    position: absolute;
    top: 17px;
    right: 20px;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.history-footer-form button:hover svg path{
    fill: white
}
.user-info-page:nth-child(2) .scroll_el{
    height: calc(100% - 111px);
    background: #292530;
}
.history-chat{
    display: flex;
    position: relative;
    align-items: flex-end;
    flex-direction: column-reverse;
    min-height: 100%;
}
.history-chat-date{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 32px;
    color: #9997a0;
    font-size: 14px;
    font-family: 'Fira Sans';
}
.history-chat-message{
    width: 100%;
    margin-bottom: 10px;
}
.history-chat-message-text{
    position: relative;
    display: inline-block;
    margin-left: 30px;
    border-radius: 3px;
    background: #2e2b36;
    color: #9997a0;
    padding: 8px 15px;
    font-size: 14px;
    line-height: 18px;
    max-width: 80%;
}
.history-chat-message.bubble .history-chat-message-text:before{
    position: absolute;
    display: block;
    content: '';
    border: 5px solid transparent;
    border-top: 5px solid #2e2b36;
    border-right: 5px solid #2e2b36;
    left: -8px;
    top: 0;
}
.history-chat-message.with-comment .history-chat-message-text{
    background: #292530;
    padding: 15px 10px 0;
}
.history-chat-message.with-comment .history-chat-message-text:after{
    border: #2e2b36 solid 5px;
    position: absolute;
    display: block;
    content: '';
    border-radius: 3px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.history-chat-message.with-comment .chat-comment-block{
    position: relative;
    display: block;
    width: calc(100% + 20px);
    padding: 8px 10px;
    left: -10px;
    margin-top: 10px;
    border-radius: 3px;
    background: #2e2b36;

}
.history-chat-message.with-comment .chat-comment-block img{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}
.history-chat-message.admin-mssage{
    text-align: right;
}
.history-chat-message.admin-mssage .history-chat-message-text{
    background: #1e8f8f;
    margin: 0;
    margin-right: 30px;
    color: #fff;
}
.history-chat-message.admin-mssage.bubble .history-chat-message-text:before{
    border: 10px solid transparent;
    border-top: 10px solid #1e8f8f;
    border-left: 5px solid #1e8f8f;
    right: -8px;
    left: auto;
    top: 0;
}
.ui-sortable * {
    -moz-user-select: -moz-auto;
    -khtml-user-select: auto;
    -webkit-user-select: auto;
    user-select: auto;
}

.finance_table{
    width: 100%;
    border-collapse: collapse;
}

.finance_table tr th{
    color: #fff;
    padding: 10px 20px;
    border: 1px solid #45414e;
    background: rgba(53,49,61,.77);
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}

.finance_table tr th:first-child{
    text-align: left;
}

.finance_table tr td{
    padding: 10px 20px;
    border: 1px solid #45414e;
    text-align: right;
    transition: .2s linear;
}

.finance_table tr td:first-child{
    text-align: left;
}

.finance_table tr:hover td{
    background: rgba(53,49,61,.77);
}

.finance_table tr.finance_table_total td{
    background: rgba(53,49,61,.50);
}

.finance_table tr.finance_table_total:hover td{
    background: rgba(53,49,61,.77);
}


/* Ivan */
.formAll{
    padding: 15px;
}

.formAll > :last-child{
    margin-bottom: 0 !important;
}

.formAll-line{
    margin-bottom: 10px;
}

.formAll-lineBord{
    border-bottom: 1px solid #35313d;
    padding-bottom: 10px;
}

.formAll-label{
    color: #cccccc;
    font-size: 14px;
    margin-bottom: 4px;
}

.formAll-label-big{
    font-size: 18px;
}

.formAll-input{
    width: 100%;

    height: 35px;
    border: 1px solid #45414e;
    border-radius: 2px;
    background: transparent;
    font: 14px 'Fira Sans';
    color: #cccccc;
    padding: 0 15px;
}

.formAll-textarea{
    width: 100%;

    height: 80px;
    border: 1px solid #45414e;
    border-radius: 2px;
    background: transparent;
    font: 14px 'Fira Sans';
    color: #cccccc;
    padding: 10px 15px;
    resize: none;
}

.formAll-select{
    width: 100%;
    height: 35px;
    border: 1px solid #45414e;
    border-radius: 2px;
    background: transparent;
    font: 14px 'Fira Sans';
    color: #cccccc;
    padding: 0 15px;
}

.formAll-select option{
    color: #000;
}

.formAll-submit{
    text-align: center;
}

.formAll-submitBtn{
    display: inline-block;
    vertical-align: top;
    background: #45414e;
    border: none;
    height: 45px;
    border-radius: 2px;
    font: 20px 'FFMetaPro';
    color: #e0e0e0;
    cursor: pointer;
    transition: .2s linear;
    min-width: 200px;
    padding: 0 25px;
    text-transform: uppercase;
}

.formAll-submitBtn-small{
    height: 25px;
    font-size: 14px;
    min-width: 90px;
    padding: 0 15px;
}

.formAll-submitBtn:hover{
    background: #0c0b10;
    color: #fff;
}

.formAll-datepicker{
    width: 100%;

    height: 35px;
    border: 1px solid #45414e;
    border-radius: 2px;
    background: transparent url(../images/ic_date_o.svg) 10px 50% no-repeat;
    font: 14px 'Fira Sans';
    color: #cccccc;
    padding: 0 15px 0 30px;
}

.formAll-line-flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

.formAll-line-flex > *{
    width: calc(50% - 15px);
}

.checkReverse input[type=checkbox]
{
    display: none;
}

.checkReverse
{
    display: block;
    margin-top: 10px;
}

.checkReverse .label_check{
    display: block;
}

.checkReverse .label_check input[type=checkbox] + .check_text
{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 25px;
    cursor: pointer;
    position: relative;
    padding-right: 30px;
    transition: .2s linear;
}

.checkReverse .label_check input[type=checkbox]:checked + .check_text{
    color: #fff;
}

.checkReverse .label_check input[type=checkbox] + .check_text:before{
    position: absolute;
    top: 4px;
    right: 0;

    width: 17px;
    height: 17px;

    content: '';
    transition: .2s linear;
    border-radius: 2px;
    border: 2px solid #a4a2a9;
    transition: .2s linear;
}

.checkReverse .label_check input[type=checkbox]:checked + .check_text:before{
    background: #9a97a0;
    border-color: #9a97a0;
}

.checkReverse .label_check input[type=checkbox] + .check_text:after
{
    position: absolute;
    top: 4px;
    right: 0;

    width: 17px;
    height: 17px;

    content: '';
    transition: .2s linear;
    background: url(../images/ic_check.svg) 50% no-repeat;
    opacity: 0;
}

.checkReverse .label_check input[type=checkbox]:checked + .check_text:after
{
    opacity: 1;
}


.search-inner{
    width: 100%;
    margin: 15px 0;
}


.accordion_item{
    margin-top: 15px;
    position: relative;
}

.accordion_item .allGame_js{
    position: absolute;
    right: 27px;
    top: 3px;
    z-index: 10;
}

.accordion_title{
    font-size: 16px;
    position: relative;
    padding-right: 60px;
    cursor: pointer;
    transition: .2s linear;
}

.accordion_title:hover,
.accordion_title.active{
    color: #fff;
}

.accordion_title:before {
    position: absolute;
    top: 5px;
    right: 5px;
    border-right: 2px solid #9a97a0;
    border-bottom: 2px solid #9a97a0;
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    content: '';
    transition: .2s linear;
    transform: rotate(45deg);
}

.accordion_title:hover:before{
    border-color: #fff;
}

.accordion_title.active:before{
    top: 10px;
    transform: rotate(-135deg);
    border-color: #fff;
}

.accordion_data{
    display: none;
}
/* Ivan */


.accordion + .formAll-input{
    margin-top: 12px;
}

.checkReverse .label_check input[type=checkbox] + .check_text-flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: nowrap;
}

.checkReverse .label_check input[type=checkbox] + .check_text-flex .col{
    width: calc(50% - 6px);
}

.checkReverse .label_check input[type=checkbox] + .check_text-flex .col_small{
    width: calc(40% - 6px);
}

.checkReverse .label_check input[type=checkbox] + .check_text-flex .col_middle{
    width: calc(60% - 6px);
}


.sub-header{
	background: #292530;
    padding: 3px 20px  13px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.sub-header select{
    width: 250px;
    height: 40px;
    border: 1px solid #45414e;
    border-radius: 2px;
    background: transparent;
    font: 16px 'Fira Sans';
    color: #cccccc;
    padding: 0 15px;
	max-width: calc(100% - 20px);
	margin: 10px 0 0 20px;
}

.sub-header select option{
    color: #000;
}

.mini-modal
{
    position: relative;
}

.mini-modal__modal
{
    position: absolute;
    z-index: 999;
	top: calc(100% + 17px);
    right: 0;

    visibility: hidden;

    opacity: 0;

    transition: visibility .2s linear, opacity .2s linear;
	padding: 15px;
    background: #35313D;
	pointer-events: none;
}

.mini-modal__modal._active
{
    visibility: visible;

    opacity: 1;
	pointer-events: auto;
}

.mini-modal__btn_list{
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/ic_list.svg) 50% no-repeat;
}

.mini-modal__modal .menu div
{
    white-space: nowrap;
}

.mini-modal__modal .menu div + div
{
    margin-top: 14px;
}

.mini-modal__modal .menu  a
{
    color: #9A97A0;
    font-size: 15px;
    font-weight: 900;

    text-decoration: none;

    transition: color .2s linear;
}

.mini-modal__modal .menu a:hover
{
    color: #FFF;
}


.header__user{
	text-align: center;

	font-size: 30px;
    color: #9a97a0;
    font-weight: 500;
}

.header__user a{
	color: #9a97a0;
	text-decoration: none;
}


div.drag_div > table,
.new-table{
	border: 1px solid #0C0B10;
    background: #292530;
}

div.drag_div > table td,
.new-table td{
	color: #CCC;
    font-family: "Fira Sans";
    font-size: 14px;
    font-weight: 500;
}

div.drag_div > table td a,
.new-table td a{
	color: #CCC;
}

.tabl{
    background: #292530;
}

.instr{
    background: #292530;
}

div.drag_div div.drag_menu,
.new-table div.drag_menu{
	border-bottom: 1px solid #0C0B10;
    background: #2E2B36;
}

.zagl td,
.new-table .zagl td{
	border-top: 1px solid #0C0B10;
	border-bottom: 1px solid #0C0B10;
    background: #2E2B36;
	white-space: nowrap;
	padding-top: 5px;
	padding-bottom: 5px;
}

div.drag_div > table td.zaglf,
.new-table td.zaglf{
	color: #CCC;
    font-family: "Fira Sans";
    font-size: 20px;
    font-weight: 500;
}

div.drag_div > table td.stat,
.new-table td.stat{
	background: #292530;
	font-size: 18px;
    font-weight: 500;
	border-top: 1px solid #0C0B10;
}


div.drag_div input[type=text]::-webkit-input-placeholder,
.new-table input[type=text]::-webkit-input-placeholder
{
    color: rgba(242,242,242,.5);

    opacity: 1;
}

div.drag_div input[type=text]::-moz-placeholder,
.new-table input[type=text]::-moz-placeholder
{
    color: rgba(242,242,242,.5);

    opacity: 1;
}

div.drag_div input[type=text]:-moz-placeholder,
.new-table input[type=text]:-moz-placeholder
{
    color: rgba(242,242,242,.5);

    opacity: 1;
}

div.drag_div input[type=text]:-ms-input-placeholder,
.new-table input[type=text]:-ms-input-placeholder
{
    color: rgba(242,242,242,.5);

    opacity: 1;
}

div.drag_div input[type=text],
.new-table input[type=text]{
	color: #CCC;
    font: 14px "Fira Sans";
    height: 40px;
    padding: 0 9px;
    border: 1px solid #45414E;
    border-radius: 2px;
    background: #2E2B36;
}

div.drag_div input[readonly],
.new-table input[readonly]{
	border: none;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 16px;
}

td.search{
	width: 100%;
	padding: 5px;
	border-top: 1px solid #0C0B10;
	border-bottom: 1px solid #0C0B10;
}

div.drag_div input.search-input,
.new-table input.search-input{
	width: 100%;
	min-width: 200px;
	color: #CCC;
    font: 14px "Fira Sans";
    height: 40px;
    padding: 0 9px;
    border: 1px solid #45414E;
    border-radius: 2px;
    background: #2E2B36;
}

div.drag_div select,
.new-table select{
    width: 150px;
    height: 40px;
    border: 1px solid #45414e;
    border-radius: 2px;
    background: transparent;
    font: 14px 'Fira Sans';
    color: #cccccc;
    padding: 0 9px;
}

div.drag_div select option,
.new-table select option{
    color: #000;
}

div.drag_div > table td input,
div.drag_div > table td textarea,
div.drag_div > table td input:active,
div.drag_div > table td textarea:active,
.new-table td input,
.new-table td textarea,
.new-table td input:active,
.new-table td textarea:active{
	-webkit-appearance: auto;
    appearance: auto;
    -moz-outline: auto !important;
}