#fp-header-container {
    min-height: 120px;

    div.col-sm-7 {
        margin-bottom: 1rem;

        @media (min-width: 768px) {
            margin-top: 35px;
            margin-bottom: 0;
        }

        > div {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            position: relative;

            form {
                flex-grow: 1;
            }

            .dropdown {
                position: unset;

                > .dropdown-menu {
                    margin-top: 0.65rem;
                    z-index: 1001;
                    padding: 0;
                    width: clamp(100%, 78rem, 80vw);
                    left: unset;
                    right: 0;
                }
            }

            .panel {
                margin-bottom: 0;
            }
        }
    }
}


@media (max-width: 767px) {
  .subhead .nav {padding-left: 5px; padding-right: 5px;}
}

@media print {
  a[href]:after { content: none; }
}


.navbar .nav li a {color: #fff;}


.footer { margin-top: 20px; margin-bottom: 40px; padding: 20px 0; }


a:hover i {text-decoration: none;}

.subhead form {margin-bottom: 0;}
.site-search {background: transparent;}
.logo img { padding: 10px 0;}
#fplogo {
    margin: 10px 0;
    @media (max-width: 768px) {
        margin-bottom: 0;
    }
}


#maincontent {min-height: 400px; padding-bottom: 60px;}

td.success, th.success { background-color: #DFF0D8}
td.error, th.error { background-color: #F2DEDE}
td.warning, th.warning { background-color: #FCF8E3}
td.info, th.info { background-color: #D9EDF7}




.has-complete .complete {
  color: #57AC01;
  opacity: 0;
  width: 0;
  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

.has-complete.completed .complete {
  opacity: 1;
  width: auto;
  display: inline-block;
}

.spinner {
  opacity: 0;
  width: 0;
  display: none;
  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active {
  cursor:progress;
}

.has-spinner.active .spinner {
  opacity: 1;
  width: auto; /* This doesn't work, just fix for unkown width elements */
  display: inline-block;
}

.has-spinner.btn-mini.active .spinner {
    width: 10px;
}

.has-spinner.btn-small.active .spinner {
    width: 13px;
}

.has-spinner.btn.active .spinner {
    width: 16px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
}

.page-header {margin-top: 0; padding-top: 0}

/* Sorted Tables */
.table-sorted th {cursor: pointer; }
.table-sorted th::after { font-family:FontAwesome; content: " \F0DC"}
.table-sorted th.headerSortDown, .table-sorted th.headerSortUp {color:#428bca;}
.table-sorted th.headerSortUp::after { font-family:FontAwesome; content: " \F0DD";}
.table-sorted th.headerSortDown::after { font-family:FontAwesome; content: " \F0DE";}


/* Sticky Notes */
.panel-sticky-note {
    -webkit-transform: rotate(-.5deg);
    -moz-transform: rotate(-.5deg);
    -o-transform: rotate(-.5deg);
    -ms-transform: rotate(-.5deg);
    transform: rotate(-.5deg);
}


.tt-suggestions {z-index: 100;}

.shaded {background-color: #f5f5f5; padding-top: 40px; padding-bottom: 40px; margin-top: 40px; margin-bottom: 40px;}

.progress-lg { height: auto; }
.progress-lg .progress-bar { font-size: 14px; line-height: 2.5em; min-height:2.5em;  }
.progress-bar a {color: #fff;}
.progress-bar-empty { background: none; color: #999; -webkit-box-shadow: none; box-shadow: none; }
.progress-bar-empty a {color: #999;}

.list-group .list-group {border-top: 1px solid #ddd; margin-bottom: 0;}
.list-group .list-group a {padding-left: 30px;}

.panel .list-group .list-group .list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.progress-filled {color: #fff;}
.progress-filled .progress-bar-empty a, .progress-filled .progress-bar-empty {color: #fff;}
.progress-success { background-color: #5cb85c; }
.progress-info { background-color: #5bc0de; }
.progress-warning { background-color: #f0ad4e; }
.progress-danger { background-color: #d9534f; }
.progress-primary { background-color: #428bca; }

/*
.btn-trans-primary {
  -webkit-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
}
*/


.text-truncate {
	white-space: nowrap;
	overflow: hidden;
  	text-overflow: ellipsis;
  	-ms-text-overflow: ellipsis;
}

.text-truncate-block {
	display: block;
	white-space: nowrap;
	overflow: hidden;
  	text-overflow: ellipsis;
  	-ms-text-overflow: ellipsis;
}

.td-truncate {
	min-width:25ch;
	width: 100%;
	max-width: 25ch;
}

#header-wrapper {background: #45617E;}
#sub-header {padding-top:4px;}
.nav-tabs > li > a, .nav-pills > li > a { color: #73B0E0; }
.nav-tabs.nav-center > li, .nav-pills.nav-center > li {
    float:none;
    display:inline-block;
    *display: inline;     /* for IE7*/
    *zoom:1;              /* for IE7*/

}

.nav-tabs.nav-center { text-align:center; }
.nav-tabs.nav-center li {  text-align:left; }
.well.well-steps button:not(.btn-primary) {background-color: inherit;}
.center-pills { display: inline-block; }


/* USING THESE FOR PRINT ONLY COLUMNS */
@media print {
	.col-print-12 { width: 100% !important; }
	.col-print-11 {  width: 91.66666666666666% !important; }
	.col-print-10 {  width: 83.33333333333334% !important;  }
	.col-print-9 {  width: 75% !important;  }
	.col-print-8 {  width: 66.66666666666666% !important;  }
	.col-print-7 {  width: 58.333333333333336% !important;  }
	.col-print-6 {  width: 50% !important;  }
	.col-print-5 {  width: 41.66666666666667% !important;  }
	.col-print-4 {  width: 33.33333333333333% !important;  }
	.col-print-3 {  width: 25% !important;  }
	.col-print-2 {  width: 16.666666666666664% !important; }
	.col-print-1 {  width: 8.333333333333332% !important;  }
}


.row.vertical-dividers>[class*='col-']:not(:last-child):after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

.equal-heights {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

.equal-heights > [class*='col-'] > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.equal-heights .fill-flex {
	flex-grow: 1;
}

.equal-heights > [class*='col-'] {
    margin-bottom: 20px;
}

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
.cursor-default {cursor: default;}
.cursor-help{cursor:help;}


/* FROM BOOTSTRAP 4 */
.font-weight-bold {font-weight: bold;}
.font-weight-normal {font-weight: normal;}
.font-weight-light {font-weight: lighter;}
.font-italic {font-style: italic;}

/* REMOVE VIDEO DOWNLOAD */
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

.dl-horizontal-compact dt { width: 100px;}
.dl-horizontal-compact dd { margin-left: 120px; }


.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
    .text-xs-left { text-align: left; }
    .text-xs-right { text-align: right; }
    .text-xs-center { text-align: center; }
    .text-xs-justify { text-align: justify; }
	 .dl-horizontal-compact dt { width: auto;}
	 .dl-horizontal-compact dd { margin-left:0; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }

}

@media (min-width: 992px) and (max-width: 1199px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}


table.table-middle>thead>tr>td,table.table-middle>thead>tr>th,
table.table-middle>tbody>tr>td,table.table-middle>tbody>tr>th,
table.table-middle>tfoot>tr>td,table.table-middle>tfoot>tr>th {
    vertical-align: middle !important;
}


/* CSS Counter for automatically counting elements (functions like ol but for non-lists)

Add with-counter class to the element that is an ancestor of the elements that get counted.
E.g. for table rows, it could be tbody, table.

Add with-counter-element class to the elements that we want to add numbering to.
The numbering will be added before the content of that element.
*/
.with-counter {
    counter-reset: var 0;
}

.with-counter .with-counter-element::before {
    counter-increment: var;
    content: counter(var);
}


.pagination-no-margins {
	margin-bottom: 0;
	margin-top: 0;
}

/* CSS for events list (meetings, calls, etc) */
.meeting-row {
    border-radius: 1em;
    padding: .5em 1em;
    display: block;
    margin-bottom: .3em;
    color: inherit;
    text-decoration: inherit;

}

.meeting-row:hover {
    background-color: #eee;
}

.meeting-row p {margin: 0;}
.meeting-row.text-muted {
    color: #999;
}

.meeting-day {
    line-height: 2.3em;
    height: 2.3em;
    width: 2.3em;
    display: inline-block;
    text-align: center;
    margin-top: -1.3em;
    border-radius: 50%;
    font-size: 1.2em;
	 background-color: #eee;

}

.meeting-day.current-day {
	color: #fff;
	background-color: #3379B7 !important;
}

.meeting-now, .meeting-day.meeting-now {
    background-color: #3379B7 !important;
}

/* HIDES COLOUR UNTIL HOVER */
.btn-color-hover {
	background-color:#fff;
	border-color: #ccc;
	color: #333;
}


.pager-badges {
	text-align: left;
	margin: 0;
	padding: 7px 0;
}

.pager-badges li {
	margin-right: 2px;
}

.pager-badges li a {
	font-size: 12px;
}


.badge-light {
	background-color: #fff;
	color: inherit !important;
	font-weight: normal;
	border: 1px solid #ccc;
	padding: 7px 14px;
	margin-right: 7px;
	margin-bottom: 3px;
	cursor: default;
}


@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
    max-width:1200px;
  }
}


.text-overflow-hover:hover {
	overflow: visible;
	white-space: normal;
	height: auto;
}

@media (min-width: 768px) {
  .modal-xxl {
    width: 90%;
    max-width: 90%;
  }
}

.books-inner .item > div { line-height: 280px; margin:4px; text-align: center;}
.books-inner .item .img-thumbnail { max-height: 300px; margin: .5em 0; }
.img-responsive-max { min-width: 100%; }

.force-wrap-if-needed {
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
	word-break: break-word !important;
}

span.form-control-static {display: inline-block;}

/* THIS IS GREAT! */
.table-responsive.table-start-right { direction: rtl; }
.table-responsive.table-start-right table { direction: ltr; }
.table-top-header {background-image: linear-gradient(to top, rgba(0,0,0,.09), rgba(0,0,0,.01));}

label.label-btn { cursor: pointer; }


.has-hx-spinner i.fa-spin, .htmx-indicator  {
    display: none;
}

.has-hx-spinner.htmx-request i.fa-spin {
    display: inline-block;
}

 .htmx-request .htmx-indicator, .htmx-request.htmx-indicator,
 .htmx-settling .htmx-indicator, .htmx-settling.htmx-indicator {
	  display: inline-block;
 }


ul.dropdown-menu li > button.btn {
	text-align: left;
	padding: 3px 20px;
	color: inherit !important;
}

ul.dropdown-menu li > button.btn:hover {
	text-decoration: none ;
	background: #eee;
}



#tm-consent-banner {
	position: fixed;
	bottom:0; right:0;
	margin-bottom: 20px;
	margin-right: 20px;
	z-index: 9999;
}

#tm-consent-banner >.panel {
	max-width: 25em; box-shadow: 0 5px 39px -10px rgba(0, 0, 0, 0.10);
}


.label-2x {padding: .6em 1em !important; display: inline-block; margin: 2px;}


/* Hack to "remove" backdrop so that nested dropdowns
   can be closed while clicking within the higher-level dropdowns
*/
.subheader-menu > .dropdown-menu .dropdown-backdrop {
    display: none;
}

.subheader-menu > .dropdown-menu {
    padding: 0;
    /* Need to re-apply the 2px margin top to the children
       so that we don't have too much empty space when the dropdown
       is empty in certain situations.
    */
    margin: 0;
    border: 0;
}


@media (min-width: 768px) {
    .subheader-menu > .dropdown-toggle {
        display: none;
    }

    .subheader-menu > .dropdown-menu {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%;
        border-color: transparent;
        background-color: transparent;
        gap: 0.75rem;
        box-shadow: none;
        top: unset;
        z-index: 900;
    }

    .subheader-menu > .dropdown-menu > li {
        margin-top: 2px;
    }

    .subheader-menu > .dropdown-menu > li > a {
        color: #fff;
        padding: 10px 15px;
        margin-bottom: -1px;
        border-radius: 4px 4px 0 0;
    }


    .subheader-menu > .dropdown-menu > li:hover > a,
    .subheader-menu > .dropdown-menu > li > a:focus {
        color: #444;
        background-color: rgba(255, 255, 255, 0.7);
    }


    .subheader-menu > .dropdown-menu > li > a.active,
    .subheader-menu > .dropdown-menu > li.active > a {
        color: #444;
        background-color: #fff;
    }
}


@media (max-width: 768px) {

    /* Should remove the bottom gap between the active tab and button */
    #sub-header {
        margin-bottom: -1px;
    }

    /* Forces the alignment since the dropdown menu has a float which is unset */
    .subheader-menu:not(.open) {
        display: flex;
        column-gap: 0.5rem;
    }


    .subheader-menu > .btn.dropdown-toggle {
        /* Match margin top of the dropdown menu so that when the
           dropdown menu is opened, the same amount of space is still consumed
           by the button preventing height of the subheader from changing
        */
        margin-top: 2px;
        color: #fff;
    }

    .subheader-menu > .btn.dropdown-toggle,
    .subheader-menu > .btn.dropdown-toggle:active {
        padding: 10px 15px;
        margin-bottom: 0;
        background-color: transparent;
        border: 0;
        border-radius: 4px 4px 0 0;
    }

    .subheader-menu.open > .btn.dropdown-toggle {
        background-color: #fff;
        color: #444;
    }

    .subheader-menu > .btn.dropdown-toggle:hover {
        background-color: rgba(255, 255, 255, 0.7);
        color: #444;
    }

    /* Icons for the dropdown toggle */
    .subheader-menu > .dropdown-toggle > i:last-of-type,
    .subheader-menu.open > .dropdown-toggle > i:first-of-type {
        display: none;
    }

    .subheader-menu.open > .dropdown-toggle > i:last-of-type {
        display: inline-block;
    }

    /* Remove border and shadow when the menu isnt't open */
    .subheader-menu:not(.open) > .dropdown-menu {
        border: 0;
        box-shadow: none;
        margin-top: 2px;
    }

    .subheader-menu.open > .dropdown-menu {
        /* Attempt to increase the dropdown size for easier clicks in mobile */
        width: 75%;
        margin-top: 2px;

        /* Reset style of dropdown, needed to be unstyled when collapsed
           to show up as a tab
        */
        position: absolute;
        float: left;
        border: 1px solid #ccc;
    }

    .subheader-menu > .dropdown-menu {
        display: inline-block;
        position: relative;
        float: unset;
        min-width: unset;
        border-radius: 4px 4px 0 0;
    }

    .subheader-menu > .dropdown-menu > li {
        display: none;
    }

    .subheader-menu.open > .dropdown-menu > li {
        display: block;
    }

    .subheader-menu.open .dropdown-menu li a {
        padding: 0.75rem;
    }

    .subheader-menu > .dropdown-menu > li:has(> a.active),
    .subheader-menu > .dropdown-menu > li.active {
        display: block;
        background-color: #fff;
        border-radius: 4px 4px 0 0;
    }

    .subheader-menu:not(.open) > .dropdown-menu > li.active > a {
        background-color: unset;
        color: #444;
        padding: 10px 15px;
    }

    .subheader-menu.open > .dropdown-menu > li.active > a:focus {
        color: #fff;
    }

    .subheader-menu.open > .dropdown-menu > li > a.active,
    .subheader-menu.open > .dropdown-menu > li.active {
        background-color: #fff;
        border-radius: 0;
    }
}


.htmx-request .htmx-hidden,
.htmx-settling .htmx-hidden { display: none; opacity: 0; }


.htmx-settling .htmx-indicator {
	  transition: opacity 1s ease-in-out;
}

.btn.btn-no-focus:focus {
  outline: none;
  box-shadow: none;
}


.fp-logout-link:hover  .hidden-sm, .fp-logout-link:hover .hidden-ex {
	display: inline !important;
}