/* Generic */
html,
body {
  min-width: 100% !important;
  min-height: 100% !important;

  background-color: var(--duo-light-green);
}

html {
  overflow: auto !important;
  overflow-x: hidden !important;

  scroll-behavior: smooth;
}

/* Vuetify overrides */
.v-field--disabled {
  --v-disabled-opacity: 0.7 !important;
}

.white-text-btn:not(.v-btn--variant-outlined) .v-btn__content,
.white-text-btn:not(.v-btn--variant-outlined) .v-btn__append,
.white-text-btn:not(.v-btn--variant-outlined) .v-btn__prepend {
  color: #eee;
}

.green-text-btn .v-btn__content,
.green-text-btn .v-btn__append,
.green-text-btn .v-btn__prepend {
  color: var(--duo-light-green);
}

.green-outlined-btn .v-btn__content,
.green-outlined-btn .v-btn__append,
.green-outlined-btn .v-btn__prepend {
  color: var(--duo-dark-green);
}

.v-data-table {
  min-height: 100%;
  border-radius: 15px !important;
}

.v-data-table th,
.v-data-table td {
  height: 70px;

  padding: 0px !important;

  border: 1px solid var(--duo-light-green);
}

.v-data-table th {
  padding-left: 3px !important;
}

.v-data-table .v-table__wrapper {
  padding: 10px;
}

.v-data-table .v-data-table-header__content {
  font-weight: 600;
}

.v-breadcrumbs-item--disabled {
  opacity: 0.7 !important;
}

.v-breadcrumbs-divider {
  padding: 0 !important;
}

.rounded-search-field .v-field {
  border: 1px solid #99B1A2;
  border-radius: 10px;
}

.rounded-search-field .v-field__outline {
  display: none;
}

.v-expansion-panel-text {
  margin: 0 !important;
}

/* Utils */
.data-table-button {
  width: 34% !important;
  height: 52px !important;
  margin: 10px !important;

  border-radius: 45px !important;
}

.data-table-footer {
  width: 100%;

  background-color: white;
}

.data-table-footer .v-pagination,
.data-table-footer .v-pagination__list {
  padding: 0 !important;
  margin: 0 !important;
}

.edition-button {
  margin: 5px 0px;

  border-radius: 25px !important;
  color: white !important;
  background-color: var(--duo-orange) !important;
}

.green-bg {
  background-color: var(--duo-light-green) !important;
}

.validate-buttons {
  width: 100%;
  margin: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: stretch;
  flex-wrap: wrap;

  background-color: var(--duo-light-green);
}

.validate-buttons>* {
  margin: 5px;
}

.full-height {
  height: 100%;
}

.v-table-container {
  background-color: white;
  border-radius: 25px;

  /* elevation-10 */
  box-shadow:
    0px 6px 6px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)),
    0px 10px 14px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)),
    0px 4px 18px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12)) !important;
}

.link-alike {
  cursor: pointer !important;
  pointer-events: all !important;
}

.link-alike input{
  cursor: pointer !important;
}

.link-alike:hover {
  text-decoration: underline  !important;
}

/* Style for Vuetify compacted inputs*/

.compacted-input .v-field {
  font-size: 13px;
}

.v-input .v-label {
  opacity: 1;
}

.compacted-input:not(:has(.v-chip)),
.compacted-input .v-input__control:not(:has(.v-chip)) {
  height: 36px;
}

.compacted-input .v-input__details {
  display: none;
}

.compacted-input .v-text-field__suffix__text,
.compacted-input .v-field__input:not(:has(.v-chip)) {
  position: relative;
  top: -8px;
  font-size: 16px;
}

.compacted-input .v-field__append-inner {
  position: relative;
  top: -10px;
  font-size: 16px;
}

.compacted-input .v-field__prepend-inner {
  position: relative;
  top: -7px !important;
}

.compacted-input .v-field-label:not(.v-field-label--floating) {
  position: absolute;
  top: 15px !important;
}


/* Green card in v-dialog */
.green-card {
  min-width: 50% !important;
  color: black !important;
  background-color: var(--duo-light-green) !important;
}

.green-card .v-card-title {
  color: white !important;
  background-color: var(--duo-dark-green) !important;
  font-weight: 600;
}

/* Buttons */
.orange-btn {
  color: white !important;
  background-color: var(--duo-orange) !important;
  transition: 1s all;
}

.orange-btn:hover {
  color: black !important;
  background-color: var(--duo-bright-green) !important;
}

.white-text-btn:not(.v-btn--variant-outlined) .v-btn__content,
.white-text-btn:not(.v-btn--variant-outlined) .v-btn__append,
.white-text-btn:not(.v-btn--variant-outlined) .v-btn__prepend {
  color: white;
}