  <style>
        .toast-error {
            background-color: #d01c8b;
        }

        .toast-success {
            background-color: #4dac26;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        * {
            color: #ffffff!important;
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        html,
        body {
            background-color: #1c202a;
            height: 100%;
        }

        .form-control {
            padding-top: 10px;
            padding-bottom: 10px;
            width: 50%; /* Ensures full width in a container or specify a fixed width like 300px */
            background-color: #1a68b7; /* A bluish shade to contrast the button color */
            /*background-color: #272c39;*/
            border: 1px solid #164f91; /* Border to match the theme */
            /*border: none;*/
            color: white;
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;    
            border-radius: 5px; /* Rounded corners similar to the button */
        }
        .form-control::placeholder {
            color: rgb(200, 200, 200);
            /*color: rgb(155, 155, 155);*/
        }

        .form-control:focus {
            box-shadow: none;
            background-color: #164f91; /* Darker shade on focus */
            /*background-color: #272c39;*/
            color: white;
            border: 1px solid #0a2c5d; /* Even darker border on focus to enhance visibility */
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.2); /* Subtle glow effect */
        }

        .btn-primary {
            background-color: #564dc1;
            border: none;
            width: 50%; /* Ensures full width in a container or specify a fixed width like 300px */
            padding: 10px 20px; /* Ensure padding matches input fields */
            font-size: 14px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 5px; /* Match the input field radius */
            cursor: pointer; /* Already defined */
        }

        .btn-primary:disabled {
            background-color: #564dc1;
            border: none;
            font-size: 14px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .btn-primary:hover {
            background-color: #4f45b6;
        }

        .btn-primary:active {
            background-color: #4940ad !important;
            border: none;
            box-shadow: none;
        }

        .btn-primary:focus-visible {
            box-shadow: none;
            background-color: #4940ad !important;
        }

        .btn-outline-primary {
            color: white;
            border: var(--bs-btn-border-width) solid #564dc1;
            font-size: 14px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .btn-outline-primary:disabled {
            color: white;
            border: var(--bs-btn-border-width) solid #564dc1;
            font-size: 14px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .btn-outline-primary:hover {
            --bs-btn-hover-color: white;
            background-color: #4f45b6;
            border-color: #4f45b6;
        }

        .btn-outline-primary:active {
            background-color: #4940ad !important;
            border-color: #4940ad !important;
        }

        .btn-outline-primary:focus-visible {
            background-color: #4940ad !important;
            border-color: #4940ad !important;
            box-shadow: none;
        }

        .modal-content {
            background-color: #272c39;
        }

        .modal-header {
            padding: 10px 16px;
            border-bottom: var(--bs-modal-header-border-width) solid #3a4050;
        }

        .modal-footer {
            border-top: var(--bs-modal-footer-border-width) solid #3a4050;
        }

        .btn-close {
            --bs-btn-close-color: white;
        }

        .logo-relative {
            position: absolute;
            top: 5%;
            width: 100%;
            text-align: center;
        }

        .responsiveText {
            overflow-wrap: break-word;
        }

        .pointer {
            cursor: pointer !important;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background: (white);
            border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: (white);
        }

        a {
            color: white;
        }
        /* END styles code inherited from QnAI-template.html */
        /* styles code inherited from competition.php */
        table {
            border-collapse: collapse;
            /* Center the table */            
            margin: 0 auto;
            margin-bottom: 20px;
        }
        th, td {
            text-align: left;
            padding: 6px;
        }
        th {
            background-color: #1c202a; /*#282828;*/
            font-weight: bold;
        }
        .golden-ratio-table th {
	        text-align: center; /* Optional: Center align the header */
		  }
        .text-content {
        width: 100%;
        display: block;  /* Change from flex to block if needed */
        }
    	  .golden-ratio-table .col1 {
        	width: 38.2%; /* Approximately 100/1.618 */
		  }
	    .golden-ratio-table .col2 {
        width: 61.8%; /* Remaining width */
   	  }
        button {
            cursor: pointer;
        }
        #reportResult, #interpretationResult {
            margin-top: 20px;
        }
        h2 {
            color: #333;
        }
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        /* Responsive Design */
        @media screen and (max-width: 600px) {
            body {
                font-size: 14px;
            }
            h2 {
                font-size: 18px;
            }
            table, input[type="number"] {
                width: 100%;
                font-size: 14px;
            }
            button {
                font-size: 14px;
            }
        }
     header {
         background: #fff; /* Change to a neutral background */
         padding: 10px 0;
         border-bottom: 2px solid #eee;
         text-align: center; /* Center the content in the header */
     }
     header #branding {
         display: inline-block;
         vertical-align: middle;
     }
     header #branding h1 {
         margin: 0;
         display: inline-block;
         vertical-align: middle;
     }
     header #branding img {
         height: 50px; /* Adjust the size of your logo */
         vertical-align: middle;
     }
		.container {
		    text-align: center;
		    width: 100%; /* Full width */
		    margin: 0 auto; /* Center in the viewport */
		}		
		.container.form-container {
		    max-width: 600px; /* Maximum width of the form */
		    margin: 20px auto; /* Vertical margins and horizontal auto margins for centering */
		    padding: 20px;
		    background-color: #f9f9f9;
		    color: black;
		    border-radius: 8px;
		    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		    display: block; /* Block-level elements can be centered with margin auto */
		}
		
			.container.form-container label {
    color: black; /* This ensures that labels within the form-container are black */
    }

	.centered-table {
		  width: 100%;       /* Table width set to 60% of the parent element */
		  margin-left: auto;  /* Left margin set to auto to center the table */
		  margin-right: auto; /* Right margin set to auto to center the table */
		    max-width: 600px; /* Maximum width of the form */
		    margin: 8px auto; /* Vertical margins and horizontal auto margins for centering */
		    padding: 6px;
		}
     button {
         background-color: #4CAF50; /* A nicer shade of green */
         color: white;
         border: none;
         padding: 10px 20px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 16px;
         margin: 4px 2px;
         transition-duration: 0.4s;
         cursor: pointer;
         border-radius: 5px;
     }
     button:hover {
         background-color: #45a049;
     }
     input[type="submit"] {
         background-color: #008CBA; /* A nice shade of blue */
         color: white;
         padding: 10px 20px;
         border: none;
         border-radius: 5px;
         cursor: pointer;
         font-size: 16px;
     }
     input[type="submit"]:hover {
         background-color: #007B9A;
     }
        /* END styles code inherited from competition.php */
        
     /* add styles for managing user data */

      
     /* styles for checkmark and cross (source: chatGPT) */
      
		.checkmark-circle, .cross-circle {
		    font-size: 24px; /* Adjust size as needed */
		    color: white; /* Icon color */
		    border-radius: 50%; /* Ensures the background is a circle */
		    width: 30px; /* Width of the circle */
		    height: 30px; /* Height of the circle */
		    display: inline-flex;
		    align-items: center; /* Center the icon vertically */
		    /* justify-horizontal: center; Center the icon horizontally */
		}
		
		.checkmark-circle {
		    background-color: green; /* Circle background color for checkmark */
		    /*  <span class="checkmark-circle">&#x2713;</span>  */
		}
		
		.cross-circle {
		    background-color: red; /* Circle background color for cross */
		   /*  transform: rotate(45deg); Rotate the cross by 45 degrees */
		   /*   <span class="cross-circle">&#x2716;</span> */
		}
		.svg-icon {
		    width: 30px; /* or any other dimensions you prefer */
		    height: auto; /* maintains the aspect ratio */
		    vertical-align: middle; /* aligns the icon vertically within the line */
		 }

		/* Additional style to ensure alignment and responsiveness */
		.table-cell {
		    display: flex;
		    align-items: center; /* Centers content vertically */
		    justify-content: center; /* Centers content horizontally */
		 } 
		
		.centered-row td {
		    text-align: center; /* Centers text horizontally */
		    vertical-align: middle; /* Centers text vertically if needed */
		}


		/* Additional style to showcase AI features */
#premiumForm {
    display: flex;  /* Enables Flexbox layout */
    justify-content: space-between; /* Space between the two main divs */
    align-items: flex-start; /* Align items at the start of the Flexbox container */
    padding: 20px; /* Optional padding */
}

.text-content, .media-content {
    flex: 1;  /* Each child takes up equal space */
    margin: 10px; /* Space between the two sections */
}

.media-content {
    max-width: 400px; /* Maximum width for media content */
    overflow: hidden; /* Ensures no overflow of content outside the boundary */
}

.media-content video, .media-content img {
    width: 100%; /* Makes video or images resize responsively */
    height: auto; /* Maintain aspect ratio */
}

@media (max-width: 800px) { /* Adjust breakpoint as necessary */
    #investorForm {
        flex-direction: column; /* Stack vertically on small screens */
    }

    .text-content, .media-content {
        flex: none; /* Take the width as required */
        max-width: 100%; /* Full width on small screens */
        margin: 10px 0; /* Adjust margin for vertical stacking */
    }
}

  </style>
