/* CMS Admin CSS */

a {
    color: #000;
    text-decoration: none;
}

.styled-section-block {
    background-color: #f9f9f9;
    border: 2px dotted #d9d9d9;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0px 18px;
}

.menu-section-block {
    background-color: #f9f9f9;
    border: 2px dotted #d9d9d9;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.section-block {
    background-color: #f9f9f9;
    border: 2px dotted #d9d9d9;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.content {
    padding-inline-start: 25px;
}

.sidebar--slim,
.sidebar-loading--slim {
    width: 60px !important;
}

.styled-section-block>div {
    flex: 1 1 48%;
}

.styled-section-block>div:nth-child(3) {
    flex: 1 1 100%;
}

.styled-section-block>div[data-contentpath="slug"] .help {
    position: absolute;
    top: -28px;
    left: 45px;
    font-size: 12px;
}

.styled-section-block .w-field__comment-button {
    z-index: 99;
}

.styled-section-block .c-sf-add-button {
    background-color: transparent !important;
}

.styled-section-block .button-block {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 25px;
}

.styled-section-block .button-block>div {
    flex: 1 1 48%;
}

.styled-section-block .button-block>div:nth-child(3) {
    flex: 1 1 100%;
}

.styled-section-block .button-block .w-field--choice_field {
    width: 100%;
}

.styled-section-block .button-block .w-field--choice_field select {
    width: 100%;
    border: 1px solid #DDF2F0 !important;
    font-size: 1rem !important;
}

input[type=date],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea,
.public-DraftEditor-content {
    border: 1px solid #DDF2F0 !important;
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: "Sora", sans-serif;
    border-radius: 5px;
}

.Draftail-Editor {
    border: none !important;
}

.sidebar {
    width: 230px;
}

@media screen and (min-width: 50em) {
    .sidebar-panel--open {
        inset-inline-start: 230px;
    }
}

.sidebar input {
    border: 1px dotted #1CB8A5 !important;
    border-radius: 5px !important;
    padding-inline-start: 45px !important;
}

.sidebar__inner form button {
    padding-inline-start: 15px !important;
}

.sidebar input:focus-visible {
    outline: none !important;
}

.styled-section-block [data-tippy-root] {
    margin-left: 2.5rem !important;
}

.tippy-box[data-theme=dropdown] {
    margin-left: 4.5rem !important;
}

.w-combobox__option-row {
    grid-template-columns: 1fr 0rem !important;
}

.sidebar-custom-branding {
    margin: 1em auto 2rem !important;
}

.sidebar-custom-branding .logo {
    max-width: 175px;
}

.login-logo {
    display: none !important;
}

.sidebar .logo-icon {
    display: none;
}

.sidebar--slim .logo-icon {
    display: block;
    max-width: 70%;
    margin: 0 auto;
}

.sidebar--slim .logo {
    display: none;
}

.sidebar-menu-item__link {
    width: 95%;
    margin: 5px auto;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.04);
    padding: 13px 10px 13px 10px;
    color: #333d09;
}

.sidebar-menu-item__link:hover {
    background: rgba(0, 153, 153, 0.52);
}

.sidebar-footer .sidebar-menu-item .sidebar-menu-item__link {
    color: #fff;
}

.sidebar-menu-item--active {
    background-color: transparent !important;
}

.sidebar-menu-item--active .sidebar-menu-item__link {
    background: #00999A;
    color: #fff;
}

.sidebar-menu-item--active .sidebar-menu-item__link:hover {
    background: #000;
}

.sidebar-sub-menu-panel {
    background-color: #2a6d6d !important;
}

.sidebar-menu-item--active {
    text-shadow: none !important
}

.sidebar--slim .sidebar-custom-branding {
    padding: 10px 0;
}

.w-summary__list li a,
.w-list-none li a {
    color: #000 !important;
}

.w-list-none li:last-child {
    display: none !important;
}

header .w-border-border-furniture {
    align-items: center;
}

header .avatar .icon {
    fill: #000 !important;
}

.sidebar-footer {
    background-color: transparent !important;
}

.sidebar-footer .w-bg-surface-menus {
    background-color: transparent !important;
}

.sidebar-footer .w-bg-surface-menus:hover {
    background-color: #00999A !important;
    color: #fff !important;
}

.sidebar__inner {
    background-color: #00999A;
    background: url("../images/sidebar-bg.png");
    background-size: cover;
}

.sidebar-footer.sidebar-footer--open {
    background-color: #000 !important;
}

.sidebar-footer__account-toggle .sidebar-footer__account-label,
.sidebar-footer__account-toggle .icon {
    color: #000 !important;
}

.sidebar-footer.sidebar-footer--open .sidebar-footer__account-toggle .icon,
.sidebar-footer.sidebar-footer--open .sidebar-footer__account-toggle .sidebar-footer__account-label {
    color: #fff !important;
}

.login .content-wrapper {
    margin-bottom: 0vh;
}

.login .content-wrapper form {
    width: 100%;
    position: relative;
    min-width: 500px;
}

.tippy-box {
    background-color: #0e0e0e;
}

.tippy-box .icon {
    fill: #fff !important;
}

.w-dropdown__content :where(a, button):hover {
    background-color: #00999A;
}

.footer__container {
    background: #000;
}

.footer .actions--primary .button {
    height: 3rem;
    background-color: #00999A;
    border: none;
    color: #fff;
}

.footer .actions--primary .button:hover {
    background-color: #333333;
}

.sidebar-main-menu .icon--submenu-header {
    fill: #fff;
    opacity: 1;
}

.c-page-explorer,
.c-page-explorer__header {
    background-color: #000;
}

.c-page-explorer__header {
    border-color: #2f2f2f;
}

.c-page-explorer__item {
    border-color: #2f2f2f;
}

.c-page-explorer__item>:not([hidden])~:not([hidden]) {
    border-color: #2f2f2f;
}

.c-page-explorer__item__link:focus,
.c-page-explorer__item__link:hover {
    background-color: #00999A;
}

.c-page-explorer__item__action:focus,
.c-page-explorer__item__action:hover {
    background-color: #00999A;
}

.c-page-explorer__header__title:focus,
.c-page-explorer__header__title:hover {
    background-color: #00999A;
}

.listing .children a .icon {
    fill: #00999A;
}

.listing .children a:hover {
    background: #160033;
}

.pagination li.pagination__page-number.pagination__page-number--current a {
    background-color: #160033;
}

.pagination li.pagination__page-number.pagination__page-number--current a:hover {
    background-color: #00999A;
}

.pagination li.pagination__page-number a {
    border: 1px solid #00999A;
}

.pagination li.pagination__page-number:hover a {
    color: #fff;
    background: #333333;
    border: 1px solid #333333;
}

@media screen and (min-width: 50em) {

    .listing td.children:hover,
    .listing tr:hover .children {
        background-color: #160033;
    }
}

.sidebar__inner form {
    width: 95%;
    margin: 0 auto;
    top: -5px;
}

.listing.full-width {
    margin-bottom: 0em;
}

.sidebar-menu-item__link:focus,
.sidebar-menu-item__link:hover {
    text-shadow: none;
}

body.ready .sidebar-loading__collapse-toggle:hover,
body.ready .sidebar__collapse-toggle:hover {
    background-color: #000;
}

.modal-body .w-header {
    background-color: #00999A;
    padding: 20px;
}

.modal-body .w-header>.row {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.w-tabs__panel .button-longrunning {
    background-color: #333333;
    border: none;
}

.w-tabs__panel .button-longrunning:hover {
    background-color: #00999A;
}

.listing.chooser tbody tr:hover {
    background-color: #000;
}

input:focus-visible {
    outline: 2px solid #bdbdbd !important;
}

.modal .close.button {
    top: .95rem;
    height: 2.2rem;
    width: 2.2rem;
    background: #b85667;
    border-radius: 5px;
}

.modal .close.button:hover {
    background-color: #333333;
}

.listing tbody tr,
.listing tbody tr td a .icon,
.w-filter-button .icon {
    fill: #000;
}

.login .wrapper {
    background: url("../images/logo-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    padding: 0px;
}

.login .wrapper::before {
    content: '';
    background: url("../images/wave-bg.png") no-repeat top left;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.login .content-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.login .content-wrapper .custom-message {
    flex: 1 1 18%;
}

.login .content-wrapper .custom-message h2 {
    font-size: 2rem;
    color: #00999A;
    text-align: center;
    letter-spacing: -1px;
}

.login .content-wrapper .custom-login-logo {
    flex: 1 1 18%;
}

.login .content-wrapper form {
    flex: 1 1 60%;
}

.login h1 {
    margin-bottom: 0rem;
    display: none;
}

.custom-login-logo {
    width: 100%;
    min-width: 300px;
    background: url(../images/logo-bg.png) no-repeat center;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.custom-login-logo h1 {
    color: #333333;
    font-size: 24px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.4px;
    margin: 0rem 0rem 1.2rem;
    display: block;
}

.custom-login-logo img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.login .content-wrapper {
    max-width: 620px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 0 20px 25px rgba(0, 0, 0, 0.10);
}

.login-form {
    width: 100%;
    position: relative;
}

.login .button,
.login .w-field__label {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
}

.login .content-wrapper input {
    border-radius: 5px;
    border: 1px solid #DDF2F0 !important;
    background: #FFF;
    height: 60px;
    padding: 1rem;
    font-size: 16px;
    color: #000 !important;
}

.login .content-wrapper input:-internal-autofill-selected {
    background-color: #fff !important;
    color: #000 !important;
}

.login .content-wrapper input[type=checkbox] {
    height: 18px;
    width: 18px;
    padding: 12px;
}

.login .content-wrapper input[type=checkbox]::before {
    top: 5px;
    left: 5px;
}

.login .content-wrapper input[type=checkbox]:checked:before {
    background: #000;
}

.remember-me {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
}

.form-actions {
    background: #fff;
}

.login .button {
    border-radius: 8px;
    background: #00999A;
    box-shadow: 0 0 8px 12px rgba(0, 0, 0, 0.02);
    height: 60px;
    border: none;
    color: #fff;
}

.login .button:hover {
    background: #333333;
}

.login .reset-password {
    margin: 0px;
    position: absolute;
    right: 0px;
    color: #6d43a4;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    border-bottom: 1px solid;
}

.login .reset-password:hover {
    color: #333333;
}

.login .messages {
    background: none;
    position: absolute;
    bottom: 8px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 600px;
}

.login .content-wrapper .messages>ul>li {
    padding: 0em;
}

.login .content-wrapper .login .messages ul li {
    margin-bottom: 0px;
}

.login .content-wrapper .messages .error {
    color: #fb2222;
    background-color: transparent;
}

.login .content-wrapper .messages .success {
    color: #1b8666;
    background-color: transparent;
}

.w-header-button {
    color: #000;
}

.w-header-button:hover {
    background-color: #00999A;
    border-color: #00999A;
    color: #fff;
}

.w-header-button:hover .icon {
    background-color: #00999A;
    border-color: #fff;
}

.button.button-secondary {
    color: #000;
}

.icon.teal {
    color: #000;
}

.listing .title .title-wrapper a:hover,
.listing .title h2 a:hover {
    color: #333333;
}

.sidebar-custom-branding {
    outline: none !important;
}

.w-panel .button {
    background-color: #454545;
    border: none;
}

.w-panel .button:hover {
    background-color: #00999A;
}

.button.chooser__choose-button {
    color: #000;
    border: 1px solid #c5c3c3 !important;
    background-color: #ededed;
}

.button.chooser__choose-button:hover {
    color: #fff;
}

.Draftail-Editor {
    border: none;
}

.replace-file-input .button {
    background-color: #454545;
    border: none;
}

.replace-file-input .button:hover,
.replace-file-input:hover button {
    background-color: #00999A;
}

.section-block .button-block {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 20px;
    background: #efefef;
    border-radius: 5px;
    margin-top: 0.8rem;
    padding: 0.85rem;
    margin-bottom: 1rem;
}

.section-block .button-block.steps-block {
    background: #ffffff;
    flex-direction: column;
    align-items: self-start;
    gap: 5px;
    width: 100%;
}

.section-block .button-block.steps-block>div {
    width: 100%;
    flex: 1 1 100%;
}

.section-block .button-block.flex-direction {
    flex-direction: column-reverse;
    align-items: flex-start;
}

.button-block .c-sf-add-button {
    background-color: transparent;
}

.section-block .button-block.tabs .w-field__label {
    margin-top: 1rem;
}

.section-block .content-block {
    border: 1px solid #efefef;
    border-radius: 5px;
    padding: 1rem;
    margin-top: 0.8rem;
}

.section-block .content-block:last-child .button-block {
    margin-bottom: 1rem;
}

.section-block .button-block .w-field__wrapper:last-child {
    margin-bottom: 0rem;
    padding-bottom: 0rem;
}

.section-block .button-block>div {
    flex: 1 1 48%;
}

.section-block .button-block>div:nth-child(3) {
    flex: 1 1 100%;
}

.section-block .button-block .w-field--choice_field {
    width: 100%;
}

.section-block .button-block .w-field--choice_field select {
    width: 100%;
    border: 1px solid #e4e6ed !important;
    font-size: 1rem !important;
}

.actions .button .icon {
    fill: #fff !important;
}

.w-combobox__option-icon .icon {
    fill: #000 !important;
}

.content-block div[data-contentpath="section_name"] {
    display: none;
}

.content-block div[data-contentpath="color"] .w-field--select,
.section-block div[data-contentpath="color"] .w-field--select {
    width: 100%;
}

.section-block.testimonials div[data-contentpath="section_name"] {
    display: none;
}

.section-block.testimonials div[data-contentpath="color"] {
    margin-bottom: 1rem;
}

.content-block div[data-contentpath="color"] .w-field--select select,
.section-block div[data-contentpath="color"] .w-field--select select {
    width: 100%;
    border: 1px solid #e4e6ed !important;
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: "Sora", sans-serif;
    border-radius: 5px;
}

.content-block div[data-contentpath="color"] .w-field__wrapper,
.section-block div[data-contentpath="color"] .w-field__wrapper {
    margin-bottom: 0rem;
    padding-bottom: 0rem;
}

.content-block div[data-contentpath="bg_color"],
.content-block div[data-contentpath="section_layout"],
.content-block div[data-contentpath="color"] {
    margin-bottom: 1rem;
}

.button-block div[data-contentpath="bg_color"],
.button-block div[data-contentpath="section_layout"],
.button-block div[data-contentpath="color"] {
    margin-bottom: 0rem;
}

.content-block div[data-contentpath="bg_color"] .w-field--select,
.content-block div[data-contentpath="section_layout"] .w-field--select {
    width: 100%;
}

.content-block div[data-contentpath="bg_color"] .w-field--select select,
.content-block div[data-contentpath="section_layout"] .w-field--select select {
    width: 100%;
    border: 1px solid #e4e6ed !important;
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: "Sora", sans-serif;
    border-radius: 5px;
}

.content-block div[data-contentpath="bg_color"] .w-field__wrapper,
.content-block div[data-contentpath="section_layout"] .w-field__wrapper {
    margin-bottom: 0rem;
    padding-bottom: 0rem;
}

.menu-section-block .w-field--select {
    width: 100%;
}

.menu-section-block select {
    width: 100%;
    border: 1px solid #e4e6ed !important;
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: "Sora", sans-serif;
    border-radius: 5px;
}

.menu-section-block .country-block {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 20px;
    background: #ededed;
    padding: 1rem;
    border-radius: 8px;
}

.menu-section-block .country-block.mb-1 {
    margin: 0.5rem 0rem 1rem;
}

.menu-section-block .country-block .w-field__wrapper {
    padding-bottom: 0rem !important;
}

.menu-section-block .country-block>div {
    flex: 1 1 48%;
}

.search-dropdown .select2-selection {
    width: 100%;
    border: 1px solid #e4e6ed !important;
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: "Sora", sans-serif;
    border-radius: 5px !important;
    padding: 0.65rem 1rem;
    height: auto !important;
}

.search-dropdown .select2-selection__rendered {
    padding-left: 0px !important;
    padding-right: 0px !important;
    line-height: normal !important;
}

.search-dropdown .select2-selection__arrow {
    top: 8px !important;
    right: 8px !important;
}

.select2-search--dropdown .select2-search__field {
    padding: 4px 12px !important;
}

.titled-list .struct-block div[data-contentpath="description"] {
    margin-top: 1rem;
}

.w-form-width .w-field__input select {
    width: 100%;
    border: 1px solid #e4e6ed !important;
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: "Sora", sans-serif;
    border-radius: 5px;
}

.w-header .right .button {
    background-color: #00999A;
    border: 1px solid #00999A;
}

.w-header .right .button:hover {
    background-color: #333333;
    border: 1px solid #333333;
}

.w-header .right .button:hover .icon-wrapper {
    background-color: #1ea6aa;
}

.w-header .left .col {
    display: flex;
    align-items: center;
    gap: 8px;
}

.w-header .left .col .w-header__description {
    font-size: 1rem;
    color: #878787;
    position: relative;
    top: 2px;
}

.w-header .w-header__title,
.w-header h1 {
    font-size: 1.75rem;
}

.result-list .listing .even {
    background: #fbfbfb;
}

.result-list table.listing tbody {
    counter-reset: rowNumber;
}

.result-list table.listing tbody tr {
    counter-increment: rowNumber;
}

.result-list table.listing tbody tr td:first-child::before {
    content: counter(rowNumber) ". ";
    font-weight: bold;
    margin-right: 8px;
    color: #444;
}

.w-tabs__panel .listing thead tr th {
    padding-inline-start: 0rem !important;
}

.w-tabs__panel .listing .title {
    padding-inline-start: 0rem !important;
}

.snippet-chooser .chooser__title {
    font-size: 1rem;
}

.menu-section-block div[data-contentpath="left_block"] .struct-block {
    background: #efefef;
    border-radius: 5px;
    margin-top: 0.8rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.menu-section-block div[data-contentpath="right_block"] .w-field__label {
    margin-bottom: 1rem;
}

.menu-section-block div[data-contentpath="left_block"] .struct-block div[data-contentpath="button_news_item"] .w-field__wrapper {
    margin-bottom: 0rem;
    padding-bottom: 0rem;
}

.sidebar-footer--open>ul {
    max-height: 110px;
}

.result-list .listing {
    width: 100%;
    table-layout: auto;
}

.result-list .listing th:first-child,
.result-list .listing td:first-child {
    width: 100%;
}

.result-list .listing th:not(:first-child),
.result-list .listing td:not(:first-child) {
    white-space: nowrap;
    width: auto;
}

.struct-block .w-field--select {
    width: 100%;
}

.sidebar-nav-toggle--mobile {
    background-color: #856e01 !important;
}

.sidebar-nav-toggle--open:hover {
    background-color: #222 !important;
}

.w-field--checkbox_input {
    display: flex;
    align-items: center;
}

.w-field--checkbox_input .w-field__input {
    margin-top: 0px;
    margin-left: 20px;
}

.password-reset-screen .back-to-signin {
    flex: 1 1 100%;
    text-align: center;
}

.password-reset-screen .back-to-signin a {
    color: #6d43a4;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
}

.password-reset-screen .back-to-signin a:hover {
    color: #333333;
}

.done-screen .custom-message p {
    text-align: center;
    color: #00a13a;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.fields .button-secondary {
    background-color: #00999A !important;
    border-color: #00999A !important;
}

.fields .button-secondary:hover {
    background-color: #160033 !important;
    border-color: #160033 !important;
}

ul.fields li .button-longrunning {
    background-color: #00999A !important;
    border: 1px solid #00999A !important;
}

ul.fields li .button-longrunning:hover {
    background-color: #333333 !important;
    border: 1px solid #333333 !important;
}

.confirm-duplicate-upload .confirm-upload {
    background-color: #00999A !important;
    border: 1px solid #00999A !important;
}

.confirm-duplicate-upload .confirm-upload:hover {
    background-color: #333333 !important;
    border: 1px solid #333333 !important;
}

.done-screen .custom-message .back-to-signin p {
    margin: 0rem;
}

.done-screen .custom-message .back-to-signin a:hover {
    color: #333333;
}

@media (max-width:768px) {
    .login .content-wrapper form {
        min-width: 100%;
    }
}

/* Shared styles for both themes */
.w-theme-dark a,
.w-theme-dark .w-summary__list li a,
.w-theme-dark .w-list-none li a {
    color: #fff !important;
    text-decoration: none;
}

.w-theme-dark header .avatar .icon,
.w-theme-dark .listing tbody tr,
.w-theme-dark .listing tbody tr td a .icon,
.w-theme-dark .w-filter-button .icon,
.w-theme-dark .icon.teal {
    fill: #fff !important;
    color: #fff !important;
}

.w-theme-dark .button.button-secondary,
.w-theme-dark .w-header-button {
    color: #fff;
}

.w-theme-dark .section-block {
    background-color: #2b2b2b;
    border: 2px dotted #515151;
}

.w-theme-dark .section-block .content-block {
    border: 1px solid #4d4646;
}

.w-theme-dark .section-block .button-block {
    background: #3d3d3d;
}

.w-theme-dark input[type=date],
.w-theme-dark input[type=datetime-local],
.w-theme-dark input[type=email],
.w-theme-dark input[type=file],
.w-theme-dark input[type=month],
.w-theme-dark input[type=number],
.w-theme-dark input[type=password],
.w-theme-dark input[type=search],
.w-theme-dark input[type=tel],
.w-theme-dark input[type=text],
.w-theme-dark input[type=time],
.w-theme-dark input[type=url],
.w-theme-dark input[type=week],
.w-theme-dark textarea,
.w-theme-dark .public-DraftEditor-content {
    border: 1px solid #575757 !important;
}

.w-theme-dark .result-list .listing .even {
    background: #353535;
}


.w-theme-dark .content-block div[data-contentpath="color"] .w-field--select select,
.w-theme-dark .section-block div[data-contentpath="color"] .w-field--select select {
    border: 1px solid var(--input-border) !important;
}

.w-theme-dark .button.chooser__choose-button {
    color: #757575;
    border: 1px solid #575757 !important;
    background-color: #000000;
}

.w-theme-dark .menu-section-block {
    background-color: #3f3f3f;
    border: 2px dotted #4f4f4f;
}

.w-theme-dark .menu-section-block .country-block {
    background: #535353;
}

.w-theme-dark .w-form-width .w-field__input select {
    border: 1px solid #575757 !important;
}

.w-theme-dark .c-sf-add-button {
    background-color: #3f3f3f;
    color: #3f3f3f;
}

.w-pill__content,
.w-pill__remove {
    background-color: #ffcd02;
    color: #000;
    border-color: #ffcd02;
}

.w-pill button:hover,
.w-pill__remove:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.button-block div[data-contentpath="news_items"] .help-critical {
    background-color: #db5a5a;
    color: #fff;
    padding-inline-start: 0em;
    text-align: center;
}

.tag {
    background-color: #00999A;
    padding: .2em .5em 0.2rem 0.7rem;
    font-size: 15px;
    color: #fff;
}

.tag:before {
    width: 12px;
    height: 14px;
    position: relative;
    left: -4px;
    background: #fff;
}

.tagit-new .ui-autocomplete-input {
    border-radius: 2px;
    padding: 5px !important;
}

.struct-block {
    background: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
}

.struct-block .help {
    margin-bottom: 0rem;
}

.footer__emphasise-span-tags span {
    color: #333333;
}

.button.button-secondary:hover {
    background-color: #DDF2F0;
    border-color: #DDF2F0;
    color: #160033;
}

/* Root wrapper */
.login-root {
    display: flex;
    height: 100vh;
    background: none;
    position: relative;
    z-index: 1;
    width: 100%;
    flex-direction: row-reverse;
    border: 2px dotted #009999;
    background-color: #fafafa;
    background-image: radial-gradient(#DDF2F0 1.7px, #0000 1.5px);
    background-size: 16px 16px;
}

.w-text-text-label {
    color: #000 !important;
}

/* LEFT PANEL */
.login-left {
    flex: 1;
    color: #fff;
    padding: 60px;
    border-radius: 12px;
    margin: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 685px;
    background-color: #00999A;
    background: url("../images/login-leftside-bg.png") center / cover no-repeat;
    align-items: center;
}

.login-left .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.login-left .brand img {
    max-width: 260px;
}

.login-left h1 {
    font-size: 48px;
    line-height: 1.2;
    display: inline-block;
    text-align: center;
    color: #fff;
    line-height: 100%;
}

.login-left h1 span {
    color: #ff4b55;
}

.login-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-to-signin {
    display: none;
}

.content-wrapper .back-to-signin {
    display: block;
}

.section-block .services-block {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: #fff;
    padding: 1rem 2rem 2rem;
}

.section-block .services-block .w-field__label {
    margin: 0.5rem 0rem;
}

.section-block .services-block>div {
    flex: auto;
    width: 100%;
}

/* ==========================================================================
   Two-Factor Authentication (tf-*) styles
   Applies to: login, token verification, setup wizard, setup complete
   ========================================================================== */

/* Card container – shared by login and setup steps */
.tf-login-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 20px 25px rgba(0, 0, 0, 0.08);
    padding: 50px;
    width: 100%;
    max-width: 620px;
    position: relative;
}

/* Header */
.tf-login-header {
    margin-bottom: 28px;
}

.tf-login-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin: 0 0 10px;
    line-height: 1.2;
}

.tf-login-header p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Blue subtitle used on the "Verify your sign in" screen */
.tf-subtitle-blue {
    color: #555 !important;
}

/* Step progress dots (setup wizard) */
.tf-step-indicator {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}

.tf-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: background 0.2s;
}

.tf-step-dot.active {
    background: #F5C400;
}

/* Form field */
.tf-field {
    margin-bottom: 20px;
}

.tf-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
}

.tf-required {
    color: #e53935;
    margin-left: 2px;
}

/* Override Wagtail input styles inside tf-login-card */
.tf-login-card input[type="text"],
.tf-login-card input[type="password"],
.tf-login-card input[type="email"],
.tf-login-card input[type="number"] {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    font-size: 15px;
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #DDF2F0 !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.tf-login-card input[type="text"]:focus,
.tf-login-card input[type="password"]:focus,
.tf-login-card input[type="email"]:focus,
.tf-login-card input[type="number"]:focus {
    border-color: #00999A !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(106, 69, 154, 0.1) !important;
}

/* Select inside setup wizard (device type picker) */
.tf-login-card select {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    font-size: 15px;
    color: #111;
    background: #fff;
    border: 1px solid #DDF2F0 !important;
    border-radius: 10px !important;
    box-sizing: border-box;
}

/* Remember me / forgot password row */
.tf-remember-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.tf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
}

.tf-checkbox-label input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    accent-color: #00999A;
    cursor: pointer;
    background: #fff;
    border: 1px solid #DDF2F0;
    margin-inline-end: .3rem;
}

.tf-checkbox-label input[type=checkbox]:checked:before {
    background: #009999;
}

.tf-checkbox-label input[type=checkbox]:before {
    top: 2px;
    left: 2px;
}

.tf-forgot-link {
    font-size: 16px;
    font-weight: 600;
    color: #00999A;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.2s;
}

.tf-forgot-link:hover {
    color: #333333;
}

/* Action row of buttons */
.tf-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    justify-content: flex-end;
}

/* Spread layout: cancel left, back + next right */
.tf-actions-spread {
    justify-content: space-between;
    align-items: center;
}

/* Centred layout: used on complete screen */
.tf-actions-center {
    justify-content: center;
}

/* Buttons */
.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
    text-decoration: none;
    padding: 0 28px;
    height: 56px;
    white-space: nowrap;
    width: 100%;
}

/* Purple primary button (matches screenshot) */
.tf-btn-primary {
    background: #00999A;
    color: #fff;
}

.tf-btn-primary:hover {
    background: #333333;
    color: #fff;
}

.tf-btn-primary em {
    font-style: normal;
}

/* Grey secondary button (matches "Back" in screenshots) */
.tf-btn-secondary {
    background: #f4f5fe;
    color: #00999A;
}

.tf-btn-secondary:hover {
    background: #efebf7;
    color: #00999A;
}

.tf-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Full-width variant */
.tf-btn-full {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Cancel link (plain text, no background) */
.tf-btn-cancel {
    background: none;
    color: #333333;
    font-weight: 700;
    padding: 0;
    height: auto;
    text-decoration: none;
    border-radius: 0;
}

.tf-btn-cancel:hover {
    color: #00999A;
}

/* Link-style button (e.g. "Use a backup token instead") */
.tf-btn-link {
    background: none;
    color: #00999A;
    font-size: 13px;
    font-weight: 500;
    padding: 0;
    height: auto;
    border-radius: 0;
    text-decoration: underline;
    margin-top: 8px;
    display: block;
    text-align: left;
    border: none;
}

.tf-btn-link:hover {
    color: #333333;
}

/* QR Code container */
.tf-qr-wrapper {
    display: inline-block;
    background: #f4f5fe;
    border: 1px solid #DDF2F0;
    border-radius: 14px;
    padding: 5px;
    margin-bottom: 20px;
}

.tf-qr-image {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 4px;
}

.tf-qr-hint {
    font-size: 14px;
    color: #444;
    margin-bottom: 4px;
}

/* Field-level error list */
.tf-error-list,
.tf-field-errors {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 12px;
    color: #e53935;
}

.tf-error-list li,
.tf-field-errors li {
    margin-bottom: 2px;
}

/* Help text */
.tf-help-text {
    font-size: 12px;
    color: #888;
    margin: 4px 0 0;
}

/* "Other methods" label */
.tf-other-methods-label {
    font-size: 13px;
    color: #777;
    margin: 20px 0 8px;
}

/* Setup complete card extra spacing */
.tf-complete-card {
    text-align: center;
}

/* Success icon circle */
.tf-complete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e8f5e9;
    margin: 0 auto 24px;
    color: #2e7d32;
}

.tf-complete-icon svg {
    width: 36px;
    height: 36px;
}

/* Setup card wider max-width for wizard */
.tf-setup-card {
    max-width: 620px;
}

/* Spinner icon inside primary button */
.tf-btn-primary .icon {
    fill: #fff;
    color: #fff;
}

/* Wagtail spinner override inside tf buttons */
.tf-btn[data-controller="w-progress"] .icon-spinner {
    display: none;
}

.tf-btn[data-controller="w-progress"].is-loading .icon-spinner {
    display: inline-block;
}

.back-to-signin-link {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
}

.back-to-signin-link:hover {
    color: #1b8666;
}

.reset_2fa .button {
    height: auto;
    color: #00999A !important;
    border-color: #DDF2F0 !important;
    padding: 2px 8px !important;
}

.messages .tf-message.success {
    background-color: transparent;
    color: #1b8666;
    font-size: 12px;
}

.messages .tf-error-list .error {
    background-color: transparent;
    color: #e53935;
    padding: 0px;
    font-size: 12px;
}

.tf-field input[type="number"]::-webkit-outer-spin-button,
.tf-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tf-field input[type="number"] {
    appearance: textfield;
}

.fields .button {
    background-color: #00999A;
    border-color: #00999A;
}

.fields .button.delete {
    background-color: #ffffff;
    border-color: #ca3b3b;
}

.fields .button.delete:hover {
    background-color: #ca3b3b;
    border-color: #ca3b3b;
    color: #fff;
}

.login-bottom {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.login-bottom img {
    width: 100%;
    max-width: 275px;
}

/* Responsive adjustments */
@media (max-width: 900px) {

    .tf-login-card,
    .tf-setup-card {
        padding: 36px 24px 28px;
    }
}

@media (max-width: 640px) {

    .tf-login-card,
    .tf-setup-card {
        border-radius: 12px;
        max-width: 100%;
    }

    .tf-actions-spread {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tf-btn-cancel {
        order: -1;
        width: 100%;
        text-align: center;
    }
}