:root
{
    --topnav-height: 50px;
    --footer-height: 40px;
    --sidebar-width: 4.25em;
    --quickbar-width: 4.25em;
    --the-value-circle-green: #175337;
    --the-value-circle-link: #4C9B76;
    --the-value-circle-gold: #c49356;
    --node2-purple: #626b93;
    --node2-purple-light: #a9adbe;
    --node2-link-colour: #5f6789;
    --node2-orange: #f1ad4f;
    --sidebar-menu-item-height: var(--sidebar-width);
    --item-hover-background-color: #f5f5f5;
}

body
{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

#wrapper
{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-areas: "topnav topnav topnav" "sidebar content quickbar" "footer footer footer";
    grid-template-rows: var(--topnav-height) calc(100vh - var(--topnav-height) - var(--footer-height)) var(--footer-height);
    grid-template-columns: var(--sidebar-width) calc(100vw - var(--sidebar-width) - var(--quickbar-width)) var(--quickbar-width);
}

#topnav
{
    grid-area: topnav;
    background-color: var(--node2-purple);
    border-bottom: 1px solid #3e4873;
}

#topnav img
{
    padding: 3px;
    margin-left: 10px;
}

#footer
{
    grid-area: footer;
    background-color: var(--node2-purple-light);
    border-top: 1px solid #6978b5;
    text-align: center;
}

#footer ul
{
    margin: 0 auto;
    padding:0;
}

#footer ul li
{
    list-style-type: none;
    display: inline-block;
}

#footer ul li a
{
    color: #fff;
    padding: 11px;
    text-decoration: none;
    display: block;
    font-size: 0.75em;
}

#sidebar
{
    grid-area: sidebar;
    background-color: #ebebeb;
    position:relative;
    border-right:1px solid #bfbfbf;
}

#sidebar::before
{
    background: linear-gradient(to right,transparent,#aaa);
    content: "";
    height: 100%;
    opacity: .2;
    pointer-events: none;
    position: absolute;
    left: 54px;
    width: 0.8rem;
    z-index: 2;
}

#sidebar ul
{
    margin: 0;
    padding: 0;
}

#sidebar ul li
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: var(--sidebar-menu-item-height);
}

#sidebar ul li a
{
    display: block;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--node2-link-colour);
    text-decoration: none;
}

#sidebar ul li a:hover
{
    background-color: #dfdfdf;
}

#sidebar ul li a.selected
{
    position: relative;
}

#sidebar ul li a.selected::before
{
    border-left: solid 0.2rem var(--node2-orange);
    border-radius: 0.4rem;
    background: var(--node2-orange);
    content: "";
    height: 59px;
    left: 0.2rem;
    position: absolute;
    top: 5px;
}

#sidebar ul li a span.title
{
    font-size: 0.8em;
    margin-top: 1px;
}

#sidebar ul li a span.icon
{
    font-size: 1.8rem;
    display: block;
}

#quickbar
{
    grid-area: quickbar;
    background-color: #ebebeb;
    position:relative;
    border-left:1px solid #bfbfbf;
}

#quickbar::before
{
    background: linear-gradient(to left,transparent,#aaa);
    content: "";
    height: 100%;
    opacity: .2;
    pointer-events: none;
    position: absolute;
    right: 54px;
    width: 0.8rem;
    z-index: 2;
}

#content
{
    grid-area: content;
    overflow-y: auto;
    background-color: rgb(245, 245, 245);
    overflow-x: hidden;
}

#content #action-bar
{
    background-color: #fff;
    height: 3.125em;
    box-shadow: 0 2px 9px -2px grey;
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 1em;
    display: grid;
    grid-template-areas: "left-button centre-content right-button";
    grid-template-columns: auto 1fr auto;
}

#content #action-bar .left-button
{
    grid-area: left-button;
}

#content #action-bar .centre-content
{
    grid-area: centre-content;
}

#content #action-bar .right-button
{
    grid-area: right-button;
}

#action-bar .centre-content ul li a
{
    color: var(--node2-link-colour);
}

#action-bar .centre-content ul li a i
{
    margin-right:6px;
}

.theme-value-circle
{

}

body.theme-value-circle #topnav
{
    background-color: var(--the-value-circle-green);
}

body.theme-value-circle #sidebar a, body.theme-value-circle #quickbar a
{
    color: var(--the-value-circle-green);
}

body.theme-value-circle #sidebar a.selected::before
{
    background: var(--the-value-circle-gold);
}

body.theme-value-circle .btn
{
    background-color: var(--the-value-circle-link);
}

body.theme-value-circle .btn-cancel
{
    background-color: #ec4848;
}

body.theme-value-circle .btn:hover
{
    background-color: var(--the-value-circle-gold);
}

body.theme-value-circle .btn-cancel:hover
{
    background-color: #ff3737;
}

body.theme-value-circle #client-list .client.box .logo
{
    color: var(--the-value-circle-gold);
}

body.theme-value-circle #footer
{
    background-color: var(--the-value-circle-link);
}

body.theme-value-circle #action-bar .centre-content ul li a
{
    color: var(--the-value-circle-gold);
}

body.theme-value-circle #contact-list .box .logo
{
    color: var(--the-value-circle-gold);
}

body.theme-value-circle .add_edit_contact_wrapper form ul li input, .add_edit_contact_wrapper form ul li textarea
{
    border-color: var(--the-value-circle-gold);
}

.btn
{
    display: block;
    padding: 10px 16px;
    background-color: var(--node2-orange);
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 0.2rem 0.4rem -0.075rem rgb(0 0 0 / 25%);
    border:none;
    transition: background-color 0.5s;
}

.btn:hover
{
    background-color: var(--node2-link-colour);
    cursor: pointer;
}

#content #action-bar .btn
{
    margin: 6px 14px;
}

#content #action-bar .btn.left i
{
    margin-right: 5px;
}

#content #action-bar .btn.right i
{
    margin-left: 5px;
}

.box-list .box
{
    padding: 20px;
    margin: 15px;
    color: var(--node2-orange);
    display: inline-block;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0.2rem 0.4rem -0.075rem rgb(0 0 0 / 25%);
    vertical-align: top;
    text-align: center;
}

.box-list .box:hover
{
    cursor: pointer;
    background-color: #f5f5f5;
}

.btn-cancel
{
    background-color: #ec4848;
}

.btn-cancel:hover
{
    background-color: #ff3737;
}

select
{
    padding: 5px;
    border-radius: 6px;
}

.content-wrapper
{
    padding: 30px;
    background-color: #fff;
    margin: 30px;
    border-radius: 0.5em;
    box-shadow: 0 0.2rem 0.4rem -0.075rem rgb(0 0 0 / 25%);
}

.journey-table
{
    width: 80%;
    background-color: #ffffff;
    padding: 30px;
    margin: 30px auto 0 auto;
    border-radius: 0.5em;
    box-shadow: 0 0.2rem 0.4rem -0.075rem rgb(0 0 0 / 25%);
}

.journey-table .pill{display: inline-block;padding: 8px;margin:5px;border:1px solid #dedede;border-radius: 18px;}
.journey-table .pill.parent{font-weight: bold;}
.journey-table .pill.solution{background-color: #f7f7f7;}