$hoverColor:var(--studiesTableHover);
$pink:var(--pink);

.j4care_dynamic_table{
  float: left;
  width: 100%;
  margin-bottom: 40px;
  .th{
    width: 100%;
    float: left;
    background: var(--backgroundColor);
    color:white;
    -webkit-box-shadow:    5px 3px 13px 0px rgba(68, 68, 68, 0.93) ;
    -moz-box-shadow:    5px 3px 13px 0px rgba(68, 68, 68, 0.93) ;
    box-shadow:    5px 3px 13px 0px rgba(68, 68, 68, 0.93) ;
    margin-bottom: 1px;
    &.studies, &.uwl, &.mpps{
      padding-left: 13px;
    }
    &.series{
      padding-left: 33px;
    }
    &.instance{
      padding-left: 50px;
    }
    &.diff{
      padding-left: 42px;
    }
    .td{
      float: left;
      //border-right: 1px solid white;
      padding: 5px 7px;
      &:last-child{
        border:none;
      }
      &.empty_td{
        //border-right: none;
      }
      &.not_empty_td{
        border-left: 1px solid white;
        overflow: hidden;
        max-height: 30px;
      }
      &.value.active, &.pipe.active{
        background: $pink;
        color: white;
      }
    }
  }
  .tr{
    width: 100%;
    float: left;
    .td{
      float: left;
      padding: 5px 7px;
      overflow: hidden;
      height: 30px;
      &.actions,&.actions-menu{
        border-right: none;
      }
      &.value, &.pipe{
        border-right: 1px solid rgba(0, 0, 0, 0.19);
      }
      &.value:first-child{
        border-left: 1px solid rgba(0, 0, 0, 0.19);
      }
      &.border-left{
        border-left: 1px solid rgba(0, 0, 0, 0.19);
      }
      &.border-right{
        border-right: 1px solid rgba(0, 0, 0, 0.19);
      }
      &:last-child{
        border:none;
      }
      a{
        .glyphicon{
          position: static;
        }
      }
      &.active, &.value:hover, &.pipe:hover{
        background: $pink;
        color: white;
      }

      .actions_menu{
        background: white;
        display: block;
        max-width: 90px;
        z-index: 9999;
        position: fixed;
        -webkit-box-shadow: 2px 2px 2px #444;
        -moz-box-shadow: 2px 2px 2px #444;
        box-shadow: 2px 2px 2px #444;
        margin-top: 40px;
        ul{
          list-style: none;
          padding: 0;
          li{
            display: block;
            width: 30px;
            height: 25px;
            float: left;
            a{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      &.actions-menu,&.actions{
        .dicom_table_buttons{
          text-align: center;
          float: left;
        }
      }
      &.index{
        text-align: center;

      }
      .dicom_table_buttons{
        width: 25px;
        display: block;
        text-align: center;
        min-width: 25px;
        height: 20px;
        line-height: 12px;
        padding: 0;
      }
      .red_border{
        border-bottom: 1px solid red;
      }
      &.big_field:hover{
        position: relative;
        overflow: visible;
        animation: 0.5s height ease-in-out;
        span{
          height: auto;
          width:100%;
          position: absolute;
          left: 0;
          top: 0;
          display: block;
          background: #6b4470;
          padding: 5px 7px;
          color:white;
          box-shadow: 0px 0px 7px 2px #000000c9;
        }
      }
    }

  }
  .table_item{
    float: left;
    width: 100%;
    background:white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.46);
    margin-bottom: 1px;
    &.patient_block{
      -webkit-box-shadow:  4px 3px 6px rgba(68, 68, 68, 0.57);
      -moz-box-shadow:  4px 3px 6px rgba(68, 68, 68, 0.57);
      box-shadow:  4px 3px 6px rgba(68, 68, 68, 0.57);
      z-index: 4;
      position: relative;
      &.selected{
        background:var(--tableSelectColor);
      }
    }
    &.study_block, &.mwl_block, &.diff_block{
      -webkit-box-shadow:   2px 3px 10px 0px rgba(68, 68, 68, 0.7);
      -moz-box-shadow:   2px 3px 10px 0px rgba(68, 68, 68, 0.7);
      box-shadow:   2px 3px 10px 0px rgba(68, 68, 68, 0.7);
      margin-left: 2px;
      width: calc(100% - 2px);
      background: rgba(235, 235, 235, 0.9);
      padding-left: 13px;
      position: relative;
      z-index: 3;
      &.selected{
        background:rgba(67, 139, 173, 0.78);
      }
    }
    &.diff_block{
      padding-left: 42px;
    }
    &.series_block{
      -webkit-box-shadow:  1px 1px 8px 0px rgba(68, 68, 68, 0.7);
      -moz-box-shadow:  1px 1px 8px 0px rgba(68, 68, 68, 0.7);
      box-shadow:  1px 1px 8px 0px rgba(68, 68, 68, 0.7);
      margin-left: 4px;
      width: calc(100% - 4px);
      background: rgba(215, 215, 215, 0.8);
      padding-left: 30px;
      position: relative;
      z-index: 2;
      &.selected{
        background:rgba(67, 139, 173, 0.68);
      }

    }
    &.instance_block{
      -webkit-box-shadow:  1px 0px 8px 0px rgba(68, 68, 68, 0.7);
      -moz-box-shadow:  1px 0px 8px 0px rgba(68, 68, 68, 0.7);
      box-shadow:  1px 0px 8px 0px rgba(68, 68, 68, 0.7);
      margin-left: 6px;
      width: calc(100% - 6px);
      background: rgba(195, 195, 195, 0.7);
      padding-left: 45px;
      position: relative;
      z-index: 1;
      &.selected{
        background:rgba(67, 139, 173, 0.58);
      }

    }
  }
  .td_with_centered_child{
    text-align: center;
    width: 100%;
    .centered_child{
      display: inline-block;
      button{
        color: rgba(28, 36, 43, 0.85);
        &:hover{
          color:#1c242b;
          cursor: pointer;
        }
      }
      button[disabled], button[disabled]:hover{
        color: rgba(28, 36, 43, 0.6);
      }
    }
  }
}
