/*
Declare some basic colours
*/
:root{
    --rlp-red: #871d33;
    --rlp-gray-dark: #8e8e8e;
    --rlp-gray-light: #c6c6c6;
}

.rlp-gl{
    background-color: var(--rlp-gray-light);
    color:white;
}

.rlp-gl-outline{
    border:1px solid var(--rlp-gray-light);
    color:var(--rlp-gray-light);
}

.rlp-gd{
    background-color: var(--rlp-gray-dark);
    color:white;
}

.rlp-gd-inv{
    color: var(--rlp-gray-dark);
}

.rlp-gd-outline{
    border:1px solid var(--rlp-gray-dark);
    color:var(--rlp-gray-dark);
}

.rlp-r{
    background-color: var(--rlp-red);
    color:white;
}

.rlp-r-outline{
    border:1px solid var(--rlp-red);
    color:var(--rlp-red);
}

.rlp-r-inv{
    color:var(--rlp-red);
}

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

body{
    font-family: Arial;
    letter-spacing: 0.2px;
    margin-bottom: 40px; /* Margin bottom by footer height */
}

a {
    color: var(--rlp-red);
}

.form-label {
    width: 100%;
}

.form-control:focus{
    outline: none;
    border-color: var(--rlp-red);
    box-shadow: 0 0 3px var(--rlp-red);
    -moz-box-shadow: 0 0 3px var(--rlp-red);
    -webkit-box-shadow: 0 0 3px var(--rlp-red);
}

.body-content{
    margin: 1rem 0rem 0 0rem;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px; /* Set the fixed height of the footer here */
    line-height: 39px; /* Vertically center the text there */
    background-color: #f5f5f5;
    border-top: 1px solid var(--rlp-gray-light);
    color: var(--rlp-gray-dark);
}

.footer-link a{
    color: var(--rlp-gray-dark);
    text-decoration: none;
}

.navbar{
    background-color: var(--rlp-red);
}


.nav-icon{
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: -3px;
}

.menu-elem{
    margin: 0 0 0 0.75rem;
}

.nav-btn{
    color: white;
    padding: 0.5rem;
}
.nav-btn:hover{
    color: var(--rlp-gray-light);
}

.navbar-dark .navbar-nav .nav-link{
    /*
    Overwrites bootstrap default nav-link colouring
    */
    color: white;
}

.card{
    margin: 0 0.5rem 0.5rem 0;
    font-size: 0.9rem;
}
.card:hover{
    box-shadow: 1px 1px 3px var(--rlp-gray-light);
}

.qs-box{
    background-color: var(--rlp-red);
    color: white;
    font-size: 3rem;
    width: 8rem;
    height: 8rem;
}

/**
Overwrites bootstrap .btn:focus box shadow color
*/
.btn:focus{
    box-shadow: 0 0 5px .2rem var(--rlp-gray-light);
}

.btn-default{
    color: white;
    background-color: var(--rlp-red);
    border-radius: 0.15rem;
}
.btn-default:hover{
    /*
    color: var(--rlp-gray-light);
    color: var(--rlp-red);;
    background-color: unset;
    border: 1px solid var(--rlp-red);
    */
    box-shadow: 1px 1px 3px var(--rlp-gray-dark);
}
.btn-outline-default{
    color: white;
    border: 1px solid white;
}
.btn-outline-default:hover{
    /*
    color: var(--rlp-gray-light);
    color: var(--rlp-red);;
    background-color: unset;
    border: 1px solid var(--rlp-red);
    */
    box-shadow: 1px 1px 3px var(--rlp-gray-light);
    color: var(--rlp-red);
    background-color: white;
}

.cursor-pointer{
    cursor: pointer;
}

.dropdown-item.selected{
    background-color: var(--rlp-gray-light);
}

.check-star, .c-goldenrod{
    color: goldenrod;
}
.registered-bookmark, .c-green{
    color: green;
}
.c-red{
    color: red;
}

/* PAGINATION */
.page-item > .page-link{
    color: var(--rlp-red);
}
.page-link:focus{
    border: 1px solid var(--rlp-red) !important;
    box-shadow: 0 0 3px var(--rlp-red) !important;
    -moz-box-shadow: 0 0 3px var(--rlp-red) !important;
    -webkit-box-shadow: 0 0 3px var(--rlp-red) !important;
}
.page-item.active > .page-link{
    background-color: var(--rlp-red);
    border-color: var(--rlp-red);
}

.label-required{
    color: var(--rlp-red);
}

.scroll-150{
    max-height: 150px;
    overflow: auto;
}

.scroll-300{
    max-height: 300px;
    overflow: auto;
}

.w-40{
    width: 40%;
}
.w-20{
    width: 20%;
}
.w-10{
    width: 20%;
}

/*
Extends css for django autocomplete light (dal)
No other approach worked to get the autocomplete fields to full width of parent containers
*/
.select2{
    width: 100% !important;
}
/*
Similar to bootstraps 'shadow-lg'
 */
.select2-results{
    box-shadow: 0 1rem 3rem rgba(0,0,0,.2) !important;
}
.select2-results__option--highlighted{
    background-color: var(--rlp-red) !important;
}
/*
.select2-container--default .select2-results__group{
    background-color: var(--rlp-gray-light);
}
.select2-container--default .select2-results__option .select2-results__option{
    padding-left: 1em !important;
}

 */
.select2-results__options--nested{
    padding-left: 1em !important;
}
.select2-container--default .select2-results > .select2-results__options{
    max-height: 500px !important;
}
/*
.select2-container--default .select2-results__option .select2-results__option{
    padding-left: 2em;
}

 */
.collapse-icn > i{
    transition: all 0.3s ease;
}
.collapsed .collapse-icn > i{
    transform: rotate(-90deg);
}
.tree-label.badge{
    font-size: 90%;
}
.alert{
    margin-bottom: 0 !important;
}

.table-fixed {
    table-layout: fixed;
}

.truncated-p:not(label:has(input:checked) + .truncated-p) {
     /* collapse text to a single line and shorten it if checkbox to "show more" is not checked */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncated-p { /* show line breaks from input if expanded */
    white-space: pre-wrap;
}

/*
Workaround for select2 multiselect not showing placeholder text when invisible and then visible.
 */
.select2-selection--multiple .select2-search__field {
    width: 100% !important;
}

/*
Polish table filter styling.
*/

.index-table-filters input, .index-table-filters .select2-container--default .select2-selection--single .select2-selection__placeholder, .index-table-filters .select2-container--default .select2-search--inline .select2-search__field {
  font-size: 1.25rem;
}
.card-header > :first-child {
  margin-bottom: 0px;
}

/*
Polish index table header styling.
*/
.table-container .table thead tr th a {
  white-space: pre-wrap; /* only for orderable columns to avoid tripping on whitespace around the title. */
}

.index-table-filters #filter .select2-selection.select2-selection--single {
  height: 2.6rem;
  padding-top: 0.35rem;
}