:root {
  --mainColorTable:#4e73df;
  --mainColorTableDark:#485fa5;
  --mainColorTableLight:#bac8f3;
  --secondaryColorTable:#F0F0F0;
  --thirdColorTable:#F8F8F8;
  --darkGray:#D8D8D8;
  --tableTextColor:#212427;
  --secondaryTextColor:#6e707e;
  --grayTextColor:#858796;
  --greenSuccessColor:#1cc88a;
  --greenSuccessColorDark:#17a673;
  --redErrorColor:#e74a3b;
  --tableOrange:#f6c23e; }

body {
  scrollbar-gutter: stable;
  overflow-y: scroll; }
  body.freeze {
    overflow: hidden; }

html {
  scrollbar-gutter: stable; }

.gfButton {
  padding: 0.2rem 0.8rem;
  display: block;
  background: var(--mainColorTable);
  outline: none;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  color: white;
  cursor: pointer;
  transition: 0.3s ease background; }
  .gfButton:hover {
    background: var(--mainColorTableDark); }
  .gfButton:focus {
    border: none;
    outline: none; }

#modal {
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  #modal.hidden {
    display: none; }
  #modal #innerModal {
    z-index: 3;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: white;
    border: 1px solid #e0e5ec;
    border-radius: 5px;
    overflow-y: auto;
    max-width: 100%;
    max-height: 100%;
    /* width */
    /* Track */
    /* Handle */ }
    #modal #innerModal::-webkit-scrollbar {
      width: 5px; }
    #modal #innerModal::-webkit-scrollbar-track {
      background: var(--secondaryColorTable);
      border-radius: 10px; }
    #modal #innerModal::-webkit-scrollbar-thumb {
      background: var(--mainColorTable);
      border-radius: 10px; }
    #modal #innerModal #closeModal {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 28px;
      height: 28px;
      cursor: pointer;
      color: var(--grayTextColor); }
      #modal #innerModal #closeModal:hover svg {
        color: #333333; }
      #modal #innerModal #closeModal svg {
        pointer-events: none;
        transition: 0.3s ease all; }
    #modal #innerModal #modalContent {
      padding: 2.5rem 1.5rem; }
    #modal #innerModal #errorContainer {
      width: 60%;
      margin: 0 auto; }
      #modal #innerModal #errorContainer .errorMessage {
        display: block;
        margin: 1rem auto 0 auto;
        padding: 0.5rem;
        background: var(--redErrorColor);
        color: white; }

.gfLoader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
  z-index: 999;
  opacity: 1; }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
#tableContainer {
  position: relative;
  color: var(--grayTextColor); }
  #tableContainer #tableOverlay {
    display: block;
    position: absolute;
    top: 0;
    background: white;
    width: 100%;
    height: 100%;
    z-index: 9; }
    #tableContainer #tableOverlay.hidden {
      display: none; }

#tableFilters * {
  box-sizing: border-box; }

#tableTop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  font-size: 18px;
  margin: 1rem 0 0.5rem 0; }
  #tableTop * {
    box-sizing: border-box; }
  #tableTop #resultCount {
    font-size: 16px;
    flex-basis: 100%; }

#tableBottom {
  display: flex;
  align-items: center;
  margin: 0.5rem 0; }
  #tableBottom * {
    box-sizing: border-box; }

.goToPageContainer {
  margin-right: 1rem; }

#perPageContainer {
  margin-right: 3rem; }

.tableInput {
  width: 75px;
  color: var(--secondaryTextColor);
  border-radius: 4px;
  border: 1px solid var(--darkGray);
  padding: 0.5rem;
  font-size: 16px; }
  .tableInput:focus {
    color: var(--secondaryTextColor);
    background-color: white;
    outline: 1px solid var(--mainColorTableLight); }

#bulkActionsContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  margin-right: 1rem; }
  #bulkActionsContainer #bulkActions {
    width: 90px; }
  #bulkActionsContainer #applyBulkActions {
    padding: 0.5rem 0.8rem;
    background: var(--mainColorTable);
    outline: none;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: 0.3s ease background; }
    #bulkActionsContainer #applyBulkActions:hover {
      background: var(--mainColorTableDark); }
  #bulkActionsContainer .gfLoader {
    left: unset;
    right: -50px; }

#createNew {
  padding: 0.4rem 1rem;
  display: block;
  background: var(--mainColorTable);
  outline: none;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  color: white;
  cursor: pointer;
  transition: 0.3s ease background; }
  #createNew:hover {
    background: var(--mainColorTableDark); }

#tableSearchContainer {
  margin-left: auto;
  margin-right: 40px; }
  @media (max-width: 1260px) {
    #tableSearchContainer {
      margin-left: unset;
      margin-top: 0.5rem; } }
  #tableSearchContainer #tableSearchInput {
    width: 200px;
    padding: 0.52rem; }
  #tableSearchContainer #tableSearchType {
    width: 120px; }

#crudTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px; }
  #crudTable * {
    box-sizing: border-box; }
  #crudTable thead {
    position: sticky;
    top: 0;
    z-index: 9; }
    #crudTable thead tr th {
      border: 1px solid var(--secondaryColorTable);
      background: var(--mainColorTable);
      color: white;
      padding: 0.5rem;
      text-align: left; }
      #crudTable thead tr th.hidden {
        display: none; }
      #crudTable thead tr th:first-of-type {
        border-top-left-radius: 8px; }
      #crudTable thead tr th:last-of-type {
        border-top-right-radius: 8px; }
      #crudTable thead tr th.selectAllHead {
        width: 50px; }
      #crudTable thead tr th .sort {
        cursor: pointer;
        display: inline-block;
        padding: 0 5px; }
        #crudTable thead tr th .sort svg {
          fill: white;
          width: 16px;
          pointer-events: none; }
        #crudTable thead tr th .sort[data-sort-asc] {
          transform: rotate(180deg); }
        #crudTable thead tr th .sort.active svg {
          fill: var(--tableOrange); }
  #crudTable tbody {
    color: var(--tableTextColor); }
    #crudTable tbody tr:nth-of-type(odd) td {
      background-color: var(--secondaryColorTable); }
    #crudTable tbody tr:nth-of-type(even) td {
      background-color: var(--thirdColorTable); }
    #crudTable tbody tr td {
      padding: 1rem 0.5rem;
      border-right: 1px solid white;
      transition: 0.3s ease background-color;
      word-break: break-word;
      color: var(--grayTextColor); }
      #crudTable tbody tr td.hidden {
        display: none; }
    #crudTable tbody tr:hover td {
      background-color: var(--darkGray); }
    #crudTable tbody tr .actionsWrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center; }
      #crudTable tbody tr .actionsWrapper > div {
        position: relative; }
      #crudTable tbody tr .actionsWrapper .entityActionButton {
        cursor: pointer;
        width: 18px;
        display: flex;
        align-items: center;
        justify-content: center; }
        #crudTable tbody tr .actionsWrapper .entityActionButton svg {
          pointer-events: none; }
      #crudTable tbody tr .actionsWrapper .editEntityButton {
        width: 18px; }
        #crudTable tbody tr .actionsWrapper .editEntityButton svg {
          fill: var(--greenSuccessColor); }
      #crudTable tbody tr .actionsWrapper .deleteEntityButton svg {
        fill: var(--redErrorColor); }

#tableFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
  color: var(--grayTextColor); }
  #tableFilters > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative; }
    #tableFilters > div .tableFilter {
      width: 150px; }

.rangeFilter {
  cursor: pointer;
  display: inline-block;
  margin-left: 5px; }
  .rangeFilter.active svg {
    fill: var(--tableOrange); }
  .rangeFilter svg {
    width: 14px;
    pointer-events: none;
    fill: white; }

.tablePaginationContainer {
  display: flex;
  gap: 0.3rem;
  margin-right: 1rem; }
  .tablePaginationContainer .paginationButton {
    padding: 0.5rem 0.8rem;
    background: var(--mainColorTable);
    outline: none;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: 0.3s ease background; }
    .tablePaginationContainer .paginationButton:hover {
      background: var(--mainColorTableDark); }
    .tablePaginationContainer .paginationButton svg {
      pointer-events: none;
      fill: white;
      width: 8px; }
    .tablePaginationContainer .paginationButton.activePaginationButton {
      background: var(--greenSuccessColor); }
      .tablePaginationContainer .paginationButton.activePaginationButton:hover {
        background: var(--greenSuccessColorDark); }

.rangeFilterContainer {
  position: absolute;
  z-index: 9;
  top: -18%;
  background: white;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--darkGray);
  border-radius: 4px;
  display: none;
  flex-wrap: wrap; }
  .rangeFilterContainer.shown {
    display: flex; }
  .rangeFilterContainer input {
    padding: 0.2rem; }
    .rangeFilterContainer input::placeholder {
      /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: var(--placeHolderGray);
      opacity: 1;
      /* Firefox */ }
    .rangeFilterContainer input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: var(--placeHolderGray); }
    .rangeFilterContainer input::-ms-input-placeholder {
      /* Microsoft Edge */
      color: var(--placeHolderGray); }
    .rangeFilterContainer input[type='date'] {
      width: 150px; }
  .rangeFilterContainer button {
    width: max-content;
    font-size: 0.8rem; }

#userOptionsButton {
  cursor: pointer;
  width: max-content;
  transition: 0.3s ease all;
  position: absolute;
  right: 5px;
  top: 5px; }
  #userOptionsButton svg {
    width: 24px;
    pointer-events: none;
    fill: var(--mainColorTable); }
  #userOptionsButton:hover {
    transform: rotate(45deg); }

#userOptionsModal {
  color: var(--grayTextColor);
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  background: white;
  height: 800px;
  width: 250px;
  border-radius: 8px;
  border: 1px solid var(--darkGray);
  z-index: 999;
  overflow-y: auto;
  /* Track */
  /* Handle */ }
  #userOptionsModal.shown {
    display: block; }
  #userOptionsModal::-webkit-scrollbar {
    width: 5px;
    height: 5px; }
  #userOptionsModal::-webkit-scrollbar-track {
    background: var(--secondaryColorTable);
    border-radius: 10px; }
  #userOptionsModal::-webkit-scrollbar-thumb {
    background: var(--mainColorTable);
    border-radius: 10px; }
  #userOptionsModal #closeUserOptionsButton {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.5rem; }
    #userOptionsModal #closeUserOptionsButton svg {
      width: 16px;
      fill: var(--mainColorTable);
      pointer-events: none; }
  #userOptionsModal h4 {
    color: var(--secondaryTextColor);
    margin: 0; }
  #userOptionsModal .userOptionInput {
    border-radius: 4px;
    border: 1px solid var(--darkGray);
    padding: 0.3rem;
    width: 115px; }
    #userOptionsModal .userOptionInput:focus {
      color: var(--tableTextColor);
      background-color: white;
      outline: 1px solid var(--mainColorTableLight); }
  #userOptionsModal #userColumnOptionsHeader {
    border: 2px solid var(--darkGray);
    padding: 0.5rem;
    margin: 4rem 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    #userOptionsModal #userColumnOptionsHeader #userColumnOptionsExpand {
      cursor: pointer;
      transition: 0.3s ease all; }
      #userOptionsModal #userColumnOptionsHeader #userColumnOptionsExpand svg {
        fill: var(--mainColorTable);
        pointer-events: none;
        width: 16px; }
      #userOptionsModal #userColumnOptionsHeader #userColumnOptionsExpand.shown {
        transform: rotate(180deg); }
  #userOptionsModal #userColumnOptionsContainer {
    height: 0;
    overflow-y: hidden;
    transition: 0.3s ease height;
    display: flex;
    flex-direction: column;
    /* Track */
    /* Handle */ }
    #userOptionsModal #userColumnOptionsContainer.shown {
      height: 500px;
      overflow-y: scroll; }
    #userOptionsModal #userColumnOptionsContainer::-webkit-scrollbar {
      width: 5px;
      height: 5px; }
    #userOptionsModal #userColumnOptionsContainer::-webkit-scrollbar-track {
      background: var(--secondaryColorTable);
      border-radius: 10px; }
    #userOptionsModal #userColumnOptionsContainer::-webkit-scrollbar-thumb {
      background: var(--mainColorTable);
      border-radius: 10px; }
    #userOptionsModal #userColumnOptionsContainer .userColumnOption {
      padding: 0.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      border-bottom: 1px solid var(--darkGray); }
      #userOptionsModal #userColumnOptionsContainer .userColumnOption:last-of-type {
        border-bottom: none; }
      #userOptionsModal #userColumnOptionsContainer .userColumnOption .columnName {
        word-break: break-word;
        font-weight: 500; }
  #userOptionsModal #userTableOptionsHeader {
    border: 2px solid var(--darkGray);
    padding: 0.5rem;
    margin: 3px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    #userOptionsModal #userTableOptionsHeader #userTableOptionsExpand {
      cursor: pointer;
      transition: 0.3s ease all; }
      #userOptionsModal #userTableOptionsHeader #userTableOptionsExpand svg {
        fill: var(--mainColorTable);
        pointer-events: none;
        width: 16px; }
      #userOptionsModal #userTableOptionsHeader #userTableOptionsExpand.shown {
        transform: rotate(180deg); }
  #userOptionsModal #userTableOptionsContainer {
    height: 0;
    overflow-y: hidden;
    transition: 0.3s ease height;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Track */
    /* Handle */ }
    #userOptionsModal #userTableOptionsContainer.shown {
      height: 50px;
      overflow-y: scroll; }
    #userOptionsModal #userTableOptionsContainer::-webkit-scrollbar {
      width: 5px;
      height: 5px; }
    #userOptionsModal #userTableOptionsContainer::-webkit-scrollbar-track {
      background: var(--secondaryColorTable);
      border-radius: 10px; }
    #userOptionsModal #userTableOptionsContainer::-webkit-scrollbar-thumb {
      background: var(--mainColorTable);
      border-radius: 10px; }
    #userOptionsModal #userTableOptionsContainer .userTableOption {
      padding: 0.5rem; }

#pageMessageContainer {
  margin: 1rem 0; }
  #pageMessageContainer > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; }
    #pageMessageContainer > div .errorMessage {
      display: block;
      background: var(--redErrorColor);
      color: white;
      padding: 0.5rem; }
    #pageMessageContainer > div .successMessage {
      display: block;
      background: var(--greenSuccessColor);
      color: white;
      padding: 0.5rem; }

.formFieldNotice {
  display: block;
  color: var(--redErrorColor);
  position: absolute; }

.invalidFormField {
  border: 1px solid var(--redErrorColor); }
  .invalidFormField:focus {
    border-color: var(--redErrorColor);
    box-shadow: 0 0 0 0.2rem rgba(var(--errorShadow), 0.5); }

/*# sourceMappingURL=style.css.map */