.operation {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #2d323d;
    max-width: 400px;
}
.operation__header {
    display: flex;
    height: 60px;
    max-height: 60px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    /* border-bottom: 1px solid #1a1b20; */
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background: linear-gradient(to right bottom, #363c4a, #27282c);
    z-index: 2;
}
.operation__header_vertical {
    flex-direction: column;
    height: auto;
    background: linear-gradient(to right bottom, #363c4a, #1a1b20);
}
.operation__sub-header {
    display: flex;
}
.operation__header_top{
    display: flex;
    padding: 0px 10px;
}
.operation__header-icon {
    border-radius: 50%;
    margin: auto 0px;
    display: flex;
    width: 40px;
    height: 40px;

}
.operation__header-icon_default {
    background: #1a8bdd;
}
.operation__header-icon>i {
    color: white;
    font-size: 20px;
    margin: auto;
}
.operation__header-content {
    overflow: hidden;
    margin: 0px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.operation__header-title {
    margin: auto 0px;
    font-size: 13px;
    font-weight: 600;
    color: #cfdbf0;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.operation__header-subtitle {
    margin: auto 0px;
    font-size: 13px;
    font-style: italic;
    color: #747b97;
}
.operation__header-subtitle_link {
    cursor: pointer;
}
.operation__header-subtitle_link:hover{
    text-decoration: underline;
}
.operation__header-close {
    margin: auto 0px;
    font-size: 26px;
    color: #b9c1cc;
    cursor: pointer;
}
.operation__header-close_hidden {
    display: none;
}
.operation__header-close:hover {
    color: white;
}

.operation__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color:  #acb1b8 rgba(0,0,0,0);
    flex-shrink: 0;
}

.operation__card {
    display: flex;
    flex-direction: column;
    margin: 20px 15px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-sizing: border-box;
    background: linear-gradient(to right bottom, #363c4a, #1a1b20);
    flex-shrink: unset;
    flex-shrink: 0;
}
.operation__card_hiden {
    display: none;
}
.operation__card_padding {
    padding: 20px;
}
.operation__card_buttons {
    flex-shrink: 0;
    margin: 0px 15px 15px 15px;
}

.operation__card_buttons:first-child {
    margin-top: 20px;
}
.operation__card-header {
    padding: 10px 30px;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
    background: linear-gradient(90deg, #1069c2, #4cb2f1);
}
.operation__card-form {
    padding: 0px 20px 20px 20px;
}
.operation__button {
    display: flex;
    padding: 10px 0px;
    font-size: 16px;
    background: none;
    outline: none;
    flex-shrink: 0;
    color: #a6afbe;
    border: 1px solid #424b58;
    border-bottom: 0px none;
}
.operation__button_hidden {
    display: none;
}
.operation__button:last-child {
    border-bottom: 1px solid #424b58;
}

.operation__button_warning {
    color: #f15e5f;
}


.operation__button-icon {
    display: block;
    margin: auto 0px auto 15px;
    width: 20px;
    text-align: center;
}
.operation__button-icon:last-child {
    margin-right: 15px;
}
.operation__button_hide {
    display: none;
}
.operation__button_active>span, .operation__button_active>i{
    color: white;
    text-shadow: rgb(255, 255, 255) 0px 0px 2px, #228dff 0px 0px 3px, #228dff 0px 0px 5px, #228dff 0px 0px 10px;
}
.operations__button-col {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.operations__button-col:first-child {
    padding-left: 10px;
}
.operations__button-text {
    display: block;
    flex: 1;
    margin: auto 10px;
    font-size: 14px;
}
.operations__button-text_hide_empty:empty {
    display: none;
}
.operations__button-text_compact {
    font-size: 12px;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.operations__button-text_small {
    font-size: 11px;
}
.forms__input_half {
    flex: 1;
    margin: auto 0px;
    width: auto;
}
.operations__button-text_white {
    color: white;
}

.operations__button-text_red {
    color: #f15e5f;
}
.operation__button:hover.operation__button_disabled {
    background: none;
}

.operation__header-icon_back {
    display: none;
    margin-right: 5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .operation__content::-webkit-scrollbar {
        width: 5px;
        background: rgba(0,0,0,0);
    }
    .operation__content::-webkit-scrollbar-track {
        background: rgba(0,0,0,0);
    }
    .operation__content::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #acb1b8;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 800px) {
    .operation__button{
        padding: 15px 0px;
    }
    .operation__content {
        -webkit-overflow-scrolling: touch;
    }
    .operation__content::-webkit-scrollbar {
        width: 0px;
        background: rgba(0,0,0,0);
    }
    .operation__content::-webkit-scrollbar-track {
        background: rgba(0,0,0,0);
    }
    .operation__content::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #acb1b8;
    }

}

.operation__card_hidden {
    display: none;
}
.operation__textline {
    display: flex;
    color: #a6afbe;
    border: 1px solid #424b58;
    border-bottom: 0px none;
    height: 38px;
}
.operation__textline:last-child{
    border-bottom: 1px solid #424b58;
}
.operation__text {
    color: #eee;
    font-size: 13px;
}
.operation__text_center {
    text-align: center;
}
.operation__textline>i {
    margin: auto 0px auto 10px;
}
.operation__textline>i:last-child{
    margin: auto 10px auto 10px;
}
.operation__textline>span{
    flex: 1;
    margin: auto 0px auto 10px;
}
.operation__textline_hidden {
    display: none;
}
.operation__main-button {
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    display: flex;
    z-index: 100;
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: absolute;
    bottom: 75px;
    left: 515px;
    cursor: pointer;
    transition: all ease 0.25s;
    background: #009fef;
}

.operation__main-button_alternate {
    bottom: 150px;
}
    
.operation__main-button_hidden {
    display: none;
}
.operation__main-button_mobile_only {
    display: none;
}
.operation__main-button:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.5);
}
.operation__main-button>i{
    color: white;
    margin: auto;
    font-size: 30px;
}


@media screen and (max-width: 800px) {
    .operation {
        max-width: 100vw;
    }
    .operation__header {
        z-index: 800;
    }
    .operation__main-button {
        left: auto;
        right: 35px;
        bottom: 82px;
    }

    .operation__main-button_alternate {
        left: auto;
        right: 35px;
        bottom: 170px;
    }

    .operation__main-button_mobile_only {
        display: flex;
    }
    .operation__main-button_hidden.operation__main-button_mobile_only {
        display: none;
    }
}
@media  (min-width: 800px) {
    .operation__button:hover:not(.operation__button_disabled) {
        color: white;
        background: #434957;
        cursor: pointer;
    }
    .operation__button_warning:hover{
        color: #f15e5f;
        background: #434957;
    }
}
@media  (min-width: 800px) and (max-height: 700px) {
    .operation_wide {
        min-width: 630px;
    }
    .operation_wide>.operation__content {
        flex-direction: row;
    }
}

.operation__bottom-buttons {
    display: flex;
}
.operation__bottom-buttons_hidden {
    display: none;
}
.operation__bottom-button {
    border: 0px none;
    background: none;
    display: flex;
    flex: 1;
    font-size: 14px;
    font-weight: normal;
    color: #a6afbe;
    flex-wrap: 0;
    padding: 10px 0px;
    cursor: pointer;
    transition: all 0.25s;
    border-top: 1px solid #424b58;
    border-right: 1px solid #424b58;
    outline: none;
    
}
.operation__bottom-button::before{
    text-align: center;
    display: block;
    flex: 1;
}
.operation__bottom-button:last-child{
    border-right: 0px none;
}
.operation__bottom-button:disabled{
    color: #424b58;
    cursor: default;
}
@media (min-width: 800px) {
    .operation__bottom-button:hover {
        color: white;
        background: #434957;
    }
    .operation__bottom-button:disabled:hover {
        color: #424b58;
        background: none;
    }
}
@media (max-width: 800px) {
    .operation__bottom-button {
        padding: 15px 0px;
    }
}
.access__textline {
    color: #5d677e !important;
}
.access__textline_active {
    color: #fff  !important;
}
.access__textline_active>i{
    color: #fff  !important;
    text-shadow: 0 0 2px #fff, 0 0 3px #228DFF, 0 0 5px #228DFF, 0 0 10px #228DFF;
}.access-icon {
    color: #fff;
    text-shadow: 0 0 2px #fff, 0 0 3px #228DFF, 0 0 5px #228DFF, 0 0 10px #228DFF;
}
.access-icon_disabled {
    color: #5d677e;
    text-shadow: none;
}

.operation__button:hover>.access-icon_disabled{
    color: #5d677e;
}.access-modal-create__code {
    border: 1px solid #0c69a3;
    padding: 10px;
    margin: 10px auto;
    color: white;
    font-size: 24px;
    width: 50%;
    text-align: center;
}.app {
    width: 100vw;
    background: #2c313c;
    background-size: cover;

    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

.blink:before {
    animation: blink .3s 10 ease-in-out;
    animation-delay: .1s;
}

@keyframes blink {
    50% {
        color: #CB5C63;
    }
}.calendar {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    z-index: 100;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100vh;
    width: 100vw;
    min-height: 0;
    background: rgba(0,0,0,0.8);
}
.calendar__content {
    display: flex;
    flex-direction: column;
    background: #384149;
    margin: auto;
    max-width: 768px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.calendar__title {
    padding: 15px;
    color: white;
    font-weight: 700;
}
.calendar__months {
    box-sizing: border-box;
    flex: 1;
    overflow-x: scroll;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #cb5c63#3b454d; ;
    display: flex;
    background: #3b454d;
}

.calendar__buttons {
    display: flex;
}
.calendar__button {
    box-sizing: border-box;
    color: white;
    padding: 20px 25px;
    text-align: center;
    cursor: pointer;
}

.calendar__button_period {
    color: #4eb5f3;
}

.calendar__button:hover {
    background: #4a5c74;

}
.calendar__button-wrapper {
    flex: 1;
    color: white;
    text-align: center;
    text-transform: uppercase;
    display: flex;
}
.calendar__button-wrapper::before{
    margin: auto 30px;
    text-transform: none;
    color: #959595
}

.cal_title:before {
    margin: auto 15px;
}

@media (max-width: 768px) {
    .calendar__button_no_mobile {
        display: none;
    }

    .calendar__content {
        max-width: 90%;
    }
}

@media (max-width: 500px) {
    .calendar {
        height: 100vh;
        height: -moz-available;          /* WebKit-based browsers will ignore this. */
        height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
        height: fill-available;
    }
    .calendar__content {
        margin: 10px auto;
        max-width: 100%;
    }
    .calendar__months {
        flex-direction: column;
        width: 98vw;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .calendar__button-wrapper{
        display: none;
    }
    .calendar__button {
        flex: 1;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .calendar__months::-webkit-scrollbar {
        width: 5px;
        background: #3b454d;;
    }
    .calendar__months::-webkit-scrollbar-track {
        background: #3b454d;;
    }
    .calendar__months::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #cb5c63;
    }
}
.calendar-month {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 15px;
    background: #3b454d;
    color: #f6f6f7;
    width: 254px;
    min-height: 366px;
    height: auto;
}
.calendar-month__title {
    text-align: center;
    padding: 15px 0px 15px 0px;
}
.calendar-month__row {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-top: 10px;

}
.calendar-month__row_weekdays {
    color: #cfdbf0;
    text-align: center;
    border-bottom: 1px solid #2f373e;
    margin: 0px 0px 5px 0px;
}

.calendar-month__day {
    box-sizing: border-box;
    color: white;
    text-align: center;
    font-weight: normal;
    flex: 1;
    height: 40px;
    width: 40px;
    padding: 10px 0;
    margin: -4px -4px -4px -4px;
    cursor: pointer;
    font-size: 13px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0);
    border-radius: 50%;

    flex-shrink: 0;
}

.calendar-month__day_weekday {
    font-weight: 700;
}
.calendar-month__day_weekday:hover {
    cursor: default;
    background: none;
}

.calendar-month__day_today {
    /*border-color: #fff;*/
}
.calendar-month__day_selected {
    color: #4a5c74;
    background: #fff;
    z-index: 120;
}
/*
.calendar-month__day_selected:before {
    content: '';
    position: static;
    height: 50px;
    width: 50px;
    z-index: 115;
    background: red;
}
*/

.calendar-month__day_disabled {
    color: #5d677e;
    cursor: default;
}
.calendar-month__day:hover.calendar-month__day_disabled {
    background: none;
}
.calendar-month__day_interval {
    margin: 4px -4px 4px -4px;
    height: 24px;
    padding: 2px 0px;
    color: #3b454d;
    background: #9da2a6;
    border-radius: 0%;
}

@media (max-width: 500px) {
    .calendar-month {
        width: auto;
        margin: 20px auto;
    }

    .calendar-month__day {
        width: 14vw;
        height: 14vw;
        padding-top: calc(7vw - 10px);
        padding-bottom: calc(7vw - 7px);
    }
    .calendar-month__day_interval {
        height: 9vw;
        padding-top: calc(4.5vw - 9px);
        padding-bottom: calc(4.5vw - 7px);
    }
}
@media (min-width: 500px) {

    .calendar-month__day:hover {
        background: #4a5c74;;
    }
    .calendar-month__day_selected:hover {
        color: white;
    }
    .calendar-month__day_interval:hover {
        height: 40px;
        width: 40px;
        padding: 10px 0px;
        margin: -4px -4px -4px -4px;
        border-radius: 50%;
        z-index: 125;
        color: #fff;
    }
}
.tec-color__border_none {
    border-color: transparent !important;
    box-shadow: none !important;
}

.tec-color__border_blue {
    border-color: #4560e2 !important;
    box-shadow: 0 0 25px 1px #4560e2;
}

.tec-color__border_brown {
    border-color: #937046 !important;
    box-shadow: 0 0 25px 1px #937046;
}

.tec-color__border_green {
    border-color: #20ce31 !important;
    box-shadow: 0 0 25px 1px #20ce31;
}

.tec-color__border_lime {
    border-color: #8abd25 !important;
    box-shadow: 0 0 25px 1px #8abd25;
}

.tec-color__border_orange {
    border-color: #e15524 !important;
    box-shadow: 0 0 25px 1px #e15524;
}

.tec-color__border_pink {
    border-color: #fa1ded !important;
    box-shadow: 0 0 25px 1px #fa1ded;
}

.tec-color__border_purple {
    border-color: #8505a1 !important;
    box-shadow: 0 0 25px 1px #8505a1;
}
.tec-color__border_red {
    border-color: #801618 !important;
    box-shadow: 0 0 25px 1px #801618;
}
.tec-color__border_yellow {
    border-color: #f4a01c !important;
    box-shadow: 0 0 25px 1px #f4a01c;
}

.tec-color__border_cyan {
    border-color: #00d3d4 !important;
    box-shadow: 0 0 25px 1px #00d3d4;
}

.tec-color__border_no_shadow {
    box-shadow: none;
}



.tec-color__background_blue {
    background: #4560e2;
    fill: #4560e2;
}

.tec-color__background_brown {
    background: #937046;
    fill: #937046;
}

.tec-color__background_green {
    background: #20ce31;
    fill: #20ce31;
}

.tec-color__background_lime {
    background: #8abd25;
    fill: #8abd25;
}

.tec-color__background_orange {
    background: #e15524;
    fill: #e15524;
}

.tec-color__background_pink {
    background: #fa1ded;
    fill: #fa1ded;
}

.tec-color__background_purple {
    background: #8505a1;
    fill: #8505a1;
}
.tec-color__background_red {
    background: #801618;
    fill: #801618;
}
.tec-color__background_yellow {
    background: #f4a01c;
    fill: #f4a01c;
}
.tec-color__background_cyan {
    background: #00d3d4;
    fill: #00d3d4;
}



.tec-color__background_op_blue {
    background: rgba(69, 96, 226, 0.3);
}

.tec-color__background_op_brown {
    background: rgba(147, 112, 70, 0.3);
}

.tec-color__background_op_green {
    background: rgba(32, 206, 49, 0.3);
}

.tec-color__background_op_lime {
    background: rgba(138, 189, 37, 0.3);
}

.tec-color__background_op_orange {
    background: rgba(225, 85, 36, 0.3);
}

.tec-color__background_op_pink {
    background: rgba(250, 29, 237, 0.3);
}

.tec-color__background_op_purple {
    background: rgba(133, 5, 161, 0.3);
}
.tec-color__background_op_red {
    background: rgba(128, 22, 24, 0.3);
}
.tec-color__background_op_yellow {
    background: rgba(244, 160, 28, 0.3);
}
.tec-color__background_op_cyan {
    background: rgba(0, 211, 212, 0.3);
}

.configurations-modal__input_code {
    outline: none;
    box-sizing: border-box;
    display: block;
    border: 1px solid #0c69a3;
    padding: 10px;
    margin: 5px auto;
    color: white;
    font-size: 24px;
    text-align: center;
    background: none;
}
@media (max-width: 800px) {
    .configuration-modal {
        box-sizing: border-box;
        width: 80vw;
    }
    .configurations-modal__input_code {
        width: 70vw;
    }
}
@media (min-width: 800px) {
    .configuration-modal {
        min-width: 300px;
        padding: 0px 15px;
    }
}
.control_panel {
    display: flex;
    flex-direction: column;
   
    flex-shrink: 0;
}

.control__buttons {
    display: none;
    justify-content: space-around;
    flex: 1;
    margin: 15px 0px;
}
.control__commands {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00c0fc #4a5c74 ;
    min-height: 0;
    display: flex;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .control__commands::-webkit-scrollbar {
        width: 5px;
        background: #4a5c74;
    }
    .control__commands::-webkit-scrollbar-track {
        background: #4a5c74;
    }
    .control__commands::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #00c0fc;
    }
    
}
.control__button {
    box-sizing: border-box;
    width: 90px;
    height: 90px;

    border-radius: 50%;
    display: flex;
    padding: 5px;
    margin: auto 0px;
    cursor: pointer;
    font-size: 40px;

    border: 3px solid #181b22;
    background: #373b47;
    background: linear-gradient(to bottom right, #383b4a, #1a1b20);
    color: #878785;
    transition: all 0.25s;
    outline: none;
}
.control__button:active {
    transform: scale(0.9);
}
.control__button_active {
    /* text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; */
    box-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #228DFF, 0 0 12px #228DFF, 0 0 15px #228DFF, 0 0 17px #228DFF, 0 0 22px #228DFF;
    color: white;
    border-color: white;
}
.control__button_disabled {
    color: #181b22;
}
.control__button_disabled:active{
    transform: none;
}
@keyframes control__sending {
    0% {
        background: #373b47;
        box-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #228DFF, 0 0 12px #228DFF, 0 0 15px #228DFF, 0 0 17px #228DFF, 0 0 22px #228DFF;
        color: white;
        border-color: white;
    }
    50% {
        background: #373b47;
        box-shadow: none;
        color: #878785;
        border: 3px solid #181b22;
    }
    100% {
        background: #373b47;
        box-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #228DFF, 0 0 12px #228DFF, 0 0 15px #228DFF, 0 0 17px #228DFF, 0 0 22px #228DFF;
        color: white;
        border-color: white;
    }
}
.control__button_sending {
    animation: control__sending 1s ease-in-out infinite;
}
.control__button>i{
    margin: auto;
    
}
.control__button:first-child, .control__button:last-child{
    width: 70px;
    height: 70px;
    font-size: 30px;
}
@media (max-width: 800px) {
    .control__buttons {
        display: flex;
    }
    .control__buttons_disbled {
        display: none;
    }
    .control__commands {
        display: none;
    }

    .control__commands_visible {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: 0px;
        width: 100vw;
        height: 100vh;
        height: -moz-available;
        height: -webkit-fill-available;
        height: fill-available;
        background: rgba(0,0,0,0.75);
        display: flex;
        z-index: 999;
        transform: translate3d(0,0,1);
    }
}
.control__info {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    
}

@media  (min-width: 800px) and (max-height: 700px) {
    .control_panel {
        min-width: 400px;
    }
}.control-buttons-modal-valet_label {
    color: white;
    font-size: 16px;
    text-align: center;
    display: block;
}
.control-buttons-modal-valet_input {
    display: block;
    border: 1px solid #0c69a3;
    padding: 10px;
    margin: 10px auto;
    color: white;
    font-size: 24px;
    width: 50%;
    text-align: center;
    background: none;
}.control-commands {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: auto 0px;
    min-height: 0;
    flex-shrink: 0;
}
.control-commands__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 15px 15px 0px 15px;
    padding: 15px 10px 0px 10px;

    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cb5c63#4a5c74 ;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .control-commands__list::-webkit-scrollbar {
        width: 5px;
        background: #4a5c74;
    }
    .control-commands__list::-webkit-scrollbar-track {
        background: #4a5c74;
    }
    .control-commands__list::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #cb5c63;
    }
}

.control-commands__back {
    display: none;
}

@media (max-width: 800px) {
    .control-commands {
        position: absolute;
        z-index: 1200;
        margin: 0px;
        width: 100vw;
        height: 100vh;
        height: -moz-available;          /* WebKit-based browsers will ignore this. */
        height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
        height: fill-available;
        -webkit-transform: translate3d(0,0,1);
        transform: translate3d(0,0,1);
        bottom: 0;
        position: absolute;
    }
    .control-commands__list {
        z-index: 1201;
    }
    .control-commands__back  {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        flex-shrink: 0;
        padding: 15px 10px 0px 10px;
    }
}



.control-commands__button {
    display: flex;
    background: #363c4a;
    color: #d9dbdf;
    outline: none;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    margin-bottom: 15px;
    font-size: 13px;
    border: 0 none;
    min-height: 48px;
    cursor: pointer;
    padding: 1px 10px 2px 5px;
    transition: all 0.25s;
    flex-shrink: 0;
}
.control-commands__button_hidden {
    display: none;
}

.control-commands__button-icon {
    width: 36px;
    margin: auto 0px;
    font-size: 18px;
}
.control-commands__button-text {
    display: block;
    flex: 1;
    text-align: left;
    margin: auto 5px auto 0px;
}

.control-commands__button-lamp {
    box-sizing: border-box;
    height: 6px;
    width: 32px;
    background: none;
    border: 1px solid #a6afbe;
    border-radius: 3px;
    margin: auto 0px;
}
.control-commands__button:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.control-commands__button:hover>.control-commands__button-lamp {
    border: 1px solid #00c0fc;
    color: white;
}

@keyframes control-commands__sending {
    0% {
        background: none;
        border: 1px solid #00c0fc;
    }
    50% {
        background: #00c0fc;
        border: 1px solid #00c0fc;
    }
    100% {
        background: none;
        border: 1px solid #00c0fc;
    }
}

.control-commands__button_sending>.control-commands__button-lamp {
    animation: control-commands__sending 1s ease-in-out infinite;
}
.control-commands__button_active>.control-commands__button-lamp {
    background: #00c0fc;
    border: 1px solid #00c0fc;
    box-shadow: #228dff 0px 0px 2px, #228dff 0px 0px 3px, #228dff 0px 0px 5px, #228dff 0px 0px 10px;
}

.control-commands__button_disabled {
    color: #5d677e;;
    cursor: default;
}
.control-commands__button_hidden {
    display: none;
}
.control-commands__button_disabled>.control-commands__button-lamp {
    border: 1px solid #5d677e;
    color: #5d677e;
}
.control-commands__button_disabled:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    color: #5d677e;
}
.control-commands__button_disabled:hover>.control-commands__button-lamp {
    border: 1px solid #5d677e;
    color: #5d677e;
}


@media  (max-width: 800px) {
    .control-commands {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: 0px;
        width: 100vw;
        height: 100vh;
        height: -moz-available;
        height: -webkit-fill-available;
        height: fill-available;
        background: rgba(0,0,0,0.75);
        display: flex;
        z-index: 999;
        transform: translate3d(0,0,1);
    }
}
@media  (min-width: 800px) and (max-height: 700px) {
    .control-commands {
        margin: 0px;
    }
    .control-commands__list {
        margin: 0px;
    }
    .control-commands__button {
        min-width: 205px;
    }
}
.control-info {
    flex: 1;
    box-sizing: border-box;
    min-height: 374px;
    margin: 10px 15px;
    box-sizing: border-box;

    flex-shrink: unset;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    perspective: 800px;

    /*border-top: 1px solid #424b58;*/
}

.control-info_animated {
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
}

.control-info_flipped {
    -webkit-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
}

.control-info_flipped:first:first {
    display: none;
}
.control-info__surface {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    background: #373b47;
    background: linear-gradient(to left top, #363c4a, #1a1b20);
}

.control-info__surface_back {
    backface-visibility: hidden;
    transform: rotateY( -180deg);
}
.control-info__surface_front>div {
    flex: 1;
}
.control-info__header {
    display: flex;
    padding: 5px 14px;
    flex-direction: row;
    /*border-bottom: 1px solid #20222e;*/
    font-size: 12px;
    border-bottom: 1px solid #424b58;
    box-sizing: border-box;
    height: 28px;
    flex-shrink: 0;
}
.control-info__header::before{
    color: #747b97;
}
.control-info__header-wrapper {
    flex: 1;
}

.control-info__header-param {
    color: white;
    margin: auto 0px;
}
.control-info__header-param:empty::after{
    content: '-';
}
.control-info__icon {
    color: #111;
    font-size: 14px;
    margin: auto 0px auto 5px;
}
.control-info__icon_active {
    color: white;
}
.icon-sensors.control-info__icon_active, .icon-dvr.control-info__icon_active{
    text-shadow: 0 0 2px #fff, 0 0 3px #228DFF, 0 0 5px #228DFF, 0 0 10px #228DFF;
}
.icon-park-break.control-info__icon_active, .icon-engine_block.control-info__icon_activ {
    text-shadow: 0 0 2px #fff, 0 0 3px rgb(255, 208, 208), 0 0 5px rgb(255, 81, 81), 0 0 10px rgb(255, 0, 0);
}
.icon-heater.control-info__icon_active {
    text-shadow: 0 0 2px #fff, 0 0 3px #f4a01c, 0 0 5px #f4a01c, 0 0 10px #f4a01c;
}
.icon-valet.control-info__icon_active {
    text-shadow: 0 0 2px #fff, 0 0 3px #f4a01c, 0 0 5px #f4a01c, 0 0 10px #f4a01c;
}
.control-info__row {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
}
.control-info__column {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.control-info__block {
    /*padding: 10px 0px;*/
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.control-info__block_horisontal {
    border-bottom-width: 1px !important;
    border-bottom-style: solid;
    border-top-width: 0px;
    border-top-style: none;
    /*-webkit-border-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #747b97, #747b97, #747b97, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 1;*/
    border-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #747b97, #747b97, #747b97, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 1;

}
.control-info__block_vertical {
    border-width: 1px;
    border-style: solid;
    /*-webkit-border-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #747b97, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 1;*/
    border-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #747b97, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 1;
}
.control-info__block-title {
    color: #747b97;
    margin: 15px auto 8px auto;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase
}
.control-info__block-value {
    color: #fff;
    font-size: 22px;
    margin-bottom: 15px;

    text-align: center;
}
.control-info__block-value:empty{
    margin-left: 0px;
}
.control-info__block-value:empty::before{
    content: '-';
}
.control-info__block-value:after {
    vertical-align: top;
    padding-left: 2px;
    color: #747b97;
    font-size: 11px;
}
.control-info__block-string {
    color: #fff;
    font-size: 12px;
    margin-bottom: 15px;
    text-align: center;
    min-height: 28px;
}

.map {
    min-height: 300px;
}
.control-info-guard {
    width: 120px;
    height: 180px;
    margin: auto;
    flex-shrink: 0;
}
.control-info-guard>svg {
    display: block;
    max-height: 180px;
    max-width: 120px;
}

@keyframes control-info-guard__animate_blink {
    0% {
        fill-opacity: 1;
    }
    50% {
        fill-opacity: 0;
    }
    100% {
        fill-opacity: 1;
    }
}
.control-info-guard__body {
    fill:#747b97;
    transition: all 1s;
}
.control-info-guard__body_open {
    fill: #ffffff;
}
.control-info-guard__body_alarm {
    fill: #f15e5f;
}


.control-info-guard__lamps{
    stroke-width: 0.5px;
    stroke: #747b97;
    fill: none;
    transition: all 1s;
}
.control-info-guard__lamps.control-info-guard__lamps_enabled {
    fill: #fffdf2;
}
.control-info-guard__lamps.control-info-guard__lamps_break {
    fill: #E52626;
    stroke: #E52626;
}
.control-info-guard__lamps.control-info-guard__lamps_turn {
    fill: #F1C958;
    stroke: #F1C958;
    
    animation: control-info-guard__animate_blink 1s infinite;
}

.control-info-guard__perimetr {
    fill: none;
}
.control-info-guard__perimetr_guard {
    fill: #4cb2f1;
    fill-opacity: 1;
}
.control-info-guard__perimetr_alarm {
    fill: #f15e5f;
    animation: control-info-guard__animate_blink 1s ease-in-out infinite;
}
.control-info-guard__perimetr_no-connect {
    fill: #f15e5f;
}
.control-info-guard__perimetr_valet {
    fill: #f4a01c;;
    animation: control-info-guard__animate_blink 2s ease-in-out infinite;
}

.test {
    fill: green;
}

.control-info-guard__lights_enabled {
    opacity: 1;   
}

.control-info-guard__lights-head {
    fill:  url(#headlights_gradient);
    fill-opacity: 0;
}
.control-info-guard__lights-head.control-info-guard__lights_enabled{
    fill-opacity: 1;
}


.control-info-guard__lights-stop {
    fill: #E52626;
    fill-opacity: 0;
}
.control-info-guard__lights-stop.control-info-guard__lights_enabled{
    fill-opacity: 1;
}

.control-info-guard__lights-turn {
    fill: #F1C958;
    fill-opacity: 0;
}
.control-info-guard__lights-turn.control-info-guard__lights_enabled{
    animation: control-info-guard__animate_blink 1s ease-in-out infinite;
}






.control-info-guard__body-element {
    fill: none;
}

.control-info-guard__body-element_open {
    fill: #f15e5f;
}

.device {
    display: flex;
    flex-direction: column;
    /* background: #333947; */
    background: linear-gradient(to right top, #363c4a, #27282e);
    border: 1px solid #424b58;
    margin: 15px 10px 0px 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.25s;
}


.device:last-child {
    margin-bottom: 15px;
}
.device__header {
    display: flex;
    padding: 8px 8px 0px 8px;
    justify-content: space-between;
    min-height: 20px;
}
.device__card{
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.device__gsm {
    margin: auto 0px;
    display: flex;
}
.device__gsm>svg {
    margin: auto;
}
.device__gsm-level {
    fill: #2c313c;
}
.device__gsm-no-connect_active {
    fill: #f15e5f;
}
.device__gsm-level_active {
    fill: #a6afbe;
}
.device__header-icon{
    color: #a6afbe;
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: flex;
}
.device__header-icon>i{
    margin: auto;
}

.device__image {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.device__image.default {
    background-size: 35px;
}

.device__badge {
    position: relative;
}

.device__badge::before {
    position: absolute;
    top: 35px;
    left: -7px;
    font-size: 12px;
    line-height: 12px;
    padding: 5px;
    background: #4eb5f3;
    color: white;
    border-radius: 50%;
}

.device__title {
    color: #a6afbe;
    text-align: center;
    padding: 10px 3px 0px 3px;
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.device__model {
    color: rgba(166, 175, 190, 0.5);
    text-align: center;
    padding: 5px 5px 0 5px;
    word-break: break-word;
    font-size: 11px;
}
.device__status {
    color: white;
    text-align: center;
    padding: 5px 0px 15px 0px;
    font-size: 11px;
}
.device__status_info {
    color: #4eb5f3;
}
.device__timelimit {
    color: #f15e5f;
    text-align: center;
    padding: 5px 0px 0px 0px;
    font-size: 10px;
}
.device__timelimit:empty {
    display: none;
}
.device__status_panic {
    animation: panic_status 1s infinite ease;
}
.device__buttons {
    display: flex;
    flex-direction: column;
}
.device__button {
    display: flex;
    flex: 1;
    font-size: 18px;
    color: #a6afbe;
    text-align: center;
    padding: 8px;
    cursor: pointer;
    transition: all 0.25s;
    border-top: 1px solid #424b58;
}
.device__button>i {
    margin: auto 0px;
}
.device__button>span{
    font-size: 13px;
    margin: auto 0px;
    flex: 1;
    text-align: left;
    padding-left: 10px;
}


.device__button_hidden {
    display: none;
}

@keyframes animation_blink_yellow {
    from {color: #f4a01c;}
    50% {color: #ffffff;}
    to {color: #f4a01c;}
}
@keyframes animation_blink_red {
    from {color: #f15e5f;;}
    50% {color: #ffffff;}
    to {color: #f15e5f;;}
}
@keyframes animation_blink_blue {
    from {color: #4eb5f3;}
    50% {color: #ffffff;}
    to {color: #4eb5f3;}
}


.device__warning_blue>.device__card>.device__image>.device__badge::before {
    background: #4eb5f3;
}
.device__warning_blue>.device__card>.device__status {
    color: #4eb5f3;
    animation: none;
}

.device__warning_yellow>.device__card>.device__image>.device__badge::before {
    background: #f4a01c;
}
.device__warning_yellow>.device__card>.device__status {
    color: #f4a01c;
    animation: none;
}

.device__warning_yellow_blink>.device__card>.device__image>.device__badge::before {
    background: #f4a01c;
}
.device__warning_yellow_blink>.device__card>.device__status {
    color: #f4a01c;
    animation: animation_blink_yellow 1s infinite ease;;
}

.device__warning_red>.device__card>.device__image>.device__badge::before {
    background: #f15e5f;;
}

.device__warning_red>.device__card>.device__status {
    color: #f15e5f;;
    animation: none;
}

.device__warning_red_blink>.device__card>.device__image>.device__badge::before {
    background: #f15e5f;;
}
.device__warning_red_blink>.device__card>.device__status {
    color: #f15e5f;;
    animation: animation_blink_red 1s  infinite ease;
}

.device__warning_blue_blink>.device__card>.device__image>.device__badge::before {
    background: #4eb5f3;
}
.device__warning_blue_blink>.device__card>.device__status {
    color: #4eb5f3;
    animation: animation_blink_blue 1s  infinite ease;
}
@media (min-width: 800px) {
    .device__card_clickable:hover {
        background: #434957;
    }
    .device__button:hover {
        color: white;
        background: #434957;
    }
}
@media (max-width: 800px) {
    .device {
        flex-direction: row;
    }
    .device__card {
        flex: 1;
    }
    .device__badge::before {
        position: absolute;
        top: 35px;
        left: -7px;
        font-size: 18px;
        line-height: 18px;
        padding: 5px;
        background: #4eb5f3;
        color: white;
        border-radius: 50%;
    }
    .device__buttons {
        flex: 1;
        border-left:  1px solid #424b58;
    }
    .device__button:first-child{
        border-top: 0px none;
    }

    .device:first-child:nth-last-child(1) {
        flex-direction: column;
    }

    .device:first-child:nth-last-child(1)>.device__card>.device__image{
        width: 128px;
        height: 128px;
    }
    .device:first-child:nth-last-child(1)>.device__card>.device__title {
        padding-top: 25px;
        font-size: 20px;
    }
    .device:first-child:nth-last-child(1)>.device__card>.device__image>.device__badge::before {
        position: absolute;
        top: 90px;
        left: -7px;
        font-size: 18px;
        line-height: 18px;
        padding: 5px;
        background: #4eb5f3;
        color: white;
        border-radius: 50%;
    }
    .device:first-child:nth-last-child(1)>.device__buttons {
        flex-direction: row;
    }
    .device:first-child:nth-last-child(1)>.device__buttons>.device__button {
        border-left: 1px solid #424b58;
        border-top: 1px solid #424b58;
        padding: 15px 8px;
    }
    .device:first-child:nth-last-child(1)>.device__buttons>.device__button:first-child{
        border-left: 0px none;
    }
}
@media screen and (device-aspect-ratio: 40/71) and (max-width: 800px){
    .device {
        margin: 15px 0px 0px 0px;
    }
}

.device__buttons_hidden {
    display: none;
}.device-registration-modal-failed__header {
    font-size: 14px;
    color: white;
    border-bottom: 1px solid #aaa; 
    margin: 20px 0px 10px 0px;
    padding: 0px 0px 10px 0px;
}

.device-registration-modal-failed__message {
    font-size: 13px;
    color: #ccc;
    margin: 0px;
    padding: 0px;
}
.device-registration-modal-failed__link {
    color: #4eb5f3;
}.dozor {
    width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}
.dozor__header {
    z-index: 40;
}
.dozor__content {
    flex: 1;
    background: white;
    display: flex;
    min-height: 0;
}
.dozor__devices {
    box-sizing: border-box;
    width: 150px;
    background: #333947;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dozor__devices-search {
    position: relative;
}

.dozor__devices-search svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6px;
}

.dozor__devices-search span {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 26px;
    font-size: 26px;
    color: #747b97;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dozor__devices-search span:hover {
    color: white;
}

.dozor__devices-search input {
    border-bottom: 1px solid transparent;
    outline: none;
    width: calc(100% - 48px);
    height: 32px;
    background: #292A31;
    color: white;
    padding: 0 24px 0 22px;
}

.dozor__devices-search input::placeholder {
    font-size: 10px;
}


.dozor__devices-search input:focus {
    border-bottom-color: #3482E5;
}

.dozor__garage {
    flex: 1;
    display: flex;
    min-height: 0;
}
.dozor__buttons {
    display: flex;
    border-top: 1px solid #3b4250;
    z-index: 21;
}
.dozor__button {
    display: flex;
    flex: 1;
    border-right: 1px solid #3b4250;
    background: #333947;
    color: #a6afbe;
    display: flex;
    font-size: 14px;
    height: 40px;
    cursor: pointer;
    transition: all 0.25s;
}
.dozor__button:before {
    margin: auto 0px;
    flex: 1;
}
.dozor__button:after {
    margin: auto 0px;
    flex: 1;
}
.dozor__button:last-child{
    border-right: 0px none;
}
.dozor__button>i {
    margin: auto 10px;
}
.dozor__button:hover {
    background: #434957;
    color: white;
}
.dozor__operation {
    width: 400px;
    z-index: 30;
    display: flex;
}
.dozor__operation:empty{
    display: none;
}
.dozor__map {
    flex: 1;
}

@media (max-width: 800px) {

    
    .dozor__header{
        box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.33);
    }
    .dozor__devices {
        
        flex: 1;
    }
    
    .dozor__content>.dozor__map {
        display: none;
    }

    .mobile-map>.dozor__map {
        display: 'block';
    }
    
    .dozor__map_mobile {
        display: block;
        margin-left: -100vw;
        z-index: 75;
    }

    .dozor__operation:not(:empty) {
        flex: 1;
        margin-left: -100vw;
        margin-top: -63px;
        z-index: 50;
    }
    
  }body, html {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    overscroll-behavior: none;
}
* {
    -webkit-tap-highlight-color: transparent;
}
input, button {
    font-family: 'Open Sans', sans-serif;
}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type=range] {
    height: 25px;
    -webkit-appearance: none;
    margin: 10px 0 10px 10px;
    width: 100%;
    background: none;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000;
    background: #2497E3;
    border-radius: 1px;
    border: 0px solid #000000;
  }
  input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 1px solid #2497E3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #A1D0FF;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #2497E3;
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000;
    background: #2497E3;
    border-radius: 1px;
    border: 0px solid #000000;
  }
  input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 1px solid #2497E3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #A1D0FF;
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type=range]::-ms-fill-lower {
    background: #2497E3;
    border: 0px solid #000000;
    border-radius: 2px;
    box-shadow: 0px 0px 0px #000000;
  }
  input[type=range]::-ms-fill-upper {
    background: #2497E3;
    border: 0px solid #000000;
    border-radius: 2px;
    box-shadow: 0px 0px 0px #000000;
  }
  input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 0px 0px 0px #000000;
    border: 1px solid #2497E3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #A1D0FF;
    cursor: pointer;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #2497E3;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #2497E3;
  }
  datalist {
      display: block;
  }
@font-face {
    font-family: 'fontello';
    src: url('assets/fontello/20190506060732.eot');
    src: url('assets/fontello/20190506060732.eot7#iefix') format('embedded-opentype'),
         url('assets/fontello/20190506060732.woff') format('woff2'),
         url('assets/fontello/20190506060732.woff') format('woff'),
         url('assets/fontello/20190506060732.ttf') format('truetype'),
         url('assets/fontello/20190506060732.svg#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
  /*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
      font-family: 'fontello';
      src: url('../font/fontello.svg?83828250#fontello') format('svg');
    }
  }
  */
   
   [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
   
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
   
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
   
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
   
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
   
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
   
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
 
.icon-users-1:before { content: '\e800'; } /* '' */
.icon-download:before { content: '\e801'; } /* '' */
.icon-reverse:before { content: '\e802'; } /* '' */
.icon-attention:before { content: '\e804'; } /* '' */
.icon-menu:before { content: '\e805'; } /* '' */
.icon-plus:before { content: '\e806'; } /* '' */
.icon-dots:before { content: '\e807'; } /* '' */
.icon-route:before { content: '\e808'; } /* '' */
.icon-journal:before { content: '\e809'; } /* '' */
.icon-tracks:before { content: '\e80a'; } /* '' */
.icon-support:before { content: '\e80b'; } /* '' */
.icon-exit:before { content: '\e80c'; } /* '' */
.icon-heater:before { content: '\e830'; } /* '' */
.icon-autolaunch:before { content: '\e831'; } /* '' */
.icon-heat_and_start:before { content: '\e832'; } /* '' */
.icon-panic:before { content: '\e833'; } /* '' */
.icon-season-comfort:before { content: '\e873'; } /* '' */
.icon-ventilation:before { content: '\e874'; } /* '' */
.icon-parking_point:before { content: '\e878'; } /* '' */
.icon-sensors:before { content: '\e87a'; } /* '' */
.icon-dvr:before { content: '\e87b'; } /* '' */
.icon-trunk_open:before { content: '\e87c'; } /* '' */
.icon-gps_fixed:before { content: '\e88e'; } /* '' */
.icon-gps_search:before { content: '\e88f'; } /* '' */
.icon-commands:before { content: '\e890'; } /* '' */
.icon-search:before { content: '\e891'; } /* '' */
.icon-valet:before { content: '\e902'; } /* '' */
.icon-lock_open:before { content: '\e903'; } /* '' */
.icon-lock:before { content: '\e912'; } /* '' */
.icon-engine_block:before { content: '\e916'; } /* '' */
.icon-park-break:before { content: '\e91a'; } /* '' */
.icon-money:before { content: '\e91d'; } /* '' */
.icon-settings:before { content: '\e920'; } /* '' */
.icon-check:before { content: '\e925'; } /* '' */
.icon-back:before { content: '\e927'; } /* '' */
.icon-forward:before { content: '\e928'; } /* '' */
.icon-geozones:before { content: '\e929'; } /* '' */
.icon-calendar:before { content: '\e92b'; } /* '' */
.icon-notification:before { content: '\e92c'; } /* '' */
.icon-user:before { content: '\e92e'; } /* '' */
.icon-control:before { content: '\e936'; } /* '' */
.icon-lbs:before { content: '\e93f'; } /* '' */
.icon-close:before { content: '\e94a'; } /* '' */
.icon-guard:before { content: '\e953'; } /* '' */
.icon-star:before { content: '\e958'; } /* '' */
.icon-parking:before { content: '\e95d'; } /* '' */
.icon-map:before { content: '\e95f'; } /* '' */
.icon-trash:before { content: '\e961'; } /* '' */
.icon-config:before { content: '\e962'; } /* '' */
.icon-users:before { content: '\e963'; } /* '' */.forms__form {
    display: block;
    padding: 10px;
}
.forms__group {
    margin: 15px 0px 10px 0px;
    padding: 0px;
    box-sizing: border-box;
}


.forms__group_buttons {
    display: flex;
    justify-content: space-around;

}
.forms__group_checkbox {
    display: flex;
    justify-content: space-between;
    margin: 15px 0px;
}
.forms__group_checkbox_hight {
    margin-bottom: 30px;
}
.forms__group_hidden {
    display: none;
}
.forms__group_help {
    color: white;
    text-align: justify;
}
.forms__loader {
    display: none;
    height: 100px;
    background-image: url('/assets/loader.svg');
    background-size: 60px 60px;
    background-position: center;
    background-repeat: no-repeat;
}

.forms__loader.gsm_code {
    display: flex;
    flex-direction: column;
    height: auto;
}

.forms__loader.gsm_code > .forms__group:not(:first-child) {
    opacity: 0;
}

.forms__group_hidden+.forms__loader{
    display: flex;
}
.forms__label {
    display: flex;
    color: #aaa;
    font-size: 13px;
    padding: 3px 0px;
}
.forms__label_half {
    display: flex;
    flex: 1;
    margin: auto 0px;
}
.forms__label_content {
    flex: 1;
    margin-right: 10px;
}

.forms__group_checkbox>.forms__label {
    display: flex;
    width: 100%;
}
.forms__group_checkbox>.forms__label::before {
    margin: auto 0px;
}


.forms__input {
    display: block;
    box-sizing: border-box;
    padding: 5px;
    border: 0px none;
    border-bottom: 1px solid #aaa;
    margin: 0px;
    width: 100%;
    color: #333;
    font-size: 16px;
}
.forms__input_half {
    flex: 1;
    margin: auto 0px;
    width: auto;
}
.forms__input:focus{
    padding-bottom: 4px;
    border-bottom: 2px solid #4eb5f3;
    outline: none;
}
.forms__group_error>.forms__input{
    padding-bottom: 4px;
    border-bottom: 2px solid #f00000;
}
.forms__group_error>.forms__help{
    color: #f00000;
}
.forms__checkbox {
    display: none;
}
.forms__checkbox__box {
    width: 32px !important;
    height: 16px;
    border-radius: 8px;
    margin: auto 0px auto auto;
    background: #aaa;
    transition: all 0.25s;
    display: flex;
    cursor: pointer;
    flex-wrap: 0;
}

.forms__checkbox__box::before{
    margin-right: 10px;
    flex: 1;
}
.forms__checkbox__box>.forms__checkbox__box-selector {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-top: -3px;
    margin-left: -3px;
    margin-bottom: -3px;
    transition: all 0.25s;
    background: #ccc;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.forms__checkbox:disabled+.forms__checkbox__box{
    cursor: default;  
    opacity: 0.3;
}
 

.forms__checkbox:checked+.forms__checkbox__box{
    background: #4eb5f3;
}
.forms__checkbox:checked+.forms__checkbox__box>.forms__checkbox__box-selector {
    margin-left: 13px;
    margin-right: -4px;
    background: #0c69a3;
}

.forms__help {
    font-size: 12px;
    color: #6c757d;
    transition: all 0.25s;
}
.forms__help_always_visible {
    color: #6c757d;
}

.forms__icon {
    font-size: 14px;
    display: block;
    margin: auto 5px auto 0px;
}
.forms__button {
    box-sizing: border-box;
    display: block;
    color: white;
    padding: 7px 15px;
    font-size: 16px;
    font-weight: 400;
    background: #009fef;
    border: 1px solid #009fef;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    margin: 0px 10px 15px 10px;
}
.forms__button_warning {
    background: #ff6160;
    border: 1px solid #ff6160;
}
.forms__button_lite {
    background: none;
    color: #0c69a3;
}
.forms__button_warning+.forms__button_lite{
    background: none;
    border: 1px solid #ff6160;
    color: #ff6160;
}
.forms__button:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.forms__button:hover {
    outline: none;
}
.forms__button_hidden {
    display: none;
}
.forms__color-selector {
    width: 20px;
    height: 20px;
    margin: 3px 3px 20px 2px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.forms__color-selector:hover {
    transform: scale(1.2);
}
.forms__color-selector_selected {
    width: 26px;
    height: 26px;
    margin: 0px;
}
.forms__color-selector_selected:hover {
    transform: none;
}
.garage {
    flex:  1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.garage__devices {
    box-sizing: border-box;
    flex: 1;
    flex-shrink: 0;
    background: #2c313c;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #cb5c63#4a5c74 ;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    color: #747b97;
    display: block;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .garage__devices::-webkit-scrollbar {
        width: 5px;
        background: #4a5c74;
    }
    .garage__devices::-webkit-scrollbar-track {
        background: #4a5c74;
    }
    .garage__devices::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #cb5c63;
    }
}

.garage__devices_loading {
    background-image: url('/assets/loader.svg');
    background-size: 120px 120px;
    background-position: center;
    background-repeat: no-repeat;
}

.garage__devices_error {
    color: #df1414;
    padding: 30px 5px;
    text-align: center;
}

.garage__button-add {
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    color: #a6afbe;
    justify-content: space-around;
    border-top: 1px solid #3b4250;
    transition: all 0.25s;
    cursor: pointer;
    background: #333947;
    z-index: 20;
    flex: none; 
}
.garage__button-add>i{
    font-size: 40px;
    margin: 0px auto;
}
.garage__button-add-title{
    margin: 0px auto;
    font-size: 13px;
}
.garage__button-add:hover {
    background: #434957;
    color: white;
}
.mapboxgl-popup-content {
    width: auto;
    background-color: #2F2E33;
    border-radius: 10px;
    padding: 0;
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: #2F2E33;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: #2F2E33;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #2F2E33;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #2F2E33;
}

.desc-wrap {
    padding: 0 20px;
}

.mapboxgl-popup-content .desc {
    color: #979799;
    margin: 8px 0;
    font-size: 14px;
}

.mapboxgl-popup-content .val {
    color: white;
}

.mapboxgl-popup-tip {
    border-top-color: #2F2E33;
}.geomap-journal {
    margin-top: 10px;
    max-height: 500px;
    overflow-y: auto;
    max-width: 300px;
    background: #2d323d;
    display: grid;
}.geomap-marker{
    width: 60px;
    height: 50px;
    box-sizing: border-box;
}

.geomap-marker.marker-event .geomap-marker__arrow,
.geomap-marker.marker-event .geomap-marker__image,
.geomap-marker.marker-event .geomap-marker__title {
    transform: scale(.7);
}

.geomap-marker.marker-event .geomap-marker__image {
    margin-top: 0;
    background-size: 30px;
}

.geomap-marker__image {
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    margin: 0px auto;

    border-radius: 50%;
    border-style: solid;
    border-width: 4px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -84px;
    z-index: 110;
}

.geomap-marker__title {
    box-sizing: border-box;
    display: none;
    z-index: 111;
    padding: 3px 5px;
    font-size: 14px;
    color: white;
    /*margin-top: -90px;*/
    /*margin-left: -40px;*/
    text-align: center;
    width: 140px;
    border-radius: 10px;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    word-break: break-word;
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translatex(-50%);
}

.geomap-marker:hover>.geomap-marker__image + .geomap-marker__title {
    display: block;
}
.geomap-marker__arrow {
    margin: 0 auto 0 auto;
    width: 0;
    height: 0;
    border-left: 25px solid transparent !important;
	border-right: 25px solid transparent !important;
    border-top-width: 50px;
    border-top-style: solid;
    z-index: 100;
}


.header {
    /* background: #2c313c; */
    background: linear-gradient(to right bottom, #363c4a, #27282c);
    display: flex;
    flex: 1;
    max-height: 63px;
}

.header__logo {
    width: 150px;
    background: linear-gradient(90deg, #1069c2, #4cb2f1);
    display: flex;
}

.header__logo-image {
    margin: auto;
    background-image: url('assets/logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 50px;
    height: 50px;
}

.header__title {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15px;
}

.header__title-main {
    color: white;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
}

.header__title-sub {
    font-size: 13px;
    color: white;
}

.header__wrapper {
    flex: 1;
}

.header__submenu {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: 63px;
    min-width: 60px;
    border-left: 1px solid #424b58;

}
.header__submenu_opened {
    height: initial;
    z-index: 150;
    background: #27282c;
}
.header__submenu_lang{
    margin-right: -1px;
}
.header__submenu_lang.header__submenu_opened{
    /*height: 252px;*/
    height: 126px;
}
.header__submenu_base.header__submenu_opened{
    height: 189px;
}
/*
.header__submenu.header__submenu_lang.header__submenu_opened {
    z-index: 150;
    height: 315 !important;
}
.header__submenu.header__submenu_base.header__submenu_opened {
    z-index: 150;
    height: 189 !important;
}
*/
.header__button-image {
    width: 16px;
    height: 11px;
    margin: auto 0px;
}
.header__button-text {
    color: #a6afbe;
    padding-left: 8px;
    margin: auto 0px;
    transition: all 0.25s;
    font-size: 14px;
}
.header__profile {
    box-sizing: border-box;
    display: flex;
    padding: 0px 20px;
    cursor: pointer;
    /*border-left: 1px solid #424b58;*/
    transition: all 0.25s;
}

.header__profile-title {
    color: #a6afbe;
    padding-left: 8px;
    margin: auto 0px;
    transition: all 0.25s;
    font-size: 14px;
}

.header__profile-image {
    
    display: block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    margin: auto 0px;
    border-radius: 50%;
    transition: all 0.25s;
}




.header__button {
    box-sizing: border-box;
    
    color: #a6afbe;
    font-size: 20px;
    display: flex;
    cursor: pointer;
    transition: all 0.25s;
    padding: 0px 10px;
    min-height: 63px;
    border-right: 1px solid #424b58;
}


.header__button>i {
    margin: auto 0px;
}

.header__button_mobile_only {
    display: none;
}
@media (min-width: 800px) {
    .header__button:hover>.header__profile-title{
        color: white;
    }
    .header__button:hover{
        background: #434957;
        color: white;
    }
}
@media (max-width: 800px) {
    .header {
        min-height: 50px;
    }
    .header__logo {
        width: 50px;
        padding: 3px;
    }
    .header__logo-image {
        width: 40px;
        height: 40px;
    }
    .header__title { display: none;}
    .header__profile-title { display: none;}
    .header__button-text {
        display: none;
    }

    .header__button>i {
        margin: auto;
    }

    .header__button-image {
        margin: auto;
    }

    .header__button_mobile_only {
        display: flex;
        border-left: 1px solid #424b58;
        border-right: 0px none;
        width: 60px;
    }
    
}
    /*
    .header__button {
        min-width: 61px;
        padding: 0px 10px;
        
    }
    .header__submenu {
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
        height: 63px;
        background: #27282c;
    }

    .header__submenu_opened {
        z-index: 150;
        height: 252px;
    }
    .header__submenu>.header__button {
        border-bottom: 1px solid #424b58;
    }
    .header__submenu>.header__button:first-child{
        border-bottom: 0px none;
    }
    .header__submenu:hover>.header__button:first-child{
        border-bottom: 1px solid #424b58;
    }
}
*/.image-area {
    width: 100%;
    max-width: 800px;
    min-height: 300px;
    max-height: 80vh;
}

.cropper {
    padding: 8px;
}

.buttons-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}
.image-selector {
    text-align: center;
}

.image-selector__image {
    margin: 10px auto;
    display: block;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.image-selector__image.default {
    background-size: 62px;
}

.image-selector__file {
    display: none;
}

.image-selector__image .add {
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.image-selector__image .remove {
    background-color: red;
    top: 45px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width=%2714%27 height=%2714%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M2.563 2.875V13.5h9.374V2.875H2.563Z%27 stroke=%27%23fff%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M1 2.875h12.5M6 6v4.063V6Zm2.5 0v4.063V6Z%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M4.75 2.875 5.778 1h2.965L9.75 2.875h-5Z%27 stroke=%27%23fff%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 15px;
    display: none;
}

.image-selector__image .control {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    opacity: 0;
}

.image-selector__image:hover .control {
    opacity: .5;
}

.image-selector__image .control:hover {
    opacity: .8;
}

.image-selector__image.upload .add {
    bottom: 29px !important;
}

.image-selector__image.upload .remove {
    display: block;
}
.journal:empty {
    background-image: url(/assets/loader.svg);
    background-position: center;
    background-size: 300px 300px;
    background-repeat: no-repeat;
}
.journal_no_data {
    text-align: center;
    padding: 100px 10px 0px 10px;
    color: white;
    text-align: center;
}
.journal:empty.journal_no_data{
    background-image: none;
}.journal-date {
    display: flex;
    flex-shrink: 0;
}
.journal-date__line {
    height: 2px;
    width: 10px;
    margin: auto 0px;
}
.journal-date__vertical {
    width: 2px;
    margin: 0px;
}
.journal-date__text {
    box-sizing: border-box;
    color: white;
    border-width: 2px;
    border-style: solid;
    padding: 7px 0;
    color: white;
    border-radius: 3px;
    box-shadow: none !important;
    margin-left: 10px;
    width: 105px;
    text-align: center;
    background: #2d323d;
    white-space: pre-line
}
.journal-date:first-child {
    margin-top: 10px;
}
.journal-date:first-child>.journal-date__vertical{
    height: 50%;
    transform: translateY(100%);
}
.journal-event {
    display: flex;
    flex-shrink: 0;
}
.journal-event_clickabled {
    cursor: pointer;
}

.journal-event_clickabled > div{
    pointer-events: none;
}

.journal-event_clickabled:hover {
    background: #434957;
}

.journal-event_clickabled.active {
    background: #585E6F;
}

.journal-event__time {
    box-sizing: border-box;
    font-size: 12px;
    color: white;
    margin: auto 0;
    width: 115px;
    white-space: nowrap;
    text-align: right;
    padding-right: 10px;
}

.journal-event__line {
    width: 2px;
    margin: 0 10px;
    min-height: 20px;
}

.journal-event__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin: auto 0 auto -23px;
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
}

.journal-event__icon img {
    width: 100%;
    height: 100%;
}

.journal-event__text {
    color: white;
    flex: 1;
    margin: auto 10px;
    padding: 10px 0;
}
/*
.journal-event_important>.journal-event__icon{
    background: red;
}
*/
.journal-event_important>.journal-event__text {
    color: #ff3535;
}

.journal-event:last-child>.journal-event__line {
    height: 50%;
}

/*.journal-event:last-child>.journal-event__icon {*/
/*    margin: auto 0px auto -7px;*/
/*}*/
.journal-loader {
    height: 50px;
    width: 50px;
    margin: -25px auto 15px 86px;
    background-image: url(/assets/loader.svg);
    background-position: center;
    background-size: 75px 75px;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.mobile-map>.mapboxgl-canvas-container {
    display: 'block';
    flex: 1;
}
.modal {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    z-index: 1005;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    background: rgba(0,0,0,0.5);
}
.modal__body {
    margin: auto;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    min-height: 0;
    max-height: 90vh;
    background: #2d323d;
    max-width: 95vw;
    min-width: 300px;
}
.modal__title {
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    /* height: 40px; */
    min-height: 40px;
    background: linear-gradient(to right bottom, #0c69a3, #4eb5f3);
    color: white;
}
.modal__body_warning>.modal__title {
    background: linear-gradient(to right bottom, #ff6160, #a33131);;
    color: white;
}
.modal__content {
    box-sizing: border-box;

    color: white;
    padding: 10px;
    min-height: 0;
    overflow-y: auto;
    max-height: 70vh;
}
.modal__content_center {
    text-align: center;
}
.modal__buttons {
    box-sizing: border-box;
    padding: 10px 10px 20px 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.modal-device_exist__text > span{
    font-weight: 600;
}
.operation {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #2d323d;
    max-width: 400px;
}
.operation__header {
    display: flex;
    height: 60px;
    max-height: 60px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    /* border-bottom: 1px solid #1a1b20; */
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background: linear-gradient(to right bottom, #363c4a, #27282c);
    z-index: 2;
}
.operation__header_vertical {
    flex-direction: column;
    height: auto;
    background: linear-gradient(to right bottom, #363c4a, #1a1b20);
}
.operation__sub-header {
    display: flex;
}
.operation__header_top{
    display: flex;
    padding: 0px 10px;
}
.operation__header-icon {
    border-radius: 50%;
    margin: auto 0px;
    display: flex;
    width: 40px;
    height: 40px;

}
.operation__header-icon_default {
    background: #1a8bdd;
}
.operation__header-icon>i {
    color: white;
    font-size: 20px;
    margin: auto;
}
.operation__header-content {
    overflow: hidden;
    margin: 0px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.operation__header-title {
    margin: auto 0px;
    font-size: 13px;
    font-weight: 600;
    color: #cfdbf0;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.operation__header-subtitle {
    margin: auto 0px;
    font-size: 13px;
    font-style: italic;
    color: #747b97;
}
.operation__header-subtitle_link {
    cursor: pointer;
}
.operation__header-subtitle_link:hover{
    text-decoration: underline;
}
.operation__header-close {
    margin: auto 0px;
    font-size: 26px;
    color: #b9c1cc;
    cursor: pointer;
}
.operation__header-close_hidden {
    display: none;
}
.operation__header-close:hover {
    color: white;
}

.operation__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color:  #acb1b8 rgba(0,0,0,0);
    flex-shrink: 0;
}

.operation__card {
    display: flex;
    flex-direction: column;
    margin: 20px 15px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-sizing: border-box;
    background: linear-gradient(to right bottom, #363c4a, #1a1b20);
    flex-shrink: unset;
    flex-shrink: 0;
}
.operation__card_hiden {
    display: none;
}
.operation__card_padding {
    padding: 20px;
}
.operation__card_buttons {
    flex-shrink: 0;
    margin: 0px 15px 15px 15px;
}

.operation__card_buttons:first-child {
    margin-top: 20px;
}
.operation__card-header {
    padding: 10px 30px;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
    background: linear-gradient(90deg, #1069c2, #4cb2f1);
}
.operation__card-form {
    padding: 0px 20px 20px 20px;
}
.operation__button {
    display: flex;
    padding: 10px 0px;
    font-size: 16px;
    background: none;
    outline: none;
    flex-shrink: 0;
    color: #a6afbe;
    border: 1px solid #424b58;
    border-bottom: 0px none;
}
.operation__button_hidden {
    display: none;
}
.operation__button:last-child {
    border-bottom: 1px solid #424b58;
}

.operation__button_warning {
    color: #f15e5f;
}


.operation__button-icon {
    display: block;
    margin: auto 0px auto 15px;
    width: 20px;
    text-align: center;
}
.operation__button-icon:last-child {
    margin-right: 15px;
}
.operation__button_hide {
    display: none;
}
.operation__button_active>span, .operation__button_active>i{
    color: white;
    text-shadow: rgb(255, 255, 255) 0px 0px 2px, #228dff 0px 0px 3px, #228dff 0px 0px 5px, #228dff 0px 0px 10px;
}
.operations__button-col {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.operations__button-col:first-child {
    padding-left: 10px;
}
.operations__button-text {
    display: block;
    flex: 1;
    margin: auto 10px;
    font-size: 14px;
}
.operations__button-text_hide_empty:empty {
    display: none;
}
.operations__button-text_compact {
    font-size: 12px;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.operations__button-text_small {
    font-size: 11px;
}
.forms__input_half {
    flex: 1;
    margin: auto 0px;
    width: auto;
}
.operations__button-text_white {
    color: white;
}

.operations__button-text_red {
    color: #f15e5f;
}
.operation__button:hover.operation__button_disabled {
    background: none;
}

.operation__header-icon_back {
    display: none;
    margin-right: 5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .operation__content::-webkit-scrollbar {
        width: 5px;
        background: rgba(0,0,0,0);
    }
    .operation__content::-webkit-scrollbar-track {
        background: rgba(0,0,0,0);
    }
    .operation__content::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #acb1b8;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 800px) {
    .operation__button{
        padding: 15px 0px;
    }
    .operation__content {
        -webkit-overflow-scrolling: touch;
    }
    .operation__content::-webkit-scrollbar {
        width: 0px;
        background: rgba(0,0,0,0);
    }
    .operation__content::-webkit-scrollbar-track {
        background: rgba(0,0,0,0);
    }
    .operation__content::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #acb1b8;
    }

}

.operation__card_hidden {
    display: none;
}
.operation__textline {
    display: flex;
    color: #a6afbe;
    border: 1px solid #424b58;
    border-bottom: 0px none;
    height: 38px;
}
.operation__textline:last-child{
    border-bottom: 1px solid #424b58;
}
.operation__text {
    color: #eee;
    font-size: 13px;
}
.operation__text_center {
    text-align: center;
}
.operation__textline>i {
    margin: auto 0px auto 10px;
}
.operation__textline>i:last-child{
    margin: auto 10px auto 10px;
}
.operation__textline>span{
    flex: 1;
    margin: auto 0px auto 10px;
}
.operation__textline_hidden {
    display: none;
}
.operation__main-button {
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    display: flex;
    z-index: 100;
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: absolute;
    bottom: 75px;
    left: 515px;
    cursor: pointer;
    transition: all ease 0.25s;
    background: #009fef;
}

.operation__main-button_alternate {
    bottom: 150px;
}
    
.operation__main-button_hidden {
    display: none;
}
.operation__main-button_mobile_only {
    display: none;
}
.operation__main-button:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.5);
}
.operation__main-button>i{
    color: white;
    margin: auto;
    font-size: 30px;
}


@media screen and (max-width: 800px) {
    .operation {
        max-width: 100vw;
    }
    .operation__header {
        z-index: 800;
    }
    .operation__main-button {
        left: auto;
        right: 35px;
        bottom: 82px;
    }

    .operation__main-button_alternate {
        left: auto;
        right: 35px;
        bottom: 170px;
    }

    .operation__main-button_mobile_only {
        display: flex;
    }
    .operation__main-button_hidden.operation__main-button_mobile_only {
        display: none;
    }
}
@media  (min-width: 800px) {
    .operation__button:hover:not(.operation__button_disabled) {
        color: white;
        background: #434957;
        cursor: pointer;
    }
    .operation__button_warning:hover{
        color: #f15e5f;
        background: #434957;
    }
}
@media  (min-width: 800px) and (max-height: 700px) {
    .operation_wide {
        min-width: 630px;
    }
    .operation_wide>.operation__content {
        flex-direction: row;
    }
}

.operation__bottom-buttons {
    display: flex;
}
.operation__bottom-buttons_hidden {
    display: none;
}
.operation__bottom-button {
    border: 0px none;
    background: none;
    display: flex;
    flex: 1;
    font-size: 14px;
    font-weight: normal;
    color: #a6afbe;
    flex-wrap: 0;
    padding: 10px 0px;
    cursor: pointer;
    transition: all 0.25s;
    border-top: 1px solid #424b58;
    border-right: 1px solid #424b58;
    outline: none;
    
}
.operation__bottom-button::before{
    text-align: center;
    display: block;
    flex: 1;
}
.operation__bottom-button:last-child{
    border-right: 0px none;
}
.operation__bottom-button:disabled{
    color: #424b58;
    cursor: default;
}
@media (min-width: 800px) {
    .operation__bottom-button:hover {
        color: white;
        background: #434957;
    }
    .operation__bottom-button:disabled:hover {
        color: #424b58;
        background: none;
    }
}
@media (max-width: 800px) {
    .operation__bottom-button {
        padding: 15px 0px;
    }
}.registration__support {
    padding: 10px 0px;
    text-align: center;
}
.registration__info {
    color: #4eb5f3;
    cursor: pointer;
}.registration-modal-info>p>a {
    color: #4eb5f3;
}.operation__button_disabled{
    color: #5d677e;
    text-shadow: none;
}.settings-modal-remove__title{
    text-align: center;
    font-weight: 600;
}
.settings-modal-remove__title::before, .settings-modal-remove__title::after{
    font-weight: normal;
}.tracks{
    /*padding-top: 10px;*/
}

.tracks:empty {
    background-image: url(/assets/loader.svg);
    background-position: center;
    background-size: 300px 300px;
    background-repeat: no-repeat;
    
}

.tracks_no_data {
    text-align: center;
    padding: 100px 10px 0px 10px;
    color: white;
    text-align: center;
}
.tracks:empty.tracks_no_data{
    background-image: none;
}
.tracks-track-new {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.track-new-title, .track-new-info {
    color: #fff;
    padding: 3px 5px;
}

.track-new-info {
    font-size: 12px;
    white-space: nowrap;
}

.track-new-info::before {
    color: #a6afbe;
}

.tracks-track-new > .track-event.parking {
    border-color: #424b58;
}

.tracks-track-new:last-child {
    height: 100%;
}

.tracks-track-new:first-child > .track-event,
.tracks-track-new:first-child > .track-new-datetime {
    margin-top: 20px;
}

.tracks-track-new > .track-event {
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    box-shadow: none;
    margin: 5px 10px 10px 10px;
    padding: 0 5px;
    cursor: pointer;
    transition: all 0.25s;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.tracks-track-new > .track-event:hover {
    background: #434957;
}

.tracks-track__hightlight_track {
    background: #434957;
}

.track-new-datetime {
    min-width: 125px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
}

.track-new-date {
    box-sizing: border-box;
    color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px;
    border-radius: 3px;
    box-shadow: none !important;
    width: 105px;
    text-align: center;
    margin: 10px;
    position: relative;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.track-new-date:last-child {
    margin-bottom: 20px;
}

.track-new-date-line {
    width: 12px;
    border-top-width: 2px;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 0;
    border-style: solid;
    box-shadow: none;
    position: absolute;
    right: -14px;
    bottom: 0;
    height: 50%;
}

.track-new-line {
    width: 0;
    border-left-width: 2px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-style: solid;
    box-shadow: none;
    position: relative;
    height: 100%;
}

.track-new-time {
    position: absolute;
    bottom: -6px;
    color: white;
    font-size: 12px;
    margin-right: 12px;
}

.track-new-dot {
    position: absolute;
    bottom: -3px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.track-new-progress {
    position: absolute;
    font-size: 12px;
    color: white;
    right: 5px;
    top: 5px;
    padding: 0 10px 1px;
    line-height: 18px;
    border-radius: 10px;
}