:root {
    --light-grey: #F2F2F2;
    --medium-grey: #E5E5E5;
    --dark-grey: #909090;
    --light-blue: #F7F8FA;
    font-family: 'Roboto', sans-serif;
    --bs-font-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --purple: #995BE9;
    --pink: #D35A6C;
    --light-orange: #F1AD64;
    --green: #9FC365;
    --dark-blue: #4F73C1;
    --yellow: #F5E49D;
}

html, body {
    height: 100%;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    color: inherit;
    background-color: inherit;
    /*box-shadow: unset !important;*/
}

html {
    position: relative;
    min-height: 100%;
}

body {
}

.light-weight-link {
    color: var(--dark-grey);
    font-size: 15px;
    text-decoration: none;
}

a.btn.btn-primary > *,
a.btn.btn-secondary > * {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}

.btn-primary {
    height: 2.5rem;
    border-radius: 0.4rem;
    background-color: var(--site-primary-colour);
    color: var(--site-primary-offset-colour);
    border-color: var(--site-primary-colour);
}

.btn-secondary {
    height: 2.5rem;
    border-radius: 0.4rem;
    background-color: var(--light-grey);
    color: black;
}

    .btn-primary:hover, .btn-secondary:hover {
        background-color: white;
        color: black;
        border-color: black;
    }

.container {
    padding: unset !important;
}

.portal-padding {
    padding: 20px;
}

@media (min-width: 768px) {
    .portal-padding {
        padding: 30px;
    }
}

.card-row {
    left: -1.5rem;
    position: relative;
    width: calc(100% + 3rem);
}

/* Datagrid Toolbar
-------------------------------------------------
*/

.datagrid-toolbar {
    height: 68px;
    padding: 0px 20px;
    border-radius: 9px 9px 0px 0px;
}

    .datagrid-toolbar .search-icon {
        margin-top: unset !important;
        margin-bottom: unset !important;
        color: var(--dark-grey);
    }

        .datagrid-toolbar .search-icon:hover {
            cursor: pointer;
        }

    .datagrid-toolbar .search-panel {
        background: var(--light-blue) !important;
        border: unset !important;
        height: 40px;
        border-radius: 9px;
        margin-bottom: unset !important;
    }

    .datagrid-toolbar .form-control::placeholder {
        color: var(--dark-grey);
    }

    .datagrid-toolbar .input-group-text {
        background: var(--light-blue);
        border: unset !important;
        border-radius: 9px 9px 9px 9px;
    }

    .datagrid-toolbar #basic-addon1 {
        padding-right: unset;
    }

    .datagrid-toolbar .fa-magnifying-glass:hover {
        cursor: default;
    }

    .datagrid-toolbar .toolbar-buttons {
        width: unset !important;
    }

        .datagrid-toolbar .toolbar-buttons > .btn-primary {
            width: fit-content;
            padding: 0rem 1rem;
        }

@media (max-width: 768px) {
    .datagrid-toolbar {
        box-shadow: unset !important;
        align-items: unset !important;
        border-radius: unset !important;
        justify-content: unset !important;
        padding: unset !important;
    }

        .datagrid-toolbar .btn-primary, .datagrid-toolbar .toolbar-buttons {
            width: 100% !important;
        }

    .datagrid-search {
        display: none;
    }
}

.center-align-form-label {
    align-items: center !important;
}

.form-control-group {
    position: relative;
    margin-bottom: 20px;
}

    .form-control-group input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
    }

    .form-control-group label {
        position: absolute;
        left: 12px;
        top: 12px;
        font-size: 14px;
        color: #afafaf;
        transition: 0.3s ease all;
        -moz-transition: 0.3s ease all;
        -webkit-transition: 0.3s ease all;
        -ms-transition: 0.3s ease all;
        -o-transition: 0.3s ease all;
    }

    .form-control-group input:focus ~ label, .form-control-group input:not(:placeholder-shown) ~ label {
        top: 27%;
        transform: translate3d(0, -100%, 0);
        font-size: 10.5pt;
        color: #363636;
        padding: 3px;
        opacity: 1;
        background: #fff;
        border-color: #007bff;
        outline: none;
    }

        .form-control-group input:focus + label,
        .form-control-group input:not(:placeholder-shown) + label {
            top: -9px;
            font-size: 12px;
            background-color: #ffffff;
            padding: 0 4px;
            border-radius: 4px;
            left: 8px;
        }

div.hide-empty:empty {
    display: none;
}