input[type="checkbox"] {
  width:15px;
  height:15px;
  vertical-align: sub;  /*всі чекбокси були трохи вище, а так врівень з текстом*/
  pointer-events: auto; 
}

.filter-row {         /*обведена стрічка з набором селекторів*/
    margin: 10px; 
    border: 1px solid #bfbebe;
    padding: 6px;
      /* line-height: 50px; */    /*переніс у весь фільтр - для усіх стрічок*/
    border-radius: 4px;
    background-color: #ccccff52;
}


#dzvinVer:hover {
    color:red;
}


.logo {
  left: 50px;
  float: right;

  height: 45px;     /* ВИСОТА МАЛЮНКА ЗАДАЄ ЗСУВ ВСІЄЇ ТАБЛИЦІ ЗВЕРХУ!!!!!!!!*/
  

  /*position: absolute;*/
  /*padding: 0 0 5px 0;*/
}


.left-header{
  position: absolute; /*допомогло поставити після малюнка*/
  left: 50px;
  float: left;
}


.left_sub_header{
  position: absolute;
  top: 34px;
  left: 6px;
  color:white;
  text-shadow: 
    -1px -1px 0 #000000a6, 
     1px -1px 0 #000000a6, 
    -1px 1px 0 #000000a6, 
     1px 1px 0 #000000a6;
}



.dzvin_left_header a {
    color: red;
    text-decoration: none;    
}
.dzvin_left_header a:active  {
    color: red;
    text-decoration: none;    
}

.dzvin_left_header a:visited {
    color: red;
    text-decoration: none;
}

.dzvin_left_header a:hover {
    color: red;
}

.dzvin_left_header a:link {
    color: red;
}


.left_sub_header a {
    color: white;  
}

.left_sub_header a:active  {
    color: white;  
}

.left_sub_header a:visited {
    color: yellow;
    text-decoration: none;
}

.left_sub_header a:hover {
    color: yellow;
}

.left_sub_header a:link {
    color: red;
}







.header_right{
  margin-top: 5px;
  position: absolute; 
  width: 80%;
  /*допомогло поставити після малюнка*/
  right: 35px;
  /*float: right;*/
  display: block;  
  line-height: 20px;       /*Інакше друга стрічка невміщалась знизу*/
}


.company_header {
/*  position: absolute; допомогло поставити після малюнка
  left: 50px;*/
  float: right;
  /*color: lightblue; ПЕРЕНІС*/
  font-size: 16px;
  /*text-transform: uppercase;*/
  text-align: center;
  font-weight: 50;
  font-family: "NautilusPompiliusRegular";
  /*font-family: "RobotoCondensedRegular";*/
  /*padding: 26px 0;*/
  /*letter-spacing: 2px;*/
  
  text-shadow:
        -1px -1px 0 #000,
      1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.dzvin_left_header {
  margin-top: 2px;
  margin-left: 10px;
  float: left;
  /*color: lightblue; ПЕРЕНІС*/
  font-size: 24px;
  /*text-transform: uppercase;*/
  text-align: center;
  /*font-family: "RobotoCondensedRegular";*/
  font-weight: bold;
  //padding: 20px 0;
  /*letter-spacing: 2px;*/

                          /*чорна обводка*/
/*  text-shadow:                   
        -1px -1px 0 #000,
      1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;  */

  text-shadow:
        -1px -1px 0 white,
      1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white;
}

.user {
  max-width: 80%;  /*довгі посади - ховатиме довгу в другу стрічку*/
  float: right;
  color: white;
  font-size: 14px;
  text-align: right;
  /*font-family: "RobotoCondensedRegular";*/
  font-weight: normal;
  text-shadow:
        -1px -1px 0 #000,
      1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}






.header-button {
    /*float:right;*/
    top:15px;
    height: 30px;
    width: 30px;
    margin-left: 2px;
    vertical-align: top;
    /*background-color: Transparent;*/
    /*background-color: White;*/                /*НЕ РОБИТЬ  -  Лише inline*/
    /*opacity: 0.5;*/
    outline:none;

    border-bottom: none;
    cursor:pointer;
    padding: 0;

    border: 1px solid gray;
    border-radius: 3px 3px 3px 3px;
}

.header-button:hover {
    background-color: white;
    opacity: 0.8;
}
.header-button-pressed {
    background-color: white;
    /*opacity: 1.0;*/
}



.header-tab {               /*такі як header-button лише більші і як таби*/
    /*float:right;*/
    top:15px;
    height: 42px;
    width: 48px;         /* 60       i mainTableButtonContainer - 62  - на 4 кнопки */
    margin-left: 2px;
    vertical-align: top;

    background-color: #dcd8d8;
    opacity: 1;
    outline:none;

    border-bottom: none;
    cursor:pointer;
    padding: 0;

    border: 1px solid gray;
    border-radius: 7px 7px 0px 0px;
}

.header-tab:hover {
    background-color: #efefef;
    /*opacity: 0.8;*/
}
.header-tab-pressed {
    background-color: white;
    opacity: 1.0;
}



.evenType-checkbox {
    position: relative;
    top:5px;
    height: 15px;
    width: 15px;

}



.header-tab-eventType-clickZone { 
    position: relative;
    top: 7px;
    left: -3px;
    font-size: 12pt; 
    display: inline-block; 
    width: 130px;
    height: 30px;
    pointer-events: auto;
}


.header-tab-eventType {               /*такі як header-tab лише ширші і крупніше шрифт */
    z-index:2;
    /* position: relative; */
    top:12px;
    /*float:right;*/
    font-size: 12pt;
    width: 165px;
    height: 40px;

    vertical-align: top;
    margin-left: 2px;
    /*background-color: Transparent;*/
    /*background-color: White;*/                /*НЕ РОБИТЬ  -  Лише inline*/
    opacity: 1.0;
    outline:none;
    
    border-bottom: none;
    cursor:pointer;
    padding: 0;
    
    border: 1px solid white;
    border-radius: 7px 7px 0px 0px;
    pointer-events: none;    /* заважало клікати по open чекбоксу із-за іконок статусів зсунутих. Тут додав і в чекбоксі і в табі повернув евенти */
}

.header-tab-eventType:hover {
/*    background-color: white;
    opacity: 0.8;*/
}
.header-tab-eventType-pressed {
    /*background-color: white;*/
    /*opacity: 1.0;*/
}


/*пробував робити для картинок кнопок - не застосовує*/
/*.header-button-image { 
  color: white;
  vertical-align: bottom; 
  size: 32px 32px;
}*/




.header-tab-Mode-tabs { 
  /* z-index:100;   ато чекбокс ламп пролазить :) */
  position: absolute;
  top: -15px;
  padding-left: 7px;
  background-color: #b0abf2e8;
  /* width: 518px;  у кожної своя*/
  height: 56px;
            /* з header-tab-eventType */
  font-size: 16pt;
  margin-left: 2px;
  vertical-align: top;
  /* opacity: 1.0; */
  outline: none;
  cursor: pointer;
  border: 1px solid gray;
  border-radius: 7px 7px 0px 0px;
}



.mode-tab-text { 
    color:white; 
    padding: 10px 24px; 
    font-size: 14pt;
}




.add-new-row {
/*background: red;*/
/*background: url('../img/addNewRow.png') no-repeat center center;*/
background: url('../img/addNewRowGif2.gif') no-repeat center center;
background-size: 20px ;
height: 21px ;
width: 26px ;
opacity: 1;
}



.tabButtons {
  display: inline-flex;
  /*display: inline;*/
    position: absolute;
    right: 0;
    float:right; /* дуже важливо */
    /*background-color:#b3b300;*/     /*коли треба колір панельки кнопок свій*/
    height: 42px;
    /*width:500px;              фіксована ширина панелі*/
}

.userButtons {

    position: absolute;   /*для панелі табів*/
    right: 0px;

    display: inline;
    text-align: right;
    width: 250px;






 /* display: inline-block;*/   /*для панелі2 - фільтру*/
    /*float:right;*/  /* дуже важливо */



    /*margin-top: 10px;    ховаю в рівень з панеллю, щоб не торчали як таби*/
    /*height: 40px;*/

    /*margin-right:255px;*/
    /*background-color:red; */

}


#inlineFilterPanel td input{ /*Компактніші по ширині компоненти фільтра*/
  margin: 0;
}


.parentTask {
  font-weight:bold;
  /*font-style: italic;    */
}


.copyItem {
  background: url('../img/copy.png') no-repeat center left;
}
.subTaskItem {
  background: url('../img/downArrow.png') no-repeat center left;
}
.subTaskMalf {
  background: url('../img/downArrow.png') no-repeat center left;
}
.NAItem {
  background: url('../img/na.png') no-repeat center left;
  /*cursor: default; !important  не робить*/
}



.blink-attention {  /* Рідке мигання - для звернення уваги */
  animation: blinkAttention 10s linear infinite;
}
    @keyframes blinkAttention {
      2%  {color:transparent;opacity: .3;}       /* background-color: transparent; - але замінить рідний фон */
      5% {color:#ff0606;opacity: 1; }      
      3%  {color:transparent;opacity: .3;} 
      90% {color:#ff0606;opacity: 1;}
    }


.blink-task-overdue {
  animation: blinkTaskOverdue 2s linear infinite;
}
    @keyframes blinkTaskOverdue {
      5%  {color:transparent;opacity: .3;} 
      20% {color:#e65100;opacity: 1;}      
      5%  {color:transparent;opacity: .3;} 
      60% {color:black;opacity: 1;}
    }

.blink-malf-overdue {
  animation: blinkMalfOverdue 2s linear infinite;
}
    @keyframes blinkMalfOverdue {
      5%  {color:transparent;opacity: .3;} 
      20% {color:#ad1457;opacity: 1;}      
      5%  {color:transparent;opacity: .3;} 
      60% {color:black;opacity: 1;}
    }

.blink-disc-overdue {
  animation: blinkDiscOverdue 2s linear infinite;
}
    @keyframes blinkDiscOverdue {
      5%  {color:transparent;opacity: .3;} 
      20% {color:#b71c1c;opacity: 1;}      
      5%  {color:transparent;opacity: .3;} 
      60% {color:black;opacity: 1;}
    }



.unusedCells {
  background-color:#f2f2f2; 
  /*background-color:#e5e5e5; тимніше гірше*/
  width:100%;
  height:100%; 
  padding:0;          
   /*Тут не зміниш - ВИРУБИВ  padding: 1px 2px 2px 1px;   в .slick-cell, .slick-headerrow-column в libs/slickgrid/slick.grid.css*/
   /*.slick-cell {padding-left: 4px; padding-right: 4px;}  - ТАКОЖ ВИРУБИВ   в slick-default-theme.css  - стало краще */
}

.usedCellsPadding {
  padding: 2px 4px 4px 2px;
}



.subTask {
  /*font-weight:bold;*/
  font-style: italic;
}


                        /*BY   https://www.materialpalette.com/colors*/
.task-new { 
  background-color: #fffad5;
}
.task { 
  background-color: #fff9c4;
    /*color:green;*/
}
.task-done {
  background-color: #fff59d;
}
.task-overdue {
  /*background-color: #fff9c4; Як звичайна, не важливо чи виконана, якщо не в строк*/
  color:#e65100;
}
.task-closed {
    /* background-color: #9e9e9e; */
    background-color: #b6b17b;
}
.task-canceled {
    /* background-color: #eeeeee; */
    background-color: #e0deb6;
    color:gray;
}
.task-controlled {
  background-color: #e0e0e0;
}


.malf-new {
  background-color: #eaf8fe;
}
.malf {
  background-color: #e1f5fe;
}
.malf-done {
  background-color: #b3e5fc;
}
.malf-overdue {
  /*background-color: #e1f5fe;*/
  color:#ad1457;
}
.malf-closed {
    /* background-color: #90a4ae; */
    background-color: #86b1c5;
}
.malf-canceled {
    /* background-color: #cfd8dc; */
    background-color: #bdd4df;
    color:gray;
}
.malf-controlled {
  background-color: #b0bec5;
}


.disc-new {
  background-color: #fff1f3;
}
.disc {                  /*discrepancy*/
  background-color: #ffebee;
}
.disc-done {
  background-color: #ffcdd2;
}
.disc-overdue {
  /*background-color: #ffebee;*/
  color:#b71c1c;
}
.disc-closed {
  background-color: #bcaaa4;
}
.disc-canceled {
  background-color: #d7ccc8;
  color:gray;
}
.disc-controlled {
  background-color: #a1887f;
}

/*.disc-malf-task-controlled {
  color:white;
}*/

.as-tab {
  margin-left: 30px;
  background-color: violet;
}


/*не викор*/
.testClass { 
  border-style: double; !important
  /*background-color: black; !important*/
  border-color: black; !important
  /*color: white;*/
}



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

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



.yellowBackground { 
  background-color: lightyellow;
}

.redBackground { 
  background-color: red;
  border-left: solid 1px black;
  border-right: solid 1px black;
    /*color:green;*/
}
.leftBorder { 
  border-left: solid 1px black;
}
.rightBorder { 
  border-right: solid 1px black;
}
.topBorder {   /*Всі бордери не роблять для стрічок. Для стовпців робить */
  border-top: solid 3px black;
}

.ui-datepicker-trigger{  /*картинка календарика*/
  position: absolute; 
  right: 17px; 
  top: 11px;
}

          /*показники критичності (багато)*/

/*pink темніше(3 не 2)*/
.indication_4 { 
  background-color: #f48fb1;
}
/*red*/
.indication_3 { 
  background-color: #ffcdd2;
}
/*orange*/
.indication_2 { 
  background-color: #ffe0b2;
}

/*yellow*/
.indication_1 { 
  background-color: #fff9c4;
}
                    /*В межах*/

/*lightgreen*/
.indication0 { 
  background-color: #dcedc8;
}
    /*показники недостатності (мало)*/
/*cyan*/
.indication-1 { 
  background-color: #b2ebf2;
}
/*blue*/
.indication-2 { 
  background-color: #bbdefb;
}
/*indigo*/
.indication-3 { 
  background-color: #c5cae9;
}
/*deep purple*/
.indication-4 { 
  background-color: #c5cae9;
}






#contextMenu {
    background: lightyellow;
    border: 1px solid gray;
    padding: 2px;
    display: inline-block;
    min-width: 100px;
    -moz-box-shadow: 2px 2px 2px silver;
    -webkit-box-shadow: 2px 2px 2px silver;
    /*z-index: 99999; є вже в нтмл*/ 
}
#contextMenu li {
    padding: 4px 4px 4px 20px;
    list-style: none;
    cursor: pointer;
    /*background: url("../images/arrow_rigt_peppermint.png") no-repeat center left;*/
}
#contextMenu li:hover {
  background-color: white;
}





.columnPickertask {
    font-weight:bold;      
    background-color:#ffffcc;     
}

.columnPickermalf {
    background-color:#deeff5;     
}

.columnPickerdisc {
    background-color:#ffe5ea;     
}






.color0 {
  background-color: #C9DECB;
}
.color1 {
  background-color: #FFCC99;
}
.color2 {
  background-color: #FFCCCC;
}
.color3 {
  background-color: #FFCCFF;
}
.color4 {
  background-color: #CCCCFF;
}
.color5 {
  background-color: #CCFFFF;
}
.color6 {
  background-color: #CCFF99;
}
.color7 {
  background-color: #FFFFCC;
}
.color8 {
  background-color: #DAAC96;
}
.color9 {
  background-color: #C0E0DA;
}


.color10 {                      /*Копії перших*/
  background-color: #C9DECB;
}
.color11 {
  background-color: #FFCC99;
}
.color12 {
  background-color: #FFCCCC;
}
.color13 {
  background-color: #FFCCFF;
}
.color14 {
  background-color: #CCCCFF;
}
.color15 {
  background-color: #CCFFFF;
}
.color16 {
  background-color: #CCFF99;
}
.color17 {
  background-color: #FFFFCC;
}
.color18 {
  background-color: #DAAC96;
}
.color19 {
  background-color: #C0E0DA;
}




.color20 {                         /*На всякий*/
  background-color: #C9DECB;
}
.color21 {
  background-color: #FFCC99;
}
.color22 {
  background-color: #FFCCCC;
}
.color23 {
  background-color: #FFCCFF;
}
.color24 {
  background-color: #CCCCFF;
}
.color25 {
  background-color: #CCFFFF;
}
.color26 {
  background-color: #CCFF99;
}
.color27 {
  background-color: #FFFFCC;
}
.color28 {
  background-color: #DAAC96;
}
.color29 {
  background-color: #C0E0DA;
}





img.clickableImage{      /*В едіторі файлів*/
       cursor: pointer;
       margin: 3px; 
       height: 100px;   /*При видалені Телеграмовські картинки були великими*/
    }


/


















/*SLIDER !!!!!!!!!!!!!!!*/



input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
  padding:0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;                                              /*товщина полоси*/
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  background: darkgray;                                     /*колір (неактивної) полоси*/
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  border: 1px solid #000000;
  height: 18px;                                             /*розміри повзунка*/
  width: 10px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;                                         /*верт позиція повзунка*/
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: white;                                        /*колір (активної) полоси*/
}
input[type=range]::-moz-range-track {                                                         /*Нижче - те ж для мозили файерфокса*/
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  border: 1px solid #000000;
  height: 18px;
  width: 10px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  border: 1px solid #000000;
  height: 18px;
  width: 12px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}