.portlet {
    box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3);
    box-sizing: border-box;
    margin-top: 1rem;
    //overflow-x: auto; removed in order to prevent scroll bars for tooltips which are longer than the portlet (test in general settings view)
    //border-top: 2px solid var(--box-highlight);

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    .portlet-head {
        background: #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom: 1px solid #ebedf2;
        padding: 1rem;
        font-weight: 300;
    }

    .portlet-foot {
        background: #fff;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top: 1px solid #ebedf2;
        padding: 1rem;
    }

    .portlet-body > h2 {
        border-bottom: 1px solid #ebedf2;
    }
}

.plain-portlet {
    box-sizing: border-box;
    margin-top: 1rem;
    overflow-x: auto;
}

.portlet-body {
    background: #fff;
    padding: 1rem;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.portlet.highlight-1 {
    border-top: 0;

    background: var(--color-red);
    color: #fff;

    .portlet-body, .portlet-head {
        background: var(--color-red);
        border: 0;
    }
}

.portlet.highlight-2 {
    border-top: 0;

    background: var(--color-green);
    color: #fff;

    .portlet-body, .portlet-head {
        background: var(--color-green);
        border: 0;
    }
}

.portlet.highlight-3 {
    border-top: 0;

    background: var(--color-blue);
    color: #fff;

    .portlet-body, .portlet-head {
        background: var(--color-blue);
        border: 0;
    }
}

.portlet.highlight-4 {
    border-top: 0;

    background: var(--color-yellow);
    color: #fff;

    .portlet-body, .portlet-head {
        background: var(--color-yellow);
        border: 0;
    }
}