/* =========================================================
   TRIBBBLE GLOBAL HEADER
   Premium / Responsive / User + Admin
========================================================= */

:root{
    --tb-primary:#4f46e5;
    --tb-primary-dark:#4338ca;

    --tb-text:#172033;
    --tb-muted:#667085;

    --tb-border:#e7eaf0;
    --tb-bg:#ffffff;
    --tb-hover:#f5f6fa;

    --tb-header-height:72px;

    --tb-shadow:
        0 1px 0 rgba(16,24,40,.04),
        0 4px 18px rgba(16,24,40,.05);
}


/* =========================================================
   GLOBAL HEADER
========================================================= */

.tb-header{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;

    background:rgba(255,255,255,.97);

    border-bottom:1px solid var(--tb-border);

    box-shadow:var(--tb-shadow);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-sizing:border-box;
}


/* =========================================================
   HEADER INNER
========================================================= */

.tb-header-inner{
    width:100%;
    max-width:1440px;

    height:var(--tb-header-height);

    margin:0 auto;
    padding:0 28px;

    display:grid;

    grid-template-columns:
        minmax(190px,1fr)
        minmax(320px,620px)
        minmax(190px,1fr);

    align-items:center;

    gap:24px;

    box-sizing:border-box;
}


/* =========================================================
   BRAND
========================================================= */

.tb-brand{
    width:max-content;
    max-width:100%;

    display:inline-flex;
    align-items:center;

    gap:10px;

    color:var(--tb-text);

    text-decoration:none;

    font-weight:800;

    min-width:0;
}

.tb-brand-mark{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );

    box-shadow:
        0 6px 16px rgba(79,70,229,.24);
}

.tb-brand-logo{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    background:#fff;
}

.tb-brand-fallback{
    color:#fff;

    font-size:20px;
    font-weight:800;
}

.tb-brand-text{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:22px;
    letter-spacing:-.5px;
}


/* =========================================================
   SEARCH
========================================================= */

.tb-search{
    position:relative;

    width:100%;
    height:46px;

    display:flex;
    align-items:center;

    background:#f4f5f7;

    border:1px solid transparent;

    border-radius:13px;

    box-sizing:border-box;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.tb-search:focus-within{
    background:#fff;

    border-color:#c7c9ff;

    box-shadow:
        0 0 0 4px rgba(79,70,229,.08);
}

.tb-search-icon{
    width:20px;
    height:20px;

    flex:0 0 20px;

    margin-left:16px;

    fill:none;

    stroke:#667085;

    stroke-width:1.9;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.tb-search input{
    width:100% !important;
    height:100%;

    min-width:0;

    margin:0 !important;

    padding:0 16px 0 11px !important;

    border:0 !important;
    outline:0;

    background:transparent !important;

    color:var(--tb-text);

    font-family:inherit;
    font-size:14px;

    box-sizing:border-box;
}

.tb-search input::placeholder{
    color:#98a2b3;
}


/* =========================================================
   ACTIONS
========================================================= */

.tb-actions{
    min-width:0;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:5px;
}

.tb-icon-button{
    position:relative;

    width:42px;
    height:42px;

    min-width:42px;

    margin:0 !important;
    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    color:#344054;

    text-decoration:none;

    box-sizing:border-box;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.tb-icon-button:hover{
    background:var(--tb-hover);

    color:var(--tb-primary);

    transform:translateY(-1px);
}

.tb-icon-button svg{
    width:21px;
    height:21px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   NOTIFICATION BADGE
========================================================= */

.tb-notification-badge{
    position:absolute;

    top:1px;
    right:0;

    min-width:18px;
    height:18px;

    padding:0 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:#ef4444;
    color:#fff;

    border:2px solid #fff;

    font-size:9px;
    line-height:1;
    font-weight:800;

    box-sizing:border-box;
}


/* =========================================================
   PROFILE
========================================================= */

.tb-profile{
    position:relative;

    margin-left:3px;
}

.tb-profile-trigger{
    width:auto !important;
    min-width:0;

    height:46px;

    margin:0 !important;

    padding:3px 6px 3px 3px !important;

    display:flex;
    align-items:center;

    gap:6px;

    border:1px solid transparent !important;

    border-radius:14px;

    background:transparent !important;

    color:inherit;

    cursor:pointer;

    box-sizing:border-box;
}

.tb-profile-trigger:hover{
    background:var(--tb-hover) !important;

    border-color:#eceef3 !important;
}

.tb-avatar{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:50%;

    background:#eef2ff;
    color:#4338ca;

    font-size:12px;
    font-weight:800;
}

.tb-avatar img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.tb-profile-chevron{
    width:15px;
    height:15px;

    fill:none;

    stroke:#667085;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.tb-profile-menu{
    position:absolute;

    top:calc(100% + 10px);
    right:0;

    width:270px;

    padding:8px;

    background:#fff;

    border:1px solid var(--tb-border);

    border-radius:16px;

    box-shadow:
        0 20px 50px rgba(16,24,40,.14),
        0 4px 12px rgba(16,24,40,.06);

    box-sizing:border-box;

    animation:tbDropdownIn .16s ease;
}

.tb-profile-menu[hidden]{
    display:none;
}

@keyframes tbDropdownIn{

    from{
        opacity:0;
        transform:translateY(-5px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.tb-profile-head{
    display:flex;
    align-items:center;

    gap:11px;

    padding:10px 9px;
}

.tb-profile-head-avatar{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:50%;

    background:#eef2ff;
    color:#4338ca;

    font-size:12px;
    font-weight:800;
}

.tb-profile-head-avatar img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.tb-profile-head-info{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:3px;
}

.tb-profile-head-info strong{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--tb-text);

    font-size:14px;
}

.tb-profile-head-info span{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--tb-muted);

    font-size:12px;
}

.tb-menu-divider{
    height:1px;

    margin:6px 2px;

    background:#eef0f4;
}

.tb-menu-item{
    min-height:43px;

    display:flex;
    align-items:center;

    gap:11px;

    padding:0 10px;

    border-radius:10px;

    color:#344054;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    box-sizing:border-box;

    transition:
        background .16s ease,
        color .16s ease;
}

.tb-menu-item:hover{
    background:#f6f7fb;

    color:var(--tb-primary);
}

.tb-menu-item svg{
    width:19px;
    height:19px;

    flex:0 0 19px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.tb-danger-item:hover{
    color:#dc2626;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.tb-mobile-menu-button{
    display:none;

    width:42px;
    height:42px;

    min-width:42px;

    margin:0 !important;
    padding:0 !important;

    align-items:center;
    justify-content:center;

    border:0 !important;

    border-radius:12px;

    background:transparent !important;

    color:#344054;

    cursor:pointer;

    box-sizing:border-box;
}

.tb-mobile-menu-button:hover{
    background:var(--tb-hover) !important;
}

.tb-mobile-menu-button svg{
    width:24px;
    height:24px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.9;

    stroke-linecap:round;
}


/* =========================================================
   MOBILE DRAWER
========================================================= */

.tb-mobile-overlay{
    position:fixed;

    inset:0;

    z-index:1090;

    background:rgba(15,23,42,.42);

    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}

.tb-mobile-overlay[hidden]{
    display:none;
}

.tb-mobile-drawer{
    position:fixed;

    top:0;
    left:0;
    bottom:0;

    z-index:1100;

    width:min(330px,88vw);

    padding:18px;

    background:#fff;

    box-shadow:
        20px 0 50px rgba(15,23,42,.16);

    transform:translateX(-105%);

    transition:transform .24s ease;

    overflow-y:auto;

    box-sizing:border-box;
}

.tb-mobile-drawer.is-open{
    transform:translateX(0);
}

.tb-mobile-drawer-head{
    min-height:52px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.tb-mobile-user{
    min-width:0;

    display:flex;
    align-items:center;

    gap:11px;
}

.tb-mobile-avatar{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:50%;

    background:#eef2ff;
    color:#4338ca;

    font-size:13px;
    font-weight:800;
}

.tb-mobile-avatar img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.tb-mobile-user > div{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:3px;
}

.tb-mobile-user strong{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--tb-text);

    font-size:15px;
}

.tb-mobile-user span{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--tb-muted);

    font-size:12px;
}

.tb-mobile-close{
    width:40px;
    height:40px;

    min-width:40px;

    margin:0 !important;
    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0 !important;

    border-radius:11px;

    background:transparent !important;

    color:#667085;

    cursor:pointer;
}

.tb-mobile-close:hover{
    background:var(--tb-hover) !important;

    color:#172033;
}

.tb-mobile-close svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
}

.tb-mobile-divider{
    height:1px;

    margin:17px 0;

    background:#edf0f4;
}


/* =========================================================
   MOBILE NAV
========================================================= */

.tb-mobile-nav{
    display:flex;
    flex-direction:column;

    gap:4px;
}

.tb-mobile-nav > a{
    min-height:48px;

    display:flex;
    align-items:center;

    gap:14px;

    padding:0 13px;

    border-radius:12px;

    color:#344054;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    box-sizing:border-box;

    transition:
        background .16s ease,
        color .16s ease;
}

.tb-mobile-nav > a:hover,
.tb-mobile-nav > a:active{
    background:#f4f5ff;

    color:var(--tb-primary);
}

.tb-mobile-nav > a > svg,
.tb-mobile-nav-icon-wrap > svg{
    width:21px;
    height:21px;

    flex:0 0 21px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.tb-mobile-nav-icon-wrap{
    position:relative;

    width:21px;
    height:21px;

    flex:0 0 21px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.tb-mobile-nav-badge{
    position:absolute;

    top:-7px;
    right:-9px;

    min-width:16px;
    height:16px;

    padding:0 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:#ef4444;
    color:#fff;

    border:2px solid #fff;

    font-size:8px;
    font-weight:800;

    box-sizing:border-box;
}

.tb-mobile-nav-divider{
    height:1px;

    margin:9px 5px;

    background:#edf0f4;
}

.tb-mobile-danger{
    color:#dc2626 !important;
}

.tb-mobile-danger:hover{
    background:#fff1f2 !important;

    color:#b91c1c !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

    .tb-header-inner{
        grid-template-columns:
            minmax(160px,1fr)
            minmax(250px,480px)
            minmax(160px,1fr);

        padding:0 18px;

        gap:14px;
    }

    .tb-brand-text{
        font-size:20px;
    }

    .tb-actions{
        gap:2px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .tb-header{
        position:sticky;

        top:0;

        z-index:1000;
    }


    .tb-header-inner{

        width:100%;

        height:64px;

        padding:0 10px;

        display:flex;
        align-items:center;

        gap:8px;

        box-sizing:border-box;
    }


    /* Hamburger */

    .tb-mobile-menu-button{
        display:flex;

        flex:0 0 42px;
    }


    /* Brand */

    .tb-brand{
        flex:1 1 auto;

        min-width:0;

        gap:8px;
    }


    .tb-brand-mark{
        width:38px;
        height:38px;

        flex:0 0 38px;

        border-radius:11px;
    }


    .tb-brand-text{
        max-width:120px;

        font-size:19px;
    }


    /* Hide desktop search */

    .tb-search{
        display:none !important;
    }


    /* Actions */

    .tb-actions{
        flex:0 0 auto;

        display:flex;

        align-items:center;

        justify-content:flex-end;

        gap:2px;
    }


    .tb-icon-button{
        width:40px;
        height:40px;

        min-width:40px;
    }


    .tb-icon-button svg{
        width:22px;
        height:22px;
    }


    /* Hide profile on mobile */

    .tb-profile{
        display:none !important;
    }


    /* Badge */

    .tb-notification-badge{
        top:0;
        right:-1px;

        min-width:17px;
        height:17px;

        font-size:8px;
    }


    /* Prevent body horizontal overflow */

    body.tb-mobile-menu-open{
        overflow:hidden;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:430px){

    .tb-header-inner{
        padding:0 7px;

        gap:5px;
    }


    .tb-mobile-menu-button{
        width:40px;
        height:40px;

        min-width:40px;
    }


    .tb-brand{
        gap:7px;
    }


    .tb-brand-mark{
        width:36px;
        height:36px;

        flex-basis:36px;

        border-radius:10px;
    }


    .tb-brand-text{
        max-width:105px;

        font-size:18px;
    }


    .tb-icon-button{
        width:38px;
        height:38px;

        min-width:38px;
    }


    .tb-icon-button svg{
        width:21px;
        height:21px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:360px){

    .tb-header-inner{
        padding:0 5px;

        gap:3px;
    }


    .tb-brand-text{
        display:none;
    }


    .tb-mobile-menu-button{
        width:38px;
        height:38px;

        min-width:38px;
    }


    .tb-icon-button{
        width:36px;
        height:36px;

        min-width:36px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.tb-header a:focus-visible,
.tb-header button:focus-visible,
.tb-header input:focus-visible{

    outline:3px solid rgba(79,70,229,.20);

    outline-offset:2px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    .tb-header *,
    .tb-header *::before,
    .tb-header *::after{

        animation:none !important;

        transition:none !important;
    }

}
/* =========================================================
   FINAL MOBILE DRAWER FIX
   Must be placed at the VERY END of header.css
========================================================= */

@media (max-width: 700px) {

    /* Header must stay above page content */
    .tb-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
        isolation: isolate;
    }

    /* Dark overlay */
    .tb-mobile-overlay {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        z-index: 100000 !important;

        display: block;
        background: rgba(15, 23, 42, 0.42);

        pointer-events: auto;
    }

    .tb-mobile-overlay[hidden] {
        display: none !important;
    }

    /* MOBILE DRAWER */
    .tb-mobile-drawer {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;

        width: min(330px, 88vw) !important;
        max-width: 330px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        padding: 18px !important;

        box-sizing: border-box !important;

        background: #ffffff !important;

        z-index: 100001 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: translate3d(-105%, 0, 0) !important;

        visibility: hidden;

        opacity: 1;

        transition:
            transform 0.25s ease,
            visibility 0s linear 0.25s !important;

        -webkit-overflow-scrolling: touch;
    }

    /* OPEN STATE */
    .tb-mobile-drawer.is-open {
        transform: translate3d(0, 0, 0) !important;

        visibility: visible;

        transition:
            transform 0.25s ease,
            visibility 0s linear 0s !important;
    }

    /* Drawer content must remain above everything */
    .tb-mobile-drawer,
    .tb-mobile-drawer * {
        pointer-events: auto;
    }

    /* Prevent page from moving behind menu */
    body.tb-mobile-menu-open {
        overflow: hidden !important;
        height: 100%;
        touch-action: none;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 430px) {

    .tb-mobile-drawer {
        width: min(310px, 86vw) !important;
        max-width: 310px !important;

        padding: 16px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .tb-mobile-drawer {
        width: 290px !important;
        max-width: 86vw !important;
    }

}

/* =========================================================
   NOTIFICATION DROPDOWN
========================================================= */

.tb-notification-wrap {
    position: relative;
    flex: 0 0 auto;
}


.tb-notification-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 370px;
    max-width: calc(100vw - 24px);

    background: #fff;

    border: 1px solid #e3e7ee;
    border-radius: 14px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, .16),
        0 4px 12px rgba(15, 23, 42, .06);

    overflow: hidden;

    z-index: 99999;
}


.tb-notification-dropdown[hidden] {
    display: none !important;
}


/* HEADER */

.tb-notification-dropdown-head {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 15px;

    border-bottom: 1px solid #edf0f4;
}


.tb-notification-dropdown-head strong {
    color: #182230;

    font-size: 15px;
    font-weight: 700;
}


.tb-notification-mark-form {
    margin: 0;
}


.tb-notification-mark-form button {
    width: auto;

    margin: 0;
    padding: 5px;

    border: 0;
    background: transparent;

    color: #4f46e5;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


/* ITEMS */

.tb-notification-items {
    max-height: 390px;

    overflow-y: auto;
}


.tb-notification-item {
    border-bottom: 1px solid #f0f2f5;
}


.tb-notification-item.is-unread {
    background: #f7f8ff;
}


.tb-notification-item-link {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px 14px;

    color: #182230;

    text-decoration: none;
}


.tb-notification-item-link:hover {
    background: #f8f9fc;
}


/* ICON */

.tb-notification-item-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef1ff;

    font-size: 17px;
}


/* CONTENT */

.tb-notification-item-content {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.tb-notification-item-content strong {
    color: #182230;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 600;
}


.tb-notification-item-content small {
    color: #667085;

    font-size: 11px;
    line-height: 1.3;
}


/* UNREAD DOT */

.tb-notification-unread {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    margin-top: 6px;

    border-radius: 50%;

    background: #4f46e5;
}


/* SEE ALL */

.tb-notification-see-all {
    display: block;

    padding: 13px;

    text-align: center;

    background: #fafbfc;

    border-top: 1px solid #edf0f4;

    color: #4f46e5;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


.tb-notification-see-all:hover {
    background: #f5f6ff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .tb-notification-wrap {
        position: static;
    }


    .tb-notification-dropdown {

        position: fixed;

        top: 72px;

        left: 12px;
        right: 12px;

        width: auto;
        max-width: none;

        border-radius: 14px;

        z-index: 99999;
    }


    .tb-notification-items {
        max-height: calc(100vh - 170px);
    }

}


@media (max-width: 400px) {

    .tb-notification-dropdown {

        top: 68px;

        left: 8px;
        right: 8px;

        border-radius: 13px;
    }

}
/* =========================================================
   NOTIFICATION BUTTON - KEEP NORMAL ICON COLOR
========================================================= */

.tb-notification-button:hover,
.tb-notification-wrap.is-open .tb-notification-button,
.tb-notification-wrap.is-open .tb-notification-button:hover {
    background: var(--tb-hover) !important;
    color: #344054 !important;
    transform: none !important;
}

.tb-notification-button svg {
    stroke: currentColor !important;
}
/* =========================================================
   NOTIFICATION BUTTON - OVERRIDE GLOBAL APP BUTTON STYLE
========================================================= */

.tb-notification-button,
.tb-notification-button:visited,
.tb-notification-button:focus,
.tb-notification-button:active {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: transparent !important;

    color: #344054 !important;

    box-shadow: none !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tb-notification-button:hover {
    background: var(--tb-hover) !important;
    color: #344054 !important;
    transform: none !important;
}

.tb-notification-button:focus-visible {
    background: transparent !important;
    color: #344054 !important;
    outline: 3px solid rgba(79,70,229,.20) !important;
    outline-offset: 2px;
}

.tb-notification-button svg {
    stroke: currentColor !important;
}
.tb-icon-button{
    position:relative;

    width:42px;
    height:42px;
    min-width:42px;

    margin:0 !important;
    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0 !important;
    border-radius:12px;

    background:transparent !important;
    color:#344054;

    text-decoration:none;

    box-sizing:border-box;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}