* { box-sizing: border-box; }

a {
    color: #1CB038;
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
}

h1 {
    text-align: center;
}

.btn {
    background-color: #1CB038;
    color: aliceblue;
    border-color: #1CB038;
}

.photo-container {
    display: inline-block;
    text-align: center;
    margin-right: 1px; margin-bottom: 5px;
}

.photo-content {
    display: inline-block;
    text-align: center;
    margin-right: 1px; margin-bottom: 5px;
}
.content{
    text-align: center;
    margin-right: 1px; margin-bottom: 5px;
}

.content img{
    width: 100%;
}

.photo_data{
    width: 100%;
    padding: 10px;
}


.fixed-menu {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.fixed-menu button {
    background-color: #1CB038;
    border: #1CB038;
    color: aliceblue;
    padding: 10px;
}

.loader{
  position: fixed;
  top: 0;
  left: 0;
  background: lightgrey;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.disppear{
  animation: vanish 1s forwards;
}
@keyframes vanish {
  100%{
    opacity: 0;
    visibility: hidden;
  }
}

.select {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 10vw;
  overflow: hidden;
  /*border-radius: 0.5em;*/
  box-shadow: 0 0 0 2px grey;
}
.select::after {
  content: "";
  position: absolute;
  top: 0.9em;
  right: 1.5em;
  z-index: 1;
  height: 0.7em;
  width: 0.7em;
  transform: rotate(45deg);
  box-shadow: 2px 2px 0 grey;
  pointer-events: none;
}

.select input {
  display: none;
}

.color {
  display: flex;
  align-items: center;
  height: 0;
  overflow: hidden;
}
.select:hover .color {
  min-height: 3em;
  height: auto;
}
.select input:checked+.color {
  z-index: 1;
  order: -1;
  height: auto;
  box-shadow: 0 0 0 2px grey;
}
.select input:not(:checked)+.color:hover {
  background-color: #eee;
  cursor: pointer;
}

.color img {
  margin: 0.5em 1em;
  height: 2em;
  width: 3em;
}

.select .placehold {
  z-index: 1;
  display: flex;
  align-items: center;
  order: -1;
  min-height: 3em;
  padding-left: 1em;
  box-shadow: 0 0 0 2px grey;
}
.select input:checked~.placehold {
  display: none;
}


.link {
    fill: none;
    stroke: #555;
    stroke-opacity: 0.4;
    stroke-width: 2px;
}

.node {
    cursor: pointer;
    fill: #ccc;
}

.node text {
    font-size: 12px;
    stroke: #333;
    stroke-width: 0.5px;
}

.node circle {
    stroke: #fff;
    stroke-width: 3px;
}

.commento-logged-container {
    display: none;
}

.commento-markdown-button {
    display: none;
}

.commento-logo-text {
    display: none;
}

.chat-box {
    max-width: 600px;
    margin: auto;
    border: 1px solid #ddd;
    padding: 20px;
    height: 300px;
    overflow-y: scroll;
}

.sender-message, .owner-message {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.sender-message {
    background-color: #e9ecef;
    text-align: left;
}

.owner-message {
    background-color: #007bff;
    color: white;
    text-align: right;
}

.message-content {
    margin-bottom: 5px;
}

.message-timestamp {
    font-size: 0.8em;
}