/*


*/

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');
@import url('https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css');
@import url('https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css');


/*
  needed to get sure the footer is on the bottom of the screen
  even if the content is smaller
*/
body {
    height: 100vh;
}
body > .container-fluid {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
/* Animation for opening an category details tag in a dashboard */
details[open] > div.dashboard-tiles-group {
  animation: admin_open_dash_category 1s;
  margin-top: 0.5rem;
}
@keyframes admin_open_dash_category {
  from {
    opacity: 0;
  }
  to   {
    opacity: 1;
  }
}

/* fix width and height to get suqared tile */
.dashboard-tile {
  width: 14rem;
}
.dashboard-tile > .card-body {
  height: 14rem;
}

/* fixed size for icon of a tile */
.dashboard-tile-icon {
  font-size: 4rem;
  overflow: hidden;
}
/* Prevents the flash-message from moving the content down */
#flash-message-container {
  position: absolute;
  top: 0;
  z-index: 1;
}
/* Gets sure the header has a min height even if no menu entries are visible */
.header-row {
  min-height: 8rem;
}
/*
  Overwrite bootstrap pagination colors
*/
.pagination > .page-item > .page-link {
  color: black;
}
.pagination > .page-item.active > .page-link {
  background-color: #6c757d;
  border-color: #6c757d;
}
/* disable extra labels of simple_form assocication fields */
.select > label.form-label {
  display: none;
}

/* fix width for dropdown select2 fields */
.select2-container--bootstrap5 {
  width: 100% !important;
}

/* fix wrong border color for select2 fields */
.select2-selection {
  border-color: #ced4da !important;
}

.form-label {
  font-weight: 500;
}
/* needed for attachment previews */
.table-thumbnail {
  max-height: 4rem;
}

/* fix to large border above tbody in bootstrap */
.table > :not(:first-child) {
  border-top: none !important;
}

/* used for the th and td elements holding only a icon */
.table-mini-col {
  vertical-align: middle;
  text-align: center;
  width: 2rem;
}
.active-storage-upload-field-file-container {
    min-height: 10rem;
    min-width: 7rem;
    padding: 0;
}

.active-storage-upload-field-delete-button {
    border: none;
}

.active-storage-upload-field-error {
    margin-top: 0.25rem;
    font-size: .875em;
    color: #dc3545;
}
.duration-field-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.duration-field-select-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-right: 2em;
}

.duration-field-select-label {

}

.duration-field-select {
    min-width: 3em;
}

.duration-field-select-option {

}
.polymorphic-association-field-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
}

.polymorphic-association-field-select {
    min-width: 3em;
}