/* -----------------------------------------------
------------------- VARIABLES --------------------
----------------------------------------------- */

:root {
  --primary-text-color: #333333;
  --primary-text-color-hover: #545454;
  --body-background-color: #ffffff;
}

/* -----------------------------------------------
------------------- MAIN BODY --------------------
----------------------------------------------- */

body {
  background: var(--body-background-color);
  color: var(--primary-text-color);
  font-family: 'Open Sans', 'Arial', sans-serif;
}

b {
  font-weight: 700;
}

.container {
  overflow: auto; /* would not need this, with a proper grid */
  margin-top: 30px;
  display: grid;
}

/* Medium sized screens (900px < width < 1400px) */
.new-grid-container {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 
    "lt cnt rt";
  margin-top: 30px;
}

/* Wide screens (> 1400px wide) */
@media (min-width: 1400px) {
  .new-grid-container {
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
      "lt cnt rt";
  }
}

/* Small Screens (< 900px wide) */
@media (max-width: 900px) {
  .new-grid-container {
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
      "lt cnt rt";
  }
}

.new-grid-section {
  margin: 0px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 11px;
  box-shadow: 0 2px 13px -5px #000;
}

.new-responsive-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -5px;
	margin-left: -5px;
}


/* -----------------------------------------------
-------------------- GENERAL ---------------------
----------------------------------------------- */

.centered-contents {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-flex-wrap {
  display: flex; 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
}

.row-flex {
  display: flex;
}

/* -----------------------------------------------
------------------- TEXT COLOR -------------------
----------------------------------------------- */

.custom-text-color {
  color: var(--primary-text-color);
}

a.custom-text-color:hover {
  color: var(--primary-text-color-hover);
}

h1, h2 {
  margin-bottom: 20px;
}

/* -----------------------------------------------
---------------- BACKGROUND COLOR ----------------
----------------------------------------------- */

.parte-default-color {
  background-color: #e1e1e1 !important;
}

.campamento-7 {
  /* Cumbres */
  background-color: #70b37a !important;
}

.campamento-6,
.campamento-5 {
  /* Senet y Aneto */
  background-color: #768bd2 !important;
}

.campamento-12 {
  /* Río Arriba */
  background-color: #db936a !important;
}

.campamento-11 {
  /* Somolinos */
  background-color: #e6c75c !important;
}

.campamento-fallback {
  /* Somolinos */
  background-color: #434343;
}

/* -----------------------------------------------
---------------------- URL -----------------------
----------------------------------------------- */

.cw-url {
  color:rgb(63, 63, 63);
  text-decoration: underline dotted #000000;
}

.cw-url:hover {
  color:rgb(63, 63, 63);
}

.cw-url-accent {
  color:rgb(31, 130, 223);
  text-decoration: underline dotted rgb(31, 130, 223);
}

.cw-url-accent:hover {
  color:rgb(31, 130, 223);
}

/* Table URLs TODO: Remove when all tables are moved to the table component*/
.table-url {
  color: rgb(63, 63, 63);
  text-decoration: underline dotted #000000;
}

.table-url:hover {
  color: rgb(63, 63, 63);
}


/* -----------------------------------------------
----------------- DATOS MODELOS ------------------
----------------------------------------------- */

.item-perfil-usuario { /* Not used?? */
  width: 50%; 
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.profile-data-item {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.user-image {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

.input-container {
  display: flex; flex-direction: row-reverse;
}

/* -----------------------------------------------
----------- STYLES FOR MOBILE/DESKTOP ------------
----------------------------------------------- */

@media screen and (max-width: 480px) {
  .show-on-desktop {
    display: none;
  }
}

@media screen and (min-width: 481px) {
  .hide-on-desktop {
    display: none;
  }
}


/* -----------------------------------------------
--------------------- TABLES ---------------------
----------------------------------------------- */


.cw-table {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
  table-layout:fixed; /* quitar esta linea y `overflow: hidden;text-overflow:ellipsis;white-space: nowrap;` en `.cw-table th, .cw-table td` para mostrar todo el texto con wrapping en las tablas */
}

.cw-table th {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
  min-width: 10px;
}

.cw-table td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
  overflow: hidden;text-overflow:ellipsis;white-space: nowrap;/* quitar esta linea y `table-layout:fixed;` en `.cw-table` para mostrar todo el texto con wrapping en las tablas */
}

.cw-table tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

.cw-table tr.header {
  /* Add a grey background color to the table header and on hover */
  background-color: #e5e5e5;
}

.cw-table tr:not(.header):hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f9f9f9;
}


/* -----------------------------------------------
------------------ CONTENT BOXES -----------------
----------------------------------------------- */

.general-content-card {
  margin: 0px;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 11px;
  box-shadow: 0 2px 13px -6px #000;
  display: flex; 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
}