:root {
  --welcome-panel-bg: #f8f9fa !important;
  --homeNavIconColor: #000;
  --homeNavIconTextColor: #fff;
  --bottomNavIconColor: #f8f9fa;
  --bottomNavIconTextColor: #000;
  --logoColor: #000;
  --panelColor: #f8f9fa;
  --hoverColor: #aa957f;
  --textColor: #fff;
  --logoTextcolor: #000;
  --outlineBtnBackground: #fff;
  --outlineBtnBackgroundText: #000;
  --bs-link-hover-color-rgb: #000;
  --logo-color: #000;
  --logo-hover-color: #aa957f !important;
  --btn-cancel: #f8f9fa !important;
  --btn-cancel-hover: #888 !important;
  --analytics-card: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
  --analytics-card-text: #000;
  --about-card-background: #fff;
  --about-card-background-text: #000;
  --calendarTextColor: #000;
  --islandTextColour: #f8f9fa;
  --islandBackgroundColour: #002335;
  --media-toolbar-color: #f8f9fa;
  --media-toolbar-color-text: #000;
  --privacy-text: #000;
  --tool-icon-text: #000;
  --upload-meda-panel-color: #f8f9fa;
  --upload-meda-panel-color-text: #000;
}

.dark-mode {
  --welcome-panel-bg: #888;
  --bottomNavIconColor: #444444;
  --bottomNavIconTextColor: #d3d3d3;
  --logoColor: #d3d3d3;
  --panelColor: #444444;
  --hoverColor: #aa957f;
  --textColor: #000;
  --logoTextcolor: #d3d3d3;
  --bs-btn-border-color: #000 !important;
  --bs-btn-border-width: 0px !important;
  --bs-body-bg: #696969;
  --bs-body-bg-rgb: 12,12,12;
  --bs-tertiary-bg-rgb: 68,68,68;
  --bs-body-bg-rgb: 160,160,160;
  --bs-light-rgb: 68,68,68 !important;
  --bs-bg-opacity: 0 !important;
  --outlineBtnBackground: #444444;
  --outlineBtnBackgroundText: #d3d3d3;
  --btn-cancel: #6c757d !important;
  --btn-cancel-hover: #444 !important;
  --analytics-card: #1e1e1e;
  --analytics-card-text: #d3d3d3;
  --about-card-background: #1e1e1e;
  --about-card-background-text: #d3d3d3;
  --calendarTextColor: #f4f4f4;
  --islandTextColour: #f8f9fa;
  --islandBackgroundColour: #002335;
  --media-toolbar-color: #1e1e1e;
  --media-toolbar-color-text: #d3d3d3;
  --privacy-text: #d3d3d3;
  --tool-icon-text: #fff;
  --upload-meda-panel-color: #1e1e1e;
  --upload-meda-panel-color-text: #fff;
}


body {
  font-family: Lato, Helvetica, HelveticaNeue, "Helvetica Neue", sans-serif;
  max-width: 800px;
  margin: auto;
}

.profileNav {
  margin-bottom: 5px;
}

.navbar {
  max-width: 800px;
  margin: auto;
}

.navbar-logo {
  color: var(--logo-color);
  text-decoration: none;
  font-size: 22px;
}

.navbar-logo:hover {
  color: var(--logo-hover-color);
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
  transition: 0.5s;
}
.bd-mode-toggle {
  z-index: 1500;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 90px;
    max-width: 800px;
    margin: auto;
} 

.footer h3{
  font-size:10px;
}

.bi-large {
  font-size: 32px;
  min-width: 15%;
  display: inline-block;
  /* padding-left: 6%; */
  max-height: 60px;
}

.bi-footer-large {
  font-size: 32px;
  min-width: 18%;
  display: inline-block;
  /* padding-left: 6%; */
  max-height: 60px;
}

.side-button {
  min-height: 70px;
  min-width: 70px;
  margin-right: 10px;
 font-size: 32px;
 padding-top:10px;
}

.mint-blue {
  background-color: var(--homeNavIconColor);
  color: var(--homeNavIconTextColor);
}

.mint-gold {
  background-color: #aa957f; 
}

.mint-icon-blue {
  background-color: var(--bottomNavIconColor);
  color: var(--bottomNavIconTextColor);
}

.mint-icon-gold {
  color: #aa957f; 
}


.mint-icon-blue:hover {
  color: #aa957f;
}

.mint-white-icon {
  color: #fff;
}

.mint-white-icon:hover {
  color: #aa957f;
}

.mint-icon-gold:hover {
  color: #002335; 
}

.thumbnails {
  text-align: center;
  margin-top: 10px;
}

.thumbnails .thumbnail {
  display: inline-block;
  /*  margin: 5px 15px 5px 0px; */
}

.templateImg img:hover {
  outline: 3px solid #002335;
  display: inline-block;
  transform: scale(1.1); 
  transition: transform .2s;
}

.emailImg img:hover {
  outline: 3px solid #002335;
  display: inline-block;
  transform: scale(1.1); 
  transition: transform .2s;
}

.caption {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
}


.emailNameTitle {
  background-color: beige;
  padding: 2px;
  margin-bottom: 5px;
  max-width: 640px;
}

.emailImg {
    text-decoration: none;
    color: black;
}
.button-icon-holder {
  position: absolute;
  /* transform: translateY(-50%); */
}
#editEmail {
  padding: 0;
  max-height: 24px;
}

#editEmail:hover {
  color: #cbb29e;
}

.editEmail {
  text-align: center;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.editEmail:hover {
  color:red;
}

.gear-icon {
  width: 24px;
  height: auto;
  display: block;
}

.deleteRadio {
  opacity: 1;
  display: none;
  text-align: left;
  margin-bottom: 4px;
  font-size: 16px;
  cursor: pointer;
}

.deleteRadio:hover {
  color: #aa957f;
}

.deleteX { 
  font-size: 26px;
}

.updateNameArrow {
  opacity: 0;
}

.show {
  opacity: 1;
}

.hide {
  opacity: 0;
}

.hidden {
  display: none;
}

.showPanel {
  display: block;
  max-width: 800px;

}

#emailName {
  max-width: 800px;
  margin-bottom: 8px;
  min-height: 74px;
}

.removeLabel {
  top: 3px;
  position: relative;
}

.recipientButtons {
  margin-bottom: 8px; 
}

.smallText {
  font-size: 8px;
}

.bootbox-close-button {
  color: red;
}

.modal .close-library, .modal .bootbox-close-button {
    position: absolute;
    top: 16px;
    right: 10px;
    color: #797979;
    font-size: 20px;
    line-height: 25px;
    padding: 0;
    text-transform: none;
    font-weight: normal;
    z-index: 5;
    border: none;
    margin: 0 !important;
    cursor: pointer;
}

.modal .close-library, .modal .bootbox-close-button { 
  opacity: 1; 
  font-size: 20px; 
  line-height: 22px; 
  padding: 4px;
}

.modal .close-library:hover, .modal .close-library:active, .modal .close-library:focus, .modal .bootbox-close-button:hover, .modal .bootbox-close-button:active, .modal .bootbox-close-button:focus {
    opacity: .7;
    text-decoration: none;
}

.modal .modal-content .modal-footer .bootbox-cancel {
    max-width: 50%;
    height: 40px;
}

.modal .modal-content .modal-footer .bootbox-accept {
    width: 50%;
    height: 40px;
}

.modal .modal-footer .bootbox-cancel .fa, .modal .modal-footer .bootbox-accept .fa {
    color: #f7f8f9;
}

.panelBtn {
  min-width: 44px;
  min-height: 44px;
  line-height: 30px;
  margin-bottom: 4px;
}

.contactSearchResults {
  border: 1px solid lightgrey;
  border-radius: 6px;
  width: 100%;
  height: 300px;
  margin-top: 8px;
  overflow-y: scroll;
  padding: 6px 6px 6px 12px;
  font-size: 14px;
}

.addressBox {
  font-size: 14px;
  height: 100px;
}


 /* Customize the label (the container) */
.containerCheck {
  display: block;
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerCheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerCheck:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerCheck input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerCheck input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerCheck .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 

.searchButton {
  font-size: 10px;
}

.footerLabel {
  display: inline-block;
  font-size: 10px;
}

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


 .btn-info {
  background-color: #002335;
 }


.btn-info:hover{
  background-color: #aa957f;
  color: #002335;
  border: 1px solid #002335;
}

.btn-outline-info {
  background-color: var(--outlineBtnBackground);
  color: var(--outlineBtnBackgroundText);
  border: 1px solid #002335;
}

.btn-outline-info:hover {
  background-color: #aa957f;
  color: #002335;
  border: 1px solid #002335;
}

.btn:active {
  background-color: #aa957f;
  color: #002335;
  border: 1px solid #002335;
}

.profile_pic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.field-space {
  margin-bottom: 10px;
}

.sml-text {
  font-size: 8px;
}

.profilePreview  {
  max-width: 175px;
  max-height: 200px;
  border-radius: 10px;
}

.dropzone .dz-message {
    opacity: .7;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mainBottom {
  margin-bottom: 7rem;
}


table {
  font-size: 14px;
}

div.dtrow {
  display: flex;
  justify-content: space-between;
}

.small-text {
  font-size: 10px;
}


#calendar {
  min-height: 550px;
}

#clearSearch {
  border: 1px solid #e3e3e3;
}

#clearEmailSearch {
  border: 1px solid #e3e3e3;
}

.biggerResults {
  min-height: 310px;
}

.manageContactsToolbar {
  margin-top: 12px;
}

.warningCopy {
  font-size: 10px;
  margin-top: 68px;
  padding-left: 16px;
}

.navActive {
  color: #aa957f;
}

.dropdown-item {
  line-height: 22px;
}

.glassBG {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8.9px);
  -webkit-backdrop-filter: blur(8.9px);
  border: 1px solid rgba(255, 255, 255, 0.55);
}



.aiPreview {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid lightgrey;
  min-height: 100px;
  max-height: 300px;
  overflow-y: scroll;
}

.previewAi {
  margin-top: 10px;
}

.footerTextColor {
  color: var(--bottomNavIconTextColor);
  transition: 0.5s;
}

.logoTextColor {
  color: var(--logoTextcolor);
  transition: 0.5s;
}

#colorModeIcon:hover {
  color: #aa957f;
}

.btn-cancel {
  background-color: var(--btn-cancel);
  color: dark-grey;
  border: var(--btn-cancel);
}

.btn-cancel:hover {
  background-color: var(--btn-cancel-hover);
  color: dark-grey;
  border: var(--btn-cancel);
}

.chartData {
  border: 1px solid grey;
  border-radius: 10px;
  min-height: 100px;
}

.card {
  font-size: 36px;
  text-align: center;
  background: var(--analytics-card);
  color: var(--analytics-card-text);
  
}

.card-body {
  font-size: 10px;
  text-align: left; 
  color: var(--analytics-card-text);
  
}


#dynamicNotificationsBar {
  background-color: var(--bottomNavIconColor);
  width: 50px;
  left: 330px;
  position: absolute;
  border-radius: 0px 0px 16px 16px;
  
}

.dark-mode-toggle {
  width: 120px;
  border: 1px solid #d3d3d3;
  border-radius: 20px;
}

/* ----- Dynamic Island ---- */
.islandContainer {
  width: 100%;
  position: absolute;
  top: 8px;
  background-color: transparent;
  z-index: -11;
  display: flex;
  justify-content: center;
}

.island {
  transition: 0.5s;
  border-radius: 50px; 
  margin-left: 0px; 
  width: 120px; 
  height: 41px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Set the display to none as its still in the viewport, just the content has opacity 0 */
.island.islandIsNormal {
  display: none;
}

.island.islandIsExpanded {
  width: 350px;
}


.islandBG {
  background-color: var(--islandBackgroundColour);
  color: var(--islandTextColour);
}

.islandBGTrans {
  background-color: transparent;
}

.island-profile-pic {
  max-width: 80px;
  height: auto;
}

.island-text {
  margin-right: 10px;
  font-size: 0.9rem;
}
/* ----- Dynamic Island ---- */

.welcomePanel {
  background-color: var(--welcome-panel-bg);
}

/* --About Folio page -- */
.about-category-block {
  width: 100%;
  padding: 1rem;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-sm);
  background-color: var(--about-card-background);
  margin-bottom: 1.25rem;
  color: var(--about-card-background-text);
}
.about-category-block p {
  margin: 0;
  font-size: 0.8rem;
}
.about-category-subhead {
  margin-bottom: 1rem;
}

.about-category-subhead span {
  display: inline-block;
  margin-left: 1rem;
  font-size: 0.85rem;
}

.mediaPanel {
  background-color: var(--media-toolbar-color);
  color: var(--media-toolbar-color-text);
}


.privacy {
  margin-top: 30px;
  color: var(--privacy-text);
}

body.not-found {
  background: url(../img/404.jpg) center center no-repeat;
  background-size: cover;
  width:100%;
  height: 100vh;
}

body.not-found h1 {
  color: white;
  font-size: 46px;
  margin-top: 20%;
}

body.not-found h3 {
  color: white;
  font-size: 24px;
}

body.not-found a {
  color: #c38181;
}

body.not-found a:hover, body.not-found a:focus {
  color: white;
  transition: color 0.5s;
}

.uploadMedia {
  border: 1px solid var(--upload-meda-panel-color-text);  
  padding: 20px 0px; 
  background-color: var(--upload-meda-panel-color);
  color: var(--upload-meda-panel-color-text);
  font-size: 1em;
  text-align: center;
  border-radius: 8px;
}