/* Generated CSS classes for inline style replacement */
/* This file fixes CSP violations by moving inline styles to classes */

/* Accessibility - WCAG compliant minimum touch target size */
.btn-accessible {
    min-height: 44px !important;
    min-width: 44px !important;
}

.min-height-44 {
    min-height: 44px !important;
}

.min-width-44 {
    min-width: 44px !important;
}

/* Custom styles for complex inline patterns */

.custom-style-1 {
    --progress: 75%
}

.custom-style-2 {
    height: 8px;
}

.custom-style-3 {
    width: 0%
}

.custom-style-4 {
    max-width: 96px
}

.custom-style-5 {
    height: 16px; width: auto;
}

.custom-style-6 {
    z-index: 1075;
}

.custom-style-7 {
    max-width: 194px
}

.custom-style-8 {
    border-radius: 0; position: relative; z-index: 1000;
}

.custom-style-9 {
    max-width: 62px
}

.custom-style-10 {
    max-height: 50px;
}

.custom-style-11 {
    width: 75%
}

.custom-style-12 {
    font-size: 2rem;
}

.custom-style-13 {
    max-width: 77px
}

.custom-style-14 {
    max-width: 3.125rem
}

.custom-style-15 {
    position: static; cursor: auto;
}

.custom-style-16 {
    max-width: 350px
}

.custom-style-17 {
    bottom: 20px; right: 20px; background: #1a1a1a; color: #e0e0e0; border-radius: 8px; border: 1px solid #333; font-family: monospace; font-size: 0.75rem; max-width: 18.75rem; z-index: 9999; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3)
}

.custom-style-18 {
    z-index: {{ forloop.revcounter }}
}

.custom-style-19 {
    display: flex; justify-content: center; margin: 60px 0;
}

.custom-style-20 {
    width: 97%;
}

.custom-style-21 {
    width: 94%;
}

.custom-style-22 {
    width: 98%;
}

.custom-style-23 {
    width: 92%;
}

.custom-style-24 {
    width: 89%;
}

.custom-style-25 {
    width: 87%;
}

.custom-style-26 {
    width: 91%;
}

.custom-style-27 {
    width: 88%;
}

.custom-style-28 {
    background: var(--compatibility-excellent);
}

.custom-style-29 {
    background: var(--compatibility-good);
}

.custom-style-30 {
    background: var(--compatibility-fair);
}

.custom-style-31 {
    font-size: 24px;
}

.custom-style-32 {
    width: 85%;
}

.custom-style-33 {
    left: 85%;
}

.custom-style-34 {
    width: 72%;
}

.custom-style-35 {
    left: 72%;
}

.custom-style-36 {
    left: 91%;
}

.custom-style-37 {
    width: 68%;
}

.custom-style-38 {
    left: 68%;
}

.custom-style-39 {
    text-align: center; margin-top: 40px;
}

.custom-style-40 {
    font-size: 18px; color: var(--color-gray-600); margin-bottom: 16px;
}

.custom-style-41 {
    
                        font-size: 64px; font-weight: 900; 
                        background: var(--gradient-genetic);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        font-family: var(--font-secondary);
                    
}

.custom-style-42 {
    text-align: center; margin-bottom: 40px;
}

.custom-style-43 {
    font-size: 32px; font-weight: 800; margin-bottom: 16px; color: var(--color-gray-900);
}

.custom-style-44 {
    font-size: 18px; color: var(--color-gray-600); max-width: 500px; margin: 0 auto;
}

.custom-style-45 {
    width: {{ compatibility.overall_score }}%;
}

.custom-style-46 {
    width: {{ compatibility.hla_score }}%;
}

.custom-style-47 {
    width: {{ compatibility.immune_score }}%;
}

.custom-style-48 {
    width: {{ compatibility.neural_score }}%;
}

.custom-style-49 {
    height: {{ metric.score|floatformat:0 }}px;
}

.custom-style-50 {
    width: {{ preferences.hla_importance }}%;
}

.custom-style-51 {
    left: {{ preferences.hla_importance }}%;
}

.custom-style-52 {
    width: {{ preferences.neuro_importance }}%;
}

.custom-style-53 {
    left: {{ preferences.neuro_importance }}%;
}

.custom-style-54 {
    width: {{ preferences.stress_importance }}%;
}

.custom-style-55 {
    left: {{ preferences.stress_importance }}%;
}

.custom-style-56 {
    
                font-size: 64px; font-weight: 900; 
                background: var(--gradient-genetic);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-family: var(--font-secondary);
            
}

.custom-style-57 {
    max-width: 600px; margin: 0 auto;
}

.custom-style-58 {
    max-width: 70px
}

.custom-style-59 {
    font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; background: linear-gradient(45deg, var(--dna-primary), var(--dna-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.custom-style-60 {
    font-size: 1.2rem; color: #6b7280; margin-bottom: 2rem; line-height: 1.6;
}

.custom-style-61 {
    background: linear-gradient(45deg, #f0f9ff, #e0f2fe); border-radius: 16px; padding: 2rem; margin: 2rem 0; border-left: 4px solid var(--dna-primary);
}

.custom-style-62 {
    color: var(--dna-primary); margin-bottom: 1rem; font-weight: 600;
}

.custom-style-63 {
    text-align: left; color: #374151; line-height: 1.8; margin: 0; padding-left: 1.5rem;
}

.custom-style-64 {
    margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e7eb;
}

.custom-style-65 {
    color: #9ca3af; font-size: 0.875rem;
}

.custom-style-66 {
    color: #666; margin-bottom: 15px;
}

.custom-style-67 {
    background: linear-gradient(45deg, #fef3c7, #fde68a); border-radius: 16px; padding: 2rem; margin: 2rem 0; border-left: 4px solid #f59e0b;
}

.custom-style-68 {
    color: #d97706; margin-bottom: 1rem; font-weight: 600;
}

.custom-style-69 {
    text-align: left; color: #92400e; line-height: 1.8; margin: 0; padding-left: 1.5rem;
}

.custom-style-70 {
    color: var(--dna-primary); text-decoration: none;
}

.custom-style-71 {
    max-width: 88px
}

.custom-style-72 {
    max-height: 80px;
}

.custom-style-73 {
    height: 20px; width: 20px;
}

.custom-style-74 {
    height: 4px;
}

.custom-style-75 {
    z-index:999;
}

.custom-style-76 {
    margin-top: 3%;
}

.custom-style-77 {
    padding-top: 120px
}

.custom-style-78 {
    padding-left: 6px; border: 1px solid #0F75BD; border-radius: 50px; background-color: #fefefc;  width: fit-content; padding-right: 12px;
}

.custom-style-79 {
    padding-left: 12px; border: 1px solid #0F75BD; border-radius: 50px; background-color: #fefefc;  width: fit-content; padding-right: 12px;
}

.custom-style-80 {
    padding-left: 12px; border: 1px solid #0F75BD; border-radius: 50px; background-color: #fefefc; width: fit-content; padding-right: 9px;
}

.custom-style-81 {
    color:#0F75BD;
}

.custom-style-82 {
    max-width: 450px
}

.custom-style-83 {
    width: 100%; max-width: 90px
}

.custom-style-84 {
    max-width: 412px
}

.custom-style-85 {
    width: 100%; max-width: 194px
}

.custom-style-86 {
    height: 60px;
}

.custom-style-87 {
    z-index: 1050;
}

.custom-style-88 {
    max-width: 79px
}

.custom-style-89 {
    font-size: 0.75rem; cursor: pointer
}

.custom-style-90 {
    max-width: 1024px
}

.custom-style-91 {
    max-width: 330px
}

.custom-style-92 {
    max-width: 320px
}

.custom-style-93 {
    max-width: 533px
}

.custom-style-94 {
    max-width: 9.375rem
}

.custom-style-95 {
    max-width: 150px
}

.custom-style-96 {
    background-image: url(
}

.custom-style-97 {
    background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(10px) !important; border: none !important; box-shadow: none !important; padding: 30px 40px; margin: 0 auto; border-radius: 20px;
}

.custom-style-98 {
    cursor:pointer; font-size:12px;
}

.custom-style-99 {
    cursor:pointer;
}

.custom-style-100 {
    padding-top: 120px;
}

.custom-style-101 {
    max-width: 400px
}

.custom-style-102 {
    max-width: 90px
}

.custom-style-103 {
    max-width: 60px
}

.custom-style-104 {
    max-width: 420px
}

.custom-style-105 {
    max-width: 120px
}

.custom-style-106 {
    max-width: 512px
}

.custom-style-107 {
    max-width: 37.5rem
}

.custom-style-108 {
    max-width: 360px
}

.custom-style-109 {
    font-size: 4rem;
}

.custom-style-110 {
    width: 40px; height: 40px;
}

.custom-style-111 {
    max-width: 400px;
}

.custom-style-112 {
    max-width: 600px
}

.custom-style-113 {
    max-width: 25rem
}

.custom-style-114 {
    width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; background: conic-gradient(#007bff 0deg 324deg, #e9ecef 324deg);
}

.custom-style-115 {
    width: 120px; height: 120px; background: white; border-radius: 50%; margin: 15px;
}

.custom-style-116 {
    width: 60px; height: 60px;
}

.custom-style-117 {
    max-width: 31.25rem
}

.custom-style-118 {
    max-width: 580px
}

.custom-style-119 {
    max-width: 560px
}

.custom-style-120 {
    height: 120px;
}

.custom-style-121 {
    --progress: 65%;
}

.custom-style-122 {
    margin-top: 40px
}

.custom-style-123 {
    max-width: 6.25rem
}

.custom-style-124 {
    max-width: 180px
}

.custom-style-125 {
    font-size: 3rem;
}

.custom-style-126 {
    font-size: 1.3rem; max-width: 700px; margin: 0 auto;
}

.custom-style-127 {
    z-index: 10;
}

.custom-style-128 {
    padding-top:10px
}

.custom-style-129 {
    color:#489cc0
}

.custom-style-130 {
    margin-top:50px
}

.custom-style-131 {
    margin-left: 18.1px;
}

.custom-style-132 {
    display: inline-block;margin-bottom: 17px;
}

.custom-style-133 {
    display: block; padding-left: 0px;
}

.custom-style-134 {
    width: 25px; height: auto;  padding-left: 5px; margin-right: 5px;
}

.custom-style-135 {
    width: 25px; height: auto; padding-left: 5px;
}

.custom-style-136 {
    float: left; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; padding-top: 20px
}

.custom-style-137 {
    color: #1274BF; margin-left: 4px;
}

.custom-style-138 {
    color: black;
}

.custom-style-139 {
    color: #f72c93
}

.custom-style-140 {
    margin-top: -70px;
}

.custom-style-141 {
    margin-bottom: 40px;
}

.custom-style-142 {
    margin-bottom: 20px;
}

.custom-style-143 {
    width: 80px; height: 80px;
}

.custom-style-144 {
    height: 150px
}

.custom-style-145 {
    stop-color:#4CAF50;stop-opacity:1
}

.custom-style-146 {
    stop-color:#2E7D32;stop-opacity:1
}

.custom-style-147 {
    stop-color:#1B5E20;stop-opacity:1
}

.custom-style-148 {
    opacity:.6
}

.custom-style-149 {
    margin-top:16px
}

.custom-style-150 {
    width: {% if genetic_analysis.carrier_screening.risk_level == 
}

.custom-style-151 {
    max-width: 3.75rem
}

.custom-style-152 {
    width: 87%
}

.custom-style-153 {
    width: 92%
}

.custom-style-154 {
    width: 78%
}

.custom-style-155 {
    width: 94%
}

.custom-style-156 {
    width: 88%
}

.custom-style-157 {
    width: 57%
}

.custom-style-158 {
    width: 60%
}

.custom-style-159 {
    width: 85%
}

.custom-style-160 {
    width: 90%
}

.custom-style-161 {
    width: 70%
}

.custom-style-162 {
    width: 80%
}

.custom-style-163 {
    width: 62%
}

.custom-style-164 {
    width: 82%
}

.custom-style-165 {
    padding-left: 30px; padding-right: 30px; color:#0F75BD ;
}

.custom-style-166 {
    margin-top: 70px;
}

.custom-style-167 {
    color:blue;
}

.custom-style-168 {
    color:#e60000;
}

.custom-style-169 {
    margin: 0px 20px 0px 0px; padding: 20px 0px 0px 0px;
}

.custom-style-170 {
    width: 30px; height: 30px; padding-right: 5px;
}

.custom-style-171 {
    width: 25px; height: 25px; padding-right: 5px
}

.custom-style-172 {
    width: 210px; padding: 10px
}

.custom-style-173 {
    color: #8a8a8c
}

.custom-style-174 {
    padding-left: auto; padding-right: auto
}

.custom-style-175 {
    color:#60cfff;
}

.custom-style-176 {
    color: white;
}

.custom-style-177 {
    color: #60cfff;
}

.custom-style-178 {
    color: var(--secondary-color);
}

.custom-style-179 {
    font-size: 1.4rem; font-weight: 500;
}

.custom-style-180 {
    font-size: 1.2rem;
}

.custom-style-181 {
    text-align:center; color: #F72C93
}

.custom-style-182 {
    margin-top: 70px; margin-bottom: 70px;
}

.custom-style-183 {
    display: flex; justify-content: center;
}

.custom-style-184 {
    font-size: 1.5rem;
}

.custom-style-185 {
    font-size: 1.5rem; color: #F72C93;
}

.custom-style-186 {
    font-size: 1.5rem; color: #0F75BD;
}

.custom-style-187 {
    font-size: 2rem; color: #0F75BD;
}

.custom-style-188 {
    font-size: 2rem; color: #F72C93;
}

.custom-style-189 {
    font-weight: 600; color: #1377b7;
}

.custom-style-190 {
    float: center; border-radius: 25px; color: white; background-color: #ed3992; font-size: 20px;
}

.custom-style-191 {
    clear:both; padding-top: 20px;
}

.custom-style-192 {
    font-weight: 400; color: #ed3992;
}

.custom-style-193 {
    display: flex; justify-content: center; align-items: center;
}

.custom-style-194 {
    padding-bottom: 50px;
}

.custom-style-195 {
    max-width: 800px;
}

.custom-style-196 {
    display: inline-block; text-align: left;
}

.custom-style-197 {
    padding-left: 30px; padding-right: 30px;
}

.custom-style-198 {
    color: #F43996;
}

.custom-style-199 {
    text-align: right; font-size: 1em; padding-right: 30px
}

.custom-style-200 {
    width: ${score}%; background: ${this.getCompatibilityColor(score)};
}

.custom-style-201 {
    float: center; border-radius: 25px; color: white; background-color: #ed3992; font-size: 20px; width: 43%; text-align: center; margin-left: 8% 
}

.custom-style-202 {
    float: center; border-radius: 25px; color: white; background-color: #1377b7; font-size: 20px; width: 43%; text-align: center; margin-top: 10px; margin-left: 10px
}

.custom-style-203 {
    font-weight: 600; color: #ed3992;
}

.custom-style-204 {
    float: center; border-radius: 25px; color: white; background-color: #ed3992; font-size: 20px; width: 43%; text-align: center; width: fit-content; padding-left: 9px; padding-right: 9px;
}

.custom-style-205 {
    float: center; border-radius: 25px; color: white; background-color: #1377b7; font-size: 20px; width: 43%; text-align: center; width: fit-content; padding-left: 9px;padding-right: 9px; margin-top: 10px; 
}

.custom-style-206 {
    font-weight: 300;
}

.custom-style-207 {
    font-size: 1.3rem; max-width: 700px
}

.custom-style-208 {
    padding-top: 30px;
}

.custom-style-209 {
    padding-left: 0px; padding-right: px;
}

.custom-style-210 {
    margin-top: 10px; margin-bottom: 10px;
}

.custom-style-211 {
    display: inline-flex;
}

.custom-style-212 {
    height: 18px;
}

.custom-style-213 {
    min-height: 75px; height: fit-content; overflow: hidden; background-size: cover;
}

.custom-style-214 {
    left:0px; top: 70px
}

.custom-style-215 {
    margin-left: 0px; width: 102%
}

.custom-style-216 {
    width:664px; margin-left:0px
}

.custom-style-217 {
    width: fit-content;
}

.custom-style-218 {
    margin: 3% -25%; margin-top: 20px;
}

.custom-style-219 {
    height: 450px; max-height: 450px; text-align:left
}

.custom-style-220 {
    width: 160px
}

.custom-style-221 {
    width: 150px; background-color: #0F75BD; border: #357ebd;
}

.custom-style-222 {
    font-weight: 500; text-align:center
}

.custom-style-223 {
    color: #1A76BB;
}

.custom-style-224 {
    color: #4834AF;
}

.custom-style-225 {
    text-align:center; 
}

.custom-style-226 {
    vertical-align:top;
}

.custom-style-227 {
    font-size: 15px; padding-left: 10px;
}

.custom-style-228 {
    color: #F43996; font-size: 18px; font-weight: 500;
}

.custom-style-229 {
    font-size: 12px; float: right; cursor: pointer
}

.custom-style-230 {
    color: #1A76BB; font-size: 18px; font-weight: 500;
}

.custom-style-231 {
    text-decoration:underline
}

.custom-style-232 {
    color: #F43996
}

.custom-style-233 {
    font-weight: 500; text-align: center; color: #0175bf
}

.custom-style-234 {
    margin:auto; text-align: center;
}

.custom-style-235 {
    line-height: 40px;
}

.custom-style-236 {
    background-color:#f23ead
}

.custom-style-237 {
    font-weight: 500; color: #0175bf
}

.custom-style-238 {
    text-decoration:underline; font-weight: 100
}

.custom-style-239 {
    text-decoration:underline; color: #1A76BB;
}

.custom-style-240 {
    background-color: #6A53B7; margin-top: 50px;
}

.custom-style-241 {
    font-weight: 500; text-align:center; color: #0175bf
}

.custom-style-242 {
    padding: 0% 10%;
}

.custom-style-243 {
    margin-top: 20px;
}

.custom-style-244 {
    display: none; padding: 2%;
}

.custom-style-245 {
    background-color: #fdf7fd;
}

.custom-style-246 {
    background-color: #6A53B7
}

.custom-style-247 {
    background: #F72C93;
}

.custom-style-248 {
    background: #0F75BD;
}

.custom-style-249 {
    color:white;
}

.custom-style-250 {
    margin-bottom: 15px;
}

.custom-style-251 {
    padding-left: 30px; padding-right: 30px; color: #F72C93;
}

.custom-style-252 {
    padding-left: 30px; padding-right: 30px; color: #0F75BD;
}

.custom-style-253 {
    font-weight: 700
}

.custom-style-254 {
    font-weight: 600; font-size: 80px; text-align: center;
}

.custom-style-255 {
    font-weight: 600;
}

.custom-style-256 {
    background-color: #ffffff; padding: 30px; border: 1px solid black; border-radius: 10px
}

.custom-style-257 {
    width: 10px
}

.custom-style-258 {
    height: 1.4em; width: auto;
}

.custom-style-259 {
    font-size: 1.1em;
}

.custom-style-260 {
    border-radius: 25px; color: white; background-color: #ed3992; font-size: 20px; width: 100%; text-align: center;
}

.custom-style-261 {
    border-radius: 25px; color: white; background-color: #1377b7; font-size: 20px; width: 100%; text-align: center;
}

.custom-style-262 {
    padding: 0% 5%;
}

.custom-style-263 {
    font-weight: bold; color: #1377b7
}

.custom-style-264 {
    color: #ed3992
}

.custom-style-265 {
    max-height: 400px; object-fit: contain; background: transparent; border: none; box-shadow: none;
}

.custom-style-266 {
    margin-top: 40px;
}

.custom-style-267 {
    background-color: rgba(246,49,146,0.50); min-width: 250px;
}

.custom-style-268 {
    width: 40px; height: 40px; border-radius: 4px;
}

.custom-style-269 {
    background-color: rgba(19,119,183,0.50); min-width: 250px;
}

.custom-style-270 {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.custom-style-271 {
    font-size: 3rem; color: var(--primary-color);
}

.custom-style-272 {
    border-radius: 50px; background: linear-gradient(45deg, #f23ead, #e91e63); border: none;
}

.custom-style-273 {
    padding-left: 30px; padding-right:30px;
}

.custom-style-274 {
    padding-top: 80px; padding-bottom: 10px;
}

.custom-style-275 {
    padding-top: 40px; padding-bottom: 10px;
}

.custom-style-276 {
    padding-bottom: 20px;
}

.custom-style-277 {
    padding-bottom: 10px;
}

.custom-style-278 {
    padding-top: 5px; background-color: #0F75BD; border: 1px solid #0F75BD; border-radius: 50px;
}

.custom-style-279 {
    padding-left: 15px; padding-right: 15px; padding-bottom: 10px; margin-top: 15px;
}

.custom-style-280 {
    font-size: 14px; color: #666;
}

.custom-style-281 {
    color: #f23ead; word-break: break-all;
}

.custom-style-282 {
    color: #f23ead;
}

.custom-style-283 {
    height: 5px;
}

.custom-style-284 {
    width: 150px; height: 150px;
}

.custom-style-285 {
    background-color: white;
}

.custom-style-286 {
    background-color: #0F75BD; border: #357ebd; border-radius: 25px; padding: 10px 25px; margin-top: 10px;
}

.custom-style-287 {
    
            background-color: #0d75bd;
            color: white;
}

.custom-style-288 {
    
                background-color: #0d75bd;
                color: white;
}