html, body
        {
            height: 100%;
        }
        body {
          font-family: Arial, sans-serif;
          margin: 0;
          padding: 0;
          background-color: #f9f9f9;
          color: #333;
          background: url("Fondo.png");
        }

        .container {
          display: flex;
          /*justify-content: space-between;*/
          align-items: flex-start;
          padding: 10px 0px;
          flex-wrap: wrap;
        }

        .form-section {
          /*flex: 99;*/
          background-color: #e5f0fc;
          padding: 15px;
          border-radius: 15px;
          /*width: 45%;*/
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          /*height: 80vh; max-height: 80vh; min-height: 80vh; overflow-y: scroll;*/
        }

        .form-group {
          /*display: flex;*/
          display: grid;
          grid-template-columns: repeat(2, 1fr); /* 4 columns of equal width */
          gap: 5px;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
        }

        .form-group label {
          font-size: 14px;
          font-weight: bold;
          flex: 2;
        }

        .form-group input {
          flex: 1;
          padding: 8px;
          font-size: 14px;
          border: 1px solid #ccc;
          border-radius: 24px;
          text-align: center;
        }

        .form-group input[type="number"], .form-group input[type="text"], .form-group input[type="currency"], .form-group input[type="percentage"] {
          width: 90%;
        }

        .select_formula {
          width: 90%;
          flex: 1;
          padding: 8px;
          font-size: 14px;
          border: 1px solid #ccc;
          border-radius: 24px;
          text-align: center;
          background: #fff;
        }

        .calculate-button {
          margin-left: 9%;    
          background-color: #3c61ab;
          color: #fff;
          text-align: center;
          padding: 15px;
          font-size: 16px;
          font-weight: bold;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          width: 44%;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .clear-button {
          background-color: #db0000;
          color: #fff;
          text-align: center;
          padding: 15px;
          font-size: 16px;
          font-weight: bold;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          width: 44%;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            background-image: url('clear.png');
            background-repeat: no-repeat;
            background-position: left;
            background-size: 25px 25px;
            background-origin: content-box;
            /*padding-<left|right>: <width of image>px;*/

        }

        .summary-section {
          flex: 1 0 300px;
          /*width: 55%;*/
          padding: 10px;
          margin-left: 10px;
        }

        .summary-section h3 {
          /*font-size: 16px;*/
          margin-bottom: 5px; margin-top: 5px;
          font-weight: bold;
        }

        /*.summary-group {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
        }

        .summary-group span {
          font-size: 12px;
        }*/

        .divider {
          border-top: 1px solid #ddd;
          margin: 20px 0;
        }

        .summary-section p {
            margin: 8px 0;
            line-height: 1.6;
            font-size: 12px;
        }

        strong {
            font-weight: bold;
        }

        /* Container for the cards */
        .summary-section {
            max-width: 500px;
            /*display: grid;
            grid-template-columns: repeat(4, 1fr); 
            gap: 5px; */
            /*padding: 5px;*/
        }

        /* Styling for individual cards */
        .card {
            /*border: 1px solid #ccc;*/
            /*border-radius: 8px;*/
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            border-bottom: 1px solid #eee;
            /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);*/
            /*background-color: #fff;*/
            /*text-align: center;*/
        }

        .output_table td{
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }

        /*.output_table tr{
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }*/

        /* Styling for the value */
        .value {
            font-size: 0.9em;
            color: #4a90e2; /*color: #333;*/
            font-weight: bold;
            margin-bottom: 3px;
        }

        /* Styling for the key */
        .key {
            /*font-weight: bold;*/
            font-size: 0.9em;
            /*color: #333;*/
        }

        .output_header{
            /*color:#666;*/
            grid-column: 1 / span 4; 
            border-top:1px solid #ddd;
        }
        .output_header_nb{
            /*color:#666;*/
            grid-column: 1 / span 4; 
        }

        .color_red{ color: #f44; }
        .color_green{color: #4f4;}
        .color_black{color: #444;}


        ::-webkit-scrollbar {width:8px;}
        ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(155,155,155,0.3); border-radius: 10px;}
        ::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(155,155,155,0.5);}

        .display_none{display: none;}
        .bold1{font-weight: bold;}

        .main_container{margin:20px; border:1px solid #eee; border-radius:30px;background: white;padding-bottom: 20px;}
        .title_container{margin:20px 20px 0px 20px;padding-top: 5px; display: inline-block;}
        .logo_img{height: 40px;vertical-align: text-bottom;}
        .span_section_title{margin: 0px; padding-left:20px;font-weight:bold; font-size:24px;vertical-align: text-bottom;}

        .auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:9999;}
        .auth-card{width:95%;max-width:380px;background:#fff;border-radius:12px;padding:16px;box-shadow:0 10px 25px rgba(0,0,0,0.25);}
        .auth-tabs{display:flex;gap:8px;margin-bottom:12px;}
        .auth-tabs button{flex:1;padding:10px;border:1px solid #ccc;background:#f5f5f5;border-radius:8px;cursor:pointer;font-weight:bold;}
        .auth-tabs button.active{background:#3c61ab;color:#fff;border-color:#3c61ab;}
        .auth-panel{margin-top:6px;}
        .auth-input{width:100%;padding:10px;margin:6px 0;border:1px solid #ccc;border-radius:8px;}
        .auth-button{width:100%;background-color:#3c61ab;color:#fff;padding:12px;border:none;border-radius:8px;font-weight:bold;cursor:pointer;margin-top:6px;}
        .auth-error{color:#c00;font-size:12px;min-height:16px;margin-top:8px;text-align:center;}