/*  General Layout  */

#wrap {
  background: var(--sp-light-gray);
}

#content {
  h2 {
    font-size: 1.7rem;
    font-family: var(--base-font);
  }
}

.container-fluid {
  max-width: 1200px;
}

.dropdown-menu {
  z-index: 100001;
}

/*  Text  */
#toast-container strong {
  text-transform: capitalize;
  color: inherit;
}

/*  Dashboard  */
#dashboard {
  .carousel-inner {
    overflow: visible;
  }

  .carousel-control.left {
    left: -22px;
    color: #FFF;
  }

  .carousel-control.right {
    right: -22px;
    color: #FFF;
  }

  .dashboard-container {
    border: 1px solid rgba(204, 204, 204, 0.46);
    background: #fff;
    padding: 1.5rem;
    position: relative;
    border-radius: var(--border-rounded);

    table {
      margin-bottom: 0;

      tr.header th {
        text-align: center;
      }

      th,
      td {
        padding: 3px 10px;
        font-weight: normal;
        border-top: none;
      }

      td {
        text-align: center;
      }
    }

  }

  #salesAndProfitGraph svg {
    overflow: visible;

    h3 {
      color: #333;
    }
  }

  #expenses-container > .isloading-overlay,
  #inbound-inventory-count-container > .isloading-overlay,
  #inventory-value-container > .isloading-overlay,
  #settlement-statements-container > .isloading-overlay,
  #settlement-report-container > .isloading-overlay {
    width: 100% !important;
    height: 100% !important;
  }

  #settlement-report-container.dashboard-container {
    height: 250px;
    overflow: auto;

    table {
      margin-top: 15px;

      td {
        border-top: none;
        padding: 3px;
        text-align: left;
      }
    }
  }

  .more-info {
    border-bottom: 1px dotted #999;
    line-height: 1.2em;
  }

  .more-info:hover {
    cursor: help;
  }

  .label-info {
    background: rgba(0, 0, 0, 0.85);
    display: none;
    position: absolute;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
    max-width: 280px;
    z-index: 6;
    width: 100%;

    &:hover {
      cursor: auto;
    }

    p,
    strong {
      color: #fff;
    }

    strong {
      line-height: 2em;
    }

    p {
      font-weight: 400;
      line-height: 1.2em;
      margin-bottom: 10px;
    }
  }

  .label-info.top {
    top: 115px;
  }

  .neg,
  #settlement-report-container .active {
    color: #ee3124;
  }

  .neg::before {
    content: '(';
  }

  .neg::after {
    content: ')';
  }

  .pos {
    color: green;
  }

  .checkbox.disabled {
    color: #999;
  }

  span.flag,
  span.flag i {
    display: inline-block;
    width: 20px;
    height: 11px;
    background-repeat: no-repeat;
  }

  span.flag {
    padding-left: 2px;
  }

  @-moz-document url-prefix() {
    #settlement-report-container.dashboard-container {
      height: 255px;
    }
  }
}

#changelog {
  margin-block: 2rem;

  .changelog {
    border: 1px solid rgba(204, 204, 204, 0.46);
    border-radius: var(--border-rounded);
    background: #fff;
    padding: 1.5rem;

    h3 {
      margin-top: 1.5rem;
      font-size: 1.6rem;
      font-weight: normal;
    }
  }
}

/*  Max-767  */
@media (max-width: 767px) {
  #fb-root {
    display: none;
  }

  .fb_iframe_widget,
  .fb_iframe_widget span,
  .fb_iframe_widget span iframe[style] {
    width: 100% !important;
  }

  #dashboard {
    #dashboard-carousel {
      margin-bottom: 0;

      .item .dashboard-container {
        margin-top: 2rem;
      }
    }

    #salesAndProfitGraph svg {
      height: 250px;
    }

    .label-info {
      position: static;
      width: 100%;
      border-radius: 0;
    }
  }
}

/*  Min-768  */
@media (min-width: 768px) {
  .fb-like-box {
    float: right;
  }
 
  #dashboard {
    margin-block: 2rem;
    height: 378px;

    #dashboard-carousel {
      height: 320px;
    }

    #dashboard > .span6 {
      height: 300px;
    }

    #salesAndProfitGraph svg {
      height: 300px;
    }
  }
}