@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: light-dark(var(--mantine-color-bg_light-1), var(--mantine-color-bg_dark-1)) !important;
}

* {
    font-family: 'Noto Sans', sans-serif;
}

body .mantine-Paper-root {
    background-color: light-dark(var(--mantine-color-base_light-1), var(--mantine-color-base_dark-1))
}

.mantine-ActionIcon-root {
    background-color: light-dark(var(--mantine-color-base_light_lighter-1), var(--mantine-color-base_dark_lighter-1));

    &:hover {
        background-color: light-dark(var(--mantine-color-base_light_lighter-1), var(--mantine-color-base_dark_lighter-1));
    }
}

.mantine-Tabs-list {
    &::before {
        content: none !important;
    }
}

.navbar_tab {
    font-size: 1rem;
    padding-bottom: 1rem;
    margin-right: 1.4rem;
    transition: all 0.2s ease-in-out;
    color: #999 !important;

    &:hover {
        background-color: transparent;
    }

    &:where([data-active]) {
        border-color: #fff;
        color: #fff !important;
    }

    &-mobile {
        border: none !important;
    }
}


.mantine-TextInput-wrapper .main-search-bar {
    font-size: 14px !important;
    border: 1px solid var(--mantine-color-base_dark_lighter-1) !important;

    &::placeholder {
        font-size: 14px;
        position: relative;
        top: -0.1rem;
        color: #8a8a8a !important;
    }
}

.live-logs .log-search-input {
    border: light-dark(1px solid var(--mantine-color-base_light_lighter-1), 1px solid var(--mantine-color-base_dark_lighter-1)) !important;

    &::placeholder {
        position: relative;
        top: -0.1rem;
    }
}

.pulsating-circle {
    position: relative;
    width: 10px;
    height: 10px;

    &:before {
        content: '';
        position: relative;
        display: block;
        width: 200%;
        height: 200%;
        box-sizing: border-box;
        margin-left: -50%;
        margin-top: -50%;
        border-radius: 45px;
        background-color: #01a4e9;
        animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }

    &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--mantine-color-green-6);
        border-radius: 15px;
        box-shadow: 0 0 8px rgba(0, 0, 0, .3);
        animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(.1);
    }

    80%,
    100% {
        opacity: 0;
    }
}

@keyframes pulse-dot {
    0% {
        transform: scale(.6);
    }

    50% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(.6);
    }
}


.logs-row {
    position: relative;
    z-index: 1;
}

code {
    font-family: 'Courier New', Courier, monospace !important;
}

.logs-row:nth-child(even) {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        background-color: #000;
        opacity: 0.09;
        z-index: -1;
        border-radius: 6px;
    }
}

.mantine-Notification-root::before {
    content: none !important;
}

.pointer {
    cursor: pointer;
}

.mantine-Modal-content .mantine-Input-input {
    background-color: light-dark(#f1f1f1, #2E2E2E);
}

.mantine-TextInput-input {}

body .mantine-CodeHighlight-root {
    border-radius: 10px;
    background: light-dark(#fff, #171717);
}

.table_bg {
    background-color: light-dark(#f0f0f0, #171717) !important;
    overflow: hidden;
}

table td {
    position: relative;
    z-index: 1;
}

table th {
    font-weight: 400;
}

table th:first-child {
    border-radius: 10px 0 0 10px;
}

table th:last-child {
    border-radius: 0 10px 10px 0;
}

.mantine-Table-tr {
    position: relative;

    &::before {
        transition: all 0.15s ease-in-out;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: light-dark(var(--mantine-color-base_light_lighter-1), #1F1F1F);
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: -1;
        border-radius: 10px;
        overflow: hidden;
    }

    &:hover:not(.table_head) {

        &::before {
            opacity: 1;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
    }
}

.mantine-Menu-dropdown {
    border: none !important;
    background-color: light-dark(#f1f1f1, #0e0e0e) !important;
    box-shadow: light-dark(rgba(153, 153, 153, 0.2) 0px 7px 10px 0px, rgba(27, 27, 27, 0.2) 0px 7px 10px 0px) !important;
}

.mantine-Menu-item:hover {
    border-radius: 8px !important;
    background-color: light-dark(rgba(153, 153, 153, 0.2), rgba(44, 44, 44, 0.2)) !important;
}

.mantine-Select-input {
    background-color: light-dark(#fff, var(--mantine-color-base_dark_lighter-1)) !important;
}

.mantine-Select-dropdown {
    box-shadow: light-dark(rgba(153, 153, 153, 0.2) 0px 7px 10px 0px, rgba(27, 27, 27, 0.2) 0px 7px 10px 0px) !important;
}

.license-row {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        pointer-events: none;
        top: 34%;
        left: -1.5rem;
        bottom: 0;
        width: 0.8rem;
        height: 1.2rem;
        border-radius: 20px;
        z-index: 1;
    }
}

.license-row.license-active::after {
    background-color: var(--mantine-color-green-6);
}

.license-row.license-inactive::after {
    background-color: var(--mantine-color-red-6);
}

.license-row.license-expired::after {
    background-color: var(--mantine-color-dimmed);
}

.license-row.license-cancelled::after {
    background-color: var(--mantine-color-red-8);
}

.license-row.license-revoked::after {
    background-color: var(--mantine-color-red-8);
}

.license-row.license-max_ips::after {
    background-color: var(--mantine-color-red-8);
}

.license-row.license-pending::after {
    background-color: var(--mantine-color-yellow-4);
}

.product-card {
    background-color: light-dark(var(--mantine-color-base_light-1), var(--mantine-color-base_dark-1));
}

.mantine-HoverCard-dropdown {
    border: none !important;
}

.radar-paper {
    transition: all 0.05s ease-in-out;

}

.live-log-flash {
    position: relative;
}

.live-log-flash::before {
    content: '';
    position: absolute;
    display: block;
    width: 200%;
    height: 300%;
    top: 25%;
    box-sizing: border-box;
    border-radius: 100px;
    margin-left: -50%;
    margin-top: -50%;
    border-radius: 45px;
    background-color: rgb(42, 238, 25, 0.3);
    opacity: 0.1;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

code {
    letter-spacing: 0rem;
}

.basic-card {
    transition: all 0.15s ease-in-out;

    &:hover {
        transform: translateY(-0.2rem);
    }
}

body .post-request-kbd {
    border-radius: 5px;
    background-color: var(--mantine-color-blue-6);
    color: var(--mantine-color-base_light-1);
    border: none;
}

.mantine-CodeHighlightTabs-root {
    border-radius: 10px !important;
    overflow: hidden;
}

.mantine-CodeHighlightTabs-header {
    background-color: light-dark(var(--mantine-color-base_light_lighter-1), var(--mantine-color-base_dark_lighter-1)) !important;
    padding-left: 1rem;
    padding-top: 0.7rem;
    border-radius: 10px 10px 0 0;
}

.mantine-CodeHighlightTabs-files {
    gap: 1.4rem;
}

.mantine-CodeHighlightTabs-file {
    span {
        font-size: 0.8rem;
    }

    &[data-active] {
        color: var(--mantine-color-primary-6);
    }
}

.integration-process {
    .mantine-CodeHighlightTabs-codeWrapper {
        background-color: light-dark(#E9E9E9, #171717);
    }
}

.mantine-CodeHighlightTabs-controls {
    margin: 0;
    position: relative;
    top: 2.6rem;
    right: 1rem;
    z-index: 2;
}


.mantine-CodeHighlightTabs-codeWrapper code {
    font-family: 'IBM Plex Mono', monospace !important;
}

.transition-all {
    transition: all 0.15s ease-in-out;
}

.loginPaper {
    border-radius: 0 15px 15px 0 !important;

    @media (max-width: 1023px) {
        border-radius: 15px !important;
    }
}

.live-logs-header {
    flex-wrap: nowrap;

    @media (max-width: 1023px) {
        flex-wrap: wrap;
    }
}

.recharts-tooltip-cursor {
    stroke: rgb(206, 206, 206, 0.6);
}