/*@import "bootstrap";*/
@import "design-sys/bootstrap.min.css" layer(base);

/* SECTION: SAIL_Recipes.md */
/*--------------------------------------------------
   :: Table Filter
   --------------------------------------------------*/
   .panel {
    border: 1px solid #ddd;
    background-color: #fcfcfc;
  }
  
  .panel .btn-group {
    margin: 0.94rem 0 1.88rem;
  }
  
  .panel .btn-group .btn {
    transition: background-color .3s ease;
  }
  
  .table-filter {
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  
  .table-filter tbody tr:hover {
    cursor: pointer;
    background-color: #eee;
  }
  
  .table-filter tbody tr td {
    padding: 0.63rem;
    vertical-align: middle;
    border-top-color: #eee;
  }
  
  .table-filter tbody tr.selected td {
    background-color: #eee;
  }
  
  .table-filter tr td:first-child {
    width: 2.38rem;
  }
  
  .table-filter tr td:nth-child(2) {
    width: 2.19rem;
  }
  
  .table-filter .media-photo {
    width: 2.19rem;
  }
  
  .table-filter .media-body {
    display: block;
    /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */
  }
  
  .table-filter .media-meta {
    font-size: 0.75rem;
  }
  
  .table-filter .media .title {
    color: var(--light-blue);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: normal;
    margin: 0;
  }
  
  .table-filter .media .title span {
    font-size: .8em;
    margin-right: 1.25rem;
  }
  
  .table-filter .media .title span.grids {
    color: #5cb85c;
  }
  
  .table-filter .media .title span.charts {
    color: #f0ad4e;
  }
  
  .table-filter .media .title span.clickables {
    color: #d9534f;
  }
  
  .table-filter .media .summary {
    font-size: 0.88rem;
  }
  
  .media-body {
    width: 100%;
  }
  
  .container-filter-table {
    @extend .container;
    padding-left: 0.94rem;
    padding-right: 0.94rem;
  }
  
  label {
    display: inline-block;
    margin-bottom: 0px;
  }
  
  /* !SECTION */
  
  td>p {
    margin: 0;
  }
  
  .dataTable tr.group td {
    padding: 0;
    position: relative;
  }
  
  .dataTable tr.group td a {
    padding: 0.5rem 0.63rem 0.5rem 2.06rem;
    cursor: pointer;
  }
  
  .dataTable tr.group td a.unfolded:before {
    transform: rotate(0deg);
  }
  
  .dataTable tr.group td a:before {
    font-family: 'FontAwesome';
    content: "\f078";
    font-size: 0.88rem;
    position: absolute;
    left: 0.75rem;
    transition: 0.2s;
    transform: rotate(-90deg);
  }
  
  tr.subgroup,
  tr.subgroup {
    background-color: #919191 !important;
    color: white;
    font-weight: 600;
    font-size: 1rem;
  }
  
  table.dataTable thead th,
  table.dataTable thead td {
    border-bottom: 1px solid #ddd !important;
  }
  
  .dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 1.25rem;
  }
  
  .dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: right;
  }
  
  div.dataTables_wrapper div.dataTables_filter input {
    border-radius: 0px;
  }
  
  div>.dataTables_filter>label {
    padding-left: 1.56rem;
    font-weight: 600;
  }
  
  div>.dataTables_filter>select {
    color: var(--dark-blue);
    font-size: 1rem;
    border: 1px solid var(--dark-blue);
    border-radius: 0px;
  }
  
  div>.dataTables_filter>label>input {
    background-color: white;
    border-radius: 0px;
    font-size: 1rem;
    border-style: none;
    border: 1px solid var(--dark-blue);
  }
  
  button.dt-button:focus:not(.disabled),
  div.dt-button:focus:not(.disabled),
  a.dt-button:focus:not(.disabled) {
    border: 1px solid transparent;
  }
  
  tr.foldable a {
    display: block;
    background-color: var(--dark-blue) !important;
    color: white;
    font-weight: 600;
    font-size: 1.38rem;
    text-decoration: none;
  }
  
  tr.foldable a:hover {
    display: block;
    background-color: var(--light-blue) !important;
    color: white;
    font-weight: 600;
    font-size: 1.38rem;
    text-decoration: none;
  }
  
  button.dt-button:focus:not(.disabled),
  button.dt-button:active:not(.disabled):hover:not(.disabled),
  button.dt-button:active:not(.disabled),
  button.dt-button.active:not(.disabled):hover:not(.disabled),
  button.dt-button:hover:not(.disabled),
  button.dt-button.active:not(.disabled),
  div.dt-button:active:not(.disabled),
  div.dt-button.active:not(.disabled),
  a.dt-button:active:not(.disabled),
  a.dt-button.active:not(.disabled) {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }
  
  button.dt-button,
  div.dt-button,
  button.dt-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
  }
  
  button.dt-button {
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Lato';
    color: var(--dark-blue);
    font-size: 0.81rem;
    font-weight: 600;
    height: 1.56rem;
    line-height: 1.56rem;
    vertical-align: middle;
    padding: 0 0.31rem;
    max-width: 15.75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: #ffffff;
    border: 1px solid transparent;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-font-smoothing: antialiased;
    border-radius: 0px;
    margin-right: 0.333em;
    background-image: none;
    box-shadow: none;
  }
  
  button.dt-button.buttons-columnVisibility {
    border: 1px solid var(--dark-blue);
  }
  
  
  button.dt-button.buttons-columnVisibility.active {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: #ffffff;
  }
  
  button.dt-button:hover:not(.disabled):not(.active) {
    border: 1px solid var(--light-blue);
    box-shadow: 0 0px 0.31rem var(--light-blue);
    color: var(--light-blue);
    text-decoration: none;
  }
  
  button.dt-button.buttons-columnVisibility.active:hover,
  button.dt-button.active:not(.disabled):hover:not(.disabled) {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
  }
  
  button.dt-button:active {
    transform: scaleX(0.98) scaleY(0.98);
    outline: none !important;
  }
  
  button.dt-button:focus {
    outline: none !important;
  }
  
  .fncdesc {
    font-size: 0.88rem;
    margin-left: 0.63rem;
    vertical-align: middle;
  }
  
  .subcatname {
    vertical-align: middle;
    font-size: 1.13rem;
  }
  
  .subcatdesc {
    font-size: 0.88rem;
    margin-left: 0.63rem;
    vertical-align: middle;
    font-weight: 600;
  }
  
  input[type="text"] {
    border: 1px solid var(--dark-blue);
  }
  
  table.dataTable thead .sorting_asc {
    /* background: none; */
    cursor: default;
    background-image: none !important;
  }
  
  table.dataTable tbody td {
    overflow-wrap: break-word;
  }
  
  code {
    overflow-wrap: break-word;
  }
  
  button.dt-button {
    font-family: inherit;
  }
  
  /* table page sizing */
  
  .page_nav,
  .page_about,
  .page_about_content,
  .page_nav_content {
    /* width: 10%; */
    /* min-width: 280px; */
  /*   min-width: 150px; */
  }
  
  .page_main {
    width: 80% !important;
    max-width: 100rem;
    /* min-width: 1000px; */
  }
  
  .dataTables_wrapper {
    margin-top: 1.25rem;
  }
  
  .table-bordered {
  border: 1px solid #ddd;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 1px solid #ddd;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 2px;
    }
  }
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    white-space: nowrap;
  }

:root {
  scroll-behavior: unset;
}
  
  /* main body width override to correct responsive issue for now */
  
  @media only screen and (max-width: 1280px) {
    .page_layout>div.page_nav {
      display: none;
    }
  }
  
  @media only screen and (max-width: 960px) {
    .page_layout>div.page_about {
      display: none;
    }
  
    .page_layout>div.page_nav {
      display: none;
    }
  
    .page_phone_nav_content {
      display: block;
    }
  
    #slideout {
      display: none;
    }
  
  }