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

body {
    display: flex;
    flex-flow: column;
    height: 100%;
}

main {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
}

body header {
    flex: 0 1 auto; /* flex-grow; flex-shrink; flex-basis */
}

body main {
    flex: 1 1 auto;
}

body footer {
    flex: 0 1 auto;
    margin-bottom: 4px;
}

/* 
The above CSS for filling height and sticky footer is from:
https://stackoverflow.com/a/24979148/3938401 
There is an alternate solution by William Ashton here:
https://codepen.io/jwashton/pen/bcf4ac23842b24176757da9c61c20e15
*/

.footer p {
    margin-left: 0px;
}

.message {
    font-size: 20px;
}

.blog-preview, .blog-post {
    font-size: 16px;
}

.btn-xs {
    padding:.25rem .5rem;
    font-size:.875rem;
    line-height:0.75;
    border-radius:.2rem
}

.btn-xxs {
    padding: .15rem .3rem;
    font-size: .875rem;
    line-height: 0.75;
    border-radius: .2rem
}

/* https://codepen.io/sdthornton/pen/wBZdXq <-- material design shadows */
.card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    height: 100%;
}

.card-data {
    min-height: 100px;
}

.card-item {
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    border: 1px solid rgb(148, 148, 148);
}

p.card-item-title {
    margin: 0;
}

p.card-item-title span.person-name {
    font-weight: bold;
}

p.card-item-descr {
    font-style: italic;
    margin-bottom: 0rem;
    font-size: 14px;
}

.card-button-row {
    margin-bottom: 0px;
}

.last-contact-badge .badge {
    font-size: 11px;
}

.btn-add, .btn-gray {
    background: lightgray;
    color: black;
}

.btn-add:hover, .btn-gray:hover {
    background: rgb(184, 184, 184);
    color: black;
}

.reference-list {
    padding-left: 2px;
    border: 1px solid #999999;
    border-radius: 4px;
    margin-top: 4px;
    margin-left: 0;
    padding-bottom: 4px;
}

.reference-list ul.reference-list-unordered-list {
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-top: 1em;
    margin-bottom: 2px;
}

.reference-list-unordered-list {
    padding-left: 0px;
}

.reference-list-unordered-list.card-columns {
    column-count: 2;
}

.reference-list .badge {
    margin-bottom: 0.25rem;
}

.reference-card {
    /* https://getbootstrap.com/docs/4.6/components/card/#card-columns */
    break-inside: avoid;
    display: inline-block;
    width: 100%;
}

.scrollable-cards {
    overflow-y: auto;
    height: 50vh;
}

#application-index {
    margin-top: 0em;
}

#application-index #kanban-cards {
    align-items: stretch;
    flex: 1 1 auto;
    padding-bottom: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

#application-index #kanban-cards .section {
    padding-left: 1em;
    padding-right: 0.5em;
}

#application-index #kanban-cards .section:last-child {
    padding-right: 1em;
}

#application-index #kanban-cards .section .card.kanban-section-card {
    min-width: 390px;
    max-width: 390px;
}

#application-index #kanban-cards .section .card.kanban-section-card .col {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.card-data {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0rem;
    padding-bottom: 0.75rem;
}

.card-body {
    padding: 0;
}

.card-search-input {
    padding-left: 0.25rem;
    padding-right: 0.25rem !important; /* had to add !important to fix issue where modal open tweaked this via inline style for some reason */
    margin-right: 0em !important; /* had to add !important to fix issue where modal open tweaked this via inline style for some reason */
    padding-top: 0.25rem;
    background-color: white;
}

.archive-btn {
    border-radius: 4px;
    background-color: rgb(231, 42, 42);
    color: white;
}

.archive-btn:hover {
    background-color: rgb(161, 29, 29);
    color: white;
}

.dots-btn {
    border-radius: 4px;
    background-color: rgb(243, 243, 243);
    color: black;
}

.dots-btn:hover {
    background-color: rgb(216, 216, 216);
}

.white-text {
    color: white;
}

.tox-tinymce-aux {
    position: relative !important;
    z-index: 1600;
}

.badge.wrap {
    white-space: normal;
}

.h-90 {
    height: 90%;
}

[data-toggle="collapse"] i:before{
    content: "\f070";
}

[data-toggle="collapse"].collapsed i:before{
    content: "\f06e";
}

.add-reference-button {
    margin-top: 0.25em;
    margin-right: 0.25em;
}

.reference-show-hide-btn {
    margin-top: 0.25em;
}

.application-badge {
    cursor: pointer;
    /* don't allow copy/highlight text */
    /* https://stackoverflow.com/a/4407335/3938401 */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.dataTables_filter {
    float: left !important;
}

/* https://github.com/pqina/filepond/issues/343#issuecomment-509500358 */
.filepond--root { font-size: 16px; }
.filepond--item {
    width: calc(50% - 0.5em); /* items at 50% with in grid */
}
div.profile .filepond--item {
    width: 100% !important;
}

div.profile, div.profile img {
    border-radius: 9999em;
}

button.delete-profile-image {
    float: right;
}

.application-submission-iframe {
    height: 500px;
    width: 100%;
}

.ref-form-card-name {
    font-size: 16px;
}

.submitted-text {
    font-size: 14px;
}

.sortable-ghost {
    background-color: rgb(191, 227, 248);
}

.sortable-drag {
    background-color: rgb(235, 235, 235);
    border: 1px solid black;
}

.table td, .table th {
    vertical-align: middle;
}

.btn-tertiary {
    background-color: #833ce0;
    color: white;
}
.btn-tertiary:hover:not([disabled]) {
    background-color: #562299;
    color: white;
}
.btn:hover[disabled] {
    color: white;
}

.badge-dark-blue {
    color: white;
    background-color: #2213cf;
}

input::placeholder,
.form-control::placeholder {
    color: rgb(192, 190, 190);
}

.jotform-table p {
    margin: 0 !important;
}

#view-submission-modal .modal-body {
    overflow-y: auto;
}

.custom-card-field {
    font-size: 14px;
}

#contact-applicant-preview-email-modal .modal-body {
    overflow-y: visible;
}

.section-sort-placeholder,
.section-sort-placeholder td {
    background: rgb(201, 241, 255) !important; /* for sorting, cause table is already striped */
}

.sort-handle {
    cursor: move;
}

.saved-text {
    font-weight: bold;
    font-size: 14px;
    font-style: italic;
}

#todo-attn-table .select2-container {
    width: 100% !important;
    min-width: 300px;
    max-width: 400px;
}

.tox.tox-tinymce {
    min-height: 150px;
}

.clear-input,
.clear-input .input-group-text {
    background-color: transparent;
}

table.sticky-headers th {
    background: white !important;
    position: sticky !important;
    position: -webkit-sticky; /* Safari */
    top: 0; /* Don't forget this, required for the stickiness */
    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.4) !important;
    z-index: 1 !important; /* fixes checkboxes showing over headers */
}
table.sticky-headers.sticky-offset th {
    top: -16px; /* Don't forget this, required for the stickiness */
}

.dataTables_scrollHead { /* fix sticky on datatables scrollX tables */
    background: white !important;
    position: sticky !important;
    position: -webkit-sticky; /* Safari */
    top: 0; /* Don't forget this, required for the stickiness */
    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.4) !important;
    z-index: 1 !important; /* fixes checkboxes showing over headers */
}

#toast-container > div {
    width: 250px !important;
}

/* Override background-color for table-warning to use !important so it works with table-striped */
.table-warning,
.table-warning > td,
.table-warning > th {
	background-color: #ffeeba !important;
}

.stage-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
}

#contact-user-preview {
    padding: 1em;
    border: 1px solid lightgray;
    border-radius: 4px;
}

i.fa, i.fa5, i.fas {
    pointer-events: none;
}

p.application-card-notes {
    margin-bottom: 0;
    font-size: 14px;
    font-style: italic;
}

/*.loading#contact-user-preview-html,
.loading#contact-user-preview-html a,
.loading#contact-user-preview-html a:hover,
.loading#contact-user-preview-html span {
    color: lightgray !important;
}*/

p.ref-category {
    font-size: 14px;
}

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

/* https://www.freecodecamp.org/news/css-only-back-to-top-button/ */
.goToTopBtn {
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    color: #fff;
    background: #000;
    border-radius: 100px;
    white-space: nowrap;
    margin-right: 10px; 
    float: right;
    /* place it at the bottom-right corner */
    position: fixed;
    bottom: 30px;
    right: 30px;
    /* keep it at the top of everything else */
    z-index: 100;
    /* hide with opacity */
    opacity: 0;
    /* also add a translate effect */
    transform: translateY(100px);
    /* and a transition */
    transition: all .5s ease;
}

.transform-scale {
    transform: scaleY(1) !important;
}

.goToTopBtnModal {
    z-index: 1051;
    bottom: 80px;
    transform: none;
}

.showGoToTopBtn {
  opacity: 1;
  transform: translateY(0)
}

.goToTopBtn:hover {
    text-decoration: none;
    color: white;
}

html,
body {
  scroll-behavior: smooth;
}

.h-0 {
    height: 0;
}

.no-vertical-align {
    vertical-align: 0;
}

.mt-slight-contact {
    margin-top: -1px;
}

.mt-slight-contact .contact-person-btn {
    padding-right: 0.4rem;
    padding-left: 0.6rem;
}

.nowrap {
    white-space: nowrap;
}

#login-auth {
    background-color: rgb(246, 246, 246);
}

.app-on-hold {
    background-color: #ffeeba; /** same as .table-warning */
}

.select2-container li.select2-results__option[aria-disabled="true"] {
    color: rgb(193, 193, 193);
}

.sort-dropdown {
    z-index: 1025; /* has to show above search boxes with .sticky-top (bootstrap util) which have a z-index of 1020 */
}

nav.navbar .dropdown-menu {
    z-index: 1026; /* make top navbar menus show above sorting dropdowns */
}

.sort-dropdown .dropdown-toggle {
    vertical-align: bottom !important;
}

.sort-dropdown .fa5-long-arrow-alt-down {
    margin-right: 2px;
}

.border-collapse {
    border-collapse: collapse !important;
    border: none !important;
}

.top-align {
    
}

.display-inline {
    display: inline;
}

select[readonly].select2-hidden-accessible + .select2-container {
    pointer-events: none;
    touch-action: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
    background: #eee;
    box-shadow: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
    display: none;
}

.alt-container {
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
}