* {
  box-sizing: border-box;
}

body {
  background-color: #313131;
}

.sticky-top {
  background-color: #313131;
  box-shadow      : -1px 10px 5px black;
}

.active .nav-link {
  text-decoration      : underline;
  text-decoration-color: #00D2FF;
}

#dropdownMenu2 {
  background-color: #313131;
  border-color    : #313131;
  color           : white
}


/*pano*/

#pano {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
}


#reveal {
  width           : 60px;
  height          : 60px;
  background-color: #e0e0e0;
  border-radius   : 15%;
  margin-left     : 0;
  text-align      : center;
  cursor          : pointer;
  transition      : height .3s ease-in-out,
    width .3s ease-in-out,
    border-radius .3s ease-in-out,
    margin .3s ease-in-out;
  box-shadow: 0px 0px 10px rgb(0 0 0)
}


#reveal>img {
  width        : 50px;
  height       : 50px;
  margin       : 5px 0;
  border-radius: 15%;
}

#reveal :active {
  transform: translateY(4px);
}


.fa-chevron-up {
  color      : #00D2FF;
  text-shadow: 3px 6px #272634;
  cursor     : pointer;
}

#map {
  bottom          : 0;
  left            : 0;
  background-size : contain;
  position        : absolute;
  display         : block;
  border-radius   : 5px;
  transform-origin: bottom left;
  transition      : all .5s ease-in-out;
  opacity         : 1;
}

#tools {
  position        : absolute;
  right           : 0;
  bottom          : 0;
  background-image: linear-gradient(180deg, #00D2FF, #3A7BD5);
  border-radius   : 5%;
}


.dot {
  width           : 16px;
  height          : 16px;
  background-color: lawngreen;
  border-radius   : 50%;
  position        : absolute;
  cursor          : pointer;
}

.red {
  animation-name           : flashing;
  animation-duration       : 2s;
  animation-iteration-count: infinite;
}

@keyframes flashing {
  50% {
    transform: scale(0.5);
  }
}

/*左下角*/
#button {
  position        : absolute;
  bottom          : 0;
  background-image: linear-gradient(180deg, #00D2FF, #3A7BD5);
  border-radius   : 5%;
}

#button button {
  color      : white;
  font-weight: 900;
}

#addModal .modal-content {
  background-color: #e0e0e0
}

#addModal .btn-primary {
  background-image: linear-gradient(180deg, #00D2FF, #3A7BD5);
}



/*倒三角形*/
.triangle-down {
  position   : relative;
  top        : -1rem;
  right      : 0.05em;
  border-left: 5rem solid transparent;
  border-top : 5rem solid #e0e0e0;
}


.sector {
  position        : relative;
  transform-origin: 50% 0%;
  width           : 0;
  height          : 0;
  top             : 50%;
  left            : -100%;
  border-left     : 25px solid transparent;
  border-right    : 25px solid transparent;
  border-bottom   : 50px solid red;
  border-radius   : 50px;
  visibility      : hidden;
  opacity         : 0.5;
}



/*showModal*/
#show_carouselControls {
  margin-bottom: 5%;
  text-align   : center;
}

#showModal .modal-content {
  background-color: #e0e0e0;
}

#show_carouselControls img {
  width        : 50% !important;
  margin       : 0 auto;
  margin-bottom: 10%;
  border-radius: 3%;
}

#show_carouselControls video {
  margin       : 0 auto;
  border-radius: 3%;
  margin-bottom: 1.5rem;
}

#show_carouselControls audio {
  width : 80%;
  margin: 1rem auto;
}

#showModal .info div {
  display              : grid;
  grid-template-columns: auto 13rem auto auto;
  grid-column-gap      : 1rem;
}

#showModal .info .tag {
  word-wrap: break-word;
}

#showModal .info h5 {
  font-weight: 900;
}

#showModal .carousel-control-next {
  height: 15%;
  margin: auto;
}

#showModal .carousel-control-prev {
  height: 5%;
  margin: auto;
}


#mainContent {
  word-wrap : break-word;
  height    : 100%;

}

/* div.container ::-webkit-scrollbar {
  width     : 0px;
  background: transparent
   
} */

#showModal script {
  display: block;
}


#instruction .modal-content {
  background-color: #e0e0e0;
}


/*留言牆*/

.message .description {
  display       : flex;
  flex-direction: column;
  margin        : 5% 0;
}

.message .description .text {
  width    : 80%;
  margin   : 2% auto;
  word-wrap: break-word;
}

.message .description .fa-user-circle {
  font-size   : 2em;
  margin-right: 0.5rem;
}

.message .description span {
  font-size: 1rem;
}

.message .description .basic {
  display        : flex;
  flex-direction : row;
  justify-content: space-between;

}

.message .description .like {
  margin-left    : 50%;
  display        : flex;
  flex-direction : row;
  justify-content: space-evenly;
}

.message .fa-times-circle {
  color : gray;
  height: 1rem;
}

.message .fa-times-circle:hover {
  color : black;
  cursor: pointer
}

.message .fa-pen {
  color : gray;
  height: 1rem;
}

.message .fa-pen:hover {
  color : black;
  cursor: pointer
}

.message .messageIcon {
  flex-basis: 3rem;
}

.message .description .fa-thumbs-up:hover {
  cursor: pointer;
}

.message .description .fa-thumbs-down:hover {
  cursor: pointer;
}

.message .btn-sm {
  float           : right;
  background-image: linear-gradient(180deg, #00D2FF, #3A7BD5);
}

.message .load-more_button {
  cursor: pointer;
}