@import "styles/base.scss";

.pass-fail-container {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    .label {
      min-width: 125px;
    }
  }
  
    .pass-fail {
      font-weight: 800;
      display: flex;
      flex-direction: row;
    }
    
    .ok {
      color: $green;
    }
  
    .error {
      color: $red;
    }
  
    .health-check-icon {
      height: 100%; 
      margin-right: 8px
    }
  
    .health-check-text {
      height: 100%;
      margin-top: 4px;
  }
  
  .health-check-text-error {
    font-weight: 400;
  }
  
  .play-audio {
    display: flex;
    flex-direction: row;
    .play {
      color: $blue;
    }
  }
  .type-area:hover {
    .incident-yes {
      color: $blue;
      cursor: pointer;
      transition: color 0.2s ease-in-out;
    }
  }
  
  .play-now {
    margin-top: 2px;
    margin-left: 6px;
  }
  
  .type-area {
    .incident-yes {
      margin-right: 10px;
    }
  }
  
  .line-type {
  
    &.first {
      margin-bottom: 10px;
    }
  
    p {
      font-size: 13px;
      font-weight: bold;
      text-transform: uppercase;
      color: #002C5A;
    }
  }

  .allData-row {
    width: 100%;
  }


  .col {
        vertical-align: middle;
        display: inline-block;
        margin: 10px 0;
        color: $dark-gray;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 1px;
          background: $gray;
        }
        &:first-child {
          .col-holder {
            padding: 0;
          }
        }
        &:last-child {
          &:after {
            display: none;
          }
        }

        .col-holder {
                padding: 0 10px 0 20px;
                display: flex;
                align-items: center;
                text-align: left;
                &.vertical {
                  display: block;
                }
              }
      }
    
  // // TODO: Clean up!!

  // .open-close {
  //   position: relative;
  //   padding: 0 0 0 15px;
  //   margin: 0 0 10px;
  
  //   &.active {
  //     .opener {
  //       .close {
  //         -webkit-transform: rotate(45deg);
  //         transform: rotate(45deg);
  //       }
  //     }
  //   }
  
  //   .opener {
  //     display: block;
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //     bottom: 0;
  //     width: 15px;
  //     .close {
  //       position: absolute;
  //       top: 50%;
  //       left: 50%;
  //       -webkit-transform: translate(-50%, -50%);
  //       transform: translate(-50%, -50%);
  //       display: block;
  //       transition: transform .35s;
  //       opacity: 1;
  //       &:before,
  //       &:after {
  //         content: '';
  //         position: absolute;
  //         top: 50%;
  //         left: 50%;
  //         -webkit-transform: translate(-50%, -50%);
  //         transform: translate(-50%, -50%);
  //         background: $white;
  //       }
  //       &:before {
  //         height: 1px;
  //         width: 21px;
  //       }
  //       &:after {
  //         height: 21px;
  //         width: 1px;
  //       }
  //     }
  //   }
  
  //   .columns {
  //     background: $white;
  //     margin: 0;
  //     padding: 9px 0;
  //     border: 1px solid $grey-border;
  //     border-left: none;
  //     position: relative;

  //     @include media('<tablet') {
  //       &:after {
  //         top: 90px;
  //       }
  //     }
  //     @include media('<phone') {
  //       &:after {
  //       }
  //     }
  //   }
  
  //   .col {
  //     vertical-align: middle;
  //     display: inline-block;
  //     // margin: 0 -4px 0 0;
  //     color: $dark-gray;
  //     position: relative;
  //     padding: 0;
  //     @include media('<tablet') {
  //       // &:nth-child(2n + 1) {
          
  //       // }
  //       &:after {
  //         content: '';
  //         position: absolute;
  //         left: 0;
  //         right: 0;
  //         bottom: 0;
  //         height: 1px;
  //         background: $gray;
  //       }
  //     }
  //     &:after {
  //       content: '';
  //       position: absolute;
  //       right: 0;
  //       top: 0;
  //       bottom: 0;
  //       width: 1px;
  //       background: $gray;
  //     }
  //     &:last-child {
  //       &:after {
  //         display: none;
  //       }
  //     }
  //     &.edit{
  //       .col-holder{
  //         justify-content: center;
  //         .type-area{
  //           a{
  //             i{
  //               font-size: 3rem;
  //               @include media('<tablet') {
  //                 font-size: 1.5rem;
  //               }
  //               @include media('<phone') {
  //                 font-size: 1.5rem;
  //               }
  //             }
  //           }
  //         }
  //       }
  //     }
  //     .col-holder {
  //       padding: 0 10px 0 20px;
  //       display: flex;
  //       align-items: center;
  //       @include v-align(54px, top);
  //       text-align: left;
  //       &:after {
  //         @include media('<phone') {
  //           min-height: 45px;
  //         }
  //       }
  //       &.vertical {
  //         display: block;
  //       }
  //     }
  //   }
  
  //   .type-area {
  //     padding: 10px 0;
  //     font-size: 16px;
  //     line-height: 18px;
  //     color: #7d94ab;
  //     font-weight: 400;
  //     // text-overflow: ellipsis;
  //     // overflow: hidden;
  //     // word-wrap: break-word;
  //     overflow-wrap: break-word;
  //     hyphens: auto;
  //     @include media('<tablet') {
  //       font-size: 14px;
  //       line-height: 16px;
  //     }
  //     .alt {
  //       display: block;
  //       @include media('<desktop') {
  //         display: inline-block;
  //         vertical-align: top;
  //       }
  //     }
  //   }
  
  //   .subtitle {
  //     font: bold 18px/20px $font-family-base;
  //     color: $blue;
  //     display: block;
  //     @include media('<tablet') {
  //       font: bold 16px/18px $font-family-base;
  //     }
  //   }
  
  //   .title-holder {
  //     color: $dark-gray;
  //     overflow: hidden;
  //     background: $grey-border;
  //     border-bottom: 1px solid $grey-border;
  //     padding: 16px 30px;
  //     position: relative;
  //     &:after {
  //       content: '';
  //       position: absolute;
  //       bottom: 0;
  //       left: 30px;
  //       right: 30px;
  //       height: 1px;
  //       background: $white;
  //     }
  //     @include media('<desktop') {
  //       padding: 10px 16px;
  //       &:after {
  //         left: 15px;
  //         right: 15px;
  //       }
  //     }
  
  //     .title-holder-line {
  //       margin: 0;
  
  //       strong {
  //         font-size: 12px;
  //         color: $headers-color;
  //         font-weight: 700;
  //       }
  //     }
  
  //     &:last-child:after {
  //       content: none;
  //     }
  //   }
  
  //   .opener {
  //     background: $blue;
  //   }
  //   &.none {
  //     .opener {
  //       background: $medium-gray;
  //     }
  //   }
  // }