/* CSS code */

 /* @import url('https://fonts.cdnfonts.com/css/oscine-trial'); /* Oscine Trial */
 @import url('https://use.typekit.net/lje7wql.css');
 /* oscine (Adobe) */
 @import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&display=swap');

 :root {

   /* Fonts */
   /* --fontPrimary: "Oscine Trial"; */
   --fontPrimary: "oscine";
   --fontSecondary: "Maven Pro";

   /* Color styles */
   --white: rgba(255, 255, 255, 1);
   --primary: rgba(129, 212, 26, 1);
   --secondary: rgba(0, 81, 101, 1);
   --tertiary: rgba(192, 250, 255, 1);
   --ok: rgba(3, 191, 86, 1);
   --ko: rgba(200, 25, 95, 1);
   --neutral: rgba(233, 165, 29, 1);
   --alert: rgba(238, 130, 41, 1);
   --text: rgba(75, 75, 75, 1);
   --gama3: rgba(0, 166, 117, 1);
   --gama4: rgba(0, 138, 131, 1);
   --gama5: rgba(69, 127, 141, 1);
   --grey02: rgba(206, 206, 206, 0.20000000298023224);
   --grey0: rgba(206, 206, 206, .25);
   --grey1: rgba(206, 206, 206, 1);
   --grey2: rgba(159, 159, 159, 1);
   --grey3: rgba(116, 116, 116, 1);
   --grey4: rgba(75, 75, 75, 1);
   --grey5: rgba(29, 29, 27, 1);
   --energy-p1: rgba(0, 81, 101, 1);
   --energy-p2: rgba(0, 138, 131, 1);
   --energy-p3: rgba(129, 212, 26, 1);
   --tertiary-p1: rgba(200, 25, 95, 1);
   --tertiary-p2: rgba(238, 130, 41, 1);
   --tertiary-p3: rgba(233, 165, 29, 1);
   --tertiary-p4: rgba(244, 221, 131, 1);
   --tertiary-p5: rgba(129, 212, 26, 1);
   --tertiary-p6: rgba(3, 191, 86, 1);
   --rainy: rgba(96, 199, 208, 1);

   /* Text-size styles */
   --font-size: 16px;
   --h1: 1.2rem;

   /* Container */
   --max-width: 1200px;
   --min-width: 960px;

 }


 body {
   font-family: var(--fontPrimary), sans-serif;
   font-size: var(--font-size);
   margin: 0;
   padding: 0;
 }

 input,
 select,
 textarea {
   font-family: var(--fontSecondary), sans-serif;
 }

 main {
   padding: 2rem;
 }

 h1,
 h2,
 h3 {
   color: var(--gama5);
   margin: 0;
 }

 h1 {
   text-transform: uppercase;
   font-weight: lighter;
   font-size: var(--h1);
 }

 a {
   color: var(--neutral);
   text-decoration: none;
 }

 a:hover {
   color: var(--alert);
 }

 .error {
   color: var(--ko);
 }

 .icon {
   width: 1.5rem;
   height: 1.5rem;
   padding: 0 .25rem;
 }

 header {
   padding: .25rem 0rem;
   border-bottom: 1px solid var(--grey1);
 }

 header h1 {
   display: flex;
   align-items: baseline;
 }

 header h1 svg {
   margin-right: .5rem;
   width: 137px;
   height: 22px;
 }

 header nav a {
   color: var(--secondary);
   font-weight: bold;
 }


 nav,
 nav a {
   text-decoration: none;
 }

 main header {
   border: none;
   padding: 4rem 0;
 }


 /* GRID */
 .container {
   max-width: var(--max-width);
   /* min-width: var(--min-width); */
   margin: 0 auto;
   padding: .5rem 1rem;
 }

 .overflow {
   max-width: var(--max-width);
   overflow-x: auto;
 }

 .row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }

 .row-end {
   justify-content: flex-end;
 }

 .row-center {
   justify-content: center;
 }

 .row-between {
   justify-content: space-between;
 }


 /* TABLE */
 table {
   border-collapse: collapse;
   width: 100%;
   min-width: var(--min-width);
 }


 th,
 td {
   text-align: left;
   padding: .5rem;
   border-bottom: 1px solid var(--grey1);
 }

 th {
   vertical-align: bottom;
   font-weight: lighter;
   color: var(--grey3);
 }

 .data-table th {
   cursor: pointer;
 }

 .ascending::after,
 .descending::after {
   margin: .5rem;
   font-size: .5rem;
   content: " ▲";
 }

 .descending::after {
   content: " ▼";
 }


 .td-small {
   max-width: 4rem;
 }


 tr:nth-child(even) {
   background-color: var(--grey0);
 }


 tbody tr:hover {
   background-color: var(--grey1);
 }


 /* FORM */
 input,
 select,
 textarea {
   width: 100%;
   padding: .5em;
   margin: .25em 0;
   box-sizing: border-box;
   border: var(--grey1) 1px solid;
   border-radius: .3em;
   font-weight: bold;
 }

 input.error,
 select.error,
 textarea.error {
   border-color: var(--ko);
   border-width: 2px;
 }

 ::placeholder {
   opacity: 0.5;
 }

 fieldset {
   border: none;
   padding: .25rem;
   /* max-width: 18.9rem; */
   width: 100%;
 }

 #item-form fieldset {
   max-width: 18.9rem;
 }

 label {
   display: block;
   width: 100%;
   border-bottom: solid 1px var(--grey1);
 }

 .item-actions {
   text-align: right;
   width: 6.5rem;
 }

 .item-view input,
 .item-view select {
   background-color: transparent;
   border: none;
   font-weight: bold;
   padding-left: 0;
   /* font-size: 1.1rem; */
   opacity: 1;
   color: inherit;
 }


 /* BUTTONS */
 button {
   font-weight: bold;
   display: inline-block;
   padding: 1em 3em;
   margin: .5rem;
   border: none;
   border-radius: 1.5rem;
   cursor: pointer;
   margin-right: 4px;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   transition: all 0.3s ease-in-out;
   background-color: var(--neutral);
   color: white;
 }

 .outline-button {
   color: var(--neutral);
   border: 2px solid var(--neutral);
   background-color: transparent;
 }

 .outline-button:hover {
   color: var(--grey3);
   background-color: var(--grey1);
   border-color: var(--grey3);
 }

 button:hover {
   background-color: var(--alert);

 }




 /* MODAL */
 .modal {
   display: none;
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, .5);
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
 }



 .modal-content {
   background: white;
   margin: 2rem auto;
   max-width: var(--min-width);
   min-width: var(--min-width);
   border: solid 1px var(--grey1);
   overflow-y: auto;
   overflow-x: hidden;
   max-height: calc(100vh - 4rem);
 }

 .modal-main {
   padding: .25rem .5rem;
 }

 .modal-header {
   border-bottom: solid 1px var(--grey1);
   padding: .5rem;
 }

 .modal-footer {
   padding: 2rem 1rem;
 }

 .modal-smart .modal-content {
   min-width: 20.75rem;
   width: 20.75rem
 }


 .site-footer {
   text-align: center;
   font-size: 0.875rem;
   padding: 1em 0;
   margin-top: 2em;
   border-top: 1px solid var(--primary);
 }



 @keyframes rotate {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }


 /* LOADING  */
 .loading .modal {
   display: none;
 }

 .loading .modal-loading {
   display: flex !important;
   justify-content: center;
 }

 .loading .modal .loading-spinner {
   border: 4px solid var(--secondary);
   border-top: 4px solid var(--primary);
   border-radius: 50%;
   width: 40px;
   height: 40px;
   animation: rotate 1s linear infinite;
   margin: 50px auto;
 }

 /* MEDIA QUERIES */
 @media (max-width: 960px) {
   .hidden-xs {
     display: none;
   }

   .overflow {
     max-width: var(--min-width);
   }

   main {
     padding: .5rem;
     ;
   }

   main .row {
     flex-direction: column;
   }

   header {
     text-align: center;
   }

   .modal-header.row-between,
   .site-header .row-between {
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: flex-start;
   }

   .modal-content {
     min-width: 100%;
     margin: 0 auto;
     max-height: 100vh;
     width: 100%;
     overflow: auto;
   }

   .modal-smart .modal-content {
     /* min-width: 100%; */
     width: 100%;
   }

   .modal-footer {
     padding-bottom: 4rem;
   }



   #item-form fieldset {
     max-width: 100%;
     padding: 0;
   }

   .overflow .item-inversorName {
     padding-right: 7rem;
   }

   .overflow .item-actions {
     position: absolute;
     right: 0;
     background-color: white;
     height: 1rem;
     display: block;
     border: none;
     border-radius: 1rem;
     margin-top: 3px;
     padding-right: 1em;
   }

   .overflow thead .item-actions {
     height: 2rem;
     opacity: .85;
   }
 }