/* Global colour variable for the navigation menu */
:root {
    --navigation-menu-color1: var(--g-color-utrovia-blue) !important;
    --navigation-menu-color2: white !important;
    /*
     Global color constants - background
    */
    --g-color-blue-background: rgb(235, 240, 255);
    --g-color-blue-background-lighter: rgb(244, 247, 255);
    --g-color-red-background: rgb(255, 231, 231);
    --g-color-green-background: rgb(225, 251, 213);
    --g-color-green-background-lighter: rgb(236, 253, 228);
    --g-color-yellow-background: rgb(255, 246, 226);
    --g-color-purple-background: rgb(231, 222, 253);
    --g-color-orange-background: rgb(254, 227, 209);
    /*
        Global color constants - foreground
    */
    --g-color-utrovia-blue: rgb(46, 85, 118);
    --g-color-blue: rgb(83,143,177);
    --g-color-red: rgb(255,113,133);
    --g-color-green: rgb(83,177,95);
    --g-color-yellow: rgb(255, 211, 110);
    --g-color-purple: rgb(137, 92, 246);
    --g-color-orange: rgb(249, 117, 25);
    --g-color-white: white;
    --g-color-black: black;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0 auto;
    color: #1E2031;
    height: 100%;
    overflow-y: hidden;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

span {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

p {
    color: #1E2031;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

h1 {
    font-size: 60px;
    margin-bottom: 0;
}

h2 {
    font-size: 45px;
    margin-bottom: 0;
}

h3 {
    font-size: 32px;
    margin-bottom: 0;
}

h4 {
    font-size: 28px;
    margin-bottom: 0;
}

h5 {
    font-size: 24px;
    margin-bottom: 0;
}

h6 {
    margin-bottom: 0;
}

.otp-problems {
    cursor: pointer;
    color: gray;
}

    .otp-problems:hover {
        color: red;
    }

.width-85px {
    width: 85px;
}


.separator {
    display: flex;
    text-align: center;
    align-items: center;
}

    .separator::before {
        border-bottom: 1px solid lightgrey;
        flex: 1;
        content: '';
        margin-right: 5px;
    }

    .separator::after {
        border-bottom: 1px solid lightgrey;
        flex: 1;
        content: '';
        margin-left: 5px;
    }


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/* borders */
.standard-border-radius {
    border-radius: 8px;
}

.standard-border-radius-top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* hover over */
.standard-hover-cursor:hover {
    cursor: pointer;
}

/* Opacity */
.standard-hover-opacity {
    opacity: 0.6;
}

    .standard-hover-opacity:hover {
        opacity: 1.0;
    }


/* Standard Colours */
.standard-red-color {
    color: var(--g-color-red);
}

.standard-blue-color {
    color: var(--g-color-blue);
}

.standard-green-color {
    color: var(--g-color-green);
}

.standard-white-color {
    color: var(--g-color-white);
}

.standard-black-color {
    color: var(--g-color-black);
}

.standard-yellow-color {
    color: var(--g-color-yellow);
}

.standard-purple-color {
    color: var(--g-color-purple);
}

.standard-orange-color {
    color: var(--g-color-orange);
}

/* standard background colours */
.standard-blue-background {
    background-color: var(--g-color-blue-background);
}

.standard-blue-background-lighter {
    background-color: var(--g-color-blue-background-lighter);
}

.standard-green-background {
    background-color: var(--g-color-green-background);
}

.standard-green-background-lighter {
    background-color: var(--g-color-green-background-lighter);
}

.standard-red-background {
    background-color: var(--g-color-red-background);
}

.standard-yellow-background {
    background-color: var(--g-color-yellow-background);
}

.standard-purple-background {
    background-color: var(--g-color-purple-background);
}

.standard-orange-background {
    background-color: var(--g-color-orange-background);
}


/* borders */
.standard-blue-border {
    border: 1px solid var(--g-color-blue-background);
}

.standard-green-border {
    border: 1px solid var(--g-color-green-background);
}

.standard-red-border {
    border: 1px solid var(--g-color-red-background);
}

.standard-yellow-border {
    border: 1px solid var(--g-color-yellow-background);
}

.standard-purple-border {
    border: 1px solid var(--g-color-purple-background);
}

.standard-orange-border {
    border: 1px solid var(--g-color-orange-background);
}

/* Button coloring */
.standard-green-button, .standard-green-button:disabled {
    background-color: var(--g-color-green-background);
    color: var(--g-color-green);
}

    .standard-green-button:disabled {
        opacity:0.8;
        border:0;
    }

    .standard-green-button:hover, .standard-green-button.selected {
        color: var(--g-color-green-background);
        background-color: var(--g-color-green);
    }

    .standard-green-button.show {
        color: var(--g-color-green-background);
        background-color: var(--g-color-green);
    }


.standard-blue-button, .standard-blue-button:disabled {
    background-color: var(--g-color-blue-background);
    color: var(--g-color-blue);
}

    .standard-blue-button:disabled {
        opacity: 0.8;
        border:0;
    }

    .standard-blue-button:hover, .standard-blue-button.selected {
        color: var(--g-color-blue-background);
        background-color: var(--g-color-blue);
    }

.standard-blue-button.show {
    color: var(--g-color-blue-background);
    background-color: var(--g-color-blue);
}

.standard-red-button, .standard-red-button:disabled {
    background-color: var(--g-color-red-background);
    color: var(--g-color-red);
}

.standard-red-button:disabled {
    opacity: 0.8;
    border:0;
}

    .standard-red-button:hover, .standard-red-button.selected {
        color: var(--g-color-red-background);
        background-color: var(--g-color-red);
    }

    .standard-red-button.show {
        color: var(--g-color-red-background);
        background-color: var(--g-color-red);
    }

.standard-orange-button, .standard-orange-button:disabled {
    background-color: var(--g-color-orange-background);
    color: var(--g-color-orange);
}

.standard-orange-button:disabled {
    opacity: 0.8;
    border:0;
}

    .standard-orange-button:hover, .standard-orange-button.selected {
        color: var(--g-color-orange-background);
        background-color: var(--g-color-orange);
    }

    .standard-orange-button.show {
        color: var(--g-color-orange-background);
        background-color: var(--g-color-orange);
    }

.standard-purple-button, .standard-purple-button:disabled {
    background-color: var(--g-color-purple-background);
    color: var(--g-color-purple);
}

.standard-purple-button:disabled {
    opacity: 0.8;
    border:0;
}

    .standard-purple-button:hover, .standard-purple-button.selected {
        color: var(--g-color-purple-background);
        background-color: var(--g-color-purple);
    }

    .standard-purple-button.show {
        color: var(--g-color-purple-background);
        background-color: var(--g-color-purple);
    }

.standard-icon-button {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 5px;
    background-color: #faf9f8;
    border: 1px solid #e1dfdd;
    color: var(--g-color-blue);
}

    .standard-icon-button:hover {
        background-color: #e1dfdd !important;
        border-color: var(--g-color-blue) !important;
        color: var(--g-color-blue) !important;
    }

    .standard-icon-button.show {
        background-color: #e1dfdd !important;
        border-color: var(--g-color-blue) !important;
        color: var(--g-color-blue) !important;
    }

    .standard-icon-button:checked + .btn {
        background-color: #e1dfdd !important;
        color: var(--g-color-blue) !important;
        border-color: var(--g-color-blue) !important;
    }

.btn-check:checked + .standard-icon-button {
    background-color: var(--g-color-blue-background);
    color: var(--g-color-blue) !important;
    border-color: var(--g-color-blue) !important;
}


.standard-icon-separator {
    margin-left: 5px;
    margin-right: 5px;
    height: 16px;
    border-left: 1px #e1dfdd solid;
}

/* navigation items */
.nav-menu-top-row {
    border-bottom: 1px solid lightgrey;
}

.nav-menu-nav-item .nav-link {
    color: var(--navigation-menu-color2);
    background-color: var(--navigation-menu-color1);
    border-radius: 10px !important;
}

.nav-menu-nav-item a.active {
    background-color: var(--navigation-menu-color2);
    color: var(--navigation-menu-color1);
    border-radius: 10px !important;
}

.nav-menu-nav-item .nav-link:hover {
    background-color: var(--navigation-menu-color2);
    color: var(--navigation-menu-color1);
    border-radius: 10px !important;
}

/* Flashing text */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.flashing-text {
    animation: blink 1s infinite;
}

/*page[size="A4"] {
    width: 21cm;
    height: 29.7cm;
}

page {
    background: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}*/

/* This is used to provide a data entry experience for the user.*/
span.research-content[contenteditable="true"] {
    border: 0;
    outline: 0;
    margin: 0;
}

    span.research-content[contenteditable="true"]:focus {
        outline: 0;
    }

    span.research-content[contenteditable="true"]:hover {
        background-color: lightgray;
    }



/* Stuff used by all */
@media (min-width: 992px) {
    .rp-fixed-bottom-until-lg {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}

@media (max-width: 992px) {
    .rp-image-eighty-percent-below-lg {
        width: 80%;
    }
}