/******************************************************
  Utils
*******************************************************/

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-parent {
  display: flex;
  align-items: center; 
  justify-content: center;
  width: 100%;
  height: 100%;
}

.center-horizontal {
  display: flex;
  justify-content: center;
}

.button-container:not(.pull-right) {
  display: flex;
  justify-content: right;
  gap: 5px;
}

/******************************************************
  Sidebar
*******************************************************/

#sidebar-collapse {

  .sidebar-partner-logo-container {
    position: relative;

    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .sidebar-partner-logo {
      max-height: 50px;
      max-width: 100%;
    }
  }



  .nav.menu a {
    display: flex;
    align-items: center;
    gap: 5px;

    &>i {
      flex: 0 1 25px;
      max-width: 25px;
      text-align: center;
    }

    &>span {
      flex: 1;
    }
  }
}

/******************************************************
  Copyable Input Container
*******************************************************/

.copyable-input-container {
  position: relative;
  
  &>input {
    width: 100%;
  }

  &>button {
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    background-color: transparent;
    height: 100%;
    text-align: center;
    opacity: 0.8;
  }

  &>button>.fa-check {
    color: limegreen;
  }
}

/******************************************************
  Name-Value Table
*******************************************************/

.name-value-table .entry {
  width: 100%;
  display: table-row-group;

  .name {
    font-weight: bold;
    padding-right: 10px;
  }
}

/******************************************************
  Select Other Element
*******************************************************/

.select-other-element .option-other {
  display: none;

  &.selected {
    display: unset;
  }
}

/******************************************************
  Seperator
*******************************************************/

div.seperator {
  margin: 10px 0px;
  width: 100%;
  border-top: 1px solid #e7e7e7;
}

/******************************************************
  PageElement panel-list
*******************************************************/

.panel-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .panel {
    height: calc(100% - 20px); /* 20px margin correction */

    display: flex;
    flex-direction: column;

    background: none;
    box-shadow: none;
    -webkit-box-shadow: none;

    .panel-body {
      flex: 1 1 auto;

      background-color: #fff;
      -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
      box-shadow: 0 1px 1px rgba(0,0,0,.05);

      &:has(>.panel-content) {
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 5px;

        &>.panel-content {
          flex: 1 1 auto;
        }
      }

    }
  }

  .col-new-panel .panel .panel-body {

    &>div {
      height: 100%;
    }

    .clickable:hover {
      color: gray;
    }

  }

  @media (max-width: 767px) {

    &>* {
      width: 100%;
    }

  }
}

/******************************************************
  Popup Custom
*******************************************************/
.popup-content {
  font-size: 14px;
}

/******************************************************
  Ajax Custom
*******************************************************/
.ajax-utility-container.ajax-error-container .ajax-error {
  color: red;
}

/******************************************************
  Meldingen
*******************************************************/

.melding {
  width: 100%;
  padding: 10px;
  display:flex;
  align-items:center;
  margin-bottom: 15px;
  background-color: #e9ecf2;
  border-radius: 5px;

  i {
    font-size: 2em;
    margin-right: 10px;
  }

  &.melding-warning {
    color: darkgoldenrod;
    background: #ffeec5;
    border: 4px solid #ffc432;
    font-weight: bold;
  }

  &.melding-danger {
    color: #ff0000;
    background: #ffcfcf;
    border: 4px solid #ff0000;
    font-weight: bold;
  }
}

/******************************************************
  Form Controls
*******************************************************/

.form-control.control-small {
  height: 34px;
  padding: 4px 8px;
}

/******************************************************
  table container
*******************************************************/

.table-container {
  &>* {
    width: 100%;
  }

  &>.table-header,
  & .table-body>.table-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .table-cell {
    flex-basis: 100%;
    flex-grow: 2;
    display: block;
    text-align: left;
  }
}

/******************************************************
  Popup Selecteer Item
*******************************************************/

.popup-selecteer-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  position: relative;

  .popup-selecteer-item-filter {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 5px;
    gap: 5px;
  }

  .button-container {
    margin-top: 10px;
  }

  .popup-selecteer-item-tabel {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.1);

    .table-header {
      border-bottom: 1px solid rgba(0,0,0,.1);
    }

    .table-body {
      overflow: auto;
      position: relative;
      flex: 1;
      height: 100%;

      .table-row:hover {
        cursor: pointer;
        background-color: #b2dfff !important;
      }
    }

    .table-cell {
      padding: 8px 2px;
      vertical-align: middle;
    }

    .table-header>.table-cell:first-child,
    .table-body>.table-row>.table-cell:first-child {
      flex-basis: 10%;
    }

    .table-row {
      position: relative;

      &:not(.hidden):nth-child(even) {
        background-color: #d3edff;
      }

      &:not(.selected) i {
        visibility: hidden;
      }
    }

    i {
      font-size: 1.5em;
      width: 100%;
      text-align: center;
    }
  }
}

/******************************************************
  Popup #popup-bedrijfsmiddel-nieuwe-specificatie
*******************************************************/

#popup-bedrijfsmiddel-nieuwe-specificatie {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  #bedrijfsmiddel-nieuwe-specificatie {
    flex: 1 1 auto;
    overflow: auto;
  }

  textarea {
    max-width: 100%;
    min-width: 100%;
    min-height: 5em;
  }

  #nieuwe-specificatie-keuzelijst-container {
    padding: 10px;
    border: 1px solid #cbcbcb;
    border-radius: 5px;
    margin-right: 10px;

    .nieuwe-keuzeoptie-container {
      display: flex; 
      align-items: stretch; 
      position: relative;
    }
  }

  #nieuwe-keuzeopties-lijst .drag-item-content {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding-right: 5px;

    &>i {
      font-size: 2rem;
      color: red;
      cursor: pointer;
      padding: 6px 10px;
      margin: -3px -5px;
    }
  }
}

/******************************************************
  Popup #popup-nieuw-partner-account
*******************************************************/

#popup-nieuw-partner-account {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  #nieuw-partner-account {
    flex: 1 1 auto;
    overflow: auto;
  }  
}

/******************************************************
  Popup #popup-nieuw-partner-account-aangemaakt
*******************************************************/

#popup-nieuw-partner-account-aangemaakt {
  input {
    font-family: monospace;
  }

  .copy-button {
    font-size: 1.5em;
  }

  .button-container {
    margin-top: 15px;
  }

  .melding-warning {
    color: darkgoldenrod;
    width: 100%;
    font-weight: bold;
    background: #ffeec5;
    border: 4px solid #ffc432;
    padding: 5px;
    display:flex;
    align-items:center;
    margin-bottom: 15px;

    i.fa-exclamation-triangle {
      font-size: 2em;
      margin-right: 10px;
    }
  }
}

/******************************************************
  Popup #popup-selecteer-eiacode
*******************************************************/

#popup-selecteer-eiacode {
  .selecteer-subsidievoorwaarde-filter input[name="filter-eia-code"] {
    max-width: 20%;
    min-width: 80px;
  }

  .selecteer-eiacode-lijst {
    .table-header>.table-cell:nth-child(2),
    .table-body>.table-row>.table-cell:nth-child(2) {
      flex-basis: 20%;
    }

    .table-cell .productgroep {
      font-style: italic;
      font-size: 0.8em;
      position: absolute;
      top: 2px;
      right: 5px;
    }
  }
}

/******************************************************
  Popup #popup-selecteer-installatie
*******************************************************/

#popup-selecteer-installatie .popup-selecteer-item-tabel {
  .table-header>.table-cell:nth-child(2),
  .table-body>.table-row>.table-cell:nth-child(2) {
    flex-basis: 40%;
  }
}

/******************************************************
  Lijst #partners-lijst
*******************************************************/

#partners-lijst {
  .partner-logo {
    height: 100%;
    width: auto;
    max-width: 100%;
  }

  .partner-logo-bedrijfsnaam {
    overflow: hidden;
    text-wrap: nowrap;
  }
}

/******************************************************
  #panel-account-inlogopties
*******************************************************/

#panel-account-inlogopties {

  .panel-body>.account-inlogopties-sectie:not(:last-child) {
    padding-bottom: 10px;
    margin-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
  }

  .inlogoptie-card {
    width: calc(100% - 20px);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px 13px;
    margin: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;

    &:hover {
      background-color: #f3f3f3;
    }

    &>i {
      font-size: 1.5em;
      padding: 3px;
    }

    &>span {
      text-align: center;
    }

    &>i.fa-angle-right {
      font-size: 1.3em;
    }

    &>i.fa-circle-check {
      color: limegreen
    }
  }

}