:root {
   --trans0: 200ms;
   --close-size: 32px;
   --close-size-img: calc(var(--close-size) - 8px);
}

p.seccion {
   max-width: var(--ancho);
   margin:.5rem auto;
   font-family: var(--font1);
   font-size:1.5rem;
   padding:.5rem;
}

.perfil {
   margin: 20px 0px;
   min-height: 50vh;
}

.contenedor {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-template-rows: repeat(16, minmax(50px, auto));
   grid-gap: 5px;
   max-width: var(--ancho);
   width: 98%;
   margin: auto;
}

.item {
   justify-items: center;
   align-items: start;
}

.sidebar {
   background: #e9f1f8;
   grid-column: 1 / 3;
   grid-row: 1 / 3;
   border-radius: 0 0 .5rem .5rem;
}

.sidebar > ul {
   list-style: none;
   text-transform: uppercase;
   font-family: var(--font0);
   font-weight: 900;
   padding: 0px 20px;
}

.sidebar > ul > li > a {
   display: block;
   text-decoration: none;
   font-size: 1.2rem;
}

.sidebar > ul > li {
   padding: 8px 0px;
   color: #000;
}

.sidebar > ul > li > a:hover {
   color: tomato;
}

.logout {
   max-width: 100%;
   background: red;
   text-align: center;
   border-radius: 5px;
   margin-top: 10px;
}

.logout:hover {
   opacity:0.85;
}

li.logout > a {
   color: white!important;
}

li.logout > a:hover {
   color: yellow!important;
}

.contenido {
   background: #f9f9f9;
   grid-column: 3 / 9;
   grid-row: 1 / 17;
}

.loguot-button {
    transition: box-shadow .2s cubic-bezier(0.4, 0, 1, 1),background-color .2s cubic-bezier(0.4, 0, 0.2, 1),color .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.logout-button--raised {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

.perfil-header {
   margin: 0;
}

.bg-verde {
   background: #2e6e00;
}

.bg-azul-marino {
   background: #00456e;
}

.titulo0 {
   padding-left: 20px;
   width: 100%;
   box-sizing: border-box;
}

.first-button {
   font-family: var(--font0);
   text-decoration: none;
   padding: 5px 20px;
   text-transform: uppercase;
   background: black;
   color: #fff;
   text-align: center;
   border-radius: 5px;
   margin-top: 10px;
   will-change: box-shadow;
   transition: box-shadow .2s cubic-bezier(0.4, 0, 1, 1),background-color .2s cubic-bezier(0.4, 0, 0.2, 1),color .2s cubic-bezier(0.4, 0, 0.2, 1);
}


.first-button:hover {
   opacity:0.85;
}

.first-button--raised {
   box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

.modalDialog {
   position: fixed;
   font-family: Arial, Helvetica, sans-serif;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: rgba(0,0,0,0.4);
   z-index: 99999;
   opacity: 0;
   -webkit-transition: opacity var(--trans0) ease-in;
   -moz-transition: opacity var(--trans0) ease-in;
   transition: opacity var(--trans0) ease-in;
   pointer-events: none;
}

.modalDialog:target {
   opacity:1;
   pointer-events: auto;
}

.modalDialog > div {
   width: 400px;
   position: relative;
   margin: 10% auto;
   padding: 15px;
   border-radius: 10px;
   background: #fff;
   -webkit-transition: opacity var(--trans0) ease-in;
   -moz-transition: opacity var(--trans0) ease-in;
   transition: opacity var(--trans0) ease-in;
}

.close {
   background: red;
   color: #FFFFFF;
   line-height: 25px;
   position: absolute;
   right: 5px;
   top: 5px;
   text-align: center;
   width: var(--close-size);
   height: var(--close-size);
   text-decoration: none;
   font-weight: bold;
   -webkit-border-radius: var(--close-size);
   -moz-border-radius: var(--close-size);
   border-radius: var(--close-size);
}

.close:hover { background: tomato; }

.close > FIGURE> IMG {
   width: var(--close-size-img);
   height: var(--close-size-img);
   position: relative;
   top: 4px;
}

.modalDialog > DIV > H2 {
   font-family: var(--font1);
}

.bModal {
   margin: 15px 0;
}

.p-botones {
   border-radius: 3px;
   padding: 8px 8px;
   text-decoration: none;
   font-size: 1rem;
   font-family: var(--font0);
   font-weight: 600;
   background: transparent;
   border: none;
   cursor: pointer;
}

.p-botones:hover {
   background: #f2f7ff;
}

.p-botones__active {
   color: black;
}

.p-botones__cancel {
   color: red;
}

@media (max-width: 768px) {
   .sidebar {
      grid-column: 1 / 9;
      grid-row: 14 / 17;
   }
   .contenido {
      grid-column: 1 / 9;
      grid-row: 1 / 14;
   }
   .btn-subscribe {
      width: 100%;
      box-sizing: border-box;
   }
}

th.fixed-column, th, td.fixed-column {
   text-transform: uppercase;
   font-family: var(--font0);
   font-size: 1rem;
}

th.fixed-column, td.fixed-column {
   border-right: 2px solid #e9ecef;
}

th.fixed-column {
   background-color: white;
}

td.fixed-column {
   background-color: #F2F3F4;
}

td.fixed-column.strip {
   background-color: #ffffff;
}

th, td {
   padding: .55rem!important;
   border-top: 1px solid #e9ecef;
   border-bottom: 1px solid #e9ecef;
}

th {
   border-bottom: 2px solid #e9ecef;
   background-color: #ffffd2!important;
}

/* Code from GPTChat Start */
.table-container {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

table {
   /*border-collapse: collapse;
   white-space: nowrap;
   border: 1px black solid;*/
   width: 100%;
}

th, td {
   text-align: center;
   padding: 8px;
   /*border: 1px solid black;*/
   min-width: 75px;
   font-size: 1rem!important;
}

tr:nth-child(even) {
   background-color: #F2F3F4;
}

tr:nth-child(odd) {
   background-color: #ffffff;
}

.fixed-column {
   position: sticky;
   left: 0;
   /*background-color: white;*/
   z-index: 1;
   min-width: 170px;
   text-align: left;
}
/* Code from GPTChat End */

@media (max-width: 768px) {
   table {
      border-left: 0;
   }
   .fixed-column {
      left: 1px;
      min-width: 45vw;
   }
}

.remark-text {
   background-color: #ffffd2;
   padding: 1rem;
   box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
   margin: 3rem 0;
}

.header-text {
   font-size: 1rem;
   margin-bottom: 0.5rem;
}

.liguita {
   color: blue;
}