.account {
  height: calc(100vh - 48px);
}

.account-container {
  padding: 11.5px;
}

.account-container .input-box {
  width: 48%;
}

.account-container .line .input-box {
  width: 50%;
}

.account-container .line {
  min-height: 32px;
}

.account-container .input-field {
  height: 32px;
  color: var(--gray-500);
  padding-right: var(--spacing-4);
  padding-left: var(--spacing-4);
}

.account .tab-content {
  width: 100%;
  height: calc(100vh - 72px);
}

.account .tabs {
  width: 100%;
  padding: 0;
  height: calc(100vh - 72px);
}

.account .tabs__list {
  min-width: 20%;
  height: calc(100vh - 72px);
  padding: 6.5px 11.5px 22.5px 0px;
}

.account .tabs__button {
  width: 100%;
}

.account .tabs-separator {
  top: -1.5rem;
  height: calc(100vh - 48px);
}

.account .tabs__button i {
  font-size: var(--font-size-base);
}

.account .tabs.vertical .tabs__button .tab_label {
  min-width: 0;
  text-align: start;
}

.accounts-show .account, .accounts-show .tabs, .accounts-show .tab-content {
  max-height: calc(100vh - 96px);
}

.account-profile .btn-actions {
  width: 370px;
  border: 0;
}

.account-profile .form-actions {
  max-width: 72.5%;
  bottom: 32px;
}

.account .customer-card {
  flex: 1 1 45%;
  max-width: calc(50% - 12px);
  min-height: 16,5%;
}

.account-container .customer-logo {
  display: inline-block;
  width: 104px;
  height: 48px;
}

.account .customer-logo img {
  min-width: 120px;
  max-height: var(--spacing-20);
  display: block;
}

.account-section {
  padding: var(--spacing-10);
}


.account .account-container .tabs {
  gap: var(--gap-xl);
}

.account .account-container .tabs__list{
  height: auto;
  padding: 0;
  min-height: var(--spacing-10);
}

.account .account-container .tabs__button {
  border-radius: 0;
  height: var(--spacing-10);
  min-width: 160px;
  width: auto;
  padding: var(--spacing-1) var(--spacing-4);
}

/* Fix para evitar scroll desnecessário na seção my_companies */
.account .account-container .tabs.horizontal {
  height: auto;
  max-height: none;
}

.account .account-container .tabs.horizontal .tab-content {
  height: auto;
  max-height: none;
  overflow: visible;
}

.account .account-container .generic-table{
  position: relative;
}

.account .tooltip {
  position: fixed;
}

.account .tooltip-wrapper button {
  background: transparent;
  color: var(--blue-700);
  font-size: var(--font-size-base);
  padding: var(--spacing-4);
}

.account .tooltip .tooltip-text {
  text-align: center;
  padding-right: 28px;
  padding-left: 28px;
}

.account .tabs.horizontal .tabs__list {
  flex-direction: var(--flex-direction-row);
  gap: var(--spacing-1);
}

@media (max-width: 767px){
  .accounts-show #logo_purple_middle {
    display: flex;
  }

  .accounts-show .navbar {
    border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
  }

  .accounts-show .tabs.vertical .tabs__list {
    display: none;
  }

  .accounts-show .drawer__content .tabs.vertical .tabs__list {
    display: flex;

  }

  .accounts-show .drawer__content {
    padding: var(--spacing-5) var(--spacing-4) var(--spacing-5) var(--spacing-4);
    gap: var(--gap-lg);
  }

  .accounts-show .tabs.vertical {
    gap: 0;
  }

  .accounts-show .tab-content {
    padding-top: var(--spacing-6);
  }

  .account-container {
    padding: 0 var(--spacing-6) 0 var(--spacing-6);
    gap: var(--gap-lg);
  }

  .account-container h2 {
    font-size: var(--font-size-lg);
  }

  .account-profile .line {
    flex-direction: var(--flex-direction-col);
    min-height: 32px;
  }

  .account-container  .input-box, .account-container .line .input-box {
    width: 100%;
  }

  .linked-customers {
    flex-direction: var(--flex-direction-col);
  }

  .account .customer-card {
    width: 100%;
    max-width: 100%;
    align-items: var(--items-start);
    padding: var(--spacing-4);
  }

  .account .customer-card .customer-logo {
    height: var(--spacing-10);
    width: var(--spacing-10);
  }

  .account .customer-card .customer-logo span {
    font-size: var(--font-size-xl);
  }

  .account .customer-card .customer-info-box h3 {
    font-size: var(--font-size-sm);
  }

  .account .customer-card .customer-info a {
    font-size: var(--font-size-xs);
  }

  .account .plain-table table {
    width: max-content;
  }

  .account .plain-table th,
  .account .plain-table td {
    white-space: nowrap;
  }
}