* {
    box-sizing: border-box;
}

body {
    background-color: #f9f7f4;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0
}

.container {
    max-width: 1360px;
    margin: 0 auto;
    display: flex
}

    .container .main-block {
        width: 100%;
        padding: 20px 40px;
    }

    .container .sidebar {
        width: 200px;
        flex-shrink: 0;
        padding: 20px 40px 20px 0
    }

.btn {
    height: 40px;
    min-width: 40px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

    .btn.btn-white {
        background-color: #fff;
        border-color: #fff;
        color: #131930
    }

    .btn.btn-red {
        background-color: #ff8561;
        border-color: #ff8561;
        color: #fff
    }

    .btn.btn-white-bordered {
        background-color: #fff;
        border-color: #301713;
        color: #131930
    }

    .btn.btn-dark {
        background-color: #301713;
        border-color: #301713;
        color: #fff;
    }

    .btn.btn-smartcard {
        background-color: #301713;
        border-color: #301713;
        color: #fff;
        padding: 0 15px;
        margin: 10px 5px;
    }

    .btn.btn-alt {
        background-color: #fff;
        border-color: #fff;
        color: #131930
    }

    .btn .fas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 18px;
    }

form .form-group {
    margin-bottom: 20px
}

    form .form-group label {
        display: block;
        font-size: 10px;
        color: #ae9d9a;
        margin-bottom: 10px
    }

    form .form-group input {
        border: none;
        background-color: #fbf9f7;
        border-radius: 10px;
        font-size: 15px;
        color: #ae9d9a;
        font-weight: 700;
        padding: 7px 20px
    }

.last-payment-item {
    min-height: 77px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #f6f3f0;
    padding: 0 15px
}

    .last-payment-item .item-amount {
        font-size: 20px;
        font-weight: 700
    }

        .last-payment-item .item-amount.plus {
            color: #39c773
        }

        .last-payment-item .item-amount.minus {
            color: #ff9561
        }

    .last-payment-item .item-username {
        color: #131930;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 0 6px
    }

    .last-payment-item .item-time {
        font-weight: 400;
        font-size: 10px;
        color: #959bb0
    }

.main-header, .main-header .header-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

    .main-header .header-block {
        height: 40px;
        background-color: #fff;
        border-radius: 10px;
        align-items: center;
        padding: 0 10px
    }

        .main-header .header-block .caption {
            font-size: 10px;
            color: #ae9d9a
        }

        .main-header .header-block .amount {
            font-size: 15px;
            color: #301713;
            font-weight: 700
        }

    .main-header .btn-block-bank-limit {
        display: flex;
    }

    .main-header .bank-limit {
        margin-left: 10px;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        min-width: 190px;
    }

        .main-header .bank-limit .amount {
            padding: 0 10px 2px;
        }

    .main-header .exchange {
        flex-shrink: 0;
        margin: 0 10px;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        min-width: 250px;
    }

    .main-header .exchange-off {
        text-align: center;
        justify-content: center;
    }

        .main-header .exchange-off .btn {
            padding: 0 15px;
            min-width: 270px;
        }

    .main-header .exchange .exchange-amount {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .main-header .exchange .exchange-inout {
        padding: 0 15px;
    }

        .main-header .exchange .exchange-inout .inout-item {
            display: flex;
            justify-content: space-between;
            padding: 2px 0;
        }

            .main-header .exchange .exchange-inout .inout-item .value {
                font-size: 10px;
                padding-left: 5px;
                color: #301713
            }

    .main-header .exchange .exchange-logout {
        display: flex
    }

        .main-header .exchange .exchange-logout button {
            width: 38px;
            height: 38px
        }

        .main-header .exchange .exchange-logout .date-time {
            display: flex;
            flex-direction: column;
            padding-left: 5px;
            justify-content: center
        }

            .main-header .exchange .exchange-logout .date-time span {
                font-size: 10px;
                color: #ae9d9a;
                padding: 3px 0
            }

    .main-header .options-btn-block .btn-alt {
        display: none
    }

.main-table {
    margin-top: 15px
}


    .main-table tr:hover {
        background-color: #E5E4E1;
    }


    .main-table table {
        width: 100%;
        border-spacing: 0
    }

        .main-table table td, .main-table table th {
            border-bottom: 1px solid #f5eee9;
            height: 45px
        }

        .main-table table th {
            font-size: 14px;
            color: #ae9d9a;
            font-weight: Bold;
            text-align: left
        }

        .main-table table td {
            font-size: 14px;
            color: #9c8b88;
            font-weight: 700
        }

        .main-table table .num {
            padding: 0 15px;
            width: 1%;
            text-align: center
        }

        .main-table table .status > span {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ff6f61;
            position: relative
        }

            .main-table table .status > span:after {
                position: absolute;
                content: "";
                top: 50%;
                left: 50%;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #fff;
                transform: translate(-50%,-50%)
            }

            .main-table table .status > span.active {
                background-color: #39c773;
            }

        .main-table table .login {
            padding: 0 15px;
        }

        .main-table table td.login {
            color: #301713;
        }

        .main-table table .balance {
            text-align: center;
        }

            .main-table table .balance .amount {
                font-size: 20px;
                color: #301713;
            }

            .main-table table .balance .balance-wr {
                position: relative;
            }

            .main-table table .balance sup {
                font-size: 10px;
                border-radius: 10px;
                padding: 3px 5px;
                position: absolute;
                top: -10px;
                line-height: 10px;
            }

                .main-table table .balance sup.plus {
                    background-color: #e2f7ea;
                    color: #39c773;
                }

                .main-table table .balance sup.minus {
                    background-color: #fce6d3;
                    color: #ff9561;
                }

        .main-table table .show-more {
            width: 1%;
        }

            .main-table table .show-more a {
                color: #301713;
                font-size: 18px;
                padding: 0 15px;
            }

            .main-table table .show-more .show {
                display: block;
            }

            .main-table table .show-more .hide {
                display: none
            }

        .main-table table tbody.active .add-info {
            display: table-row
        }

        .main-table table tbody.active td {
            background-color: #fff
        }

        .main-table table tbody.active tr:first-child > td:first-child {
            border-top-left-radius: 10px
        }

        .main-table table tbody.active tr:first-child > td:last-child {
            border-top-right-radius: 10px
        }

        .main-table table tbody.active tr:last-child > td:first-child {
            border-bottom-left-radius: 10px
        }

        .main-table table tbody.active tr:last-child > td:last-child {
            border-bottom-right-radius: 10px
        }

        .main-table table tbody.active tr:last-child > td {
            box-shadow: 0 20px 40px rgba(85,39,10,.1)
        }

        .main-table table tbody.active .show-more .show {
            display: none
        }

        .main-table table tbody.active .show-more .hide {
            display: block
        }

        .main-table table .add-info {
            display: none
        }

        .main-table table .e-detailrow > td {
            position: relative;
            padding: 0 15px
        }

.add-info-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .add-info-content .btn {
        padding: 0 15px;
        margin: 10px 5px;
    }

.sidebar .profile {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

    .sidebar .profile > span {
        color: #301713;
        font-size: 12px;
        font-weight: 700;
        padding-right: 10px
    }

.sidebar .jackpots {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px
}

    .sidebar .jackpots .title {
        color: #301713;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 15px
    }

    .sidebar .jackpots .jackpots-list .item {
        align-items: center;
        margin-bottom: 10px
    }

        .sidebar .jackpots .jackpots-list .item:last-child {
            margin: 0
        }

        .sidebar .jackpots .jackpots-list .item .icon {
            display: block;
            width: 21px;
            height: 25px;
            background: url(/images/jackpot-icon.png) 50% no-repeat;
            background-size: contain;
            text-align: center;
            line-height: 22px;
            font-size: 10px;
            font-weight: 700;
            color: #301713;
            margin-right: 20px
        }

        .sidebar .jackpots .jackpots-list .item:nth-child(-n+3) .icon {
            background-image: url(/images/best-jackpot-icon.png);
            color: #fff
        }

        .sidebar .jackpots .jackpots-list .item .caption {
            font-size: 12px;
            margin: 0
        }

        .sidebar .jackpots .jackpots-list .item .amount {
            font-size: 15px;
            font-weight: 700;
            margin: 0
        }

.sidebar .payments {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 165px;
    background-color: #fff;
}

.auth {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

    .auth .auth-block {
        width: 340px;
        box-shadow: 0 20px 60px rgba(38,21,18,.1);
        border-radius: 10px;
        background-color: #fff;
        padding: 30px 40px
    }

        .auth .auth-block .caption {
            text-align: center;
            font-size: 12px;
            color: #301713;
            font-weight: 700
        }

        .auth .auth-block form {
            margin-top: 20px
        }

            .auth .auth-block form input {
                width: calc(100% - 40px)
            }

            .auth .auth-block form .submit-group {
                text-align: center
            }

                .auth .auth-block form .submit-group .btn {
                    padding: 0 25px;
                }

            .auth .auth-block form .error-block {
                margin-top: 20px;
                height: 50px;
                background-color: #fae7e3;
                border-radius: 10px;
                text-align: center;
                color: #301713;
                font-size: 10px;
                font-weight: 700;
                display: flex;
                justify-content: center;
                align-items: center
            }

.e-btn, .e-css.e-btn {
    padding: 0;
    vertical-align: inherit;
}

    .e-btn.e-icon-btn, .e-css.e-btn.e-icon-btn {
        padding: 0;
    }

.e-listview:not(.e-list-template) .e-list-item {
    height: auto;
    line-height: normal;
    padding: 0;
}

.dlg-nominals {
    display: flex;
    flex-wrap: wrap;
}

    .dlg-nominals > .e-control-wrapper {
        flex-basis: 40%;
        flex-grow: 1;
        margin-left: 7px;
        margin-right: 7px;
    }

.dlg-buttons {
    margin-top: 20px;
}

    .dlg-buttons button {
        padding: 0 15px;
    }

.btn-flat, .btn-flat:hover {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #ae9d9a;
}

.e-dialog {
    border-radius: 10px !important;
    overflow: auto;
}

.mt-0 {
    margin-top: 0 !important;
}

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

.fatal-error {
    text-align: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

    .fatal-error h2 {
        color: #301713;
        font-size: 20px;
        font-weight: bold;
    }

    .fatal-error p {
        color: #9c8b88;
        font-size: 12px;
        font-weight: bold;
    }

    .fatal-error .buttons {
        margin-top: 20px;
    }

.e-dialog {
    max-height: none !important;
}

.row-selected['aria-selected="true"'] td {
    padding-bottom: 69px !important;
}

.details-row {
    position: absolute;
    z-index: 10;
    left: 0px;
    padding-top: 10px;
    width: 100%;
    background-color: #e0e0e0;
}

.e-toast-container .e-toast {
    background-color: #BA5E5E;
}

    .e-toast-container .e-toast .e-toast-message .e-toast-title {
        color: white;
    }

    .e-toast-container .e-toast .e-toast-message .e-toast-content {
        color: white;
    }

@media screen and (max-width:1620px) {
    .container .main-block {
        margin-left: 165px
    }
}

@media screen and (max-width:1400px) {
    .main-header .btn-block-bank-limit {
        order: 1;
    }

        .main-header .btn-block-bank-limit .bank-limit {
            width: 100%;
        }

    .main-header .exchange,
    .main-header .exchange-off {
        margin: 10px 0;
        order: 3;
        width: 100%;
    }

        .main-header .exchange-off .btn {
            width: 100%;
        }

    .main-header .options-btn-block {
        order: 2;
        text-align: right;
    }
}

@media screen and (max-width:1024px) {
    .container .sidebar {
        padding: 10px;
    }

        .container .sidebar .jackpots {
            margin: 0;
        }

        .container .sidebar .profile {
            display: none;
        }

    .main-header .options-btn-block .btn-alt {
        display: inline-block;
    }

    .container .main-block {
        margin-left: 0;
        padding: 10px
    }

    .sidebar .payments {
        position: static;
        height: auto;
        width: auto;
        border-radius: 10px;
        margin-top: 15px;
        padding: 15px;
    }

    .last-payment-item {
        padding: 0;
    }
}

@media screen and (max-width:850px) {
    .main-header {
        flex-direction: column;
    }

        .main-header .btn-block-bank-limit {
            order: 2;
            margin-top: 10px;
        }

        .main-header .options-btn-block {
            width: 100%;
            display: flex;
            justify-content: space-between;
            order: 1;
        }

    .main-table > table .hide-sm {
        display: none
    }

    .main-table > table .btn {
        margin: 5px
    }

    .main-header .options-btn-block button {
        margin-left: 0;
    }

    .main-header .exchange {
        width: auto;
    }
}

@media screen and (max-width:640px) {
    .sidebar {
        display: none;
    }
}

@media screen and (max-width:520px) {
    .auth .auth-block {
        width: 100%;
        margin: 0 30px
    }
}