@charset "UTF-8";

:root {
   --panell-standard-width: 95%;
}

@media screen and (max-width: 695px) {
   :root { --panell-standard-width: 96%; }
}
@media screen and (max-width: 570px) {
   :root { --panell-standard-width: 97%; }
}
@media screen and (max-width: 445px) {
   :root { --panell-standard-width: 98%; }
}
@media screen and (max-width: 320px) {
   :root { --panell-standard-width: 98%; }
}

@font-face {
  font-family: 'PermanentMarker';
  src: url('/css/PermanentMarker-Regular.ttf') format('truetype');
  font-display: swap;
}
* {
   box-sizing: border-box;
   font-size: 17px;
}
/*******************************************************************************
        BODY
*******************************************************************************/
body {
   height: 100%;
   margin: 0px;
   padding: 0px;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #f4f6f8;
   //background: linear-gradient(to right, #1E3C72, #2A5298); /* night mode */
}
/*******************************************************************************
        CONTENEDOR PRINCIPAL
*******************************************************************************/
#container {
   display: flex;
   flex-direction: column;
   /* Aquí diem que volem usar la variable '--vh' com a min-height (però si no
   està declarada usarem el valor '100vh')
   La variable '--vh' es declara en un javascript a "primari-lib.pl" en la
   funció setFullHeight() i correspon al tamany de la finestra que informa
   el ja a la variable window.innerHeight */
   min-height: var(--vh, 100vh); /* --vh is window.innerHeight in px,set in js*/
}
/*******************************************************************************
        TOP
*******************************************************************************/
.top {
   overflow: hidden;
   display: flex;
   justify-content: space-between;
   align-items: stretch;
   background-color: #338;
}
.top a {
   font-size: 17px;
   color: #f2f2f2;
   text-decoration: none;
   /*background-color: #55a;*/
}
.top p {
   margin: 0px;
   padding: 0px 16px;
   font-size: 48px;
   line-height: 48px;
   color: yellow;
   font-family: PermanentMarker;
   /*background-color: #449;*/
   border: 0px solid yellow;
}
.custom-select {
   width: 48px;
   height: 42px;
   padding: 3px 0px;
   text-align: center;
   /*background-color: #66b;*/
   border: 0px solid yellow;
}
.top select {
   width: 42px;
   height: 42px;
   background-color: #338;
   color: #ccc;
   border-radius: 25px;
   border: 3px solid #449;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   text-align: center;
   cursor: pointer;
}
.flex-left {
   min-width: 48px;
   min-height: 48px;
   display: flex; /* per evitar els espais entre elements */
   border: 0px solid yellow;
}
.flex-center {
   min-width: 48px;
   min-height: 48px;
   display: flex; /* per evitar els espais entre elements */
   border: 0px solid yellow;
}
.flex-right {
   min-width: 48px;
   min-height: 48px;
   display: flex; /* per evitar els espais entre elements */
   border: 0px solid yellow;
}
.hamburger {
   padding: 14px 16px;
   display: none;
   color: #ccc;
   background: none;
   border: none;
   cursor: pointer;
}
.user-select {
   padding: 3px 0px 0px 3px;
   width: 45px;
   height: 45px;
   border: 0px solid yellow;
   cursor: pointer;
}
.name, .user {
   width: 42px;
   height: 42px;
   border-radius: 25px;
   border: 3px solid #449;
   text-align: center;
   font-size: 18px;
   line-height: 38px;
   color: #ccc;
   background-color: #55b;
   /*border: 0px solid pink;*/
}
.basket-select {
   position: relative;
   padding: 3px 0px 0px 3px;
   width: 45px;
   height: 45px;
   border: 0px solid yellow;
   cursor: pointer;
}
.basket {
   padding: 4px 0px;
   width: 36px;
   /*height: 36px;*/
   height: auto;
   /*border: 0px solid pink;*/
}
div.basketItems {
   position: absolute;
   top: 10px;
   left: 4px;
   width: 100%;
   text-align: center;
   padding: 0px;
}
span.basketItems {
   background-color: green;
   color: #ccc;
   padding: 1px 4px;
   font-size: 14px;
   font-weight: bold;
   border-radius: 9px;
   border:1px solid #ddd;
}
/* quan el width està per sota de 768px */
@media screen and (max-width: 768px) {
   * {
      xfont-size: 14px;
   }
   .top p {
      padding: 0px 12px;
      font-size: 36px;
   }
   .menu a {
      xfont-size: 1.1vw;
   }
}
/* quan el width està per sota de 425px */
@media screen and (max-width: 425px) {
   * {
      xfont-size: 11px;
   }
   .top p {
      padding: 0px 6px;
      font-size: 30px;
   }
}
/* quan el width està per sota de 375px */
@media screen and (max-width: 375px) {
   * {
      xfont-size: 9px;
   }
   .top p {
      padding: 0px 0px;
      font-size: 20px;
   }
}
/*******************************************************************************
        BARRA DE NAVEGACIÓN
*******************************************************************************/
.menu {
   overflow: hidden;
   background-color: #33d;
}
.menu a {
   box-sizing: border-box;
   width: calc(100% / 11);
   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 5px;
   text-decoration: none;
   font-size: 15px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.menu a:hover {
   background-color: #ddd;
   color: black;
}
.menu a.active {
   background-color: #3bf;
   //color: white;
   color: black;
}

/* quan el width està per sota de 1200px */
@media screen and (max-width: 1200px) {

  .top .hamburger { display: block; }

  .menu a {display: none; font-size: 20px; width: 100%; }

  .menu.showUp a {
    display: block;
    float: none; /* això fa que ocupi tot el width de la pantalla */
    text-align: left;
  }
}
/*******************************************************************************
        CUERPO
*******************************************************************************/
#cuerpo {
   width: 100%;
   margin: 0px auto;
   position: relative;
   flex: 1; /* This makes sure the content takes up all available space */
}
table.topline {
   border-collapse: collapse;
   width: 100%;
   height: 40px;
   background-image:url(/images/top_nav.jpg);
   background-repeat: repeat-x;
   td {
      padding: 0px;
      text-align: center;
      color: #dddddd;
      font-size:14px;
   }
}
.domexp {
   width: var(--panell-standard-width);
   max-width: 820px;
   text-align: center;
   padding: 0px;
   margin: 16px auto 0px auto;
   table {
      margin: 0px auto;
      width: 100%;
      border: 1px solid #d8dde3;
      border-radius: 8px;
      border-spacing: 0px;
      background: #f8f9fa;
      box-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
      overflow: hidden;
   }
   td {
      width: 50%;
      padding: 12px 15px;
      border: 0px solid black;
   }
   h2 {
      margin: 0px;
      font-size: 18px;
      line-height: 1.3;
   }
   .domexp-domain {
      color: #5f6771;
   }
}
.assistent {
   width: 80%;
   margin: 10px auto;
   max-width: 820px;
   margin: 10px auto 10px auto;
   padding: 10px 0px;
   .inside {
      width: 100%;
      border: 1px solid #ccc;
      margin: auto;
      max-width: 538px;
   }
}
.listentries {
   width: var(--panell-standard-width);
   margin: 10px auto;
   max-width: 820px;
   margin: 10px auto 10px auto;
   padding: 10px 0px;
   /*background-color: pink;*/
   table {
      width: 100%;
      margin: 0px auto;
      table-layout: fixed;
      border-collapse: collapse;
   }
   th {
      height: 21px;
      background-color: #8cf;
      border: 1px solid #999;
      padding: 2px 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
   }
   td {
      border: 1px solid #ccc;
      /*background-color: #ffa;*/
      background-color: #eff;
      padding: 2px 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
   a, font, td, th {
      font-size: 14px;
   }
   input[type=image], img {
      width: 16px;
      height: 16px;
   }
   form {
      margin: 0px;
   }
   /* Make placeholder text dimmer */
   textarea::placeholder {
      color: #ccc;
      font-style: italic;
      opacity: 1;
   }
   i {
      font-size: 1.0em;
      color: #44f;
   }
   b {
      font-size: 1.0em;
   }
   .inactive {
      background-color: #eee;
   }
   .sizetd {
      padding: 0px;
      border: 0px solid #ccc;
   }
   #buscador {
      width: 50%;
      margin: auto;
      max-width: 300px;
   }
}

.owner-change-panel {
   table-layout: fixed;
}
.owner-change-panel td {
   white-space: normal;
   overflow-wrap: anywhere;
   vertical-align: top;
}
.owner-change-panel td:first-child {
   width: 25%;
}
.owner-change-panel td:last-child {
   width: 75%;
}
.owner-change-cell {
   line-height: 1.35;
}
.owner-change-label {
   vertical-align: top;
}
.owner-change-message {
   display: block;
   margin-top: 0;
   font-size: 14px;
   color: inherit;
   visibility: visible;
}
.owner-change-summary,
.requested-change-summary {
   margin-top: 0;
   padding: 0;
   border-radius: 0;
   font-size: inherit;
   line-height: 1.3;
   color: inherit;
   background: transparent;
   display: block;
}
.listentries .owner-change-summary,
.listentries .owner-change-summary div,
.listentries .owner-change-summary span,
.listentries .requested-change-summary,
.listentries .requested-change-summary div,
.listentries .requested-change-summary span {
   font-size: inherit;
}
.owner-change-summary-title,
.requested-change-summary-title {
   font-weight: bold;
   margin-bottom: 2px;
}
.owner-change-summary span,
.requested-change-summary span {
   font-weight: bold;
}

.sam-owner-change-table {
   width: 100%;
}

.sam-owner-change-error td {
   background-color: #ffe5e5;
   color: #9f1239;
   font-weight: bold;
}

.sam-owner-change-error a {
   color: #7f1d1d;
}

.transfer-out-panel {
   table-layout: fixed;
}
.panell-form .transfer-out-panel {
   width: 100%;
   max-width: none;
   box-sizing: border-box;
}
.transfer-out-panel td {
   white-space: normal;
   overflow-wrap: anywhere;
   vertical-align: top;
}
.transfer-out-panel td:first-child {
   width: 25%;
}
.transfer-out-panel td:last-child {
   width: 75%;
}
.transfer-out-result {
   display: none;
}
.transfer-out-note {
   margin: 6px 0 0 0;
   font-size: 0.9em;
   line-height: 1.35;
   white-space: normal;
}
.transfer-out-button-row {
   margin-top: 8px;
   margin-bottom: 12px;
}
.domain-lock-button-row {
   margin-top: 8px;
   margin-bottom: 12px;
}
.domain-lock-icon {
   display: inline-block;
   min-width: 1.4em;
}
.transfer-lock-button {
   margin-left: 8px;
}
.transfer-lock-button:disabled {
   background-color: #8c959f;
   color: #f6f8fa;
   cursor: not-allowed;
   opacity: 0.75;
}
.panell-status-row td {
   padding-top: 0;
   max-width: 0;
   overflow: hidden;
}
.panell-status-line {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 2px;
   box-sizing: border-box;
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
   min-height: 24px;
   margin: 3px 0 7px 0;
   padding: 5px 8px;
   border-radius: 4px;
   font-size: 14px;
   font-style: italic;
   color: #24292f;
   visibility: visible;
}
.panell-status-main {
   display: flex;
   align-items: center;
   gap: 6px;
   width: 100%;
   min-width: 0;
}
.panell-status-detail {
   width: 100%;
   min-width: 0;
   font-size: inherit;
   font-style: inherit;
   line-height: 1.3;
}
.panell-status-detail:empty {
   display: none;
}
.panell-status-error {
   color: #dc3545;
}
.panell-status-line:empty {
   visibility: hidden;
}
.panell-status-line span:empty {
   display: none;
}
.panell-status-line span {
   font-size: inherit;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}
.panell-status-countdown {
   margin-left: auto;
   white-space: nowrap;
}
.panell-status-line.panell-status-stacked {
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
}
.panell-status-line.panell-status-stacked span {
   max-width: 100%;
   white-space: normal;
   overflow-wrap: anywhere;
}
.panell-status-main #transfer-live-text {
   overflow-wrap: normal;
}
.panell-status-line.panell-status-stacked .panell-status-countdown {
   flex: 0 0 auto;
   white-space: nowrap;
   overflow-wrap: normal;
}
.panell-status-detail > span {
   display: block;
}
.panell-status-main span {
   display: inline;
}
.panell-status-light {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   flex: 0 0 auto;
}
.panell-status-gray {
   background: #f1f3f5;
   color: #57606a;
}
.panell-status-gray .panell-status-light {
   background: #6e7781;
}
.panell-status-orange {
   background: #fff4d6;
   color: #6f4e00;
}
.panell-status-orange .panell-status-light {
   background: #d97706;
}
.panell-status-green {
   background: #dafbe1;
   color: #116329;
}
.panell-status-green .panell-status-light {
   background: #2da44e;
}
.panell-status-red {
   background: #ffebe9;
   color: #82071e;
}
.panell-status-red .panell-status-light {
   background: #d1242f;
}
.domain-action-status {
   display: flex;
   align-items: center;
   gap: 6px;
   min-height: 1.35em;
   margin-top: 6px;
   font-size: 0.92em;
   white-space: normal;
   visibility: hidden;
}
.listentries .owner-change-message {
   font-size: 14px;
   line-height: normal;
   display: inline;
}
.listentries .panell-status-line,
.listentries .panell-status-main,
.listentries .panell-status-main span {
   font-size: 14px;
   line-height: normal;
}
.transfer-out-status {
   margin-left: 0;
}
.domain-action-light {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: transparent;
}
.domain-action-pending .domain-action-light {
   background: #ffc107;
   animation: domain-action-pulse 1s linear infinite;
}
.domain-action-pending,
.domain-action-ok,
.domain-action-error {
   visibility: visible;
}
.domain-action-ok {
   color: #1a7f37;
}
.domain-action-ok .domain-action-light {
   background: #2da44e;
}
.domain-action-error {
   color: #d1242f;
}
.domain-action-error .domain-action-light {
   background: #d1242f;
}
@keyframes domain-action-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.25; }
}

.info-container {
   width: var(--panell-standard-width);
   max-width: 820px;
   background: #f8f9fa;
   padding: 15px;
   border-radius: 8px;
   border: 1px solid #ddd;
   box-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
   margin: 0px auto 10px auto;
   text-align: left;
   h3 {
      color: #1E3C72;
      margin-bottom: 10px;
   }
   p {
      color: #333;
      font-size: 14px;
      line-height: 1.5;
   }
}
.cookie-container {
   width: var(--panell-standard-width);
   max-width: 820px;
   background: #f8f9fa;
   padding: 15px 30px;
   border-radius: 8px;
   border: 1px solid #ddd;
   margin: 20px auto 20px auto;
   text-align: left;
   .button-container {
      text-align: center;
   }
   button {
      padding: 10px 20px;
      margin: 10px;
      border: none;
      cursor: pointer;
      color: white;
   }
   .btn-accept {
      background-color: #28a745; /* GREEN */
   }
   .btn-accept:hover {
      background-color: #218838;
   }
   .btn-decline {
      background-color: #dc3545; /* RED */
   }
   .btn-decline:hover {
      background-color: #a71d2a;
   }
}
.legal-container {
   width: var(--panell-standard-width);
   max-width: 820px;
   background: #f8f9fa;
   padding: 15px 30px;
   box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
   border-radius: 8px;
   border: 1px solid #ddd;
   margin: 20px auto 20px auto;
   h1, h2 {
      color: #333;
   }
   h1 {
      text-align: center;
      font-size: 30px;
      padding: 30px;
   }
   p {
      font-size: 16px;
      line-height: 1.6;
      color: #666;
      text-align: justify;
   }
   li {
      color: #666;
      text-align: justify;
      padding: 5px;
   }
   a {
      color: #007bff;
      text-decoration: none;
   }
   a:hover {
      text-decoration: underline;
   }
   div {
      padding: 20px 0px 10px 0px;
      color: #666;
      font-size: 11px;
      text-align: center;
      a { font-size: 11px; }
   }
}
.domain-container {
   width: 80%;
   max-width: 820px;
   background: #f8f9fa;
   padding: 15px;
   border-radius: 8px;
   border: 1px solid #ddd;
   margin: 20px auto 20px auto;
   text-align: left;
   h3 {
      color: #1E3C72;
      margin-bottom: 10px;
   }
   p {
      color: #333;
      font-size: 14px;
      line-height: 1.5;
   }
   table {
      width: 100%;
      margin: 0px auto;
      border: 0px solid black;
      border-collapse: collapse;
   }
   td, th {
      padding: 5px;
      border: 1px solid #ccc;
   }
   th {
      text-align: center;
      background: #e8e9ea
   }
   .asterisk {
      text-align: center;
   }
}

/*-----------------------------------------------------------------------------
Service Not Requested - used at add_email.pl
-----------------------------------------------------------------------------*/
.request-container {
   max-width: 600px;
   margin: 40px auto;
   background: #f0f6ff;
   border: 1px solid #b5d0ff;
   padding: 25px 30px;
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   font-family: Arial, sans-serif;
   color: #003366;
   h2 {
      margin-top: 0;
      color: #004a99;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
   }
   p {
      font-size: 16px;
      line-height: 1.5;
      text-align: center;
   }
   form {
      display: inline;
   }
   div {
      text-align: center;
      margin-top: 25px;
   }
   button {
      background: #007bff;
      color: white;
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s ease;
   }
}
/*---------------------------------------------------------------------------*/
.inputError {
   width: var(--panell-standard-width);
   margin: 10px auto 10px auto;
   padding: 25px;
   border: 1px solid #ccccff;
   background-color: oldlace;
   word-break: break-all;
   h1 { margin: 0px; }
   p { margin-left: 20px; }
   input[type="button"] {
      display: block;
      margin: auto;
   }
}
.autoresponse-container {
   width: var(--panell-standard-width);
   max-width: 820px;
   background: #f8f9fa;
   padding: 15px;
   border-radius: 8px;
   border: 1px solid #ddd;
   margin: 10px auto 10px auto;
   text-align: left;
   .heading {
      padding: 10px 0px;
      //border: 1px solid #ccc;
      span { color: blue; }
   }
   .receiver {
      border: 1px solid #ccc;
      border-radius: 8px;
      margin: 15px 0px 5px 0px;
      padding: 0px 15px 15px 15px;
      background: white;
      label { font-size: 0.9em; }
      span { font-size: 0.9em; color: blue; }
   }
   #txtMsgBody {
      width: 100%;
      height: 150px;
      border: 1px solid #ccc;
   }
   .enable {
      text-align: right;
      padding: 10px;
   }
   .dates {
      //border: 1px solid #ccc;
      text-align: center;
      padding: 10px 0px;
      div { display: inline-block; padding: 5px 0px; }
      label { display: inline-block; width: 120px; text-align: right; }
      //input { margin: 0px 0px 0px 0px; }
   }
   .input-date {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
   }
   .buttons {
      //border: 1px solid #ccc;
      text-align: center;
      padding: 10px;
      //background: oldlace;
   }
   .btn-save, .btn-cancel {
      width: 30%;
      padding: 8px 16px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font-size: 16px;
      margin-right: 8px;
      color: white;
   }
   /*·······································································*/
   /* GREEN                                                                 */
   .btn-save {
      background-color: #28a745;
   }
   .btn-save:hover {
      background-color: #218838;
   }
   /*·······································································*/
   /* RED                                                                   */
   .btn-cancel {
      background-color: #dc3545;
   }
   .btn-cancel:hover {
      background-color: #a71d2a;
   }
}

.dialogue {
   width: var(--panell-standard-width);
   max-width: 820px;
   padding: 10px 0px;
   margin: 0px auto;
   border: 0px solid black;
   #rectmenu { /* per l'antic $PRINCIPI_DEL_RECTANGLE_MENU */
      td {
         padding: 0px;
         background-color: white;
      }
   }
   #out {
      border-collapse: collapse;
      border: 1px solid #ccc;
      table {
         border-collapse: collapse;
      }
      td {
         padding: 8px; 
         border: 1px solid #ccc;
         background-color: #eff;
      }
      th {
         padding: 8px; 
         border: 0px solid #999;
         background-color: #8cf;
      }
      p {
         margin: 0px 10px 10px 10px;;
         font-size: 0.8em;
         text-align: justify;
      }
   }
   #mx {
      td {
         padding: 2px 0px;
         border: 0px solid #999;
      }
   }
   table {
      width: 100%;
      margin: 0px auto;
      border: 0px solid black;
      border-collapse: collapse;
   }
   i {
      font-size: 0.8em;
   }
   .password-help {
      margin: 0px;
      padding: 0px;
      //border: 1px solid #ccc;
      ul {
         margin: 0px;
      }
      b, li {
         font-size:0.7em;
         color:#999;
      }
      b {
         margin-left: 30px;
      }
      li {
         margin-left: 20px;
      }
   }
/*
   th {
      background-color: #8cf;
      border: 0px solid #999;
      padding: 8px;
   }
   td {
      border: 0px solid #ccc;
   }
*/
   /* Make placeholder text dimmer */
   input::placeholder {
      color: #ccc;
      font-style: italic;
      opacity: 1;
   }
   input[type=button] {
      cursor pointer;
   }
   .right-text {
      text-align: right;
   }
   .tip {
      border: 1px solid #ccc;
      margin: 5px;
      padding: 5px;
   }
}
.activatechanges {
   width: var(--panell-standard-width);
   max-width: 820px;
   margin: 0px auto 10px auto;
   /*background-color: #f0a;*/
   table {
      width: 100%;
      padding: 10px 0px 10px 0px;
      border: 1px solid #ccc;
      background-color: oldlace;
   }
   td {
      text-align: center;
   }
}
.altreserveis {
   width: 100%;
   text-align: center;
   background-color: #08f;
   color: #ddd;
   border: 1px solid #ccc;
   padding: 0px 2px;
   table {
      margin: 0px auto;
      width: 100%;
      max-width: 800px;
      table-layout: fixed;
/*
      background-color: #aff;
      border: 5px solid #aff;
*/
   }
   td {
      width: 20%;
      border: 0px solid #ccc;
      padding: 2px 0px;
      font-size: 0.8em;
   }
   input[type=button] {
      width: 100%;
      padding: 3px;
      text-align: center;
      border: 0px solid #ccc;
      font-size: 0.85em;
   }
   input[type=button]:hover {
      background-color: #ddd;
      color: #000;
   }
   .activ {
      background-color: #33d;
      color: #f2f2f2;
   }
   .inact {
      background-color: #3bf;
      color: white;
   }
}
.cn4contact {
   width: var(--panell-standard-width);
   margin: 10px auto 10px auto;
   padding: 10px;
   border: 1px solid #ccccff;
   background-color:oldlace;
}
#contact {
   max-width: 400px;
   margin: 10px auto;
   label, input, textarea, button {
      display: block;
      width: 96%;
      margin: 1px 2%;
   }
   br {
      display: block;
      content: "";
      height: 16px;
   }
   input, textarea {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
   }
   button {
      display: inline-block;
      width: 45.4%;
      background-color: #28a745;
      color: white;
      padding: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
   }
   button:hover {
      background-color: #218838;
   }
}
/* quan el width està per sota de <= 768px */
@media screen and (max-width: 768px) {
   .listentries, .activatechanges {
      a, font, td, th { xfont-size: 9px; padding: 2px 0px;}
   }
   .domexp td { padding: 10px 12px; }
   .domexp h2 { font-size: 17px; }
}
/* quan el width està per sota de <= 425px */
@media screen and (max-width: 425px) {
   .listentries, .activatechanges {
      a, font, td, th { xfont-size: 9px; padding: 2px 0px;}
   }
   .domexp td { padding: 8px 10px; }
   .domexp h2 { font-size: 16px; }
}
/* quan el width està per sota de 375px */
@media screen and (max-width: 375px) {
   .listentries, .activatechanges {
      a, font, td, th { xfont-size: 8px; padding: 2px 0px;}
   }
   .domexp td { padding: 8px; }
}
/*******************************************************************************
        LOGIN
*******************************************************************************/
.login_container, .dialog_container {
   margin: 20px auto;
   //background: white;
   background: #DAE7FE;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: var(--panell-standard-width);
   max-width: 600px;
   text-align: center;
   input {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-style: normal;
   }
   /* Keep placeholders readable on desktop browsers. */
   input::placeholder {
      color: #aaa;
      font-style: italic;
      opacity: 1;
   }
   input::-webkit-input-placeholder {
      color: #aaa;
      font-style: italic;
      opacity: 1;
   }
   input::-moz-placeholder {
      color: #aaa;
      font-style: italic;
      opacity: 1;
   }
   input:-ms-input-placeholder {
      color: #aaa;
      font-style: italic;
      opacity: 1;
   }
   input::-ms-input-placeholder {
      color: #aaa;
      font-style: italic;
      opacity: 1;
   }
   button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
   }
   h2 {
      font-size: 1.8em;
      img {
         width: 48px;
         vertical-align: middle;
      }
      span {
         font-size: 1.0em;
         color: #1E3C72;
      }
   }
.domain-table { width: 100%; margin-top: 10px; border-collapse: collapse; }
.domain-table th, .domain-table td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left; }
.function_name { font-size: 9px; text-align: left; }

   .btn-edit, .btn-save, .btn-login, .btn-register, .btn-submit, .btn-ok,
   .btn-cancel, .btn-back, .btn-proceed, .btn-neutral {
      padding: 8px 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      color: white;
   }
   /*·······································································*/
   /* GREEN                                                                 */
   .btn-edit, .btn-save {
      background-color: #28a745;
      margin: 0px;
   }
   .btn-edit:hover, .btn-save:hover {
      background-color: #218838;
   }
   /*·······································································*/
   /* BLUE                                                                  */
   .btn-login, .btn-register, .btn-submit, .btn-ok {
      background-color: #007bff;
   }
   .btn-login:hover, .btn-register:hover, .btn-submit:hover, .btn-ok:hover {
      background-color: #0056b3;
   }
   /*·······································································*/
   /* RED                                                                   */
   .btn-cancel, .btn-back {
      background-color: #dc3545;
   }
   .btn-cancel:hover, .btn-back:hover {
      background-color: #a71d2a;
   }
   /*·······································································*/
   /* YELLOW                                                                */
   .btn-proceed {
      background-color: #ffc107;
      color: black;
   }
   .btn-proceed:hover {
      background-color: #e0a800;
   }
   /*······································································-*/
   /* OLIVE GREEN                                                           */
   .btn-neutral {
      background-color: #3f5f14;
   }
   .btn-neutral:hover {
      background-color: #314a10;
   }
   /*······································································-*/
   .btn-link {
      background: none;
      border: none;
      padding: 0;
      //margin: 0 0.5em 0 0;
      color: #0066cc;
      text-decoration: underline;
      cursor: pointer;
      font-size: 0.8em; /* keeps the surrounding text style */
   }
   .btn-link:hover {
      color: #004999;
   }
   .links {
      margin-top: 10px;
   }
   .links form {
      display: inline-block;
      margin: 0;
      padding: 0;
   }
   .terms {
      font-size: 14px;
      margin-top: 10px;
   }
   .terms input {
       width: auto;
       margin-right: 5px;
   }
}
/* ------------------------------------------------------------------------- */
.panell-form {
   width: var(--panell-standard-width);
   max-width: 820px;
   margin: 16px auto;
   box-sizing: border-box;
}
.panell-form h1,
.panell-form h2,
.panell-form h3 {
   margin: 0 0 12px 0;
}
.panell-form-section {
   width: 100%;
   box-sizing: border-box;
   border: 1px solid #d0d7de;
   border-radius: 8px;
   background: #f8f9fa;
   box-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
   padding: 16px;
   margin-bottom: 16px;
}
.panell-form-error {
   border-color: #dc3545;
   background: #fff5f5;
   color: #a71d2a;
   font-weight: bold;
}
.panell-form-error p {
   margin: 0;
}
.panell-form-note {
   margin: 6px 0 12px 0;
   color: #57606a;
}
.panell-muted {
   color: #57606a;
   font-size: 0.9em;
}
.panell-transfer-client-notice .panell-form-section {
   box-sizing: border-box;
   width: 100%;
}
.panell-transfer-form {
   display: block;
   width: 100%;
   margin: 0;
}
.panell-transfer-form > .panell-form {
   width: var(--panell-standard-width);
   max-width: 820px;
   margin: 16px auto;
   box-sizing: border-box;
}
.panell-transfer-actions {
   width: var(--panell-standard-width);
   max-width: 820px;
   margin: 16px auto;
}
.panell-transfer-info-list li {
   margin: 0 0 12px 0;
   color: #57606a;
}
.panell-field {
   display: grid;
   grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
   gap: 10px 14px;
   align-items: start;
   margin: 10px 0;
}
.panell-field label {
   font-weight: bold;
   padding-top: 8px;
}
.panell-required {
   color: #d1242f;
}
.panell-field input,
.panell-field select {
   width: 100%;
   box-sizing: border-box;
   padding: 8px;
   border: 1px solid #c9d1d9;
   border-radius: 5px;
}
.panell-help {
   display: block;
   color: #57606a;
   font-size: 0.9em;
   margin-top: 4px;
}
.panell-dns-grid {
   display: grid;
   grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) minmax(160px, 1fr);
   gap: 14px;
   margin: 8px 0;
}
.panell-dns-choice {
   margin: 0;
}
.panell-dns-choice select {
   width: 100%;
   box-sizing: border-box;
   padding: 8px;
   border: 1px solid #c9d1d9;
   border-radius: 5px;
}
.panell-dns-field {
   grid-template-columns: 48px minmax(0, 1fr);
   gap: 6px;
   margin: 0;
}
.panell-dns-field label {
   padding-top: 4px;
   margin-bottom: 2px;
}
.panell-dns-field input.readonly {
   background: #f6f8fa;
   color: #57606a;
}
.panell-add-dns {
   display: block;
   margin-top: 8px;
   margin-left: auto;
}
.panell-transfer-code {
   margin: 12px 0 14px 0;
}
.panell-transfer-code label {
   display: block;
   font-weight: bold;
   margin-bottom: 4px;
}
.panell-transfer-code input {
   width: 100%;
   box-sizing: border-box;
   padding: 8px;
   border: 1px solid #c9d1d9;
   border-radius: 5px;
}
.panell-transfer-unlock {
   margin: 14px 0;
   padding: 10px 12px;
   border: 1px solid #d8dee4;
   border-radius: 5px;
   background: #f6f8fa;
}
.panell-checkline {
   display: grid;
   grid-template-columns: 18px minmax(0, 1fr);
   gap: 8px;
   align-items: start;
   font-weight: bold;
}
.panell-checkline input {
   margin-top: 2px;
}
.panell-transfer-unlock p {
   margin: 6px 0 0 26px;
   color: #57606a;
   font-size: 0.9em;
}
.panell-actions {
   display: flex;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
   margin: 16px auto;
}
.panell-actions-back {
   justify-content: center;
}
.panell-actions input,
.panell-actions button,
.panell-actions a {
   min-width: 140px;
   text-align: center;
   text-decoration: none;
   box-sizing: border-box;
}
.panell-actions form {
   margin: 0;
}
.panell-date-parts {
   display: grid;
   grid-template-columns: repeat(3, minmax(72px, 1fr));
   gap: 8px;
}
.panell-date-parts select {
   width: 100%;
}
.panell-table-wrap {
   width: 100%;
   overflow-x: auto;
}
.panell-lines-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 760px;
   font-size: 0.94em;
}
.panell-lines-table th,
.panell-lines-table td {
   padding: 9px 10px;
   border-bottom: 1px solid #d8dee4;
   text-align: left;
   vertical-align: middle;
   font-size: 15px;
}
.panell-lines-table th a,
.panell-lines-table td a,
.panell-lines-table th button,
.panell-lines-table td button {
   font-size: 15px;
}
.panell-lines-table th {
   background: #eaeef2;
   color: #24292f;
   font-weight: bold;
}
.panell-lines-table tbody tr:nth-child(even) {
   background: #f6f8fa;
}
.panell-lines-table .numeric {
   text-align: right;
   white-space: nowrap;
}
.panell-lines-table .amount-blue td {
   color: #0969da;
}
.panell-lines-table .amount-red td {
   color: #cf222e;
}
.panell-lines-table .panell-stale-line td {
   color: #8c959f;
   font-style: italic;
}
.panell-lines-table .panell-stale-line a,
.panell-lines-table .panell-stale-line button {
   color: #8c959f;
}
.panell-lines-table .panell-status-note {
   display: inline-block;
   margin-left: 6px;
   color: #8c959f;
   font-size: 0.9em;
   font-style: italic;
   white-space: normal;
}
.panell-lines-table .line-status {
   text-align: left;
   white-space: nowrap;
}
.panell-lines-table .line-status img {
   vertical-align: middle;
}
.panell-lines-table .line-action {
   text-align: center;
   white-space: nowrap;
}
.panell-lines-table .line-action form {
   display: inline-block;
   margin: 0;
}
.panell-lines-table .panell-inline-form {
   display: inline;
   margin: 0;
}
.panell-link-button {
   display: inline;
   padding: 0;
   border: 0;
   background: transparent;
   color: #0969da;
   font: inherit;
   text-decoration: underline;
   cursor: pointer;
}
.panell-link-button:hover {
   color: #0550ae;
}
.panell-lines-table .line-action input[type=checkbox] {
   width: 16px;
   height: 16px;
}
.panell-lines-table .panell-renew-checkbox {
   cursor: pointer;
}
.panell-lines-table .panell-renew-checkbox:disabled {
   cursor: wait;
}
.panell-icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   padding: 0;
   border: 1px solid transparent;
   border-radius: 5px;
   background: transparent;
   cursor: pointer;
   box-sizing: border-box;
}
.panell-icon-button:hover {
   background: #eaeef2;
   border-color: #d0d7de;
}
.panell-icon-button img {
   display: block;
}
.panell-lines-table .btn-line-delete {
   display: inline-block;
   min-width: 0;
   padding: 5px 9px;
   font-size: 0.85em;
}
.panell-orders-table th,
.panell-orders-table td {
   padding: 7px 6px;
}
.panell-orders-table td {
   word-break: break-word;
}
.panell-orders-table .line-action {
   display: flex;
   justify-content: center;
   gap: 6px;
}
.panell-orders-table .line-action form {
   display: inline-block;
}
.panell-lines-table tfoot th {
   background: #d8dee4;
}
.btn-edit, .btn-save, .btn-login, .btn-register, .btn-submit, .btn-ok,
.btn-cancel, .btn-back, .btn-proceed, .btn-neutral {
   padding: 8px 16px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   color: white;
}
.btn-edit, .btn-save {
   background-color: #28a745;
   margin: 0px;
}
.btn-edit:hover, .btn-save:hover {
   background-color: #218838;
}
.btn-login, .btn-register, .btn-submit, .btn-ok {
   background-color: #007bff;
}
.btn-login:hover, .btn-register:hover, .btn-submit:hover, .btn-ok:hover {
   background-color: #0056b3;
}
.btn-cancel, .btn-back {
   background-color: #dc3545;
}
.btn-cancel:hover, .btn-back:hover {
   background-color: #a71d2a;
}
.btn-proceed {
   background-color: #ffc107;
   color: black;
}
.btn-proceed:hover {
   background-color: #e0a800;
}
.btn-neutral {
   background-color: #3f5f14;
}
.btn-neutral:hover {
   background-color: #314a10;
}

option.panell-admin-option {
   background-color: #fff3cd;
}

option.panell-test-option {
   background-color: #ffd8a8;
}

.btn-edit:disabled, .btn-save:disabled, .btn-login:disabled,
.btn-register:disabled, .btn-submit:disabled, .btn-ok:disabled,
.btn-cancel:disabled, .btn-back:disabled, .btn-proceed:disabled,
.btn-neutral:disabled,
.btn-edit:disabled:hover, .btn-save:disabled:hover,
.btn-login:disabled:hover, .btn-register:disabled:hover,
.btn-submit:disabled:hover, .btn-ok:disabled:hover,
.btn-cancel:disabled:hover, .btn-back:disabled:hover,
.btn-proceed:disabled:hover, .btn-neutral:disabled:hover {
   background-color: #8c959f;
   color: #f6f8fa;
   cursor: not-allowed;
   opacity: 0.75;
}

@media screen and (max-width: 640px) {
   .panell-form-section {
      padding: 12px;
   }
   .panell-field,
   .panell-dns-grid {
      display: block;
   }
   .panell-field label {
      display: block;
      padding-top: 0;
      margin-bottom: 4px;
   }
   .panell-field input,
   .panell-field select {
      margin-bottom: 8px;
   }
   .panell-dns-grid {
      gap: 0;
      margin: 0;
   }
   .panell-dns-field {
      margin: 4px 0;
   }
   .panell-actions input,
   .panell-actions button,
   .panell-actions a {
      width: 100%;
   }
   .panell-actions form {
      width: 100%;
   }
   .panell-date-parts {
      grid-template-columns: 1fr;
   }
   .panell-table-wrap {
      overflow-x: visible;
   }
   .panell-lines-table {
      display: block;
      min-width: 0;
      border-collapse: separate;
      font-size: 1em;
   }
   .panell-lines-table thead {
      display: none;
   }
   .panell-lines-table tbody,
   .panell-lines-table tfoot,
   .panell-lines-table tr,
   .panell-lines-table td {
      display: block;
      width: 100%;
      box-sizing: border-box;
   }
   .panell-lines-table tbody tr {
      margin: 0 0 12px;
      border: 1px solid #d8dee4;
      border-radius: 6px;
      background: #fff;
      overflow: hidden;
   }
   .panell-lines-table tbody tr:nth-child(even) {
      background: #fff;
   }
   .panell-lines-table th,
   .panell-lines-table td,
   .panell-lines-table th a,
   .panell-lines-table td a,
   .panell-lines-table th button,
   .panell-lines-table td button {
      font-size: 15px;
   }
   .panell-lines-table td {
      display: grid;
      grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
      gap: 10px;
      padding: 8px 10px;
      border-bottom: 1px solid #eaeef2;
      word-break: break-word;
   }
   .panell-lines-table td:last-child {
      border-bottom: 0;
   }
   .panell-lines-table td::before {
      content: attr(data-label);
      color: #57606a;
      font-weight: bold;
   }
   .panell-lines-table td[data-label=""]::before {
      content: "";
   }
   .panell-lines-table .numeric,
   .panell-lines-table .line-status,
   .panell-lines-table .line-action {
      text-align: left;
      white-space: normal;
   }
   .panell-lines-table .line-action form,
   .panell-lines-table .panell-inline-form {
      display: block;
   }
   .panell-orders-table .line-action {
      display: grid;
      justify-content: start;
      gap: 6px;
   }
   .panell-lines-table .btn-line-delete {
      width: auto;
      justify-self: start;
   }
   .panell-lines-table tfoot {
      display: block;
      margin-top: 4px;
   }
   .panell-lines-table tfoot tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      background: #d8dee4;
      border-radius: 6px;
      overflow: hidden;
   }
   .panell-lines-table tfoot th {
      display: block;
      padding: 10px;
      border: 0;
      box-sizing: border-box;
   }
   .panell-lines-table tfoot th.numeric {
      text-align: right;
      white-space: nowrap;
   }
   .panell-lines-table tfoot th:last-child {
      display: none;
   }
}
/* ------------------------------------------------------------------------- */
.whois-container .whois-box {
   background: #ffffff;
   padding: 10px;
   border-radius: 5px;
   color: black;
   font-size: 14px;
   text-align: left;
   max-height: 300px;
   overflow: auto;
   margin-top: 15px;
   border: 1px solid #ddd;
}
.whois-container .whois-seo-copy {
   color: #4f5f6f;
   line-height: 1.55;
}
.whois-container .whois-seo-copy h2 {
   color: #27435c;
   font-size: 1.08rem;
   margin-top: 18px;
}
.whois-container .whois-seo-copy h2:first-child {
   margin-top: 0;
}
.whois-container .whois-seo-copy p {
   margin: 0 0 12px 0;
}
.whois-container .whois-seo-copy ul {
   margin: 0 0 14px 20px;
   padding: 0;
}
.whois-container .whois-seo-copy li {
   margin: 5px 0;
}
.whois-container .whois-admin-line {
   color: #dc3545;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
}
.whois-container .whois-admin-note {
   color: #dc3545;
   font-size: 13px;
   font-weight: bold;
   text-align: left;
   margin: 10px 0 0 0;
}
.whois-container pre {
   font-size: 10px;
   margin: 0;
}
.whois-container .available {
   color: green;
   font-weight: bold;
   font-size: 18px;
   margin-top: 15px;
}
.whois-container .not-available,
.whois-container .error {
   color: red;
   font-weight: bold;
   font-size: 18px;
   margin-top: 15px;
}
.whois-actions {
   margin-top: 16px;
}
/* ------------------------------------------------------------------------- */
.sam_edit_prices-container {
   max-width: 820px;
   margin: 20px auto;
   background: white;
   //background: #DAE7FE;
   //background: linear-gradient(180deg, #f8f9fa, #e9ecef);
   //background: linear-gradient(135deg, #f8f9fa, #88bbff);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   h1 {
      color: #333;
      font-size: 22px;
      text-align: center;
   }
   .table-container {
      display: block;
      overflow-x: auto;
      width: 100%;
   }
   table {
      width: 100%;
      border-collapse: collapse;
      min-width: 768px;
   }
   th, td {
      border: 1px solid #ccc;
   }
   th {
      background: #007bff;
      color: white;
      text-transform: uppercase;
      font-size: 14px;
      padding: 4px;
   }
   td {
      padding: 0px;
      background: white;
   }
   .remove { text-align: center; }
   input, select {
      width: 100%;
      border: none;
      font-size: 14px;
      box-sizing: border-box;
      text-align: left;
      padding: 8px 4px;
   }
   .price {
      text-align: right;
   }
   input[type=checkbox] {
      width: 13px;
      height: 13px;
      padding: auto;
   }
   input::placeholder {
      color: #ccc;
      font-style: italic;
      opacity: 1;
   }
   .button-container {
      text-align: center;
   }
   .submit-btn {
      background: #28a745;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
      margin-top: 10px;
      font-size: 16px;
      width: 50%;
      border-radius: 5px;
      margin: 15px;
   }
   .submit-btn:hover {
      background: #218838;
   }
}
/* Responsive Styles */
@media screen and (max-width: 768px) {
   .pricelist-container {
      margin: 0px auto;
      padding: 1px;
      //background: orange;
      table {
         //font-size: 12px;
      }
      th {
         //padding: 2px;
         font-size: 10px;
      }
      input, select {
         font-size: 10px;
      }
      .submit-btn {
         //font-size: 12px;
      }
   }
}
/* ------------------------------------------------------------------------- */
.display_prices-container {
   max-width: 980px;
   margin: 20px auto;
   padding: 0 18px 24px 18px;
}
.display_prices-container .price-list-header {
   margin-bottom: 18px;
   border-bottom: 1px solid #d9e2ec;
   padding-bottom: 14px;
}
.display_prices-container h1 {
   color: #1f2933;
   font-size: 28px;
   line-height: 1.2;
   margin: 0 0 8px 0;
}
.display_prices-container .price-list-header p {
   color: #52606d;
   font-size: 15px;
   line-height: 1.45;
   margin: 0 0 6px 0;
}
.display_prices-container .price-list-summary {
   color: #1f2933;
   font-weight: 600;
}
.display_prices-container .price-category {
   display: inline-block;
   min-width: 86px;
   border: 1px solid #cbd5e1;
   border-radius: 6px;
   background: #f8fafc;
   color: #334155;
   font-size: 12px;
   font-weight: 700;
   line-height: 1.2;
   padding: 4px 8px;
   text-align: center;
}
.display_prices-container .price-amount {
   color: #111827;
   font-weight: 700;
   white-space: nowrap;
}
.display_prices-container .billing-cycle {
   color: #64748b;
   font-size: 13px;
}
.display_prices-container table {
   width: 100%;
   border-collapse: collapse;
   min-width: 800px;
   background: #fff;
   border: 1px solid #d9e2ec;
}
.display_prices-container th,
.display_prices-container td {
   padding: 12px 14px;
   border-bottom: 1px solid #e5e7eb;
   text-align: left;
   vertical-align: top;
}
.display_prices-container th {
   background: #0f4c81;
   color: white;
   font-size: 13px;
   font-weight: 700;
}
.display_prices-container tr:nth-child(even) td {
   background: #f8fafc;
}
.display_prices-container tr:hover td {
   background: #eef6ff;
}
.display_prices-container th:nth-child(1) {
   width: 140px;
}
.display_prices-container th:nth-child(3),
.display_prices-container th:nth-child(4) {
   width: 130px;
}
.display_prices-container .card {
   background: #fff;
   border: 1px solid #d9e2ec;
   border-radius: 8px;
   padding: 14px;
}
.display_prices-container .card h2 {
   color: #1f2933;
   font-size: 17px;
   line-height: 1.3;
   margin: 10px 0;
}
.display_prices-container .card p {
   color: #334155;
   font-size: 15px;
   line-height: 1.4;
   margin: 5px 0;
}
.display_prices-container .card .billing-cycle {
   color: #64748b;
   font-size: 14px;
}
.display_prices-container .card strong {
   color: #111827;
}
.display_prices-container .card-container {
   display: none; /* Hide cards on big screens */
}
.display_prices-container .table-container {
   display: block;
   overflow-x: auto;
   width: 100%;
}
/* Mobile: Switch to card layout */
@media (max-width: 600px) {
   .display_prices-container {
      margin: 12px auto;
      padding: 0 12px 18px 12px;
   }
   .display_prices-container h1 {
      font-size: 24px;
   }
   .display_prices-container .table-container {
      display: none; /* Hide table on small screens */
   }
   .display_prices-container .card-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 16px;
   }
   .display_prices-container .card {
      width: auto;
      max-width: none;
   }
   .display_prices-container .price-category {
      min-width: 0;
   }
}
/* ------------------------------------------------------------------------- */
.a4-page {
   box-sizing: border-box;
   --a4-scale: 1;
   position: relative;
   width: min(92vw, 820px);
   min-height: 1161px;
   padding: 0;
   margin: 20px auto;
   background: #fffdf7;
   border: 1px solid #d0d7de;
   box-shadow: 0 8px 24px rgba(31, 35, 40, 0.14);
   overflow: visible;
}
.a4-page-inner {
   box-sizing: border-box;
   position: absolute;
   top: calc(39px * var(--a4-scale));
   left: calc(39px * var(--a4-scale));
   width: 742px;
   min-height: 1083px;
   transform: scale(var(--a4-scale));
   transform-origin: top left;
   background: transparent;
   color: #1f2328;
   padding: 0;
   border: 0;
   box-shadow: none;
   overflow: visible;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 1.28;
}
.a4-page-inner table {
   max-width: 100%;
   border-collapse: collapse;
}
.a4-page-inner tr {
   break-inside: avoid;
   page-break-inside: avoid;
}
.a4-page-inner table[border="1"],
.a4-page-inner table[border="1"] td {
   border-color: #8c959f;
}
.a4-page-inner .panell-document-lines {
   break-inside: auto;
   page-break-inside: auto;
}
.a4-page-inner .panell-document-totals {
   break-inside: avoid;
   page-break-inside: avoid;
}
.a4-page-inner td {
   box-sizing: border-box;
   vertical-align: top;
   overflow-wrap: anywhere;
}
.a4-page-inner h1 {
   margin: 0 0 6px 0;
   font-size: 2.1em;
   letter-spacing: 0;
}
.a4-page-inner h2 {
   margin: 0 0 8px 0;
   font-size: 1.7em;
   letter-spacing: 0;
}
.a4-page-inner img {
   max-width: 100%;
   height: auto;
}
.a4-page-inner font[size="3"] {
   font-size: 1em;
}
.a4-page-inner font[size="2"] {
   font-size: 0.9em;
}
.a4-page-inner font[size="1"] {
   font-size: 0.78em;
}
.document-company-header {
   display: grid;
   grid-template-columns: 25% 50% 25%;
   align-items: start;
   margin-bottom: 18px;
}
.document-company-logo img {
   max-width: 120px;
   border: 1px solid #8c959f;
}
.document-company-main {
   text-align: center;
}
.document-company-main h1 {
   margin: 0 0 4px 0;
}
.document-company-contact {
   align-self: end;
   text-align: right;
   font-size: 0.82em;
}
.document-offer-head {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: start;
   gap: 16px;
   margin-bottom: 12px;
}
.document-offer-title h2 {
   margin: 0;
   text-align: center;
}
.document-offer-meta {
   display: grid;
   grid-template-columns: repeat(2, minmax(92px, auto));
   border: 1px solid #8c959f;
}
.document-offer-meta > div {
   padding: 5px;
   border-right: 1px solid #8c959f;
   border-bottom: 1px solid #8c959f;
}
.document-offer-meta > div:nth-child(2n) {
   border-right: 0;
}
.document-offer-meta > div:nth-last-child(-n+2) {
   border-bottom: 0;
}
.document-offer-meta-label,
.document-offer-box-title,
.document-offer-total-label {
   font-weight: 700;
}
.document-offer-total-label {
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
}
.document-offer-total-condensed {
   display: inline-block;
   transform: scaleX(0.90);
   transform-origin: left center;
}
.document-offer-meta-value,
.document-offer-box-body,
.document-offer-line,
.document-offer-total-value,
.document-offer-vat-legend {
   font-size: 0.9em;
}
.document-offer-parties {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10%;
   margin-bottom: 12px;
}
.document-offer-party {
   border: 1px solid #8c959f;
}
.document-offer-box-title,
.document-offer-box-body {
   padding: 5px;
}
.document-offer-box-title {
   border-bottom: 1px solid #8c959f;
}
.document-offer-lines {
   box-sizing: border-box;
   border: 1px solid #8c959f;
   margin-bottom: 10px;
}
.document-offer-lines-header,
.document-offer-line {
   display: grid;
   grid-template-columns: 27% 27% 22% 12% 12%;
   column-gap: 0;
}
.document-offer-lines-header {
   font-weight: 700;
   border-bottom: 1px solid #8c959f;
}
.document-offer-lines-header > div {
   padding: 8px 2px 4px 2px;
}
.document-offer-line {
   min-height: 21px;
   font-stretch: condensed;
   font-family: "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", Arial, Helvetica, sans-serif;
}
.document-offer-line > div {
   padding: 2px;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
}
.document-offer-line > div > span {
   display: inline-block;
   max-width: 100%;
   transform: scaleX(1.00);
   transform-origin: left center;
}
.document-offer-free-text {
   grid-template-columns: 1fr;
}
.document-offer-free-text > div {
   grid-column: 1 / -1;
   box-sizing: border-box;
   padding-left: 10mm;
   padding-right: 10mm;
   white-space: normal;
}
.document-offer-amount > span {
   transform-origin: right center !important;
}
.document-offer-amount {
   text-align: right;
   padding-right: 8px !important;
}
.document-offer-bottom {
   box-sizing: border-box;
   display: grid;
   grid-template-columns: minmax(0, 31fr) minmax(0, 69fr);
   gap: 8px;
   align-items: start;
}
.document-offer-bank,
.document-offer-totals,
.document-offer-continue-total {
   box-sizing: border-box;
   min-width: 0;
}
.document-offer-bankdetails,
.document-offer-bankdetails-title,
.document-offer-bankdetails-body {
   display: block;
   font-size: 13px;
   line-height: 16px;
}
.document-offer-bankdetails-title,
.document-offer-bankdetails-body {
   white-space: nowrap;
   transform: scaleX(0.95);
   transform-origin: left center;
}
.document-offer-totals {
   display: grid;
   grid-template-columns: 1.25fr 0.85fr 0.85fr 1.05fr;
   border: 1px solid #8c959f;
}
.document-offer-totals > div {
   padding: 5px 4px;
   border-right: 1px solid #8c959f;
   border-bottom: 1px solid #8c959f;
}
.document-offer-totals > div:nth-child(4n) {
   border-right: 0;
}
.document-offer-totals > div:nth-last-child(-n+4) {
   border-bottom: 0;
}
.document-offer-total-value {
   text-align: right;
}
.document-offer-continue-total {
   grid-column: 1 / -1;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 76px;
   border: 1px solid #8c959f;
   font-size: 0.9em;
}
.document-offer-vat-legend {
   margin-top: 10px;
   padding: 5px;
   border: 1px solid #8c959f;
}
.proforma-actions-block,
.proforma-secondary-actions-block,
.proforma-final-actions-block,
.proforma-payment-notes {
   width: min(92vw, 820px);
}
@media (max-width: 560px) {
   .a4-page {
      width: 96vw;
      margin: 12px auto 4px auto;
   }
   .a4-page + .proforma-actions-block {
      margin-top: 4px;
   }
   .proforma-actions-block .panell-actions {
      margin-top: 4px;
   }
}
@media print {
   @page {
      size: A4;
      margin: 0;
   }
   body {
      background: #fff !important;
   }
   .proforma-actions-block,
   .proforma-secondary-actions-block,
   .proforma-final-actions-block,
   .proforma-payment-notes,
   header,
   nav,
   footer {
      display: none !important;
   }
   .a4-page {
      width: 210mm;
      height: 297mm;
      min-height: 297mm;
      margin: 0;
      padding: 0;
      background: #fff;
      overflow: visible;
      page-break-after: always;
      break-after: page;
   }
   .a4-page:last-of-type {
      page-break-after: auto;
      break-after: auto;
   }
   .a4-page-inner {
      position: static;
      width: 190mm;
      height: 277mm;
      min-height: 277mm;
      margin: 10mm;
      padding: 0;
      transform: none;
      background: #fff;
      border: 0;
      box-shadow: none;
      font-size: 12px;
      page-break-after: auto;
      overflow: visible;
   }
}
/* ------------------------------------------------------------------------- */
.email_grups-container {
   margin: 20px auto;
   //max-width: 600px;
   max-width: 820px;
   background: white;
   color: black;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   h1 {
      font-size: 22px;
      text-align: center;
   }
   h3 {
      font-size: 18px;
      font-weight: bold;
      margin: 10px 0px 0px 0px;
      text-align: center;
      color: #333;
   }
   /* Make placeholder text dimmer */
   input::placeholder, textarea::placeholder {
      color: rgba(0, 0, 0, 0.1); /* Adjust opacity */
   }
   .group-box {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      background: #f8f9fa;
      padding: 10px;
      border-radius: 5px;
      color: black;
      font-size: 14px;
      text-align: left;
      margin-top: 10px;
      border: 1px solid #ddd;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
   }
   .group-info {
      width: 100%;
      display: flex;
      flex-direction: column; /* Stack name & members */
      justify-content: center;
      max-width: calc(100% - 140px);
   }
   .group-content {
      display: flex;
      flex-direction: column; /* Stack name and members */
   }
   .group-header {
      font-size: 16px;
      font-weight: bold;
      padding: 5px;
      border-bottom: 1px solid #ddd;
   }
   .group-members {
      color: #555;
      font-size: 14px;
      padding: 5px 0;
      word-wrap: break-word; /* Allows long emails to wrap */
      overflow-wrap: break-word;
      text-align: left;
   }
   .group-name {
      font-size: 16px;
      font-weight: bold;
      padding-bottom: 5px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 5px;
   }
   .group-buttons {
      display: flex;
      flex-direction: column !important;/* Stack buttons vertically */
      align-items: flex-end; /* Align to the right */
      justify-content: center;
      gap: 5px; /* Adds space between buttons */
   }
   .add-group-div {
      text-align: center;
   }
   .btn { width:140px;background: #007bff; color: white; padding: 5px 5px; font-size: 14px; border: none; cursor: pointer; border-radius: 5px; margin-left: 5px; }
   .btn:hover { background: #0056b3; }
   .btn-delete { background: #dc3545; }
   .btn-delete:hover { background: #c82333; }
   .hidden-form { display: none; }
   .spaced-button { margin-top: 15px; }
   .edit-group-buttons {
      display: flex;
      justify-content: center;
      gap: 10px; /* Space between buttons */
      margin-top: 10px;
   }
   .new-group-buttons {
      display: flex;
      justify-content: center;
      gap: 10px; /* Adds space between buttons */
      margin-top: 10px;
   }
   #edit-group-form, #new-group-form {
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-top: 10px;
      padding: 5px;
      background: #f9f9f9;
   }
   #edit-group-form input, #edit-group-form textarea {
      width: 100%;
      box-sizing: border-box;
      margin-top: 10px;
      padding: 8px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 5px;
   }
   #edit-group-form input {
      background: #f9f9f9;
   }
   #new-group-form input, #new-group-form textarea {
      width: 100%;
      box-sizing: border-box; /* Ensures padding doesn.t overflow */
      margin-top: 10px;
      padding: 8px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 5px; /* .. More rounded edges */
      //background: #f9f9f9;
   }
}
\@media (max-width: 500px) { /* When the screen is small */
   .email_grups-container {
      margin: 0px auto;
      //padding: 1px;
      //background: orange;
      .group-box {
         flex-direction: column; /* Stack everything vertically */
      }
      .group-info {
         width: 100%; /* Full width in mobile */
      }
      .group-buttons {
         display: flex !important; /* Force flex display */
         flex-direction: column !important; /* Stack buttons vertically */
         align-items: center !important; /* Center buttons in mobile */
         width: 100%; /* Full width in mobile */
      }
      .group-buttons .btn {
         width: 100%;
      }
   }
}
/* ------------------------------------------------------------------------- */
/* SAM - System Administrator Manager */
.back-btn { display: block; margin: 0 auto 1em auto; text-align: center; }
.back-btn a { text-decoration: none; color: #007BFF; font-weight: bold; }
.back-btn a:hover { text-decoration: underline; }


/*******************************************************************************
        BOTTOM
*******************************************************************************/
#bottom {
   width: 100%;
   padding: 0px;
   img {
      height: 16px;
      width: 16px;
   }
   #foot {
      width: 100%;
      border: 1px solid #99c;
      text-align: right;
      background-image:url(/images/top_nav.jpg);
      background-repeat: repeat-x;
      padding: 0px;
      color: #eee;
      a {
         font-size: 0.9em;
         text-decoration: none;
         color: #eee;
      }
      .foot-sep {
         display: inline-block;
         height: 0.9em;
         border-left: 1px solid rgba(238, 238, 238, 0.55);
         margin: 0px 5px;
         vertical-align: -0.1em;
      }
   }
   #copyright {
      width: 100%;
      border: 1px solid #99c;
      border-width: 0px 1px 0px 1px;
      padding: 2px 5px;
      font-size: 0.8em;
      text-align: center;
      //color: #aaa;
      color: #666;
   }
   #address {
      display: flex; justify-content: space-between;
      width: 100%;
      border: 1px solid #99c;
      border-width: 0px 1px 1px 1px;
      padding: 5px;
      span {
         font-size: 0.6em;
         //color: #aaa;
         color: #666;
      }
      a {
         font-size: 1.0em;
         text-decoration: none;
         //color: #aaf;
         color: #55f;
      }
      a:hover {
         text-decoration: underline;
      }
   }
}
@media screen and (max-width: 695px) {
   #bottom { img { width: 14px; height: 14px; }  }
   #bottom #foot a.enlaces {
      font-size: 0.84em;
      font-stretch: condensed;
      font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
   }
   #bottom #foot .foot-sep {
      margin: 0px 5px;
   }
   #bottom #copyright {
      font-size: 0.79em;
   }
}
@media screen and (max-width: 570px) {
   #bottom #foot a.enlaces {
      font-size: 0.76em;
   }
   #bottom #foot .foot-sep {
      margin: 0px 4px;
   }
   #bottom #copyright {
      font-size: 0.78em;
   }
}
@media screen and (max-width: 445px) {
   #bottom { img { width: 10px; height: 10px; }  }
   #bottom #foot a.enlaces {
      font-size: 0.64em;
      font-stretch: condensed;
      font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
   }
   #bottom #foot .foot-sep {
      margin: 0px 2px;
   }
   #bottom #copyright {
      font-size: 0.75em;
   }
}
@media screen and (max-width: 320px) {
   #bottom #foot a.enlaces {
      font-size: 0.64em;
      font-stretch: condensed;
      font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
      letter-spacing: -0.02em;
   }
   #bottom #foot .foot-sep {
      margin: 0px 2px;
   }
   #bottom #copyright {
      font-size: 0.75em;
   }
}

/* Explicit footer rules for normal CGI pages. These mirror the historical
   nested #bottom rules above, but avoid depending on CSS nesting support. */
#bottom #foot {
   box-sizing: border-box;
   padding-right: 4px;
   white-space: nowrap;
}
#bottom #foot a.enlaces {
   text-decoration: none;
   color: #eee;
}
@media screen and (max-width: 445px) {
   #bottom #foot {
      padding-right: 3px;
   }
}
@media screen and (max-width: 320px) {
   #bottom #foot {
      padding-right: 2px;
   }
}

/*******************************************************************************
        WARNING (que està fora del contenidor prncipal 'container')
*******************************************************************************/
#warning {
   position: fixed;
   top: 0px;
   left: 0px;
   margin: 30px;
   width: calc(100% - 60px);
   z-index: 9999;
   background-color: rgba(255,0,0,0.90);
   box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.55);
   #close {
      height: 18px;
      width: 18px;
      width: 100%;
      border: 1px solid #f00;
      background-color: rgba(200,0,0,1.00);
      color: #ccc;
      line-height: 18px;
      font-weight: bold;
      padding: 0px 0px 0px 5px;
      img {
         height: 16px;
         width: 16px;
         float: right;
         cursor: pointer;
      }
   }
   #text {
      padding: 5px;
      font-size: 0.60em;
   }
}