html {
    min-height: 100%;
}

html,
body {
    height: 100%;
}


.font-weight-bolder {
    font-weight: bolder !important;
}

.tribute-container {
    position: relative;
    background: #FFF;
    min-height: 100%;
    padding-bottom: 60px;    
}

.footer-pager {
    position: fixed;
    right: 0;
    bottom: 56px;
    left: 0;
}

.footer-pager-col {

    padding-top: 10px;
    background-color: #FFF;
    background-color: rgba(255, 255, 255, 0.9);

}

/*gives tribute content a bit of breathing space on smaller screens*/
.tribute-content-col{
    padding-bottom:100px;
}

.pod-margin {
    margin-bottom: 3.5rem !important;
}
.pod-row .h-custom-headline {
    text-align: center;
    margin-bottom: 1.5rem;
}
.col-with-pager {
    margin-bottom: 50px;
}

.fixed-footer-image {
    position: fixed;
    right: 0;
    bottom: 56px;
    left: 0;
}
.row.footer-image {
    position: relative;
    width: 450px;
    height: 333px;
    background-repeat: no-repeat;
    opacity: .15;
}
.fixed-footer-image .footer-image-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 450px;
    height: 333px;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.39) 44%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.85) 63%);
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.39) 44%,rgba(255,255,255,0.4) 45%,rgba(255,255,255,0.85) 63%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.39) 44%,rgba(255,255,255,0.4) 45%,rgba(255,255,255,0.85) 63%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d9ffffff',GradientType=1 );
}


.glimpse-nowrap {
    z-index: 10000;
}

.text-break {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/*
    fancybox applies body.compensate-for-scrollbar, so we have to nudge our 2 fixed images too, otherwise
    they dont move & a 17px gap opens up
*/

body.compensate-for-scrollbar  .fixed-footer-image{
    right: 17px;
}

.footer-container {
    background: #fff;
    border-top: 1px solid #ccc;
    height: 56px;
}
.footer-container nav {
    font-size: 1rem; /*dont want tribute theme to muck with font size*/
}

/*btn-light buttons in the footer needs a bit more emphasis*/
    .footer-container .btn-light {
        border-color: #212529
    }
    /*
    set up a 16:9 video player
*/
    .video-wrapper {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
.video-wrapper video,
.video-wrapper .video-not-ready {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
}


.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
}

.sixteen-by-nine.aspect-ratio {
    padding-bottom: 56.25%;
    background: #000;
    border-radius: 6px;
}

.video-thumbnail-wrapper .video-thumbnail-wrapper-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    border-radius: 6px;
}

.video-thumbnail-wrapper .video-thumbnail-wrapper-inner img {
    max-height: 100%;
    max-width: 100%;
}

.video-thumbnail-wrapper.no-thumbnail .sixteen-by-nine.aspect-ratio {
    background-color: #9d9d9d;
}

#video-playlist .video-thumbnail-wrapper {
    width: 166px;
    min-width: 166px;
}
#video-playlist li.selected div.h4 {
    font-weight: 500;
}

ul.playlist,
ul.pod-chapter-list {
    padding: 0;
}

ul.playlist li,
ul.pod-chapter-list li {
    list-style-type: none;
    margin-bottom: 3px;
}
ul.playlist a.playing {
    font-weight: bold;
}


#homepage-carousel .carousel-item {
    height: 428px;
    /*ghetto way of vertically centering images smaller than 420px tall
      the extra 8px is to take into account the 8px padding of .img-thumbnail, so border is not cropped
    */
    line-height: 428px;
}

#homepage-carousel img {
    max-height: 420px
}



.created-by-text {
    font-size: 80%;
    font-weight: 400;
}

.activityfeed {
    font-size: 0.8125rem;
}

.activityfeed  .activitytext {
    padding-left: 20px;
}

.activityfeed  .activitydate {

    display: block;
    font-size:  0.8125rem;
}

.activityfeed .activityfeeditem {
    position: relative;
    margin-bottom: 16px;
    word-wrap: break-word;
}

.activityfeed  .activityfeeditem .icon {
    position: absolute;
    left: 0;
    top: 4px;
}


.homepage-image-pod-col {
    overflow: hidden;
    max-height: 100px;
}

.h-custom-headline {
    overflow: hidden;
}
.h-custom-headline>span {
    padding-bottom: 2px;
    display: inline-block;
    position: relative;
}
.h-custom-headline>span:before, .h-custom-headline>span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    display: block;
    margin-top: 0;
    border-top: 1px solid rgba(0,0,0,0.25);
}
.h-custom-headline>span:before {
    right: 100%;
    margin-right: 0.75em;
}
.h-custom-headline>span:after {
    left: 100%;
    margin-left: 0.75em;
}





/*used on design font picker*/
.font-sansserif,
.font-serif
{
    font-size: 1rem !important;
}

.font-sansserif-smaller,
.font-serif-smaller 
{
    font-size: 0.875rem !important;
}

.font-sansserif,
.font-sansserif-smaller{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.font-serif,
.font-serif-smaller{
    font-family: Georgia, Times, "Times New Roman", serif !important;
}


.image-gallery-item {
    display: inline-block;
    width: 200px;
    margin-bottom: 30px;
}

.candle-gallery-item {
    display: inline-block;
    margin-bottom: 20px;
    width:100%;
}

hr.item-divider {

    margin-left: 15%;
    margin-right: 15%;
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, #f0f0f0, #c1c1c0 , #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #c1c1c0 , #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #c1c1c0 , #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #c1c1c0 , #f0f0f0); 
}

.panel-form {
    padding: 20px;
    background-color: #fcfcfc;
    border-radius: 6px;
    box-shadow: 0 2px 2px #ddd;
}

/*sometimes FD paste a table into funeral details with a width attribute, breaking layout*/
.funeral-details table{
    width:auto !important;
}

.funeral-location span {
    white-space: pre-line;
    font-size:0.875rem;
}
.funeral-location-lg span {
    white-space: pre-line;
}

a.btn-get-directions {
    font-size: 0.875rem;
}

.funeral-map img {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.funeral-map{
    max-width:350px;
}

.pre-wrap {
    white-space: pre-wrap;
}

.pre-line {
    white-space: pre-line;
} 
.break-word {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.info-slider.heading {
    cursor: pointer;
    border-bottom: 1px dotted #AAA;
}

.info-slider.panel {
    padding: 8px;
    font-style :italic;
}

ul.chapter-list {
    list-style: none;
    padding: 0;
}
ul.chapter-list li {
    list-style-type: none;  
    margin-bottom: 12px;
}



ul.chapter-list.intellimenu-size li {
    font-size:  1.25rem;
    font-weight: 300;
}


ul.chapter-list.intellimenu-size li .icon {
    font-size: 22px;
}


.ml-icon-link {
    position: relative
}
.ml-icon-link .icon {
    position: absolute;
}
.ml-icon-link.ml-icon-link-left .icon {
    top: 5px;
    left:0;
}
.ml-icon-link.ml-icon-link-right .icon {
    top: 5px;
    right:0;
}
.ml-icon-link.ml-icon-link-left .link-text {
    padding-left: 20px;
}
.ml-icon-link.ml-icon-link-right .link-text {
    padding-right: 20px;
}

.required-asterisk {
    color: red;
    padding-left: 5px;
}

.qq-thumbnail-selector {
    vertical-align: top;
    float: left;
}

.qq-upload-status-text-selector {
    margin-top: 12px;
}

.ml-file-name,
.ml-spinner,
.ml-file-caption {
    margin-left: 120px;
    margin-bottom: 4px;
    display: block;
}

.ml-file-caption {
    display: none;
}

dialog {
    border: 1px solid #dbdbdb;
    border-radius: 4px;
}





.resp-sharing-button {
    font-size: 22px;
    padding: 19px 19px 19px 19px  !important;
}

.resp-sharing-button__icon {
    top: 8px !important;
    left: 8px !important;
}


a.tg-edit-link {
    position: absolute;
    right: 0;
    top: -5px;
    display: none;
    width: 16px;
    height: 16px;
    margin-right: -18px;
    background-image: url(../img/icons/tg-edit-link.gif);
    z-index: 900;
    -webkit-transition: .4s;
    transition: .4s;
    opacity: 0;
    visibility: hidden;
}

span.tg-edit-link {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(/MuchLoved.Web.UI/client/tribute/img/icons/tg-edit-link.gif);
}

.row a.tg-edit-link {
    margin-right: 1px;
}

.row a.tg-edit-link.left-edge-edit-link {
    margin-right: 1px;
}

.image-gallery-item a.tg-edit-link {
    margin-right: -20px;
}

/*special case for the tribute title row, which because it's in a full width top level row the edit link
    would overhang the drop shadow container without this fix
*/
.tribute-title-row a.tg-edit-link {
    top: 2px;
}

.card a.tg-edit-link {
    top: 1px;
    right: 0;
}

.chk-editmode-label {
    background-image: url(../img/icons/tg-edit-link.gif);
    background-repeat: no-repeat;
    background-position-y: 50%;
    cursor: pointer;
}

.contribution-count-disc {
    position: absolute;
    top: 0;
    right: 2px;
    min-width: 10px;
    padding: 2px 5px 2px 5px;
    background-color: #5cb85c;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1;
  
}

.fa-image-icons {
    font-size: 14px;
}

.fa-image-icons .fa-link {

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);

}

.validation-summary-errors ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.validation-summary-errors ul li {
    list-style-type: none;
}

/*fix for bootstrap borking kendo radio styling*/
.k-radio:checked+.k-radio-label:after {
    top: 2px!important;
    left: 2px!important
}

.totaliser-preview {
    box-sizing: content-box;
}

.event-totaliser-picker {
    padding: 1rem;
    background-color: #eaeaea;
    border-radius: 0.25rem;
}



.form-control.money-box {
    width: 100px;
    padding-left: 20px;
}

.form-control.money-box.gbp {
    background-image: url("../img/pound.png");
    background-repeat: no-repeat;
    background-position: 2px 6px
}

.form-control.money-box.usd {
    background-image: url("../img/dollar.png");
    background-repeat: no-repeat;
    background-position: 2px 6px
}

.form-control.money-box.euro {
    background-image: url("../img/euro.png");
    background-repeat: no-repeat;
    background-position: 2px 6px
}


.blogpost-image {   
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    float: right;
}
.blogpost-image img {
    max-width: 155px;
    max-height: 155px;
}

.block-partner-logos a {
    display: block !important;
    margin-bottom: 30px;
}

.inline-block-partner-logos a {
    display: inline-block;
    margin: 15px;
}

.tg-edit-only {
    -webkit-transition: .4s;
    transition: .4s;
    opacity: 0;
    visibility: hidden;
}

body.tg-edit-links-on .tg-edit-only {
    opacity: 1;
    visibility: visible;
}


.activityfeeditem  .hideactivity 
{
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
}

.prewrap {
    white-space: pre-wrap;
    word-wrap: break-word;
}


.btn-loading {
    background-image: url(../img/loading.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent !important;
}

.primary-loading {
    display: inline-block;
    background-image: url(../img/loading.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0) saturate(100%) invert(44%) sepia(84%) saturate(5751%) hue-rotate(201deg) brightness(104%) contrast(103%); /*https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element https://codepen.io/sosuke/pen/Pjoqqp*/
    width: 24px;
    height: 24px;
}

.loading-dark {
    display: inline-block;
    background-image: url(../img/loading-dark.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 0.25rem;
    color: transparent;
    width: 20px;
    height: 20px;
}

.nowrap {
    white-space: nowrap !important;
}

img.gift-image {
    max-width: 100%;
}

img.gift-pod-image {
    width: 60px;
    height: 60px;
    border-radius: 2px;
}

.gifts-grid .gift-message {
    max-height: 500px;
    overflow: hidden;
}


.grid-item-content.card {
    margin-bottom: 30px;
}

.gifts-grid a.grid-item {
    color: inherit;
}

/* a companion to boostrap's .small class, which shrinks text by 80%
 this boosts the line-height back to pre .small size, which is needed when we float a small span
next to a regular span, but want the 2 to line up.
    e.g in a gift footer with <span>sent by</<span><span class="small">date</span>
*/
.small-line-height-booster {
    line-height: 184%;
}

.donation-gallery-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 0.25rem;
}


.tribute-card {
    border-radius: 0;
    border-color: rgba(0, 0, 0, .03);
}
.tribute-card .card-header {
    border-color: rgba(0, 0, 0, .03);
}

a.social-popover-link:hover {
    cursor: pointer;
}
a.social-popover-link:active,
a.social-popover-link:focus {
    outline: 0;
}

.gift-image-container{
    min-height:1px;
}
.donation-event-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.border-divider {
    border-top: 1px solid rgba(0,0,0,0.25);
}


a.dropdown-item .icon{
    padding-right: 0.25rem;
}
.tribute-navbar-toggler{
    padding:1px 6px;
    font-size:1.125rem;
}


.bg-light-translucent {
    background-color: #f8f9faaa !important;
}

#tg-welcome-alert p{
    margin-bottom:0.5rem;
}

/*
    https://illow.freshdesk.com/support/solutions/articles/73000636948-advance-settings-to-edit-the-position-of-the-illow-banner-widget
*/
iframe#bigidcmp-banner-widget {
    bottom: 43px !important;
}

@media (min-width: 1260px) {
    .row.footer-image {
        opacity: 1;
    }

    .fixed-footer-image .footer-image-overlay {
        display: block;
    }

    .chapter-pager {
        padding-left: 300px;
    }

    .text-xl-center {
        text-align: center !important;
    }


}




@media (max-width: 992px) {
    .image-gallery-item {
        width: 180px;
    }

   
}


@media (min-width: 992px) {

    a.tg-edit-link {
        display: block;
    }

   body.tg-edit-links-on a.tg-edit-link {
       opacity: 1;
       visibility: visible;
    }
}


@media (min-width: 768px) {
    .tribute-title-row {
        margin-top:0.8em;
    }

    .bg-md-light {
        background-color: #f8f9fa !important;
    }
   
}

@media(min-width: 576px) {
    div.box-shadow-md:before {
        box-shadow:  inset -8px 0 8px -8px rgba(80,80,80,1);
        content: " ";
        height: 100%;
        left: -15px;
        position: absolute;
        top: 0;
        width: 15px
    }

    div.box-shadow-md:after {
        box-shadow: inset 8px 0 8px -8px rgba(80,80,80,1);
        content: " ";
        height: 100%;
        position: absolute;
        top: 0;
        right: -15px;
        width: 15px
    }


   
}


@media(max-width: 575px) {

    .hidden-tribute-title-row{
        display:flex !important;
    }
    .tribute-title-row,
    .hidden-tribute-title-row {
        margin-bottom: 1rem;
    }
        .fixed-tribute-title-row{
            z-index: 1040;
            position: fixed !important;
            top: 0;
            right: 15px;
            left: 15px;
        }
        .tribute-title-row h1,
        .hidden-tribute-title-row h1 {
            font-size: 2rem;
            margin-bottom: 0;
        }
    .tribute-title-row h1 a {
        color: #fff !important;
    }
            .tribute-title-row h1 a:hover {
                color: #eee !important;
            }
    .tribute-title-row  .h-custom-headline span:before,
    .tribute-title-row  .h-custom-headline span:after{
        border-top: none;
    }
}

@media (max-width: 485px) {
    .image-gallery-item {
        width: 160px;
    }

    .qq-thumbnail-selector {
        float: none;
    }
    .ml-file-caption {
        margin-left: 0;
        margin-top: 1rem;
    }

   
}


@media (max-width: 425px) {
    .image-gallery-item {
        width: 200px;
    }
  
    #homepage-carousel .carousel-item {
        height: 318px;
        line-height: 318px;
    }

    #homepage-carousel img {
        max-height: 310px
    }
  
}