/*@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');*/
@import "fonts.css";
@import "colors.css";
@import "icons.min.css";

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# CSS Variables
# Spacing
# Typography
# Navigation
# Links, Buttons and Badges
# Forms
# Carousel
# Tables
# Breadcrumbs
# Dashboard
# Event Details
# Invites
# Resource Content and Index (index and content pages for blogs, press, news postings)
# Site Map
# Featured
# Wishes Medley Page
# Wishes Styling
# Others
# Footer
# Media Queries for different screen sizes
# About Us
# Invitation Style Selection Modal
# Invitation status progress bars
# Spinner
# Jquery Validator
# Admin Console
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
    --btn-min-wid: 135px;
    --btn-wid-100: 100px;
    --btn-ptb: 8px;
    --btn-radius: 7px;
    --btn-other-radius: 7px;

    --input-radius: 7px;

    --btn-dark-grey-color: #FFFFFF;
    --btn-dark-grey-border: 2px solid #4D7488;
    --btn-dark-grey-bg: #4D7488;

    --invite-text-color: #000000;
    --invite-lh: 11pt;

    --wish-img-size: 120px;

    --aspect-ratio: 41/27; /* Bg images are 820x540 */
}

/*--------------------------------------------------------------
# Spacing, Dimensions & Alignment
--------------------------------------------------------------*/

.pl-0{
    padding-left: 0px;
}

.h-60{
    height: 60%;
}

.section-pb-1{
    padding-bottom: 1px;
}

.mb-half-rem{
    margin-bottom: 0.5rem !important;
}

/* To vertically align column contents */
.vert-align-col{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.mb-pull-5 {
    margin-bottom: -5px;
}

html {
    scroll-behavior: smooth !important;
    height: 100%;
    margin: 0;
}

.space-evenly {
    display: flex;
    justify-content: space-evenly;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

body, h1, h2, h3, h4, h5, p, a, label, small, input, ul>li, ol>li{
    font-family: Montserrat;
}

body{
    color: #4D7488;
    height: 100%;
    /* Sticky footer */
    display: flex;
    flex-direction: column;
    /*****************/
    /*margin: 0;*/
}

h1{
    font-size: 24pt;
}

h2{
  font-size: 20pt;
  line-height: 28pt;
  color: #4D7488;
  margin: 0 0 20px 0;
}

h2.howitworks{
    margin: 15px 0 10px 0 !important;
}

h3{
  color: #4EABDE;
  font-size: 18pt;
  line-height: 26pt;
  font-weight: 500;
  margin: 15px 0;
}

h4{
  color: #4EABDE;
  font-size: 14pt;
  font-weight: 500;
  margin: 10px 0 15px 0;
  line-height: 22pt;
}

h4.grey{
    color: #4D7488;
}

h5{
  color: #4EABDE;
  font-size: 12pt;
  font-weight: 700;
  line-height: 20pt;
  margin: 10px 0 10px 0;
}

p, ul>li, ol>li, .toc{
  color: #688796;
  font-size: 11pt;
  font-weight: 500;
  line-height: 20pt;
}

p{
  margin-bottom: 15px;
}

a{
  color: #4EABDE;
  font-weight: 500;
}

a:hover{
  color:#4D7488;
  text-decoration: none;
}

.emphasised{
  font-weight: 700;
  color: #0d60ff; /* Blue */
}

small{
  opacity: 0.7;
  font-weight: 500;
  font-size: 12px;
  color: #4D7488;
  line-height: 20px;
}

.text-muted{
    color: #BBCAD2 !important;
    font-weight: 500 !important;
}

.text-muted-1 {
    /*color: rgb(101, 117, 126) !important;*/
    color: rgb(56, 84, 98) !important; /* #385462, (22% red, 32.9% green, 38.4% blue) */
    font-weight: 600 !important;
}

.font-control{
  font-size: 9pt;
}

/* For sticky footer and being able to push it */
.wrapper {
    flex: 1 0 auto;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.page-header{
  border-top: 3px #4EABDE solid;
}

.navbar-fundzzle .navbar-nav .nav-link{
  color: #4D7488;
  font-family: Montserrat;
  font-size: 11pt;
  font-weight: 600;
  text-transform: uppercase;
  padding: 15px 0;
}

.navbar-light .navbar-toggler{
  border: none;
}

.navbar-fundzzle .navbar-nav .nav-link:hover{
  color: #4EABDE;
}

.navbar-fundzzle .show>.nav-link{
  color: #E74850 !important;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

/* make sure it doesn't stick */
.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

.navbar-fundzzle .dropdown-item{
  font-weight: 500;
  color: #4D7488;
}

.navbar-fundzzle .dropdown-item:hover{
  color: #4EABDE;
}

.header-logo{
  max-height: 55px;
}

/*--------------------------------------------------------------
# Links, Buttons and Badges
--------------------------------------------------------------*/
.btn-link{
  color: #4EABDE;
  font-weight: 500;
}

.btn-link:hover{
  text-decoration: none;
  color: #4D7488;
}

.print-link, .test-email-link, .diary-link {
  font-weight: 400;
  color: #4D7488;
  font-size: 12px; /* MRB changed from 14px */
  border: 1px #4D7488 solid;
  padding: 2px 5px;
  border-radius: 3px;
}

.print-link:hover, .test-email-link:hover, .diary-link:hover {
  background: #4EABDE;
  color: #ffffff;
  border-color: #4EABDE;
}

a.disabled, button.disabled { /* This is because you cannot disable a link like you can a button */
    opacity: 0.4 !important;
    pointer-events: none;
    cursor: default;
}

.diary-link::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-right: 5px;
    content: "\f073" !important; /* fa-calendar */
}

.sub-type {
    color: #4EABDE !important;
    font-weight: 500 !important;
}

.sub-type:hover{
    cursor: pointer;
}

.print-link::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-right: 5px;
    content: "\f02f" !important; /* fa-print */
}

.test-email-link::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-right: 5px;
    content: "\f2b6" !important; /* fa-envelope-open */
}

.menu-tile, .stat-tile {
    background: #F6F8FA;
    border: 1px solid #DEE6E9;
    border-radius: 10px;
    height: auto;
}

.menu-tile-not-selectable{
    background: #F6F8FA;
    border: 1px solid #DEE6E9;
    border-radius: 10px;
    height: auto;
  }
  
.tile-centre-image{
    display: block;
    margin-left: auto;
    margin-right: auto;    
}

.tile-x-space{
    margin-right: -12px;
}
.tile-other-space{
    width: 50% !important;
    align-content: center;
    /*padding-left: 32px;*/
    /*padding-right: 22px;*/
}

.mr-adjust{
    margin-left: inherit; /* A bit of a hack */
}

.menu-tile:hover{
  background: #FAFDFE;
  border: 1px solid #D7E0E5;
  box-shadow: 0 2px 5px 0 #D7E0E5;
  border-radius: 10px;
}

.menu-tile:focus{
  background: #FFF5F6;
  border: 1px solid #E1C4C5;
  box-shadow: 0 2px 5px 0 #FFDCDD;
  border-radius: 10px;
}

.menu-tile .label{
  color: #4D7488;
  font-weight: 600;
  font-size: 14px;
}

.select-charity {
    text-align: center;
    margin-top: -10px;
    font-size: 11px;
}

.btn-fundzzle {
    color: #FFFFFF;
    font-family: Montserrat;
    font-weight: 600;
    border-color: #E74850;
    background: #E74850;
    border-radius: var(--btn-radius);
    min-width: var(--btn-min-wid);
    text-transform: uppercase;
    padding: var(--btn-ptb);
}

.btn-fundzzle-border {
    border-style: solid;
    border-width: 3px;
    border-color: #E74850 !important;
}

.btn-fundzzle.btn-diary {
    color: var(--btn-dark-grey-color);
    border: var(--btn-dark-grey-border);
    background: var(--btn-dark-grey-bg);
}

.btn-fundzzle.btn-diary:hover {
    color: var(--btn-dark-grey-color);
    border: var(--btn-dark-grey-border);
    box-shadow: 0 2px 5px 0 rgb(55, 83, 97);
  }
  
.btn-fundzzle.inactive {
    color: #FFFFFF;
    font-family: Montserrat;
    font-weight: 600;
    border-color: rgb(230, 113, 119);
    background: rgb(230, 113, 119);
    border-radius: var(--btn-radius);
    min-width: var(--btn-min-wid);
    text-transform: uppercase;
    padding: var(--btn-ptb);
}

.btn-fundzzle.small {
    color: #FFFFFF;
    border-color: #E74850;
    background: #E74850;
    border-radius: var(--btn-other-radius);
    padding: 0 10px;
    font-size: 12px;
    margin: 0;
    height: 35px;
}

.btn-fundzzle.small.close-btn {
    color: #4D7488;
    background: #F2FBFF;
    border: 2px solid #CEE2EC;
}

.btn-fundzzle-modal {
    color: #FFFFFF;
    border-color: #E74850;
    background: #E74850;
    border-radius: var(--btn-radius);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    height: 30px;
    max-width: 75px;
    min-width: 75px;
    text-transform: uppercase;
}

.modal-100 {
    max-width: 100px !important;
    min-width: 100px !important;
}

.btn-fundzzle-select-charity {
    color: #FFFFFF;
    border-color: #1692a9;
    background: #1692a9;
    border-radius: 28px;
    padding: 4px;
    font-size: 11px;
    font-weight: 500;
    margin: 0;
    /*height: 30px;*/
    max-width: 100px;
    min-width: 100px;
}

.btn-fundzzle-select-charity:hover {
    color: #FFFFFF !important;
}

.btn-fundzzle-secondary{
  color: #4D7488;
  font-family: Montserrat;
  font-weight: 600;
  background: #E0EFF7;
  border: 3px solid #CEE2EC;
  border-radius: var(--btn-radius);
  min-width: var(--btn-min-wid);
  text-transform: uppercase;
  padding: var(--btn-ptb);
}

.btn-login{
    max-width: 200px !important;
}

.btn-fundzzle-start{
    padding-left: 25px !important;
    padding-right: 25px !important;
}

.invite-img-thumb {
    /* Maintain aspect ratio of background image */
    position: relative;
    padding-top: calc(100% / (var(--aspect-ratio)));

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn-fundzzle-secondary-small-modal{
    color: #4D7488;
    font-family: Montserrat;
    font-weight: 600;
    background: #E0EFF7;
    border: 3px solid #CEE2EC;
    height: 30px;
    border-radius: var(--btn-radius);
    font-size: 12px;
    max-width: 75px;
    min-width: 75px;
    margin: 0;
    padding: 0 10px;
    /*min-width: 135px;*/
    text-transform: uppercase;
    /*padding: 10px 25px;*/
  }

  .btn-fundzzle-secondary-med-modal{
    color: #4D7488;
    font-family: Montserrat;
    font-weight: 600;
    background: #E0EFF7;
    border: 3px solid #CEE2EC;
    height: 30px;
    border-radius: var(--btn-radius);
    font-size: 12px;
    max-width: 100px;
    min-width: 100px;
    margin: 0;
    padding: 0 10px;
    /*min-width: 135px;*/
    text-transform: uppercase;
    /*padding: 10px 25px;*/
  }
  
.btn-fundzzle-floating{
  background: rgba(255,255,255,0.50);
  border: 2px solid #FFFFFF;
  border-radius: 20px;
  color: #4D7488;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
}

.btn-fundzzle-tertiary{
  color: #4D7488;
  font-family: Montserrat;
  font-weight: 600;
  background: #f2fbff;
  border: 2px solid #CEE2EC;
  border-radius: var(--btn-other-radius);
  text-transform: uppercase;
  padding: auto 10px;
  font-size: 12px;
  margin: 0;
  height: 35px;
}

.close-evt-btn,
.btn-fundzzle-tertiary.btn-msg{
    color: var(--btn-dark-grey-color);
    border: var(--btn-dark-grey-border);
    background: var(--btn-dark-grey-bg);
}

.close-evt-btn:hover,
.btn-fundzzle-tertiary.btn-msg:hover{
  color: var(--btn-dark-grey-color);
  border: var(--btn-dark-grey-border);
  box-shadow: 0 2px 5px 0 rgb(55, 83, 97);
}

.close-evt-btn {
    color: #ffffff !important;
}

.btn-fundzzle-tertiary.highlight{
    background: #4EABDE;
    border: 2px solid #4EABDE;
    color: #ffffff;
}
  
.btn-fundzzle-tertiary.highlight:hover{
    background: #4cb9f5;
    border: 2px solid #4cb9f5;
    color: #ffffff;
    box-shadow: 0 2px 5px 0 #4cb9f5;
}
  
.btn-fundzzle-tertiary.destructive{
    background: #c4343b;
    border: 2px solid #c4343b;
    color: #ffffff !important;
}

.btn-fundzzle-tertiary.destructive:hover {
    background: #d7353d;
    border: 2px solid #d7353d;
    color: #ffffff !important;
    box-shadow: 0 2px 5px 0 #c6262d;
}

.btn-fundzzle-tertiary.group-card-btn,
.btn-fundzzle-tertiary.share-link-btn,
.btn-fundzzle-tertiary.whatsapp-btn {
    background-color: #5BE751;
    border: 2px solid #5BE751;
    color: #ffffff !important;
}
  
.btn-fundzzle-tertiary.group-card-btn:hover,
.btn-fundzzle-tertiary.share-link-btn:hover,
.btn-fundzzle-tertiary.whatsapp-btn:hover {
    background: #5BE751;
    border: 2px solid #5BE751;
    box-shadow: 0 2px 5px 0 #409E39;
    color: #ffffff !important;
}
  
.btn-fundzzle-special{
    background: #DEE6E9;
    border: 2px solid #4D7488;
    font-size: 12px;
    font-family: Montserrat;
    font-weight: 600;
    color: #4D7488;
    border-radius: 10px;
    text-transform: uppercase;
    cursor: pointer !important;
}

.btn-fundzzle-secondary:hover, .btn-fundzzle-tertiary:hover,
.btn-fundzzle.small.close-btn:hover {
    color:#4D7488;
    box-shadow: 0 2px 5px 0 #b6cfdb;
}

.btn-fundzzle:hover{
    color: #FFFFFF;
    box-shadow: 0 2px 5px 0 #dd898d;
}

.btn-fundzzle-floating:hover{
    color:#4D7488;
    box-shadow: 0 2px 5px 0 #b6cfdb;
}

.spaced-btn {
    width: 150px;
}

.spaced-btn-164 {
    width: 164px !important;
}

.copy-link-btn,
.invites-and-rsvps-btn {
    background-color: #0d60ff !important;
    border-color: #0d60ff !important;
    color: #ffffff !important
}

.copy-link-btn:hover,
.invites-and-rsvps-btn:hover {
    background: #0d60ff !important;
    border: 2px solid #0d60ff !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px 0 #4a86f7 !important;
}

.btn-fixed-180 {
    width: 180px !important;
}

.user-account-badge .name-badge{
    min-width: 150px;
    max-width: 250px;
    width: auto;
    height: 55px;
    background: #F4F8FA;
    border: 1px solid #D7E0E5;
    border-radius: 100px;
    text-align: left;
    overflow: hidden;
    position: relative;
    padding-left: 65px;
}

.user-account-badge .profile-photo{
  height: 55px;
  width: 55px;
  border-radius: 100px;
  background-color: rgb(135, 135, 135);
  overflow: hidden;
  float: left;
  position: absolute;
  z-index: 100;
}

.founder-photo{
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background-color: rgb(135, 135, 135);
  }

.edit-profile{
    /* Centre image container within div */
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*************************************/
    height: 55px;
    width: 55px;
    border-radius: 100px;
    background-color: rgb(135, 135, 135);
    overflow: hidden;
    /*float: left;*/
    /*position: absolute*/
    z-index: 100;
}

#edit-text.centre-tweak{
    margin-left: 18px;
}
  
.profile-photo img, .edit-profile img{
  width: 100%;
  height: auto;
}

.profile-photo-container{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.user-account-badge:hover{
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 #D7E0E5;
}

.user-account-badge .name-badge .profile-name{
  display: inline-block;
  width: auto;
  padding: 10px 0;
}

.user-account-badge .name-badge .profile-name .welcome{
  font-weight: 600;
  font-size: 12px;
  width: auto;
  line-height: 14px;
  padding-right: 15px;
  margin-bottom: 0;
}

.user-account-badge .name-badge .profile-name .name{
  font-size: 18px;
  color: #4EABDE;
  width: auto;
  padding-right: 15px;
  line-height: 20px;
  margin-bottom: 0;
}

.inline-button{
  font-size: 9pt;
  font-weight: 600;
  padding: 2px 5px;
  margin: 0 5px;
  border: 1px solid #D7E0E5;
  border-radius: 5px;
  text-transform: uppercase;
  cursor: pointer;
}

.inline-button:hover{
  color: #4EABDE;
  box-shadow: 0 1px 3px 0 #DEE6E9;
}

.toggle-button{
  font-size: 9pt;
  font-weight: 600;
  padding: 2px 5px;
  margin: 0 5px;
  text-transform: uppercase;
  cursor: pointer;
  color: #E74850 !important;
}

.toggle-button.open::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  margin-right: 5px;
  content: "\f0d8" !important;
}

.toggle-button.open::after{
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  margin-right: 5px;
  content: "\f0d8" !important;
}

.toggle-button::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  margin-right: 5px;
  content: "\f0d7" !important;
}

.toggle-button::after{
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  margin-left: 5px;
  content: "\f0d7" !important;
}

.toggle-caret::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-right: 5px;
    content: "\f0da" !important; /* fa-caret-right */
}

.toggle-caret.open::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-right: 5px;
    content: "\f0d7" !important; /* fa-caret-down */
}

.call-to-action{
  margin: -20px 0 0 0;
}

.status-pill{
  padding: 5px 10px;
  background-color: #4D7488;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  font-family: Montserrat;
  border-radius: 100px;
  text-transform: uppercase;
  margin: 0 10px;
}

.status-pill.active{
    background-color: #5BE751;
}

.status-pill.ready{
    background-color: #F5BE5C;
}

.status-pill.muted{
    background-color: #A1B5C0;
}

.status-pill.inverse{
    background-color: #D3DDE3;
    color: #4D7488;
}
/* Really should be using SCSS */
.status-pill.accepted {
    background-color: #0d60ff;
}
  
.status-pill.declined{
    background-color: #d11e36;
}
  
.status-pill.viewed{
    background-color: #F5BE5C;
}
  
.status-pill.notviewed{
    background-color: lightgray;
    color: #4D7488;
}

.status-pill.notsent{
    background-color: #1692a9;
}
  
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
label{
  font-size: 11pt;
  font-weight: 500;
  margin: 0;
  color: #4D7488; /* 30.2% red, 45.5% green, 53.3% blue */
}

input[type=text].form-control,input[type=password].form-control{
  height: 35px;
}

select.form-control {
  border-radius: var(--input-radius);
}

input[type=time], input[type=text], textarea.form-control{
  font-family: Montserrat;
  font-size: 9pt;
  font-weight: 500;
  color: #4D7488 !important;
}

.no-time-form-check{
    position: absolute;
    /*margin-top: .2rem;*/
    margin-left: 0;
}

.no-time-form-check-label{
    margin-left: 20px !important;
}

.form-check{
  margin-left: 20px;
  padding-left: 0;
}

input[type=checkbox]{
  background: #FFFFFF;
  border: 3px solid #BBCAD2;
  border-radius: 5px;
}

.textField-label{
    color: #688796;
    font-size: 10pt;
}

.no-img-added {
    color: #D11E36 !important;
}

.img-added {
    color: #5BE751 !important;
}

.text-field-sub-label {
    font-size: 9pt !important;
}

.form-control{
  border-radius: var(--input-radius);
  border-width: 2px;
  border-color: #BBCAD2;
  color: #4D7488;
  font-size: 14px;
  font-weight: 500;
}

.form-control-lg{
    border-radius: var(--input-radius);
    border-width: 2px;
    border-color: #BBCAD2;
    width: 100%;
    border-style: solid;
    color: #4D7488;
    font-weight: 500;
}

.form-control::placeholder, textarea.form-control::placeholder, textarea.form-control-wishes::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #BBCAD2;
    font-size: 10pt;
    font-weight: 500;
    font-style: italic;
    opacity: 1; /* Firefox */
    text-transform: none;
}

.form-control-lg::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #BBCAD2;
    font-weight: 500;
    font-style: italic;
    opacity: 1; /* Firefox */
    text-transform: none;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #BBCAD2;
    font-weight: 500;
    font-size: 10pt;
    text-transform: none;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #BBCAD2;
    font-weight: 500;
    font-size: 10pt;
    text-transform: none;
}

.input-group-prepend .input-group-text {
    border-radius: var(--input-radius);
    border-color: #BBCAD2;
    border-width: 2px 0 2px 2px;
    padding: 0 10px;
}

.input-group-append .input-group-text {
    border-radius: var(--input-radius);
    border-color: #BBCAD2;
    border-width: 2px 2px 2px 0;
    padding: 0 10px;
    /*
        Some strange behaviour that I couldn't figure out. On mobile devices when checking "No end time"
        forcing the hiding of the end date and time, this would grow from 35px to 38px in height causing
        it to become misaligned with the input field. ˘L˘
    */
    max-height: 35px;
}  

p.modal-body-heading {
    margin-bottom: -1px;
    font-weight: 600 !important;
}

.accordion-header p {
    font-size: 1.1rem;
    font-weight: 600 !important;
}

a.sub-type-link.inactive:before{
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-size: 15px;
    font-weight: 900; /* Absolutely need this for content attribute to work in Font Awesome 5 Free */
    color: #4D7488;
    padding-right: 5px;
	transition: all .2s linear;
}

a.sub-type-link.active:before{
	font-family: "Font Awesome 5 Free";
	content: "\f107";
	font-size: 15px;
    font-weight: 900; /* Absolutely need this for content attribute to work in Font Awesome 5 Free */
    color: #4D7488;
    padding-right: 5px;
	transition: all .2s linear;
}

p.sub-type-heading {
    padding: 10px 5px 10px;
    background-color: #F1F1F7;
}

/*--------------------------------------------------------------
# Carousel
--------------------------------------------------------------*/
.carousel-indicators{
  bottom: -20px;
}

.carousel-indicators .indicator{
  background-color: rgb(134, 140, 167);
}

.carousel-indicators .indicator.active{
  opacity: .3;
}

.charity-share{
  font-size: 12px;
}

.border-top{
  border-color: #DEE6E9 !important;
}

.carousel-item .imageContainer, .featured-banner .imageContainer{
  overflow: hidden;
}

.carousel-item .centerImage, .featured-banner .centerImage{
  position: relative;
  height: 100%;
  width: auto;
  margin-left: -25%;
}

.carousel-caption{
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  padding-bottom: 0;
  padding-top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.carousel-caption > h3{
  color: #ffffff;
  font-weight: 600;
  font-size: 12pt;
  line-height: 3px; /* this may seem strange but it gets the height of he background to where I want */
  padding: 0 5%;
}

.carousel-caption > h3 > span{
    text-decoration: underline;
}

.carousel-caption > p{
    color: #ffffff;
    font-weight: 500;
    font-size: 9pt;
    padding: 0 5%;
    line-height: 14pt;
}

/*****************************/
.carousel-fade .carousel-item {
	opacity: 0;
	transition-duration: .6s;
	transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
	opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
	transform: translateX(0);
	transform: translate3d(0, 0, 0);
}
/*****************************/


.slideDescription {
    width: 100%;
    max-height: 120px;
    height: auto;
    padding: 20px 0 20px 0;
    overflow: hidden;
    float: left;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0px;
}

.slideDescription .container .btn_callToAction{
    float: right !important;
    font-size: 9px;
    height: auto;
    width: auto;
    padding: 3px 15px;
    margin: 0px 9%;
}

.group-gift-breakdown{
  border: none;
}

.nav-arrow {
    z-index: 999;
}

/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
.table-container{
    border: 1px solid #DEE6E9;
    border-radius: 10px;
    overflow: hidden;
}

.table-fundzzle{
    margin: 0;
    background-color: transparent !important;
}

.table-fundzzle td, .table-fundzzle th{
    padding: 0;
    border: none;
}

.table-striped.table-fundzzle tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
    border-radius: 10px;
}

.table-fundzzle td>p, .table-fundzzle th>p{
    padding: 10px;
    margin-bottom: 0;
}

.rounded-bottom-left{
    border-bottom-left-radius: 10px;
}

.rounded-bottom-right{
  border-bottom-right-radius: 10px;
}

.table-fundzzle tr:first-child>td, .table-fundzzle tr:first-child>th{
  border-top: none;
}

.table-faq{
    font-family: Montserrat;
    font-weight: 500;
    font-size: 11pt !important;
}

.table-faq td:nth-child(even){
    padding-left: 10px;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumb-item + .breadcrumb-item::before
{
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  font-weight: 600;
  color: #ADBFC8;
  content: "\f0da" !important;
}

.breadcrumb-item{
  font-family: Montserrat;
  font-weight: 500;
  color: #ADBFC8;
}

.breadcrumb-item.link a{
  color: #E74850;
  font-weight: 600;
}

/*** MRB ***/
 .important-text{
  color: #E74850;
  font-weight: 600;
 }
/***********/

.breadcrumb-item.active{
  color: #4D7488;
  font-weight: 600;
}

.mobile-breadcrumb{
  width: auto;
  border-radius: 5px;
  background: #F0F3F4;
}

.mobile-breadcrumb .previous-page{
  color: #E74850 !important;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 14px;
}

.mobile-breadcrumb .next-page{
  color: #ADBFC8;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 14px;
}

.mobile-breadcrumb .done{
  color: #ADBFC8;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 14px;
  margin-right: 10px;
}

.mobile-breadcrumb .previous-page::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size: 14px;
  color: #4D7488;
  margin-right: 10px;
  content: "\f0d9" !important;
}

.mobile-breadcrumb .next-page::after{
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size: 14px;
  color: #ADBFC8;
  margin-left: 10px;
  content: "\f0da" !important;
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
.rsvp-breakdown{
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab-content{
  padding: 10px;
  background-color: #ffffff;
  border: none;
  border-radius: 0px 0px 10px 10px;
}

.dashboard .nav{
  border-color: #D7E0E5;
}

.dashboard .nav-item{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

.dashboard .nav-item.active{
  border-color: #D7E0E5;
  border-bottom: none;
  color: #4D7488;
}

.dashboard .nav-item:hover{
  color: #4D7488;
}

.event-list-filter, .guest-list-filter{
  font-weight: 600;
  color: #4EABDE;
  font-size: 12px;
  padding: 2px 5px;
  text-transform: uppercase;
  display: block;
  border-radius: 100px;
}

.event-list-filter:hover, .guest-list-filter:hover{
    color: #4D7488;
}
 
.event-list-filter.active, .guest-list-filter.active{
    background-color: #4D7488;
    color: #ffffff !important;
}

h5.evt-header{
    color: #4D7488;
    line-height: 15pt;
    margin: 0;
}

h5.evt-header-loc{
    margin: 15px 0 0 0 !important;
}
  
/*--------------------------------------------------------------
# Event Details
--------------------------------------------------------------*/
.rsvp-graph .graph-container{
  background: #F6F8FA;
  border: 1px solid #DEE6E9;
  border-radius: 10px;
  height:35px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.rsvp-graph .graph-container .accepted{
    background: #0d60ff;
    border-radius: 10px;
    /*width: 45%; calculated and set dynamically*/
    height: 100%;
    float: left;
    /*z-index: 3;*/
    z-index: 4;
    position: absolute;
    border: none;
    cursor: pointer;  
}

.rsvp-graph .graph-container .declined{
  background: #DE5766;
  border-radius: 10px;
  /*width: 55%; calculated and set dynamically*/
  height: 100%;
  float: left;
  /*z-index: 2;*/
  z-index: 3;
  position: absolute;
  border: none;
  cursor: pointer;
}

.rsvp-graph .graph-container .viewed{  /* this is viewed but no RSVP */
  background: #F5BE5C;
  border-radius: 10px;
  /*width: 70%; calculated and set dynamically*/ 
  height: 100%;
  float: left;
  /*z-index: 1;*/
  z-index: 2;
  position: absolute;
  border: none;
  cursor: pointer;
}

.rsvp-graph .graph-container .not-viewed{
    background: lightgray;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    float: left;
    z-index: 1;
    position: absolute;
    border: none;
    cursor: pointer;
}  

/*--------------------------------------------------------------
# Invites
--------------------------------------------------------------*/
.add-photo-button{
  background: rgba(255,255,255,0.50);
  border: 2px solid #FFFFFF;
  border-radius: 10px;
}

.add-photo-button a{
  color: #4D7488;
  text-transform: uppercase;
}

/*.invite-photo, .invite-bg, .invite-photo-modal{*/
.invite-photo, .invite-bg{
  border-radius: 10px;
  overflow: hidden;
  /*height: 250px;*/
  border: 1px solid #DEE6E9;
  background-color: #ffffff;
}

.invite-bg-new {
    /* Maintain aspect ratio of background image */
    position: relative;
    padding-top: calc(100% / (var(--aspect-ratio)));
    
    border-radius: 10px;
    overflow: hidden;
    /*height: 250px;*/
    height: auto;
    border: 1px solid #DEE6E9;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*
    If there are children of the background image, show them.
    If this isn't here, the padding above screws them up.
*/
.invite-bg-new > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.invite-bg-new > .container > .row {
    padding-left: 15px !important;
}

.invite-photo-container{
    height: 250px;
    width: 100%;
}

.invite-photo-modal{
    border: 10px solid #DEE6E9;
    border: none;
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}
  
.invite-bg, .stat-tile {
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.invite-modal-title{
    font-size: 16pt !important;
}
  
.invite-modal-subtype{
    font-size: 14pt !important;
}  

/*
    Handling this via jQuery for better ux when selecting an invite bg
.invite-bg:hover{
    border-color: 1px solid rgb(92, 169, 211);
    box-shadow: 0 0 10px 0 rgb(92, 169, 211);
    cursor: pointer;
}
*/

.invite-bg-hover, .db-tile-hover {
    border-color: 1px solid rgb(30, 144, 255); /* Dodger Blue */
    box-shadow: 0 0 10px 0 rgb(30, 144, 255);
    cursor: pointer;
}

.search-hover {
    cursor: pointer;
}

.invite-bg-selected, .db-tile-active {
    border-color: 1px solid rgb(0, 35, 102); /* Royal Blue */
    box-shadow: 0 0 10px 0 rgb(0, 35, 102);
}

.invite-photo.thumb.small{
  width: 100%;
  height: 120px;
}
  
.invite-photo>img{
  width: 100%;
  height: auto;
}

.invite-photo-modal>img{
    width: 100%;
    height: auto;
}

.invite-photo.thumb>img{
  width: 100%;
  height: auto;
}

.invite-header {
    /* Maintain aspect ratio of background image */
    position: relative;
    padding-top: calc(100% / (var(--aspect-ratio))) !important;

    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-color: rgb(230, 230, 230);
    height: auto;
    border-radius: 10px 10px 0 0;
    background-repeat: no-repeat; /* This needs to be last for Safari */

    /* Override form-control-lg from forms.css */
    height: 2.5rem !important;
    font-size: 1.1rem;

    overflow: hidden;
}

.event-details .note{
  background-color: #2F3E59;
  margin: 0;
}

.event-details .note p{
    color: #ffffff;
}

.other-event-details{
  border: 1px solid #D7E0E5;
  border-radius: 0 0 10px 10px;
  margin: 0;
}

.event-header-name {
    padding-left: 20px;
}

.invite-header > * {
    position: absolute;
    top: 30px;
    left: 15px;
    width: 90%;
    height: 100%;
}

.invite-header label {
    /*
        Override attribute set by col-form-label class as we want to tighten up
        the invitation set up form a bit.
    */
    padding-bottom: 0 !important;
    line-height: 1 !important;

    font-size: .9rem;
}

.invite-header input[type=text] {
    height: 30px !important;
}

.event-header-info-start {
    margin-top: 50px;
    padding-left: 20px;
}

.rsvp-by-date-row {
    padding-top: 20px;
}

@media only screen and (max-width: 768px) {
    .invite-header label, #event-details-form-mob label, .other-event-details label {
        font-size: .8rem;
    }

    .invite-header .event-header-info-start {
        margin-top: 35px;
    }

    .invite-header .rsvp-by-date-row {
        padding-top: 10px;
    }

    .invite-header .mb-half-rem {
        margin-bottom: 0.2rem !important; /* Hmmmm. No longer really a half rem ˘L˘ */
    }
}

/*--------------------------------------------------------------
# Resource Content and Index (index page for blogs, press, news postings)
--------------------------------------------------------------*/
div.res-content h5{
    font-weight: 500 !important;
    margin-top: 10px !important;
}

div.res-idx-content{
    min-height: 180px;
    max-height: 180px;
}

p.res-heading{
    font-weight: 400 !important;
    font-size: 10pt !important;
    color: #4D7488 !important;
}

div.intro > p{
    font-size: 10px !important;
}

div.reslink > p{
    text-align: right;
    font-size: 11px !important;
}

div.res-info{
    margin-bottom: 40px;
    padding-top: 25px;
    border-top: 1px solid #acacac;
    max-width: 250px;
    font-size: 0.8rem;
    font-weight: 400;
}

div.res-info .res-info-cat{
    font-weight: 500;
    margin-bottom: 5px;
}

div.res-content>p, div.res-content ul{
    font-size: 10pt;
}

div.res-content>p{
    padding-bottom: 10px !important;
}

div.res-content ul{
    font-weight: 500 !important;
    padding-left: 20px;
}

div.res-content ul>ol{
    padding: 10px 0;
    color: #688796 !important;
}

/*--------------------------------------------------------------
# Site Map
--------------------------------------------------------------*/
div.sitemap h4{
    color: #4D7488 !important;
    margin-bottom: 3px !important;
}

/*--------------------------------------------------------------
# Featured
--------------------------------------------------------------*/
.featured-banner{
    width: 100%;
    height: 300px;
    background: rgb(241, 241, 241);
    overflow: hidden;
}

.featured-blurbs, .initial-blurb{
    height: auto;
    background: #F6F8FA;
    border-bottom: 1px solid #e5edf6;
}

.featured-blurbs .container{
    padding: 50px 0;
}

.initial-blurb .container{
    padding: 25px 0 !important;
}

.initial-blurb h4{
    color: #4D7488 !important;
}

.featured-blurbs p, .initial-blurb p{
    font-weight: 500;
    padding: 0 10px;
}

.featured-blurbs .blurb{
    text-align: center;
}
  
.featured-post h3>a{
    color: #4EABDE;
}

.featured-post h3>a:hover{
    color: #1F82B8;
}

.featured-post .link{
    color: #E74850;
    font-family: Montserrat;
    font-size: 11pt;
    font-weight: 600;
}

.featured-post .link:hover{
    color: #B31820;
}

.featured-post-cta::after {
    font-family: "Font Awesome 5 Free";
    font-size: x-small;
    padding-left: 5px;
    content: "\f061";
}

/*--------------------------------------------------------------
# Wishes Medley Page
--------------------------------------------------------------*/
.medley-pg-bg {
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    background-attachment: fixed; 
    height: 100%;
}

.wishes-panel-x, .wishes-panel-y {
    background: whitesmoke !important;
    border: 1px solid black !important;
    font-size: 9pt !important;
}

textarea.form-control-wishes {
    display: block;
    height: auto;
    width: 100%;
    border-radius: 10px;
    border-width: 2px;
    border-color: #BBCAD2;
    font-weight: 500;
    padding: .375rem .75rem;
    font-size: 11pt;
}

.wish-panel-size {
    min-height: 320px;
}

/* Organiser/host panel size */
.org-wish-panel-size {
    min-height: 75px;
    /*height: 140px;*/
}

.default-colour {
    color: #4D7488;
}

.default-font {
    font-family: Montserrat;
}

.default-font-size {
    font-size: 14 !important;
}

.medley-heading, .group-card-modal-heading {
    color: #4EABDE;
}

.medley-pg-bg-image {
    background-image: url("../images/invitebg/EvtSubType-252-01.jpg");
}

.medley-pg-bg-image-1 {
    background-image: url("../images/wishes/WishesBackground.jpg");
}

.wishes-content {
    position: relative;
}

/* "Sign" the wish. Put it at the bottom of the wish panel and centre it. */
.wish-from {
    position: absolute;
    width: 100%;
    bottom: 0px;
    text-align: center;
}

.wish-img-container {
    position: absolute;
    width: 100%;
    bottom: 30px;
}

.wish-from-laetus {
    width: 100%;
    text-align: center;
    font-size: 12px;
}

.wish-from > p, .wish-from-host > p {
    font-size: 12px;
}

.wish-from-host > p {
    padding-top: 10px;
}

p.gg-gift-desc {
    line-height: 15pt !important;
}

#booklet-instructions {
    margin-top: -20px;
}

#booklet-instructions p, #booklet-instructions ol>li{
    font-size: 9pt !important;
    line-height: 15pt;
}

p.gg-and-charity-heading {
    /*color: #4EABDE !important;*/
    font-weight: 600;
    text-decoration: underline;
}

/*--------------------------------------------------------------
# Wishes Styling
--------------------------------------------------------------*/
.colour-pick-selector {
      border-radius: 5px;
      width: 30px;
      height: 14px;
      padding-top: 8px;
      cursor: pointer;
      -webkit-transition: all linear .2s;
      -moz-transition: all linear .2s;
      -ms-transition: all linear .2s;
      -o-transition: all linear .2s;
      transition: all linear .2s;
}

.colour-pick-selector:hover {
    transform: scale(1.1);
}

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

.flex-item {
    margin-right: 7px;
}

#media-url {
    border-radius: 10px;
    border-width: 2px;
    border-color: #BBCAD2 !important;
}

.wish-img {
    width: var(--wish-img-size);
    height: auto;
}

/*
.palette-item {
    min-height: 20px;
    max-height: 20px;
    min-width: 40px;
    max-width: 40px;
}
*/
/*
.flex-item:not(:last-child) {
    margin-right: 7px;
}
*/

/*--------------------------------------------------------------
# Others
--------------------------------------------------------------*/
.iframe-container {
    overflow: hidden;
    /* Calculated from the aspect ratio of the content (in case of 16:9 is 9/16 = 0.5625) */
    padding-top: 56.25%;
    position: relative;
}

.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.wrapped {
    word-wrap: break-word;
}

/* About us styling */
div.about-us p {
    margin-right: 30px;
}

/* Terms of Use and privacy policy page styling */
h3.tou, p.last-updated {
    text-align: center;
}

.toc .col-2 {
    flex: 0 0 16.666667%;
    max-width: 3% !important;
}

/* Centres fa check next to an input text box. The input text box has a label above */
.centred-check {
    margin: 0;
    position: absolute;
    top: 40%;
    left: 20%;
    -ms-transform: translate(-20%, -40%);
    transform: translate(-20%, -40%);
}

/* Yeah, a bit of a hack ˘L˘ */
.centred-check-1 {
    margin: 0;
    position: absolute;
    top: 60%;
    left: 20%;
    -ms-transform: translate(-20%, -60%);
    transform: translate(-20%, -60%);
}

.hide{
    display: none;
}

.rsvp-content{
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #DEE6E9; 
    border-radius: 10px;
}
/***********/  

.rsvp-details{
  list-style: none;
}

.rsvp-emphasise-text {
    font-weight: 600 !important;
}

.collapsedMenu{
  border-top: 1px #D7E0E5 solid;
  background-color: #F0F3F4;
}

.container{
    max-width: none;
}

.custom-toggler .navbar-toggler-icon {
  /*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#4D7488' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");*/
  color: var(--btn-dark-grey-bg);
}

.profile-photo{
  border-radius: 100px;
  background-color: rgb(135, 135, 135);
  overflow: hidden
}

.popover{
  border: 1px solid #D7E0E5;
}

.popover-body{
  padding: 0;
  box-shadow: 0 2px 5px 0 #D7E0E5;
}

.popover-body .list-group-item{
  border: none;
}

.article-image{
  margin: 10px;
}

ion-icon{
  vertical-align: sub;
}

.panel.green{
  border-color: #B7EAC8 !important;
  background-color: #F5FCF4 !important;
}

.panel.white {
    background-color: #FFFFFF;
}

.panel p{
  margin: 0;
}

.add-photo-switch-row{
    padding: 3px 0px 12px 0px;
}

/*
    Adjust span class that is dynamically built. Forces group gift allocation
    drop down to be same length as charity allocation drop down.
*/
.width-adjust{
    max-width: 100%;
    flex: 0 0 100%;
}

p.heading{
    margin-bottom: 0 !important;
}

/* Pull characters remaing text closer to textarea */
.char-count-container {
    margin-top: -17px;
}

#add-wish-img, #preview-wish {
    font-size: 10pt !important;
}

.rsvp-wish-img-thumbnail {
    height: 60px;
    width: 60px;
}

.ui-datepicker {
    z-index: 20000 !important;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer{
    flex-shrink: 0; /* For sticky footer and being able to push it */
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}

.page-footer{
  background: #F6F8FA;
  border-top: 1px solid #e5edf6;
}

.footer-links ul{
  list-style: none;
}

.footer-links ul>li{
    line-height: 10pt;
}

.footer-links a{
  color: #4EABDE;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 10pt;
  line-height: 40pt;
}

.footer-links a:hover{
  color: #1F82B8;
}

.copyright{
  background-color: #4EABDE;
}

.copyright p{
    color: #ffffff;
    padding: 10px 0 0 0;
    margin: 0 0 0 10px;
    font-size: 9pt;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.copyright a{
    color: #ffffff;
}

.copyright span{
    color: #ffffff;
    margin: 0px 8px 0px 5px; 
}
.copyright p.rights-reserved {
    color: #ffffff;
    padding: 0 0 10px 0;
    margin: 0 0 0 10px;
    font-size: 8pt;
    font-weight: 400;
    width: 100%;
    text-align: center;
}

.socialMedia-title{
  font-size: 12pt;
  font-weight: 600;
  color: #4D7488;
}

.form-container, .panel{
  background: #F6F8FA;
  border: 1px solid #DEE6E9;
  border-radius: 10px;
  padding: 15px;
}

.panel.transparent {
    opacity: 0;
    border: none;
}

.total-gst-panel {
    padding: 5px !important;
    height: 60px;
}

.group-panel{ /* Items grouped together - see: setup-invitation.html */
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.group-change-btn{ /* force button to bottom of column and event with the bottom of contribution panel */
  margin-top: 85px;
}

.banner-inner, .carousel-inner{ /* put this some place else ˘L˘ */
    cursor: pointer;
}

/* FR Badge */
.fr-badge {
    background-color: #FFFFFF;
    border-top: 1px solid #e5edf6;
}

.fr-badge img {
    display: block;
    max-width: 150px;
    max-height: 47px;
    width: auto;
    height: auto;
}

/*--------------------------------------------------------------
# Media Queries for different screen sizes
--------------------------------------------------------------*/
@media only screen and (min-width: 375px) {
    .header-logo{
        max-height: 80px;
    }
}

@media only screen and (min-width: 576px) {
    /* modal.scss sets this to 500, need it a bit wider */
    .modal-dialog.modal-600 {
        max-width: 600px !important;
    }

    .modal-dialog.modal-700{
        max-width: 700px !important;
    }

    .hiw-icon{
        text-align: center;
    }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
    .modal-dialog.modal-650 {
        max-width: 650px !important;
    }
}

@media only screen and (max-width: 414px) {
    .spaced-btn {
        width: 95px;
    }

    h5.evt-header {
        font-size: 11pt;
    }
}

@media only screen and (max-width: 575px) {
    .hiw-icon{
        text-align: center;
    }

    .select-charity {
        margin-top: -7px !important;
    }

    .btn-fundzzle, .btn-fundzzle.inactive, .btn-fundzzle-secondary {
        min-width: var(--btn-wid-100) !important;
    }

    /* Buttons are kind of a mess. Really need to be rethought */
    .btn-100 {
        max-width: var(--btn-wid-100);
    }
}

@media only screen and (max-width: 768px) { /* Max */
    .carousel-caption > h3{
        color: #ffffff;
        font-weight: 600;
        font-size: 10pt;
        line-height: 16px;
        padding: 0 15%;
    }    
}

@media only screen and (min-width: 768px) {
    h2{
        color: #4D7488;
        margin: 0 0 35px 0;
    }

    .featured-banner .imageContainer{
        max-height: 450px;
    }

    .featured-banner .centerImage{
        position: relative;
        width: auto;
        height: 100%;
        margin-left: 0;
    }

    .event-list-filter, .guest-list-filter{
        font-size: 12px;
    }

    .invite-photo.thumb>img{
        width: 100%;
        height: auto;
    }
}

@media only screen and (min-width: 992px) {
  input[type=time], input[type=text], textarea.form-control{
    font-family: Montserrat;
    font-size: 11pt;
    font-weight: 500;
    color: #4D7488 !important;
  }

  .navbar-fundzzle .navbar-nav .nav-link{
    font-size: 10pt;
  }

  .navbar-fundzzle .dropdown-item{
    font-size: 10pt;
  }

  .collapsedMenu{
    border: none;
    background-color: inherit;
  }

  .container{
    max-width: 960px;
  }

  .carousel-item .imageContainer, .featured-banner .imageContainer{
    max-height: 450px;
  }

  .carousel-item .centerImage, .featured-banner .centerImage{
    position: relative;
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  /*Will prioritize height*/
  .invite-photo.thumb>img{
    width: 100%;
    height: auto;
  }

  .modal-lg {
    width: 65%;
    max-width: 1034px;
  }

  .modal-xl {
    width: 80%;
    max-width: 1034px;
  }
}

@media only screen and (min-width: 1200px) {
  .container{
    max-width: 1140px;
  }

  .navbar-fundzzle .navbar-nav .nav-link{
    font-size: 11pt;
  }

  .navbar-fundzzle .dropdown-item{
    font-size: 11pt;
  }
}

@media only screen and (max-width: 374px) {
  .btn-fundzzle-tertiary{
    font-size: 11px;
    padding: 5px;
  }

  .event-list-filter, .guest-list-filter{
    font-size: 10px;
  }

  .dashboard .nav-item{
    font-size: 12px;
  }

  .mobile-breadcrumb .previous-page, .mobile-breadcrumb .next-page{
    font-size: 12px;
  }

  .article-image{
    margin: 10px 0;
    width: 100%;
  }
}

@media only screen and (max-width: 575px) {
    .tile-x-space {
        margin-right: 0px;
    }
}

@media only screen and (max-width: 413px) {
    .invite-photo.thumb.med, .invite-bg.thumb.med {
        height: 150px;
    }
}

@media only screen and (min-width: 414px) and (max-width: 485px) {
    .invite-photo, .invite-bg {
        height: auto;
    }

    .invite-photo.thumb.med, .invite-bg.thumb.med{
        height: 180px;
    }
}

@media only screen and (max-width: 961px) {
    #dyn-img-preview {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
    .carousel-item .imageContainer, .featured-banner .imageContainer {
        height: 300px;
        width: 100%;
    }      
}

/*--------------------------------------------------------------
# About us page
--------------------------------------------------------------*/
p.photo-caption{
    margin-bottom: -5px !important;
}

p.about-content, p.hiw-content{
    text-align: justify;
}

p.enhance{
    font-style: italic;
    font-weight: bold;
}

h3.note-from{
    margin-top: 0px !important;
}

/*--------------------------------------------------------------
# Invitation Style Selection Modal
--------------------------------------------------------------*/
.modal-padding{
    padding: 25px 30px;
}
.modal-backdrop.in{
    opacity: 0.75;
}
.invdsgn-modal{
    text-align: center;
    padding: 0 !important;
}
.invdsgn-modal:before{
    content: '';
    display: inline-block;
    height: 100%;
    margin-right: -4px;
}
.invdsgn-modal .modal-dialog{
    display: inline-block;
    text-align: left;
}
.invdsgn-modal .modal-title{
    font-size: 22px;
}
.invdsgn-modal .modal-content{
    box-shadow: none;
    border: 0;
}
.invdsgn-modal .modal-header, 
.invdsgn-modal .modal-body, 
.invdsgn-modal .modal-footer{
    border: 0;padding: 0;
}
.invdsgn-modal .modal-header{
    margin-bottom: 20px;
}
.invdsgn-modal .modal-footer{
    margin-top: 30px;
}
.invdsgn-modal .modal-body p + p{
    margin-top: 15px;
}

section span.hidden{
    display: none;
}

/*--------------------------------------------------------------
# Invitation Viewing
--------------------------------------------------------------*/
.inv-view h4, .inv-view h3, .inv-view h3, .inv-view h4 {
    color: var(--invite-text-color);
}

.inv-view h4.date-to-separator {
    margin-top: -14px;
    margin-bottom: -7px;
}

hr.section-separator {
    /* https://css-tricks.com/examples/hrs/ */
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    /****************************************/

    width: 40%;
}

hr.subtle-separator {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) !important;
}

p.inv-text {
    line-height: 17pt;
}

.inv-view span.location > p {
    font-weight: 600;
} 

.inv-view p.inv-small, .inv-view p.inv-small {
    color: var(--invite-text-color);
    font-weight: 500 !important;
}

@media only screen and (max-width: 414px) {
    .inv-view h3 {
        line-height: var(--invite-lh);
        font-size: 10pt;
        font-weight: 500;
    }

    .inv-view h3.event-name {
        margin-top: 50px !important;
        margin-bottom: 10px !important;
    }

    .inv-view h3.inv-body-heading {
        color: #4EABDE;
        font-weight: 600;
        }

    .inv-view h3.mob-inv-loc {
        margin-bottom: 5px !important;
        margin-top: 0px !important;
    }

    .inv-view h4 {
        font-size: 9pt !important;
        margin: 5px 0 !important;
        line-height: 10pt !important;
        font-weight: 500;
    }
        
    .inv-view h5 {
        font-size: 9pt !important;
        font-weight: 700 !important;
        margin: 5px 0 2px 0 !important;
        line-height: var(--invite-lh);
    }

    .inv-view p, p.inv-view {
        font-size: 9pt !important;
        line-height: 15pt !important;
    }

    .inv-view p.inv-small {
        font-size: 6pt !important;
    }

    .panel {
        padding: 10px;
    }

    section.organiser-details h5 {
        font-size: 11pt;
        margin-bottom: -4px;
    }

    div.selected-charity > img {
        width: 75% !important;
    }

    .contrib-details h5 {
        margin-bottom: 0px;
    }
}

@media only screen and (min-width: 415px) {
    div.selected-charity > img {
        width: 50% !important;
    }
}

@media only screen and (min-width: 1200px) {
    div.selected-charity > img {
        width: 30% !important;
    }
}

@media only screen and (min-width: 415px) and (max-width: 767px) {
    .inv-view h3 {
        font-size: 11pt;
        font-weight: 500;
        line-height: var(--invite-lh);
    }

    .inv-view h3.event-name {
        margin-top: 70px !important;
        margin-bottom: 15px !important;
    }

    .inv-view h3.inv-body-heading {
        color: #4EABDE;
        font-size: 10pt;
        font-weight: 600;
        line-height: var(--invite-lh);
    }

    .inv-view h3.mob-inv-loc {
        margin-top: 8px !important;
    }

    .inv-view h4 {
        font-size: 10pt !important;
        margin: 10px 0 15px 0;
        line-height: 13pt !important;
        font-weight: 500;
    }
        
    .inv-view h5 {
        font-size: 9pt !important;
        font-weight: 700 !important;
        margin: 5px 0 2px 0 !important;
        line-height: var(--invite-lh);
    }

    .inv-view p, p.inv-view {
        font-size: 9pt !important;
        line-height: 15pt !important;
    }

    .inv-view p.inv-small {
        font-size: 8pt !important;
    }

    h4.date-to-separator {
        margin-top: -7px;
        margin-bottom: -3px;    
    }

    div.selected-charity > img {
        width: 50% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .inv-view h3 {
        font-size: 14pt;
        line-height: 18pt !important;
        font-weight: 500;
    }

    .inv-view h3.event-name {
        margin-top: 130px !important;
        margin-bottom: 18px !important;
    }
    
    .inv-view h3.inv-body-heading {
        color: #4EABDE;
        font-size: 11pt;
        font-weight: 600;
        line-height: var(--invite-lh);
    }

    .inv-view h3.mob-inv-loc {
        margin-top: 8px !important;
    }

    .inv-view h4 {
        font-size: 12pt !important;
        margin: 10px 0 15px 0;
        line-height: 15pt !important;
        font-weight: 500;
    }
        
    .inv-view h5 {
        font-size: 11pt !important;
        font-weight: 700 !important;
        margin: 5px 0 2px 0 !important;
        line-height: var(--invite-lh);
    }

    .inv-view p, p.inv-view {
        font-size: 10pt !important;
        line-height: 15pt !important;
    }

    .inv-view p.inv-small {
        font-size: 10pt !important;
    }

    h4.date-to-separator {
        margin-top: -7px;
        margin-bottom: -3px;    
    }    
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .inv-view h3 {
        font-size: 16pt;
        line-height: 12pt !important;
        font-weight: 500;
    }

    .inv-view h3.event-name {
        margin-top: 160px !important;
        margin-bottom: 20px !important;
    }

    .inv-view h3.inv-body-heading {
        color: #4EABDE;
        font-size: 12pt;
        font-weight: 600;
        line-height: var(--invite-lh);
    }

    .inv-view h3.mob-inv-loc {
        margin-top: 8px !important;
    }

    .inv-view h4 {
        font-size: 14pt !important;
        margin: 10px 0 15px 0;
        line-height: 16pt !important;
        font-weight: 500;
    }
        
    .inv-view h5 {
        font-size: 11pt !important;
        font-weight: 700 !important;
        margin: 5px 0 2px 0 !important;
        line-height: var(--invite-lh);
    }

    .inv-view p, p.inv-view {
        font-size: 10pt !important;
        line-height: 15pt !important;
    }

    .inv-view p.inv-small {
        font-size: 11pt !important;
    }

    h4.date-to-separator {
        margin-top: -7px;
        margin-bottom: -3px !important;
    }
}

@media only screen and (min-width: 1200px) {
    .inv-view h3.event-name {
        margin-top: 180px !important;
        margin-bottom: 20px !important;
    }

    .inv-view h4 {
        font-size: 16pt !important;
        margin: 10px 0 15px 0;
        line-height: 18pt !important;
        font-weight: 500;
    }

    .inv-view p.inv-small {
        font-size: 13pt !important;
    }

    h4.date-to-separator {
        margin-top: -7px;
        margin-bottom: -3px !important;
    }
}    

/*--------------------------------------------------------------
# Animation
--------------------------------------------------------------*/
[class*='fnz-animation-']{
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.fnz-animation-scale-up{
    -webkit-animation-name: fnz-animation-scale-up;
    animation-name: fnz-animation-scale-up;
}
@-webkit-keyframes fnz-animation-scale-up {
    0% {opacity: 0;-webkit-transform: scale(0.2);}
    100% {opacity: 1;-webkit-transform: scale(1);}
}
@keyframes fnz-animation-scale-up {
    0% {opacity: 0;transform: scale(0.2);}
    100% {opacity: 1;transform: scale(1);}
}

/*--------------------------------------------------------------
# Invitation status
--------------------------------------------------------------*/
/******************* progress Bar *******************/
/* override the default background color for bootstrap progress bar */
.progress-container {
    width: 100%;
}

.progress {
    background-color: darkgray;
    position: relative;
    height: 25px;
}

/* This represents the text and we want it to sit on top of the progress bar */
.progress-type {
    position: absolute;
    left: 0px;
    font-weight: 400;
    padding: 3px 30px 2px 10px;
    color: #fafafa;
    /*background-color: rgba(25,25,25,0.2);*/
}

li.get-started{
    font-family: Montserrat !important;
}

/* Pushing down the progress bars just a little for a better UX */
.progress-section {
    margin: 0px 0px; 
}
/****************************************************/
/********************** Circles *********************/
.rsvp-status-circle{
    width:40px !important;
    height:40px !important;
    border-radius:250px !important; 
    font-size:14px !important;
    color:#fff !important;
    line-height:40px !important;
    text-align:center !important;
}
/****************************************************/

/*--------------------------------------------------------------
# Coming Soon
--------------------------------------------------------------*/
.cust-col {
    flex-basis: 0;
    flex-grow: 0;
    max-width: 100%;
}

/*--------------------------------------------------------------
# Spinner
--------------------------------------------------------------*/
.show-spinner {
    display: inline-block;
}

.hide-spinner {
    display: none;
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/ /* This will be dynamically set via JS */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.spinner {
    font-size: 30px;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.spinner div {
    position: absolute;
    left: 0.4629em;
    bottom: 0;
    width: 0.074em;
    height: 0.2777em;
    border-radius: 0.5em;
    background-color: transparent;
    -webkit-transform-origin: center -0.2222em;
    -ms-transform-origin: center -0.2222em;
    transform-origin: center -0.2222em;
    -webkit-animation: spinner-fade 1s infinite linear;
    animation: spinner-fade 1s infinite linear;
}
.spinner div:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.spinner div:nth-child(2) {
    -webkit-animation-delay: 0.083s;
    animation-delay: 0.083s;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
.spinner div:nth-child(3) {
    -webkit-animation-delay: 0.166s;
    animation-delay: 0.166s;
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
.spinner div:nth-child(4) {
    -webkit-animation-delay: 0.249s;
    animation-delay: 0.249s;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.spinner div:nth-child(5) {
    -webkit-animation-delay: 0.332s;
    animation-delay: 0.332s;
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
.spinner div:nth-child(6) {
    -webkit-animation-delay: 0.415s;
    animation-delay: 0.415s;
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}
.spinner div:nth-child(7) {
    -webkit-animation-delay: 0.498s;
    animation-delay: 0.498s;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.spinner div:nth-child(8) {
    -webkit-animation-delay: 0.581s;
    animation-delay: 0.581s;
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}
.spinner div:nth-child(9) {
    -webkit-animation-delay: 0.664s;
    animation-delay: 0.664s;
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}
.spinner div:nth-child(10) {
    -webkit-animation-delay: 0.747s;
    animation-delay: 0.747s;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
.spinner div:nth-child(11) {
    -webkit-animation-delay: 0.83s;
    animation-delay: 0.83s;
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}
.spinner div:nth-child(12) {
    -webkit-animation-delay: 0.913s;
    animation-delay: 0.913s;
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

@-webkit-keyframes spinner-fade {
    0% {
        /*background-color: #69717d;*/
        background-color: #ffffff;
    }
    100% {
        background-color: transparent;
    }
}

@keyframes spinner-fade {
    0% {
        /*background-color: #69717d;*/
        background-color: #ffffff;
    }
    100% {
        background-color: transparent;
    }
}

/*--------------------------------------------------------------
# jQuery Validator
--------------------------------------------------------------*/

.invalid-input {
    padding-top: 5px;
    color: red;
    font-style: italic; 
}

.fnz-select * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.fnz-select {
	font-size: 14px !important;
	position: relative;
    display: inline-block;
    border-radius: 10px;
    line-height: calc(1.25rem + 2px);
	color: #4D7488;
}


.palette-flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.palette-item {
    flex: 0 0 120px;
    text-align: center;
    padding: 5px;
    margin: 5px;
}

/*--------------------------------------------------------------
# Admin Console
--------------------------------------------------------------*/
.stat-tile {
    background: #FFFFFF;
    width: 180px;
    height: 120px;
}

.data-table thead > tr > td, .sub-type-detail > table {
    font-size: small !important;
    font-weight: 600 !important;
    color: #688796;
}

.sub-type-detail > table, .sub-type-detail > table th {
    border-bottom: 1px solid #111111 !important;
}

.data-table tbody > tr > td, .sub-type-detail tbody > tr > td {
    font-size: x-small !important;
    font-weight: 400 !important;
    color: #688796;
}

.sub-type-detail > table th {
    border-top: 0 !important;
}

.sub-type-detail tbody td {
    border-top: 1px solid #DDDDDD !important;
}

.sub-type-detail > table > tbody > tr.odd {
    background-color: #F9F9F9;
}

.card-body {
    padding: 5px !important;
}

.card-body h3 {
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #4D7488 !important;
}

#rec-detail-data-table th:first-child {
    width: 35% !important;
}

#rec-detail-data-table td {
    font-size: small !important;
}

#rec-detail-data-table td:first-child {
    font-weight: 600 !important;
}

.sub-type-detail img {
    border-width: 1px;
    border-color: #808080;
    border-style: solid;
}