.round {
  border-radius: 50%;
}

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

.tpp-container-no-border {
  display: flex;
  background-color: #FFFFFF;
  color: #000000;
  padding: 10px;
  /*margin-bottom: 10px;*/
}

.tpp-container {
  display: flex;
  background-color: #FFFFFF;
  border-left: 1px solid #c2c2c2;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
  padding: 10px;
  color: #000000;
}

.tpp-container-center {
  display: flex;
  align-items: center;
  /* up-down */
  justify-content: center;
  background-color: #FFFFFF;
  border-left: 1px solid #c2c2c2;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
  padding: 10px;
  color: #000000;
}

.tpp-container-no-flex {
  background-color: #FFFFFF;
  border-left: 1px solid #c2c2c2;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
  padding: 10px;
  color: #000000;
}

.tpp-container-wrap {
  display: block;
  background-color: #FFFFFF;
  border-left: 1px solid #c2c2c2;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
  padding: 10px;
  color: #000000;
  overflow: hidden;
}

.tpp-container-wrap-content {
  display: block;
  width: 100%;
}

.tpp-container-img-float {
  float: left;
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.tpp-container-img-float-lg {
  float: left;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 5px;
  margin-top: 5px;
  margin-right: 12px;
  margin-bottom: 10px;
}

.tpp-container-no-first {
  display: flex;
  background-color: #FFFFFF;
  border-left: 1px solid #c2c2c2;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
  padding: 10px;
  color: #000000;
}

.tpp-container-no-flex:first-child,
.tpp-container:first-child,
.tpp-container-wrap:first-child {
  border-top: 1px solid #c2c2c2;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tpp-container-no-flex:last-child,
.tpp-container:last-child,
.tpp-container-wrap:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 20px;
}

.tpp-container-img-container {
  height: 100%;
  /*width: 60px;
	min-width: 60px;*/
  padding: 5px;
  /*margin-right: 5px;*/
}

.tpp-container-img {
  width: 50px;
  height: 50px;
}

.tpp-container-img-small {
  width: 32px;
  height: 32px;
}

.img-round {
  border-radius: 50%;
}

.img-rounded {
  border-radius: 5px;
}

.border-radius {
  border-radius: 5px;
}

.tpp-container-img-landscape {
  width: 50px;
}

.tpp-container-img-landscape-cover {
  width: 80px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
}

.tpp-container-img-cover {
  width: 50px;
  /*height: 50px;*/
  object-fit: cover;
}

.tpp-container-img-rounded {
  width: 50px;
  object-fit: cover;
  border-radius: 5px;
}

.image-cover {
  object-fit: cover;
}

.image-radius-5 {
  border-radius: 5px;
}

.tpp-container-icon {
  width: 32px;
  height: 32px;
  cursor: pointer;
  margin-right: 10px;
}

.tpp-container-icon-18 {
  width: 18px;
  height: 18px;
  margin-top: 5px;
  margin-right: 10px;
}

.tpp-container-icon-14 {
  width: 14px;
  height: 14px;
  /*margin-top: 5px;*/
  margin-right: 10px;
}

.tpp-container-action-icon {
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin-right: 3px;
}

.tpp-container-img-w {
  width: 50px;
}

.strikethrough {
  text-decoration: line-through;
}

.tpp-container-img-round {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.tpp-container-number-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  text-align: center;
  min-width: 60px;
  min-height: 60px;
  padding: 5px;
  margin-right: 5px;
}

.tpp-container-middle {
  flex-grow: 1;
  /*width: 100%;*/
  margin: auto;
  padding-right: 5px;
}

.tpp-container-middle-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.tpp-container-center-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.tpp-container-title {
  font-weight: bold;
}

.tpp-container-sub-title {
  width: 100%;
  font-weight: light;
  color: #7F7F7F;
}

.tpp-container-sub-title-light {
  width: 100%;
  font-weight: light;
  font-size: small;
  color: #7F7F7F;
  margin-top: 2px;
}

.tpp-container-right {
  margin: auto;
}

.tpp-container-right-flex {
  display: flex;
}

.gap-2 {
  gap: 2px;
}

.tpp-flex-align-items-top {
  align-items: flex-start;
}

.tpp-flex-align-items-center {
  align-items: center;
}

.tpp-flex-justify-content-center {
  justify-content: center;
}

.tpp-flex-justify-content-end {
  justify-content: flex-end;
}

.tpp-flex-grow {
  flex-grow: 1;
}

.tpp-container-number {
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.tpp-container-actions {
  width: 100%;
}

.tpp-container-bottom {
  display: flex;
  width: 100%;
}

.tpp-container-button-inactive {
  line-height: 1.25em;
  padding: 0 0 1em 0;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  background-color: #FFB27F;
  cursor: pointer;
}

.tpp-container-button-active {
  line-height: 1.25em;
  padding: 0 0 1em 0;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  background-color: #FF7F7F;
  cursor: pointer;
}

.heading-first {
  font-weight: bold;
  padding-bottom: 10px;
  text-align: center;
  color: #646464;
  opacity: 0.75;
}

.heading {
  font-weight: bold;
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
  color: #646464;
  opacity: 0.75;
}

.heading-left {
  font-weight: bold;
  /*padding-top: 15px;*/
  padding-bottom: 10px;
  color: #646464;
  opacity: 0.75;
}

.heading-left a {
  font-weight: bold;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 10px;
  color: #646464;
  opacity: 0.85;
}

.heading-left a:hover {
  font-weight: bold;
  text-decoration: underline;
  padding-top: 15px;
  padding-bottom: 10px;
  color: #646464;
  opacity: 0.85;
}

.tpp-container-input-text {
  outline: none;
  user-select: text;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid #dddfe2;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;

  border-radius: 5px;
  height: 40px;
  width: 100%;
}

/**/
.sort-panel {
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
}

.sort-container {
  width: 100%;
  padding: 3px;
  cursor: pointer;
}

.sort-icon {
  width: 22px;
  height: 22px;
  float: right;
  cursor: pointer;
}

.sort-options {
  padding: 10px;
}

.template-letter-container {
  margin-bottom: 5px;
  width: 100%;
  padding: 10px;
  background-color: #E6F2F7;
  border-radius: 5px;
}

.end-margin {
  margin-bottom: 20px;
}

/*Navbar footer section*/
.no-scroll {
  overflow: hidden;
}

.cursor-link {
  cursor: pointer;
}

.cursor-hand {
  cursor: pointer;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.navbar-footer-open {
  display: none;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #003042;
  z-index: 1000;
}

.navbar-footer-open .footer-link {
  float: none;
  display: block;
  color: #FFFFFF;
  text-align: left;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}

.navbar-footer-closed {
  display: block;
  overflow: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1001;
}

.navbar-footer-closed .icon {
  border-radius: 5px;
  border: 2px solid #FFFFFF;
  float: right;
  cursor: pointer;
  /*border-radius: 50%;*/
  /*opacity: 75%;*/
  background-color: #B5D56A;
  color: #041319;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}

.navbar-footer-hr {
  background-color: #FFFFFF;
  width: 90%;
  margin: auto;
}

/*Navbar footer section*/


.object-fit {
  /*object-fit: contain;*/
  object-fit: cover;
}

/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
.myshadow {
  /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
}

.myshadow-button {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
}

.myshadow-button:hover {
  /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  transition: 0.3s;
}

.memory_container {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
}

.status-create {
  border-radius: 5px;
  background: #E6F2F7;
  border: 1px solid #dddfe2;
  margin-bottom: 10px;
}

.status-create-no-round {
  background: #E6F2F7;
  border: 1px solid #dddfe2;
  margin-bottom: 10px;
}

.status {
  /*border-radius: 5px;*/
  background: #FFFFFF;
  border: 1px solid #dddfe2;
  margin-bottom: 10px;
}

.status-container {
  padding: 10px;
}

.status-item {
  float: left;
}

.user {
  margin-top: 5px;
  width: 40px;
  height: 40px;
  float: left;
}

.user-status {
  margin-top: 5px;
  margin-left: 5px;
  flex-grow: 1;
}

.user-avatar img {
  border-radius: 50%;
}

.flex {
  display: flex;
  display: -webkit-flex;
  /* Safari */
}

.memory-info {
  border-bottom: 1px solid #EEEEEE;
}

.status-box {
  outline: none;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;

  width: 100%;
  flex-grow: 1;
}

.hidden {
  display: none;
}

.status-content {
  outline: none;
  user-select: text;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid #dddfe2;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  height: 40px;
  width: 100%;
}

.status-content-body {
  outline: none;
  user-select: text;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid #dddfe2;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  min-height: 62px;
  width: 100%;
}

.status-content:focus {
  border: 2px solid #BFDEFF;
}

.media-container {
  width: 100%;
}

.media-attachment-container {
  display: none;
  padding: 15px 10px;
  text-align: center;
}

.media-attachment-container.media-active {
  display: block;
}

.media-attachment-item {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
  object-fit: contain;
}

.create-memory-attachments {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 5px;
}

.add-media-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.add-media-container:hover {
  background-color: #F2F2F2;
  transition: 0.3s;
}

.action-image-small {
  width: 20px;
  height: 20px;
  /*margin-right: 5px;*/
}

.action-image {
  width: 36px;
  height: 36px;
  /*margin-right: 5px;*/
}

.action-label {
  font-weight: bold;
  color: #7F7F7F;
}

.create-memory-btn-container {
  display: flex;
  flex-grow: 1;
  width: 100%;
  align-items: center;
  justify-content: end;
  gap: 5px;
}

.img-thumbnail {
  width: 100px;
  height: 100px;
}

#media-attachment-loader {
  display: none;
}

.edit-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  width: 100%;
  position: absolute;
  top: 0;
  height: 100%;
  transition: 0.3s ease all;
}

.edit-tools:hover {
  background: rgba(0, 0, 0, .3);
  transition: 0.3s ease all;
}

.edit-tools .remove-icon {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}

.edit-tools .edit-icon {
  position: absolute;
  left: 5px;
  top: 5px;
  cursor: pointer;
}

/*
@media (max-width: 480px) {
  .edit-tools .edit-icon {
    display: none;
  }
}
*/

.media-attachment-item:last-child {
  margin-right: 0;
}

.media-attachment-item.media-attachment-item-placeholder {
  border-width: 2px;
  border-style: dashed;
  border-color: rgb(221, 223, 226);
  background-image: url('/assets/img/plus-icon.png');
  background-size: 20px;
  background-position: 50% center;
  background-repeat: no-repeat;
}

.child_date {
  margin-bottom: 0px;
}

#child_id_select {
  margin-bottom: 5px;
  margin-right: 5px;
  height: 40px;
}



.btn {
  cursor: pointer;
  position: relative;
}

/*
.placeholder {
  position: absolute;
  border-width: 2px;
  border-style: dashed;
  border-color: rgb(221, 223, 226);
  background: #efefef;
  height: 100px;
  width: 100px;
}
*/

.media-attachment-item {
  position: relative;
  /** More li styles **/
}

.media-attachment-item:before {
  position: absolute;
  /** Define arrowhead **/
}

#progress-container {
  /*display: none;*/
  /*margin-top: 24px;*/
  /*margin-left: 12px;*/
  width: 76px;
  height: 76px;
}

.progress-percentage {
  position: absolute;
  margin-top: 25px;
  left: -0px;
  width: 100%;
  color: #ED6A5A;
  font-weight: bold;
  text-align: center;
}


.memory-title {
  outline: none;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;

  width: 100%;
}

.memory-title-details {
  color: #444;
  font-size: 0.9em;
  font-weight: lighter;
  outline: none;

  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 5px;

  width: 100%;
}


.memory-user {
  margin-top: 5px;
  width: 40px;
  height: 40px;
  float: left;
}

.carousel {
  margin-top: 20px;
}

.att2 {
  background-size: cover;
  height: 400px;
  width: auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.bottom-right {
  position: relative;
  bottom: 0;
  right: 0;
}

.crop-image {
  width: 30px;
  height: auto;

}

.profile-picture {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.cover {
  object-fit: cover;
}

.dragOver {
  background-color: #E5DADA;
  transition: 0.3s;
}

.dragOut {
  background-color: #FFFFFF;
  transition: 0.3s;
}



/********************** Comment *************************/
.post-comment-container {
  position: relative;
  margin-top: 5px;
}

.comment-textarea {
  margin-top: 5px;
  width: 100%;
  height: 26px;
  padding: 10px;
  border: 1px solid rgba(18, 10, 32, 0.125);
  background-color: #FFFFFF;
  height: 43px;
  overflow-wrap: break-word;
  resize: none;
}

.comment-textarea:focus {
  outline: none;
  padding-right: 40px;
  border: 1px solid #2195F2;
  box-shadow: 0 0 5px #719ECE;
}

.comment-container {
  border-left: 5px solid #84BED6;
}

.comment-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  bottom: 21px;
  right: 16px;
  cursor: pointer;
}

.fa-paper-plane {
  color: #2195F2;
}

.comment-avatar-container {
  margin-right: 5px;
  padding-top: 5px;
}

.comment-avatar {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.comment-text-container {
  width: 100%;
  padding-top: 5px;
}

.comment-text {
  width: 100%;
  color: #8F8F8F;
}

.comment-details {
  width: 100%;
  font-size: 12px;
  color: #BFBFBF;
}

.comment-edit {
  padding-top: 10px;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  height: 100%;
}

.comment_counter {
  border-left: 5px solid #84BED6;
  padding-left: 10px;
  color: #BFBFBF;
  cursor: pointer;
}

.options-ellipsis {
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
}

.options-ellipsis:hover {
  background-color: #d9d9d9;
}

.success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  font-weight: bold;
}

.failure {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  font-weight: bold;
}

.attachment-container {
  border-radius: 5px;
  padding: 5px;
  /*background-color: #e0e0e1;*/
  border: 1px solid #c2c2c2;
  margin-bottom: 4px;
}

.attachment-container:hover {
  background-color: #e0e0e1;
}

/* Remove outline from elements targeted via URL fragments */
:target {
  outline: none !important;
}

.image-container {
  position: relative;
  width: 100%;
  height: 120px;
  margin-bottom: 10px;
}

.banner {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.image-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
  padding: 15px;
}

.image-container .overlay {
  display: block;
  color: #000000;
}

.school-image {
  width: 50px;
  height: 50px;
  float: left;
  border-radius: 50%;
}

.school-name {
  float: left;
  margin-left: 10px;
  max-width: 75%;
}

.school-name-text {
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.description {
  display: block;
  clear: both;
  font-style: italic;
  font-size: 14px;
  font-weight: bold;
}