body{ font-family: 'Nunito', sans-serif; font-weight: normal; font-size: 16px; line-height: 1.5; color: #777777;}
a{ color: #398C34; outline: none;}
a:hover{ color: #132156; text-decoration: none; outline: none;}
a:focus,
button:focus{ outline: none;}
img{ max-width: 100%;}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: bold; margin-bottom: 20px; color: #132156;}
h1, .h1{ font-size: 42px; line-height: 56px; font-weight: 800;}
h2, .h2{ font-size: 36px; line-height: 48px;}
h3, .h3{ font-size: 24px; line-height: 32px;}
h4, .h4{ font-size: 20px; line-height: 30px;}
h5, .h5{ font-size: 18px; line-height: 28px;}
h6, .h6{ font-size: 16px; line-height: 24px;}
.content { max-width: 800px; }
.bg-primary{ background-color: #25692D !important;}
.bg-secondary{ background-color: #132156 !important;}
.text-primary{ color: #398C34 !important;}
.text-secondary{ color: #132156 !important;}
.text-12{ font-size: 12px; line-height: 18px;}
.text-14{ font-size: 14px; line-height: 20px;}
.text-20-30{ font-size: 20px; line-height: 30px;}
.text-20-36{ font-size: 20px; line-height: 36px;}
.text-30-42{ font-size: 30px; line-height: 42px;}
.text-fn{ font-family: 'Nunito', sans-serif;}
.text-fos{ font-family: 'Open Sans', sans-serif;}
.text-n{ font-weight: normal;}
.text-sb{ font-weight: 600;}
.text-b{ font-weight: bold;}
.text-eb{ font-weight: 800;}
.h2 sup{ font-size: 60%;}
.mb-10{ margin-bottom: 10px;}
.mb-20{ margin-bottom: 20px;}
.mb-30{ margin-bottom: 30px;}
.mb-40{ margin-bottom: 40px;}
.pb-10{ padding-bottom: 10px;}
.pb-20{ padding-bottom: 20px;}
.pb-30{ padding-bottom: 30px;}
.pb-40{ padding-bottom: 40px;}
.row-10{ margin-left: -10px; margin-right: -10px;}
.row-10 > [class*=col-]{ padding-left: 10px; padding-right: 10px;}
.row-20{ margin-left: -20px; margin-right: -20px;}
.row-20 > [class*=col-]{ padding-left: 20px; padding-right: 20px;}
.avatar.rounded-circle{ width: 120px; height: 120px; object-fit: cover;}
/* Btn Style and Color */
.btn, #ChangePasswordForm_ChangePasswordForm_action_doChangePassword, #MemberLoginForm_LoginForm_action_doLogin, #LostPasswordForm_lostPasswordForm_action_forgotPassword, #Form_Form_action_registerUser, #Payment { padding: 16px 32px; font-size: 18px; line-height: 32px; font-weight: bold; text-transform: uppercase; border: none; border-radius: 10px 10px 0 0; position: relative; transition: all 0.2s ease;}
.btn.btn-rounded, #ChangePasswordForm_ChangePasswordForm_action_doChangePassword, #MemberLoginForm_LoginForm_action_doLogin, #LostPasswordForm_lostPasswordForm_action_forgotPassword, #Form_Form_action_registerUser, #Payment { border-radius: 10px;}
.btn-bl:after{ content: ""; width: 100%; position: absolute; left: 0; bottom: 0; right: 0; height: 3px; border-radius: 8px 8px 0 0;}
.btn-icon .icon{ width: 32px; height: 32px; margin-right: 10px; vertical-align: top;}
.btn-icon-paypal .icon{ width: 112px; height: 32px; margin-left: 10px; vertical-align: top;}
.link-eb14{ font-size: 14px; line-height: 20px; font-weight: bold;}
.link-sb18{ font-size: 18px; line-height: 24px; font-weight: 600;}
.btn-primary,
.btn-primary:focus,
.btn-primary.focus, #ChangePasswordForm_ChangePasswordForm_action_doChangePassword, #MemberLoginForm_LoginForm_action_doLogin, #LostPasswordForm_lostPasswordForm_action_forgotPassword, #Form_Form_action_registerUser, #Payment { color: #fff; background-color: #25692D; border-color: #25692D; margin-top: 40px; margin-bottom: 10px;}
.btn-primary.btn-bl:after{ background-color: #132156;}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle{ color: #fff; background-color: #2C7E36; border-color: #2C7E36;}
.btn-primary.disabled,
.btn-primary:disabled{ color: #fff; background-color: #25692D; border-color: #25692D; pointer-events: none; opacity: .1;}
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus{ box-shadow: none;}
#LostPasswordForm_lostPasswordForm_action_forgotPassword, #Form_Form_action_registerUser, #Payment { width: 100%; }
.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus{ color: #fff; background-color: #132156; border-color: #132156;}
.btn-secondary.btn-bl:after{ background-color: #25692D;}
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle{ color: #fff; background-color: #1B2D6E; border-color: #1B2D6E;}
.btn-secondary.disabled,
.btn-secondary:disabled{ color: #fff; background-color: #132156; border-color: #132156; pointer-events: none;}
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus{ box-shadow: none;}
.btn-light,
.btn-light:focus,
.btn-light.focus{ color: #132156; background-color: #F8F8F8; border-color: #F8F8F8;}
.btn-light.btn-bl:after{ background-color: #E5E6E6;}
.btn-light:hover,
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle{ color: #132156; background-color: #F3F3F6; border-color: #F3F3F6;}
.btn-light.disabled,
.btn-light:disabled{ color: #132156; background-color: #F8F8F8; border-color: #F8F8F8; pointer-events: none;}
.btn-light:focus,
.btn-light.focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus{ box-shadow: none;}
/* Form */
.form-group{ margin-bottom: 20px;}
.form-control,
.custom-select, #ChangePasswordForm_ChangePasswordForm_OldPassword, #ChangePasswordForm_ChangePasswordForm_NewPassword2, #ChangePasswordForm_ChangePasswordForm_NewPassword1, #MemberLoginForm_LoginForm_Email, #MemberLoginForm_LoginForm_Password, #LostPasswordForm_lostPasswordForm_Email, #Form_Form_FirstName, #Form_Form_Surname, #Form_Form_Email, #Form_Form_ConfirmEmail, #Form_Form_Password_Password, #Form_Form_Password_ConfirmPassword { display: inline-block; width: 100%; height: 54px; padding: 15px 16px; background-color: #F8F8F8; border: 1px solid rgba(19,33,86,.05); font-size: 16px; line-height: 22px; font-weight: 600; color: #132156; border-radius: 10px; box-shadow: none; vertical-align: top;}
.form-control.text-18,
.custom-select.text-18{ font-size: 18px;}
select.form-control,
select.form-control.is-invalid,
select.form-control.is-invalid:focus,
.custom-select{ padding-right: 32px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23132156' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9.275,0.729L5.012,4.99L0.725,0.729'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 10px 6px; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; cursor:pointer;}
textarea.form-control{ resize: none; height: auto;}
.form-control:focus,
.custom-select:focus{ color: #132156; background-color: #F8F8F8; border-color: rgba(19,33,86,.7); outline: 0; box-shadow: none;}
.form-text,
.invalid-feedback{ font-size: 14px;}
#MemberLoginForm_LoginForm_Password { margin-bottom: 36px; }
/* Selectbox */
.form-group-select .chosen-container{ position: relative; width: 100% !important; font-size: 16px; line-height: 22px; font-weight: 600; color: #132156;}
.form-group-select .chosen-container-single .chosen-single{ display: inline-block; width: 100%; max-width: 100%; height: 54px; padding: 15px 16px; position: relative; background-color: #F8F8F8; border: 1px solid rgba(19,33,86,.05); border-radius: 10px; box-shadow: none; vertical-align: top; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23132156' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9.275,0.729L5.012,4.99L0.725,0.729'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 10px 6px; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; cursor:pointer; overflow: hidden; text-decoration: none; white-space: nowrap;}
/*.form-group-select .chosen-container-active.chosen-with-drop .chosen-single{ border-radius: 25px 25px 0 0; border-color: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.1);}*/
.form-group-select .chosen-container .chosen-single div{ display: none;}
.form-group-select .chosen-container-single .chosen-search{ display: none;}
.form-group-select .chosen-container .chosen-drop{ position: absolute; left: 0; top: 100%; width: 100%; margin-top: 5px; background-color: #F8F8F8; border: 1px solid rgba(19,33,86,.05); border-radius: 10px; box-shadow: 0 3px 6px rgba(19,33,86,.1); z-index: 1010; clip: rect(0, 0, 0, 0); -webkit-clip-path: inset(100% 100%); clip-path: inset(100% 100%); overflow: hidden;}
.form-group-select .chosen-container .chosen-results{ margin: 0; padding: 5px 0; max-height: 250px; position: relative; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.form-group-select .chosen-container .chosen-results li{ display: none; padding: 12px 16px; list-style: none; word-wrap: break-word; -webkit-touch-callout: none; border-bottom: 3px solid transparent; position: relative;}
.form-group-select .chosen-container .chosen-results li.active-result{ display: list-item; cursor: pointer;}
.form-group-select .chosen-container .chosen-results li.highlighted{ background: transparent; border-bottom-color: #E7E9EE;}
.form-group-select .chosen-container .chosen-results li.highlighted:before{ content: ""; position: absolute; left: 15px; bottom: -3px; width: 73px; height: 3px; background: #398C34;}
.form-group-select .chosen-container.chosen-with-drop .chosen-drop{ clip: auto; -webkit-clip-path: none; clip-path: none;}
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus{ padding-right: 24px; background-image: none; border-bottom-color: #DD3034; box-shadow: none;}
.custom-select.is-invalid,
.was-validated .custom-select:invalid,
.custom-select.is-invalid:focus{ padding-right: 42px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%230044b8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M9.275,0.729L5.012,4.99L0.725,0.729'/%3E%3C/svg%3E"); background-position: right 15px center; background-size: 18px 12px; border-color: #DD3034; box-shadow: none;}
.invalid-feedback,
.text-error{ color: #DD3034; font-size: 14px; font-weight: normal; margin-top: 4px;}
.form-control::-webkit-input-placeholder { color: #B7BCCC; opacity: 1;}
.form-control::-moz-placeholder { color: #B7BCCC; opacity: 1;}
.form-control:-ms-input-placeholder { color: #B7BCCC; opacity: 1;}
.form-control::-ms-input-placeholder { color: #B7BCCC; opacity: 1;}
.form-control::placeholder { color: #B7BCCC; opacity: 1;}
/* Form Checkbox, Radio */
.checkbox,
.radio{ position: relative; display: block; line-height: 24px; font-family: 'Open Sans', sans-serif;}
.checkbox-inline,
.radio-inline{ padding-right: 24px; display: inline-block;}
label.checkbox,
label.radio,
.checkbox label,
.radio label{ margin-bottom: 0; display: block;}
.checkbox input[type="checkbox"],
.radio input[type="radio"]{ opacity: 0; position: absolute; left: 0; top: 0; margin: 0;}
.checkbox label.is-invalid ~ .invalid-feedback,
.radio label.is-invalid ~ .invalid-feedback{ padding-left: 31px;}
.checkbox .checkbox-label{ cursor: pointer; padding-left: 31px; display: inline-block; min-height: 21px; font-size:14px; line-height:20px; font-weight: 600; vertical-align: top; color: #132156;}
.checkbox.disable .checkbox-label{ cursor: default; opacity: 0.6;}
.checkbox .checkbox-label:before{ content: ""; position: absolute; width: 21px; height: 21px; top: 0; left: 0; background-color: #fff; border: 2px solid #E5E6E6; border-radius: 3px;}
.checkbox .checkbox-label:after{ content: ""; position: absolute; width: 21px; height: 21px; top: 0; left: 0; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 11 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.648,1.534L9.794,0.397c-0.03-0.046-0.081-0.073-0.136-0.075l0,0 c-0.055,0-0.104,0.027-0.135,0.075l-5.89,7.718L1.488,5.326C1.442,5.251,1.344,5.229,1.27,5.274C1.249,5.287,1.23,5.305,1.217,5.326 l-0.86,1.117c-0.077,0.107-0.077,0.252,0,0.357l2.706,3.52c0.127,0.195,0.334,0.326,0.565,0.357c0.226-0.033,0.428-0.158,0.56-0.348 l0,0l6.46-8.441C10.717,1.781,10.717,1.642,10.648,1.534z' fill='%23398C34'/%3E%3C/svg%3E ") no-repeat center center; background-size: 11px 11px; opacity: 0;}
.checkbox input[type="checkbox"]:checked + .checkbox-label:after{ opacity: 1;}
.checkbox input[disabled="disabled"] + .checkbox-label:before,
.checkbox.disable .checkbox-label:before{ opacity: 0.9;}
.checkbox.disable input[type="checkbox"]:checked + .checkbox-label:after{ opacity: 0.9;}
#MemberLoginForm_LoginForm_Remember { opacity: 1; position: static; float: left; width: 30px; height: 21px;}
#Form_Form_AgreeTerms_Holder { padding-top: 20px; }
#Form_Form_AgreeTerms_Holder label { font-size: 14px; }
#Form_Form_AgreeTerms { opacity: 1; float: left; position: static; margin: 3px 10px 0 0; width:20px; height:20px; }
.radio .radio-label{ cursor: pointer; padding-left: 40px; display: block; min-height: 26px; font-size:20px; line-height:24px; font-weight: 600; vertical-align: top; color: #132156;}
.radio .radio-label:before{ content: ""; position: absolute; width: 26px; height: 26px; top: 0; left: 0; background-color: #fff; border: 3px solid #E5E6E6; border-radius: 50%;}
.radio input[type="radio"]:checked + .radio-label:after{ content: ""; width: 8px; height: 8px; background-color: #398C34; position: absolute; left: 9px; top: 9px; border-radius: 50%;}
.radio.disable .radio-label,
.radio input[disabled="disabled"] + .radio-label:before,
.radio.disable .radio-label:before{ opacity: 0.6; pointer-events: none;}
/* Header */
.header{ position: relative; z-index: 8; padding-right: 40px; font-family: 'Open Sans', sans-serif; box-shadow: 0 3px 6px rgba(19,33,86,0.05);}
.header .navbar{ padding: 8px 0; background: #fff; min-height: 80px;}
.navbar-expand > .container{ padding-left: 15px; padding-right: 15px; position: relative;}
.navbar-nav .nav-item-btn .nav-link{ font-size: 16px; font-weight: 600; line-height: 24px; color: #fff; background: #0044b8; padding: 7px 24px; text-transform: uppercase; border-radius: 3px;}
.navbar-nav .nav-item-btn .nav-link:hover,
.navbar-nav .navbar-nav .nav-link:focus{ color: #fff; background: #003DA5;}
.nav-user{ font-size: 18px; font-weight: 600; color: rgba(19,33,86,0.4); padding-left: 55px; position: relative; min-height: 40px; display: flex; align-items: center;}
.nav-user:hover{ color: rgba(19,33,86,0.4);}
.nav-user .nav-user-img{ width: 40px; height: 40px; border: 3px solid #E5E6E6; display: flex; justify-content: center; position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 50%;}
.nav-user .nav-user-img img{ width: 34px; height: 34px; object-fit: cover;}
.nav-search input{ height: 38px; width: 180px; padding: 8px 15px 8px 35px; font-size: 12px; line-height: 22px; font-weight: 600; color: #132156; background: #F8F8F8 url(../images/search.svg) 15px center no-repeat; border: none; border-radius: 20px; outline: none; box-shadow: none;}
/* Sidebar */
.sidebar{ position: fixed; left: 0; top: 0; bottom: 0; padding-top: 84px; width: 84px; border-radius: 0 28px 28px 0; z-index: 9; background: #25692d; background: -webkit-linear-gradient(top, #25692d 0%,#132156 100%); background: linear-gradient(to bottom, #25692d 0%,#132156 100%); -webkit-transition:all .5s; transition:all .5s; overflow: hidden;}
.sidebar.active{ width: 240px; overflow: hidden;}
.header,
.main-content{ padding-left: 124px; -webkit-transition:all .5s; transition:all .5s;}
.sidebar-open .header,
.sidebar-open .main-content{ padding-left: 280px;}
.navbar-toggler{ border: none; padding: 15px; margin: 17px 14px; position: absolute; left: 0; top: 0; border-radius: 0;}
.navbar-toggler .navbar-toggler-icon{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18' viewBox='0 0 26 18'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2' d='M1,9h24 M1,1h24 M1,17h24'/%3e%3c/svg%3e"); background-size: 26px 18px; width: 26px; height: 18px; vertical-align: top;}
.sidebar .navbar{ padding:30px 0 0; height: 100%; align-items: flex-start; overflow-y: auto; overflow-x: hidden;}
.sidebar .navbar > ul { list-style:none; padding:0 0 0 17px; width: 100%; margin: 0; -webkit-transition:all .5s; transition:all .5s;}
.sidebar.active .navbar > ul{ padding-left: 8px;}
.sidebar .navbar > .nav-menu-end{ margin-top: auto; padding-bottom: 15px;}
.sidebar .navbar > ul > li{ margin:15px 0; display: inline-block; width: 100%; position:relative;}
.sidebar .navbar > ul > li > a{ color:rgba(255,255,255,0.5); width: 100%; position: relative; display:inline-block; vertical-align: top; border-top-left-radius:10px; border-bottom-left-radius:10px;}
.sidebar .navbar > ul > li:hover > a,
.sidebar .navbar > ul > li.active > a{ background:#fff; color:#398C34;}
.sidebar .navbar > ul > li > a > .item-content{ align-items:center; display:flex;}
.sidebar .navbar > ul > li > a > .item-content .item-icon{ display:inline-block; padding:13px;}
.sidebar .navbar > ul > li > a > .item-content .item-icon .nav-icon{ width: 24px; height: 24px; vertical-align: top;}
.sidebar .navbar > ul > li.active > a > .item-content .item-icon .nav-icon{ color:#398C34;}
.sidebar .navbar > ul > li > a > .item-content .item-text{ font-size: 14px; font-weight: 600; white-space: nowrap;}
.sidebar .navbar > ul > li > a > .item-content .item-icon{ margin-right: 0; -webkit-transition:margin .5s; transition:margin .5s;}
.sidebar:not(.active) .navbar > ul > li > a > .item-content .item-icon{ margin-right: 20px;}
.main-content{ padding-top: 40px; padding-right: 40px; padding-bottom: 40px;}
.section{ padding: 40px 0;}
.section-content{ padding: 50px; background-color: #F8F8F8; border-radius: 20px;}
.section-content-full{ padding: 50px; margin: -40px; min-height: calc(100vh - 80px); background-color: #F8F8F8;}
.section-content-height{ min-height: calc(100vh - 160px);}
.page-title{ margin-bottom: 30px;}
.page-title h1{ margin-bottom: 0;}
.title-line{ position: relative; padding-bottom: 22px;}
.title-line.center{ text-align: center;}
.title-line:after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100px; height: 3px; background: #398C34;}
.title-line.center:after{ left: 50%; transform: translateX(-50%);}
.pattern-section{ position: relative; background-image: url(../images/pattern-lc.png); background-position: left center; background-repeat: no-repeat;}
.pattern-section:before,
.pattern-section:after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-repeat: no-repeat; z-index: 1;}
.pattern-section:before{ background-image: url(../images/pattern-rt.png); background-position: right top;}
.pattern-section:after{ background-image: url(../images/pattern-rb.png); background-position: right bottom;}
.pattern-up{ position: relative; z-index: 2;}
.pattern-page{ position: relative; background-image: url(../images/page-pattern-lc.png); background-position: left top; background-repeat: no-repeat; background-size: contain;}
.pattern-page:before,
.pattern-page:after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-repeat: no-repeat; z-index: 1; background-size: contain;}
.pattern-page:before{ background-image: url(../images/page-pattern-rt.png); background-position: right top;}
.pattern-page:after{ background-image: url(../images/page-pattern-cb.png); background-position: center bottom;}
.section-home{ position: relative; padding: 0; background-color: #F5F6F8;}
.section-bottom{ padding: 25px 50px 0; margin-top: 60px; background: rgba(19,33,86,0.02) url(../images/section-bottom-bg.png) no-repeat left bottom / cover; border-radius: 20px;}
.info-popover{ background: #fff; padding: 10px; margin-bottom: 20px; max-width: 240px; position: relative; font-weight: 600; font-size: 12px; line-height: 18px; font-family: 'Open Sans', sans-serif; box-shadow: 3px 6px 15px rgba(65,81,106,0.16);}
.info-popover:after{ content: ""; position: absolute; left: 13px; bottom: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #fff;}
.hover-popover{ position: relative; display: inline-block;}
.hover-popover .info-popover{ position: absolute; left: 0; bottom: 100%; opacity: 0; visibility: hidden; -webkit-transition:all .3s ease; transition:all .3s ease;}
.hover-popover:hover .info-popover{ opacity: 1; visibility: visible;}
.section-journey{ min-height: calc(100vh - 310px);}
.btn-rc{ position: absolute; right: -127px; top: 50%; transform: rotate(-90deg) translateY(-50%);}
.items-step-wrap{ position: relative; z-index: 2; padding: 0 85px 15px 50px; width: 100%;}
.items-step{ padding-top: 140px; /*overflow-x: auto; overflow-y: hidden;*/}
.items-step ul{ margin: 0; padding: 0; list-style: none; position: relative; min-height: 360px; min-width: 810px;}
.items-step ul li{ position: absolute; width: 20%; display: flex; justify-content: flex-end;}
.items-step ul li:nth-child(1){ left: 2%; bottom: 13px;}
.items-step ul li:nth-child(2),
.items-step ul li:nth-child(3),
.items-step ul li:nth-child(4),
.items-step ul li:nth-child(5){ bottom: 25px;}
.items-step ul li:nth-child(2){ left: 5%;}
.items-step ul li:nth-child(3){ left: 25%;}
.items-step ul li:nth-child(4){ left: 45%;}
.items-step ul li.end:nth-child(4) { bottom: 15px;}
/*.items-step ul li:nth-child(5){ left: 65%;}*/
.items-step ul li:nth-child(5){ left: 64%;}
.items-step ul li:nth-child(6){ left: 88%; bottom: 94px;}
.items-step ul li:nth-child(7),
.items-step ul li:nth-child(8),
.items-step ul li:nth-child(9){ bottom: 165px; justify-content: flex-start;}
.items-step ul li:nth-child(7){ left: 67%;}
.items-step ul li:nth-child(8){ left: 47%;}
.items-step ul li:nth-child(9){ left: 27%;}
.items-step ul li:nth-child(10){ left: 18%; bottom: 234px;}
.items-step ul li.end:nth-child(6),
.items-step ul li.end:nth-child(10){ margin-bottom: -13px;}
.items-step ul li:nth-child(11),
.items-step ul li:nth-child(12),
.items-step ul li:nth-child(13),
.items-step ul li:nth-child(14){ bottom: 305px; width: 18%; top: -11px;}
.items-step ul li:nth-child(11){ left: 14%;}
.items-step ul li:nth-child(12){ left: 30%;}
.items-step ul li:nth-child(13){ left: 46%;}
.items-step ul li:nth-child(14){ left: 62%;}
.items-step ul li:nth-child(15){ left: 78%; bottom: 292px;}
/*.items-step ul li:nth-child(16){ left: 88%; bottom: 94px;}
.items-step ul li:nth-child(17),
.items-step ul li:nth-child(18),
.items-step ul li:nth-child(19){ bottom: 165px; justify-content: flex-start;}*/
.items-step ul li.end:not(:nth-child(15)):not(:nth-child(10)):not(:nth-child(6)){ margin-bottom: 0px;}
.items-step ul li:nth-child(1),
.items-step ul li:nth-child(6),
.items-step ul li:nth-child(10){ width: auto;}
.items-step ul li:before{ content: ""; width: 100%; height: 23px; background: #DFE7E2; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.items-step ul li:nth-child(15):before{ right: 50px;}
.items-step ul li:nth-child(1):before{ display: none;}
.items-step ul li:nth-child(6):before{ top: 73px; right: 12px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23DFE7E2' stroke-width='23' d='M5,155c0.125,0,139.891,0,140,0c38.66,0,70-31.34,70-70s-31.34-70-70-70 c-0.094,0-139.891,0-140,0'/%3e%3c/svg%3e") right bottom no-repeat; width: 150px; height: 85px;}
.items-step ul li:nth-child(7):after{ content: ""; position: absolute; right: -64px; top: 18px; width: 230px; height: 85px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23DFE7E2' stroke-width='23' d='M5,155c0.125,0,139.891,0,140,0c38.66,0,70-31.34,70-70s-31.34-70-70-70 c-0.094,0-139.891,0-140,0'/%3e%3c/svg%3e") right top no-repeat;}
.items-step ul li.end:nth-child(7):after{ margin-top: 12px;}
.items-step ul li:nth-child(7):before{ width: 80%;}
.items-step ul li:nth-child(7):before{ left: 10px; right: auto; }
.items-step ul li.end:nth-child(7):before{ top:44px; }
.items-step ul li:nth-child(8):before,
.items-step ul li:nth-child(9):before{ left: 10px; right: auto; top:33px;}
.items-step ul li:nth-child(10):before{ z-index: -1; top: 74px; right: -150px; width: 200px; height: 85px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23DFE7E2' stroke-width='23' d='M225,155c-0.125,0-139.891,0-140,0c-38.66,0-70-31.34-70-70s31.34-70,70-70 c0.094,0,139.891,0,140,0'/%3e%3c/svg%3e") left bottom no-repeat;}
.items-step ul li:nth-child(11):after{ content: ""; position: absolute; left: 28%; top: 18px; width: 180px; height: 85px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23DFE7E2' stroke-width='23' d='M225,155c-0.125,0-139.891,0-140,0c-38.66,0-70-31.34-70-70s31.34-70,70-70 c0.094,0,139.891,0,140,0'/%3e%3c/svg%3e") left top no-repeat;}
.items-step ul li.end:nth-child(11):after{ top: 29px;}
.items-step ul li:nth-child(11):before{ width: 30%;}
.items-step ul li .step-wrap{ width: 63px; height: 63px; padding: 9px; background: #fff; border-radius: 50%; position: relative; z-index: 1;}
.items-step ul li.active .step-wrap:before{ content: ""; width: 41px; height: 32px; position: absolute; left: -19px; top: -42px; background: url(../images/icon-dive.svg) left top no-repeat;}
.items-step ul li:first-child.active .step-wrap:before{ left: 0;}
.items-step ul li .step-item{ width: 45px; height: 45px; background: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 2px 2px 3px rgba(0,0,0,.1); font-size: 16px; line-height: 26px; font-weight: 800; color: #B7BCCC; text-transform: uppercase;}
.items-step ul li.active .step-item{ font-size: 20px; color: #132156;}
.items-step ul li:first-child .step-item,
.items-step ul li:last-child .step-item{ font-size: 16px;}
.items-step ul li:first-child .step-wrap,
.items-step ul li:last-child .step-wrap{ width: 88px; height: 88px; padding: 12px; margin-top: -10px; }
.items-step ul li.end:nth-child(7) .step-wrap{ margin-top:0px }
.items-step ul li.end:nth-child(14) .step-wrap{ margin-top:-13px }
.items-step ul li.end:nth-child(10) .step-wrap{ margin-top:-13px }
.items-step ul li:first-child .step-item,
.items-step ul li:last-child .step-item{ width: 64px; height: 64px;}
.items-step ul li .item-check { display: none;}
.items-step ul li.completed .item-number{ /*display: none;*/ z-index: 100; /*margin-left: 15px;*/}
.items-step ul li .item-number a { font-size: 24px;}
/*.items-step ul li:nth-child(1){ left: 0; bottom: 13px;}
.items-step ul li:nth-child(2),
.items-step ul li:nth-child(3),
.items-step ul li:nth-child(4),
.items-step ul li:nth-child(5){ bottom: 25px;}
.items-step ul li:nth-child(2){ left: 5%;}
.items-step ul li:nth-child(3){ left: 25%;}
.items-step ul li:nth-child(4){ left: 45%;}
.items-step ul li:nth-child(5){ left: 65%;}
.items-step ul li:nth-child(6){ left: 88%; bottom: 94px;}
.items-step ul li:nth-child(7),
.items-step ul li:nth-child(8),
.items-step ul li:nth-child(9){ bottom: 165px; justify-content: flex-start;}
.items-step ul li:nth-child(7){ left: 67%;}
.items-step ul li:nth-child(8){ left: 47%;}
.items-step ul li:nth-child(9){ left: 27%;}
.items-step ul li:nth-child(10){ left: 18%; bottom: 234px;}
.items-step ul li:nth-child(11),
.items-step ul li:nth-child(12),
.items-step ul li:nth-child(13){ bottom: 305px; width: 21%;}
.items-step ul li:nth-child(11){ left: 13%;}
.items-step ul li:nth-child(12){ left: 34%;}
.items-step ul li:nth-child(13){ left: 55%;}
.items-step ul li:nth-child(14){ left: 78%; bottom: 290px;}
.items-step ul li:nth-child(1),
.items-step ul li:nth-child(6),
.items-step ul li:nth-child(10){ width: auto;}
.items-step ul li:before{ content: ""; width: 100%; height: 23px; background: #DFE7E2; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.items-step ul li:nth-child(14):before{ right: 50px;}
.items-step ul li:nth-child(1):before{ display: none;}
.items-step ul li:nth-child(6):before{ top: 73px; right: 12px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23DFE7E2' stroke-width='23' d='M5,155c0.125,0,139.891,0,140,0c38.66,0,70-31.34,70-70s-31.34-70-70-70 c-0.094,0-139.891,0-140,0'/%3e%3c/svg%3e") right bottom no-repeat; width: 147px; height: 85px;}
.items-step ul li:nth-child(7):after{ content: ""; position: absolute; right: -64px; top: 18px; width: 230px; height: 85px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23DFE7E2' stroke-width='23' d='M5,155c0.125,0,139.891,0,140,0c38.66,0,70-31.34,70-70s-31.34-70-70-70 c-0.094,0-139.891,0-140,0'/%3e%3c/svg%3e") right top no-repeat;}
.items-step ul li:nth-child(7):before{ width: 80%;}
.items-step ul li:nth-child(7):before,
.items-step ul li:nth-child(8):before,
.items-step ul li:nth-child(9):before{ left: 10px; right: auto;}
.items-step ul li:nth-child(10):before{ top: 74px; right: -100px; width: 150px; height: 85px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23DFE7E2' stroke-width='23' d='M225,155c-0.125,0-139.891,0-140,0c-38.66,0-70-31.34-70-70s31.34-70,70-70 c0.094,0,139.891,0,140,0'/%3e%3c/svg%3e") left bottom no-repeat;}
.items-step ul li:nth-child(11):after{ content: ""; position: absolute; left: 28%; top: 18px; width: 170px; height: 85px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23DFE7E2' stroke-width='23' d='M225,155c-0.125,0-139.891,0-140,0c-38.66,0-70-31.34-70-70s31.34-70,70-70 c0.094,0,139.891,0,140,0'/%3e%3c/svg%3e") left top no-repeat;}
.items-step ul li:nth-child(11):before{ width: 25%;}
.items-step ul li .step-wrap{ width: 63px; height: 63px; padding: 9px; background: #fff; border-radius: 50%; position: relative; z-index: 1;}
.items-step ul li.active .step-wrap:before{ content: ""; width: 41px; height: 32px; position: absolute; left: -19px; top: -42px; background: url(../images/icon-dive.svg) left top no-repeat;}
.items-step ul li:first-child.active .step-wrap:before{ left: 0;}
.items-step ul li .step-item{ width: 45px; height: 45px; background: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 2px 2px 3px rgba(0,0,0,.1); font-size: 16px; line-height: 26px; font-weight: 800; color: #B7BCCC; text-transform: uppercase;}
.items-step ul li.active .step-item{ font-size: 20px; color: #132156;}
.items-step ul li:first-child .step-item,
.items-step ul li:last-child .step-item{ font-size: 16px;}
.items-step ul li:first-child .step-wrap,
.items-step ul li:last-child .step-wrap{ width: 88px; height: 88px; padding: 12px;}
.items-step ul li:first-child .step-item,
.items-step ul li:last-child .step-item{ width: 64px; height: 64px;}
.items-step ul li .item-check,
.items-step ul li.completed .item-number{ display: none;}
.items-step ul li.end:nth-child(2),
.items-step ul li.end:nth-child(3),
.items-step ul li.end:nth-child(4),
.items-step ul li.end:nth-child(5){ bottom: 13px;}
.items-step ul li.end:nth-child(6):before{ top: 97px; right: 30px;}
.items-step ul li.end:nth-child(7):after{ top: 29px;}
.items-step ul li.end:nth-child(7),
.items-step ul li.end:nth-child(8),
.items-step ul li.end:nth-child(9){ bottom: 152px;}
.items-step ul li.end:nth-child(10):before{ top: 99px;}
.items-step ul li.end:nth-child(10):before{ right: -90px;}
.items-step ul li.end:nth-child(11){ left: 20%;}
.items-step ul li.end:nth-child(11):after{ left: -5%; top: 30px;}
.items-step ul li.end:nth-child(11),
.items-step ul li.end:nth-child(12),
.items-step ul li.end:nth-child(13),
.items-step ul li.end:nth-child(14){ bottom: 292px;}*/
.items-step ul li.active:before,
.items-step ul li.completed:before{ background: #398C34;}
.items-step ul li.active .step-wrap{ background: #132156;}
.items-step ul li.completed .step-wrap{ background: #398C34;}
.items-step ul li.active .step-item,
.items-step ul li.completed .step-item{ box-shadow: 5px 5px 6px rgba(0,0,0,.46);}
.items-step ul li.completed .item-check{ display: inline-block; color: #e7e7e7; width: 18.282px; height: 14px;}
.items-step ul li.completed .item-check .icon{ width: 50%; height: 50%; position: absolute; top: 16px; margin: auto; left: 0; right: 0;}
.items-step ul li.active:nth-child(6):before,
.items-step ul li.completed:nth-child(6):before{ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23398C34' stroke-width='23' d='M5,155c0.125,0,139.891,0,140,0c38.66,0,70-31.34,70-70s-31.34-70-70-70 c-0.094,0-139.891,0-140,0'/%3e%3c/svg%3e") right bottom no-repeat;}
.items-step ul li.active:nth-child(7):after,
.items-step ul li.completed:nth-child(7):after{ top:17px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23398C34' stroke-width='23' d='M5,155c0.125,0,139.891,0,140,0c38.66,0,70-31.34,70-70s-31.34-70-70-70 c-0.094,0-139.891,0-140,0'/%3e%3c/svg%3e") right top no-repeat;}
.items-step ul li.active:nth-child(10):before,
.items-step ul li.completed:nth-child(10):before{ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23398C34' stroke-width='23' d='M225,155c-0.125,0-139.891,0-140,0c-38.66,0-70-31.34-70-70s31.34-70,70-70 c0.094,0,139.891,0,140,0'/%3e%3c/svg%3e") left bottom no-repeat;}
.items-step ul li.active:nth-child(11):after,
.items-step ul li.completed:nth-child(11):after{ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='230' height='170' viewBox='0 0 230 170'%3e%3cpath fill='none' stroke='%23398C34' stroke-width='23' d='M225,155c-0.125,0-139.891,0-140,0c-38.66,0-70-31.34-70-70s31.34-70,70-70 c0.094,0,139.891,0,140,0'/%3e%3c/svg%3e") left top no-repeat;}
.section-video{ height: calc(100vh - 160px);}
.video-page-wrap{ display: flex; flex-direction: column; height: 100%;}
.video-wrap{ position: relative; flex: 1 0 0; /*height: calc(100% - 200px);*/ overflow: hidden; background: #EAEBEF;}
.video-wrap video{ position: absolute; left: 0; top: 0; height: 100%; width: 100%;}
/* Modal */
.modal-content{ border: none; border-radius: 10px; box-shadow: 0 30px 30px rgba(19,33,86,0.1);}
.modal-header{ background: #132156; padding: 28px 30px; border-bottom: none; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.modal-header .modal-title{ color: #fff;}
.modal-header .modal-title.icon-left{ position: relative; padding-left: 84px;}
.modal-header .icon-left .icon{ width: 64px; height: 64px; position: absolute; left: 0; top: -4px;}
.modal-header .close{ color: #fff; opacity: 1;}
.modal-body{ padding: 40px;}
.modal-backdrop{ background-color: rgb(229,230,230);}
.modal-backdrop.show{ opacity: 1;}
.items-check{ list-style: none; margin: 0; padding: 0;}
.items-check li{ padding-left: 34px; background: url(../images/icon-check.svg) no-repeat left 4px; margin-bottom: 30px;}
.card{ background-color: #fff; border: none; border-radius: 10px; box-shadow: 0px 3px 6px rgba(19,33,86,0.1);}
.card-header:first-child{ border-radius: 10px 10px 0 0;}
.card-header{ border-bottom: none; background-color: #E7E9EE; padding: 30px;}
.card-grd-blue .card-header{ background: transparent linear-gradient(180deg, #777777 0%, #132156 100%) 0% 0% no-repeat;}
.card-grd-green .card-header{ background: transparent linear-gradient(180deg, #132156 0%, #25692D 100%) 0% 0% no-repeat;}
.card-grd-blue .card-header h2,
.card-grd-green .card-header h2{ color: #fff;}
.card-body{ padding: 40px;}
.card-package{ text-align: center; height: 100%;}
/*.card-package:hover{ box-shadow: 0px 20px 30px rgba(19,33,86,0.1);}*/
.card-package .card-header{ padding: 20px;}
.package-row > .col-12:nth-child(1) .card-package .card-header{ background-color: #4AC6D2;}
.package-row > .col-12:nth-child(2) .card-package .card-header{ background-color: #E60576;}
.package-row > .col-12:nth-child(3) .card-package .card-header{ background-color: #FDEE30;}
.package-row > .col-12:nth-child(3) .card-package .card-header h3{ /*color: #132156;*/}
.package-row > .col-12:nth-child(4) .card-package .card-header{ background-color: #361999;}
.package-row > .col-12:nth-child(5) .card-package .card-header{ background-color: #721682;}
.package-row > .col-12 .card-package .card-header.Aqua{ background-color: #4AC6D2;}
.package-row > .col-12 .card-package .card-header.Pink{ background-color: #E60576;}
.package-row > .col-12 .card-package .card-header.Yellow{ background-color: #FDEE30;}
.package-row > .col-12 .card-package .card-header.Yellow h3{ color: #132156;}
.package-row > .col-12 .card-package button { color: #fff;}
.package-row > .col-12 .card-package button.Yellow { color: #132156;}
.package-row > .col-12 .card-package .card-header.Navy{ background-color: #361999;}
.package-row > .col-12 .card-package .card-header.Plum{ background-color: #721682;}
/*.card-package:hover .card-header{ background: #132156; color: #fff;}
.card-package:hover .card-header h3{ color: #fff;}*/
.card-package .card-header h3{ color: #fff; font-size:19px;}
.card-package .card-body{ padding: 58px 20px 30px; display: flex; flex-direction: column; position: relative;}
.card-package .card-body-profile { padding: 28px 20px 30px;}
.card-package .item-price{ margin-bottom: 30px;}
.card-package .item-price .item-price-value{ font-size: 18px; line-height: 24px; font-weight: 800; color: #132156;}
.card-package .item-price .item-price-value span{ font-size: 40px; line-height: 1; vertical-align: top; margin-left: 2px;}
.card-package .item-price .item-price-text{ font-size: 12px; line-height: 16px; padding-top: 8px; color: #41516AB2;}
.card-package .item-text{ font-size: 14px; line-height: 24px; padding: 0 20px 30px; font-weight: 600; color: #132156;}
.card-package .card-body ul{ list-style: none; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 20px; border-top: 1px solid #E5E6E6; padding-top: 30px; text-align: left;}
.card-package .card-body ul li{ padding-left: 34px; background: url(../images/icon-check.svg) no-repeat left 4px; margin-bottom: 30px;}
.card-package .card-body ul li:last-child{ background: url(../images/icon-calendar.svg) no-repeat left top; line-height: 24px;}
.card-package .item-buy{ padding-top: 30px; border-top: 1px solid #E5E6E6; margin-top: auto;}
.card-package .item-buy .btn-primary,
.card-package .item-buy .btn-primary:focus,
.card-package .item-buy .btn-primary.focus{ background: transparent linear-gradient(180deg, #1FC58E 0%, #11976A 100%) 0% 0% no-repeat;}
.card-package .item-buy .btn-primary.btn-bl:after{ background-color: #1FC58E;}
.card-package .item-buy .btn-primary:hover,
.card-package .item-buy .btn-primary:not(:disabled):not(.disabled):active,
.card-package .item-buy .btn-primary:not(:disabled):not(.disabled).active{ background: transparent linear-gradient(180deg, #11976A 0%, #11976A 100%) 0% 0% no-repeat;}
.card-package .item-recommended{ padding: 5px 10px; margin: 0 auto 15px; display: inline-block; font-size: 12px; line-height: 16px; color: #fff; font-weight: bold; background: #398c34; background: -webkit-linear-gradient(left, #398c34 0%,#132156 100%); background: linear-gradient(to right, #398c34 0%,#132156 100%); border-radius: 2px;}
.section-exam{ padding: 16px; min-height: calc(100vh - 160px); display: flex; flex-direction: column;}
.items-exam{ padding: 16px; background: #fff; position: relative; display: flex; flex-direction: column; flex: 1 0 0; border-radius: 5px;}
.item-tabs{ display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; border-radius: 35px;}
.item-tabs li{ width: 100%; background: #EEEEEE; display: block; min-height: 70px; position: relative; z-index: 3; border-radius: 35px;}
.item-tabs li.active{ background: #398c34; background: -webkit-linear-gradient(left, #398c34 0%,#132156 100%); background: linear-gradient(to right, #398c34 0%,#132156 100%);}
.item-tabs li + li{ margin-top: 10px;}
.item-tabs li a{ padding: 0 90px 4px 80px; font-size: 12px; color: #132156; line-height: 16px; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; border-radius: 35px;}
.item-tabs li.active a{ color: #fff;}
.item-tabs li.disabled a,
.item-tabs li.disabled .tab-icon span .icon{ color: #B7BCCC; /*pointer-events: none;*/}
.item-tabs li.active.disabled{ opacity: 0.2;}
.item-tabs li.active.disabled a{ color: #fff;}
.item-tabs li.active.disabled .tab-icon span .icon{ color: #121726;}
.item-tabs li .tab-icon{ width: 64px; height: 64px; padding: 8px; background: #fff; position: absolute; left: 3px; top: 3px; border-radius: 50%;}
.item-tabs li .tab-icon span{ width: 48px; height: 48px; padding: 12px; display: inline-block; background: #fff; box-shadow: 0 3px 6px rgba(19,33,86,.2); border-radius: 50%;}
.item-tabs li .tab-icon span .icon{ width: 24px; height: 24px; color: #132156; vertical-align: top;}
.item-tabs li .tab-name{ font-size: 20px; font-weight: 800; line-height: 26px; margin-bottom: 2px;}
.item-tabs li .tab-text{ font-family: 'Open Sans', sans-serif;}
.item-tabs li .tab-time{ position: absolute; right: 22px; top: 12px; width: 66px; padding-top: 18px; text-align: center; font-size: 22px; font-weight: 600; line-height: 30px;}
.item-tabs li .tab-time .icon{ position: absolute; left: 50%; top: 0; margin-left: -7px; width: 14px; height: 16px;}
.item-question{ padding: 0 0 0 10px; margin-top: 2px; background: #F8F8F8; font-size: 20px; line-height: normal; font-weight: 600; min-height: 205px; height: 250px; position: relative; /*display: flex; align-items: center; justify-content: center;*/}
.item-question .item-placeholder{ position: absolute; left: 15px; top: 15px; display: inline-block;}
.item-question .item-text{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 20px 10px; }
.item-answer{ margin-top: 2px; position: relative; background: #fff; border: 2px solid #E7E9EE; padding-bottom: 50px; border-radius: 5px;}
.item-answer.active{ box-shadow: 0 3px 6px rgba(19,33,86,.1);}
.item-answer textarea{ background: #fff; border: none; width: 100%; padding: 15px 25px; font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 32px; color: #7F8284; min-height: 150px; height: 100%; box-shadow: none; outline: none; resize: none;}
.item-answer .item-count{ position: absolute; bottom: 0; padding: 10px; font-size: 14px; line-height: 18px; background: rgba(19,33,86,.1); color: rgba(19,33,86,.2); border-radius: 2px 2px 0 0;}
.item-answer .item-count span{ font-weight: 600;}
.item-answer .item-count.left{ left: 30px;}
.times-up .item-answer .item-count.left{ background: #CB1010; color: #fff;}
.item-answer .item-count.right{ right: 30px;}
.item-answer.active .item-count{ color: #fff; background: #132156;}
.item-timeup{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.60);}
.times-up .item-timeup{ display: flex;}
.popup-start{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #F8F8F8; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.item-qa-wrap{ flex: 1 0 0; margin: 0 -14px;}
.item-qa-wrap .item-question,
.item-qa-wrap .item-answer{ width: 100%;}
/* Course Selection */
.card-course .card-body .link-sb18{ margin: 20px auto 0; display: block;}
.card-course .card-header .btn{ line-height: 24px; margin-top: 10px;}
/* Login */
.section-login{ min-height: calc(100vh - 80px); background: url(../images/body-bg.png) center center no-repeat; background-size: cover; border-radius: 20px;}
.card.card-login{ width: 600px; max-width: 100%; margin-bottom: 42px;}
.card.card-login .card-tabs{ padding: 0; border-bottom: none;}
.card.card-login .card-tabs .nav-link{ padding: 18px; font-size: 24px; line-height: 32px; font-weight: 600; color: rgba(255,255,255,0.5); border-bottom: 5px solid transparent;}
.card.card-login .card-tabs .nav-link.active{ color: rgba(255,255,255,1); border-bottom-color: #398C34;}
.card.card-login .checkbox .checkbox-label{ font-size:12px; color: #777;}
.card.card-login .checkbox .checkbox-label:before{ border: 1px solid #777777; border-radius: 2px;}
.card.card-login .card-body{ padding: 40px; position: relative;}
.login-bottom{ position: absolute; top: calc(100% + 20px); left: 0; text-align: center; width: 100%; font-size: 14px; font-weight: normal;}
.section-login a:not(.nav-link):hover{ text-decoration: underline;}
.payment-gateway{
width: 664px;
/*margin: 0 auto; */
max-width: 100%;
}
.promo-group{ position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%;}
.promo-group .form-control{ background: #FBFBFB; border-color: #1321561A; border-radius: 10px; height: 54px; font-size: 16px; line-height: 22px; font-weight: 600; padding: 15px 35px 15px 20px; position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 1%; min-width: 0; margin-right: -15px;}
.promo-group .btn{ font-size: 14px; line-height: 22px; font-weight: bold; padding: 16px 30px; border-radius: 10px;}
.card-paypal{ padding: 45px 30px 35px; display: inline-block; background-color: #2468E1; color: #fff; margin-bottom: 30px; border-radius: 20px;}
.card-paypal .icon{ width: 183px; height: 45px; margin-bottom: 45px;}
.card-paypal .item-text{ font-family: 'Open Sans', sans-serif; font-size: 20px; line-height: 40px; text-align: left;}
.express-checkout{ width: 664px; max-width: 100%;}
.btn-paypal-checkout{ background: #FFC33A; text-transform: none; border-radius: 40px; box-shadow: none;}
.btn-paypal-checkout:focus{ box-shadow: none;}
.btn-paypal-checkout img{ width: 112px; margin-right: 15px;}
/* Media CSS */
@media (max-width: 1199px) {
h1, .h1{ font-size: 32px; line-height: 42px; font-weight: bold;}
h2, .h2{ font-size: 28px; line-height: 38px;}
h3, .h3{ font-size: 22px; line-height: 32px;}
.pattern-circle{ background-size: 50px auto;}
.pattern-circle:before,
.pattern-circle:after{ background-size: auto 70px;}
.section-home .item-image{ position: absolute; right: 0; top: 0; bottom: 0; display: flex; justify-content: flex-end;}
.section-home .item-image img{ height: 100%; width: auto; max-width: none;}
.section-home .caption{ padding: 40px 0 40px 40px; width: 100%; position: relative; z-index: 2;}
.section-bottom{ padding: 25px 40px 0;}
.modal-header .modal-title.icon-left{ padding-left: 63px;}
.modal-header .icon-left .icon{ width: 48px; height: 48px; top: -3px;}
.items-step-wrap{ padding-left: 30px; padding-right: 85px;}
.items-step{ padding-top: 50px;}
}
@media (max-width:991px) {
.header,
.sidebar-open .header{ padding-left: 80px;}
.main-content,
.sidebar-open .main-content{ padding-left: 40px;}
.sidebar{ position: absolute; width: 240px; left: -240px; padding-top: 70px; overflow: visible;}
.sidebar.active{ position: fixed; left: 0;}
.navbar-toggler{ left: 100%; -webkit-transition:all .5s; transition:all .5s;}
.sidebar.active .navbar-toggler{ left: 0;}
.sidebar:not(.active) .navbar-toggler .navbar-toggler-icon{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18' viewBox='0 0 26 18'%3e%3cpath stroke='%23132156' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2' d='M1,9h24 M1,1h24 M1,17h24'/%3e%3c/svg%3e");}
.sidebar .navbar{ padding-top: 0;}
.sidebar .navbar > ul > li{ margin: 4px 0;}
.section-home .caption{ padding: 30px 0 30px 30px; width: 50%;}
.section-bottom{ padding: 20px 30px 0;}
}
@media (max-width:767px){
h1, .h1{ font-size: 24px; line-height: 34px;}
h2, .h2{ font-size: 22px; line-height: 32px;}
h3, .h3{ font-size: 20px; line-height: 30px;}
h4, .h4{ font-size: 18px; line-height: 26px;}
h5, .h5{ font-size: 16px; line-height: 24px;}
h6, .h6{ font-size: 14px; line-height: 20px;}
.text-20-30{ font-size: 16px; line-height: 22px;}
.text-20-36{ font-size: 16px; line-height: 24px;}
.text-30-42{ font-size: 18px; line-height: 26px;}
.row-20{ margin-left: -10px; margin-right: -10px;}
.row-20 > [class*=col-]{ padding-left: 10px; padding-right: 10px;}
.header,
.sidebar-open .header{ padding-left: 60px; padding-right: 20px;}
.main-content,
.sidebar-open .main-content{ padding: 20px;}
.header .navbar{ min-height: 54px;}
.navbar-logo img{ width: 120px;}
.navbar-nav .nav-item-btn .nav-link{font-size: 14px; padding: 4px 16px;}
.nav-user{ font-size: 16px; min-height: 30px; padding-left: 40px;}
.nav-user .nav-user-img{ width: 30px; height: 30px;}
.nav-search{ display: none;}
.navbar-toggler{ margin: 3px 8px;}
.btn{ padding: 8px 16px; font-size: 16px; line-height: 24px;}
.btn-icon .icon{ width: 24px; height: 24px; margin-right: 8px;}
.btn-icon-paypal .icon{ width: 86px; height: 24px; margin-left: 8px;}
.radio .radio-label{ font-size: 16px;}
.section-content{ padding: 20px;}
.section-content-full{ margin: -20px; padding: 20px; min-height: calc(100vh - 54px);}
.section-content-height{ min-height: calc(100vh - 94px);}
.container{ padding-left: 20px; padding-right: 20px;}
.pattern-circle{ background-size: 35px auto;}
.pattern-circle:before,
.pattern-circle:after{ background-size: auto 50px;}
.section-home{ padding: 0;}
.section-home .item-image{ position: relative; overflow: hidden; border-radius: 20px 20px 0 0; width: 100%; height: 0; padding-top: 74%;}
.section-home .item-image img{ width: 180%; height: auto; position: absolute; right: 0; top: 0;}
.section-home .caption{ width: 100%; padding: 30px;}
.section-bottom{ margin-top: 20px;}
.section-video{ height: calc(100vh - 94px);}
.items-check li{ margin-bottom: 20px;}
.card-header{ padding: 13px 20px;}
.card-body{ padding: 20px;}
.card-package .card-header{ padding: 13px 20px;}
.card-package .card-body{ padding-bottom: 20px;}
.card-package .item-price{ margin-bottom: 20px;}
.card-package .item-text{ padding: 0 20px 20px;}
.card-package .items-check{ padding-top: 20px;}
.card-package .item-buy{ padding-top: 20px;}
.card-course .card-header .btn{ margin-top: 10px;}
.modal-header{ padding: 18px 20px;}
.modal-header .modal-title.icon-left{ padding-left: 52px;}
.modal-header .icon-left .icon{ width: 40px; height: 40px; top: -2px;}
.modal-body{ padding: 20px;}
.section-login{ min-height: calc(100vh - 54px); padding: 20px;}
.card-tabs .nav-link{ padding: 10px; font-size: 16px; line-height: 24px;}
.card-login .card-body{ padding: 20px;}
.item-question{ font-size: 16px; line-height: 24px;/* padding-left: 40px;*/}
.item-answer textarea{ font-size: 16px; line-height: 24px; padding: 12px 16px;}
.btn-rc{ right: -98px;}
.items-step-wrap{ padding-right: 50px;}
.promo-group .form-control{ border-radius: 6px; height: 40px; font-size: 14px; padding: 8px 15px 8px 10px;}
.promo-group .btn{ padding: 9px 20px; border-radius: 6px;}
}
@media (max-width:575px){
.card-package .card-body{ padding-top: 20px;}
.section-exam{ padding: 2px;}
.items-exam{ padding: 10px; border-radius: 18px;}
.item-qa-wrap{ margin: 0 -8px;}
.item-answer .item-count.left{ left: 0;}
.item-answer .item-count.right{ right: 0;}
/*.item-question{ margin-top: 10px;}
.item-answer{ margin-top: 10px;}*/
}
@media (min-width:576px){
.card-package .item-recommended{ position: absolute; left: 50%; top: 15px; transform: translateX(-50%);}
}
@media (min-width:768px){
.modal-lg{ max-width: 700px;}
.mb-md-30{ margin-bottom: 30px;}
.mb-md-40{ margin-bottom: 40px;}
}
@media (min-width:992px){
.modal-lg{ max-width: 860px;}
}
@media (min-width:1200px){
.section-home{ display: flex; justify-content: flex-end;}
.section-home .caption{ position: absolute; left: 0; top: 0; bottom: 0; padding: 50px 0 50px 50px; width: 60%; display: flex; flex-direction: column; z-index: 2;}
/*.item-tabs{ flex-wrap: nowrap;}*/
.item-tabs li{ width: 33.33333%;}
.item-tabs li:not(.active):nth-child(2){ background: #E5E6E6;}
.item-tabs li:nth-child(2){ z-index: 2;}
.item-tabs li:nth-child(3){ z-index: 1;}
.item-tabs li + li{ width: calc(33.33333% + 35px); margin-left: -35px; padding-left: 55px; margin-top: 0; border-radius: 0 35px 35px 0;}
.item-qa-wrap{ display: flex; flex: 1 0 0; /*width: 100%;*/}
.item-question{ height: auto; max-height: calc(100vh - 282px); margin-bottom: -81px;}
.item-qa-wrap.item-23 .item-question,
.item-qa-wrap.item-13 .item-answer{ width: calc(66.66667% - 2px);}
.item-qa-wrap.item-13 .item-question,
.item-qa-wrap.item-23 .item-answer{ width: 33.33333%;}
.item-qa-wrap.item-23 .item-question{ margin-right: 2px;}
.item-qa-wrap.item-13 .item-answer{ margin-left: 2px;}
.card-course .card-body{ font-size: 19px;}
}
@media (min-width:1440px){
.d-xxl-block{ display: block !important;}
.pattern-page{ background-size: auto;}
.pattern-page:before,
.pattern-page:after{ background-size: auto;}
}
.courses-selection-wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.courses-selection-wrapper .courses-selection-sec {
max-width: 600px;
}
.btn-icon-paypal {
border-radius: 40px;
background-color: #ffc33a;
color: #132156;
display: inline-flex;
align-items: center;
}
.btn-icon-paypal:hover {
background-color: #ffc33ac2;
color: #132156;
}
.btn-icon-paypal::after {
content: '';
height: 0;
}
.btn-icon-paypal>img {
width: 120px;
}
.text_os{ font-size: 24px; }
.feedback-btn{
z-index: 11;
}
.side_btn_tool .info-popover {
left: -240px; width: 230px;
z-index: 15;
}
.hover-popover.side_btn_tool {
position: absolute;
top: 45%; z-index: 12; min-width: 65px;
}
.hover-popover.side_btn_tool .btn-rc {
min-width: max-content;
}
.side_btn_tool .info-popover:after {
content: "";
position: absolute;
top: 21px;
right: -13px;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-left: 7px solid #fff;
left: auto;
bottom: auto;
}
@media only screen and (max-width: 1500px) {
.items-step-wrap{ margin-left: 100px; }
}
@media only screen and (max-width: 1366px) {
.card-package .card-header h3 {
font-size: 20px;
}
}
/* By RK */
.modal-body.bg-notify-blue {
background-color: #4472c4;
}
.modal-body.bg-notify-blue .white-text {
color: #fff;
}
.bg-notify-rounded{
border-radius: 50px;
}
/* OVERRIDES */
#MemberLoginForm_LoginForm_Email_Holder label, #MemberLoginForm_LoginForm_Password_Holder label { opacity: 0; }
/* Bug #71: the registration fields carry real, human-friendly titles so validation
messages read "First name is required" instead of leaking the internal field name.
Front-end test 2026-07-06 (Cassi): those titles were previously HIDDEN and the visible
layout leaned on placeholders alone - so once a field was filled (or before a placeholder
painted) the user could no longer tell name / email / password apart. Placeholder-as-label
also fails WCAG 2.2 AA (1.3.1 info & relationships, 2.4.6 headings & labels, 3.3.2 labels
or instructions). Show a real, persistent label above each field. The outer
ConfirmedPasswordField group wrapper label is kept for screen readers but visually hidden,
so "Password" is not shown twice (the inner Password / Confirm password sub-labels show).
Placeholders are retained as supplementary hints. AgreeTerms consent copy stays visible. */
#Form_Form_FirstName_Holder label,
#Form_Form_Surname_Holder label,
#Form_Form_Email_Holder label,
#Form_Form_ConfirmEmail_Holder label,
#Form_Form_Password_Password_Holder label,
#Form_Form_Password_ConfirmPassword_Holder label {
display: block; opacity: 1; height: auto; margin: 0 0 6px; padding: 0;
line-height: 1.3; font-size: 14px; font-weight: 500;
}
/* outer ConfirmedPasswordField group label: kept accessible, visually hidden (no dup) */
#Form_Form_Password_Holder > label {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#Form_Form_error { color: red; }
::placeholder {
color: #bbb;
opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
color: #bbb;
}
.packagetop { padding: 10px; text-align: center; font-size: 18px; color: #fff; margin-bottom: 40px; border-radius: 10px; }
.Pink { background-color: #e83e8c; }
.Yellow { background-color: #fdee30; color: #132156; }
.Aqua { background-color: #4ac6d2; }
.Navy { background-color: #361999; }
.Plum { background-color: #721682; }
#MemberLoginForm_LoginForm_error { color: red; }
.field { margin-bottom: 15px; }
.field label { font-size: 18px; color: #000; }
#Form_Form .btn-toolbar { text-align: right; display: block; }
.noshow, .hide { display: none; }
.profileupdate span { background-color: #132156; color: #fff; padding: 3px 5px; border-radius: 3px; animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay: 3s; }
@keyframes fadeInAnimation {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
table.information { width: 100%; border: 1px solid #ccc; }
table.information td, table.information th { padding: 4px; border-right: 1px solid #ccc; }
table.information th { border-bottom: 1px solid #ccc; }
table.submissions tr { width: 100%; border: 1px solid #ccc; }
table.assessment { border: none; }
table.assessment tr { width: 100%; background-color: #24672D; color: #fff; }
table.assessment th, table.assessment td { border: none; }
table.assessment th, table.assessment td { padding-left: 10px; }
.card-package .item-buy.already .btn-primary.btn-bl:after {
background-color: rgba(255, 255, 255, 1);
}
.card-package .item-buy.already .btn-primary.btn-bl { pointer-events: none; background: rgba(255, 255, 255, 1) no-repeat; border-radius: 0; color: #CCC; }
.courseswitch a { margin: auto; border: 1px solid #398c34; border-radius: 10px; padding: 10px 15px; margin-top: 50px; text-transform: uppercase; display: block; width: fit-content; }
.payment-flow-message, #successlinks, .alreadymessage { text-align: center; }
#successlinks { display: none; }
#successlinks.success-show { display: block; }
.startcourse { display: block; background-color: #398C34; color: #fff; width: fit-content; padding: 10px; margin: auto; }
.section-login a.startcourse:hover { color: #fff; text-decoration: none; filter: brightness(90%); }
.diveintext { position: absolute; left: 48px; top: 150px; }
/* NEW STUFF */
/* Progress Meter in Profile */
.meter {
height: 20px;
position: relative;
background: #e0e0e0;
border-radius: 25px;
padding: 3px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
margin: 0 10px;
width: 50%;
margin: auto;
display: none;
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.green > span {
background-color: #4CAF50;
background-image: linear-gradient(to bottom, #009688, #4CAF50);
}
.expiredmeter > span {
background-color: #9e9e9e;
background-image: none;
}
.percentagecompleted { font-size: 12px; color: #cacaca; display: none; }
.complete, .renew { font-size: 13px; padding: 10px 20px; }
.package-row > .col-12 .card-package button.renew {
background-color: #25692D; color: #fff;
}
.package-row > .col-12 .card-package button.renew:hover { background-color: #2C7E36; }
.item-question .item-text ul
{
list-style: initial;
margin: initial;
padding: 0 0 0 40px;
}
.item-question .item-text li
{
display: list-item;
list-style-type: disc;
}
.card-package .card-body-profile ul{ font-size: 14px; line-height: 20px; border-top: none; text-align: center;background-color: #f8f8f8;
padding: 20px 10px; border-radius: 10px; }
.card-package .card-body-profile ul li{ padding-left: 0; background: none; margin-bottom: 0; color: #a4a4a4;}
.card-package .card-body-profile ul li:last-child{ background: none; line-height: 24px;}
.indicator { overflow: visible; position: absolute; bottom: -28px; z-index: 100;font-size: 12px; border: 1px solid #a6bea4; width: 20px; height: 20px; margin: auto; left: 0; background-color: #F4F6F8; border-radius: 20px; }
/*.indicator1 { right: 100px; }
.indicator2 { right: 30px; }
.indicator3 { right: -30px; }
.indicator4 { right: -60px; }
.indicator5 { right: -90px; }*/
.filled { background-color: #a6bea4; }
.video { pointer-events: none; }
.rewatch { pointer-events: auto; cursor: pointer; }
/* Journey-map VIDEO circles get a "play" affordance so the student can re-watch that video.
Uses a self-contained inline SVG data-URI (a play triangle in a filled disc) instead of the
external /assets/Uploads/play-icon.svg, which was missing on the server and left the circle
blank. Inline data-URI can never 404, so the play icon always renders. Sized to sit inside
the 20px indicator disc; the .filled green shows through as the disc, the triangle marks it
re-watchable. */
.refresh { background-color: transparent; background-repeat: no-repeat; background-size: 20px 20px; background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23173a72'/%3E%3Cpath d='M8 6.2l5 3.8-5 3.8z' fill='%23ffffff'/%3E%3C/svg%3E"); }
/*.plus15 { right: -15px; }
.minus15 { right: 15px; }
.right15 { right: 15px; }
.right45 { right: 45px; }
.right-15 { right: -15px; }
.right-45 { right: -45px; }
.right-60 { right: -60px; }
.right-75 { right: -75px; }*/
.items-step-wrap .mt-auto.mb-xl-5 { margin-top: 100px !important; }
.badge { width: 15%; position: absolute; z-index: 10; right: 10px; top: 0px; }
.aboveall { position: relative; z-index: 1000; }
.nav-item span { font-size: 10px; background-color: #24682D; padding: 1px 4px 0 4px; position: absolute; border-radius: 3px; color: #fff; font-weight: bold; margin-top: 2px; margin-left: 10px; }
.content.feedback { max-width: none; }
.feedback #answer { color: #000; padding: 20px 50px 50px 0; }
.feedback .scoreboard { float: left; width: 20%; position: relative; }
.feedback .scoreboard button { margin-bottom: 20px; min-width: 230px; }
.feedback .scoreboard button:hover { background-color: #CECED4; }
.feedback .save { float: left; width: 20%; }
.feedback .label { padding: 10px; color: #fff; width: 65%; display: block; text-align: center; clear: left; float: left; margin-right: 5%; font-size: 20px;}
.feedback .label:hover { cursor: pointer; }
.feedback .score .label:hover { cursor: default; }
.feedback .score .label { background-color: #24672D; height: 64px; padding-top: 14px; font-size: 24px; }
.feedback .task .label { background-color: #E40088; clear: left; color: #fff; }
.feedback .task .value { background-color: #E40088; clear: left; color: #fff; border-top: 1px solid #ff86ce; }
.feedback .coherence .label { background-color: #00A9E7; clear: left; color: #fff; }
.feedback .coherence .value { background-color: #00A9E7; clear: left; color: #fff; border-top: 1px solid #7ad9fc; }
.feedback .lexical .label { background-color: #00DE6B; clear: left; color: #fff; }
.feedback .lexical .value { background-color: #00DE6B; clear: left; color: #fff; border-top: 1px solid #88ffc2; }
.feedback .grammatical .label { background-color: #6D70EA; clear: left; color: #fff; }
.feedback .grammatical .value { background-color: #6D70EA; clear: left; color: #fff; border-top: 1px solid #9c9feb; }
.feedback span.label { border-top: 0px; }
.feedback .value { height: fit-content; }
.feedback .value:hover { cursor: pointer; }
.feedback .value p { display: block; float: left;width: 80%; padding: 2% 0 0 2%; }
.feedback .value span { display: block; float: left; width: 10%; font-size: 30px; margin-left: 10%; text-align: center;}
.feedback .score, .feedback .category { margin-bottom: 30px; position: relative; }
.feedback .reveal { display: none; position: absolute; z-index: 10; }
/*.feedback .reveal p:hover { cursor: pointer; }*/
.feedback .task .reveal { background-color: #E40088; }
.feedback .coherence .reveal { background-color: #00A9E7; }
.feedback .lexical .reveal { background-color: #00DE6B; }
.feedback .grammatical .reveal { background-color: #6D70EA; }
.feedback input { border: none; height: 50px; text-align: center; color: #fff; font-size: 24px; width: 30%; }
.feedback input#totalscore { background-color: #24672D; font-size: 30px; height: 64px; }
.feedback input#taskscore { background-color: #E40088; }
.feedback input#coherencescore { background-color: #00A9E7; }
.feedback input#lexicalscore { background-color: #00DE6B; }
.feedback input#grammaticalscore { background-color: #6D70EA; }
.feedback .markup { float: left; width: 60%; padding: 0 2%; }
.feedback .markup textarea { width: 100%; border: none; height: 600px; overflow: scroll; }
/* Color text highlighting CSS */
.color-picker {
display: block;
margin: 10px 0 5px -6px;
text-align: center;
width: 234px;
}
.color-picker div {
width: 23px;
height: 23px;
border: 1px solid #111;
/*border-radius: 12px;*/
margin: 5px 8px;
display: inline-block;
cursor: pointer;
}
.color-picker div:hover {
border: 1px solid #444;
}
.color-picker div.selected {
box-shadow: #666 0 0 4px 2px;
}
#remove {float: right;
color: #000;
border: 1px solid #000;
width: 23px;
height: 23px;}
#remove span { transform: rotate(45deg); font-size: 40px; display: block; margin: auto; line-height: 17px; cursor: pointer; }
/* Assessment Confirmed Modal */
#darkoverlay { background-color: #000000c2; width: 100%; height: stretch; position: fixed; top: 0; z-index: 10; display: none; }
.showverlay { display: block !important; }
#questionoverlay, #overlay, #saverlay, #saverlayconfirm, #noteoverlay { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
#questionoverlay.open, #overlay.open, #saverlay.open, #saverlayconfirm.open, #noteoverlay.open { opacity: 1; pointer-events: all; }
#modal, #savemodal, #saveconfirmmodal, #notemodal { background-color: #24682D; color: #fff; width: 30%; position: fixed; left: 0; right: 0; margin: auto; z-index: 15; padding: 1.5%; }
#modal h1, #savemodal h1, #saveconfirmmodal h1, #notemodal h1 { color: #fff; }
#questionoverlay { position: absolute; z-index: 10; width: 100%; left: 0; top: 0; }
#questionmodal { position: relative; width: 80%; height: auto; margin: 30px auto; }
#questionmodal img { width: 100%; height: auto; border: 1px solid #999; }
#questionclose { position: absolute; right: 10px; top: -10px; transform: rotate(45deg); font-size: 44px; cursor: pointer; color: #fff; filter: drop-shadow(2px 2px 2px #333333); }
#expand { position: absolute; width: 20px; right: 18px; top:22px; cursor: pointer; filter: drop-shadow(2px 2px 2px #333333); }
#save { border: 1px solid #ccc; padding: 10px 20px; font-size: 14px; line-height: 24px; }
#submit { border: 1px solid #ccc; padding: 10px 10px; font-size: 14px; line-height: 24px; margin-right: 20px; }
#back { border: 1px solid #ccc; padding: 10px 10px; font-size: 14px; line-height: 24px; }
#Form_EmailForm_action_sendEmailForm { display: none; }
.item-question .item-text img { width: 100%; height: auto; cursor: pointer; }
span.highlighted { position: relative; cursor: pointer; }
i.info { display: block;
border-radius: 20px;
border: 2px solid #000;
width: 20px;
text-align: center;
height: 20px;
line-height: 18px;
position: absolute;
background-color: #fff;
font-size: 15px;
font-weight: bold;
top: -11px;
right: -11px;
z-index: 100;
cursor: pointer;
}
.bubble {
display: none;
width: max-content;
padding: 2px 6px;
background-color: green;
color: #fff;
border-radius: 3px;
position: absolute;
right: -11px;
top: -34px;
max-width: 400px;
}
/* Device styling */
@media (max-width: 1500px) {
.feedback .score .label { padding-top: 18px; font-size: 18px; }
.feedback .task .label, .feedback .coherence .label, .feedback .lexical .label, .feedback .grammatical .label { padding-top: 10px; font-size: 14px; }
.feedback .markup { width: 80%; }
.feedback input { height: 41px; }
.feedback input#grammaticalscore { height: 62px; }
#save { position: static; }
#save, #submit, #back { margin-bottom: 30px; }
#savemodal,#modal { width: 40%; }
.col-xl-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 1501px) {
.col-xl-3 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
/* =====================================================================
Mode Education - DESIGN TOKENS (single source of truth)
---------------------------------------------------------------------
This file is INLINED AT BUILD TIME into BOTH deployed stylesheets:
- front-door: styles.css (cat tokens.css styles.css)
- app: layout.css (base + tokens.css + mode-bridge.css)
so the two stylesheet "worlds" share ONE palette + scale. Edit tokens
here only. (Inlined rather than @import'd: the app's layout.css is
server-stitched and a runtime would FOUC on every app page.)
===================================================================== */
:root {
/* ---- brand palette ---- */
--c-bg: #07090D;
--c-bg-2: #0B0C0E;
--c-navy: #0B1B52; --c-navy-rgb: 11,27,82;
--c-teal: #1D9E75; --c-teal-rgb: 29,158,117; --c-teal-600: #178a65;
--c-mint: #3EE7B2; --c-mint-rgb: 62,231,178;
--c-green: #11885f; --c-green-rgb: 17,136,95; /* app "completed" / typical-plan green (was --m-green) */
--c-white: #F8FAFC;
--c-muted: #A6B0BF; /* front-door muted grey */
--c-muted-app: #9aa7b6; /* app/secondary muted grey - kept distinct (merging would shift colour) */
--c-text-dark: #E7ECF2; /* light text on dark entry pages (was --m-text) */
--c-ink: #0c1a2b; /* front-door heading ink */
--c-ink-app: #0b1730; /* app heading ink - near-identical, kept distinct for no visual change */
/* ---- glass / lines / overlays ---- */
--glass-border: rgba(255,255,255,0.14);
--glass-panel: rgba(10,14,22,0.62);
--glass-nav: rgba(8,10,14,0.55);
--overlay-1: rgba(0,0,0,0.45);
--overlay-2: rgba(0,0,0,0.65);
--c-line: rgba(255,255,255,0.10); /* was --m-line */
--c-line-2: rgba(255,255,255,0.16); /* was --m-line-2 */
--c-panel-soft: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); /* was --m-panel */
--c-sh: 0 30px 60px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06); /* was --m-sh */
--c-ring: rgba(var(--c-mint-rgb),0.30); /* was --m-ring */
/* ---- typography ---- */
--font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fs-hero: clamp(2.6rem, 7vw, 6rem);
--fs-h1: clamp(2.1rem, 5vw, 3.8rem);
--fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
--fs-h3: clamp(1.2rem, 2vw, 1.5rem);
--fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
--fs-body: clamp(1rem, 1.1vw, 1.075rem);
--fs-small: 0.8125rem;
/* ---- layout ---- */
--maxw: 1200px;
--gutter: clamp(1.25rem, 4vw, 4rem);
--section-y: clamp(4.5rem, 9vw, 9rem);
--nav-h: 70px; /* front-door body top offset (decoupled magic number) */
--sidebar-w: 84px; /* app left sidebar width */
/* ---- radius scale ---- */
--r-pill: 999px;
--r-panel: 16px;
--r-card: 14px;
--r-sub: 12px;
--r-input: 10px;
--r-sm: 8px;
--r-chip: 6px;
--radius: var(--r-card); /* legacy alias */
--radius-sm: var(--r-input); /* legacy alias */
/* ---- motion ---- */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur: 0.6s;
--lift: -2px; /* standard hover lift (pills / buttons) */
--lift-card: -6px; /* card hover lift */
/* ---- glow / shadow scale ---- */
--glow-sm: 0 10px 30px -12px rgba(var(--c-teal-rgb),0.7);
--glow-md: 0 16px 40px -12px rgba(var(--c-teal-rgb),0.85);
--glow-ring: 0 0 0 1px rgba(var(--c-mint-rgb),0.4);
--glow-btn-hover: 0 0 0 1px rgba(var(--c-mint-rgb),0.55), 0 0 26px 2px rgba(var(--c-mint-rgb),0.55), 0 14px 30px -10px rgba(var(--c-teal-rgb),0.6); /* app pill hover glow (de-duped x4) */
--shadow-glow: 0 0 0 1px var(--glass-border), 0 24px 60px -24px rgba(0,0,0,0.8), 0 0 60px -30px rgba(var(--c-mint-rgb),0.25);
/* ---- package/entitlement state (course-selection cards, 2026-09-21) ----
Each state is carried by a tag with an icon AND text, never by colour alone
(WCAG 1.4.1). These are the tag's accent on the dark gradient card. ---- */
--state-live: #6FD3FF; /* enrolled / in progress - deliberately NOT the mint CTA colour,
so "you own this" never reads as "buy this" */
--state-done: #5FE3A8; /* completed */
--state-ended: #C2CCD9; /* expired - muted, never alarming */
--c-surface-muted: #E6EAEE; /* neutral fill for an ended/expired card header on a LIGHT surface */
/* ---- IELTS criterion colours (feedback legend + submission highlights) ---- */
--crit-task: #c77d11; --crit-task-bg: rgba(199,125,17,0.16); /* Task Achievement (was neon pink) */
--crit-coherence: #2d7ff0; --crit-coherence-bg: rgba(45,127,240,0.15); /* Coherence & Cohesion (was cyan) */
--crit-lexical: #12a06a; --crit-lexical-bg: rgba(18,160,106,0.16); /* Lexical Resources (was green) */
--crit-grammar: #7a5af0; --crit-grammar-bg: rgba(122,90,240,0.15); /* Grammatical Range (was purple) */
/* ---- shared dark "panel" gradients (de-duplicated from 6 copies) ---- */
--panel-gradient:
radial-gradient(900px 540px at 80% -12%, rgba(var(--c-teal-rgb),0.40), rgba(0,0,0,0) 60%),
radial-gradient(680px 460px at 4% 6%, rgba(var(--c-navy-rgb),0.72), rgba(0,0,0,0) 62%),
linear-gradient(160deg, #0c1a33, #0a1422); /* big box: register / courses / about belief */
--panel-gradient-auth:
radial-gradient(700px 460px at 88% -18%, rgba(var(--c-teal-rgb),0.40), rgba(0,0,0,0) 60%),
radial-gradient(560px 460px at -8% 4%, rgba(var(--c-navy-rgb),0.72), rgba(0,0,0,0) 62%),
linear-gradient(160deg, #0c1a33, #0a1422); /* auth card: login / reg-form / reglogged */
}
/* =====================================================================
MODE BRIDGE v3 - app ⇄ site convergence layer (DARK / CINEMATIC)
---------------------------------------------------------------------
Re-skins the SilverStripe "simple" theme to the Mode CINEMATIC look
(near-black canvas, dark glass cards, Source Serif + Inter, green/teal
accents, dark frosted nav) so the app's entry pages (/register,
/Security/login, /course-selection) match the rest of the site.
Purely cosmetic. No markup/JS/logic changes. Loads LAST.
===================================================================== */
/* Design tokens live in tokens.css (inlined at build, ahead of this file).
The former --m-* names now map to the unified --c-* palette there. */
/* ---- canvas: near-black with a soft cinematic glow ---- */
html { scrollbar-gutter: stable; } /* keep the nav still when the scrollbar toggles */
html, body {
background-color: var(--c-bg) !important; color: var(--c-text-dark) !important;
font-family: var(--font-sans) !important; -webkit-font-smoothing: antialiased;
}
body {
background-image:
radial-gradient(900px 540px at 78% -8%, rgba(var(--c-teal-rgb),0.16), transparent 60%),
radial-gradient(680px 460px at 6% 6%, rgba(var(--c-navy-rgb),0.40), transparent 55%) !important;
background-attachment: fixed;
}
.wrapper, .main-content, .content, .typography { background: transparent !important; }
.section, .section-login, section[class*="section"] { background-image: none !important; background-color: transparent !important; }
/* ---- typography ---- */
h1, h2, h3, .page-header-title { font-family: var(--font-display) !important; color: var(--c-white) !important; letter-spacing: -0.01em; }
p, li, label, .text, td, th, .typography { color: var(--c-text-dark); }
small, .muted, .help, .form-text, .description { color: var(--c-muted-app) !important; }
a { color: var(--c-mint); text-decoration: none; }
a:hover { color: var(--c-mint); }
/* ---- dark frosted nav + white logo (app has no hero, so frosted from top) ---- */
.header, .navbar, .navbar-light {
background: rgba(14,22,34,0.62) !important;
backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px);
border-bottom: 1px solid var(--c-line) !important; box-shadow: none !important;
}
.navbar-light .navbar-nav .nav-link, .navbar a, .navbar-brand, .nav-link { color: var(--c-white) !important; opacity: 0.9; }
.navbar-light .navbar-nav .nav-link:hover, .nav-link.active { color: var(--c-mint) !important; opacity: 1; }
.navbar-logo img, .navbar-brand img { height: 40px !important; width: auto !important; filter: brightness(0) invert(1); opacity: 0.95; }
.navbar-toggler { border-color: var(--c-line-2) !important; }
.navbar-toggler-icon { filter: invert(1) brightness(1.6); }
/* ---- empty sidebar: hide the bare strip when it has no menu ---- */
/* NOTE: this light base .sidebar is FOUC-only - on logged-in pages it is replaced by
the SOLID dark `body.mode-app .sidebar` below; no non-mode-app page has a sidebar. */
.sidebar { background: rgba(255,255,255,0.03) !important; border-right: 1px solid var(--c-line) !important; }
.sidebar a { color: var(--c-text-dark) !important; }
.sidebar a:hover, .sidebar .active { color: var(--c-mint) !important; }
.sidebar:not(:has(a, ul, nav, .nav, .menu)) { display: none !important; }
/* ---- cards / panels -> dark glass ---- */
/* NOTE: this base dark glass card is the fallback; each entry page (login/register/
courses/reg-form) and mode-app override .card with a more specific rule, so this is
rarely painted (kept as a safe default / FOUC guard). */
.card, .card-login, .panel, .well {
background: var(--c-panel-soft) !important; border: 1px solid var(--c-line) !important;
border-radius: var(--r-card) !important; box-shadow: var(--c-sh) !important;
color: var(--c-text-dark) !important; backdrop-filter: blur(8px);
}
.card-body { background: transparent !important; }
/* inner tab-content wrapper: boxless (no card-in-card) */
.tab-content { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
/* header bars ("Log In", "Please select a course"): clean + green underline */
.card-header, .card-tabs, .bg-secondary {
background: transparent !important; color: var(--c-white) !important;
border-bottom: 2px solid var(--c-green) !important; font-family: var(--font-display) !important;
}
/* ---- tabs ---- */
.nav-tabs .nav-link, .card-tabs .nav-link { color: var(--c-muted-app) !important; border: 0 !important; background: transparent !important; }
.nav-tabs .nav-link.active, .card-tabs .nav-link.active { color: #fff !important; border-bottom: 2px solid var(--c-mint) !important; }
/* ---- form fields -> dark with teal focus ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], .field input.text, textarea, select, .form-control {
background: rgba(255,255,255,0.05) !important; border: 1px solid var(--c-line-2) !important;
border-radius: var(--r-input) !important; color: var(--c-text-dark) !important; box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: #6c7a89 !important; }
input:focus, textarea:focus, select:focus, .form-control:focus {
border-color: var(--c-mint) !important; box-shadow: 0 0 0 3px var(--c-ring) !important; outline: none !important;
}
.field label, label { color: var(--c-text-dark) !important; font-weight: 500; }
select option { background: #0B0F15; color: var(--c-text-dark); }
/* ---- buttons -> Mode teal/green pills ---- */
.btn, .action, button[type="submit"], input[type="submit"], .btn-primary {
background: linear-gradient(180deg, var(--c-mint), var(--c-teal)) !important;
border: 0 !important; color: #05231a !important; font-family: var(--font-sans) !important;
font-weight: 600 !important; border-radius: var(--r-pill) !important; padding: .62rem 1.4rem !important;
box-shadow: 0 10px 26px -12px rgba(var(--c-teal-rgb),0.55) !important; transition: transform .15s ease, filter .15s ease;
}
.btn:hover, .action:hover, button[type="submit"]:hover, .btn-primary:hover { transform: translateY(var(--lift)); filter: brightness(1.05); }
/* secondary / category-select buttons (General / Academic) -> teal outline on dark */
.btn-secondary, .btn-default, .btn-outline-primary, .btn-light {
background: rgba(var(--c-teal-rgb),0.06) !important; border: 1.5px solid var(--c-teal) !important; color: var(--c-mint) !important; box-shadow: none !important;
}
.btn-secondary:hover, .btn-default:hover { background: linear-gradient(180deg, var(--c-mint), var(--c-teal)) !important; color: #05231a !important; transform: translateY(var(--lift)); }
/* ---- messages / alerts ---- */
.message, .flash-message, .alert { background: var(--c-panel-soft) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-input) !important; color: var(--c-text-dark) !important; }
.message.good, .alert-success { border-left: 3px solid var(--c-mint) !important; }
.message.error, .alert-danger, .message.bad {
background: rgba(255,80,80,0.14) !important; /* clear red tint over the dark card (was neutral panel) */
border: 1px solid rgba(255,107,107,0.55) !important;
border-left: 4px solid #ff5a5a !important;
color: #ffd7d3 !important; /* light red: high contrast on the dark card (was grey --c-text-dark) */
font-weight: 500 !important;
}
.message.required, .alert-warning { border-left: 3px solid #f5c451 !important; }
/* ---- tables ---- */
table, .table { color: var(--c-text-dark) !important; }
.table thead th { border-color: var(--c-line) !important; color: var(--c-muted-app) !important; }
.table td, .table th { border-color: var(--c-line) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.025) !important; }
/* ---- footer (dark anchor) ---- */
footer, .footer { background: #0a1422 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; color: #c8d2dc !important; }
footer a, .footer a { color: #c8d2dc !important; }
@media (prefers-reduced-motion: reduce) { .btn, .action { transition: none !important; } }
/* =====================================================================
GLOBAL NAV injected on app pages (matches the front-door GlassNav).
App has no hero → frosted near-black from the top. Markup is inserted
by the injector appended to common.js.
===================================================================== */
body { padding-top: var(--nav-h); }
.nav.app-nav {
position: fixed; inset: 0 0 auto 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
/* RIGHT GUTTER MATCHES THE HERO, so the account pill lines up with the Need Help button
directly beneath it (owner, 2026-09-22). Measured: the pill's right edge sat 56px from the
viewport edge while Need Help sat 27px, because the nav used clamp(1.25rem,4vw,4rem) and
.mhp-hero-tools uses right:calc(1.9 * 1cqw) on a full-bleed hero. 1.9vw is the same
proportion, so they stay aligned at EVERY width rather than at one. The floor stops the
gutter collapsing on a phone. The left is untouched - the logo has not moved. */
padding: 0.78rem max(16px, 1.9vw) 0.78rem clamp(1.25rem, 4vw, 4rem);
background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nav.app-nav::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: rgba(10,16,26,0.9);
backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.nav.app-nav .nav__logo { display: inline-flex; align-items: center; }
/* 33px -> 38px, matching the front door (owner, 2026-07-27). See styles.css. */
.nav.app-nav .nav__logo img { height: 38px !important; width: auto !important; filter: none !important; opacity: 1 !important; }
.nav.app-nav .nav__links { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav.app-nav .nav__link {
position: relative; padding: 0.5rem 0.85rem; border-radius: var(--r-pill); font-size: 0.98rem; line-height: 1.6;
color: #F8FAFC !important; opacity: 0.85; text-decoration: none; background: none !important; border: 0; cursor: pointer; font-family: var(--font-sans) !important;
}
.nav.app-nav .nav__link:hover { opacity: 1; background: rgba(255,255,255,0.10) !important; color: #fff !important; }
.nav.app-nav .nav__link[aria-disabled="true"] { color: rgba(255,255,255,0.5) !important; }
.nav.app-nav .nav__cta {
margin-left: 0.4rem; background: rgba(var(--c-teal-rgb),0.06) !important; border: 1.5px solid var(--c-teal) !important; color: #fff !important;
padding: 0.7em 1.6em !important; border-radius: var(--r-pill) !important; font-weight: 600 !important; font-size: 0.98rem !important; line-height: 1.2 !important; box-shadow: none !important; text-decoration: none; text-transform: none !important; letter-spacing: 0.01em !important;
}
.nav.app-nav .nav__link { text-transform: none !important; letter-spacing: normal !important; }
.nav.app-nav .nav__cta:hover { background: linear-gradient(180deg, var(--c-mint), var(--c-teal)) !important; color: #05231a !important; transform: none !important; }
.nav.app-nav .nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-input); align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.nav.app-nav .nav__toggle span { display: block; width: 22px; height: 2px; background: #fff; position: relative; }
.nav.app-nav .nav__toggle span::before, .nav.app-nav .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #fff; }
.nav.app-nav .nav__toggle span::before { top: -7px; } .nav.app-nav .nav__toggle span::after { top: 7px; }
.nav.app-nav .tooltip-wrap { position: relative; }
.nav.app-nav .tooltip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: rgba(14,22,34,0.96); color: #fff; border: 1px solid rgba(255,255,255,0.16); font-size: 0.78rem; padding: 0.4rem 0.7rem; border-radius: var(--r-sm); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.25s; pointer-events: none; }
.nav.app-nav .tooltip-wrap:hover .tooltip { opacity: 1; visibility: visible; }
@media (max-width: 860px) {
.nav.app-nav .nav__toggle { display: inline-flex; }
.nav.app-nav .nav__links { position: fixed; inset: 0 0 0 auto; width: min(82vw,340px); flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 6rem 1.5rem 2rem; background: rgba(14,22,34,0.6); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); border-left: 1px solid rgba(255,255,255,0.10); box-shadow: -24px 0 70px rgba(0,0,0,0.55); transform: translateX(100%); transition: transform 0.45s ease; z-index: 99; }
body.menu-open .nav.app-nav .nav__links { transform: translateX(0); }
.nav.app-nav .nav__link { width: 100%; font-size: 1.05rem; padding: 0.85rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav.app-nav .nav__cta { margin: 0.6rem 0 0; width: 100%; text-align: center; }
}
/* #14 /register course-select buttons: centred + aligned, full-width stacked on mobile */
.courseswitch { display: block !important; width: 100% !important; text-align: center !important; float: none !important; margin: 0.6rem 0 !important; }
.courseswitch:first-of-type { margin-top: 1.4rem !important; }
.courseswitch a { display: inline-block !important; float: none !important; position: static !important; margin: 0 !important; min-width: 260px; text-align: center; }
@media (max-width: 680px) { .courseswitch a { display: block !important; width: 100% !important; min-width: 0; } }
/* injected global footer (app pages) - matches the front door, green headings */
.footer { padding-block: clamp(1.5rem,3vw,2.5rem) 2rem !important; }
.footer .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,4rem); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
/* Footer logo is DELIBERATELY a different variant of the mark (logo-white-footer.svg:
mosaic globe) from the nav (logo-white.svg: brand-master crescent globe). Owner's
choice, 2026-07-27 - "to show dynamism". This is not drift; do not "fix" it.
Height stays 31px. */
.footer__brand img { height: 31px !important; width: auto !important; margin-bottom: 1rem; filter: none !important; }
.footer__brand p { color: var(--c-muted-app) !important; font-size: 0.92rem; max-width: 32ch; }
.footer h4 { font-family: var(--font-sans) !important; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-mint) !important; margin-bottom: 1rem; font-weight: 600; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; }
.footer li { margin: 0; }
.footer a { color: #c8d2dc !important; opacity: 0.85; font-size: 0.92rem; text-decoration: none; }
.footer a:hover { opacity: 1; color: var(--c-mint) !important; }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.10); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--c-muted-app) !important; font-size: 0.8125rem; }
/* app nav: X-close toggle above the slide-in panel + smooth morph */
.nav.app-nav .nav__toggle { position: relative; z-index: 101; }
.nav.app-nav .nav__toggle span, .nav.app-nav .nav__toggle span::before, .nav.app-nav .nav__toggle span::after { transition: 0.3s ease; }
body.menu-open .nav.app-nav .nav__toggle span { background: transparent !important; }
body.menu-open .nav.app-nav .nav__toggle span::before { top: 0 !important; transform: rotate(45deg); }
body.menu-open .nav.app-nav .nav__toggle span::after { top: 0 !important; transform: rotate(-45deg); }
/* =====================================================================
/register - LIGHTER page; the blue/green gradient (was the page bg)
moves INTO the course-selection box. Each course gets a short summary
+ a glow-on-hover button (no underline). Scoped via body.mode-register
(added by the injector only on /register).
===================================================================== */
body.mode-register { background: #eef2f0 !important; }
body.mode-register::before, body.mode-register::after { display: none !important; } /* drop any page-level gradient layers */
body.mode-register .main-content, body.mode-register #securityPage,
body.mode-register .section-login, body.mode-register .card { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.mode-register .section-login { padding: clamp(2rem,6vw,4.5rem) 1.25rem !important; }
/* neutralise the app's hidden-sidebar left padding so the box truly centres */
body.mode-register .main-content, body.mode-courses .main-content, body.mode-login .main-content, body.mode-reg-form .main-content {
padding-left: clamp(1rem, 4vw, 40px) !important; padding-right: clamp(1rem, 4vw, 40px) !important;
}
/* the app wraps the form in a ~600px flex box that our wider card overflows off-centre - free it */
body.mode-register .section-login, body.mode-login .section-login { display: block !important; }
body.mode-register .section-login > * { width: 100% !important; max-width: 100% !important; }
/* kill the app's green header underline / any top accent line on the box */
body.mode-register .card-header, body.mode-register .card-tabs,
body.mode-register .card, body.mode-register .card-body { border-top: 0 !important; border-bottom: 0 !important; }
/* the course-selection box: the moved gradient on a dark base, premium card */
body.mode-register .card-body {
max-width: 940px; margin-inline: auto !important;
background: var(--panel-gradient) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: var(--r-panel) !important;
box-shadow: 0 45px 120px -55px rgba(8,18,40,0.7) !important;
padding: clamp(1.6rem, 4vw, 3rem) !important;
color: #fff !important;
}
/* two options SIDE BY SIDE; stack only when the screen is too narrow */
body.mode-register .cs-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 680px) { body.mode-register .cs-grid { grid-template-columns: 1fr; gap: 1.2rem; } }
body.mode-register .cs-head { text-align: center; margin-bottom: 1.8rem; }
/* trailing "existing account" line: left-aligned, full width below the cards */
body.mode-register #login > *:not(.cs-grid) { text-align: left !important; margin-top: 1.6rem !important; }
body.mode-register .cs-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--c-mint); margin-bottom: 0.7rem; }
body.mode-register .cs-head h2 { color: #fff !important; font-weight: 600 !important; font-size: clamp(1.5rem, 1rem + 2vw, 2.05rem) !important; margin: 0 0 0.55rem !important; line-height: 1.15 !important; }
body.mode-register .cs-head p { color: rgba(255,255,255,0.74) !important; max-width: 50ch; margin: 0 auto !important; font-size: 0.96rem !important; line-height: 1.55 !important; }
/* two option sub-cards - equal height, button anchored to the bottom */
body.mode-register .courseswitch {
display: flex !important; flex-direction: column !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: var(--r-sub) !important;
padding: 1.5rem 1.6rem !important;
margin: 0 !important;
text-align: left !important;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.mode-register .courseswitch:hover { transform: translateY(var(--lift-card)); border-color: rgba(var(--c-mint-rgb),0.55) !important; box-shadow: 0 26px 60px -32px rgba(var(--c-mint-rgb),0.4) !important; }
body.mode-register .cs-title { color: #fff !important; margin: 0 0 0.5rem !important; font-size: 1.16rem !important; font-weight: 600 !important; }
body.mode-register .cs-desc { color: rgba(255,255,255,0.74) !important; margin: 0 0 1.4rem !important; font-size: 0.94rem !important; line-height: 1.55 !important; }
/* button: glow on hover, never underline */
body.mode-register a:hover { text-decoration: none !important; }
body.mode-register .courseswitch a {
display: flex !important; align-items: center; justify-content: center; gap: 0.45rem;
width: 100% !important; white-space: nowrap; text-transform: none !important;
margin-top: auto !important;
background: linear-gradient(180deg, var(--c-mint), var(--c-teal)) !important;
color: #05231a !important; text-decoration: none !important;
padding: 0.78rem 1.4rem !important; border-radius: var(--r-pill) !important; font-weight: 600 !important;
box-shadow: 0 10px 26px -12px rgba(var(--c-teal-rgb),0.55) !important;
transition: box-shadow .3s ease, transform .15s ease, filter .15s ease !important;
}
body.mode-register .courseswitch a:hover {
text-decoration: none !important; transform: translateY(var(--lift)); filter: brightness(1.04);
box-shadow: var(--glow-btn-hover) !important;
}
@media (max-width: 680px) { body.mode-register .courseswitch a { display: flex !important; width: 100% !important; justify-content: center; } }
/* =====================================================================
/course-selection/* - branded pricing cards (match the rest of the site).
Lighter page; dark gradient pricing panels; on-brand price; glow buttons.
===================================================================== */
body.mode-courses { background: #eef2f0 !important; }
body.mode-courses .main-content, body.mode-courses #securityPage,
body.mode-courses section, body.mode-courses .card-body { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* heading area styled like /about & /products section heads: eyebrow + big h1
+ lead, generous top space, soft glow, no green underline. */
body.mode-courses .main-content, body.mode-courses #securityPage { padding-top: clamp(2.5rem, 7vh, 5.5rem) !important; }
body.mode-courses .page-title, body.mode-courses .section-title { text-align: center !important; max-width: 820px; margin-inline: auto !important; }
body.mode-courses .page-title.title-line::after, body.mode-courses .title-line::after,
body.mode-courses .page-title hr, body.mode-courses .title-line hr { display: none !important; } /* drop the green underline */
body.mode-courses .page-title h1, body.mode-courses .section-title, body.mode-courses > .main-content h1 {
color: var(--c-ink-app) !important; font-family: var(--font-sans) !important; font-weight: 700 !important;
font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.4rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; margin: 0 !important;
}
body.mode-courses .cs-eyebrow {
display: inline-block; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--c-teal) !important; font-weight: 600; margin-bottom: 0.9rem;
}
/* non-boxed lead copy under the heading, on the light page */
body.mode-courses .cs-intro {
max-width: 60ch; margin: 1rem auto 2.75rem !important; text-align: center;
color: #44525f !important; font-size: 1.05rem !important; line-height: 1.6 !important;
font-family: var(--font-sans) !important; background: transparent !important;
}
/* soft brand glow behind the heading, like /about & /products glow-bg */
body.mode-courses .main-content::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 460px; z-index: 0; pointer-events: none;
background: radial-gradient(60% 60% at 18% 0%, rgba(var(--c-teal-rgb),0.10), transparent 70%), radial-gradient(50% 55% at 100% 8%, rgba(var(--c-navy-rgb),0.10), transparent 70%);
}
body.mode-courses .main-content { position: relative; }
body.mode-courses .main-content > * { position: relative; z-index: 1; }
/* whole card = the same premium gradient panel as the big /register box */
body.mode-courses .card {
background: var(--panel-gradient) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: var(--r-card) !important;
box-shadow: 0 30px 80px -50px rgba(8,18,40,0.7) !important;
color: #fff !important; overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* lighten the muted "All prices USD" so it's not dark-on-dark */
body.mode-courses .item-price-text, body.mode-courses .item-price small { color: rgba(255,255,255,0.6) !important; }
/* BUY NOW = full-width mint pill like the register box buttons */
body.mode-courses .item-buy { text-align: center; }
body.mode-courses .item-buy .btn {
display: flex !important; width: 100% !important; align-items: center; justify-content: center;
white-space: nowrap; text-transform: none !important; border-radius: var(--r-pill) !important;
}
body.mode-courses .card:hover { transform: translateY(var(--lift-card)); border-color: rgba(var(--c-mint-rgb),0.45) !important; box-shadow: 0 36px 90px -45px rgba(var(--c-mint-rgb),0.3) !important; }
/* drop the green header underline; title white on the dark card */
body.mode-courses .card-header, body.mode-courses .card-tabs { border-bottom: 0 !important; background: transparent !important; }
body.mode-courses .card-header, body.mode-courses .card-header h3, body.mode-courses .item-name { color: #fff !important; }
/* hide the theme's decorative background-image "orbs" on the reskinned pages */
body.mode-courses section::before, body.mode-courses section::after,
body.mode-login section::before, body.mode-login section::after,
body.mode-register section::before, body.mode-register section::after { display: none !important; content: none !important; }
/* price: brand it (was off-brand blue) */
body.mode-courses .item-price-value, body.mode-courses .item-price-value * { color: #fff !important; }
body.mode-courses .item-price .currency, body.mode-courses .item-price-value sup { color: var(--c-mint) !important; }
/* buy button: glow on hover, never underline */
body.mode-courses a { text-decoration: none !important; }
/* the app's .btn-bl draws a decorative underline via ::after - remove it */
body.mode-courses .btn::after, body.mode-courses .btn-bl::after, body.mode-courses .item-buy a::after { display: none !important; content: none !important; }
body.mode-courses .item-buy .btn, body.mode-courses .btn-primary { text-decoration: none !important; transition: box-shadow .3s ease, transform .15s ease, filter .15s ease !important; }
body.mode-courses .item-buy .btn:hover, body.mode-courses .btn-primary:hover {
text-decoration: none !important; transform: translateY(var(--lift)); filter: brightness(1.04);
box-shadow: var(--glow-btn-hover) !important;
}
/* =====================================================================
/Security/login - lighter, premium, distinctive (gradient card + faint
logo watermark, glassy inputs with mint focus glow, glowing button).
===================================================================== */
body.mode-login { background: #eef2f0 !important; }
body.mode-login .main-content, body.mode-login #securityPage, body.mode-login .section-login { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.mode-login .section-login { padding: clamp(2rem,6vw,5rem) 1.25rem !important; }
/* whole card = gradient panel so the "Log In" header sits INSIDE it */
body.mode-login .card {
position: relative; overflow: hidden;
max-width: 530px; margin-inline: auto !important;
background: var(--panel-gradient-auth) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: var(--r-panel) !important;
box-shadow: 0 45px 120px -55px rgba(8,18,40,0.7) !important;
padding: clamp(1.8rem, 4vw, 2.6rem) !important;
color: #fff !important;
}
body.mode-login .card-body { background: transparent !important; border: 0 !important; padding: 0 !important; font-size: 0.95rem !important; }
/* the "Log In" header is redundant (white-on-white) and its green line looked off - hide it */
body.mode-login .card-header { display: none !important; }
/* consistent, not-too-large text inside the card */
body.mode-login .card-body div, body.mode-login .card-body p, body.mode-login .card-body label,
body.mode-login .card-body strong, body.mode-login .card-body span { font-size: 0.95rem !important; line-height: 1.5 !important; }
/* distinctive: faint logo watermark in the card corner */
body.mode-login .card::after {
content: ""; position: absolute; bottom: 18px; right: 20px; width: 124px; height: 46px;
background: url("/fd-assets/img/logo-white.svg?v=mode55") right center / contain no-repeat;
opacity: 0.2; pointer-events: none; z-index: 0;
}
body.mode-login .card-header, body.mode-login .card-tabs, body.mode-login .bg-secondary { border-bottom: 0 !important; background: transparent !important; }
body.mode-login .card-header, body.mode-login h1, body.mode-login h2, body.mode-login h3 { color: #fff !important; position: relative; z-index: 1; }
body.mode-login label, body.mode-login p, body.mode-login .text, body.mode-login .checkbox label { color: rgba(255,255,255,0.82) !important; }
body.mode-login input[type="text"], body.mode-login input[type="email"], body.mode-login input[type="password"] {
background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: #fff !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
}
body.mode-login input[type="text"]:focus, body.mode-login input[type="email"]:focus, body.mode-login input[type="password"]:focus {
border-color: rgba(var(--c-mint-rgb),0.65) !important; box-shadow: 0 0 0 3px rgba(var(--c-mint-rgb),0.18) !important; outline: none !important;
}
body.mode-login ::placeholder { color: rgba(255,255,255,0.5) !important; }
body.mode-login .card a { color: var(--c-mint) !important; } /* in-card links only, not the footer */
body.mode-login a:hover { text-decoration: none !important; }
body.mode-login input.action, body.mode-login .btn-block, body.mode-login button[type="submit"], body.mode-login input[type="submit"] {
width: 100% !important; transition: box-shadow .3s ease, transform .15s ease, filter .15s ease !important;
}
body.mode-login input.action:hover, body.mode-login .btn-block:hover, body.mode-login button[type="submit"]:hover {
transform: translateY(var(--lift)); filter: brightness(1.04);
box-shadow: var(--glow-btn-hover) !important;
}
/* =====================================================================
/register?package=N - the registration FORM page, styled like the
login / about / products pages (light page, gradient card, glassy
inputs, glow button, branded course badge).
===================================================================== */
body.mode-reg-form { background: #eef2f0 !important; }
body.mode-reg-form .main-content, body.mode-reg-form #securityPage, body.mode-reg-form .section-login { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.mode-reg-form .section-login { display: block !important; padding: clamp(2rem,6vw,5rem) 1.25rem !important; }
/* the card = gradient panel (matches login / register box) */
body.mode-reg-form .card {
position: relative; overflow: hidden; max-width: 600px; margin-inline: auto !important;
background: var(--panel-gradient-auth) !important;
border: 1px solid rgba(255,255,255,0.10) !important; border-radius: var(--r-panel) !important;
box-shadow: 0 45px 120px -55px rgba(8,18,40,0.7) !important;
padding: clamp(1.8rem, 4vw, 2.6rem) !important; color: #fff !important;
}
body.mode-reg-form .card-body { background: transparent !important; border: 0 !important; padding: 0 !important; }
/* faint logo watermark in the corner (distinctive, like login) */
body.mode-reg-form .card::after {
content: ""; position: absolute; bottom: 18px; right: 20px; width: 124px; height: 46px;
background: url("/fd-assets/img/logo-white.svg?v=mode55") right center / contain no-repeat; opacity: 0.16; pointer-events: none; z-index: 0;
}
/* keep the "Step 1: Create your account" header but drop the green line + restyle */
body.mode-reg-form .card-header, body.mode-reg-form .card-tabs, body.mode-reg-form .bg-secondary {
background: transparent !important; border: 0 !important; border-bottom: 0 !important;
color: #fff !important; font-family: var(--font-sans) !important; font-weight: 700 !important;
font-size: clamp(1.4rem, 1rem + 1.4vw, 1.85rem) !important; letter-spacing: -0.02em !important;
text-align: center; padding: 0 0 0.4rem !important; margin-bottom: 1rem !important;
}
/* the "Step 1..." text is an tab - kill its mint underline, style as heading */
body.mode-reg-form .nav-link, body.mode-reg-form .nav-link.active, body.mode-reg-form .card-tabs .nav-link.active {
border-bottom: 0 !important; color: #fff !important; opacity: 1 !important; pointer-events: none; cursor: default;
}
/* course-selection badge: purple -> brand teal pill */
body.mode-reg-form .cs-badge {
display: inline-block; background: rgba(var(--c-teal-rgb),0.14) !important; border: 1px solid rgba(var(--c-mint-rgb),0.4) !important;
color: #eafff7 !important; border-radius: var(--r-pill) !important; padding: 0.55rem 1.3rem !important; font-weight: 600 !important; box-shadow: none !important;
}
/* text + links */
body.mode-reg-form p, body.mode-reg-form label, body.mode-reg-form .text, body.mode-reg-form span:not(.cs-badge),
body.mode-reg-form .checkbox label { color: rgba(255,255,255,0.82) !important; }
body.mode-reg-form .card a { color: var(--c-mint) !important; } /* in-card links only, not the footer */
body.mode-reg-form a:hover { text-decoration: none !important; }
/* glassy inputs with mint focus glow */
body.mode-reg-form input[type="text"], body.mode-reg-form input[type="email"], body.mode-reg-form input[type="password"] {
background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: #fff !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
}
body.mode-reg-form input[type="text"]:focus, body.mode-reg-form input[type="email"]:focus, body.mode-reg-form input[type="password"]:focus {
border-color: rgba(var(--c-mint-rgb),0.65) !important; box-shadow: 0 0 0 3px rgba(var(--c-mint-rgb),0.18) !important; outline: none !important;
}
body.mode-reg-form ::placeholder { color: rgba(255,255,255,0.5) !important; }
/* REGISTER button: full-width glow (scoped to the form so the nav CTA is untouched) */
body.mode-reg-form .card-body .btn, body.mode-reg-form .card-body .action,
body.mode-reg-form .card-body input[type="submit"], body.mode-reg-form .card-body button[type="submit"] {
width: 100% !important; transition: box-shadow .3s ease, transform .15s ease, filter .15s ease !important;
}
body.mode-reg-form .card-body .btn:hover, body.mode-reg-form .card-body .action:hover,
body.mode-reg-form .card-body input[type="submit"]:hover, body.mode-reg-form .card-body button[type="submit"]:hover {
transform: translateY(var(--lift)); filter: brightness(1.04);
box-shadow: var(--glow-btn-hover) !important;
}
/* =====================================================================
mode-app: the LOGGED-IN application (profile, my-courses, my-payments,
payment, edit-profile, change-password, assessments, CMS, etc.).
LIGHT theme matching /about & /products - no dark application pages.
===================================================================== */
body.mode-app {
background-color: #eef2f0 !important; color: #11202A !important;
background-image:
radial-gradient(760px 520px at 100% 0%, rgba(var(--c-teal-rgb),0.07), transparent 60%),
radial-gradient(760px 520px at 0% 0%, rgba(var(--c-navy-rgb),0.05), transparent 60%) !important;
display: flex; flex-direction: column; min-height: 100vh; /* sticky footer */
}
body.mode-app .wrapper, body.mode-app .main-content, body.mode-app .content, body.mode-app .typography,
body.mode-app .section, body.mode-app .section-login { background: transparent !important; }
body.mode-app .main-content { flex: 1 0 auto; }
/* text + headings */
/* App body default (inherited). Footer keeps its own grey via the .footer overrides. */
body.mode-app { color: #11202A; }
/* Element-level dark text is SCOPED to the content column so it can never reach the
dark footer (previously body.mode-app p/li/span... leaked and relied on source order). */
body.mode-app .main-content p, body.mode-app .main-content li, body.mode-app .main-content label,
body.mode-app .main-content .text, body.mode-app .main-content td, body.mode-app .main-content th,
body.mode-app .main-content .typography, body.mode-app .main-content span { color: #11202A; }
body.mode-app h1, body.mode-app h2, body.mode-app h3, body.mode-app h4, body.mode-app .page-header-title { color: var(--c-ink-app) !important; }
body.mode-app small, body.mode-app .muted, body.mode-app .help, body.mode-app .form-text, body.mode-app .description { color: #5a6b78 !important; }
/* links -> brand teal (readable on light) */
body.mode-app a { color: #1D9E75 !important; }
body.mode-app a:hover { color: #146b46 !important; }
/* cards -> light glass (like /about .glass-card) */
body.mode-app .card, body.mode-app .card-login, body.mode-app .panel, body.mode-app .well {
background: #fff !important; border: 1px solid rgba(var(--c-navy-rgb),0.10) !important;
box-shadow: 0 1px 2px rgba(var(--c-navy-rgb),0.04), 0 22px 50px -34px rgba(var(--c-navy-rgb),0.30) !important;
color: #11202A !important; backdrop-filter: none !important; border-radius: var(--r-card) !important;
}
body.mode-app .card-body { background: transparent !important; color: #11202A !important; }
/* card headers: dark title + subtle green underline */
body.mode-app .card-header, body.mode-app .card-tabs, body.mode-app .bg-secondary {
background: transparent !important; border-bottom: 2px solid rgba(var(--c-teal-rgb),0.45) !important; font-family: var(--font-sans) !important;
}
body.mode-app .card-header, body.mode-app .card-header *, body.mode-app .card-tabs .nav-link { color: var(--c-ink-app) !important; }
body.mode-app .nav-tabs .nav-link.active, body.mode-app .card-tabs .nav-link.active { border-bottom-color: var(--c-teal) !important; }
/* form fields -> light */
body.mode-app input[type="text"], body.mode-app input[type="email"], body.mode-app input[type="password"],
body.mode-app input[type="number"], body.mode-app input[type="search"], body.mode-app input[type="tel"],
body.mode-app textarea, body.mode-app select, body.mode-app .form-control {
background: #fff !important; border: 1px solid rgba(var(--c-navy-rgb),0.18) !important; color: #11202A !important;
}
body.mode-app input::placeholder, body.mode-app textarea::placeholder { color: #8a96a3 !important; }
body.mode-app input:focus, body.mode-app textarea:focus, body.mode-app select:focus, body.mode-app .form-control:focus {
border-color: var(--c-teal) !important; box-shadow: 0 0 0 3px rgba(var(--c-teal-rgb),0.18) !important;
}
body.mode-app select option { background: #fff; color: #11202A; }
/* ---------------------------------------------------------------------------
APP BUTTONS - restore the original high-contrast brand buttons (WCAG 2.2 AA).
The unscoped public-page skin (".btn / .btn-primary / .btn-secondary" near the
top of the bridge) recoloured EVERY button to a pale mint/teal gradient with
dark or mint text. On the logged-in course / video / exam pages that produced
(1) a faint "PRACTICE EXAM" primary (mint text on a light-green gradient) and
(2) near-invisible nav arrows (the SVG