*, *:before, *:after {
    box-sizing: border-box;
}
html, body {
    min-height: 100%;
    font: 100 16px/1.55 "Open Sans", sans-serif;
    margin: 0;
    background: #f0f0f0
}

/* удалить из основного VAADIN стиля */
.apptheme .app-shell[width-range~="1001px-"] .navigation-bar {
    background-image: none;
}
.apptheme .app-shell[width-range~="601px-"] .navigation-bar-container {
    background-image: none
}
/* // удалить из основного VAADIN стиля */

button {
    background-color: #0d5cab;
}
#logo {
    display: block;
    width: 100%;
    height: 60px;
    background-image: url(../../bpc/img/logo-w.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}
.b-circle {
    position: absolute;
    width: 2em;
    height: 2em;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 0.3em;
    fill: #fff;
    margin: 0 0 0 0.5em;
}
.b-none {
    display: none;
}
/* Layout */
div.b-left {
    float: left;
}
div.b-right {
    float: right;
}
.b-t-left {
    text-align: left
}
.b-t-right {
    text-align: right
}
.b-t-center {
    text-align: center
}
.b-t-justify {
    text-align: justify
}
.b-row { display: table; width: 100%; }
.b-pos-rel {position: relative;}

.b-w {
    float: left;
    padding: 0 6px
}
.b-w.b-w1 {
    width: 8.3%;
}
.b-w.b-w2 {
    width: 16.7%;
}
.b-w.b-w3 {
    width: 25%;
}
.b-w.b-w4 {
    width: 33.3%;
}
.b-w.b-w5 {
    width:41.7%;
}
.b-w.b-w6 {
    width: 50%;
}
.b-w.b-w7 {
    width: 58.3%;
}
.b-w.b-w8 {
    width: 66.7%;
}
.b-w.b-w9 {
    width: 75%;
}
.b-w.b-w10 {
    width: 83.3%;
}
.b-w.b-w11 {
    width: 91.7%;
}
.b-w.b-w12 {
    width: 100%;
}

.b-t-purple {
    color: #dd007c
}
.b-t-orange {
    color: #f49a00
}
.b-t-green {
    color: #99cc00
}
.b-t-m-grey {
    color: #707070
}
.b-t-l-grey {
    color: #959595
}
.b-t-blue {
    color: #2171b8
}
.b-t-l-blue {
    color: #00b6f0
}

.b-purple {
    background: #dd007c
}
.b-orange {
    background: #f49a00
}
.b-green {
    background: #99cc00
}
.b-m-grey {
    background: #707070
}
.b-l-grey {
    background: #959595
}
.b-blue {
    background: #2171b8
}
.b-l-blue {
    background: #00b6f0
}

.b-icon {
    font-family: "icons-bpc";
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
.b-icon.b-user::after {
    content: "G"
}
.b-icon.b-mes::after {
    content: "C"
}
.b-icon.b-geo::after {
    content: "B"
}
/* navigation  */
.b-icon.b-up::after {
    content: "F"
}
.b-icon.b-add-card::after {
    content: "H"
}
.b-icon.b-stores-cards::after {
    content: "A"
}
.b-icon.b-tickets::after {
    content: "E"
}
.b-icon.b-history::after {
    content: "I"
}
.b-icon.b-alerts::after {
    content: "J"
}
.b-icon.b-settings::after {
    content: "D"
}
.navigation {
    background: #a1a1a1 !important;
}
.navigation .menuLevel1 {
    width: 100%;
    display: table;
}
.navigation .menuLevel1 .b-icon {
    font-size: 75px;
    text-align: center;
    line-height: 54px;
}
.navigation .menuLevel1 .v-button-wrap {
    color: #fff;
}
.app-shell .navigation .v-button.borderless:hover {
    background: none;
}
.app-shell .navigation .v-button.borderless:hover .v-button-wrap, .app-shell .navigation .v-button.borderless:active .v-button-wrap {
    color: #96c12c;
}
.navigation .menuLevel1 .v-button-caption {
    font-size: 15px;
    text-align: center;
    display: block;
    max-width: 110px;
    padding: 10px;
    white-space: initial;
    line-height: 17px;
}
.apptheme .app-shell .navigation-bar .menuLevel1 {
    padding: 0;
    overflow: hidden;
}
.app-shell .navigation {
    padding: 20px 0 0;
}
/* // navigation  */
.b-icon.b-hamburger {
    padding: 15px;
}
.b-icon.b-hamburger span {
    height: 6px;
    width: 31px;
    background: #fff;
    margin: 3px;
    display: block;
}
.b-hamburger-btn {
    position: relative;
}
.b-hamburger-nav {
    position: absolute;
    top: 50px;
    right: 10px;
    background: #ebebeb;
    border: 1px solid #959595;
    border-radius: 5px;
    border-top: 0;
    box-shadow: 1px 1px 5px #959595;
    display: none
}
.b-top-hamburger {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
.b-top-logo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 500px;
    margin-left: -250px;
}
.b-top-logo a {
    white-space: nowrap;
    text-decoration: none;
    color: #fff
}
.b-top-logo a .logo {
    display: block;
    float: left;
    width: 200px;
    height: 60px;
    background-image: url(../../bpc/img/logo-w.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.b-top-logo a .text {
    font-size: 29px;
    font-weight: 300;
    display: block;
    padding: 10px 0 0 20px;
    float: left;
}
.b-top-line .b-icon {
    color: #fff;
    font-size: 39px;
    padding: 0 10px;
}
.b-mes-btn {
    position: relative;
}
.b-mes-btn .b-new-mes {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    top: 10px;
    right: 10px;
}
.b-top-nav .b-left>a:hover, .b-top-nav .b-left>a:active, .b-top-hamburger .b-left>a:hover, .b-top-hamburger .b-left>a:active {
    background-color: rgba(0,0,0,0.1);
}

/* центр */
.v-horizontal > .v-slot, .v-horizontal > .v-expand > .v-slot {
    min-height: 100%;
}
.b-box-border h2 {
    color: #99cc00;
    font-weight: 600;
    margin: 0.3em 0.7em;
    font-size: 1em;
}
.b-box-border h1 {
    color: #2076c4;
    font-weight: 600;
    margin: 0.3em 0.7em;
    font-size: 1.5em;
}
.b-box-border {
    border: 1px solid #959595;
    background: #fff;
    border-radius: 5px;
    padding: 7px 12px;
    margin: 0 0 25px;
}
.b-slider {
    height: 230px;
    overflow: hidden;
    color: #000;
}
.b-cards {
    overflow: hidden;
}
.b-cards .b-date {
    font-weight: bold
}
.b-slider > .b-card {
    background: #ebebeb;
    height: 200px;
    border: 1px solid #959595;
    border-radius: 5px;
    display: inline-block;
    padding: 0.5em 1.1em;
    margin: 10px;
    width: 31%;
    max-width: 350px;
    min-width: 270px;
}
.b-slider > .b-card > .name {
    color: #93cb06;
    font-size: 21px;
    font-weight: 600;
    padding: 0 0 0.2em;
    border-bottom: 1px solid #ccc;
}
.b-slider > .b-card > .num {
    padding: 0.5em 0;
}
.b-slider .b-data {
    padding: 1.7em 0 0;
}
.b-slider .b-data .count {
    font-weight: bold;
    font-size: 1.8em;
}
.b-slider .b-data .name {
    font-size: 0.9em;
}
.b-slider > .b-card.active {
    border: 3px solid #93cb06;
    font-weight: bold;
}

.b-sort > .asc, .b-sort > .desc {
    border: 12px solid transparent;
    width: 0;
    height: 0;
    display: inline-block;
    margin: 0 10px 0 0;
    cursor: pointer;
}
.b-up > .desc {
    display: none
}
.b-down > .asc {
    display: none
}
.b-sort > .asc {
    border-top-color: #93cb06;
    border-bottom: 0;
}
.b-sort > .desc {
    border-bottom-color: #93cb06;
    border-top: 0;
}
/* // центр */
.b-table {
    border: 0;
    width: 100%;
}
.b-table tr {

}
.b-table th {
    border: 0;
    border-bottom: 1px solid #93cb06;
    color: #000;
    margin: 0;
    padding: 0.8em 0.5em;
    text-align: center;
}
.b-table td {
    border: 0;
    border-bottom: 1px solid #c2c2c2;
    color: #707070;
    margin: 0;
    padding: 0.8em 0.5em

}
.b-content {
    margin: 60px 0 0;
    padding-left: 110px;
}
.b-box-find {
    display: none;
}
.b-btn.b-find {
    width: 1.7em;
    float: right;
    margin: -2em 1em;
    cursor: pointer;
    fill: #93cb06;
}

.b-content .v-slot-navigation-bar-container {
    margin-left: -110px;
    width:  110px;
}
.b-content .navigation-bar-container {
    width: 100%; height: 100%;
}

.b-top-line {
    background: #2076c4;
    height: 60px;
    position: fixed;
    z-index: 999;
}
.b-top-nav {
    height: 100%;
    display: table;
    position: absolute;
    left: 0;
    top: 0;
}
.b-info h1 {
    font-size: 25px;
    font-weight: 300;
    margin: 0.2em auto 0;
    white-space: nowrap;
    width: 300px;
    text-align: center;
}
.b-info h1.b-ru {
    font-size: 25px;
}
.b-hamburger-nav {
    background: #fff;
    border: 0;
    border-radius: 5px;
    box-shadow: none;
    display: none;
}

.b-home-line {
    text-align: center;
}

.b-lang-active.b-hamburger {
    background: url(../../bpc/img/flags/gb.svg) no-repeat 5px center / 2em;
}
.b-lang-active.b-hamburger i {
    border: 8px solid transparent;
    border-top-color: #00b6f0;
    border-bottom: 0;
    width: 0;
    height: 0;
    position: absolute;
    top: 26px;
    right: 9px;
    margin: 0;
    cursor: pointer;
}
.b-lang-active.b-hamburger > span {
    visibility: hidden;
}
.b-hamburger.b-flag-ru {
    background-image: url(../../bpc/img/flags/russia.svg)
}
/* .b-hamburger.b-flag-en {
    background-image:
} */
.b-hamburger.b-flag-es {
    background-image: url(../../bpc/img/flags/spain.svg)
}
.b-hamburger.b-flag-fr {
    background-image: url(../../bpc/img/flags/france.svg)
}
.b-hamburger.b-flag-kz {
    background-image: url(../../bpc/img/flags/kazakstan.svg)
}
.b-hamburger.b-flag-kg {
    background-image: url(../../bpc/img/flags/kg.svg)
}
.b-hamburger.b-flag-ua {
    background-image: url(../../bpc/img/flags/ukraine.svg)
}
.b-hamburger.b-flag-az {
    background-image: url(../../bpc/img/flags/azerbaijan.svg);
}
.b-hamburger.b-flag-ar {
    background-image: url(../../bpc/img/flags/arabic.svg)
}
.b-hamburger.b-flag-md {
    background-image: url(../../bpc/img/flags/moldova.svg)
}


.b-hamburger-nav h3.b-title {
    font-size: 1em;
    margin: 0.5em 0 0;
    color: #2171b8;
    fill: #2171b8
}

.b-hamburger-nav .b-list-flags {

}

.b-hamburger-nav .b-list-flags > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.b-hamburger-nav .b-list-flags > ul > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.b-hamburger-nav .b-list-flags a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 0.2em 0 0.2em 2em;
    background: transparent no-repeat 0.3em center / 1.5em;
}

.b-hamburger-nav .b-list-flags li:hover {
    background: rgba(0, 0, 0, 0.1)
}

.b-list-flags a.b-flag-ru {
    background-image: url(../../bpc/img/flags/russia.svg)
}

.b-list-flags a.b-flag-en {
    background-image: url(../../bpc/img/flags/gb.svg)
}

.b-list-flags a.b-flag-es {
    background-image: url(../../bpc/img/flags/spain.svg)
}

.b-list-flags a.b-flag-fr {
    background-image: url(../../bpc/img/flags/france.svg)
}

.b-list-flags a.b-flag-kz {
    background-image: url(../../bpc/img/flags/kazakstan.svg)
}

.b-list-flags a.b-flag-kg {
    background-image: url(../../bpc/img/flags/kg.svg)
}

.b-list-flags a.b-flag-ua {
    background-image: url(../../bpc/img/flags/ukraine.svg)
}
.b-list-flags a.b-flag-az {
    background-image: url(../../bpc/img/flags/azerbaijan.svg);
}
.b-list-flags a.b-flag-ar {
    background-image: url(../../bpc/img/flags/arabic.svg)
}
.b-list-flags a.b-flag-md {
    background-image: url(../../bpc/img/flags/moldova.svg)
}

.error form:after {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.b-modal-block {
    position: absolute;
    top: 2%;
    background: #fff;
    width: 400px;
    left: 50%;
    margin: 0 0 0 -200px;
    border-radius: 10px;
    padding: 0.5em 1em 1em;
    font-size: 0.85em;
}
.b-modal-block .b-modal-content {
    margin: 20px 0 0;
}
.b-modal-block .b-close {
    position: absolute;
    margin: 0 5px;
    right: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 3px;
    fill: #2171b8;
}

.b-modal-block p {
    margin: 0 0 0.5em;
    padding: 0;
}

.b-modal-block h3 {
    margin: 0 0 0.5em;
    padding: 0;
}
.b-modal-block a {
    color:#000;
}

button[disabled] {
    cursor: progress;
    border: 1px solid #00b6f0;
    background: #00b6f0;
    color: #8ecdff;
}

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    b
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Landscape phones and smaller */
@media (max-width: 480px) {
    .b-lang-active.b-hamburger i {
        display: none
    }
    .b-lang-active.b-hamburger {
        background-image: none;
    }
    .b-lang-active.b-hamburger > span {
        visibility: visible;
    }
    .b-bottom .b-nav {
        display: none;
    }
    .b-icon.b-hamburger {
        padding: 0 0 15px 15px !important;
    }
    .b-modal-block {
        width: 340px;
        left: 50%;
        margin: 0 0 0 -170px;
    }

}

@media (max-width: 320px) {

}

input[type='text'], input[type='password'], #login {
    width: 340px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 14px;
    margin: 0 0 16px;
    border-radius: 4px;
    padding: 18px 13px 10px;
    border: 1px solid #1f93c7;
}

#login {
    padding: 14px 13px;
}