@import"https://fonts.googleapis.com/css?family=Raleway";:root{--mainPadding: 40px;--colorGreen: hsl(173, 94%, 39%);--colorBlue: hsl(244, 98%, 50%);--colorLightYellow: hsl(44, 100%, 70%);--colorYellow: hsl(44, 100%, 50%);--colorDisabled: hsl(0, 0%, 67%);--colorRed: hsl(0, 100%, 50%);--colorWhite: hsl(0, 0%, 100%);--menuHeight: 50px;--menuPadding: 1em}body{margin:0;font-size:xx-large}.page-container{height:calc(100vh - var(--menuHeight) - (2 * var(--menuPadding)));height:calc(100dvh - var(--menuHeight) - (2 * var(--menuPadding)))}.page-container button,select{font-size:large;background-color:#fff;border-radius:10px;border-style:solid;padding:10px;min-width:150px;transition:background .2s}html{box-sizing:border-box;font-family:Raleway}*,*:before,*:after{box-sizing:inherit}.centered-container{display:flex;justify-content:center}.button-link{background-color:transparent;border:none;padding:0;cursor:pointer}.title{margin-left:10px;width:100%}.title-bottom-margin{margin-bottom:30px}.app-form label,.admin-form label,.payment-fieldset legend{display:block;font-size:large;margin-bottom:4px;color:#333}.payment-fieldset{width:100%;min-width:0;margin:0;padding:0;border:0}.field-hint{display:block;margin-top:4px;color:#555;font-size:.875rem}.checkout-status{width:100%;outline:none}.checkout-status h3{margin:0 0 8px}.checkout-status-success{color:var(--colorGreen);font-size:large}.checkout-link-action{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.app-form input,.admin-form input{width:100%;padding:10px;font-size:large;border:2px solid #ccc;border-radius:10px;box-sizing:border-box;transition:border-color .2s}.app-form input:focus,.admin-form input:focus{outline:none;border-color:var(--colorGreen)}@media (max-width: 850px){body{font-size:large}.page-container button,select{font-size:medium}:root{--mainPadding: 15px}}.main-content{display:flex;flex-direction:column;height:100%}.main-content img{max-height:25rem;width:100%;object-fit:cover;vertical-align:top}.main-text{flex:1 1 auto}.main-logo{position:relative;width:100%;max-height:55%;overflow:hidden}.main-logo-text{background:linear-gradient(to bottom,#0000,#000c 30%,#0009);position:absolute;font-size:5vw;color:#fff;bottom:0;width:100%;padding-left:15px;padding-top:5vw;text-transform:uppercase;white-space:normal;word-wrap:break-word}.main-content .main-text{text-align:center;padding:0 15%;margin-top:30px}.main-buttons{display:flex;align-items:center;flex-direction:column;gap:10px;width:100%}.main-buttons button{height:70px;width:80%;max-width:500px;font-size:2rem}@media (max-width: 850px){.main-content .main-text{padding:0 10%}.main-logo-text{font-size:6vw;padding-top:3vw}}.footer{position:fixed;left:0;bottom:0;width:100%;font-size:.4em;background-color:#333;color:#fff;text-align:center;padding:5px 0}.footer-clear{clear:both;height:60px}@media (max-width: 850px){.footer{font-size:.8em}}:root{--selectedColor: rgb(249, 255, 0);--menuFontColor: rgb(255, 255, 255)}nav ul a{color:#fff;text-decoration:none;border-radius:5px;font-size:20px;font-weight:700;transition:all .3s ease;text-align:center;padding:15px;vertical-align:middle}nav ul li:hover:has(a){background-color:#000;color:#fff;border-radius:10px}nav a{text-decoration:none;color:#fff}.top-nav{display:flex;flex-direction:row;align-items:center;gap:50px;background-color:#00baf0;background:linear-gradient(to right,var(--colorGreen),var(--colorGreen),var(--colorBlue));color:#fff;height:var(--menuHeight);padding:var(--menuPadding)}.menu{flex-grow:1;display:flex;flex-direction:row;justify-content:left;list-style-type:none;margin:0;padding:0}.menu>li{margin:0 .1rem;text-align:center;overflow:hidden}.menu-button-container{display:none;height:100%;width:30px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center}#menu-toggle~.menu li.spacer{padding-left:15px;padding-right:15px}#menu-toggle{flex-grow:1;display:none}.menu-button,.menu-button:before,.menu-button:after{display:block;background-color:#fff;position:absolute;height:4px;width:30px;transition:transform .4s cubic-bezier(.23,1,.32,1);border-radius:2px}.menu-button:before{content:"";margin-top:-8px}.menu-button:after{content:"";margin-top:8px}#menu-toggle:checked+.menu-button-container .menu-button:before{margin-top:0;transform:rotate(405deg)}#menu-toggle:checked+.menu-button-container .menu-button{background:#fff0}#menu-toggle:checked+.menu-button-container .menu-button:after{margin-top:0;transform:rotate(-405deg)}.lang-switcher{display:flex;gap:10px;justify-content:flex-end}.lang-switcher .button-link{color:var(--menuFontColor)}.lang-switcher .button-link.selected{font-weight:700;color:var(--selectedColor)}@media (max-width: 850px){.menu-button-container{display:flex}.menu{position:absolute;top:0;left:0;margin-top:50px;flex-direction:column;width:100%;justify-content:center;align-items:center;z-index:100}#menu-toggle~.menu li{height:0;margin:0;padding:0;border:0;transition:height .4s cubic-bezier(.23,1,.32,1)}#menu-toggle~.menu li.spacer{display:none}#menu-toggle:checked~.menu li{border:1px solid #333;height:2.5em;padding:.5em;transition:height .4s cubic-bezier(.23,1,.32,1)}nav ul a{padding:0;width:100%}.menu>li{display:flex;justify-content:center;margin:0;padding:.5em 0;width:100%;color:#fff;background-color:#222}.menu>li:not(:last-child){border-bottom:1px solid #444}.right-menu{display:flex;width:100%;flex-direction:row-reverse;justify-content:space-between}}.learning-page{max-width:800px;margin:15px auto 0}.learning-page .categories{overflow:hidden;width:fit-content;display:flex;flex-direction:column;align-items:center;margin-left:auto;margin-right:auto}.learning-page select{display:block;min-width:400px;max-width:99vw;margin-top:30px}.learning-page .progress{position:relative;width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#000}.learning-page .progress-container{display:flex;justify-content:center;margin-top:30px;margin-bottom:30px}.learning-page .reset-progress{margin-top:15px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:100%;min-height:200px}.loading-spinner{width:48px;height:48px;border:5px solid hsl(0,0%,88%);border-top-color:var(--colorGreen);border-radius:50%;animation:spin .8s linear infinite}.loading-text{font-size:large;color:var(--colorDisabled)}.button-loading{display:inline-flex;align-items:center;justify-content:center;gap:8px}.button-loading-spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.test-page{position:relative;max-width:800px;margin:0 auto}.questions-navigator{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;margin:5px auto;align-items:center}.control-buttons button{background-color:#fff;color:#000}button.yellow{--currentColor: var(--colorYellow);border-color:var(--colorYellow)}button.selected{background-color:var(--currentColor)}button:hover:enabled{background-color:var(--currentColor)}button.green{--currentColor: var(--colorGreen);border-color:var(--colorGreen)}button.red{--currentColor: var(--colorRed);border-color:var(--currentColor)}button.red:hover:enabled{color:var(--colorWhite);font-weight:600}button:disabled{border-color:var(--colorDisabled);color:var(--colorDisabled)}.question-image,.question-video{display:block;margin:0 auto;width:100%;max-height:500px;min-height:300px;object-fit:contain}.question-text{margin:10px auto}.big-left-small-right{display:flex;flex-direction:row;gap:5px}.control-buttons{flex-basis:min-content;display:flex;flex-direction:column;gap:100px}.navigation-container{display:flex}@media (max-width: 850px){.big-left-small-right{flex-direction:column}.control-buttons{flex-direction:column-reverse;gap:0;margin:10px}.questions-navigator{flex-direction:row;gap:15px}.finish-answer{display:flex;flex-direction:row-reverse;justify-content:space-between;gap:15px}.question-text{margin:10px}}.answers-container{display:grid;grid-template-columns:1fr 1fr;gap:15px}.answers-container button{border-width:3px}.answers-container button:hover{--currentColor: var(--colorLightYellow)}.answers-container button.selected{background-color:var(--colorYellow)}.answers-container button.correct-answer{background-color:var(--colorGreen)}.answers-container button.bad-answer{background-color:var(--colorRed)}@media (max-width: 850px){.answers-container{padding:0 10px}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;visibility:visible;opacity:1;transition:opacity .15s ease-out}.overlay.not-visible{visibility:hidden}.test-results .success{--statusColor: var(--colorGreen)}.test-results .fail{--statusColor: var(--colorRed)}.content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0 auto;text-align:center;padding:15px;border-style:solid;border-radius:10px;border-color:var(--statusColor);box-shadow:0 0 20px 2px gray;background-color:#fff;opacity:1;transition:transform .15s ease-out,opacity .15s ease-out}.content.not-visible{transform:translate(-50%,-200px)}.not-visible{opacity:0}.test-results .buttons{display:flex;justify-content:space-around;gap:5px}.content button{background-color:transparent}@media screen and (max-width: 350px){.content{width:90%}.test-results .buttons{flex-direction:column}}.test-setup-page{max-width:800px;margin:15px auto 0;padding:0 16px}.test-setup-card{display:flex;flex-direction:column;align-items:center;gap:24px;width:fit-content;min-width:340px;max-width:100%;margin:0 auto}.test-setup-card .title{font-size:1.4rem;font-weight:700}.test-setup-section{display:flex;flex-direction:column;gap:12px;width:100%}.test-setup-section-header{display:flex;justify-content:space-between;align-items:center}.test-setup-section-header span{font-size:1rem;font-weight:600}.test-setup-section-header button{padding:6px 14px;font-size:.85rem}.category-checkboxes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.category-checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border:1px solid var(--colorDisabled);border-radius:6px;transition:background-color .15s;-webkit-user-select:none;user-select:none}.category-checkbox-label:hover{background-color:#f5f5f5}.category-checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;flex-shrink:0}.test-setup-section select{min-width:200px;max-width:300px;align-self:flex-start}.test-setup-section label{font-size:1rem;font-weight:600}@media (max-width: 500px){.category-checkboxes{grid-template-columns:1fr}}.app-form{display:flex;flex-direction:column;align-items:center;gap:14px;width:80%;max-width:500px;margin:0 auto}.app-form .field{width:100%}.app-form .error{color:var(--colorRed);font-size:large;width:100%;text-align:center}.app-form button{width:100%;height:70px;font-size:2rem}.app-form .payment-section{width:100%;border:2px solid var(--colorGreen);border-radius:12px;padding:16px;box-sizing:border-box;background:#f0faf6;display:flex;flex-direction:column;gap:14px}.register-login-link{display:block;margin-top:20px;text-align:center;color:var(--colorGreen);font-size:large;text-decoration:underline}.plan-list{display:flex;flex-direction:column;gap:8px;width:100%}.plan-option{display:flex;align-items:center;gap:12px;padding:12px 16px;border:2px solid #ccc;border-radius:10px;cursor:pointer;transition:border-color .2s}.plan-option.selected{border-color:var(--colorGreen)}.plan-option input[type=radio]{width:auto;accent-color:var(--colorGreen)}.plan-name{flex:1;font-size:large}.plan-price{font-size:large;font-weight:700;color:var(--colorGreen)}.payment-info{width:100%;background:#f7f7f7;border-radius:8px;padding:16px;box-sizing:border-box}.payment-info h3{margin:0 0 10px;font-size:large}.payment-table{width:100%;border-collapse:collapse}.payment-table td{padding:4px 8px;font-size:large}.payment-table td:first-child{color:#666;white-space:nowrap;width:40%}.payment-note{margin:10px 0 0;font-size:.95rem;color:#555}.qr-payment-note{margin-top:0}.qr-payment-codes{display:flex;justify-content:center;gap:16px;margin-top:16px}.qr-payment-codes img{width:min(100%,220px);aspect-ratio:1;object-fit:contain}.page-container .qr-payment-code-button{display:flex;flex-direction:column;gap:8px;align-items:center;width:220px;min-width:0;height:auto;padding:0;border:0;background:transparent;cursor:zoom-in}.qr-payment-code-button img{width:100%;height:auto}.qr-payment-code-label{color:#333;font-size:1rem;font-weight:700}.qr-payment-code-button:hover img,.qr-payment-code-button:focus-visible img{opacity:.8}.qr-payment-code-button:focus-visible{outline:3px solid var(--colorGreen);outline-offset:3px}.qr-payment-modal{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;background:#000000b3}.qr-payment-modal-content{position:relative;max-width:90vw;max-height:90vh;background:#fff;padding:16px}.qr-payment-modal-content img{display:block;width:auto;height:calc(90vh - 32px);max-width:calc(90vw - 32px);max-height:calc(90vh - 32px);object-fit:contain}.app-form .qr-payment-modal-close{position:absolute;top:-14px;right:-14px;width:44px;height:44px;min-width:0;padding:0;border:0;border-radius:50%;background:#222;color:#fff;cursor:pointer;font-size:2rem;line-height:1}.app-form .qr-payment-modal-close:hover,.app-form .qr-payment-modal-close:focus-visible{background:#006b61;color:#fff}.mpesa-polling-hint{color:#555;font-size:large;font-style:italic}.register-success{display:flex;flex-direction:column;gap:16px;max-width:500px;margin:0 auto}.register-success h2{color:var(--colorGreen)}.registration-payment-form{width:100%}.selected-plan-summary{display:grid;grid-template-columns:1fr auto;gap:6px 16px;width:100%;padding:14px 16px;border:2px solid var(--colorGreen);border-radius:8px;background:#f0faf6;box-sizing:border-box;font-size:large}.selected-plan-summary span:nth-of-type(2){color:#555;text-align:right}.selected-plan-summary strong:last-child{color:var(--colorGreen);text-align:right}.app-form .register-payment-action{width:100%;height:auto;min-height:56px;font-size:1.2rem}@media (max-width: 520px){.selected-plan-summary{grid-template-columns:1fr}.selected-plan-summary span:nth-of-type(2),.selected-plan-summary strong:last-child{text-align:left}.qr-payment-codes{flex-direction:column;align-items:center}}.admin-content{text-align:left;padding:24px 15%}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.admin-section-title{font-size:1.4rem;margin:0}.admin-table{width:100%;border-collapse:collapse;margin-bottom:2rem}.admin-table-wrapper{overflow-x:auto}.admin-table-wrapper .admin-table{min-width:850px}.admin-table th{border-bottom:2px solid var(--colorGreen);padding:8px 12px;text-align:left;font-size:large;color:#444}.admin-table td{border-bottom:1px solid #e0e0e0;padding:10px 12px;font-size:large;vertical-align:middle}.admin-table tr.selected td{background:#def7f4}.admin-table .actions{display:flex;gap:8px;flex-wrap:wrap}.admin-table .actions button:not(.green):hover:enabled,.admin-form .form-actions button:not(.green):hover:enabled{background-color:#e8e8e8}.admin-table .badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:medium;font-weight:600}.admin-table .badge.active{background:#cef3ee;color:#036d61}.admin-table .badge.inactive{background:#eee;color:#888}.admin-form-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;padding:20px 24px;margin-bottom:24px}.admin-form{display:flex;flex-direction:column;gap:14px;max-width:460px}.admin-form .form-actions{display:flex;gap:10px}.admin-form .error{color:var(--colorRed);font-size:large}.admin-form .success{color:var(--colorGreen);font-size:large}.admin-progress{margin-top:12px}.admin-progress h4{margin-bottom:12px;font-size:1.1rem}.admin-progress .progress-table{width:100%;border-collapse:collapse}.admin-progress .progress-table th{border-bottom:2px solid var(--colorGreen);padding:6px 12px;text-align:left;font-size:large}.admin-progress .progress-table td{border-bottom:1px solid #e8e8e8;padding:8px 12px;font-size:large}.no-data{color:#888;font-size:large}@media (max-width: 850px){.admin-content{padding:16px 5%}}.account-layout{display:flex;flex-direction:row;gap:32px;align-items:flex-start;width:100%;max-width:900px;margin:0 auto;text-align:left}.account-email{margin:0 0 2rem;color:#555;font-size:clamp(1.25rem,2.5vw,1.75rem)}.account-tab-nav{display:flex;flex-direction:column;gap:8px;flex:0 0 180px;padding:6px;border:1px solid #e1e5e4;border-radius:12px;background:#f7faf9}.account-tab-btn{display:block;width:100%;text-align:left;padding:11px 14px;font-size:1rem;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;min-width:unset;transition:border-color .2s,background .2s,color .2s;color:#333}.account-tab-btn:hover{border-color:var(--colorGreen)}.account-tab-btn.active{border-color:var(--colorGreen);background:#fff;color:var(--colorGreen);font-weight:700}.account-tab-content{flex:1;min-width:0}.account-panel{padding:24px;border:1px solid #e1e5e4;border-radius:12px;background:#fff;box-shadow:0 8px 24px #14322d0f}.account-panel>p:first-child{margin-top:0}.account-panel .payment-info{margin-top:1.25rem;background:#f7faf9;border:1px solid #e1e5e4}.account-tab-content .app-form{margin:0;width:100%;max-width:none;align-items:stretch}.account-tab-content .app-form button:not(.qr-payment-code-button):not(.qr-payment-modal-close){height:52px;font-size:1.1rem}@media (max-width: 850px){.account-layout{flex-direction:column;gap:16px}.account-tab-nav{flex-direction:row;flex-basis:auto;width:100%}.account-tab-btn{flex:1;text-align:center}.account-tab-btn.active{border-bottom-width:2px}.account-panel{padding:18px}}
