@import 'colors.scss';
@import 'variables.scss';

body {
  font-family: $body-font-family;
  color: $body-font-color;
  height: 100%;
}

/*FLEXBOX RESPONSIVE TABLE*/
@mixin flex-table-list{
  .table {
      display: flex;
      flex-flow: column nowrap;
      flex: 1 1 auto;
    .tr.thead{
      width:99%;
       a.active {
        text-decoration: underline;
        color: #00437B;
        background-color: transparent !important;
      }
      &:hover{
        background-color: transparent !important;
        cursor: default;
      }
    }
    .tr {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      height: 50px;
      &:hover{
        background-color: #CFE1EE;
        cursor: pointer;
      }
      .td {
        flex-flow: row nowrap;
        flex-grow: 1;  
        flex-basis: 0;
        padding: 0 10px;
        word-break: break-word;
        min-width: 20px;
        width:100px;
        border-bottom: 1px solid #E2E2E7;
        display: flex;
        align-items: center;
        &.th {
          font-weight: 600;
          justify-content: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          padding:12px 10px 13px;
            .wrapHeaderItems{
                width:100%;
              }
              .sort-arrow, .sort-head{                         
                vertical-align: middle;
              }
              .sort-arrow{
                width: 10px;
              }
        }
        .icon-svg {
          width:30px;
          height:30px;
          background:transparent url("@{icon32ScalePath}/icon_solid_release_16-32-64.svg") no-repeat center center;
          background-size: 30px 30px;
          margin-right: 10px;
          flex-shrink: 0;
        }
        .icon-thumbnail {
          width: 29px;
          height: 22px;
          margin-right: 10px;
          text-align:center;
          flex-shrink: 0;
          img{
            height: auto;
            width: auto;
            max-width: 29px;
            max-height: 22px;
          }
        }
        .tc-img-wrap{
            width:32px;
            .tc-img-thumb{
                width:32px;
                height:32px;
                background-color:grey;
                @include border-radius(50%);
                img{
                    padding:0;
                }
            }
        }
        &.field-hamburger{
          width:50px;
          flex: 0 0 auto;
          .dropdown-toggle{
            box-shadow: none;
          }
        }
        &.wrapCheckbox{
          width:57px;
          flex:0 0 auto;
          &.td{
            padding:0 0 0 10px;
          }
        }
        &.field-thumb{
          width:100px;
          flex: 0 0 auto;
          padding: 10px;
        }
        &.width0{
          max-width: 100px;
        }
        &.width1{
          flex-grow: 1;
        }
        &.width2{
          flex-grow: 2;
        }
        &.width3{
          flex-grow: 3;
        }
        &.text-center{
          justify-content: center;
        }
        &.no-padding-x{
          padding-left: 0 !important;
          padding-right: 0 !important;
        }      
      } 
    }
    &.border{
      border:1px solid #E2E2E7;
    }
    .space-vscroll{
      width: 95%;
    }
  }

}

.tableData {
  @include flex-table-list;  
}

.truncate-auto{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.show{display: block}

.in-block{
  display: inline-block;
}

@mixin truncate-auto{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.text-muted{
    color: #afaec1;
}

.text-bold{
    font-weight: 600;
}

@mixin tc-icon-20{
  width: 20px;
  height: 20px;
  display: block;
}

.tile { 
    padding: 10px 5px;
    cursor: pointer;
    overflow: hidden;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    &:hover {
        background-color: #CFE1EE;
    }
    .status, .checkbox, .thumbnail{
        margin-right: 1rem;
        flex-shrink: 0; 
    }
    .status {
        @include tc-icon-20;
        &.low {
            background: url('../../src/images/LOW.png') no-repeat;
        }
        &.normal {
            background: url('../../src/images/NORMAL.png') no-repeat;
        }
        &.high {
            background: url('../../src/images/HIGH.png') no-repeat;
        }
        &.critical {
            background: url('../../src/images/CRITICAL.png') no-repeat;
        }
    }
    .thumbnail{
     flex-shrink: 0;
     width: 64px;
     height: 64px;
     img{
         width: 100%;
         height: 100%;
     }   
    }
    .details-group{
        line-height: 1.5rem;
        display: flex;
        flex-flow: column wrap;
        overflow: hidden;
        > div{
          @include truncate-auto;
        }
    }
    
    &.profilex{
      .thumbnail{
        @include border-radius(50%);
        border: 5px solid #ccc;
      }
     &:hover {
        border: 1px solid #009AD9;
    }
    }    
}