/**** LANDING PAGE ****/
.form-signin { max-width: 330px; padding: 15px; margin: 0 auto; }
.form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; }
.form-signin .checkbox { font-weight: normal; }
.form-signin .form-control { position: relative; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; font-size: 16px; }
.form-signin .form-control:focus { z-index: 2; }
.form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }


/**** GENERIC ****/
.pointer { cursor: pointer; }
.glyphicon.spinning { animation: spin 1s infinite linear; -webkit-animation: spin2 1s infinite linear; }
.table-form th { text-align: right; }
.strikethrough { text-decoration: line-through; }

/* text area read only */
.static-notes { width: 100%; resize: none; }
.static-notes:focus { outline: none; }

/* table column action buttons to prevent them from wrapping */
.actions-1 { width: 50px; min-width: 50px; }
.actions-2 { width: 85px; min-width: 85px; }
.actions-3 { width: 110px; min-width: 110px; }
.actions-4 { width: 140px; min-width: 140px; }
.actions-5 { width: 160px; min-width: 160px; }
.actions-6 { width: 205px; min-width: 205px; }

.flex {
  display: flex;
}

.flex-gap {
  gap: 0.5rem;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

/* table filter form */
.filter-box {
  margin-bottom: 1em;
  &.flex {
    padding: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: no-wrap;
    flex-grow: 1;
    flex-shrink: 1;
    @media (max-width: 768px) {
      flex-direction: column;
    }
    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-grow: 0;
      gap: 0.5rem;
      flex-wrap: no-wrap;
      font-size: 1.5rem;
    }
    .filter-submit {
      margin-left: auto;
      height: auto;
    }
  }
  .flex-inputs {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 90%;
    @media (max-width: 768px) {
      max-width: 100%;
      flex-direction: column;
    }

    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
      flex-grow: 1;
      @media (max-width: 768px) {
        width: 100%;
      }
    }

  }

  .flex-inputs > input {
      @media (min-width: 768px) {
        width: auto;
        max-width: 40ch;
      }
    }

}
.filter-box .title { font-size: 18px; margin: 0; line-height: 50px; padding: 0 0 0 8px; }
.filter-box .filter-submit { height: 50px; padding: 0 20px; font-size: 18px; border: 0; }
.filter-box .filter-inputs { padding: 8px 0; }
.filter-box .filter-inputs div { padding-left: 0; } /* hack to remove bootstrap column left-padding */
.filter-box .filter-clear { cursor: pointer; color: #AAA; }

/* full screen search box */
.fullscreen-search input { width: 100%; background: #EEE; border: 0px; padding: 10px; font-size: 18px; border-bottom: 2px solid #AAA; margin-bottom: 1em; }
.fullscreen-search .dropdown-menu>.active>a, 
.fullscreen-search .dropdown-menu>.active>a:focus, 
/* product search */
#product-search input:focus { outline: none; border-color: #9b58b5; }
#product-search .dropdown-menu>.active>a:hover { background-color: #9b58b5; }
.dropdown-menu>li>a>.text { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


div.dataTables_wrapper div.dataTables_filter {
  text-align: left;
}



/**** ANIMATION ****/
@keyframes spin {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1) rotate(360deg); }
}
@-webkit-keyframes spin2 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}



/**** BOOTSTRAP OVERRIDE/APPEND ****/

/* create a default bootstrap bg-* class */
.bg-default { background-color: #EEE; }


/* https://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0 */
.navbar-default {
  background-color: #9b58b5;
  border-color: #8646a0;
  border: 0px;
  border-radius: 0px;
  min-height: 40px;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #eadcef;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #eadcef;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #eadcef;
  background-color: #8646a0;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #eadcef;
  background-color: #8646a0;
}
.navbar-default .navbar-toggle {
  border-color: #8646a0;
  padding: 5px 6px;
  margin-top: 7px;
  margin-bottom: 6px; 
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #8646a0;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #eadcef;
}
.navbar-default .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #eadcef;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #eadcef;
    background-color: #8646a0;
  }
}

.pill-list {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;

  .pill-list-block {
    display: flex;
    gap: 0.5rem;
  }

  .label {
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
    cursor: pointer;
  }
  &:has(+ .pill-list) {
    padding-bottom: 0.5rem;
  }
  & + & {
    padding-top: 0.3rem;
    border-top: solid 1px rgb(221, 221, 221);
  }
}