.custom-tooltip {

       /* display: none; */

       /* position: relative;

       background-color: #fa6750;

       color: #fff;

       border-radius: 4px;

       padding: 11px 14px 8px;

       font-size: 14.5px;

       z-index: 999;

       width: 70%;

       margin: auto; */

       position: relative;
       background-color: #fa6750;
       color: #fff;
       border-radius: 4px;
       padding: 11px 14px 8px;
       font-size: 14.5px;
       z-index: 999;
       width: 90%;
       margin: auto;
       top: -20px;

   }



   .steps input,
   .steps textarea,
   .steps select {
       height: 50px;
   }

   .input-group-text {
       height: 50px;
   }

   .label-title {
       color: #0b9926;
       /* green */
       font-weight: bold;
       font-size: 1.25rem;
   }

   .result-text {
       color: #0b9926;
       font-size: 25px;
       font-weight: 900;
   }

   .label-text {
       font-size: 25px;
   }

   .info-text {
       font-size: 15px;
       color: #555;
   }

   .input-group-text {
       background-color: #eee;
       border: 1px solid #ccc;
   }


   .steps input,
   .steps textarea,
   .steps select {
       font-size: 18px;
   }

   .myscore {

       color: #008c8b;
       font-weight: bold;
       font-size: 40px;
   }

   .custom-btn {
       background: linear-gradient(45deg, #008989, #00b664);
       color: white;
       border-radius: 7px;
       border: 1px solid #4cb17c;
       font-family: "ElMessiriwght", sans-serif !important;
   }

   .custom-btn:hover {
       background: linear-gradient(95deg, #008989, #00b664) !important;
       color: white !important
   }

   .input-div {
       border-bottom: 1px dotted #999;
       height: 24px;
   }

   .point-block h1 {
       color: #008c8b;
       font-weight: bold;
       font-size: 55px;
   }

   .result-container {
       background: radial-gradient(circle, rgb(237 237 237) 0%, rgb(230 230 230) 50%, rgb(248 248 248) 100%);

   }

   .point-block {
       margin-top: -20px;
   }

   /* .table-bg {
       background: url('../../images/whitebox@2x.png');
   } */
   /*  */

   .parameter-card {
       background: url('/path/to/your/background-image.png') no-repeat center;
       background-size: cover;
       border-radius: 15px;
       padding: 2rem 1rem 1rem;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       position: relative;
       max-width: 400px;
       margin: auto;
   }

   .parameter-tab {
       background: linear-gradient(to right, #0c9b69, #198754);
       color: white;
       font-weight: bold;
       padding: 0.5rem 1rem;
       position: absolute;
       top: -20px;
       left: 20px;
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
       z-index: 2;
   }

   .parameter-table {
       width: 100%;
       background-color: white;
       border-radius: 10px;
       overflow: hidden;
   }

   .parameter-table tr:nth-child(even) {
       background-color: #f1f9f5;
   }

   .parameter-name {
       color: #198754;
       /* Bootstrap green */
       font-weight: bold;
       padding: 0.75rem;
       text-align: left;
       width: 50%;
       font-size: 22px;
   }

   .parameter-value {
       color: #b22222;
       /* dark red */
       font-weight: bold;
       padding: 0.75rem;
       text-align: right;
       width: 50%;
       font-size: 22px;
   }

   .ribbon-block {
       background: white;
       border-radius: 10px;
       box-shadow: rgb(207 207 207) -5px 7px 6px 4px;

   }

   .ribbon {
       padding: 10px 20px;
       font-size: 30px;
       height: 50px;
       line-height: 30px;
       clear: left;
       position: absolute;
       top: 0;
       left: 0px;
       color: #fff;
       z-index: 2;
       border-radius: 10px 0px 40px 0px;
   }

   .ribbon-secondary {
       background: linear-gradient(45deg, #00a261, #008c84)
   }

   .ribbon-clip {
       left: -14px;
   }

   .ribbon-clip:before {
       position: absolute;
       top: 50px;
       left: 0;
       width: 0;
       height: 0;
       content: "";
       border: 7px solid transparent;
       border-top-color: #2c323f;
       border-right-color: #2c323f;
   }

   .ribbon-secondary.ribbon-clip:before {
       border-color: transparent;
       border-top-color: #008c84;
       border-right-color: #008c84;
   }

   @media only screen and (max-width: 575.98px) and (orientation: portrait) {
       .point-block h1 {
           font-size: 35px;
       }
   }

   .green-label {
       color: #0b9926
   }

   .form-section {
       border: 1px solid #ddd;
       border-radius: 10px;
       padding: 20px;
       background-color: #fff;
       max-width: 500px;
       margin: auto;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
   }

   .norm-text {
       font-size: 0.875rem;
       color: #888;
   }

   .custom-tooltip:before {

       content: "";

       position: absolute;

       top: -12px;

       left: 50%;

       height: 9px;

       width: 11px;

       border: 6px solid transparent;

       border-bottom-color: #fa6750;

       transform: translateX(-50%);

       display: block;

       text-transform: uppercase;

       letter-spacing: .03em;

       font-weight: 600;

       font-size: 20px;

   }





   #content {

       margin-top: 8px;

       background-color: #d7d7d7;

       padding: 0 14px 8px;

   }