﻿.c2p-grid-edit-col {
  background: #fff;
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
  width: 48px; }
  .c2p-grid-edit-col .edit-col-header {
    padding: 5px;
    border-bottom: 1px solid var(--dark-grey);
    height: 33px;
    box-sizing: border-box;
    display: flex;
    align-items: center; }

.assignment-page .k-grid-content-expander {
  display: none; }

.k-multicheck-wrap .k-label {
  margin: 0;
  padding: 4px;
  width: 100%;
  font-weight: 500;
  font-size: 1.2rem; }
  .k-multicheck-wrap .k-label input[type=checkbox] {
    display: none; }

.c2p-grid-content-wrap {
  align-items: stretch;
  border-top: 1px solid var(--dark-grey);
  margin: 6px -6px 0 -6px; }

.c2p-shared-grid {
  font-size: 1.2rem;
  display: flex;
  flex-grow: 1;
  flex-flow: column nowrap;
  border: 1px solid var(--dark-grey);
  padding: 6px 6px 0 6px;
  background: #fff;
  /* Things must be moved when the sort icon appears */ }
  .c2p-shared-grid .k-dropdown k-input {
    line-height: 20px; }
  .c2p-shared-grid .no-sort-grid-header {
    box-sizing: border-box;
    padding-bottom: 6px; }
  .c2p-shared-grid .c2p-cmd-cell {
    padding: 0;
    text-align: center !important; }
    .c2p-shared-grid .c2p-cmd-cell button {
      min-width: 50px !important;
      padding: 3px !important;
      line-height: 1.2rem !important; }
    .c2p-shared-grid .c2p-cmd-cell button.disabled {
      opacity: 0.4; }
    .c2p-shared-grid .c2p-cmd-cell button.disabled:hover {
      color: #fff; }
    .c2p-shared-grid .c2p-cmd-cell .grid-cmd-icon {
      font-size: 1.8rem;
      padding-top: 4px;
      padding-bottom: 2px; }
  .c2p-shared-grid a:hover {
    text-decoration: none; }
  .c2p-shared-grid .edit-col-icon > .default,
  .c2p-shared-grid .clear-filters-icon > .default,
  .c2p-shared-grid .edit-col-icon:hover > .hover,
  .c2p-shared-grid .clear-filters-icon:hover > .hover {
    display: inline; }
  .c2p-shared-grid .edit-col-icon:hover > .default,
  .c2p-shared-grid .clear-filters-icon:hover > .default,
  .c2p-shared-grid .edit-col-icon > .hover,
  .c2p-shared-grid .clear-filters-icon > .hover {
    display: none; }
  .c2p-shared-grid .edit-col-icon,
  .c2p-shared-grid .clear-filters-icon {
    padding-top: 5px;
    cursor: pointer;
    padding-bottom: 4px; }
  .c2p-shared-grid thead {
    min-height: 33px; }
  .c2p-shared-grid .k-grid {
    overflow: hidden;
    height: 100%;
    width: calc(100% - 48px);
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    border: none;
    border-left: solid 1px var(--dark-grey); }
  .c2p-shared-grid .k-grid-content {
    flex-grow: 1; }
  .c2p-shared-grid th.k-header {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    padding-left: 5px;
    height: 33px;
    line-height: 16px;
    /* Modify display of filter when active */
    /* The link covers entire width of header, even spanning the filter, 
            so that we can stick the sort icon to the right of the filter icon */ }
    .c2p-shared-grid th.k-header .k-grid-filter {
      /* Shove filter to the right side */
      position: absolute;
      padding: 8px 3px;
      top: 0;
      right: 0;
      margin: 0; }
      .c2p-shared-grid th.k-header .k-grid-filter > .k-icon {
        background: none;
        font-size: 16px; }
    .c2p-shared-grid th.k-header .k-grid-filter.k-state-active {
      background: none; }
      .c2p-shared-grid th.k-header .k-grid-filter.k-state-active > .k-icon {
        color: #7ea700; }
    .c2p-shared-grid th.k-header .k-link {
      width: 100%;
      position: relative;
      padding: 0;
      margin: 0;
      max-height: unset !important;
      overflow: hidden;
      display: inline-block;
      height: 20px;
      /*Sort Arrow, force to right of filter icon*/
      /* The text of the header is 40px narrower than the header so it will start cutting off if the filter icon hits it */ }
      .c2p-shared-grid th.k-header .k-link .k-icon {
        position: absolute;
        padding: 4px 2px;
        top: 0;
        right: 0;
        line-height: inherit;
        display: inline-block; }
      .c2p-shared-grid th.k-header .k-link .c2p-grid-title {
        width: calc(100% - 25px);
        text-overflow: ellipsis;
        line-height: inherit;
        display: inline-block;
        overflow: hidden; }
  .c2p-shared-grid th.k-header[data-dir] .c2p-grid-title {
    width: calc(100% - 40px); }
  .c2p-shared-grid th.k-header[data-dir] .k-grid-filter {
    right: 17px; }

.grid-top-bar-icon {
  color: var(--c2p-green-primary);
  font-size: 1.8rem;
  padding: 0 4px;
  cursor: pointer; }

.grid-top-bar-icon:hover {
  color: #000; }

/* Left out of c2p-shared-grid scoping, because it is used by other grids */
.grid-cmd-icon.fa {
  font-size: 1.6rem;
  padding: 2px 4px;
  cursor: pointer; }

.c2p-cmd-header {
  text-align: center !important;
  vertical-align: top !important;
  padding: 6px 5px !important; }
  .c2p-cmd-header button {
    min-width: 50px !important;
    padding: 1px 5px !important;
    line-height: 1.6rem !important; }

.c2p-check-cell {
  text-align: center !important; }
  .c2p-check-cell.k-header {
    vertical-align: top !important;
    padding-top: 8px !important; }
  .c2p-check-cell input {
    margin: 0 !important;
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: middle; }
  .c2p-check-cell span {
    margin-right: 6px; }

.filter-multi-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px; }

/* -- Contact Grid Styling -- */
.grid-search-input {
  flex-grow: 1;
  width: 0;
  box-sizing: border-box;
  border-color: #dbdbdb;
  border-width: 1px;
  border-style: solid;
  text-indent: .33em;
  font-size: 1.4rem;
  height: 30px; }

.grid-clear-icon {
  color: var(--c2p-text-dark);
  margin-right: 5px;
  margin-left: -14px;
  cursor: pointer;
  font-size: 14px; }

.grid-clear-icon:hover {
  color: red; }

.contact-grid .grid-search-input {
  max-width: calc(50% - 70px); }

.k-pager-wrap {
  flex-shrink: 0;
  height: auto;
  box-sizing: border-box; }

.c2p-contacts-list-selector {
  font-size: 1.4rem;
  max-width: 50%; }
  .c2p-contacts-list-selector span {
    font-size: 1.4rem; }
  .c2p-contacts-list-selector button {
    margin-left: 4px;
    flex-shrink: 0; }

.k-filter-menu .k-multicheck-wrap li {
  background: #fff;
  color: #000;
  font-size: 1.1rem;
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  list-style: none; }

.k-filter-menu .k-multicheck-wrap li:hover {
  background: #7ea700;
  color: #fff; }

.k-filter-menu .k-multicheck-wrap li.selected {
  background: #7ea700; }

.k-filter-menu .k-multicheck-wrap li.selected:hover {
  color: #000; }

.c2p-contacts-list-selector {
  position: absolute;
  top: 6px;
  right: 6px; }

.color-select-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center; }
  .color-select-placeholder .fa {
    font-size: 1.6rem; }

.color-select-placeholder-editable {
  cursor: pointer; }

.color-select-td {
  padding: 0 !important;
  color: #fff;
  box-sizing: border-box;
  border-width: 1px !important; }

#color-select-list {
  position: absolute;
  background: #fff;
  padding: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); }

#c2p-color-select-overlay {
  position: absolute;
  z-index: 20000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: none; }

.color-select-item {
  text-align: center;
  padding: 8px 0;
  cursor: pointer;
  color: var(--c2p-text-dark); }

.color-select-item:hover {
  background: var(--c2p-light-green);
  color: #fff; }

.dragging-grid-row {
  background-color: var(--c2p-green-primary);
  color: #fff; }
