* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

:root {
    --menu-background-color: #F1F5F9;
    --menu-width: 300px;
    --collapsed-menu-width: 100px;
    --header-height: 100px;

    --grid-layout-gap: 45px;
    --grid-column-count: 4;
    --grid-item--min-width: 300px;

    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    --grid-large-card-size: 3;

    @media (max-width: 1750px) {
        --grid-large-card-size: 2;
    }

    @media (max-width: 1000px) {
        --grid-large-card-size: 1;
    }

    @media (max-width: 800px) {
        --menu-width: 100%;
        --grid-column-count: 1;
        --grid-item--min-width: 200px;
    }

}

.site-main {
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    background-color: white;
}

.content__container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas: "logo header"
                        "menu content";
    grid-template-columns: var(--collapsed-menu-width) calc(var(--menu-width) - var(--collapsed-menu-width)) 1fr;
    grid-template-rows: var(--header-height) 1fr;

    @media (max-width: 800px) {
        grid-template-areas: "logo"
                            "header"
                            "content";

        grid-template-columns: var(--menu-width);
        grid-template-rows: var(--header-height) var(--header-height);
        grid-auto-rows: 1fr;
    }
}

.main-content {
    grid-column: -2 / -2 !important;
    background-color: white;

    @media (max-width: 800px) {
        grid-column: auto;
    }
}

.main-content__content {
    display: block !important;
    height: 100%;
    position: relative; /*required to add a loading animation to the chat*/
}

.main-content__content > div {
    height: 100%;
}

@media screen and (min-width: 801px){
    .main-content-expanded {
        grid-column: -1 / -3 !important;
    }
}

.content__container * {
    color: black;
}

.dashboard-content {
    background-color: white;
}

.settings-card * {
    color: #475569;
}

.scroll-lock {
    overflow-y: hidden;
}

.arrow {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
}

.down-arrow {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.red-circle {
    border-radius: 50%;
    width: 11px;
    height: 11px;
    background-color: #E44141;
}

.settings-circle {
    position: absolute;
    top: 10px;
    left: 25px;
}

.settings-button.active {
    background-color: #F0FAFE !important;
    color: #1959A4 !important;
    border: 1px solid rgba(79, 198, 249, 0.25);
}

.text {
    font-family: Avenir Next;
    font-size: 20px;
    font-weight: 500;
}

td {
    text-align: center;
}

/*Invoices*/
.pmpro_invoice_wrap .pmpro_table {
    margin-top: 20px;
    border: 0;
}

.pmpro_invoice_wrap .pmpro_table td,
.pmpro_invoice_wrap .pmpro_table th {
    border: solid #CBD5E1;
    border-width: 0 1px 0 0;
    padding: 0;
}

@media screen and (max-width: 550px) {
    .pmpro_invoice_wrap .pmpro_table th:nth-child(2),
    .pmpro_invoice_wrap .pmpro_table th:nth-child(3),
    .pmpro_invoice_wrap .pmpro_table td:nth-child(2),
    .pmpro_invoice_wrap .pmpro_table td:nth-child(3) {
        display: none;
    }
}

.pmpro_invoice_wrap .pmpro_table td:last-child,
.pmpro_invoice_wrap .pmpro_table th:last-child {
    border-width: 0;
}

.dashboard-card {
    padding: 25px 37px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
}

.code-sample {
    padding: 12px 16px;
    background-color: #1E293B;
    box-shadow: 0 0 0 2px #3C9AFB;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.code-sample p {
    color: #F8FAFC;
    margin: 0;
    font-size: 13px;
    word-break: break-word;
    padding-right: 10px;
}

.code-sample .button {
    padding: 5px 10px;
    height: fit-content;
    display: flex;
    font-size: 12px;
}

.code-sample .button.chevron-right:after {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"><g clip-path="url(%23clip0_786_10544)"><path d="M8.25 9.09082L11.25 6.09082L8.25 3.09082" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.25 3.09082L1.25 6.09082L4.25 9.09082" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_786_10544"><rect width="12" height="12" fill="white" transform="translate(0.25 0.0908203)"/></clipPath></defs></svg>');
}

.code-sample span.green {
    color: #2FC737;
}

.code-sample span.red {
    color: #EA1119;
}