:root {
    --pacman-gray-1: #DEE2E6;
    --pacman-gray-2: #E9ECEF;
    --pacman-bg: #fff;
    --pacman-bg-2: #fff;
    --accent-orange: #ff6f3c;

    --card-bg: var(--pacman-gray-2);
    --card-bg-hover: var(--pacman-gray-1);
    --icon-bg: var(--accent-orange);
    --text-main: #0a0a0a;
    --text-sub: #555;
    --meta-bg: #e8ecef;
    --meta-text: #444;
    --gap: 24px;

    
}

/* Theme edits */
.BaseApp_ViewRegion {
    border-top: 1px solid var(--pacman-gray-1);
}

.WebApp.WebContainer {
    background-color: var(--pacman-bg);
}

.WebInlineView > div > div > div > .WebCon_ContentWrp{
    background-color: var(--pacman-bg-2);
}

.df-ModeDesktop .WebInlineView>div.WebContainer {
    padding: 0px 10px;
}

.WebMenuBar {
    background-color: var(--pacman-bg);
    height: 100%;
}

.WebMenuBar ul.WebBarRoot>li {
    color: var(--text-main);
}

.WebMenuBar.WebControl > div.WebCon_Inner {
    height: 100%;
    align-content: center;
}

.WebMenuBar.Web_Enabled ul.WebBarRoot>li:hover>div, .WebMenuBar ul.WebBarRoot>li.WebItm_Expanded>div {
    background-color: transparent;
}

.WebMenuBar ul.WebBarRoot>li>div>a, .WebMenuBar ul.WebBarRoot>li.WebItm_Expanded>div>a {
    font-weight: bold;
}

.WebMenuBar ul.WebBarRoot>li:hover>div>a, .WebMenuBar ul.WebBarRoot>li.WebItm_Expanded>div>a {
    color: var(--accent-orange);

    -webkit-transition: color .5s ease;
    -moz-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease
}

/* Main items */
.side-menu {
    border-right: 1px solid var(--pacman-gray-1);
}

/* GRID LAYOUT */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: var(--gap);
    padding: 16px;
}

/* CARD */
.grid-card {
    background: transparent;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

/* HEADER */
.grid-card-header {
    background: var(--card-bg);
    display: flex;
    padding: 16px;
    gap: 14px;
    align-items: center;
}

.grid-card:hover .grid-card-header,
.grid-card:hover .grid-card-meta {
    cursor: pointer;

    background-color: var(--card-bg-hover);
    /* -webkit-box-shadow: inset 10px 0px 5px 0px #FF5F1F;  */
    /* box-shadow: inset 10px 0px 5px 0px #FF5F1F; */
    border-left: 5px solid var(--accent-orange);

    -webkit-transition: all .15s ease;
    -moz-transition: all .15s ease;
    -o-transition: all .15s ease;
    transition: all .15s ease
}

/* ICON */
.grid-card-icon {
    width: 48px;
    height: 48px;
    background: var(--icon-bg);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;               /* SHARP CORNERS */
    font-size: 20px;
}

/* TEXT */
.grid-card-text-main { flex: 1; }

.grid-card-title {
    font-size: 16px;
    margin: 0 0 4px 0;
    color: var(--text-main);
    font-weight: 600;
}

.grid-card-subtitle {
    margin: 0;
    color: var(--text-sub);
    font-size: 14px;
}

/* META BAR */
.grid-card-meta {
    background: var(--card-bg);
    width: 80%;;
    padding: 10px 14px;
    border-radius: 0;               /* SHARP CORNERS */
    display: flex;
    gap: 24px;
    margin-top: 2px;                /* sits below the white line */
}

.grid-card-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--meta-text);
    font-size: 13px;
}

.grid-card-meta-item i {
    font-size: 14px;
    opacity: 0.9;
}