.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: green;
    color: ghostwhite;
    border-color: darkslategrey;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px 22px;
    z-index: 0 !important;
}

.btn-primary:hover {
    background-color: lightgreen;
}

.btn-secondary {
    background-color: green;
    color: ghostwhite;
    border-color: darkslategrey;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px 22px;
}

/*Moved from MainLayout.css as header is moved to all pages */

/*To keep footer at botom of page - use with position styling in MainLayout.css*/
/*body {
    position: relative;
    min-height: 100vh;
    margin-top: 60px;*/ /* Add a top margin to avoid content overlay */
    /*padding-bottom: 60px;
}*/

.header {
    background-color: darkslategrey;
    color: lightgrey;
}

/*.header img {
    width: 10%;
    min-width: 100px;
    border-radius: 50%;
}*/

/*This is styling for backend pages and will always need colour changes for each website */

.card-header {
    background-color: green;
    font-weight: bold;
    color: ghostwhite;
    font-size: clamp(15px, 5vw, 18px);
}

.icon {
    border: 1px solid gray;
    border-radius: 7px;
    background-color: white;
    padding: 4px 12px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.Icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.iconsize {
    width: 20px;
    height: 20px;
}

.ItemsPerPage {
    background-color: green;
    color: ghostwhite;
    border-color: lightgray;
    border-radius: 4px;
    padding: 8px 22px;
}

.pagetitle {
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: -moz-linear-gradient(top, #FFFFFF 20%, #D3D3D3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #FFFFFF), color-stop(100%, #D3D3D3));
    background: -webkit-linear-gradient(top, #FFFFFF 20%, #D3D3D3 50%);
    background: -o-linear-gradient(top, #FFFFFF 20%, #F8F8FF 100%);
    background: linear-gradient(to bottom, #FFFFFF 20%, #D3D3D3 100%);
    padding:  10px 10px 6px 0px;
    position: fixed;
    width: 100%;
    z-index: 10 !important;
    font-size: 30px;
    font-weight: 700;
    color: green;
    letter-spacing: 1px;
}

.active > .page-link, .page-link.active {
    background-color: mediumseagreen;
    border-color: white;
}

.page-item:first-child .page-link {
    background-color: green;
}

.page-item:last-child .page-link {
    background-color: green;
}

.page-link {
    color: white;
    background-color: green;
    border-color: white;
}

.SearchOn {
    background-color: green;
    color: ghostwhite;
    border-color: lightgray;
    border-radius: 4px;
    padding: 8px 22px;
}

.thead {
    background-color: lightslategray;
    font-size: 17px;
    color: white;
}

/*This is styling for all modal popup boxes which will always need colour changes for each website */
.modal-header {
    background-color: green;
}

.modal-title {
    color: ghostwhite;
}

.modal-header h3 {
    color: ghostwhite;
}

.LocationInfo {
    display: flex;
    align-items: center;
}

.LocationInfo img {
    max-height: 1.8em;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 12px;
}

.CloseButton {
    color: ghostwhite;
    background-color: green;
    border-color: darkgreen;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.CloseButton:hover {
    color: lightgreen;
    border-color: green;
    background-color: darkgreen;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.6);
}

ul {
    padding-left: 1.1em;
}

.table > thead > tr > th {
    background-color: lightslategrey;
    color: white;
}

.name {
    color: mediumspringgreen;
}

#modalError {
    background-color: red;
}

#modalWarning {
    background-color: green;
}

.GridBtn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.GridBtn:hover {
    color: green;
    border-color: green;
    background-color: lightgreen;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.6);
}

.active > .page-link {
    z-index: 0;
}