:root {
  --nav-height: 48px;
  --green: #00ae62;
  --green-hover: #017945;
}

.navbar {
  padding: 0.1rem !important;
}

.navbar-expand .navbar-nav .nav-link,
.navbar-brand {
  padding-right: 1.2rem;
  padding-left: 1.2rem;
}

.navbar-expand .navbar-nav .nav-link,
nav .navbar-brand span {
  font-family: "Source Sans Pro" !important;
}

#company-logo {
  max-height: calc(var(--nav-height) - 0.825rem);
}

#free-trial-btn,
#free-trial-ended-btn-amalia,
#unable,
#cancelled {
  font-size: 0.8rem;
  font-weight: 400;
  color: white;
  font-family: "Source Sans Pro";
}

.free-trial-title {
  font-size: 20px;
  color: var(--green);
  font-weight: bolder;
}

.free-trial-title.amalia {
  color: #00c0cb;
}

.unable-title,
.cancelled-title {
  font-size: 20px;
  color: #dc3545;
  font-weight: bolder;
}

.nav-link {
  padding: 0.15rem 1rem;
}

.nav-item {
  padding: 8px;
}

#parrafo-trial {
  font-weight: bold;
  margin-bottom: 7px !important;
}

#link-trial {
  color: var(--green);
  font-size: 0.75rem;
  font-style: italic;
}

#btn-upgrade {
  background-color: var(--green);
  color: white !important;
}

#btn-uabled {
  background-color: #dc3545;
  color: white !important;
}

#btn-upgrade:hover {
  cursor: pointer;
  background-color: var(--green-hover);
}

.clock {
  font-size: 1.5rem;
  color: #00000099;
  border: 2px solid #00000099;
  padding: 6px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.exclamation {
  font-size: 2.5rem;
  color: #00000099;
  padding: 6px;
  width: 2.5rem;
  height: 2.5rem;
}

.nav-item.contrast a {
  color: white !important;
  font-weight: 600;
}

.dropdown-menu.contrast {
  background-color: #2a2f32;
}

.dropdown-item.contrast {
  background-color: unset;
}

.icons {
  justify-content: right !important;
}

.nav-item {
  margin-right: 0px;
}

.navbar > .btn-unable,
.navbar > .btn-cancelled {
  float: left !important;
}

@media only screen and (min-width: 992px) {
  .title {
    display: none;
  }
}

@media only screen and (max-width: 992px) {
  .nav-item {
    padding-left: 25px !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  .dropdown-menu {
    background: #474747;
    color: azure;
  }

  .dropdown-item {
    color: azure;
  }
}

.navbar-brand {
  padding-right: 0px !important;
}

#popoverUnpaid,
#popoverCancel {
  font-size: 2.5rem !important;
  color: #00000099 !important;
  padding: 6px !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
}

#disableUser,
#enableUser,
#companySetup {
  background-color: #2a2f32;
  border-radius: 10px;
}

#companySetup i.fas {
  color: #d9d9d9;
}

#enableUser i.fas {
  color: #dc3545;
}

#disableUser i.fas {
  color: #0aa52c;
}

nav.navbar ul.navbar-nav .tooltip {
  z-index: 1110;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

.error-calendar {
  margin-right: 6px;
}

#calendar-item {
  display: none;
}

#dynamic-options-menu {
  /* max-height: 33rem; */
  max-height: calc(100vh - var(--nav-height) - 3rem);
  max-width: 355px;
  overflow-y: auto;
  overflow-x: hidden;
}

#dynamic-options-menu .overflow-hidden {
  max-width: 25em;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.btn-settings-calendars {
  width: inherit;
  min-width: 15em;
  background-color: #2a2f32;
}

#settings-calendars:hover {
  background-color: transparent;
}

.btn-add-appointment,
.btn-calendar-browser {
  width: 100%;
  min-width: 15em;
}

.btn-add-appointment:focus,
.btn-add-appointment:active {
  outline: none;
  box-shadow: none;
  background-color: initial;
  color: initial;
}

#add-appointment:hover,
#calendar-browser:hover {
  background-color: transparent;
}

.main-title {
  text-align: left;
}

.text-dark-for-title {
  color: #6c757d;
}