@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --top-nav-link-color: hsla(0, 0%, 0%, 0.8);
    --label-text-transform: none;
    --input-border-width: 2px !important;
    --input-hover-border-color: var(--brand-primary);
    --app-nav-top-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --app-nav-top-menu-icon-color: var(--paragraph-clr) !important;
}

body {
    text-rendering: auto !important;
    --text-body-color: var(--paragraph-clr);
}

:root {
    --t7red-dark: rgb(99, 24, 24);
    --t7red: hsl(0, 67%, 59%);
    --t7red-light: hsl(0, 80%, 70%);
    --t7red-lightest: hsl(9, 100%, 77%);
    --t7blue: hsl(239, 84%, 67%);
    --t7blue-dark: hsl(239, 86%, 60%);
    --t7blue-light: hsl(250, 75%, 88%);
    --t7blue-lightest: hsl(250, 75%, 95%);
    --t7green: hsl(142, 71%, 45%);
    --t7green-light: hsl(142, 77%, 73%);
    --t7green-dark: hsl(144, 61%, 20%);
    --t7orange: hsl(39, 100%, 50%);
    --t7orange-light: hsl(39, 100%, 70%);
    --t7orange-lightest: hsl(39, 100%, 85%);
    --t7orange-dark: hsl(39, 100%, 30%);

    --gray-lightest: hsl(40, 9%, 98%);
    --gray-light: hsl(28deg 2% 95%);
    --gray: hsl(50 5% 93% / 1);
    --gray-medium: hsl(50 5% 86% / 1);
    --gray-dark: hsl(240, 5%, 65%);
    --paragraph-clr: #000000cc;
    --large-btn-text: 1.125rem;
    --border: 2px solid #EDEDED;
    --bold: 700;
    --semibold: 600;
    --medium: 500;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm-reverse: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-no: 0 4px 6px -1px rgb(0 0 0 / 0), 0 2px 4px -2px rgb(0 0 0 / 0);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --text-h1: 2.85rem;
    --text-h2: 2.375rem;
    --text-h3: 1.85rem;
    --text-h4: 1.55rem;
    --text-h5: 1.3rem;
    --text-p: 1.125rem;
    --tiny-text: 0.9rem;
    --small-text: 1rem;
    --medium-text: 1.2rem;
    --big-text: 1.375rem;
    --font-size-h6: 17px;
    --font-size-h5: 20px;
    --font-size-h4: 22px;
    --font-size-h3: 26px;
    --font-size-h2: 32px;
    --font-size-h1: 40px;
}

.pro-colors {
    --t7red-dark: hsl(239, 86%, 60%);
    --t7red: hsl(239, 84%, 67%);
    --t7red-light: hsl(250, 75%, 88%);
    --t7red-lightest: hsl(250, 75%, 95%);
    --t7blue-dark: rgb(99, 24, 24);
    --t7blue: hsl(0, 67%, 59%);
    --t7blue-light: hsl(0, 80%, 70%);
    --t7blue-lightest: hsl(9, 86%, 80%);
}

.green {
    color: var(--t7green);
}

.font-small {
    font-size: var(--small-text);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-05 {
    margin-bottom: 0.5rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-1-5 {
    margin-bottom: 1.5rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.btn {
    transition: 0.2s ease-in-out;
    letter-spacing: 0.02rem;
}

menu a,
.top-nav {
    letter-spacing: 0.02rem;
}

.label {
    text-transform: none;
}

.summary-list {
    border-width: 2px !important;
}

.panel-summary .panel-footer:after {
    height: 2px !important;
}

.switch--text .switch__checkbox:checked+.switch__container:after {
    top: 0px !important;
    left: 7px !important;
    content: "aan" !important;
    /* font-weight: 600 !important; */
}

.switch--text .switch__checkbox+.switch__container:after {
    top: 0px !important;
    right: 9px !important;
    content: "uit" !important;
    font-weight: 600 !important;
}

.switch--lg .switch__handle {
    width: 22px !important;
    height: 22px !important;
}

.switch__handle {
    top: 3px !important;
}

.switch--lg.switch--text .switch__checkbox:checked+.switch__container .switch__handle {
    right: 3px !important;
}

#tableDomainsList .switch--text {
    width: 57px;

    .switch__handle {
        top: 2px !important;
    }

}
                  
.switch--text .switch__checkbox+.switch__container .switch__handle {
    right: 35px;
}

.switch--sm .switch__handle {
    top: 2px !important;
}

.custom-svg {
    height: 1rem !important;
    width: 1rem !important;
}

li#Secondary_Navbar-Winkelwagen .custom-svg {
    margin-right: 0 !important;
}

a:hover .custom-svg {
    fill: var(--top-nav-link-hover-color);
}

.mr-05 {
    margin-right: 0.5rem;
}

.search-box-primary {
    background-image: url(https://www.theory7.net/Assets/red-bg.webp) !important;
    background-size: cover !important;
}

.app-nav .my-account .active-client span:not(.item-text),
.top-nav .my-account .active-client span:not(.item-text),
.app-nav .my-account .active-client .item-text,
.top-nav .my-account .active-client .item-text {
    display: inline !important;
}

.message,
.message-body p {
    margin-bottom: 0 !important;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box {
    border-radius: 0.5rem !important;
    border-width: 2px !important;
}

.panel-choose-domain-boxed .panel-domain-option .radio {
    border-radius: 0.5rem !important;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box {
    align-items: flex-start !important;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box-text-subtitle,
.panel-choose-domain-boxed .panel-domain-option .radio .box-text-title {
    text-align: left !important;
}

.panel-choose-domain-boxed .panel-domain-option .radio .box-text-title {
    font-weight: 600 !important;
}

.main-header-label-desc {
    background-color: hsl(240 7% 94% / 1) !important;
}

.package {
    display: grid !important;
    padding: 1.5rem !important;
    gap: 1.5rem !important;
    color: black;
}

.package-features ul,
.product-info ul {
    list-style-type: none;
    padding: 0 !important;
    text-align: left !important;
    font-size: 0.9rem !important;
    color: var(--paragraph-clr) !important;
}

.product-info li:not(:last-of-type) {
    margin-bottom: 1rem;
}

.package-features br {
    display: none !important;
}

.speed {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
}

.spec-speed {
    display: inline;
    width: 50%;
}

.speedbar {
    background-color: var(--gray-light);
    height: 0.55rem;
    border-radius: 1rem;
}

.speedbar-inner {
    background-image: linear-gradient(90deg, var(--t7blue-light), var(--t7blue));
    height: 100%;
    border-radius: 1rem;
}

.spec-support {
    color: var(--t7green-dark);
    background-color: hsl(142deg 77% 73% / 40%);
    padding: 0.5rem;
    margin-inline: -0.5rem;
    border-radius: 0.4rem;
    margin-top: 0.5rem;
    transition: 0.2s ease;
}

.spec-support:hover {
    background-color: var(--t7green);
    color: white;
}



.package-features {
    padding-top: 1.5rem !important;
}

.spec-disabled,
.spec-disabled a {
    color: hsl(0deg 0% 85%);
}

.package ul>li:not(:first-of-type, .spec-support) {
    margin-block: 2.25rem;
}

.package-features>li {
    color: black !important;
    text-align: left !important;
}

.check-icon {
    color: var(--t7green);
    margin-right: 0.5rem;
}

.check-icon-red {
    color: var(--t7red);
    margin-right: 0.5rem;
}

.package-content>p,
.package-desc,
.package-features {
    font-weight: 400 !important;
    line-height: normal !important;
}

.package-content>:last-child {
    padding-top: 0.5rem !important;
    margin-bottom: -0.5rem !important;
}

.spec-dropdown-trigger {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: var(--semibold);
    border-top: var(--border);
    padding-block: 1.5rem;
    transition: color 0.2s ease;
}

.spec-dropdown-trigger:hover {
    color: var(--t7red);
}

.spec-dropdown-trigger i {
    transition: transform 0.2s ease;
}

.spec-dropdown-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.spec-dropdown {
    display: grid;
    transition: 0.2s ease-in-out;
    grid-template-rows: 0fr;
}

.spec-dropdown ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-top: 0;
}

.spec-dropdown[data-visible="true"] {
    grid-template-rows: 1fr;
}

.spec-disabled i {
    opacity: 1;
}

.spec-backup-daily {
    margin-top: 0rem !important;
}

.package-title {
    font-weight: 600 !important;
    text-align: left;
}

.gridcontainer {
    display: grid;
    gap: 1rem;
}

.grid-full {
    grid-column: 1 / -1;
}

@media (min-width: 901px) {
    .gridcontainer {
        grid-template-columns: repeat(12, 1fr);
    }

    .grid-3 {
        grid-column: span 3;
    }

    .grid-4 {
        grid-column: span 4;
    }

    .grid-6 {
        grid-column: span 6;
    }

    .grid-8 {
        grid-column: span 8;
    }

    .grid-9 {
        grid-column: span 9;
    }
}

.lagom-layout-top .app-nav-menu .menu>li.active>a:not(.btn):after {
    left: 11px !important;
    right: 11px !important;
    border-radius: 1rem 1rem 0 0;
}

.payment-form.payment-btn-container form {
    display: grid;
    gap: 1rem;
}

.main-header .breadcrumb li a:hover {
    color: var(--link-hover-color);
}

#layers body,
#layers .lu-app {
    font-family: Inter, sans-serif !important;
}

#layers .lu-tile {
    border-radius: 0.5rem !important;
    border-width: 2px !important;
}

.page-directadminextended #layers .lu-input-group__addon,
.page-directadminextended #layers2 .lu-input-group__addon {
    border: 0px !important;
}

.client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .input-group-btn .btn {
    height: auto !important;
    line-height: normal !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .3) inset;
    border: 0;
}

.btn {
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .3) inset !important;
    border: none !important;
}

.client-home-panels .panel-domain-register input[name=domain] {
    height: auto !important;
}

.btn:not(.btn-sm, .btn-xs),
input[type=button]:not(.btn, .btn-sm, .btn-xs),
input[type=submit]:not(.btn, .btn-sm, .btn-xs) {
    font-size: 0.9rem !important;
}

.cart-item-actions .btn.btn-icon {
    color: var(--paragraph-clr);
}

.btn-default.focus,
.btn-default:focus,
.btn-default:hover {
    color: #ffffff;
    background-color: var(--paragraph-clr);
    border-color: #00000000;
}

.btn-default:focus,
.btn-default:hover .filter-name {
    color: #ffffff;
}

.btn-default {
    color: var(--paragraph-clr);
}

.btn.btn-icon:active,
.btn.btn-icon:focus,
.btn.btn-icon:hover {
    background-color: var(--gray-light);
}

.lagom-layout-top .app-nav-menu .menu>li>a:not(.btn) {
    font-size: 0.9rem;
    color: var(--paragraph-clr);
}

.t7-navbar-icon {
    font-size: 1rem;
}

.lagom-layout-top .app-nav-menu .menu>li.active>a:not(.btn):after {
    display: none;
}

.badge-info,
.nav-badge {
    color: white;
    background-color: var(--brand-primary);
    border-radius: 0.25rem;
    font-weight: 700;
    padding: 0.3rem;
    min-width: 1.3rem;
    aspect-ratio: 1;
}

.btn-default i.ls-caret {
    color: black !important;
}

.badge:not(.nav-badge) {
    display: grid ;
    place-content: center ;
    background: var(--t7red) ;
    font-weight: 700 ;
    letter-spacing: 0.02rem ;
    line-height: normal ;
    border-radius: 0.3rem ;
}

.page-zendesk .panel[menuitemname="Ticket List Status Filter"] .badge {
    color: white !important;
}

.domain-renewal .btn>*,
.service-renewal .btn>* {
    transition: unset !important;
}

.app-nav-header .logo img[src$=jpg],
.app-nav-header .logo img[src$=png] {
    max-height: 30px;
}

.tile-icon-absolute {
    font-size: 1rem !important;
    top: 1rem !important;
    right: 1rem !important;
    color: #0000005c;
}

img.article-header-img {
    border-radius: 0.75rem;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    width: 100%;
}

.article-content .h4,
.article-content h4,
.markdown-content .h4,
.markdown-content h4 {
    font-weight: 600;
    margin-bottom: 0.5em !important;
}

.article-content,
.markdown-content {
    color: var(--paragraph-clr) !important;
}

.article-details > li {
    background: white;
    padding: 0.3rem 0.8rem;
    border-radius: 0.4rem;
    color: var(--paragraph-clr);
    box-shadow: var(--shadow);
}
.article-details > li > i { 
    color: var(--paragraph-clr);
}

.app-main:has(.article) .container {
    max-width: 60rem;
}
/* 
body:has(.invoice) .app-nav-header .container {
    height: max-content;
} 
*/

div.payment-form form input[type="submit"]:not(.btn) {
    background: hsl(142deg 80.85% 66.58%);
    border: hsl(142deg 80.85% 66.58%);
    color: black;
}

div.payment-form form input[type="submit"]:not(.btn):hover {
    background: black;
    border: black;
}

.payment-form.payment-btn-container {
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
}

.payment-form.payment-btn-container a {
    font-weight: 800;
    color: #ffffff !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.payment-form.payment-btn-container input {
    margin-top: 1rem !important;
}

.payment-form.payment-btn-container form {
    margin-bottom: 0;
    margin-top: 1rem;
}

.flex {
    display: flex;
}

.gap-1 {
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .order-summary-mob.is-fixed {
        display: block;
        position: fixed;
        background-color: white;
        padding: 1rem;
        left: 0;
        bottom: 0;
        z-index: var(--zindex-fixed);
        box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
    }
    .order-summary-mob .btn-checkout {
        border-radius: var(--btn-lg-border-radius);
    }
}

#t7-chat-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: .75rem 1.2rem 0.75rem 1rem;
    background-color: var(--t7red);
    box-shadow: var(--shadow-md);
    font-weight: 700;
    color: white;
    border: none;
    border-radius: 0.5rem;
    z-index: 999;
    transition: 0.2s ease;
    font-size: 1rem;


    &:hover {
        background-color: var(--t7red-lightest);
        color: var(--t7red-dark);
        transform: scale(1.05)translateY(-5px);
        box-shadow: 0 1px rgba(255,255,255,.3)inset,0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);
    }
}

body:has(.bottom-action-sticky.is-fixed:not(.hidden)) #t7-chat-button,
body:has(.bottom-action-sticky-t7:not(.hidden)) #t7-chat-button {
    bottom: calc(var(--bottom-action-sticky-height) + 20px);
}

body:has(.bottom-action-sticky.is-fixed:not(.hidden)) #t7-chat-window,
body:has(.bottom-action-sticky-t7:not(.hidden)) #t7-chat-window {
    bottom: calc(var(--bottom-action-sticky-height) + 0px);
}



.bottom-action-sticky.is-fixed {
    border-top: 1px solid hsl(0deg 0% 0% / 8%);
    background-color: var(--body-bg);
    box-shadow: var(--shadow-sm-reverse);
}

.main-footer {
    background: none;
    /* z-index: -10; */ 
    /* uitgezet vanwege language niet klikbaar */
}

.main-footer .footer-bottom {
    border-top: none;
}

.main-footer .footer-copyright {
    display: none;
    border-top: none;
}

.dropdown-menu-right {
    left: 0;
    right: auto;
}

.main-footer .footer-nav-h {
    align-items: center;
}

@media (max-width: 767.98px) {
    .main-footer .footer-bottom .footer-nav-h {
        flex-direction: row;
    }
}

.search-box-sm {
    padding: 1rem;
}


.cart-usp {
    display: flex;
    flex-wrap: wrap;
    padding: var(--panel-body-padding);
    row-gap: 1.5rem;
    column-gap: 3rem;
    color: #000;
    background-color: #fff;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--panel-summary-shadow);
    margin-bottom: var(--ui-block-spacing-base);
}

@media (max-width: 1260px) {
    .cart-usp {
        justify-content: flex-start;
    }
}

.cart-usp-rating a {
    font-weight: var(--bold);
}

.cart-usp-rating a:hover {
    text-decoration: underline;
}

.cart-usp-rating {
    display: flex;
    gap: 0.5rem;
}

.cart-usp-rating-stars {
    color: var(--t7green);
}

.panel-domain-search-primary .inline-form-element>.form-control {
    border: none;
}
.panel-domain-search-primary {
    background-image: url(https://www.theory7.net/Assets/red-bg.webp);
    background-size: cover;
    border-top: none !important;
}

/* store styling */

.section.products:has(.package-grid) {
    max-width: 1248px;
    position: relative;
}

.package-grid {
    position: relative;
    z-index: 40;
    display: grid;
    scroll-snap-type: x proximity;
    gap: 1.5rem;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17.5rem,1fr);
    overflow-x: auto;
    scrollbar-width: none;
    margin: -2rem;
    padding: 2rem;
    align-items: start;
    mask-image: linear-gradient(90deg,transparent .5rem,white 2rem,white calc(100% - 2rem),transparent calc(100% - .5rem))
}

.package-grid::-webkit-scrollbar {
    display: none
}

#package-left, #package-right {
    background-color: var(--t7red);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02rem;
    border-radius: 0.4rem;
    border: none;
    transition: 
        transform 0.2s ease-in-out,
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
    color: white;
    position: absolute;
    top: 45%;
    z-index: 50;
    mask-image: none;
    line-height: 0;
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 1rem;
    transition: 0.2s ease-in-out;
    /* background-color: hsl(0deg 72.41% 53.1% / 43%); */
    /* backdrop-filter: blur(7px); */
}

#package-left:disabled, #package-right:disabled {
    /* opacity: 0.2; */
    cursor: unset;
    background-color: var(--gray-light);
    box-shadow: none;
    color: var(--gray-dark);
}

#package-left:disabled:hover, #package-right:disabled:hover {
    transform: none;
}

#package-left:hover  {
    transform: scale(1.05) translateX(-5px);
    background-color: var(--t7red-lightest);
    color: var(--t7red-dark);
}

#package-right:hover {
    transform: scale(1.05) translateX(5px);
    background-color: var(--t7red-lightest);
    color: var(--t7red-dark);
}

#package-left {
    left: -1rem;
}

#package-right {
    right: -1rem;
}

@media (min-width: calc(1300px + 8rem)) {
    #package-left {
        left: -3rem;
    }
    
    #package-right {
        right: -3rem;
    }
}

.subtitle {
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--t7blue);
    letter-spacing: .175rem;
    margin-bottom: 0;
}

.package.no-package-select {
    color: hsl(0deg 0% 85%);

    .package-content {
        filter: blur(5px);
    }
}

.package.no-package-select .check-icon {
    color: hsl(0deg 0% 85%);
}

.package-title-container {
    display: grid;
    gap: .25rem
}

.package-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: normal;
}

.package-title span {
    font-size: 1.4rem;
    font-weight: 600;
    color: hsl(0deg 0% 0%/90%)
}

.package-no-discount {
    min-height: 25.59px;
}

.package {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    text-align: left;
    margin-bottom: 0;
    border-radius: .5rem;
    background-color: #fff;
    scroll-snap-align: center;
    box-shadow: var(--shadow-md);
    transition: transform .2s ease, box-shadow .2s ease;
}

.spec-dropdown ul 

.package .flex {
    align-items: center;
}

.flex-between {
    justify-content: space-between;
}

.package-content {
    line-height: normal;
}

.package strong {
    font-weight: 700;
}

.package ul:not(.package-features ul, .spec-dropdown ul) {
    list-style-type: none;
    font-size: var(--tiny-text);
    border-top: var(--border);
    padding: 1rem 0 0 0;
}

.package .package-side-left>:not(.label-corner)+*, .package>:not(.label-corner)+* {
    margin-top: 0;
}

.package-content>*+* {
    margin-top: 0;
}

.package-content>ul:not(.package-features ul, .spec-dropdown ul) {
    padding-top: 1.5rem;
}

.packagedescription {
    font-size: 1rem;
    color: var(--paragraph-clr)
}

.price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    line-height: normal;
}

.price-amount {
    font-size: 1.75rem;
    font-weight: var(--bold);
}
/* 
@view-transition {
    navigation: auto;
} */

/* .app-nav, .main-header {
    view-transition-name: navigation;
}

::view-transition-old(navigation) {
    animation: 0.3s ease both;
}

::view-transition-new(navigation) {
    animation: 0.3s ease both;
} */

/* .main-body {
    view-transition-name: mainbody;
} */

@keyframes move-out {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes move-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}

/* Apply the custom animation to the old and new page states */

/* ::view-transition-group(mainbody) {
    height: 100%;
    z-index: 5;
    width: 100%;
    transform-origin: right center;
} */

/* ::view-transition-old(mainbody) {
    animation: 0.5s ease both move-out;
} */

/* ::view-transition-new(mainbody) {
    animation: 0.5s ease both move-in;
} */

.price-cycle {
    font-weight: var(--semibold);
    color: var(--gray-dark);
    font-size: 1rem;
}

ul.top-nav:not(:has(.stepper)ul.top-nav) {
    background: white;
    border-radius: 0.5rem;
    padding: 0.3rem 0.5rem;
}

.background {
    top: 85px;
    left: 0;
    right: 0;
    z-index: -5;
    min-height: 55dvh;
    position: absolute;
    background-image: url(/modules/addons/linkdomain/assets/background.svg);
    background-size: 1.5rem;
}

.background::after {
    content: '';
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fafaf9);
}

.app-main:has(.article) .background {
    top: 55px;
}

.main-header {
    --main-header-padding-v: 2rem; 
    background: var(--body-bg);
    padding-block: var(--main-header-padding-v);
    z-index: 10;
}

.main-header:has(.stepper) {
    --main-header-padding-v: 1.5rem 2rem;
    box-shadow: var(--shadow-sm);
}

.lagom-layout-top .app-nav,
.app-nav-header {
    --mob-app-nav-header-bg: var(--body-bg);
    --app-nav-top-bg: var(--body-bg);
    --app-nav-navbar-bg: var(--body-bg);
    box-shadow: none;
    z-index: 15;
}

.main-header-title {
    font-weight: var(--semibold);
    --main-header-title-font-size: var(--font-size-h1);
}

.main-body {
    border-top: 1px solid hsl(0deg 0% 0% / 8%);
}

body:has(.stepper) #main-menu, body:has(.stepper) .app-nav-toggle.navbar-toggle {
    display: none;
}

.menu-primary .item-text {
    gap: 0.75rem;
    letter-spacing: 0.01rem;
    font-weight: 500;
}

.menu-primary .nav-item-text-only.active {
    color: var(--t7red);
}

.menu-primary .nav-item-text-only:hover {
    color: var(--t7red);
}

body:not(:has(.stepper)) .main-header {
    --main-header-padding-v: 1.5rem 0;
    background: none;
}

body:not(:has(.stepper)) .app-main {
    border-top: 1px solid hsl(0deg 0% 0% / 8%);
}

body:not(:has(.stepper)) .main-body {
    border-top: none;
}

body:not(:has(.stepper)) .app-nav-menu {
    box-shadow: var(--shadow-sm);
}

.main-header .breadcrumb, .main-header .breadcrumb li, .main-header .breadcrumb li a {
    font-weight: 500;
}

.lagom-layout-top .app-nav-menu .menu>li .dropdown-menu {
    top: 100%;
    left: unset;
    display: grid;
    gap: 0.4rem;
    padding: 0 0.8rem 0.8rem 0.8rem;
    background-color: #fafaf9;
    border-radius: 0 0 0.75rem 0.75rem;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: hsl(0deg 0% 0% / 8%);
    box-shadow: var(--shadow-sm);
}

.dropdown-menu .dropdown-item, .dropdown-menu .dropdown-menu-item>a, .dropdown-menu>li>a, .dropdown-menu li.nav-header-collapse>.nav-header-item {
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    background-color: #ffffff;
    font-weight: 400;
    border-radius: 0.4rem;
    justify-content: space-between;
}

.dropdown-item:focus, .dropdown-item:hover, .dropdown-menu-item>a:focus, .dropdown-menu-item>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    transform: scale(1.035);
    font-weight: 400;
    color: white;
    background-color: var(--t7red-light);
}

.dropdown-item:focus, .dropdown-item:hover, .dropdown-menu-item>a:focus, .dropdown-menu-item>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover .badge:not(.nav-badge) {
    background-color: white;
    color: var(--t7red);
}

ul.dropdown-menu.dropdown-lazy.has-scroll.dropdown-menu-right.show a {
    margin-inline: 0.8rem;
    justify-content: start;
}

@media (max-width: 991.98px) {
    .lagom:not(.nav-mobile-dropdown) .app-nav-menu .menu>li>a:not(.btn)>.notification-icon-container+.item-text, .lagom:not(.nav-mobile-dropdown) .app-nav-menu .menu>li>a:not(.btn)>i+.item-text, .lagom:not(.nav-mobile-dropdown) .app-nav-menu .menu>li>a:not(.btn)>img+.item-text, .lagom:not(.nav-mobile-dropdown) .app-nav-menu .menu>li>a:not(.btn)>svg+.item-text {
        margin-left: 0;
    }
}

.dropdown-item:focus>i, .dropdown-item:hover>i, .dropdown-menu-item>a:focus>i, .dropdown-menu-item>a:hover>i, .dropdown-menu>li>a:focus>i, .dropdown-menu>li>a:hover>i {
    color: white;
}

@media (max-width: 991.98px) {
    .lagom:not(.nav-mobile-dropdown) .app-nav-menu .menu>li>a:not(.btn)>.item-text {
        display: flex;
    }
}

@media (max-width: 991.98px) {
    .lagom:not(.nav-mobile-dropdown) .app-nav-menu .menu>li:not(.open)>a:not(.btn):hover {
        padding: 1rem 1.5rem;
    }
}

@media (min-width: 992px) {
    .lagom-layout-top .app-nav-menu .menu>li>a:not(.btn) {
        height: unset;
    }
}

.stepper {
    display: flex;
    gap: 1.4rem;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 475px) {
    .stepper {
        background-color: unset;
        margin-inline: -1rem;
    }

    .stepper .step.last {
        display: none;
    }
}

.step {
    display: flex;
    color: hsl(0deg 0% 0% / 45%);
    gap: 0.75rem;
    border-radius: 0.4rem;
    align-items: center;
    font-size: 0.9rem;
}

a:has(.step):hover .step{
    color: var(--paragraph-clr);
}

.step.done {
    color: var(--t7green);
    font-weight: 600;
}

.step.active {
    color: var(--t7blue);
    font-weight: 600;
}

.between {
    height: 2px;
    background-color: hsl(0deg 0% 0% / 15%);
    width: 100%;
    border-radius: 5rem;
}

.between.done {
    background: var(--t7green);
}

.between.active {
    background: linear-gradient(90deg, var(--t7green-light), var(--t7blue));
}

@media (max-width: 530px) {
    .between {
        display: none;
    }
}

@media (max-width: 530px) {
    .between {
        display: none;
    }
}

.checker-input {
    display: grid;
    max-width: 40rem;
    margin-inline: auto;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.2rem;
    background-color: #fff;
    border-radius: .75rem;
    padding: .5rem .5rem .5rem 1.2rem;
    transition: .2s ease-in-out;
    border: 1.5px solid hsl(0deg 0% 0% / 8%);
    box-shadow: var(--shadow-sm);
    z-index: 10;
    position: relative;
}

.checker-input:hover {
    box-shadow: var(--shadow);
    border-color: hsl(0deg 0% 0% / 20%);
}

.checker-input:focus-within {
    box-shadow: var(--shadow-md);
    border-color: hsl(0deg 0% 0% / 20%);
}

.checker-input i {
    font-size: 1.1rem;
    color: black;
}

.checker-input input,
.checker-input textarea {
    border: none;
    font-size: 1rem;
    height: 100%;
    padding: 0;
    font-weight: unset;
}

.checker-input textarea {
    padding: 0.25rem 0rem;
}

#btnToggleBulkMode {
    background: none;
    padding: 0.5rem;
    display: inline-flex;
    gap: 0.6rem;
    border: none;
    font-weight: 600;
    color: var(--t7blue);
    align-items: center;

    &:hover {
        color: var(--paragraph-clr);
    }
}

.pulse {
    animation: pulse-animation 1.5s ease infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 rgba(0,0,0,.2),var(--shadow-lg)
    }

    100% {
        box-shadow: 0 0 0 15px transparent,var(--shadow-lg)
    }
}

.confdomain-body {
    display: grid;
    gap: 3rem;
}

.clean-block {
    background-color: #fff;
    border-radius: .75rem;
    padding: 1.5rem;
    transition: .2s ease-in-out;
    border: 1.5px solid hsl(0deg 0% 0% / 8%);
    box-shadow: var(--shadow-sm);
}

.clean-block.subblock {
    background-color: var(--body-bg);
    padding-top: 3rem;
    margin-top: -1.5rem;
}

.clean-block:has(.domain-info) {
    position: relative;
    z-index: 10;
    border-color: hsl(0deg 0% 0% / 12%);
}

.clean-domain-body, .clean-block-body {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.t7drs-renewal-alert.clean-block {
    outline: 2px solid #dc354566;
    outline-offset: 1px;
}

.domain-availability-icon {
    font-size: 1.5rem;
}

.domain-availability-icon .fa-circle-check {
    color: var(--t7green);
}

.domain-availability-icon .fa-circle-minus {
    color: var(--t7orange);
}

.domain-availability-icon .fa-times-circle {
    color: var(--t7red);
}

.checker-input .btn-default {
    background-color: var(--paragraph-clr);
    color: white;
}

.checker-input .btn-default span i {
    color: white;
    transition: 0.2s ease;
}

.checker-input .btn-default:hover span i {
    color: var(--paragraph-clr);
}

.checker-input .btn-default:hover {
    background-color: var(--btn-default-bg);
    color: var(--paragraph-clr);
}

.checker-input .btn-default:active span i {
    color: var(--paragraph-clr);
    transform: scale(0.95);
}

.checker-input .btn-default:active {
    background-color: var(--btn-default-bg);
    color: var(--paragraph-clr);
    transform: scale(0.95);
}


.clean-block .btn-default span:has(i),
.checker-input .btn-default span:has(i),
.btn span:has(i) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.clean-block .btn-default span i,
.checker-input .btn-default span i,
.btn span i {
    font-size: 0.9rem;
    margin: 0;
}

.clean-domain-title {
    font-size: 1.2rem;
    color: black;
    display: grid;
}

#fastDomainResultsContainer .clean-block,
#fastSuggestedDomainsContainer .clean-block {
    animation: show 300ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
    opacity: 0;
    transform: translateX(1rem);
}

@keyframes show {
    100% {
        opacity: 1;
        transform: none;
    }
}

.domain-status-available,
.domain-status-unavailable,
.domain-tld-unavailable,
.domain-status-error {
    font-size: 0.9rem;
    font-weight: 500;
}

.domain-status-available {
    color: var(--t7green);
}

.domain-status-unavailable {
    color: var(--t7orange);
}

.clean-domain-body-left,
.clean-domain-body-right {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.clean-domain-body-left {
    gap: 1.5rem;
}

.clean-domain-body .price {
    font-size: 1.2rem;
}

#primaryLookupResult {
    display: grid;
    gap: 3rem;
}

.btn-add-to-cart,
.btn-add-to-cart-bulk {
    min-width: 9rem;
}

.btn-blue {
    background-color: var(--t7blue);
    color: white;
}

.btn-blue i {
    color: white;
}

.btn-blue:hover {
    background-color: var(--t7blue-lightest);
    color: var(--t7blue-dark);
}

.btn-blue:hover i {
    color: var(--t7blue-dark);
} 

#idnLanguageSelector {
    background-color: var(--body-bg);
    max-width: 40rem;
    margin-inline: auto;
    padding-top: 2rem;
    margin-top: -4rem;
    z-index: 0;
}

#frmDomainTransfer .form-group{
    margin: 0;
}

body:has(#frmDomainTransfer) .modal-backdrop.fade.show {
    display: none;
}

body:has(#frmDomainTransfer) #modal-epp-code {
    position: relative;
    z-index: 0;
    margin-top: -3rem;
    padding: 0 !important;
}

body:has(#frmDomainTransfer) .modal-content {
    background-color: var(--body-bg);
    max-width: 40rem;
    margin-inline: auto;
    padding-top: 2rem;
    z-index: 0;
}

body:has(#frmDomainTransfer) .modal-content>* {
    padding: 0;
}

body:has(#frmDomainTransfer) .modal-lg .modal-dialog {
    width: 100%;
}

@media (min-width: 480px) {
    body:has(#frmDomainTransfer) .modal-dialog {
        width: var(--modal-md);
        margin: 0;
    }
}

#modal-epp-code .form-tooltip {
    width: 100%;
}

#modal-epp-code label {
    font-weight: 600;
    color: var(--paragraph-clr);
}

:root {
    --modal-fade-transform: transform: translateY(-2rem);
}

.input-and-button {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto;
}

.text-button {
    border: none;
    background: none;
    padding: 0;
}

.text-button span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--t7blue);
}

.text-button:hover span {
    color: var(--paragraph-clr);
}

.domain-added {
    background: repeating-linear-gradient(135deg, white, white 5px, hsl(135deg 36.36% 95.69%) 3px, hsl(135deg 36.36% 95.69%) 6px);
    border-color: var(--t7green-light);
}

a:not(.btn).label-primary-faded.shimmer-grey, .domain-info-hosting .label {
    color: var(--paragraph-clr);
    padding: 0.4rem 0.8rem;
    font-weight: 600;
}

.domain-info-hosting .label-success {
    color: var(--t7green-dark);

}

.shimmer-grey.label-primary-faded[href]:focus, .shimmer-grey.label-primary-faded[href]:hover {
    background-color: var(--t7green-light);
}

.shimmer-grey {
    background: linear-gradient(-45deg, 
    hsla(0, 0%, 0%, 0.1) 40%, 
    hsl(142deg 71% 45% / 31%) 50%, 
    hsla(0, 0%, 0%, 0.1) 60%);
    background-size: 300%;
    background-position-x: 100%;
    animation: shimmer-anim 2.4s ease-in-out infinite;
}

@keyframes shimmer-anim {
    0% {
        background-position-x: 100%;
    }
    60% {
        background-position-x: 0%;
    }
    60.01%, 100% {
        background-position-x: 0%; /* Pause state */
    }
}


.domain-lookup-result.list-group {
    display: grid;
    gap: 1rem;
    box-shadow: none;
    background: none;
}

.list-group-item+.list-group-item {
    border-top-width: 1px;
}

.list-group-item:last-child {
    border-bottom: 1px solid hsl(0deg 0% 0% / 8%);
}

.domain-lookup-result.list-group .list-group-item .content {
    font-size: 1.2rem;
    color: black;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.domain-lookup-result.list-group .list-group-item .content .domain,
.domain-lookup-result.list-group .list-group-item .content .extension {
    color: black;
    font-weight: 600;
}

.domain-lookup-result .actions>.btn-add-to-cart, .domain-lookup-result .actions>.btn-group {
    min-width: 0;
}

.domain-lookup-result.list-group .price {
    font-size: 1.5rem;
    font-weight: 600;
}

.domain-suggestion .content i {
    font-size: 1.5rem;
}

@media (max-width: 767.98px) {
    .clean-domain-body, .clean-block-body, .clean-domain-body-right {
        flex-direction: column;
    }
}

@media (max-width: 450px) {
    .input-and-button {
        grid-template-columns: 1fr;
    }
}

#dashboard-notification {
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
    border-radius: 0.5rem;
    border: 0;
    border-left: 0.5rem solid var(--t7green);
    font-size: 0.9rem;
}

.dashboard-notification-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-notification-title h4 {
    font-weight: 400;
}

#productAddonsContainer {
    
    .panel-check .check>label {
        --panel-check-padding: 1.5rem;
    }

    .panel-check .check-content>span, .panel-check .check-title {
        font-size: 1.15rem;
    }

    .panel-check .check-desc {
        font-size: 0.9rem;
    }
}

#tos-checkbox {
    padding: var(--panel-body-padding);
    background-color: #fff;
    border-radius: var(--panel-border-radius);
    box-shadow: var(--panel-summary-shadow);
    margin-bottom: var(--ui-block-spacing-base);
}

@media (min-width: 992px) {
    .main-sidebar .sidebar-sticky-summary .panel-summary, .main-sidebar .sidebar-sticky-summary .panel-summary #producttotal, .main-sidebar .sidebar-sticky-summary .panel-summary .panel-body {
        overflow: unset;
    }
}



.form-group .form-control, input[type=password]:not(.form-control), input[type=text]:not(.form-control), select:not(.form-control),
input:-webkit-autofill, select:-webkit-autofill {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(8, 8, 8, 0.16) 0px 0px 0px 1px, rgba(8, 8, 8, 0.08) 0px 2px 5px 0px;
    border: 0;
    outline: 2px solid transparent;
    transition: 0.2s ease-in-out;
    /* height: calc(var(--ui-height-base) - 2px); */
    /* margin-top: 1px; */

    &:hover {
        outline: 2px solid var(--brand-primary-lighter-3);
    }

    &:focus {
        outline: 2px solid var(--input-focus-border-color);
    }
}

ul#t7Tabs {
    display: flex;
    align-items: center;
    max-width: max-content;
    padding: 0.5rem;
    gap: 0.5rem;
    background-color: hsl(252 31% 92% / 1);
    border-radius: 0.75rem;
    list-style: none;
    margin-bottom: 1rem;

    button {
        letter-spacing: 0.03rem;
        font-family: Inter, sans-serif, Open Sans, sans-serif;
        display: flex;
        gap: 0.5rem;
        align-items: center;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        background: hsl(0deg 0% 100% / 33%);
        padding: 0.5rem 1.4rem 0.5rem 1rem;
        font-weight: 500;
        border: 0;
        border-radius: 0.4rem;
        transition: 0.2s ease-in-out;
        position: relative;

        i.fa-globe {
            color: rgb(100, 103, 242);
        }

        &:hover {
            background: hsla(0, 0%, 100%, 0.705);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        &.active {
            background: white;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        &.btn-close {
            position: absolute;
            right: -0.5rem;
            top: -0.5rem;
            display: grid;
            place-content: center;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            border-radius: 10rem;
            background: #ffffff;
            color: #e41f11;
            padding: 0.3rem;
            aspect-ratio: 1;
            width: 1.5rem;
            font-size: 0.9rem;
            transform: scale(0.7);

            &:hover {
                background: #e41f11;
                color: white;
            }
        }
    }

    &:hover .btn-close {
        transform: scale(1);
    }

    .add-domain-btn {
        background-color: #28a745;
        color: white;
        border-color: #28a745;
        gap: 0;
        width: 1.8rem;
        padding: 0.2rem 0.25rem;
        border-radius: 3.3rem;
        aspect-ratio: 1;
        display: grid;
        place-content: center;

        /* &::before:not {
            content: "A";
            visibility: hidden;
            width: 0;
        } */

        &:hover {
            background-color: #218838;
            border-color: #1e7e34;
            color: white;
        }
    }
}

/* Start Payment gateway fees */

.lagom .whmp_pgf_tax_applying {
    background: none !important;
    font-size: var(--panel-summary-text-font-size);
    color: var(--text-body-color) !important;
    font-weight: 400;
    padding: 0 0 24px 0 !important;
    border-bottom: 2px solid var(--ui-block-divider-color) !important;
    width: 100%;
    text-align: unset !important;
    margin-bottom: 1rem;
}

.recurring-totals.product__summary__totals__item {
    display: flex;
    justify-content: space-between;
}

.whmp_pgf_tax_applying {
    display: none;

    &:has(.recurring-totals.product__summary__totals__item) {
        display: unset;
    }
}

/* End payment gateway fees */

/* DNSmanager fix */

.page-dnsmanager3 #layers .lu-widget .lu-table tbody tr td {
    word-break: break-word;
}

/* T7 reusable status bar components */

.t7-card {
    box-shadow: var(--panel-box-shadow);
    padding: 1.25rem;
    border-radius: 0.65rem;
    background-color: white;
    display: grid;
}

.t7-status-bar {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

@media (min-width: 901px) {
    .t7-status-bar {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.t7-status-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.5rem;
    background-color: hsl(0, 0%, 100%);
    flex-grow: 1;
    box-shadow: var(--panel-box-shadow);
}

.t7-status-bar > .t7-status-item:first-of-type {
    border-radius: 0.65rem 0.5rem 0.5rem 0.65rem;
}

.t7-status-bar > .t7-status-item:last-of-type {
    border-radius: 0.5rem 0.65rem 0.65rem 0.5rem;
}

.t7-status-item:has(form),
.t7-status-item--actions {
    gap: unset;
}

.t7-status-item form,
.t7-status-form {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

@media (max-width: 440px) {
    .t7-status-item form,
    .t7-status-form {
        flex-direction: column;
    }

    .t7-status-item form input,
    .t7-status-form input {
        width: 100%;
    }
}

.t7-status-content {
    display: grid;
}

.t7-status-label {
    opacity: 0.7;
    font-size: var(--font-size-base);
    font-weight: 500;
}

.t7-status-value {
    margin: 0;
    color: hsl(239, 86%, 60%);
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
}

.t7-status-icon {
    aspect-ratio: 1;
    border-radius: 0.35rem;
    margin: 0.3rem;
    background-color: hsla(250, 75%, 95%, 1);
    display: grid;
    place-items: center;
}

.t7-status-icon i {
    font-size: 1.1rem;
    color: hsl(239, 85%, 67%);
}

.t7-status-item--active .t7-status-value,
.t7-status-item--active .t7-status-icon i {
    color: hsl(131, 73%, 31%);
}

.t7-status-item--active .t7-status-icon {
    background-color: hsl(120deg 36.65% 88.58%);
    animation: t7-status-pulse 1.5s ease infinite;
}

.t7-status-item--paused .t7-status-value,
.t7-status-item--paused .t7-status-icon i {
    color: hsl(42.77deg 100% 38.5%);
}

.t7-status-item--paused .t7-status-icon {
    background-color: hsl(52, 38%, 89%);
}

.t7-status-item--inactive .t7-status-value,
.t7-status-item--inactive .t7-status-icon i {
    color: hsl(0deg 84.8% 34.31%);
}

.t7-status-item--inactive .t7-status-icon {
    background-color: hsl(0deg 100% 93.16%);
}

@keyframes t7-status-pulse {
    0% {
        box-shadow: 0 0 0 0px var(--t7green-light);
    }

    100% {
        box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
    }
}

/* T7 docs layout components */


.app-main:has(#t7DocsApp) {
    .main-header {
        display: none;
    }

    main {
        width: 1100px;
        margin-inline: auto;
        margin-top: 3rem;
    }

    .background {
        opacity: 0.3;
    }

    .main-body {
        padding: unset;
    }
}

.container:has(#t7DocsApp) {
    max-width: unset;
}

.t7-docs-wrap {
    display: grid;
    grid-template-columns: 288px 1fr;
    gap: 3rem;
}

.t7-docs-sidebar {
    padding-top: 3rem;
    padding-right: 3rem;
    border-right: 1px solid hsl(0deg 0% 0% / 8%);
}

.t7-docs-muted {
    color: #666;
}

.t7-docs-components-nav {
    display: grid;
    gap: 0.6rem;
    /* flex-wrap: wrap; */
}

.t7-docs-component-link {
    border: 1px solid var(--gray-medium);
    background: #fff;
    color: var(--paragraph-clr);
    border-radius: 0.45rem;
    padding: 0.45rem 0.8rem;
    font-weight: 600;
    transition: 0.2s ease-in-out;
    text-align: left;
}

.t7-docs-component-link:hover {
    background: var(--gray-lightest);
}

.t7-docs-component-link.is-active {
    border-color: var(--t7blue);
    color: var(--t7blue-dark);
    background: var(--t7blue-lightest);
}

.t7-docs-component-panel {
    display: none;
}

.t7-docs-component-panel.is-active {
    display: block;
}

.t7-docs-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5rem;
}

.t7-docs-code {
    background: hsl(0 0% 15% / 1);
    color: hsl(0deg 0% 100% / 90%);
    border-radius: 0.5rem;
    padding: 1rem;
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    margin-block: 1.5rem 2.5rem;
}


.t7-docs-section {
    margin-bottom: 3rem;
}


/* T7 input types components */

.t7-input-types-group {
    display: grid;
    gap: 0.75rem;
}

.t7-input-types-group--inline {
    display: flex;
    flex-wrap: wrap;
}

.t7-choice {
    position: relative;
}

.t7-choice-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.t7-choice-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: hsl(0 0% 100% / 0.5);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
        rgba(8, 8, 8, 0.16) 0px 0px 0px 1px,
        rgba(8, 8, 8, 0.08) 0px 2px 5px 0px;
    transition: 0.2s ease-in-out;
}

.t7-choice-label:hover {
    background-color: hsl(0 0% 100% / 0.8);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px,
        rgba(8, 8, 8, 0.2) 0px 0px 0px 1px,
        rgba(8, 8, 8, 0.1) 0px 3px 7px 0px;
}

.t7-choice-label::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-size: 1.25rem;
    color: #cbd5e1;
    transition: 0.2s ease-in-out;
}

.t7-choice--checkbox .t7-choice-label::before {
    content: "\f0c8";
}

.t7-choice--radio .t7-choice-label::before {
    content: "\f111";
}

.t7-choice-input:checked + .t7-choice-label {
    background-color: hsl(239 84% 96.7%);
    box-shadow: hsl(239 84% 67% / 0.2) 0px 1px 1px 0px,
        hsl(239 84% 67% / 0.3) 0px 0px 0px 2px,
        hsl(239 84% 67% / 0.15) 0px 2px 5px 0px;
}

.t7-choice--checkbox .t7-choice-input:checked + .t7-choice-label::before {
    content: "\f14a";
    color: var(--t7blue);
    font-weight: 900;
}

.t7-choice--radio .t7-choice-input:checked + .t7-choice-label::before {
    content: "\f192";
    color: var(--t7blue);
    font-weight: 900;
}

code {
    padding: 0.5rem;
    background-color: hsl(0 0% 15% / 1);
    color: hsl(0deg 0% 100% / 90%);
}

.btn-warning {
    color: hsl(40 100% 12% / 1);
    background: hsl(40 100% 76% / 1);
}