/* ******************************************** */
/* Used in:
      views/layouts/_footer.html.erb
*/
.footer {
  background-color: var(--primary);
}

.logo-footer {
  font-size: 38px;
}

.law-balance {
  font-size: 78px;
  color: white;
}

.elegir {
  background-color: var(--primary);
}

.elegir:hover {
  background-color: var(--secondary);
}

/* ******************************************** */
/* Used in:
      views/layouts/_notifications.html.erb
*/
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: var(--secondary);
  color: var(--black);
  padding: 4px;
  font-size: 12px;
  border-radius: 50%;
}

.dropdown-content {
  display: none;
  position: absolute;
  /* background-color: #f1f1f1; */
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a.pot {
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 8px;
  padding-left: 14px;
  text-decoration: none;
  display: block;
  text-align: left;
  color: var(--primary);
}

.dropdown-content a.bott {
  margin-top: -20px;
  margin-bottom: -4px;
  padding-left: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  color: var(--secondary);
}

.dropdown-content div.bg-mate:hover,
.dropdown-content div.bg-lightgrey:hover {
  background-color: var(--white);
}

.dropdown-content a.bott:hover {
  color: var(--danger);
}

.dropdown:hover .dropdown-content {
  display: block;
  left: -42px;
}

.dropdown:hover .dropbtn {
  background-color: var(--success);
}

.badge {
  position: absolute;
  top: 1px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: var(--danger);
  color: var(--white);
}

.unread-notify {
  font-size: 17px;
  line-height: 1;
  font-weight: bold;
}

.read-notify {
  font-size: 17px;
  line-height: 1;
}

/* ******************************************** */
/* Used in:
      views/layouts/_notification.html.erb
*/
.notification-date {
  font-size: 14px;
}

.notification-msg {
  line-height: 1.5;
}

/* ******************************************** */
/* users, used in:
      views/layouts/_turbo_dialog.html.erb
*/

dialog::backdrop {
  backdrop-filter: blur(5px);
}

.dialog-style {
  z-index: 10;
  border-radius: 0.375rem;
  border-width: 4px;
}


/* ******************************************** */
/* users, used in:
      views/layouts/application.html.erb
*/
.content-ext {
  max-width: 1250px;
  margin: auto;
}

.dark-mode {
  background-color: var(--dark);
  color: var(--lightgrey);
}

/*  --> Defined in: home.css
  .the-middle {
    flex: 50%;
    background-color: var(--whitemate);
  }
*/
.the-middle-dark {
  flex: 50%;
  background-color: #606060;
}

.overflow-hidden {
  overflow: hidden;
}

/* ******************************************** */
/* users, used in:
      views/layouts/mailer.html.erb

  NOTA. Vacío por el momento.
*/



/* ******************************************** */
/* users, used in:
      views/layouts/users.html.erb
*/
/*  --> Defined somewhere in this file
  .content-ext {
    max-width:1250px;
    margin: auto;
  }
*/
.fc-wrap {
  display: flex;
  flex-wrap: wrap;
}

.left-navbar {
  height: 100%;
  width: 180px;
  position: fixed;
  z-index: 1;
  top: 70px;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.main {
  flex: 100%;
}

.main-users {
  margin-left: 180px;
  /* Same as the width of the sidenav */
  padding: 0px 10px;
}

/* Responsive layout. Makes the side and the main sections, sit on top of each other instead of next to each other */
@media only screen and (max-width: 750px) {
  .fc-wrap {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

.fc-wrap-evenly {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
}