html, body, #app {height: 100%;}
html, body {
    background: #F5F8FA;
    font-size: 16px;
    line-height: 20px;
}
.header {background: #fff; margin-left: -15px; margin-right:-15px;}
.header .avatar {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background-size: 100%;
}
.header-menu .menu-items {box-sizing: border-box; transform: translateY(2px);}

.header-menu .menu-items a {text-decoration: none; color: #008BCF; box-sizing: border-box; padding: 0 15px; margin-left: 5px; font-size: 18px; border:1px solid transparent; transition: border .5s;}
.header-menu .menu-items.active a {border-left:3px solid #008BCF; border-left:3px solid #008BCF;}
.header-menu .menu-items:hover > a, .header-menu .menu-items.active > a {font-weight: bold;}
.flex {display:flex;}
.footer {height: 5px;}
.border-0 {border: 0 !important;}
.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 24px;
    width: 24px;
    border: 2px solid #1781BC;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input:not(:checked) ~ .checkmark {
    background-color: #00C2ED;
    box-shadow: inset 0px 0px 0px 4px #fff;
}



/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
    background-color: #fff;
    border: 2px solid #1781BC;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00C2ED;
}

.pointer {
    cursor: pointer;
}

.add-btn-block span {
    display: block;
    color: #f8fafc;
    text-align: center;
    width: 65px;
    height: 65px;
    border-radius: 44px;
    cursor: pointer;
    margin: 1px;
    float: right;
}

.add-btn-block .add-btn{
    background: url(/images/btn_plus.svg) no-repeat;
}

.add-btn-block .del-btn{
    background: url(/images/btn_minus.svg) no-repeat;
}

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

/* Hide the browser's default checkbox */
.checkboxes-component label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkboxes-component .checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 7px;
}

/* On mouse-over, add a grey background color */
.checkboxes-component label:hover input ~ .checkmark {
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

/* When the checkbox is checked, add a blue background */
.checkboxes-component label input:checked ~ .checkmark {
    background-color: #00C2ED;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkboxes-component .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkboxes-component label input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkboxes-component label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

* {
    scroll-behavior: smooth;
}

.content {
    background: #F5F8FA;
}

.cabinet {
    font-style: normal;
}

.amount, .money {font-weight: 500;}
.amount {color: rgba(33, 33, 33, 0.87);}
.money {font-size: 24px; line-height: 34px; color: #00C48C;}

.cabinet .info-block {
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.14);
    border-radius: 5px;
    padding:15px; height: 100%; box-sizing: border-box;
}

.cabinet .replenishment-block {
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.14);
    border-radius: 5px;
    padding:15px 0;
}

.cabinet .dividends-block {
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.14);
    border-radius: 5px;
    padding:15px 0;
}

.cabinet .text-1 {
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    color: rgba(33, 33, 33, 0.87);
}

.cabinet .text-2 {color: rgba(33, 33, 33, 0.87);}

.cabinet .text-4, .cabinet .text-3 {font-size: 14px; line-height: 17px; color: #0B88FF;}

.cabinet .text-5 {
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    color: rgba(33, 33, 33, 0.87);
}

.cabinet .text-6 {
    font-size: 12px;
    line-height: 14px;
    color: #828282;
}

.cabinet .text-7 {
    font-size: 12px;
    line-height: 14px;
    color: #0B88FF;
}

.cabinet .block-img {background-repeat: no-repeat; background-position: 50%; background-size: contain; }

.cabinet .block-img.img-1 {
    background-image: url("../../images/cabinet/info.png");
}

.cabinet .block-img.img-2 {
    background-image: url("../../images/cabinet/card.png");
}

.cabinet .block-img.img-3 {
    background-image: url("../../images/cabinet/coins.png");
}

.cabinet .plain-select {
    border: none;
    outline: none;
    background: none;
    font-size: 10px;
    color: #00b0e8;
}

.operations .date-picker {border-right: 2px solid #DFE6EE;}

.operations .date-picker-block {
    background: #fff;
    color: #8091A5;
    font-size: 11px;
    line-height: 13px;
    font-weight: 600;
    vertical-align: middle;
}

.el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange {
    border: none;
    border-radius: 0;
}

.operations .date-picker-block .dates {
    flex-basis: 100%;
}

.operations .date-picker-block .dates > div {
    margin: auto 5px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    display: flex;
    line-height: 30px;
}

.operations .operations-loading {
    margin: 0 auto;
}

.operations .operations-block {background: #F5F8FA;}

.operations .operation-row {
    background: #ffffff;
}

.operations .types-select-block {
    border-left: 2px solid #DFE6EE;
}

.operations .types-select {
    background: #fff;
    border: none;
    height: 100%;
    color: #8091A5;
    font-size: 11px;
    line-height: 13px;
    font-weight: 600;
    width: 100%;
}

.operations .d-table {
    width: 100%;
    margin: 0 auto;
    border-collapse:separate;
    border-spacing: 0 10px;
}

.operations .d-table-row, .inquiries .d-table-row {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.14);
}

.operations .account_replenishment,
.operations .accrual_bonuses,
.operations .accrual_dividends
{
    color: #56BD5B;
}

.operations .debit,
.operations .write_off_bonuses
{
    color: #FF647C;
}

.operations div[class*="req_"] {
    color: #BDBDBD;
}

.inquiries {
    height: 95%;
    margin: 0 auto;
}

.inquiries .title-block {
    text-transform: uppercase;
    color: #BDBDBD;
}

.inquiries .forms-block {padding: 5px;}
.inquiries .forms-block, .inquiries .operations-loading {width: 100%; margin: 0 auto;}

.inquiries .operations-block {}
.inquiries .operation-row {background: #ffffff;}
.inquiries .types-select-block {border-left: 2px solid #DFE6EE;}

.inquiries .types-select {
    background: #fff;
    border: none;
    height: 100%;
    color: #8091A5;
    font-size: 11px;
    line-height: 13px;
    font-weight: 600;
}

.inquiries .d-table {
    margin: 0 auto;
    border-collapse:separate;
    border-spacing: 0 10px;
}

.inquiries .account_replenishment,
.inquiries .accrual_bonuses,
.inquiries .accrual_dividends
{
    color: #56BD5B;
}

.inquiries .debit,
.inquiries .write_off_bonuses
{
    color: #FF647C;
}

.inquiries div[class*="req_"] {
    color: #BDBDBD;
}
hr {border-top:2px solid #E6E9EC;}
.highcharts-credits {display: none;}
.br_bottom_blue {border-bottom: 1px solid #0B88FF;}
.forms-btn_box {}
.forms-btn_box .item {background: #FFFFFF; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.14); border-radius: 5px; padding:15px; box-sizing: border-box;}
.btn {border: 1px solid #E6E9EC; box-sizing: border-box; transition: background-color .5s, border .5s;}
.btn:hover {background: #E2F1FF; border: 1px solid #B6DBFF;}
.forms-btn_box .btn:hover {color: #0B88FF;}
.btn.color-red:hover {color: #F7685B;}
.color_0B88FF {color: #0B88FF;}
.close_add_form {top:15px; right:15px;}

.form_add_request {background: #FFFFFF; box-shadow: 0 10px 20px rgba(31, 32, 65, 0.05); border-radius: 4px; padding: 20px 15px 30px;}
.form_add_request .title_form {margin-bottom: 35px; color: rgba(33, 33, 33, 0.87); font-weight: bold; font-size: 18px; line-height: 22px;}
.form_add_request  label {color: #8091A5; font-weight: bold; font-size: 14px;}
.footnote {color: #BDBDBD; font-size:14px;}
.footnote span {color: #000; font-weight: bold;}
.mx_-15 {margin-left: -15px; margin-right: -15px;}
.color-red {color: #F7685B;}
.modal-content {border: 1px solid #E1E9F2; box-sizing: border-box; border-radius: 3px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);}
.modal-header {color: #506279; text-transform: uppercase; font-weight: bold;}
.bg_0B88FF {background: #0B88FF; color:#fff;}
.bg_0B88FF:hover {background: #309AFF; color:#fff;}
.btn.disabled, .btn.disabled:hover {color: #ccc;}