/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 05.03.2017, 16:26:37
    Author     : djdance
*/ 

/* =============================================================================
  RESET
============================================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.h3{
    text-align: center;
    width:100%;
}
th, td {
    padding:5px;
    vertical-align: top;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  font-family: RubikLight, Verdana, Geneva, sans-serif;
  font-size: 20px;
  line-height: 1.42857143;
  color: #ffffff;
  min-height: 100%;
  height:100vh; 
  width:100vw;
  vertical-align:top; 
  overflow:hidden !important; 
  background:#FFFFFF; 
  color:#000000;
  margin:0px; 
  padding:0px;;
  position: fixed;/*ipad dont scroll*/
}

a {
    cursor:pointer;
}
ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
textarea{
	border: 1px solid #e5e5e5;
	padding:3px;
}
textarea:hover {
        /*opacity:0.8;*/
        border: 1px solid #3b997a;
}
input {
	border: 1px solid #e5e5e5;
	padding:3px;
}
input:hover {
	/*border: 1px solid #ff6000;*/
}

/*скрыть красные input required*/
:invalid {
  box-shadow: none;
}
:-moz-submit-invalid {
  box-shadow: none;
}
:-moz-ui-invalid {
  box-shadow:none;
}

.layerDivMenu{
        min-height: 43px;
        position:relative; display:none; 
        padding-top:6px; 
        color:#ffffff; font-size:20px; text-align:center;
}

.autoPlate{
    margin: 10px;
    max-width: 190px;
    min-height: 30px;
    font-family: RoadNumbers, /**/Verdana, Geneva, sans-serif;
    /*font-weight:bold;*/
    font-size: 20px;
    padding-left:10px; 
    padding-right:10px; 
    border:2px solid #808080; 
    border-radius:5px;
    color:#808080;
    display:flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    box-shadow: 0px 2px 10px #80808069;
}
.autoPlate.smallAP{
    margin: 0px;
    padding:0px;
    padding-left: 3px;
    padding-right: 3px;
    font-size:14px;
    min-width: 80px;
    font-weight: normal;
}
.autoPlate .chars{
    font-size:27px;
    padding-bottom: 4px;
}
.autoPlate.smallAP .chars{
    font-size:11px;
}
.platePic{
    width:100%;
    min-height: 20px;
    opacity:0;
}
.platePicOk{
    width:100%;
    opacity:1;
    transition: all 0.3s ease-out;
}
.platePic100{
    width:100%; height:auto; border:1px solid gray; border-radius:5px;padding:5px;
}

.footer {
    font-family: RubikLight, Verdana, Geneva, sans-serif;
    position:fixed; 
    bottom: 10px;
    left: 10px;
    width:100%; 
    height:35px; 
    border:0; 
    padding:3px; 
    overflow: hidden;
    /*background: #ff0000;*/
    filter:alpha(opacity=80); 
    -moz-opacity: 0.8; 
    opacity: 0.8;  
    color:#000000; 
    text-align:center; 
    /*z-index:20; */
    font-size:10px;    
    pointer-events: none;
}
.footer.hover {
    background: #006745; /*lawngreen;*/
}
.footer.fade {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
}
[hidden] {
  display: none;
}
.img-circle {
    /*originally from bootstrap*/
    border-width: 1px !important;
    border-color: #b1b1b1 !important;
    border-style: solid;
    object-fit: cover;
}
/*jsgrid*/
.grid_center{
    text-align: center;
}
.grid_small{
    font-size:12px !important;
    overflow-x:hidden;
    text-overflow: ellipsis;
}
.grid_xsmall{
    font-size:9px !important;
    overflow-x:hidden;
    text-overflow: ellipsis;
}
.grid_condensed{
    font-size:9px !important;
    padding:0px !important;
    margin:0px;
    overflow: hidden;
}
.grid_checkbox_disabled input {
    cursor:not-allowed;
    pointer-events:none;
}
.grid_limited{
    font-size:12px !important;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0px !important;
}
.grid_limited .btn{
    padding: 0px !important;
    margin: 0px 5px 0px 0px !important;
}
.grid_border_bottom{
    border-bottom: 1px solid #e1e1e1;
}
.grid_img_h10 img{
    height: 100px;
    object-fit: contain;
    width: 100px;
}
.grid_limited .jsgrid-cell{
    text-overflow: ellipsis;
}
.grid_bold{
    font-weight: bold;
    text-align:center;
}
.grid_inactive{
    color:#999999;
    text-decoration: line-through crimson;
    opacity:50%;
}
.grid_off{
    color:#ff0000;
}
.grid_hidden{
    color:#808080;
}
.grid_relative{
    position: relative;
}
.grid_circle{
    font-weight: bold;
    font-size:15px;
    background:#47128c !important;
    color:#ffffff;
    border-radius:50%;
    text-align:center;
    width: 35px;
    height: 35px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 1px #e1e1e1;
    font-family: RubikMedium;
    transition: all 200ms ease;
    text-shadow: 0px 0px 3px #000000;
}
.grid_circle_sm{
    font-size:11px;
}
.grid_circle:hover{
    background:#3b9879 !important;
    color:#ffffff;
    transition: all 200ms ease;
    text-shadow: 0px 0px 6px #4abb1b;
}
.grid_pointer{
    cursor:pointer;
}
.grid_pointer:hover{
    background:#3b9879 !important;
    color:#ffffff;
    transition: all 200ms ease;
    text-shadow: 0px 0px 6px #4abb1b;
    cursor:pointer;
}
.grid_overflow{
    overflow:visible !important;
}
.grid_card{
    border-left: 7px solid #ffffff;
    font-size:12px;
    padding-left: 5px;
    line-height: 1.7;
    position:relative;
}
.grid_card>div:nth-child(1){
    font-weight:bold;
    font-size:16px;
    margin-right: 150px;
}
.grid_card>div:nth-child(2){
    font-size:14px;
}
.grid_card>div:nth-child(3){
    margin-left: 20px;
}
.grid_card>div:nth-child(4){
    display:flex;
    flex-direction: column;
    align-items: center;
}
.jsgrid-cell{
    border:0;
    padding: 1px 4px;
    /*09122020 padding-top: 7px;
    padding-bottom: 7px;*/
    overflow: hidden;
}
.jsgrid-edit-row > .jsgrid-cell textarea {
    height: 100px;
}
tr.highlight td.jsgrid-cell {
  background-color: #e0fff5; /*#8cbaab;*/
  color:#000000 !important;
}
tr.highlight.jsgrid-selected td {
  background-color: #ffc355;
}
tr.obsolete td.jsgrid-cell {
  color: #a3a3a3;
}
.jsgrid-overflow{
    overflow:visible;
    white-space: nowrap;
}
.jsgrid-grid-body{
    overflow: auto;
}
.jsgrid-header-row>th{
    font-size: 13px;
    font-family: RubikMedium;
    height:50px;
    vertical-align: middle;
    overflow: hidden;
}
.jsgrid-align-right{
    text-align: center;
}
.jsgrid-grid-body{
    border: none; /*для коротких таблиц на темном фоне*/
}
.jsgrid-inactiveRow td {
    background:#e2e2e2 !important;
}
.jsgrid-onlineRow td {
    background:#d6ffd6 !important;
}
.jsgrid-offlineRow td {
    background:#ffa8a8 !important;
}
.jsgrid-cell input[type=checkbox][disabled]:checked{
    filter: sepia(1) hue-rotate(56deg) saturate(100.0);
}
.grid_link{
    color:blue;
}
.grid_highlighted .jsgrid-cell{
    color:white;
    background: yellowgreen !important;
}
.jsgrid-empty-button{
    background: inherit;
}    
.jsgrid-alt-row > .jsgrid-cell{
    background:#f3f3f3;
}
/*** НАВИГАЦИЯ ***/
/* цвет фона и рамки навигационного меню */
/*.navbar-fixed-top{
    z-index: 2000;
}*/
.navbar-default {
    background-color: #33856b; /*перекроется в upside_menu.php*/ 
    border-color: #33856b;
    border: none;
    border-radius: 0;
    /*box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);*/
    padding:6px;
    max-height:50px;
    max-width: 100vw;
}
.navbar-second{
    position:fixed; 
    top:0px; 
    left:130px; /*200 новый UI*/
    background: transparent;
    z-index: 1100;
}
@media screen and (max-width: 1100px) {
    .navbar-default {
        box-shadow: none !important;
    }
    .navbar-second{
        top:50px; 
        left:0px; 
        width:100vw; 
        background: #33856b;/*перекроется в upside_menu.php*/ 
        box-shadow: 0px 2.5px 2.5px rgba(0, 0, 0, 0.3);
        z-index: 0;
    }
}
.label-pill-action{
    margin-left:5px; 
    font-size: 10px;
    padding-top: 3px;
    height: 15px;
    margin-top: 2px;
}
.label-danger {
    background-color: #CC4a58;
}
.label-gray {
    background-color: #eceeed;
    color:#a6aaad;
    width:30px;
}
.label-djd{
    color: #ff0000;
    padding-right: 0px;
    font-style: italic;
    font-variant: petite-caps;
}
.label-score {
    background-color: #0ec10b;
    align-self: center;
    cursor:help;
}
.label-sm{
    font-size: 10px;
}
.dropdown-menu{
    border-color:#dbe1e7;
    min-width:0;
}
.dropdown-checkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.dropdown-checkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}
.dropdown-checkbox-menu li label:hover,
.dropdown-checkbox-menu li label:focus {
    background-color: #f5f5f5;
}
.dropdown-menu.disabled{
    filter:blur(3px);
    pointer-events: none;
    cursor: not-allowed;
}
.navbar-inverse{
    border-color: transparent;
}
.navbar-inverse .navbar-nav>li>a {
    color: #676f78;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
    font-size:16px;
    /*нет!padding-top: 0px;*/
}
 .upside_menu_ico{
     width:30px;  /*original 274x331*/ /*1st variant 21x25*/
     height:37px;
     margin:auto;
     margin-right:10px;
     margin-top:-4px;
 }
 
 .upside_menu_Sub{
     color:#ffffff !important;
     font-family: RubikMedium, Verdana, Geneva, sans-serif;
 }
 .upside_menu_Sub:hover{
     background: #33856b !important;/*перекроется в upside_menu.php*/
     color:#d5d5d5 !important;
 }
 .upside_menu_icoSub{
     width:30px;  /*original 274x331*/ /*1st variant 21x25*/
     height:37px;
     margin:auto;
     margin-right:10px;
     margin-bottom:-15px;
 }
 .upside_menu_SubL{
     position:relative;
     color:#ffffff !important;
     /*font-family: RubikMedium, Verdana, Geneva, sans-serif;*/
 }
 .upside_menu_SubL:hover{
     /*background: #33856b !important;*/
     color:#d5d5d5 !important;
 }
 .upside_menu_SubLhints{
     left:0px;
    transition: all 0.5s ease;
 }
 .upside_menu_SubLhints:hover{
    left:150px;
    transition: all 0.35s ease;
    box-shadow: 5px 0px 10px rgba(0,0,0,0.1); 
 }
 .ripple-over{
     overflow: visible;/*ОБЯЗАТЕЛЬНО!! чтобы был виден выскочивший меню*/
 }
 .upside_menu_icoSubL{
     width:34px;
     height:34px;
     position:absolute;
     right:8px;
     top:8px;
 }
 .upside_menu_glyphSubL{
     position:absolute;
     right:15px;
     top:15px;
  }
 .nav .open>a, .nav .open>a:focus, .nav .open>a:hover{
     background-color: #4c8b71;
 }
 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: inherit;
}
 .nav > li {
     /*box-shadow: 5px 0px 10px rgba(0,0,0,0.5);красиво!*/
 }
 .upside_menu_ico_dropdown{
     width:17px;  /*original 274x331*/
     height:20px;
     margin-bottom:-6px;
     margin-right:5px;
 }
 .upside_menu_ico_dropdownNew{
     width:20px; 
     height:20px;
     margin-bottom:-6px;
     margin-right:5px;
 }
 .upside_menu_ico_panel{
     width:27px;  /*original 274x331*/
     height:33px;
     margin-bottom: -12px;
     margin-right:10px;
 }
 .upside_menu_ico_panelNew{
     width:33px;  
     height:33px;
     margin-bottom: -9px; 
     margin-right:10px;
 }
.navbar-nav > li  {
    height: 38px;/*50-6-6, 6 is navbar-default padding*/
    display: flex;
    align-items: center;
}
.navbar-nav > li > a {
    padding: 0px;
    padding-left:10px;
    color: #ffffff;
    font-size:15px;
    font-family: RubikLight, Verdana, Geneva, sans-serif;
    display:flex;
    align-items: center;
}
.navbar-nav > li > a > .glyphicon {
    top:-1px;
}
.nav-pills>li+li {
    margin-left: 14px;
}
.navbar-nav.nav-2 > li {/*только для экшнов*/
    margin-right: 15px;
}
.navbar-nav.nav-2 > li > a {/*только для экшнов*/
    font-family: RubikMedium, Verdana, Geneva, sans-serif;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
/* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    background: transparent;
}
.navbar-nav > li > a:hover {
    color: #d5d5d5  !important;
}
#loginButtonSpanNavbar {
    margin:auto; 
    margin-right:0px; 
    font-size:14px; 
    font-family: RubikLight;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#loginButtonSpanNavbar:hover{
    color: #d5d5d5;
}
@media screen and (max-width: 767px) {
    .loginAsButton {
        width: inherit !important;/*перекроет index14.css*/
    }
}
@media screen and (max-width: 767px) {
    .navbar-2 .navbar-nav > li > a {
        padding-left:2px;
        padding-right:2px;
        font-size: 12px;
    }
}
.nav-welcome-li {
}
.nav-welcome-li a {
    font-size:14px !important; 
    font-family: RubikLight !important;
    white-space: nowrap;
}
.nav-welcome-li a:hover{
    color: #d5d5d5 !important;
}
.nav-welcome-left a{
    font-size:16px !important; 
    font-family: RubikMedium !important;
}
.caret_black{
    width:8px;
    height:5px;
    margin-left: 3px;
    background:url('/img/caret_black.svg') no-repeat;/**/
    background-size: 100% 100%;
    background-position-x: 0px;
    background-position-y: 0px;
    transition: all 0.35s ease;
    display: inline-block;
}
.caret_black_open{
    transform: rotate(-180deg);
    transition: all 0.35s ease;
}
.caret_gray{
    width:8px;
    height:5px;
    background:url('/img/caret_gray.svg?r') no-repeat;/**/
    background-size: 100% 100%;
    background-position-x: 0px;
    background-position-y: 0px;
    transition: all 0.35s ease;
}
.caret_gray.open{
    transform: rotate(-180deg);
    transition: all 0.35s ease;
}
.caret_white{
    width:8px;
    height:5px;
    background:url('/img/caret_white.svg') no-repeat;
    background-size: 100% 100%;
    background-position-x: 0px;
    background-position-y: 0px;
}
.caret_white:hover{
    background:url('/img/caret_white_hover.svg') no-repeat;/**/
    background-size: 100% 100%;
    background-position-x: 0px;
    background-position-y: 0px;
}
.ic_clock{
    display: inline-block;
    width:13px;
    height:13px;
    background:url('/img/ic_clock.svg') no-repeat;
    background-size: 13px 13px;
    background-position-x: 0px;
    background-position-y: 0px;
    margin-right: 3px;
    margin-bottom: -2px;
        margin-left: 16px;
}
.ic_clock.red{
    background:url('/img/ic_clock_red.svg') no-repeat;
}
/*.btn{
    border-radius: 5px;
}*/
.btn-150{
    min-width: 150px;
    margin: 7px;
}
.btn-16x22{
    min-width: 16px;
    min-height: 22px;
}
.btn-transparent{
    background:transparent !important;
    border:0px;
    transition: all 0.75s;/**/
}
.btn-transparent:hover{
    background: #e1e1e1 !important;
    transition: all 0.1s;/**/
}

.btn-x{
    margin-top: auto;
    margin-bottom: auto;
    width:10px;
    height:10px;
    background:url('/img/ic_x.svg') no-repeat !important;
    /*background-size: 10px 10px;
    background-position-x: 3px;
    background-position-y: -1px;/**/
    background-color: #e1e1e1;
}
.btn-x:hover{
    background:url('/img/ic_x_hover.svg') no-repeat !important;
    background-size: 10px 10px;
    background-position-x: 3px;
    background-position-y: -1px;
}
.btn-trash{
    width:19px;
    height:19px;
    background:url('/img/ic_instant_del_photo.svg') no-repeat !important;
}
.ic_bell{
    margin-top: 5px;
    margin-bottom: auto;
    width:20px;
    height:20px;
    background:url('/img/ic_bell.svg') no-repeat !important;
    background-size: 20px 20px;
    background-position-x: 0px;
    background-position-y: 0px;
}
.ic_bell:hover{
    background:url('/img/ic_bell_hover.svg') no-repeat !important;
    background-size: 20px 20px;
    background-position-x: 0px;
    background-position-y: 0px;
}
.ic_bell2{
    display: inline-block;
    width:14px;
    height:14px;
    background:url('/img/ic_bell.svg') no-repeat !important;
}
.ic_bell2:hover{
    background:url('/img/ic_bell_hover.svg') no-repeat !important;
}
.ic_settings{
     width:16px; 
     height:16px;
     margin:auto;
    background:url('/img/ic_settings.svg') no-repeat;/**/
    background-size: 100% 100%;
    background-position-x: 0px;
    background-position-y: 0px;
 }
  .ic_settings:hover{
    background:url('/img/ic_settings_hover.svg') no-repeat;/**/
  }
.btn-sort{
    width:16px;
    height:16px;
    background:url('/img/ic_sort_down.svg') no-repeat !important;
    background-size: 100%;
    background-position-x: 0px;
    background-position-y: 0px;
    transition: all 0.35s ease;
}
.btn-sort.upside{
    /*background:url('/img/ic_sort_up.svg') no-repeat !important;*/
    transform: rotateZ(-180deg);
    transition: all 0.35s ease;
}
.btn-antifilter{
    display: inline-block;
    width:16px;
    height:16px;
    background:url('/img/ic_antifilter.svg') no-repeat;
    background-size: 100%;
    background-position-x: 0px;
    background-position-y: 0px;
}
.btn-antifilter:hover{
    background:url('/img/ic_antifilter_hover.svg') no-repeat;
    background-size: 100%;
}
.transportTypesDiv{
    display:flex;
    justify-content: center; 
    font-size:16px;
    color: #ffffff;
    align-items: center;
    font-family: RubikLight;
}
.transportTypesDiv label{
    margin:5px;
    cursor:pointer;
    border-radius: 14px;
        padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
}
.transportTypesDiv input{
    display:none;
}
.transportTypesDiv input:checked+label{
    background: #20755d; /*перекроется в upside_menu.php*/ 
    font-family: RubikMedium;
}
.transportTimeline{
    width:100%;
    text-align:center;
}
.transportTimeline .calendarContainer{
    display: none;
    flex-direction: row;
    justify-content: space-between;
    background: #ffffff;
    align-items: center;
    overflow: auto;
}
.transportTimeline .calendar{
    display:none;
    justify-content: center;
    text-align:center;
    font-size:12px; 
    color:#000000;
    background:#ffffff;
    height:auto;
    padding:5px;
    margin-bottom:1px;
}
.transportTimeline .calendar div{
    width:auto; 
    max-width:65px; 
    white-space: nowrap; 
    height:30px; 
    border:1px solid #e1e1e1; 
    padding:3px; 
    margin:3px; 
    display:flex; 
    justify-content:center; 
    align-items:center;
    cursor:pointer;
    transition: all 300ms ease;
}
.transportTimeline .calendar div:hover{
    background: #afd9ee;
    transition: all 300ms ease;
}
.transportTimeline .chart{
    display:none;
    font-size:12px; 
    color:#000000;
    background:#ffffff;
    height:auto;
    padding:5px;
    margin-bottom:1px;
}
.transportTimelineChartItem{
    height:15px; 
    margin-bottom:2px; 
    cursor:pointer;
    -webkit-filter: brightness(50%);
    -moz-filter:    brightness(50%);
    -ms-filter:     brightness(50%);
    -o-filter:      brightness(50%);
    transition: all 300ms ease;
}
.transportTimelineChartItem:hover{
    border:1px solid #e1e1e1;
    -webkit-filter: brightness(100%);
    -moz-filter:    brightness(100%);
    -ms-filter:     brightness(100%);
    -o-filter:      brightness(100%);
    transition: all 300ms ease;
}
.transportTimeline .slider{
    display:none;
    color:#000000;
    background:#ffffff;
    height:auto;
    padding:5px;
    padding-left: 20px;
    margin-bottom:5px;
    text-align: center;
}
#transportTimelineSlider{
    margin-left: 14px;
    margin-right: 10px;
}
#transportTimelineSlider .ui-slider-handle{
    background: url(../img/slider_th_L.png) !important;
    background-size: 25px 25px !important;
    border-radius: 0;
    padding-right: 8px;
    outline: none;
}
#transportTimelineSlider .ui-slider-handle + .ui-slider-handle{
    background: url(../img/slider_th_R.png) !important;
    background-size: 25px 25px !important;
    border-radius: 0;
    padding-left: 15px;
}
.transportTimeline .slider label{
    font-size:14px; 
    font-weight:bold;
    margin-bottom: 5px;
}
.transportTimeline .slider .ui-slider-handle{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
    color: #ffffff;
    margin-left: -15px !important;
    width: 25px !important;
    height: 25px !important;
}
.busNumber{
    display:flex; width:50px; height:50px; min-width:50px; padding:5px; border-radius:50%; 
    border: 1px solid #e1e1e1;
    overflow: hidden;
}
.busNumber span {
    margin:auto; font-size:25px;
    text-shadow: 0px 0px 5px #ffffff;
}
.busNumberSm{
    display:flex; width:40px; height:40px; min-width:40px; padding:3px; border-radius:50%; 
    overflow: hidden;
    cursor:pointer;
    border: 1px solid #e1e1e1;
}
.busNumberSm span {
    margin:auto; 
    font-size: 20px;/*перекроется в placeRouteGrid(*/
    font-weight: bold;
    color: #000000;
    text-shadow: 0px 0px 5px #ffffff;
}
.transportTimelineChartTable td {
    vertical-align: bottom;
}

.upside_menu_icoQ{
     width:16px; 
     height:16px;
     margin:auto;
    background:url('/img/upside_menu/upside_menu_icoQ_2018.svg') no-repeat;/**/
    background-size: 100% 100%;
    background-position-x: 0px;
    background-position-y: 0px;
 }
  .upside_menu_icoQ:hover{
    background:url('/img/upside_menu/upside_menu_icoQ_hover_2018.svg') no-repeat;/**/
  }

.navbar-nav>.open>a:focus,
.navbar-nav>.open>a:hover {
    background-color: transparent !important;
}
.nav>li>a:focus, .nav>li>a:hover{
    background-color: #4c8b71;
}
.nav-active {
    background: #4c8b71;
    /*box-shadow: 5px 0px 10px rgba(0,0,0,0.5); новый UI*/
}
/* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #8cbaab;
}
/* Цвет полосочек в кнопочке, которая открывает меню */
.navbar-default .navbar-toggle .icon-bar{
    background-color:#ffffff;
}
.navbar-text {
    color: #ffffff !important;
    font-size: 16px;
    cursor:pointer;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left:10px;
}
.navbar-brand_city0 {
    width:106px;
    height:40px;
    background:url('/img/logo_small_smartsarov4.svg') no-repeat;/*это меняется в коде на городской*/
    background-size: 100% 100%;
    background-position-x: 0px;
    background-position-y: 0px;
    /*border: 1px solid red;*/
    margin-left: 38px !important;
}
.navbar-brand_city0welcome {
    width:106px;
    height:40px;
    background:url('/img/logo_small_smartsarov4.svg') no-repeat;/*это меняется в коде на городской*/
    background-size: 100% 100%;
    background-position-x: 0px;
    background-position-y: 0px;
    /*border: 1px solid red;*/
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left:-5px;
}
.navbar-nav>li>a:focus{
    color:#888888 !important;
}
.container-fluid {
    margin-left:0px; 
    padding-left:5px; 
    margin-right:0px;
}
.navbar-toggle {
    float: left;
    margin-right: 0
}

.dropdown-header{
    color: #33856b;/*перекроется в upside_menu.php*/ 
    font-size: 13px;
    font-weight: bold;
    padding-top: 8px;
    margin:10px;
    margin-left:-2px;
}
.ticker{
    display:flex; 
    flex-direction:row; 
    justify-content:flex-start; 
    position: absolute; 
    right:0px; 
    top:100px; 
    width:auto; 
    min-width: 150px;
    max-width: 350px;
    /*height:50px; */
    padding:20px; 
    font-size:16px;
    font-family: RubikLight; 
    border: 1px solid #6f6f6f2e;
    background: #ffffff;
    box-shadow: 5px 3px 1px #6f6f6f8c;
    color: #4e4e4e;
}
.pin-effect {
  animation: pulsate 1.5s ease-out infinite;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
    50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
.pin-effect2 {
  animation: pulsate2 5s ease-out infinite;
}
@keyframes pulsate2 {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
    20% {
    transform: scale(1);
    opacity: 1;
  }
  95% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
.navbar-nav {
    margin:0px;
}
.navbar-right-fixed{
    position: absolute;
    right: 0px;
    top:0px;
    z-index: 1200;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
    color:#000000;
    background-color: transparent;
}
/*Верхнее фулсскрин-меню*/
.topFSMenu{
    position:absolute; 
    top:-100vh; 
    left:0px;
    width:100vw;
    height:100vh; 
        box-shadow: 3px 0px 12px #80808044;
    overflow: auto/*чтобы скроллилось*/;
    z-index: 11; 
    padding-top: 50px;
    background:#fefefe; 
    display: flex;
    justify-content: flex-start; 
    flex-direction: column; 
    flex-wrap: wrap;
    align-content: flex-start;
    transition: all 0.35s ease;
}
.topFSMenuOpened{
    top:0px;
    transition: all 0.35s ease;
}
.topFSMenu div {
    margin-right:75px;
    padding:10px;
    font-family: RubikMedium;
    display:flex;
    justify-content: flex-start; 
    flex-direction: column; 
    flex-wrap: nowrap;
    align-content: flex-start;
}
.topFSMenu span {
    cursor:pointer;
    font-family: RubikMedium;
    font-size:20px;
    color:#696e74;
    /*margin-top:10px;*/
    max-width: 25vw;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.topFSMenuExtraItem{
    font-family: RubikLight !important;
    font-size:16px !important;
    color: #787984 !important;
    padding-left: 20px;
}
.topFSMenu span:hover {
    color:#696ea6;
}
@media screen and (max-width: 700px) {
    .topFSMenu{
        display: inherit;
        max-width: 75vw;
        overflow-x: hidden;
    }
    .topFSMenu div {
        margin-right:15px;
    }
    .topFSMenu span{
        max-width: inherit;
    }
}
/*левое меню*/
.topSideMenu{
    position:absolute; 
    top:-100vh; 
    left:0px;
    max-height: 100vh;
    bottom:0px;/**/
    /*padding-bottom: 7px;/*Артем попросил не растягивать когда мало элементв январь 2019*/
    /*max-height: 90vh; /*так лучше но вычислять!*/
    min-width:250px;
    /*width:auto;*/
    height:auto; 
    /*z-index: 10; */
    /*padding: 15px;*/
    /*padding-top:88px;*/
    background:#fefefe; 
    display: flex;
    justify-content: flex-start; 
    flex-direction: column; 
    flex-wrap: nowrap;
    align-content: flex-start;
    transition: all 0.35s ease;
    /*border:1px solid #e8e8e8;*/
    box-shadow: 3px 3px 11px #dadada;
    font-family: RubikLight;
    transition: all 0.35s ease;
}
    .topSideMenu::-webkit-scrollbar{
        width: 5px;
    }
    .topSideMenu::-webkit-scrollbar-track {
        border-radius: 3px;
    }
    .topSideMenu::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background:#e1e1e1;
    }
.topSideMenuRestricted {
    overflow: hidden;
    overflow-y: auto;
}
.topSideMenuOpened{
    top:88px;
    transition: all 0.35s ease;
    z-index: 10;/*для ПСР фуллскрин без закрытия*/
}
.topSideMenu .panel {
    -webkit-box-shadow: none;
    box-shadow: none;
    border:none;
}
.topSideMenu li:hover {
    background:#e8e8e8;
}
.topSideMenu li a {
    margin-left: 5px;
    font-size:16px;
    color:#676f78;
    white-space: nowrap;
    display:flex;
    padding: 5px;
    padding-left: 9px;
    text-decoration: none;
}
.topSideMenu li a span {
    margin: auto;
    margin-left: 10px;    
}
.topSideMenuCHapter {
    margin-left: 16px;
    color:#303030;
    font-size:14px;
    text-decoration: none;
}
.topSideMenuCHapter:focus {
    color:#a3a3a3;
    text-decoration: none;
}
.topSideMenuCHapter:hover {
    color:#006803;
    text-decoration: none;
}
.topSideMenuCHapter .caret_gray {
    padding: 4px;
}
.allMenuItems.selected {
    background:#e8e8e8;
    border-right:4px solid #70679d;
}
.allMenuItems.demo span {
    color: #d0d0d0;
}
/*.mi0 .miXXX иконки пунктов - в отдельном файле upside_menu.php*/

.mainMenuItembadge{
        margin: 0px 7px 0px 0px;
}

.btn-default{
    background: #ebedec;
}
.btn-danger{
    background-color: #d9534f;
}
.btn-taskquest{
    margin: 5px;
}
.sidemenuTypeFilterDiv{
    position:absolute !important; 
    left:0px; 
    top:77px; /*меняется в sidemenuTypefilterToggle()*/
    width:100% !important; 
    bottom: 0px;
        box-shadow: 0px 0px 17px 1px #80808040;
    background: #fefefe; 
    padding-top: 20px;
    padding-left: 20px;
    overflow:hidden;
    overflow-y: auto;
    display:flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-content: center; 
    /*box-shadow: -2px -9px 6px 5px #ffffff;/*панель может уехать и это прикроет щель*/
}
.sidemenuTypeFilterDiv.closed{
    display:none;
}
@media screen and (max-width: 500px) {
    .sidemenuTypeFilterDiv{
        padding:0px;
    }
    .sidemenuTypeFilterDiv label{
        font-size:12px;
    }
}

.sidemenuTypeFilterDivFlex{
    display:flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    align-content: flex-start; 
    align-items: stretch;
}
.sidemenuTypeFilterDivItems{
    cursor:pointer; 
    display:flex; 
    justify-content:flex-start;
    align-content: center;
    align-items: center;
    /*flex-basis:30%;*/
    margin-bottom: 5px;
    padding-right: 7px;
    padding-left: 0px;
    padding-bottom: 1px;
    max-height: 57px;
    border-radius:50px; 
    background-color: #f1f1f1;
}
.sidemenuTypeFilterDivItems:hover{
    background-color: #ededed;
    /*opacity:1 !important;*/
}
.sidemenuTypeFilterDivItems.active {
    background:#f1f1f1;
}
.sidemenuTypeFilterDivItems div {
    width:40px; 
    height:40px; 
    border-radius: 50%; 
    flex:none; 
    border:none; 
    cursor:pointer; 
}
.sidemenuTypeFilterDivItems:hover div {
    border: 1px solid #e1e1e1; 
}

.eventChBtnOpened{
    transform:rotate(180deg);
    transition: all 0.35s ease;
}
#eventsChannels{
    flex: 0.5 0.01 25%;
    max-width: 200px;
    display:flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    /*border-right: 2px solid #ebecec;*/
    box-shadow: inset -13px 0px 20px 0px #00000036;
    padding: 0px 5px 0px 3px;
    -ms-overflow-style: none; 
    /*overflow: -moz-scrollbars-none; */
}
#eventsChannels.unlimited{
    max-width: inherit;
    flex: 0 0 400px;
}
#eventsChannels.shrinked{
    max-width: inherit;
    flex: 0.5;
}
#eventsChannels::-webkit-scrollbar{
    display: none; 
}
#eventsChannels > span{
    color: #efefef; /*background: #ebecec;*/
    cursor:pointer;
    padding: 3px;
    padding-left: 5px;
    margin-bottom: 1px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}
#eventsChannels > span:hover{
    backdrop-filter: brightness(0.85);
    transition: all 0.35s ease;
}
#eventsChannels > span.selected{
    backdrop-filter: brightness(0.5);
}
#eventsChannels > span .eventUnredLabel{
    background: #CC4a58;
    color:#ffffff;
    border-radius: 8px;
    font-size: 10px;
    min-width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 3px 0px 3px;
    font-family:RubikMedium;
    margin-left: 5px;
    cursor:pointer;
}
#eventsChannels > span p{
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px;
}
.eventCounterLabel{
    display:none;
    font-size: 10px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
margin-left:5px;   
border-radius: 10px;
    height: 15px;
    min-width: 15px;
    padding: 1px 3px 0px 3px;
    background: #37397a;
}
.eventCounterLabel:empty {
    display: none !important;
}
#eventsChannels div.eventManageDiv{
    display:none;
    margin-right: 8px;
    background: #ffffff;
    border-radius: 5px;
    padding: 0px 3px;
}
#eventsChannels div.eventManageDiv input{
  position: absolute;
  z-index: -1;
  opacity: 0;
}
#eventsChannels div.eventManageDiv input:not(:disabled):checked+span{
  /*color: #ff0000;/*background-color: #33856b;*/
    opacity:1;
}
#eventsChannels div.eventManageDiv input:not(:disabled):checked+img{
    opacity:1;
}
#eventsChannels div.eventManageDiv span{
    margin:0px 5px;
    color: #000000;
    opacity:0.3;
    font-weight: bold;
    /*dont display: inline-flex;
    align-items: center;*/
    user-select: none;
    overflow: hidden;
}
#eventsChannels div.eventManageDiv span:hover{
    background: #f1f1f1;
}
#eventsDiv{
    flex: 1 0.5 75%;
    flex-grow: 1;
    overflow-x: hidden; overflow-y: auto; 
    padding-top: 5px;
}
#eventsDiv::-webkit-scrollbar{
    width: 10px;
}
#eventsDiv::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    border-radius: 5px;
}
#eventsDiv::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background:#00000055;
    /*box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
}
#eventsDiv[disabled]{
    filter: blur(5px) opacity(0.05);
    transition: all 200ms;
}
.avatarForChannel{
    width:20px; height:20px;
    margin-right: 5px;
    border-radius: 50%;
}

.chatCloudDiv{
    position:relative; 
    width:auto; 
    height:auto; 
   margin:0px 7px;
}
.chatInfoDiv{
    text-align:center;margin:5px;
    padding:10px; border-radius:10px; 
    color:#e1e1e1;
}
.chatCloud{
    position:relative; 
    margin-left:35px; 
    margin-right: 35px;
    padding:7px;    
    background:#ffffff;
    box-shadow: 1px 1px 1px #000000;
    font-size: 15px;
}
.chatCloud.chatCloudFirst{
    margin-top:7px;
    border-top-right-radius:10px;
}
.chatCloud.chatCloudFirstMine{
    margin-top:7px;
    border-top-left-radius:10px;
}
.chatCloud.chatCloudLast{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom:7px;
}
.chatCloud.chatCloudMine{
    background: #dfffd0;
    margin-left: 80px;
    margin-right: 0px;
}
.ava4cloud{ 
    position:absolute; left:0px; width:30px; height:30px; border-radius:50%;box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8)
}
#chat {
    position:absolute; 
    top:75px; 
    right:5px; 
    overflow: hidden; 
    background:#33856b; /*перекроется */ 
    color:#ffffff;
    min-height:50%; 
    height:90vh;
    /*height:1px;//120112021
    /*for child h 100%*/ 
    width:33vw; 
    min-width: 640px; 
    z-index: 10; 
    display:none; 
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);    
}
#chatTagsDiv{
    display:flex; justify-content: space-between;align-items: center;   
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.chatModerLinks{
    color:#ffffff; 
    font-size: 14px;
}
@media screen and (max-width: 500px) {
    #chat {
        min-width: 100vw; 
    }
    #chatUsername{
        font-size: 12px;
    }
    .chatModerLinks{
        font-size:11px;
    }
}
#chatText{
    min-height:25px; 
    line-height:25px; 
    height: 49px; 
    padding-left: 20px; 
    resize:none;
    overflow:hidden;
    border:0;
}
 #chatText:focus{
  outline: none;
 }
#chat th, td {
    padding:0px;
    vertical-align: middle;
}

#chatOptions label.active{
    background: #0000ff;
    color: #ffffff;
}
 .chatBranches{
     width:100%; 
     display:flex; 
     flex-direction:column; 
     justify-content:flex-start;
    align-items: flex-start;
    border-left: 2px solid #00880055;
    /*padding: 5px 10px;margin: 15px 20px;*/
 }
 .chatBranches table{
    /*border-left:2px solid #33856b; /*перекроется в upside_menu.php*/ 
    font-size:13px; 
    padding-left:5px;    
    margin: 10px 10px 0px 10px;
    width: calc(100% - 20px);
 }
 .chatBranches table.hiddden{
     display:none;
 }
 .chatBranches:hover .chatBranch{
     opacity:1;
    transition: all 250ms ease;
 }
 .chatBranch{
    display:flex;
    justify-content: flex-start;
    align-items: center;
margin: 5px 10px;
    width: calc(100% - 20px);
    opacity:0.75;
    transition: all 250ms ease;
}
 .chatBranch textarea{
    outline: none;
    height:19px;
    padding: 0px;/*important for auto-height*/
    padding-left:3px;
    width:94%;
    border: 0px;
    border-bottom:1px solid #e1e1e1f2;
    order:1;
    resize:none;
    color: transparent;
    overflow: hidden;
    transition: all 250ms ease;
 }
 .chatBranch textarea[placeholder]{
     font-size:12px;
     color:#878787;
 }
 .chatBranch textarea::-webkit-input-placeholder{
     font-size:12px;
     color:#878787;
 }
  .chatBranch textarea:focus{
    border: 1px solid #e1e1e155;
    height:auto;
    color:#000000;
    transition: all 250ms ease;
 }
 .chatAnswerAvatar{
     width:25px; 
     height:25px; 
     border-radius: 50%;
     background: url("/img/avatar_edit_m_50.jpg") no-repeat;
     background-size: contain;
 }
 .chatBranch .chatAnswerAvatar{
     flex-shrink: 0;
      width:13px;
      height:13px;
      order:0;
      opacity: 0.25;
      transform: rotateY(180deg);
    transition: all 250ms ease;
 }
 .chatBranch textarea:focus ~ .chatAnswerAvatar{
     width:25px; 
     height:25px; 
     margin-right:5px;
     opacity: 1;
     transform: rotateY(0deg);
    transition: all 750ms ease;
 }
 .chatBranchStayAvatar{
     width:25px !important; 
     height:25px !important; 
     margin-right:5px !important;
 }
.chatBranch button{
     font-size: 10px;
     display:none;
     order:2;
     margin-left: 5px;
}
.chatBranch textarea:focus ~ button{
     display: block;
}
.chatBranch button:hover {
     display: block;
}
.chatBranch .glyphicon:hover{
    color:#0000ff;
}
.chatBranchStayVisible{
     display: flex !important;
}
.chatBranchDropbox{
    width:30px;
    height:30px;
    display: none;
    align-items: center;    
    justify-content: center;
}
.chatBranch textarea:focus ~ .chatBranchDropbox{
     display: flex;
}
#chatAbonents{
    position:absolute; 
    width:450px; 
    left:70px;
    top:70px;
    bottom: 70px;
    border-radius: 5px;
    display: none; 
    background: #ffffff;
    box-shadow: 3px 3px 8px #00000096;
    font-size: 13px;
    color: #000000;    
    padding: 20px 5px 20px 5px;
}

.chatAuthorFio{
    color:#005500;
    font-weight:bold;
    display: inline-block;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 10px;
}






@media screen and (max-width: 600px) {
    #eventsChannels{
        font-size:10px;
    }
    .chatCloud{
        font-size: 12px;
    }
}




@media screen and (max-width: 600px) {
    .hideOn600{
        display:none !important;
    }
}
.taskratingWhite>div{
    width:100%;  
    background:#ffffffd4;
    padding:10px;
    color: #000000;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: bold;
    box-shadow: 0px 0px 20px #88888855;
}
.taskratingWhite>span{
    background:#ffffffd4;
    padding:10px;
    color: #000000;
    padding:5px;
    border-radius: 5px;
}
.taskratingHorizDiv{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}
.taskratingPhoto{
    /*height: 120px; 
    margin-top: 10px; */
    width:90%; 
    overflow: hidden; display:flex; justify-content: flex-start; align-content: flex-start;align-items: center;
}
.taskratingPhoto>div{
    width:100px; height:83px;  background:url(/img/newtaskQuestAddImg.svg) no-repeat center center; background-size:80%;  border-radius: 15px 15px 15px 0px; order: 100; margin: 10px;background-color: #00000040; 
}
.taskrateErrorBorder{
    border:1px solid red;
}

#newtaskQuest{
    position:absolute; top:89px; right:0px; overflow: hidden; height:100%; width:600px; min-height:300px; min-width:300px; max-height:60vh; max-width: 100vw; z-index: 1111/*above title*/; display:none; font-size:16px;  color: #f9fffd; background:#fefefe; box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);
}
.newtaskQuestFrame{
    position:absolute; 
    left:0px; 
    top:50px; 
    bottom:70px; 
    width:100%; 
    color:#000000;/*#6d6e70;*/
    overflow:hidden;
    overflow-y: auto;/*for small screens*/
    padding:20px;
    display:flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    align-content: stretch; 
    align-items: stretch;
}
.newtaskQuestFrame0Items{
    color:#88898b; 
    cursor:pointer; 
    display:flex; 
    justify-content:flex-start;
    align-content: center;
    align-items: center;
    /*flex:1;*/
    flex-basis:47%;
    margin-right: 2%;
    padding-left: 0px;
    padding-bottom: 1px;
    max-height: 57px;
    border-radius:50px; 
}
.newtaskQuestFrame0Items.disabled{
    cursor:default; 
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
}
.newtaskQuestFrame0Items:hover{
    background:#f1f1f1;
}
.newtaskQuestFrame0Items.active {
    background:#f1f1f1;
}
.newtaskQuestFrame0Items div {
    width:56px; 
    height:56px; 
    border-radius: 50%; 
    margin-right: 15px; 
    flex:none; 
    border:none; 
    cursor:pointer; 
}
.newtaskQuestFrame0Items:hover div {
    border: 1px solid #e1e1e1; 
}
.newtaskQuestInputs{
    background: #f4f5f4;
    outline: none;
    width:100%;
    border:none;
    border-radius: 7px 7px 7px 0px;
    margin-bottom: 10px;
    padding-left: 7px;
}
.newtaskQuestInputs:hover{
    border:none;
}
.newtaskQuestInputs::-webkit-input-placeholder{
    color:#788491;
    font-size:14px;
    font-family: RubikLight;
}
#newtaskQuestAddr{
    min-height:45px;
    text-align: center;
    margin-left:5px;
}
#newtaskQuestAddr::-webkit-input-placeholder{
    text-align: center;
}
.newtaskQuestAddrAutocomplete{
    z-index: 9999;
}
.newtaskQuestProgressDot{
    border: 1.5px solid #c6e6dc;
    border-radius: 66%;
    width:10px;
    height:10px;
    display: block;
    margin-left: 10px;
}
.newtaskQuestProgressDot.filled{
    background: #c6e6dc;
}
.fileinput-button{
    flex-basis: 100px;/*width:100px; */
    height:83px; border-radius: 15px 15px 15px 0px; order: 100; margin: 10px;
    border: 1px dashed #80808055;
}
.template-upload{
    border: 1px dashed #80808055 !important;
}
@media screen and (max-width: 767px) {
    #newtaskQuest{
        font-size: 15px;
    }
    .newtaskQuestFrame{
        padding:5px;
    }
    .fileinput-button{
        flex-basis: 70px;/*width:70px; */
        height:58px;
    }
}

.statfilterTypeLabelDisabled{
    cursor:pointer; 
    opacity:0.5;    
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
}


.navbar2itemIco{
    width:25px;
    height:25px;
    margin-right:10px;
}
/*.navbar2itemIco~span {
    font-size:16px;
    font-color:#798087;
}*/
.nav-active_city0{
    background:#e8e8e8;
}

/*Левое большое меню - пока отменено */
.leftMenu{
    position:absolute; 
    top:0px; 
    left:-150px; /** между этими двумя разница в 50px - где 50 это свёрнутая ширина*/
    width:200px;/** это развернутая ширина *****/ /** также это сунь в дропдауны adminMenu и adminMenuSettings*/
    bottom:0px; 
    /*display:none; */
    /*z-index: 1100; */
    background:#33856b; 
    justify-content: flex-start; 
    flex-direction: row; 
    flex-wrap: nowrap;
    transition: all 0.35s ease;
    /*box-shadow: 5px 0px 10px rgba(0,0,0,0.5); */
}
.leftMenuOpened{
    left:0px;
    box-shadow: 5px 0px 10px rgba(0,0,0,0.5); 
    transition: all 0.35s ease;
}
/*конец несбывшегося левого меню*/


.navbar-city0{
    left:0px;
    /*нет!! меню не открывается overflow: hidden;*/
}
.navbar-2{
    top:50px;
    box-shadow: 0px 0px 5px rgba(128, 128, 128, 0.3);
    background: #fefefe;
    min-height: 38px;
    max-height: 38px; /*76px;*/
    font-size:18px;
    z-index: 1;
    overflow:hidden;/*тогглится в $('.dropdown').on('hide.bs.dropdown', function () */
}
.nav-2>li>a:hover {
    color:#5279a2 !important;
}
.nav-2>li>a.active{
   height: 24px; 
   border-radius: 5px; 
   background: #ebecec !important;
    padding-top: 1px;
    padding-right: 10px;
}
.nav-2>li>a.active:hover{
    background:#ebecec !important;
}
.nav-2>li>button {
    padding-top: 8px;
    padding-left: 10px;
    font-size: 15px;
    font-family: RubikMedium, Verdana, Geneva, sans-serif;
    border: 0;
    background: transparent !important;
    color: #808080;
    box-shadow: none !important;
}
.nav-2>li>button:hover {
    color:#5279a2 !important;
}
.nav-2>li>button.active{
   height: 24px; 
   border-radius: 5px; 
   background: #ebecec !important;
   margin-top: 3px;
    padding-top: 1px;
}
.nav-2>li>button.active:hover{
    background:#ebecec !important;
}
.navbar-right>li>a.active{
   height: 24px; 
   border-radius: 5px; 
   background: #ebecec !important;
   margin-top: 7px;
    padding-top: 1px;
}
.navbar-right>li>a.active:hover{
    background:#ebecec !important;
}
.nav [data-action="editPublics"]{ 
    color:#337ab7 !important;
}
.navbar2search{
    width:250px;
   height: 24px; 
   border: transparent;
   border-radius: 5px; 
   outline: none;
   margin:auto;
   padding-right:30px;
   -webkit-box-shadow: none;
    box-shadow: inset 0px 0px 3px 1px #cbcbcb   
}
.navbar2search::-webkit-input-placeholder{
    color:#888888;
    font-size:12px;
    font-family: RubikLight;
}
.navbar2search:focus{
   outline: none;
}
.navbar2search~i {
    position: absolute;
    right:10px;
    top:14px;
    cursor: pointer;
    color: #c1c1c1;
    font-size: 11px;
}
.newCommentForTask{
    width:100%; 
    height:auto; 
    border:0px;
    outline: none;
}
.newCommentForTask::-webkit-input-placeholder{
    color:#bec4ca;
    font-size:14px;
}
.newCommentForTask:hover{
    border:0px;
}
.newCommentForTask:focus{
    border-bottom:1px solid #e1e1e1;
}
.deletedComment{
    color:#a5a5a5;
    /*text-decoration: line-through;*/
}
.deletedComment:hover{
    color:#000000;
    text-decoration: none;
    transition: .3s;
}
.editedComment{
    color:#e2e2e2;
    font-size:12px;
}
.commentsForTask{
    border:0px;
    background:transparent;
    /*border-radius:14px 14px 0px 0px; */
    padding:5px;
    padding-left:10px; 
    padding-right:10px; 
    margin-right:20px;
}
.commentsForTaskBtnSys{
    min-width: 100px;
}
.controlForTaskBtn{
}
.commentsForTaskBtnActive{
    background:#f5f5f5; 
    border-bottom: #ff0000 1px solid;
}
.commentsForTaskCommentSys{
    display:none;
    flex-direction:column; margin-left: 1px; border-left:5px solid #cd4a5a; border-bottom:1px solid #e4e3e3;
}
.controlForTaskComment{
    transition: all 0.35s ease;
    min-height: 100px;
    flex-direction:column; width:100%; padding:5px;    padding-top: 10px;border-left:5px solid #3b997a; border-bottom:1px solid #e4e3e3;margin-left: 1px;
}
.commentsForTaskComment{
    flex-direction:column; width:100%; padding:5px; border-left:5px solid #3b997a; border-bottom:1px solid #e4e3e3;margin-left: 1px;
}

.taskLentaImgTile{
    overflow:hidden; 
    display:flex;
    justify-content: center;
    align-items: center;
    background: #f4f3ff;
}
.taskLentaImgTile button{
    margin:20px;
}

/*Дашборда*/
.dashboardItem {
    display:flex; 
    flex-direction: column;   
    justify-content: space-around; 
    align-items: center;
    border-radius:10px; 
    margin:5px;
        padding: 10px;
        cursor:pointer;
}
/*Левое маленькое меню*/
.dashboardSmallItem {
    width:170px; 
    /*max-width: 50px;*/
    height:100px; 
    display:flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    flex-wrap: nowrap; 
    overflow: hidden; 
    background: #ffffff; 
    cursor:pointer;
    padding:5px;    
    transition: all 0.35s ease;
    box-shadow: 5px -2px 10px rgba(0,0,0,0.3); 
    margin-right: 10px;
}
.dashboardSmallItem:hover {
  width:250px; 
  /*max-width: 300px;
  padding-left:15px;
  padding-right:50px;*/
  transition: all 0.35s ease;
  background: #f1f1f1; 
}

/* Dropdown menu background color*/
.navbar-nav .open .dropdown-menu {     
    background-color: #ffffff;  
    /*z-index: 10000 !important;*/
}
/* Dropdown menu font color*/ 
 .navbar-nav .open .dropdown-menu a{   color: #555555;  }
 
 
 .deviationDiv4routeAll{
    transition: all 0.35s ease;
 }
 
 /* radio */
#radioSwitch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin:auto;
  margin-top:13px;
}
#radioSwitch input {display:none;}
#radioToggler {
  position: absolute;
  cursor: pointer;
  top: 3px;
  left: 5px;
  right: 5px;
  bottom: 7px;
  background: url(../img/raioplayer1_2018.svg) no-repeat;
  background-size: contain;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + #radioToggler {
  background: url(../img/raioplayer2_2018.svg) no-repeat;
  background-size: contain;
  /*transform: rotateY(-180deg);*/
}
#radioToggler:hover {
  background: url(../img/raioplayer1_hover_2018.svg) no-repeat;
  background-size: contain;
}
input:checked + #radioToggler:hover {
  background: url(../img/raioplayer2_hover_2018.svg) no-repeat;
  background-size: contain;
}
#radioVolume{
    position: absolute;
    top:56px;
    left:-2px;
    width:33px;
    height:100px;
    display:flex;
    background:#33856b; /*перекроется в upside_menu.php*/ 
    border-radius:7.5px;
    visibility:hidden;
    transition: .4s;
    transition-delay: .4s;
    opacity: 0;    
}
#radioSwitch:hover + #radioVolume {
    visibility:visible;
  transition: .4s;
    opacity: 1;
}
#radioVolume:hover{
    visibility:visible;
    opacity: 1;
}
#radioVolumeSlider{
    width:5px; 
    height:75px; 
    margin:auto; 
    background: #006745;
}
/*Стиль слайдера*/
.ui-slider .ui-slider-range{
    
}
.ui-widget-content {
    border:0 !important;
}
.ui-slider-handle {
    width:13px !important;
    height:13px !important;
    margin-left:2px !important;
    background:url(../img/slider_th_50.png) !important;
    background-size: contain !important;
    border-radius: 100%;
    border:0 !important;
    cursor:pointer !important;
}
.ui-slider-handle:hover {
}
/*полоска внизу*/
.ui-widget-header{
    /*background:*/
}
/* end of radio */



.ui-autocomplete{
    background: #ffffff;
    border: 1px solid #ffffff !important;/*перекроется в upside_menu.php*/ 
    border-radius: 5px;
    padding-left: 5px;  
    font-family: RubikLight;
    max-width: 50%;
    overflow-x: hidden;
    box-shadow: 3px -1px 8px 0px #80808055;
    max-height: 90vh;
    padding: 10px 5px;
}
.ui-autocomplete::-webkit-scrollbar{
    width: 10px;
}
.ui-autocomplete::-webkit-scrollbar-track {
    border-radius: 5px;
}
.ui-autocomplete::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background:#c1c1c1;
}
.ui-autocomplete .ui-menu-item{
   font-size: 13px; 
   white-space: nowrap;
} 
.ui-autocomplete .ui-menu-item .ui-state-active{
   background:#0000ff55;
   border: 0;
   color:#000000;
} 
.ui-autocomplete-z-order{
    z-index: 99999999;
    background: #ffffff;
    border-radius: 0px;
    box-shadow: 5px 5px 5px #30303055;
    max-height: 75vh;
    overflow-y: scroll;
}
.ui-autocomplete-z-order .ui-menu-item{
    font-size: 15px;
    color: #000000;
    line-height: 1;
}

 #ui-datepicker-div{
    z-index: 40000000 !important;   
 }
 /*submenu*/
 .dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}
 /*submenu end*/
 
 
/*!------------------------------------*\
    Hamburger draewr button  https://webformyself.com/animiruem-ikonki-gamburgery-dlya-menyu-na-chistom-css/
\*!------------------------------------*/
.cmn-toggle-switch {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 54px;
  height: 48px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  /*background-color:#106747;*/
  /*opacity: 0.5; 
   filter:alpha(opacity=50); 
   -moz-opacity: 0.5; */
  
  -webkit-transition: background 0.3s;
   transition: background 0.3s;
   transform: scale(0.8,0.8);/*Artem's'*/
}
.cmn-toggle-switch:opened{
  background-color:#041a12;
  /*width: 50px;
  height: 44px;
  margin-right:2px;
  margin-top:2px;  Глючит на маке - не пропускает 10% нажатий */
  background:url('/img/2trianglesGreen.png') no-repeat;
  
}

.cmn-toggle-switch.hidden {
  opacity: 0.05; 
   filter:alpha(opacity=5); 
   -moz-opacity: 0.05; 
}
.cmn-toggle-switch-hidden {
  opacity: 0.05; /*for fullscreenButton*/
   filter:alpha(opacity=5); 
   -moz-opacity: 0.05; 
}

.cmn-toggle-switch:focus {
  outline: none;
}


/*новый 2018*/
.cmn-toggle-switch span {
  display: block;
  position: absolute;
  top: 22px;
  left: 15px;
  right: 15px;
  height: 3px;
  background: #ffffff;
  border-radius: 5px;
}
.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ffffff;
  content: "";
  border-radius: 5px;
}
.cmn-toggle-switch-black span {
  top: 20px;
  height: 2px;
  background: #676f78;
}
.cmn-toggle-switch-black span::before,
.cmn-toggle-switch-black span::after {
  height: 2px;
  background: #676f78;
}

.cmn-toggle-switch span::before {
  top: -7px;
}

.cmn-toggle-switch span::after {
  bottom: -7px;
}

.cmn-toggle-switch__city0{
  background:url('/img/2trianglesBlueRounded.png') no-repeat;
  background-position:center;
  background-size:100% 100%;
}
/*animation to X*/

.cmn-toggle-switch__htx {
  background-color: transparent;
}

.cmn-toggle-switch__htx span {
  -webkit-transition: background 0 0.3s; 
          transition: background 0 0.3s;
}

.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0;
          transition-delay: 0.3s, 0;/**/
}

.cmn-toggle-switch__htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.cmn-toggle-switch__htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* активное состояние, т.е. меню открыто */
.cmn-toggle-switch__htx.opened {
  /*background-color: #cb0032;*/
  /*background:url('/img/2trianglesGreen.png') no-repeat;*/
  /*background-position:center;
  background-size:100%;*/
  opacity: 1; 
   filter:alpha(opacity=100); 
   -moz-opacity: 1; 

}

.cmn-toggle-switch__htx.opened span {
  background: none;
}

.cmn-toggle-switch__htx.opened span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.cmn-toggle-switch__htx.opened span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.cmn-toggle-switch__htx.opened span::before,
.cmn-toggle-switch__htx.opened span::after {
  /*background-color: #FFFFFF;*/
  -webkit-transition-delay: 0, 0.3s;
          transition-delay: 0, 0.3s;/**/
}
/* hamb eeeeeeeeeeeeeend  */        



/*  material switch */
.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}
.material-switch.disabled > label {
    opacity:0.35;
}
.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;/**/
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;/**/
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}
/* mat sw */


.glyphicon-admin{
    background:url('/img/glyphicon-admin2_2.png') no-repeat !important;
    background-position:center;
    background-size:100%;
}
.glyphicon-edit{
    background:url('/img/avatar_edit_m_50.jpg') no-repeat !important;
    background-position:center;
    background-size:100%;
}
.typesOperatora {
    width:20px; 
    height:20px;
    min-width: 20px;
    filter: none;
    cursor: pointer;
    transition: all 150ms;
    white-space: nowrap;
    max-width: 70px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
.typesOperatora:hover {
        filter: drop-shadow(2px 2px 2px black);
    transform: translate(-1px, -1px);
  }
.typesOperatoraGrayed {
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
  }
 /*.typesOperatoraGrayed:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
  }*/
.typesOperatoraDisabled {
    opacity: 0.5;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
  }
 /*.typesOperatoraDisabled:hover {
    opacity: 1;
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
  }*/
.typesOperatoraLoader{
    background: linear-gradient(270deg, #0015ff, #ff6e00) !important;
    background-size: 400% 400% !important;
    animation: typesOperatoraLoader 0,25s infinite;
    color: #000000 !important;
    pointer-events: none;
    cursor: not-allowed;
}
.typesOperatoraJustAdded{
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.2s;
}
.typesOperatoraCollapsed{
    max-width:0px;/* !important;*/
    transition: all 0.2s;
}
.typesOperatoraCollapsed:hover{
    max-width:inherit;
    transition: all 0.2s;
}
.typesOperatoraCircle{
    justify-content: center;
    font-size:16px;
    border-radius:50%;
}
@keyframes typesOperatoraLoader {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
} 
  
/* NOTY */
.i-am-new {
    width:511px !important;
    font-family: RubikLight;
}
#noty_center_layout_container {
    width:511px !important;
    top:15% !important;
    /*box-shadow: #515151 -10px 10px 10px;*/
}
.noty_message {
    max-height: 70vh !important;
    overflow-y: auto;
    transition: all 0.25s ease-in-out;
}
.noty_message.smallers input textarea {/*тут была запятая, убрал, а то изменяло ВСЕ textarea 16072020*/
    font-size:12px;
}
.noty_message.noscroll{
    overflow:hidden;
}
.noty_buttons_flex {
    /*border-top:#aea9c7; in noty now borderTop*/
    display: flex;
    justify-content: space-between;
    background:#58a68e !important; 
}
.noty_buttons {
    /*подвал*/
    /*пробуем нативный background:#58a68e !important; */
}
.noty_close:not(:hover){
    opacity:0.5 !important;
}
.i-am-new > li {
    /*background:#70679d !important;in noty now, information*/
    margin:0px !important;
}
.noty_effects_open {
  opacity: 0;
  transform: translate(50%);
  animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.noty_effects_close {
  animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.noty_print{
    position: absolute; 
    top: 3px;
    right: 29px;
    width: 15px; 
    height: 15px; 
    font-size:10px;
    cursor: pointer; 
    opacity:0.5;
}
.noty_print:hover{
    opacity:1;
}

.worker_notified_red {
    color:#ff0000;
    font-weight: bold;
}
.worker_notified_green {
    color:#006745;
    font-weight: bold;
}
.worker_notified_hidden {
    color:#c1c1c1;
    text-decoration:line-through;
}

@keyframes noty_anim_in {
  100% {
    transform: translate(0);
    opacity: 1;
  }
}

@keyframes noty_anim_out {
  100% {
    transform: translate(50%);
    opacity: 0;
  }
}
/* nty*/


.officialPaper{
    position: relative;
    background:#f5f5f5; 
    margin:10px;    
    margin-top:20px;
    padding:15px; 
    max-width: 700px;
    /*overflow-x: hidden;для выпадашки шары*/
    box-shadow: 3px 3px 3px rgba(110,110,110,0.3);
    display: flex;
    flex-direction: column;
}
.purgePaper{
    background:#ffdbdb; 
    padding-bottom:10px; 
    text-align: center;
    color: #000000;
}
.officialPaper:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 35px solid #eee;
  border-left: 35px solid transparent;
  box-shadow: 3px 3px 3px rgba(110,110,110,0.3);
}
.officialPaper:after {
  content: "";
  position: absolute;
  top: 0%; 
  left: 0%;
  width: 0px;
  height: 0px;
  border-top: 36px solid #ffffff; 
  border-right: 36px solid transparent;
}
.officialPaper h2 {
  padding: 20px 0 0 20px;
  font-size: 35px;
}
 .officialPaper p {
  padding: 5px 20px;
}


#sendOrderDiv {
    width:150px; 
    height:150px; 
    /*margin-right:-50px; 
    background:#66ff66; */
    background:url('/img/2trianglesGreen.png') no-repeat;
    background-position:center;
    background-size:100%;
    border-radius: 5px; 
    color:#ffffff;
    cursor:pointer; 
    box-shadow:#006745 5px 5px 5px;
}
#sendOrderDiv:active {
    /*background:#55ee55; */
    box-shadow:#006745 1px 1px 1px;
    margin-top:5px; 
    margin-right:5px; 
}

#orderDiv {
     /* Переход */
     -webkit-transition: top 0.5s;
     -moz-transition: top 0.5s;
     -o-transition: top 0.5s;
     transition: top 0.5s;
}

.btn-borderless {
    border: 0px;
}
.btn-bordered {
    border: 3px solid blue;
    border-width:3px !important;
}
.btn-link_white {
    color:#ffffff;
}
.btn-link_white:focus {
    color:#ffffff;
}
.btn-link:active, .btn-link:focus, .btn-link:hover{
    color:initial !important;
}
a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0 ;
    outline-color: transparent ;
    outline-width: 0 ;
    outline-style: none ;
    /*box-shadow: 0 0 0 0 rgba(0,123,255,0);*/
}
.btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover {
    z-index: inherit;
}
.btn-default {
}
.btn-success {
    background: #3b9879;/*#3b997a;*/
    border-color: #3b9879;/*3b997a;*/
    /*разная высота с красной border-width: 0;*/
    /*background:url('/img/2trianglesGreen.png') no-repeat;
    background-position:center;
    background-size:100%;*/
}
.btn-info {
    background: #70679d;
    border-color: #70679d;
    /*dont!differ from other!border-width: 0;*/
    /*background:url('/img/2trianglesBlue.png') no-repeat;*/
    background-position:center;
    background-size:100%;
}
.btn-white{
    color:#ffffff;
    /*djd 29082020 слишком крупно на авториз font-size: 18px;*/
}
.label-pill {
    font-family: RubikLight, Verdana, Geneva, sans-serif;
  padding-right: .5em;
  padding-left: .5em;
  border-radius: 8rem;
  font-size: 10px;
    font-weight: normal;
}
.bus-number {
    width:40px;
    height:40px;
    margin:auto;
    border-radius: 50%;
    border: 0px;
    display:flex;
    font-family: RubikMedium, Verdana, Geneva, sans-serif;
    /*font-weight: bold;*/
    color: #ffffff; 
    font-size:16px;
    background:#ff0000; /**/
    background-position:center;
    background-size: auto auto;
}
.busesDiv4route{
    display:flex;
    justify-content: center;
    font-size:10px;
    align-items: center;
    margin-left:10px;
    min-width: 25px;
}
.busesDiv4routeLiDim{
    /*transform: scale(0.75) translateX(-15px);
    height: 35px;
    */
    filter: grayscale(0.95);
    opacity: 0.75;
    order:1;
    background: #e1e1e188;
}
.buses2schedule{
    margin:auto;
    margin-left: 10px;
}
.buses2deviations{
    margin:auto;
    margin-left: 10px;
}
.tasksOrders {
    margin-bottom: 17px;
    /*border-bottom: 1px dashed #e1e1e1;*/
    padding-top:17px;
    padding-bottom:17px;
    padding-bottom:0px;
    text-align:left;
    position:relative;
    background:#fefefe;
    box-shadow: 3px 3px 3px #e1e1e1;
}
.tasksOrders>div>div{
    padding-left:10px;
        padding-right: 10px;
}
.tasksOrdersNonapproved {
    background:url("/img/sarov-pattern.png");
    background-position:center;
    background-size:100%;    
}
.tasksOrdersShrinked {
    margin-bottom: 5px;
    padding-top: 5px;
    padding-left:0px;
}
.tasksOrdersShrinked .rollableDetails{
    display:none;
}
.taskItemTypetitle{
    margin-left: 10px;font-family:RubikMedium; font-size:16px; vertical-align:top; 
    display: inline-grid;
}
.taskItemTypeIco{
    color:#ffffff; width:40px; height:40px; border:0px solid transparent; outline:none; 
}
.tMstatuses{
    /*font-family:RubikLight;*/
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}
.tMstatuses>span{
    color: #33856b;
    /*background: #053bad;*/
    /*height: 30px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*text-transform: capitalize;*/
    padding-right: 13px;
    border-radius: 7px;
    margin-right: 15px;
    font-weight: bold;
    white-space: nowrap;
}
.taskItem2string{
    width:100%; padding-left: 56px; display: flex;justify-content: space-between;align-items: center;
    margin: 10px 0px;
}
@media screen and (max-width: 500px) {
    .taskItem2string{
        font-size: 12px;
    }
    .taskItemTypetitle{
        margin-left: 5px;
        font-size:12px; 
    }
    .taskItemTypeIco{
        width:20px;
        /*height:20px;*/
    }
}
#sideMenuSortTitle{
  font-size: 12px;position:relative;background:#ebecec; width:100%; padding: 0px 10px;overflow: visible;display:flex; justify-content: space-between; align-items: center  
}
#sideMenuSortTitle>div{
    display: flex; align-items: center;
}
#sideMenuSortTitle>div:first-child{
    flex: 1; 
    /*letter-spacing: -0.5px;*/
}
#sideMenuSortTitle>div:first-child a{
    margin-right:15px;
    display:flex; align-items: center;height:100%; color:#000000; text-decoration: none;
}
#sideMenuSortTitle>div:nth-child(2){
    margin-left: 17px;
    margin-right: 2px;
}
#sideMenuSortTitle>div:nth-child(2)>*{
    width:30px;
}
.imagesFortasks{
    width:100%;
    object-fit: cover;
    animation-name: fadeIn;
    animation-duration: 500ms; 
    /*animation-timing-function: ease-in-out; 
    animation-delay: 300ms;*/
    visibility: visible !important; 
    transition: transform 750ms;
}
.btn-likedislike {
    padding:7px;
    padding-top:0px;
    padding-bottom:0px;
    border-radius:3px;
    background:#e1e1e1;
    color:white;
    height: 25px;
    margin-right:10px;
        display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor:pointer;
    white-space: nowrap;
}
.btn-likedislike:active {
    filter:brightness(0.75);
}
.btn-likedislike>span {
    width:0px;
    padding-left: 5px;
    transition: all 0.33s;
    transition-delay: 0.5s;
    overflow: hidden;
}
.btn-likedislike:hover>span {
    width:100px;
    transition: all 0.13s;
}
.btn-likedislike img{
    width: 15px;
    height: 15px;
    filter: brightness(2.4);
}
.btn-likedislike div{
    height: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.btn-like{
    background: #e5724d;
}
.btn-dislike{
    background: #3b997a;/*13012021djd #053bad;*/
}
.btn-like img{
    transform: translateY(-2px);
}
.btn-dislike img{
    transform: translateY(2px);
}
.label-likes{
    font-size: 13px;
    border-left: 1px solid #ffffff;
    padding-left: 10px;
    margin-left: 7px;
}
.btn-share{
    width:20px;
    height:20px;
    background:url('/img/share.svg') no-repeat;
    background-size: 13px auto;
    background-position: center;
}
.btn-share:hover{
    /*background:url('/img/taskShare_hover.svg') no-repeat;*/
    background-size: 13px auto;
    background-position: center;
}
.btn-geodrop{
    width:20px;
    height:20px;
    background:url('/img/taskDrop.svg') no-repeat;
    background-size: 12px auto;
    background-position: center;
}
.btn-geodrop:hover{
    background:url('/img/taskDrop_hover.svg') no-repeat;
    background-size: 12px auto;
    background-position: center;
}
.btn-managerpanel{
    width:20px;
    height:20px;
    margin-left: 5px;
    margin-bottom: 4px;
    background:url('/img/ic_manager_panel.svg') no-repeat;
    background-size: 17px auto;
    background-position: center;
}
.btn-managerpanel:hover{
    background:url('/img/ic_manager_panel_hover.svg') no-repeat;
    background-size: 17px auto;
    background-position: center;
}
@media screen and (max-width: 767px) {
    .btn-managerpanel{
        margin:0px;
    }
}
.btn-print{
    width:20px;
    height:23px;
    background:url('/img/ic_print.svg') no-repeat;
    background-size: 14px auto;
    background-position: center;
}
.btn-print:hover{
    background:url('/img/ic_print_hover.svg') no-repeat;
    background-size: 14px auto;
    background-position: center;
}

.btn-dots{
    width:20px;
    height:20px;
    padding-left: 4px;
    padding-top: 1px;
    color:#6B717B;
    /*background:url('/img/taskDots.svg') no-repeat;
    background-size: 12px auto;
    background-position: center;*/
}
.btn-dots:hover{
    color:#B44C5A;
    text-decoration: none;
    /*background:url('/img/taskDots_hover.svg') no-repeat;
    background-size: 12px auto;
    background-position: center;*/
}
.toggleManagerPanel01{
    margin:5px; 
    display:none;
}
.toggleManagerPanel01 td{
    padding:5px;
}
#sideMenu{
    position:absolute; 
    top:88px; 
    right:0px; 
    bottom:0px;
    width:650px;/*не важно. перекрывает placeLogo()*/
    /*min-width: 700px;/*30%;*/
    max-width: 100vw;
    border:0; 
    overflow-x: hidden; 
    background:#ffffff; 
    box-shadow: -5px 3px 5px rgba(128,128,128,0.3); 
    display:flex; 
    /*border-top-left-radius: 5px;  */
    flex-direction: column; 
    z-index: 3;/*не меньше 3, потому что 2 - в input-group*/
    border-radius: 0px 0px 0px 15px;
}

.statreportCard{
    width: 49%; 
    min-width: 770px;
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow:1px 1px 5px #a1a1a1; 
}
.statreportCardUnlim{
    width: auto; 
}
/*@media screen and (max-width: 770px) {
    min-width: "";
}*/
.statreportHint{
    padding:30px; 
    max-width:70%;
    margin: 50px;
}
.appTitle{
    position: absolute;
    top: 4px;
    left: 180px; 
    /*pointer-events: none;не ставить! не прокликивается выобр сателлиотв*/
}
.appTitle span{
    color:#c6e6dc; 
    font-size:31px; 
    font-family: RubikLight;
    margin-right:10px;
}
.appTitle span.edit{
    color:#ffa5a5;
}
#appSubTitle{
    cursor:pointer;    
    font-size:18px;
}

.swalHeaderImg{
    padding: 7px;
    position:relative; width:100%; height:150px; display: flex;justify-content: space-between;align-items: flex-start; overflow:hidden; cursor:pointer; 
}
.taskBalloonDescr{
    color: #23527c;
    cursor: pointer;
    line-height: 1.5;
    font-size: 14px;
}
#taskratingWindow{
    position:absolute; top:100px; left:10px; overflow: hidden; height:600px; width:700px; min-width: 500px;max-width:90vw; z-index: 1; display:none; font-size:16px;  color: #f9fffd; background:#fefefe; box-shadow: rgba(0, 0, 0, 0.73) 0px 0px 20px;
}
    
@media screen and (max-width: 600px) {
    .appTitle{
        left: 60px !important; /*перекроет index14.css*/
    }
    .navbar-brand_city0 {
        width:40px;  /* for mob*/
        height:40px;
        /*background:url('/img/logo_krsn_40x40.png') no-repeat;
        background-size: 40px 100%;
        background-position-x: 0px;
        background-position-y: 0px;
        /*border: 1px solid red;*/
        display:none;/*test 16072020*/
    }
   .taskBalloonDescr{
        font-size:12px;
        line-height: 1.4;
        margin-bottom: 25px;
    }
    #taskratingWindow{ /*перекроет  в showTaskratingWindow()*/
        left:0px; height:90vh; width:99vw; min-width: initial;max-width:initial; font-size:12px;  
    }
    .panel-body {
        padding: 5px;
    }
}

@media screen and (max-width: 767px) {
    .appTitle{
        top: 7px;
        /*left: 105px; */
        margin-left: -20px;
    }
    .appTitle span{
        font-size:15px; 
        margin-right: 0px;
    }
    .container-fluid {
        margin-right:0px;
        padding-right: 5px;
    }
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left:-15px;
    }  
    .navbar-nav .open .dropdown-menu {
        position:absolute;
    }
    #appTitle{
        /*display:none;*/
        font-size: 12px;
        max-width: 31vw;
        overflow: hidden;
        white-space: nowrap;
        display: inline-flex;        
    }
    #appSubTitle{
        cursor:pointer;    
        font-size: 12px;
        max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    margin-top: -5px;
    }
    
    .rollableDetails{
        font-size:12px;
    }
    .swalHeaderImg{
        height: 100px;
    }
}

.ui-resizable-n {
    height: 15px;
}
.ui-resizable-w { /* левая граница */
    cursor: w-resize;
    left: 0px;
    top: 0px;
    width: 5px;
    height: 100%;
}
.ui-resizable-w:hover{
    box-shadow: inset 2px 0px 2px #80808047;
}
.sideMenuResizer{
    position:absolute;
    left: -3px;
    top: 50%;
}
/*#sideMenuClose{
    z-index: 10;
    position:absolute;
    right: -10px;
    top: 0px;
font-size:16px; top:10px;  height:30px;   background-position-y: 10px;
}*/
.sideMenuFullscreen{
    position:absolute;
    right: 5px;
    top: 5px;
    font-size:11px;
    cursor:pointer; 
    background: transparent; 
    color:#ffffff; 
}
@keyframes fadeIn{0%{opacity:.3}20%{opacity:.4}40%{opacity:.5}60%{opacity:.6}80%{opacity:.7}90%{opacity:.9}100%{opacity:1}}
.imagesFortasks:hover{
    transform: scale(1.05);
}

.taskMenuSwitchTitles{
    font-size: 18px;
}
.shadowed {
	box-shadow:0px 0px 10px 1px #ffffff;
	-moz-box-shadow:0px 0px 10px 1px #ffffff;
	-webkit-box-shadow:0px 0px 10px 1px #ffffff;
	-khtml-box-shadow:0px 0px 10px 1px #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
	filter:alpha(opacity=90); 
	-moz-opacity: 0.9; 
	opacity: 0.9;  
}

.header1 {
    font-family: RubikLight, Verdana, Geneva, sans-serif;
    position:fixed; 
    top:0px;
    left:0px;
    width:100%; 
    height: 48px;
    border:0; 
    overflow: hidden; 
    font-size:25px;    
    background: #006633;
    text-align:center;
    filter:alpha(opacity=75); 
    -moz-opacity: 0.95; 
    opacity: 0.95;  
}
.statistics {
    position:fixed; 
    top:50px;
    left:0px;
    width:auto; 
    height: 33px;
    border:0; 
    overflow: hidden; 
    font-size:18px;    
    color:#006666;
    background: transparent;
    text-align:center;
    filter:alpha(opacity=75); 
    -moz-opacity: 0.95; 
    opacity: 0.95;  
    display:none;
    cursor:pointer;
}
@media screen and (max-width: 1100px) {
    .statistics {
        top: 100px;
    }
}
.statistics:hover{
    height: auto;
}
#statistics{
    /*пункт меню*/
    color:#47698c; 
    font-family: RubikLight;
    transition: all 0.7s;
    cursor:pointer;
    font-size: 14px;
}
#statistics.collapsed{
    /*width:140px;
    white-space: nowrap;
    transition: all 1.2s;/**/
}
#statistics.collapsed:hover{
    /*width:330px;
    color:#47698c !important; 
    transition: all 0.7s;/**/
}
.weatherExtraSensors{
    display:none;
}
#weatherChart,.weatherChart{
    position:absolute; 
    left:15vw; 
    top:25vh; 
    width:50vw; 
    height:50vh; 
    display:none; 
    box-shadow:#3C4652 0px 5px 17px; 
    z-index:16; 
    background:#ffffff;
}
.weatherChart>div>div{
        margin: 20px;
        margin-bottom:0px;
}
#meterChart{
    width:800px;
    height:500px;
    font-size: 14px;
}
.meterChart2 {
    position:absolute; 
    left:0px; 
    top:90px; 
    width:33vw; 
    height:20vh;
    display:none; 
    box-shadow:#3C4652 0px 5px 17px; 
    z-index:16; 
    background:#ffffff;
}
.meterChartTitle{
    font-size: 14px;padding: 9px;background: #33856b;color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 26px;
    cursor:default;
}
.meterChartContainer{
    display:flex; flex-direction: column; width:100%; 
    /*dont!height:100%;*/
    overflow: hidden;
    min-height: 50px;
    /*justify-content: center;
    align-items: center;*/
}
.meterChartFooter{
    display:flex;
    position: absolute;
    bottom: 0px;
}

.topPanel{
    position:fixed; 
    top:-100vh;
    left:0px;
    width:100vw; 
    height: auto;
    overflow: hidden; 
    box-shadow:#3C4652 0px 5px 17px; 
    transition: all 0.7s;
    z-index: 15;
}
.topPanelDiv{
    width:100%; 
    height:auto;
    padding:20px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden; 
    font-size:20px;   
    background:#ffffff;
    color:#000000;
    max-height: 90vh;
    overflow-y: auto;
}
.topPanelOpen{
    top:50px;
    transition: all 0.25s;
}

.bottomPanel{
    position:fixed; 
    bottom:-100vh;
    left:0px;
    width:100vw; 
    height: auto;
    min-height: 200px;
    max-height: 90vh;
    overflow: hidden; 
    /*visibility: hidden;*/
    /*opacity: 0;*/
    box-shadow:#3C4652 0px -5px 17px; 
    transition: all 0.3s;/**/
    z-index: 4;
}
.bottomPanelDiv{
    /*position:absolute; 
    top:0px; 
    left:0px;*/
    width:100%; 
    height:100%;
    /*max-height:75vh;*/
    padding:20px;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: hidden; 
    overflow-y: auto;
    /*mobil!font-size:22px;   */
    background:#ffffff;
    color:#000000;
    text-align:center;
}
.bottomPanelOpen{
    bottom:0px;
    /*visibility: visible;*/
    /*opacity: 1;*/
    transition: all 0.3s;
    /*https://www.gradient-animator.com*/
    /*background: linear-gradient(270deg, #ffffff, #c6c6c6);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 2s ease infinite;
    -moz-animation: AnimationName 2s ease infinite;
    animation: AnimationName 2s ease infinite;*/
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.favStopChooserTr{
    cursor:pointer;
    border-top:1px solid #a1a1a1;
}
.favStopChooserTr:hover{
    background: #a6e1ec;
}
.rightScheduleTable td{
    border:1px solid #e5e5e5;
    padding:0px;
    padding-left:5px;
    font-size:14px;
}
.etaTable {
    margin:auto; 
    /*width:100%; 
    max-width:500px; */
    white-space: nowrap;
}
.etaTable td {
    height:40px;
    max-height:40px;
}
.etaAbsolute{
    cursor:pointer;
}
.etaRelative{
    cursor:pointer;
}
.etaRelativity{
    display:none;
}
.eta4hint{
    cursor:help;
    border-bottom: 1px dashed #ff8080;
}
.eta4hint i{
    color:#800000;
}
.eta4hintOk{
    cursor:default;
    border-bottom: 1px dashed #008800;
}
.eta4hintOk i{
    color:#008800;
}
.yamaHeader {
    font-size:30px;
    margin:auto;
    margin-right:15px;
    margin-left:15px;
}
.yamaHeaderIco1 {
    margin:auto;
    height:40px;
    display: none;
}
.yamaHeaderIco2 {
    margin:auto;
    width:171px;
    height:40px;
    display: inherit;
}

.copListItem{
    width:100%; 
    display:flex; 
    justify-content:flex-start;
    align-items: center;
    cursor:pointer;
    transition: all 500ms ease;
}
.copListItem:hover{
    background: #e1e1e1;
    transition: all 200ms ease;
}
.copListItem img{
    height:100%; 
    max-height:90px;
    min-height: 20px;
}
.copListItem span{
    padding:15px;
}


.taskTypeBtn2018{
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 15px;
    font-family: RubikLight;    
    border-radius: 5px;
    padding-bottom: 2px;
    padding-top: 2px;
        padding-left: 5px;
    padding-right: 5px;
    flex: 1 1 auto;
}
.taskTypeBtn2018:focus{
    background: #20755d; /*перекроется в upside_menu.php*/ 
    color: #ffffff;
}.taskTypeBtn2018:hover{
    background: #20755d; /*перекроется в upside_menu.php*/ 
    color: #ffffff;
}
.taskTypeBtn2018.active{
    background: #20755d; /*перекроется в upside_menu.php*/ 
    font-family: RubikMedium;   
    color:#ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.taskTypeBtn2018.active:hover{
    background: #20755d; /*перекроется в upside_menu.php*/ 
    color: #ffffff;
}
@media screen and (max-width: 767px) {
    .taskTypeBtn2018{
        font-size: 10px;
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 3px;
            text-overflow: clip;
    overflow: hidden;
    }
}

#loginButtonIco {
    width:50px; 
    height:50px; 
    cursor:pointer; 
    margin:0px; 
    margin-top:-1px; 
    border:1px solid #f0f0f0; 
    outline:none;
}
#loginButtonIco2 {
    display:none; 
    margin:auto; 
    margin-right:10px; 
    margin-left:10px;
    width:40px; 
    height:40px; 
    /*border:1px solid #f0f0f0; */
    outline:none;
}

.selectedRegionRow {
    background: #ff0000;
}

.navbar2LayersDropdown{
    width:182px; 
    padding-left: 50px !important;
}
.nav2-caret{
    margin:10px; 
    margin-top:8px;
    margin-left: 8px;
}
.newTaskFields {
    font-size: 15px;
    width:175px;
    vertical-align: middle;
}

#taskDiv  {
    border:0; 
    width:100% !important;/*надо, погода-график меняет*/
    overflow-x: hidden; 
    overflow-y: auto; 
    height:100%; 
    color:#000000; 
    font-size:15px; 
    background:#ebecec;        
    padding-left: 5px;/*для анимированного бордера*/
    box-shadow: -2px 0px 5px #e1e1e155;        
    -ms-overflow-style: none; 
}
#taskDiv::-webkit-scrollbar{
    width: 10px;
}
#taskDiv::-webkit-scrollbar-track {
    border-radius: 5px;
}
#taskDiv::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background:#c1c1c1;
}
#taskDivSubmenu{
    width:100%; 
    display: flex; 
    flex-direction: row; 
    justify-content:left;  
    min-height: 38px;
    align-items: center;
}
#taskDivMenuAdditional{
    margin-right: 45px;
    overflow-x: auto;
    width:100%;
    display:flex; justify-content: left; 
}    
#taskDivMenuAdditional::-webkit-scrollbar{
    display: none; 
}     

#taskDiv.rainbowLoader>div {
    filter: grayscale(1);
}
#taskDiv.rainbowLoader::before {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    animation: rotateLoader 4s linear infinite;
}
.rainbowLoader::before {
    content: '';
    z-index: -1;
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    animation: rotateLoader 4s linear infinite;
}
@keyframes rotateLoader {
    100% {
        transform: rotate(1turn);
    }
}
@media screen and (max-width: 1000px) {
    .navbar2actionmenu{
        display: flex; /*на мобилах все прижимаем вправо и не даем навбару2 расширяться переносом*/
    }
}
#loginDropdown{
    height:50px; min-width:85px; margin:0px;    margin-right: 15px;
}
.myScore,.myScores{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    opacity:0;
    cursor: help;
    transition: all 0.5s;
    box-shadow: 0 0 9px 1px #e6d600;
}
.myScores{
    opacity:1;
}
.myScore>.content,.myScores>.content {
    color:#ffffff;
    text-align: center;
    background: #099800;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border:2px dotted #e6d600;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.myScore>.content.smaller,.myScores>.content.smaller {
    font-size: 10px;
}

#managerPanel{
    position:absolute; top:51px; left:5px; overflow: hidden; overflow-y:auto; 
    min-height:75%; height:1px;/*for child h 100%*/ 
    width:650px; 
    min-width: 390px; 
    z-index: 1; display:none; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); 
    max-width: 100vw;
}
#managerPanel::-webkit-scrollbar{
    width: 10px;
}
#managerPanel::-webkit-scrollbar-track {
    border-radius: 5px;
}
#managerPanel::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background:#c1c1c1;
}
#loginButtonUsermodeNavbar{
    font-size:11px;height: 36%;text-align: right;font-family: monospace;
}
#loginButtonUsermodeNavbar span{
    display:none; 
    color: #e1e1e1;
    /*border-radius: 10px;background: #ffffff;
    padding-left: 7px;padding-right: 7px;*/
}
#gearDropdown{
    margin-top:7px;
}
#helpDropdown{
    margin: 0px 12px;
}
@media screen and (max-width: 767px) {
    #loginDropdown{
        min-width:inherit;
        margin-right: 3px !important;
    }
    #loginButtonSpanNavbar{
        font-size: 12px;
        max-width: 50px;
    }
    .nav-pills>li+li{
        margin-left: 0px;
    }
    #helpDropdown{
        margin: 0px 7px 0px 3px;
    }
    #loginButtonUsermodeNavbar{
        font-size:10px;
    }
    #managerPanel{
        left:0px; 
        width:100vw; 
        min-width: initial; 
    }
    .nav2-caret{
        margin-right:0px; 
    }
    .nav .navbar-nav .nav-pills .navbar-right .navbar2menu0{
        display:none;
    }
    
    #sendOrderDiv {
        font-size:12px;
    }
    .header1 {
        text-align:left;
        padding-left:10px;
    }
    .yamaHeader {
        font-size:12px;
        margin-right:5px;
        margin-left:5px;
    }
    .yamaHeaderIco1 {
        height:30px;
        display: inherit;
    }
    .yamaHeaderIco2 {
        height:30px;
        display: none;
    }


    .newTaskFields {
        font-size: 10px;
        width:75px;
        white-space: nowrap;
    }
    /*input[placeholder] {
        font-size: 10px;
        text-overflow:ellipsis;
    }
    ::-webkit-input-placeholder {
        font-size: 10px;
        text-overflow:ellipsis;
    }*/
    .taskMenuSwitchTitles{
        font-size: 10px;
    }
    .i-am-new {
        width:311px !important;
    }
    #noty_center_layout_container {
        width:311px !important;
    }
    
    .techSupportFeedback{
        display: none;
    }
    .show600{
        font-size:10px !important;
        width:50px !important;
        overflow:hidden;
        margin:0px !important;
        padding:0px !important;
    }
    #taskDivMenuAdditional{
        margin-left: 5px !important;
    }
    .btn-link{
        padding:3px !important;
    }
    #loginButtonIco {
        width:30px;
        height:30px;
        margin-left:5px; 
        margin-bottom: 20px;
    }
    .statistics {
        /*top:90px;*/
        font-size:12px;    
        height: 23px;
    }
    .officialPaper{
        margin:5px;    
        margin-bottom:10px;
        padding:5px; 
        padding-bottom: 20px;
    }
    .officialPaper h2 {
        margin-top: 50px;
      font-size: 20px;
    }
     .officialPaper p {
      padding: 5px 10px;
      font-size: 15px;
    }    
}   

/*player */

.gradient {
    border: 1px solid #a5a5a530;
    box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
    background: #33856b;/*перекроется в upside_menu.php*/ 
}
.container {
    transition: all .7s ease;
    position: absolute;
    width: 100%;
    /*left: 25%;*/
    height: 85px;
    /*border-radius: 5px;*/
    box-shadow: 0px 0px 13px rgba(234, 234, 234, 0.65), inset 0 1px 0px rgba(255,255,255,.2);
    bottom: 0px;
    /*margin: -214px 0px 0px -214px;*/
    padding: 0px;
    padding-top: 5px;
    box-sizing: border-box;
    z-index: 1000000;
}
.player {
    box-sizing: border-box;
    position: absolute;
    width: 300px;
    bottom: 10px;
        width: 98%;
    margin-left: 1%;
    border-radius: 3px;
    padding: 5px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.playerTitle{
    color:#ffffff;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
        margin-left: 5px;
        margin-right: 5px;
}
.button {
    display: block;
    width: 38px;
    height: 31px;
    margin-right: 5px;
}
.placePlayerSlider{
}
.placePlayerSlider .ui-slider-handle{
    background: url(../img/placeAudioSlider.png) !important;
    background-size: 30px auto !important;
    width: 30px !important;
    height: 30px !important;
    outline: none;
    margin-left: -10px !important;
}
/*player end */

.placeDescr p{
    margin:10px;
}
.placeDescr p:first-letter{
    font-size: 130%;
    color: red; /* Красный цвет текста */
    font-weight: bold; /* Жирное начертание */
    margin-left:10px;
}


.footerTermsBig{
    display: block;
    width:100%;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.98);
    white-space: nowrap;
    text-align: center;
}
/*.footerTermsSmall{
    display: none;
    width:100%;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.98);
    text-align:left;
    white-space: nowrap;
}*/
.footerLogo{
    
}
@media screen and (max-width: 1500px) {
      .hideOn1500{
        display:none !important;
    }
}
@media screen and (max-width: 1100px) {
      .hideOn1000{
        display:none !important;
    }
    .navbar2LayersDropdown{
        width:80px; 
        padding-left: 5px !important;
    }
    .navbar2search{
        width:100px;
        font-size: 10px;
    }
    .navbar2search:focus{
        width:150px;
    }
}
@media screen and (max-width: 767px) {
  .footerTermsBig{
        display: none;
    }
    /*.footerTermsSmall{
        display: block;
    }*/
    .footerLogo{
        display: none;
    }
}

.glyphicon-refresh-animate {
    display:inherit;
    opacity: 1;
    animation: spin .7s infinite linear;
}
.glyphicon-hidden{
    display:none;
}
.glyphicon-hidden2{
    opacity:0;
}
@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.sendbutton-blink {
    cursor: not-allowed;
    animation: blink 1.5s ease infinite;
}

.blink {
    animation: blink 1.5s ease infinite;
}
@keyframes blink {
    0% { opacity:1.0;}
    50% { opacity:0.19;}
    100% { opacity:1.0;}
}
.blinkRed {
    color:red;
    border-radius: 50%;
    animation: blinkRed 1.2s linear infinite;
}
@keyframes blinkRed {
    0% { filter: brightness(1);background: #ff0000;}
    15% { background: transparent;}
    50% { filter: brightness(0.55);}
    100% { filter: brightness(1);}
}


.scheduleTimeLabel{
    width:50px; 
    color:#000000;
    text-align: center;
}
.scheduleTimeLabel:hover{
    background:#c1ffc9;
    border-radius: 3px;
    color:#000000;
}


.gera_input{
    border:2px solid white;
    border-radius: 5px;
    height:50px;
    background: transparent;
        color: #ffffff;
    font-size: 24px;
    font-family: RubikMedium;
}
.gera_input:focus{
    border:2px solid white;
}
.gera_input:hover{
    border:2px solid white;
}
.gera_input::-webkit-input-placeholder{
    color:#e0e0e0;
    font-family: RubikLight;
}
.gera_input::-moz-placeholder{
    color:#e0e0e0;
    font-family: RubikLight;
}
.gera_input::placeholder{
    color:#e0e0e0;
    font-family: RubikLight;
}
.gera_input.gera_input_sm{
    font-size: 20px;
}

.guardRelay{
    width:50px;
    height:50px;
    background: #808080;
    border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: not-allowed;
}
.guardRelay.intermediate{
    background: #808080;
    animation: blink 0.85s linear infinite;
}
.guardRelay span{
    font-size:20px;
    font-family: RubikMedium;
    color:#ffffff;
}
.guardRelay.on{
    background: #ff0000;
    cursor: pointer;
}
.guardRelay.off{
    background: #339900;
    cursor: pointer;
}
.guardRelay:hover{
    border:7px dashed black;
}
.sidemenuOpsRateHint{
    padding:3px;
    background:#777700;
    color:white;
    width:100%;
    text-align:center;
    border-radius:3px;
    font-size: 15px;
    display: block;
}

.chatAttach{
    width:150px; 
    height:auto; 
    aspect-ratio: 4/3;
    object-fit: cover;
    /*04022022border:1px solid #f1f1f1; 
    background: #ffffff;
    padding:5px;*/
    border-radius: 5px;
    box-shadow:0px 0px 1px #0000008a;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.chatAttachSm{
    width:75px; 
}
.chatAttach:hover{
    /*box-shadow:0px 0px 3px #0000008a;*/
    transform:         translateY(-0px) translateX(-0px) scale(1.075);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ui-tooltip {
    z-index: 10000001;/*above noty*/
}


.formExcavator{
    background:#ffffff;
    position:absolute; 
    top:90px; 
    left:3px; 
    overflow: hidden; 
    min-height:300px; 
    height:auto; 
    width:45vw; 
    min-width: 800px; 
    z-index: 1; 
    display:flex; 
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.7);
        padding-bottom: 60px;
}
.formExcavator.hidden{
    display:none;
}

.excavatorStatusIndicator {
    display: inline-block;
    width:10px;
    height:10px;
    border-radius: 50%;
    /*padding-left: 10px;
    padding-right: 10px;dont делает эллипсами*/
}
.excavatorStatusIndicator.ok {
    background: #68d500;
}
.excavatorStatusIndicator.bad {
    background: #f46812;
    animation: blink 1.5s ease infinite;
}

.requestsStatusLinks{
    cursor:pointer;
}
.requestsStatusLinks:hover{
    text-decoration: underline;
    color:#0000ff;
}
.smallZoomableImg{
    object-fit: cover;
    height: 30px;
    width: 50px;
    cursor:zoom-in;
}
.wantedUnreadIndicator {
    display: inline-block;
    width:10px;
    height:10px;
    border-radius: 50%;
    background: #ff0000;
    /*padding-left: 10px;
    padding-right: 10px;dont делает эллипсами*/
    animation: blink 0.75s infinite;
}

.onlineStatusIndicator {
    display: inline-block;
    width:10px;
    height:10px;
    margin-right:10px;
    border-radius: 50%;
    background: #68d500;
    animation: blink 1.5s ease infinite;
}
.onlineStatusIndicator.pause {
    background: #ffcc00;
    animation: blink 2.5s ease infinite;
}
.onlineStatusIndicator.offline {
    background: #f46812;
    animation: none;
}


.zatobus-div-icon{
    width:30px !important;
    height:30px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border:2px solid #ffffff;
    background: #4d4185;
    border-radius:50%;
    color:#ffffff;
    font-size: 15px;
    font-family: RubikMedium;
    white-space: nowrap;
}
.zatobus-div-sm{
    font-size: 8px;
    font-stretch: ultra-condensed;
    letter-spacing: -0.5px
}
.zatobus-div-icon.move100,.move100{
    transition: all 100ms ease;
}
.zatobus-div-icon:hover{
    opacity:1;
}
.zatobus-div-source2{
    border:2px solid #0000aa;
}
.zatobus-div-ws{
    background: #0000aa;
}
.zatobus-div-handicap{
    border:3px solid #29a9db;
}
.zatobus-div-gosnomer{
    text-shadow:1px 1px 3px #000000;
}
.zatobus-div-virtual{
    border:2px dashed #000000;
}

.accident-div-icon {/*для сомвола "!" */
    width:20px !important;
    height:20px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border:2px solid #ffffff;
    background: #990033;
    border-radius:50%;
    color:#ffffff;
    font-size: 14px;
    font-family: RubikMedium;
}
.accident-div-marker {
    width:30px !important;
    height:30px !important;
    background: url('/Bobcat/img/type_accident.png') no-repeat !important;
    background-size: contain !important;
}
.accident-div-marker_nonactive{
    opacity:0.75;
}

.bin-div-icon{
    width:35px !important;
    height:35px !important;
    border-radius: 50%;
    background-color: #008800;
}
.bin-div-icon_delay{
    border: 4px solid #70679d;
    border-radius:50% !important;
    box-shadow: 0px 0px 12px 3px #70679d;
}
.bin-div-icon_-1{
    background-color: #FF0000;
}
.bin-div-icon_-3{
    border-radius: 0%;
    background: url('/img/garbage_can_drop-3.png') no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}
.bin-div-icon_0{
    border-radius: 0%;
    background: url('/img/garbage_can_drop0.png') no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}
.bin-div-icon_1{
    border-radius: 0%;
    background: url('/img/garbage_can_drop1.png') no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}
.bin-div-icon_2{
    border-radius: 0%;
    background: url('/img/garbage_can_drop2.png') no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}
.bin-div-icon_3{
    border-radius: 0%;
    background: url('/img/garbage_can_drop3.png') no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}
.bin-div-icon_4{
    border-radius: 0%;
    background: url('/img/garbage_can_drop4.png') no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
    background-color: #33856b !important;
    color:#ffffff;
}


.viewOptionsHint{
    font-size:12px;
}


.publicControlResultCard{
    background:#e1e1e16e; box-shadow: 1px 1px 1px #808080; border-radius:8px; border:2px solid #dddddd; padding:14px; width:90%; cursor:default;    
    margin: 5px;
}
.publicControlResultCard:hover{
    box-shadow: 2px 2px 2px #909090; 
}
.publicControlResultCard>div{
    margin-bottom: 3px;
}

.publiccontrol-blink {
    animation: blink 1.5s ease infinite;
}
.attention_blink {
    animation: blink 0.3s infinite;
}

.panel-body{
    /*зачем? в Панели Упр.Проб. плохо! padding:0px; /*accordion*/
}

.publicControlStatus1Hint{
    border-left: 7px dotted #9a0000;
    padding-left: 15px;    
    transition: all 100ms ease;
        margin: 20px;
}
.publicControlVacancyIndicator {
    display: inline-block;
    width:10px;
    height:10px;
    margin-left:5px;
    border-radius: 50%;
    background: #ec971f;
    animation: blink 1.0s ease infinite;
}
.controlForTaskRate{
    margin-top: 10px;margin-bottom: 10px;display:flex; align-items:center; cursor:pointer;
}
.controlRate{
    display:flex;
    align-items: center;
    width:45px;
    height:45px;
    font-size:18px;
    justify-content: center;
    font-weight: bold;
    border-radius:50%;
    background:#3b997a;
    color:#ffffff;
    flex-shrink: 0;
    border:3px dashed #ffffff;
}
.controlRate>i{
    font-size: 17px;
}
.controlStamp{
    position:relative;
    background:#000000; 
    /*right:10px; top:10px; */
    /*box-shadow:#ffffff 0px 0px 5px;*/
    display:inline-flex; 
    align-items: center;
    color:red; 
    padding-left:5px; 
    backface-visibility: hidden;
    /*opacity:0.8; */
    text-align:right; 
    white-space: nowrap;
}
@media screen and (max-width: 767px) {
    .controlRate{
        transform:scale(0.75);
    }
}
.sideMenuTypeCounter{
    display:none;
    font-size: 10px;
    /*color: #ffffff;*/
    /*margin-left: 3px;
    margin-top: 3px;*/
    opacity:1;
    transition: all 200ms ease;
}
.sideMenuTypeCounterHidden{
    opacity:0.3;
    transform: rotateX(90deg);/*translateY(20px) */
    transition: all 200ms ease;
}
.marketIconContentLayout{
    width:50px; height:50px; 
    margin-left:-25px;margin-top:-25px; 
    border:1px solid #888888; border-radius:50%; display:flex; 
}
.marketIconContentLayout.big{
    width:100px; height:100px; 
    margin-left:-50px;margin-top:-50px; 
}
.dotIconContentLayout{
    width:30px; height:30px; 
    margin-left:-15px;margin-top:-15px; 
    border:2px solid #ffffff; border-radius:50%; 
}
.dotIconContentLayout.big{
    width:100px; height:100px; 
    margin-left:-50px;margin-top:-50px; 
}
.dotIconContentLayout.small{
    width:20px; height:20px; 
    margin-left:-10px;margin-top:-10px; 
}
.chat13dates{
    background:#f5edd9;
    border-radius:3px;
    padding:3px;
}

#alertRedString{
    cursor:pointer;
    position: absolute;
    width: 100vw;
    padding:10px;
    left:0px !important;/*for being as google fullscreen element*/
    right: 0px;
    top: 88px;
    display:none;
    background: #d9534f;
}
#alertRedString span{
    color:#ffffff;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    animation: marquee 15s linear infinite;
}
#alertRedString:hover span {
  animation-play-state: paused
}
@keyframes marquee {
  0% {
    transform: translate(100vw, 0);
    opacity:0;
  }
  10% {
    transform: translate(70vw, 0);
    opacity:1;
  }
  90% {
    transform: translate(-70%, 0);
    opacity:1;
  }
  100% {
    transform: translate(-100%, 0);
    opacity:0;
  }
}

.optionControlledCounters{
    padding-left:5px;
    padding-right:5px;
    border-radius: 20px;;
}
.optionControlledCounters:hover{
    cursor:help;
    background: #ffffff;
    color: #000000;
}
.iframme{
    position:fixed; 
    top: 100px;
    left: 10px;
    width:800px;
    height:600px;
    z-index:1000; 
    border:20px solid #33856b;/*перекроется в upside_menu.php*/ 
    box-shadow: 5px 5px 5px #80808055;
    background: #ffffff;
}
.iframme frame{
    width:100%;
    height:100%;
}
.iframme .btn{
    position:absolute;
    top:-24px;
    right:-28px;
    color: #ffffff;
}
.cityOptionsFlex .panel-body div.flex_div{
    display: flex;
    justify-content: space-between;
    padding: 5px 0px;
    color: #000000;
    font-size: 14px;
}
.cityOptionsFlex .panel-body div.flex_div .material-switch{
    display:flex; justify-content: space-between; align-items: center;width: 0px;margin-right: 40px;
}
.input-group-addon.green{
    border-left: 3px solid green;
}
.mastrNotifOption{
    font-size:10px;
    height: 100%;
    padding-top: 3px;
}
.mastrNotifOption>div{
    color:#ff66ec;
}
.mastrNotifOption.red>div{
    color:#ff0000;
}
.taskManagerPanel{
    display:flex; 
    justify-content:flex-end;
    align-items: center;
}
.taskManagerPanel>div{
    margin-left:5px;
}
.taskManagerPanel>button{
    /*margin-left:5px;*/
}
.commentsForTaskDiv{
    width:100%; padding-top: 10px; padding-bottom:0px; margin-top:10px;position:relative;
}
.commentsForTaskDiv>div{
    background: #e4e3e321;
}
.officesBalloon{
    width:100%; display:flex; flex-direction: column; justify-content:space-between; align-items:center;
}
.officesBalloon span{
    margin-top: 7px;    
    margin-bottom: 7px;    
    width:100%; 
    text-align: left;
}
.nedumayu span:nth-child(2){
    display:none;
}
.nedumayu:hover span:nth-child(2){
    display:inherit;
    color:red;
}
.nedumayu:hover span:first-child{
    display:none;
}

.apexchart-custom-icon{
    margin:3px;
    font-size: 14px;
}
.meterChartPeriods{
    display:flex;
    align-items: center;
    margin-top:5px;
}
.meterChartPeriods label{
    background: #eeeeee;
    padding: 2px;
    padding-left:5px; 
    padding-right:5px; 
    margin-left:10px; 
    font-size:12px; 
    border-radius: 4px;
     display: flex;
    align-items: center;
    justify-content: center;
}
.meterChartPeriods label input{
    margin:5px;
}

/*multiDatesPicker*/
#ui-datepicker-div {
    font-size: 13px;
    padding: 10px;
    box-shadow: 5px 5px 5px #808080;
    border: 1px solid #7b7b7b !important;
    /*background: #053bad;*/
}
/*#ui-datepicker-div table th {
    color:#ffffff;
}
#ui-datepicker-div table td .ui-state-default {
    color:#ffffff;
}*/



.asudd-div-icon {
    width:150px !important;
    height:150px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    /*background: #00000055;/**/
}
.asudd-div-icon .asuddDivOnline {
    width:150px;
    height:150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border:10px solid #000000;
    transform: rotate(0deg);
}
.asudd-div-icon .asuddDivMode {
    width:100%;
    height:100%;
    /*margin:1px;*/
    display: flex;
    justify-content: center;
    align-items: center;/**/
    border:10px solid #000000;
    background: #ffffff;
    position: relative;
}
.asudd-div-icon .asuddTableDir {
    position: absolute;
    width:45px;
    height:45px;
}
.asudd-div-icon .asuddTableDir td{
    display: flex;
    justify-content: center;
}
.asudd-div-icon .asuddTableDir.dir0{/*на север*/
    left: 31px;
    top: 65px;
    transform: rotate(0deg);
}
.asudd-div-icon .asuddTableDir.dir1{/*на восток*/
    left: 65px;
    top: 31px;
    transform: rotate(-90deg);
}
.asudd-div-icon .asuddTableDir.dir2{/*на юг*/
    left: 31px;
    top: 0px;
    transform: rotate(180deg);
} 
.asudd-div-icon .asuddTableDir.dir3{/*на запад*/
    left: 0px;
    top: 31px;
    transform: rotate(90deg);
}
.asudd-div-icon .asuddDivLight{
    /*display: inline-table;*/
    width:15px;
    height:15px;
    border-radius:50%;
    background: #bfbfbf5c;
    display: flex;
    justify-content: center;
    align-items: center;
}
.asudd-div-icon .asuddDivLight.blink{
    animation: trafficblink 0.75s linear infinite;
}
.asudd-div-icon .asuddDivLight .glyphicon{
    color:#ffffff;
    font-size: 8px;
    top: -1px;
}
@keyframes trafficblink {
    0% { opacity:1.0;}
    50% { opacity:1.0;}
    60% { opacity:0.0;}
    100% { opacity:0.0;}
}


.dropzone{
    border:2px dashed #bbb;
    border-radius:5px;
    padding:25px;
    text-align:center;
    font-size:20px;
    color:#bbb
}
.dropzone.dragover{
    background: #ffffff;
}

.signedStamp{
   display: inline-block;
    color: #8282ff;
    border: 1px solid #8282ff;
    padding: 0px 4px;
    transform: rotate(4deg) translate(10px, -2px);
    width: fit-content; 
    background: #ffffffaa;
    cursor:pointer;
    font-size: 10px;
}
.signedStamp:hover{
    background: #8282ffaa;
    transition: 0.3s;
    color: #0000ff;
}



.shake {
  animation-name: shake;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: 7;
}
@keyframes shake {
  0%, 100% {
      transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
      transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
      transform: translate3d(10px, 0, 0);
  }
} 

.citymini4container{
    display:flex; 
    flex-direction:column;
}
.citymini4{
    width:20px;
    height:15px;
}
.citysatcityitem{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.citysatcityitem img{
    margin-right: 3px;
}
.citysatcityitem a{
    white-space: nowrap;
}
.ulogin-buttons-container{
    height: auto !important;
}

.problemsCarousel{
    display:flex; 
    flex-direction:row; 
    justify-content:flex-end; 
    position: fixed; 
    right:0px; 
    bottom:0px; 
    width:100%; 
    height:250px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size:16px;
    font-family: RubikLight; 
    background: #ffffffEE;
    box-shadow: -4px -2px 4px 0px #98989838;
    transition: all 0.3s ease-out;
    z-index: 10;
}
.problemsCarousel:hover{
    background: #ffffff;
    box-shadow: -4px -4px 6px 0px #98989838;
    transition: all 0.3s ease-out;
}
.problemCarouselCard0{
    height:100%; 
    padding: 10px 15px 0px 15px;
    flex-shrink: 0;
    transition: all 0.3s ease-out;
}
.problemCarouselCard0:hover{
    transform: scale(1.05);
    transition: all 0.2s ease-out;
}
.problemCarouselCard0>div:first-child{
    width:100%; 
    height:100%; 
    background: #ffffff;
    /*border-radius:10px; */
    position:relative; 
    display:flex; 
    align-items: center; 
    justify-content: center;
    opacity: 0;
    border: 1px solid #98989877;
    border-bottom:0px;
    transition: all 0.73s ease-out;
    cursor:pointer;
}
.problemCarouselCard0:hover>div:first-child{
    box-shadow: -6px 3px 9px 0px #98989838;
}
.problemCarouselCard0>div:first-child.active{
    opacity: 1;
    transition: all 0.73s ease-out;
}
.problemCarouselCard0.movingR{
    animation-name: carouselCardMovingR;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}
@keyframes carouselCardMovingR {
  0% {
      transform: translateX(0px);
      opacity:1;
  }
  100% {
      transform: translateX(-400px);
      opacity:0.5;
  }
}
.problemCarouselCard0.movingL{
    animation-name: carouselCardMovingL;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}
@keyframes carouselCardMovingL {
  0% {
      transform: translateX(0px);
      opacity:1;
  }
  100% {
      transform: translateX(400px);
      opacity:0.5;
  }
}
.probCardMoveBtn{
    position:absolute; 
    bottom:50px; 
    color:#ffffff;
    background: #33856b;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 10px;
    font-size: 20px;
    z-index: 1;
    text-decoration: none;
    cursor:pointer;
    outline: none;
    border: 5px solid white;
    box-shadow: 0px 0px 4px 3px #ffffff;
    transition: all 0.15s ease-out;
}
.probCardMoveBtn:hover{
    transform: scale(1.05);
    transition: all 0.15s ease-out;
}
.probCardMoveBtnBg{
    position:absolute; 
    width:75px;
    height: 100px;
    bottom: 30px;
    background: linear-gradient(-90deg, #ffffff0a, #ffffff);
    border-radius: 8px;
    z-index: 1;
    filter: blur(10px);
    margin-left: -10px;
}
.problemCardPhoto{
    width:220px;
    height:125px;
    left: 0px;
    top:0px;
    border-radius:0px 0px 3px 0px;
    position: absolute;
    object-fit: cover;
    border: 1px dotted #00000038;
}
.problemCardType{
    width:50px; 
    height:50px; 
    object-fit: cover;
    border-radius:50%;
    position: absolute;
    left:-10px;
    top:-10px;
    border: 4px solid #ffffff;
    display: none; /*25122020 убрать лишнее */
}
.problemCardAva{
    width:50px; 
    height:50px; 
    margin:5px;
    object-fit: cover;
    box-shadow: -3px 2px 4px #909090;
    border-radius:50%;
    position: absolute;
    left:10px;
    bottom:10px;
    display: none; /*25122020 убрать лишнее */
}
.problemCardTypeTitle{
    position: absolute;
    right:5px;
    top:5px;
    width: 267px;
    font-size:15px;
    color:#000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*background: #ffffff94;*/
    text-align: right;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    text-shadow: 0px 0px 4px #ffffff;
}
.problemCardTypeDate{
    position: absolute;
    left:4px;
    top:105px;
    font-size:11px;
    font-weight: bold;
    color:#ffffff;
}
.problemCardTypeAuthor{
    position: absolute;
    right: 10px;
    top: 40px;
    font-size:10px;
    color:#808080;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}
.problemCardTypeDescr{
    position: absolute;
    left:0px;
    top:130px;
    font-size:15px;
    color:#000000;
    width: 100%;
    padding:10px 10px;
    /*height: 84px;/**/
    overflow: hidden;
    text-overflow: ellipsis;
    /*font-style: italic;*/
}
@media screen and (max-width: 767px) {
    .problemsCarousel{
        height:180px;
    }
    .problemCardPhoto{
        width:200px;
        height:100px;
    }
    .problemCardTypeDescr{
        top:100px;
    }
    .panel-title{
        font-size: 13px;
    }
    
}
.problemCardTypeStatus{
    position: absolute;
    right:10px;
    top:70px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
        width: 100%;
    height: 50px;
    transition: all 0.13s ease-out;
    font-size: 13px;
}
.problemCardTypeStatus:hover{
    transition: all 0.13s ease-out;
    transform: scale(1.1);
}
.problemCardTypeAddress{
    position: absolute;
    right:0px;
    bottom:0px;
    font-weight: bold;
    color:#a1a1a1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align:right;
}
.djAccordion .panel, .djAccordion .panel-default, .djAccordion .panel-heading, .djAccordion .panel-body {
    background: transparent !important;
    border:0px !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
}
.djAccordion .panel-body {
    /*border-bottom: 1px solid #e4e4e473 !important;*/
    border-left: 2px solid #e4e4e4 !important;
}    
.djAccordion .panel-heading{
    background: transparent;
    padding:0px;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left:5px;
    border-top: 1px solid #e4e4e4 !important;
    border-left: 2px solid #e4e4e4 !important;
    border-radius: 0px;
}
.djAccordion .input-group, .djAccordion .input-group-addon{
    background: #f7f7f7;
    border:0px !important;
    padding: 3px;
}
.djAccordion .panel-title{
    text-align:left;
    color: #33856b;
    display: flex;
    font-weight: bold;
}
.djAccordion .panel-title a{
    flex-grow: 1;
}
.cityOptAccordion .panel-group{
    margin-bottom: 0px;
}
.cityOptAccordion .panel-heading{
    padding:2px;
    border:0px;
}
.cityOptAccordion .panel-body{
    padding:15px;
    box-shadow: inset 1px 2px 7px 0px #a0a0a061;
}
.cityOptAccordion .panel-default {
        margin: 0px !important;
    border:0px !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
}
.cityOptAccordion .panel-title{
    text-align: left;
    padding-left: 15px;
    font-weight: bold;
}
.cityOptMicrohint{
    max-width:200px;
    font-size:10px;
}

#meterChartFineffect{
    visibility: hidden; position:absolute;    right: 5px;
    bottom: 5px;
    width: 150px;
    height: auto;
    padding: 5px;
    background: #ffff00;
    border-radius: 5px;
    display: flex;
        flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;    
}
#meterChartFineffect span{
    margin:5px;
}

.covidSendCheckbox{
    margin-right: 5px !important;
}

.highlightChat{
    cursor:help;
    border-bottom:1px dotted #ffffff55;
}
.highlightChat:hover{
    border-bottom:1px dotted #ffffff;
}
.urlDecorator{
    background:#dddddd;
    padding:5px 20px 3px 5px;
    height:24px;
    border-radius:12px 0px 0px 12px;
    color:#000000;
    font-size:11px;
}
.urlDecorator.uDright{
    border-radius:0px 12px 12px 0px;
    padding:5px 5px 3px 15px;
    position: relative;
    display: inline-grid;
}
.ui-autocomplete-row-problems{
    display:flex; 
    align-items:center;
    color:#100202 !important;
}
.ui-autocomplete-row-problems img{
    width:35px;
    height:35px;
    border-radius:9px;
    padding: 0px !important;
}
.ui-autocomplete-row-problems>div{
    display:flex; 
    flex-direction: column;
    font-size: 15px;
}
.ui-autocomplete-row-problems span{
    font-size:13px;
}

.ui-autocomplete-row-globalsearch{
    display:flex; 
    align-items:center;
}
.ui-autocomplete-row-globalsearch img{
    width:35px;
    height:35px;
    border-radius:9px;
    padding: 0px !important;
}
.ui-autocomplete-row-globalsearch>div{
    display:flex; 
    align-items: center;
    font-size: 15px;
}
.ui-autocomplete-row-globalsearch span{
    font-size:11px;
}
.ui-autocomplete-row-disabled{
    opacity:0.5;
    pointer-events: none;
}

.enjoyhint_next_btn, .enjoyhint_prev_btn, .enjoyhint_skip_btn{
    min-width: 135px !important;
    border-radius: 5px !important;
    background: #33856b !important;
    color: #ffffff !important;
}
.cityEditorServerCol{
    display: inline-flex;
}
.cityEditorUpgrader{
    width:750px; height: 50px;background: #33856b78;border: 1px solid gray;
    display:none; 
}

.cameraThumbPic{
    width:100%; 
    height:auto; 
    min-height:60px; 
    border-radius:3px;
}
.cameraPlayer{
    background:#000000;
    position: absolute !important;
    top:130px;/*90+40 тайтл на выносе*/
    width: 800px;
    height: auto;
    box-shadow: 2px 3px 2px 0px #808080;
}
.cameraPlayerHLS{
    /*position: absolute;top:40px;bottom: 0px;*/
    width:100%;
    height: 100%;/*for videojs*/
    background:#000033;
}
.cameraPlayerTop{
    display:flex; justify-content: space-between; align-items: center; padding:7px; height:40px; background:#33856b;color: #ffffff;
    position: absolute;
    top:0px;
    width:100%;
    transform: translateY(-40px);
    box-shadow: 2px 0px 2px 0px #808080;
}
.cameraPlayerTop .btn-link {
    color:#ffffff;
    font-size: 12px;
    padding: 7px;
}
.cameraPlayerTitle{
    font-size:14px;
}
.camerasPlayerBottom{
    position:absolute; 
    bottom:0px; 
    width:100%; 
    background:#00000055; 
    font-size: 14px;
    opacity:0.85;
    display: flex; flex-direction: column;
    color: #ffffff;
    transition: all 0.3s ease-out;
}
.camerasPlayerBottom:hover{
    opacity:1;
    background:#000000; 
    transition: all 0.3s ease-out;
}
.camerasPlayerDropdown>a, .camerasPlayerDropdown>a:hover{
    color: #ffffff !important;
}
.camerasPlayerDropdown ul.dropdown-menu {
    bottom: 33px;top: inherit;left: 40%;
}
.cameraPlayer[data-collapsed="1"]{
    /**программно width:300px !important;*/
    top:100vh !important;
    height:0px !important;
    z-index: 1;
}
.cameraPlayer[data-collapsed="1"] .cameraPlayerHLS{
    display:none;
}
.cameraPlayer[data-collapsed="1"] .camerasPlayerBottom{
    display:none;
}
.cameraPlayer[data-collapsed="1"] .cameraPlayerTitle{
    font-size:11px;
}
.cameraPlayer[data-collapsed="1"] .btn{
    font-size: 10px;
    padding: 4px;
}
.camerasPlayerLink>*, .camerasPlayerLink>*:hover{
    margin:3px 15px;
    text-transform: uppercase;
    font-size:12px;
    color:#ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.camerasShots>img{
    width:30px;
    height:30px;
    object-fit: cover;
}
.socBtn{
    width: 40px;
    height:40px;
    border-radius: 5px;
    font-size: 25px;
        background: #ffffff;
        color: #333333;
        position: initial;
    display: flex;
    align-items: center;
    justify-content: center;
        margin: 0px 10px;
    transition: all 0.3s;
}
.socBtn:hover{
    box-shadow: 0px 0px 9px 1px #3c3c3caa;
    transition: all 0.3s;
}
.socBtn:active{
    box-shadow: 0px 0px 1px #3c3c3caa;
}
@media screen and (max-width: 767px) {
    .socBtn{
        margin: 0px 3px;
    }
}

#personalOptionsAccordion .form-control{
    text-align: center;
    width: 300px;
    float: right;
    outline: none;
    border: none;
}
#personalOptionNonpublic{
    width: 0px;
    opacity: 0; /*This is the part tht actually hides it*/
}
#personalOptionNonpublic + span{
    cursor:pointer;
    color:#008800;
}
#personalOptionNonpublic + span>i:nth-child(2){
    display: none;
}
#personalOptionNonpublic:checked + span>i:nth-child(1){
    display: none;
}
#personalOptionNonpublic:checked + span>i:nth-child(2){
    display: inherit;
    color:#555555;
}






.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.br-widget{
    min-width: max-content;
}
.taskmanagerMapOptsMinilentaItem{
    flex: auto; display:flex; margin:5px; font-size:12px;
    /*max-width: 400px;*/ 
    cursor:pointer;
}
.taskmanagerMapOptsMinilentaItem:hover{
    background:#f1f1f1;
}

.pac-container{
    z-index: 9999;
}

.zoomablePlacemark{
    display:flex; 
    justify-content:center; 
    align-items:center; 
    overflow:hidden; 
    position:relative;
    cursor:pointer; 
    border-radius:50%;
    border: 1px solid #000000;
    background: #ffffff;
    color:#000000;
    font-size: 12px;
    transition: all 0.3s ease-out;
}

select, option {
    text-align:left;   
}



.joined2task{
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-right: 15px;
    margin-left: -15px;
}
.joined2task img{
    width:25px;
    height:25px;
    border-radius:50%;
        margin-right: -10px;
    border: 1px solid #d3d3d3;
}


.newWindowSign{
    font-size: 8px;color: blue;transform: translateY(-5px);
}

.emailEditorMyMayorEmail {
    height: auto; display:flex; flex-wrap: wrap;
}
.emailEditorMyMayorEmail:empty {
    display: none;
}
.emailEditorMyMayorEmailItem{
    font-size:14px;
    background:#8282ff;
    color:#ffffff;
    border-radius:5px;
    padding: 0px 7px;
        margin: 0px 10px 5px 0px;
        display:none;
        /*max-width: 175px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
}
.emailEditorMyMayorEmailItem .glyphicon{
    cursor:pointer;
        font-size: 12px;
    margin: 3px 0px 0px 5px;
    opacity:0.5;
}
.emailEditorMyMayorEmailItem .glyphicon:hover{
    opacity:1;
}