/*.body {
    background-image: url('../img/family.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}*/

/*@media screen and (min-width: 768px) {
    .body {
        background-image: url('../img/family.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
}*/
/* .body {
        background-image: url('../img/family.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    } */

.opacity-80 {
    opacity: 0.8!important; 
}

.body-content {
    /*margin-top: 2em;*/
    /*background-color: gray;
    opacity: 0.8;*/
    border-radius: 20px;
    background: rgb(211, 211, 211);
    background: rgba(211, 211, 211, .8);
    min-height: 20em;
}

.profile-picture {
  position: relative;
  width: 50%;
}

.profile-picture:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.small-profile-picture {
    /*max-width: 30px !important;
    max-height: 30px !important;*/
    width: 30px;
    height: 30px;
    object-fit: cover;
    object-position: center;
}

.timeline-profile-picture {
    width: 64px;
    height: 64px;
    object-fit: cover;
    object-position: center;
}

.link-text {
    color: rgb(0, 123, 255)!important;
}

.sidebar {
  padding-left: 15px !important;
  padding-right: 15px !important;

  border-right-color: rgba(0,0,0,0.1);
  border-right-style: solid;
  border-right-width: 1px;
}

.sidebar > .sidemenu {
  /*display: block !important;*/
  /*hide side menu if the width is lower than 768px*/
}

@media screen and (min-width: 768px) {
  .sidebar > .sidemenu {
    display: block !important;
  }
}

.sidemenu > .nav-item > .nav-link {
  color: rgba(0, 0, 0, 0.65);
}
.sidemenu > .nav-item > .nav-link:hover {
  color: rgba(0, 0, 0, 0.90)
}

.bg-facebook {
  background-color: #3B5998;
}

.google {
  background-color: #dd4b39;
  color: white;
  text-align: left;
}
.facebook {
  background-color: #3B5998;
  color: white;
  text-align: left;
}

.google:hover, .facebook:hover {
    color: white;
    opacity: 0.7;
}

.transparent-box-80 {
    border-radius: 20px;
    background: rgb(211, 211, 211);
    background: rgba(211, 211, 211, .8);
}
.transparent-box-50 {
    border-radius: 20px;
    background: rgb(211, 211, 211);
    background: rgba(211, 211, 211, .5);
}

.circle-shape {
    text-align: center;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
}

.circle-shape.hp-0 {
    background-color: pink !important;
}
.circle-shape.hp-1 {
    background-color: red !important;
}
.circle-shape.hp-2 {
    background-color: orange !important;
}
.circle-shape.hp-3 {
    background-color: yellow !important;
}
.circle-shape.hp-4 {
    background-color: rgb(66, 244, 146) !important;
}
.circle-shape.hp-5 {
    background-color: green !important;
}

.bg-facebook .nav-link {
    color: white !important;
}
.bg-facebook .nav-link:hover {
    opacity: 0.8 !important;
}

.pointer {
    cursor: pointer;
}

.paddingless {
    padding: 0px !important;
}

.main-content {
    min-height: 88vh;
}