﻿/* Points Align styles - app specific */
/* Copyright(C) Points Align 2020 */
/* Version 1.00 */
/* 
RME full colour logos
Purple – #512e91
Teal - #00a0b0
Green - #8cc63f
Pink - #ca3092
Orange - #f47836


RME pastel colour logos
Purple – #edeaf4
Teal - #e5f5f7
Green - #f3f9eb
Pink - #faeaf4
Orange - #fef1eb
*/

/* Clear of the menu */
body {
    background-color: #f8f9fa;
    xbackground-color: #e5f5f7;
    overflow: overlay;
    /*Using overlay allows the scrollbar to not resize the underlying form, only works in safari edge and chrome*/
}
/* Set padding to keep content from hitting the edges, and must take into account the v scrollbar, note this works with the .row whoic has altered the left margin */
.body-content {
    padding-left: 30px;
    padding-right: 30px;
}
/*Override to prevent right hand padding (dupe padding left and right, so use left only) from 15px*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    padding-right: 0px !important;
}
/*Override to prevent right hand padding (dupe padding left and right, so use left only) from 15px*/
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    padding-right: 0px !important;
}
/* Adjusts right margin from -15 */
.row {
    margin-left: -15px !important;
    margin-right: 0px !important;
}
/* SITE */
/* Mid section wrapper (between nav and footer), must set height for IE to work */
.pa-wrapper {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 176px);
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
}
/* Main section (right hand side) */
.pa-content {
    padding-bottom: 12px;
}
.pa-content-identity {
    padding-top: 20px;
    padding-bottom: 12px;
}
/*navbar*/
.pa-navbar-logo {
    background-image: url("../images/RMEWebApp.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    height: 56px;
    width: 140px;
    margin-top: -30px;
    margin-bottom: -30px;
    display: inline-block;
    position: relative;
    top: -14px;
    margin-left: 10px;
    margin-right: 16px;
}

.pa-breadcrumb {
    text-align: center;
    vertical-align: middle;
    height: 30px;
    padding-top: 1px;
    padding-bottom: 0px;
    padding-left: 1rem;
    background-image: url("../images/RMEstripe2.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    color: pink;
    margin-left: 0px;
}

.pa-breadcrumb li {
    color: white;
    vertical-align: middle;
}
.pa-breadcrumb ol {
    vertical-align: middle;
}
.pa-breadcrumb li a {
    color: white;
}
.pa-breadcrumb li a:visited {
    color: white;
}

.breadcrumb-item {
    color: green;
}
.breadcrumb-item.active {
    color: white;
}
.breadcrumb-item::before {
    color: #ccc6c6 !important;
}

    .pa-table-grid tr {
        height: 20px;
        line-height: 20px;
    }

.pa-table-grid td {
    xfont-size: 80%;
    vertical-align: middle;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    word-break: break-all;
}

.pa-table-gridsort tr {
    height: 20px;
    line-height: 20px;
}

.pa-table-gridsort td {
    font-size: 80%;
    vertical-align: middle;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    word-break: break-all;
}

.pa-table-noborder th, .pa-table-noborder td {
    border-top: none;
}
.pa-card-heading {
    font-weight: normal;
}
.pa-card-text {
    font-weight: normal;
}
.pa-card-data{
    font-weight: bold;
}

.pa-text-bold {
    font-weight: bold;
}


.pa-list-column-header{
    color: lightslategray;
}
.pa-card {
    xbackground-color: #ecebff;
    background-color: #edeaf4;
}
.pa-card-withlist {
    
}

/* Inline colours */
.pa-colour-red {
    color: #f74f4a;
}

.pa-colour-green {
    color: #46c24e;
}

.pa-colour-orange {
    color: #ff8e30;
}

.pa-colour-yellow {
    color: #dccf43;
}

.pa-colour-turquoise {
    color: #23b0b0;
}

.pa-colour-blue {
    color: #5b55ff;
}

.pa-colour-purple {
    color: #8a33e8;
}

.pa-colour-pink {
    color: #dc3c94;
}

.pa-colour-grey {
    color: #6c757d;
}

.pa-colour-lightgrey {
    color: #cecece;
}

.pa-colour-disabled {
    color: #43464a !important;
}

.pa-backgroundcolour-red {
    background-color: #f74f4a;
}

.pa-backgroundcolour-green {
    background-color: #46c24e;
}

.pa-backgroundcolour-orange {
    background-color: #ff8e30;
}

.pa-backgroundcolour-yellow {
    background-color: #dccf43;
}

.pa-backgroundcolour-turquoise {
    background-color: #23b0b0;
}

.pa-backgroundcolour-blue {
    background-color: #5b55ff;
}

.pa-backgroundcolour-purple {
    background-color: #8a33e8;
}

.pa-backgroundcolour-pink {
    background-color: #dc3c94;
}

.pa-backgroundcolour-grey {
    background-color: #6c757d;
}

.pa-modal-image {
    max-width: 800px !important;
}

/* BUTTON COLOURS */
/* Grey */
.pa-button-grey {
    color: white;
    background-color: #6c757d;
    border-color: #6c757d;
}

    .pa-button-grey:hover {
        color: white;
        background-color: #7a848e;
        border-color: #7a848e;
    }

    .pa-button-grey:focus, .pa-button-grey.focus {
        color: white;
        background-color: #7a848e;
        border-color: #7a848e;
        box-shadow: 0 0 0 0.1rem #7a848e;
    }

    .pa-button-grey.disabled, .pa-button-grey:disabled {
        color: #43464a;
        background-color: #898b8e;
        border-color: #898b8e;
    }

    .pa-button-grey:not(:disabled):not(.disabled):active, .pa-button-grey:not(:disabled):not(.disabled).active,
    .show > .pa-button-grey.dropdown-toggle {
        color: white;
        background-color: #6c757d;
        border-color: #6c757d;
    }
/* Red */
.pa-button-red {
    color: white;
    background-color: #f74f4a;
    border-color: #f74f4a;
}

    .pa-button-red:hover {
        color: white;
        background-color: #ff5e59;
        border-color: #ff5e59;
    }

    .pa-button-red:focus, .pa-button-red.focus {
        color: white;
        background-color: #ff5e59;
        border-color: #ff5e59;
        box-shadow: 0 0 0 0.1rem #ff5e59;
    }

    .pa-button-red.disabled, .pa-button-red:disabled {
        color: #43464a;
        background-color: #f76863;
        border-color: #f76863;
    }

    .pa-button-red:not(:disabled):not(.disabled):active, .pa-button-red:not(:disabled):not(.disabled).active,
    .show > .pa-button-red.dropdown-toggle {
        color: white;
        background-color: #f74f4a;
        border-color: #f74f4a;
    }
/* Orange */
.pa-button-orange {
    color: white;
    background-color: #ff8e30;
    border-color: #ff8e30;
}

    .pa-button-orange:hover {
        color: white;
        background-color: #f6a649;
        border-color: #f6a649;
    }

    .pa-button-orange:focus, .pa-button-orange.focus {
        color: white;
        background-color: #f6a649;
        border-color: #f6a649;
        box-shadow: 0 0 0 0.1rem #f6a649;
    }

    .pa-button-orange.disabled, .pa-button-orange:disabled {
        color: #43464a;
        background-color: #ebad65;
        border-color: #ebad65;
    }

    .pa-button-orange:not(:disabled):not(.disabled):active, .pa-button-orange:not(:disabled):not(.disabled).active,
    .show > .pa-button-orange.dropdown-toggle {
        color: white;
        background-color: #ff8e30;
        border-color: #ff8e30;
    }
/* Yellow */
.pa-button-yellow {
    color: white;
    background-color: #ffc928;
    border-color: #ffc928;
}

    .pa-button-yellow:hover {
        color: white;
        background-color: #ffd452;
        border-color: #ffd452;
    }

    .pa-button-yellow:focus, .pa-button-yellow.focus {
        color: white;
        background-color: #ffd452;
        border-color: #ffd452;
        box-shadow: 0 0 0 0.1rem #ffd452;
    }

    .pa-button-yellow.disabled, .pa-button-yellow:disabled {
        color: #43464a;
        background-color: #e0b73c;
        border-color: #e0b73c;
    }

    .pa-button-yellow:not(:disabled):not(.disabled):active, .pa-button-orange:not(:disabled):not(.disabled).active,
    .show > .pa-button-yellow.dropdown-toggle {
        color: white;
        background-color: #ffc928;
        border-color: #ffc928;
    }
/* Green */
.pa-button-green {
    color: white;
    background-color: #46c24e;
    border-color: #46c24e;
}

    .pa-button-green:hover {
        color: white;
        background-color: #48d451;
        border-color: #48d451;
    }

    .pa-button-green:focus, .pa-button-green.focus {
        color: white;
        background-color: #48d451;
        border-color: #48d451;
        box-shadow: 0 0 0 0.1rem #48d451;
    }

    .pa-button-green.disabled, .pa-button-green:disabled {
        color: #43464a;
        background-color: #64d06b;
        border-color: #64d06b;
    }

    .pa-button-green:not(:disabled):not(.disabled):active, .pa-button-green:not(:disabled):not(.disabled).active,
    .show > .pa-button-green.dropdown-toggle {
        color: white;
        background-color: #46c24e;
        border-color: #46c24e;
    }
/* Turquoise */
.pa-button-turquoise {
    color: white;
    background-color: #23b0b0;
    border-color: #23b0b0;
}

    .pa-button-turquoise:hover {
        color: white;
        background-color: #27c2c2;
        border-color: #27c2c2;
    }

    .pa-button-turquoise:focus, .pa-button-turquoise.focus {
        color: white;
        background-color: #27c2c2;
        border-color: #27c2c2;
        box-shadow: 0 0 0 0.1rem #27c2c2;
    }

    .pa-button-turquoise.disabled, .pa-button-turquoise:disabled {
        color: #43464a;
        background-color: #52bcbc;
        border-color: #52bcbc;
    }

    .pa-button-turquoise:not(:disabled):not(.disabled):active, .pa-button-turquoise:not(:disabled):not(.disabled).active,
    .show > .pa-button-turquoise.dropdown-toggle {
        color: white;
        background-color: #23b0b0;
        border-color: #23b0b0;
    }
/* Blue */
.pa-button-blue {
    color: white;
    background-color: #5b55ff;
    border-color: #5b55ff;
}

    .pa-button-blue:hover {
        color: white;
        background-color: #5471ff;
        border-color: #5471ff;
    }

    .pa-button-blue:focus, .pa-button-blue.focus {
        color: white;
        background-color: #5471ff;
        border-color: #5471ff;
        box-shadow: 0 0 0 0.1rem #5471ff;
    }

    .pa-button-blue.disabled, .pa-button-blue:disabled {
        color: #43464a;
        background-color: #6660ff;
        border-color: #6660ff;
    }

    .pa-button-blue:not(:disabled):not(.disabled):active, .pa-button-blue:not(:disabled):not(.disabled).active,
    .show > .pa-button-blue.dropdown-toggle {
        color: white;
        background-color: #5b55ff;
        border-color: #5b55ff;
    }


.pa-button-outline-blue {
    color: #5b55ff;
    border-color: #5b55ff;
}

    .pa-button-outline-blue:hover {
        color: #fff;
        background-color: ##5471ff;
        border-color: #5b55ff;
    }

    .pa-button-outline-blue:focus, .pa-button-outline-blue.focus {
        box-shadow: 0 0 0 0.1rem #5471ff;
    }

    .pa-button-outline-blue.disabled, .pa-button-outline-blue:disabled {
        color: #007bff;
        background-color: transparent;
    }

    .pa-button-outline-blue:not(:disabled):not(.disabled):active, .pa-button-outline-blue:not(:disabled):not(.disabled).active,
    .show > .pa-button-outline-blue.dropdown-toggle {
        color: #fff;
        background-color: #5471ff;
        border-color: #5471ff;
    }

        .pa-button-outline-blue:not(:disabled):not(.disabled):active:focus, .pa-button-outline-blue:not(:disabled):not(.disabled).active:focus,
        .show > .pa-button-outline-blue.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.1rem #5471ff;
        }




/* Purple */
.pa-button-purple {
    color: white;
    background-color: #8a33e8;
    border-color: #8a33e8;
}

    .pa-button-purple:hover {
        color: white;
        background-color: #973afb;
        border-color: #973afb;
    }

    .pa-button-purple:focus, .pa-button-purple.focus {
        color: white;
        background-color: #973afb;
        border-color: #973afb;
        box-shadow: 0 0 0 0.1rem #973afb;
    }

    .pa-button-purple.disabled, .pa-button-purple:disabled {
        color: #43464a;
        background-color: #975cd6;
        border-color: #975cd6;
    }

    .pa-button-purple:not(:disabled):not(.disabled):active, .pa-button-purple:not(:disabled):not(.disabled).active,
    .show > .pa-button-purple.dropdown-toggle {
        color: white;
        background-color: #8a33e8;
        border-color: #8a33e8;
    }
/* Pink */
.pa-button-pink {
    color: white;
    background-color: #dc3c94;
    border-color: #dc3c94;
}

    .pa-button-pink:hover {
        color: white;
        background-color: #f33fa2;
        border-color: #f33fa2;
    }

    .pa-button-pink:focus, .pa-button-pink.focus {
        color: white;
        background-color: #f33fa2;
        border-color: #f33fa2;
        box-shadow: 0 0 0 0.1rem #f33fa2;
    }

    .pa-button-pink.disabled, .pa-button-pink:disabled {
        color: #43464a;
        background-color: #b74383;
        border-color: #b74383;
    }

    .pa-button-pink:not(:disabled):not(.disabled):active, .pa-button-purple:not(:disabled):not(.disabled).active,
    .show > .pa-button-pink.dropdown-toggle {
        color: white;
        background-color: #dc3c94;
        border-color: #dc3c94;
    }


    .pa-tab-text{
        font-weight: bold;
    }
.alert {
    margin-bottom: 0px;
}

.pa-alert-success {
    color: black;
    background-color: #46c24e;
    border-color: #46c24e;
    font-size: 80%;
}

.pa-alert-warning {
    color: black;
    background-color: #ff8e30;
    border-color: #ff8e30;
    font-size: 80%;
}

.pa-alert-error {
    color: black;
    background-color: #f74f4a;
    border-color: #f74f4a;
    font-size: 80%;
}
/* SPINNER */
/* Loading spinner */
.pa-spinner {
    display: block;
    position: absolute;
    z-index: 100;
    left: 50%;
    margin-top: 0.5rem;
}

/* Spinner within a button, the button gets disabled so need black to show as grey */
.pa-button-spinner {
    z-index: 10;
    display: block;
    position: absolute;
    top: calc(50% - 0.8rem);
    left: calc(50% - 0.8rem);
    width: 24px;
    height: 24px;
    color: #43464a !important;
}
/*Must have a position in the div before the spinner  */
.pa-position {
    position: relative;
}

.pa-modal-fileupload {
    max-width: 600px !important;
}

.pa-button-image{
    padding: 0px !important;
    xborder: 1px solid black;
}


/* Button text */
/* Media size breakpoints min-width 576, 768, 992, 1200, 1400 */
/* Media size containers max-width 540, 720, 960, 1140, 1320 */


@media screen and (min-width: 1401px) {
    .pa-button-remove:before {
        content: 'REMOVE';
    }

    .pa-button-add:before {
        content: 'ADD';
    }
}

@media screen and (min-width: 1201px) and (max-width: 1400px) {
    .pa-button-remove:before {
        content: 'REMOVE';
    }

    .pa-button-add:before {
        content: 'ADD';
    }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
    .pa-button-remove:before {
        content: '\00a0\00a0\00a0\00a0';
        background: url("../images/icons/trash.svg");
        background-repeat: no-repeat;
        background-size: 120%;
        background-position: center;
        filter: invert(1); /* black to white */
    }

    .pa-button-add:before {
        content: '\00a0\00a0\00a0\00a0';
        background: url("../images/icons/plus.svg");
        background-repeat: no-repeat;
        background-size: 120%;
        background-position: center;
        filter: invert(1); /* black to white */
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    .pa-button-remove:before {
        content: '\00a0\00a0\00a0\00a0';
        background: url("../images/icons/trash.svg");
        background-repeat: no-repeat;
        background-size: 120%;
        background-position: center;
        filter: invert(1); /* black to white */
    }

    .pa-button-add:before {
        content: '\00a0\00a0\00a0\00a0';
        background: url("../images/icons/plus.svg");
        background-repeat: no-repeat;
        background-size: 120%;
        background-position: center;
        filter: invert(1); /* black to white */
    }
}

@media screen and (max-width: 768px) {
    .pa-button-remove:before {
        content: '\00a0\00a0\00a0\00a0';
        background: url("../images/icons/trash.svg");
        background-repeat: no-repeat;
        background-size: 120%;
        background-position: center;
        filter: invert(1); /* black to white */
    }

    .pa-button-add:before {
        content: '\00a0\00a0\00a0\00a0';
        background: url("../images/icons/plus.svg");
        background-repeat: no-repeat;
        background-size: 120%;
        background-position: center;
        filter: invert(1); /* black to white */
    }
}

.pa-index-pic01 {
    display: inline-block;
    border-radius: 5px;
    object-fit: contain;
    top: 14px;
    margin-left: 0px;
}

.pa-pic-01 {
    text-align: right;
    margin-right: 0px !important;
}

.pa-welcome {
    color: purple;

}

.pa-section-head {
    display: inline-block;
    text-align: left;
}
.pa-section-head-icon {
    display: inline-block;
    text-align: left;
    height: 30px;
    vertical-align: middle;
    filter: invert(43%) sepia(93%) saturate(1352%) hue-rotate(5deg) brightness(100%) contrast(100%);
    color: orange;
}
.pa-section-head-text {
    display: inline-block;
    text-align: left;
    margin-left: 20px;
    vertical-align: middle;
}
/*adjusts row if it is in a multi columncolum*/
.pa-rowadjust {
    margin-left: -18px !important;
}
