.board-main {
   display: flex;
   flex: 1 0 auto;
   min-height: 100vh;
}

.board-left {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   padding-left: 15px;
   padding-right: 15px;
   width: 100%; // ie fix
   min-height: 100vh;

   .panel-heading {
      .icon {
         font-size: 20px;
      }

      h3 {
         margin: 3px 0 0;
         font-weight: 100;
         font-size: 22px;
      }
   }

   .has-icon {
      display: flex;
      align-items: center;
      margin-top: 0;

      .fc {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         flex-grow: 0;
         width: 43px;
         height: 43px;
      }

      > .fc {
         color: $darkgray-dark;
         background: $gray-background;
         border-radius: $border-radius-base;
         font-size: 24px;
         margin-right: 20px;
      }
   }

   .events {
      display: flex;
      flex-wrap: wrap;
      margin-left: 8px;
   }

   .event {
      position: relative;
      padding-left: 22px;
      text-decoration: underline;
      margin: 0 8px;
      white-space: nowrap;

      .fc {
         position: absolute;
         left: 0;
         top: 50%;
         transform: translateY(-50%);
         font-size: 18px;
         line-height: .8;
      }

      @include haf {
         text-decoration: none;
      }
   }

   .event-critical {
      color: $danger;
   }

   .event-recommended {
      color: $success;
   }

   .event-sync {
      color: #e99132;
   }

   .btn-block {
      @include truncate;

      padding-right: 5px;
      padding-left: 5px;
   }

   .btn-lg {
      display: flex;
      align-items: center;
      white-space: normal;
      font-size: 16px;
      font-weight: 700;
      height: 64px;
      line-height: 1.2;
      margin-bottom: 8px;
      padding: 0 16px;
      text-align: left;

      .fc {
         font-size: 20px;
         margin-right: 16px;
         line-height: .8;
      }
   }

   .nl-login-wrapper {
      position: relative;

      p {
         position: absolute;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
         display: flex;
         align-items: center;
         pointer-events: none;
         white-space: normal;
         height: 64px;
         line-height: 1.2;
         margin-bottom: 8px;
         padding: 0 16px;
         text-align: left;

         a {
            color: inherit;
            font-size: 13px;
            pointer-events: auto;
            text-decoration: underline;

            &:hover {
               text-decoration: none;
            }
         }
      }

      strong {
         display: block;
         font-size: 16px;
         margin-bottom: 2px;
      }

      .fc {
         font-size: 20px;
         margin-right: 16px;
         line-height: .8;
      }
   }

   @media screen and (max-width: 1499px) {
      > .row,
      .panel-body > .row {
         margin-right: -10px;
         margin-left: -10px;

         > * {
            padding-right: 10px;
            padding-left: 10px;
         }
      }
   }
}

.customer-care {
   display: flex;
   align-items: center;
   padding-top: 16px;
   padding-bottom: 8px;

   img {
      border-radius: $border-radius-base;
      margin-right: 8px;
   }

   .d-flex {
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
   }

   .help-tip {
      position: relative;
      top: 2px;
      right: 0;
      margin-left: 0;
   }

   p {
      margin: 0;
      padding: 3px 5px;

      &:first-child {
         min-width: calc(50% - 85px / 2 + 10px);
         align-items: center;
      }

      &:last-child {
         min-width: 220px;
      }
   }

   .h4 {
      font-size: 16px;
   }

   a {
      margin-left: 5px;
      text-decoration: underline;

      &:hover {
         text-decoration: none;
      }
   }
}