main {
  padding-top: 3rem;
  padding-bottom: 6rem
}

nav .container {
  height: 40px
}

.modal-header {
  height: 56px
}

nav img.navbar-toggler {
  border: none;
  padding: 0
}

ul {
  padding: 0;
  margin: 1rem 0
}

li {
  list-style: none;
}

.talk li {
  font-size: 1rem
}

.talk li div {
  max-width: 75%;
  font-weight: 500
}

.talk li span.share {
  border-radius: 22px
}

footer {
  padding-top: 0.8rem;
  padding-bottom: 0.5rem
}

footer input {
  height: 35px;
  color: #333;
}

footer input::placeholder {
  color: #aaa
}

footer .reload {
  margin-left: 12px;
  padding-top: 4px;
}

footer .character_count {
  font-size: 0.6rem
}

img.gorilla {
  height: 3.5rem
}

#menu.offcanvas.offcanvas-start {
  width: 80%
}

#menu .offcanvas-body {
  padding-right: 0;
  padding-left: 0
}

#menu.ul {

}


.arrow{
  position: relative;
  font-weight: 500
}
.arrow::before,
.arrow::after{
  position: absolute;
  content: "";
}

#historyModal .modal-body {
  padding: 0
}

#historyModal ul {
  padding-left: 1rem;
  padding-top: 0;
  margin-top: 0
}


#historyModal li {

}

#historyModal li .header {
  padding: 1rem 0;
  padding-right: 3rem
}

#historyModal li .header.arrow::after {
  right: 1.7rem;
  top: 22px;
  width: 11px;
  height: 11px;
  border-top: 3px solid #4e4e4e;
  border-right: 3px solid #4e4e4e;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: transform .2s ease
}

#historyModal li .header.arrow.on::after {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  transition: transform .2s ease
}

#historyModal li .footer {
  padding-bottom: 1rem;
  padding-right: 2.5rem;
  display: none
}

#help {
  height: 85%;
}

.btn-close {
  background: none;
  width: 24px;
  height: 24px;
  opacity: 1
}

#help .talk li div {
  width: 100%;
  max-width: 100%;
}

#help .offcanvas-body {
  padding-top: 0
}

#movieModal,
#resetModal {
  height: 30%
}

footer .form {
  position: relative
}

.btn_pre_send {
  position: absolute;
  right: 0.5rem;
  top: 0.2rem;
  z-index: 10;
  opacity: 0.3
}

.btn_pre_send.on {
  opacity: 1
}

#shareModal .modal-content {
  background: #0BA37F;
}

#shareModal .caption {
  margin-bottom: 1rem;
  color: #fff;
  font-weight: bold;
}

#shareModal ul {
  margin: 0;
  border-radius: 0.5rem
}

.modal.text .container h2 {
  font-size: 1.2rem
}

.offcanvas-header span:first-child {
min-width: 2rem
}

.form-control-sm {
  padding-right: 2.5rem;
  border: 0;
  -webkit-appearance: none;
  -webkit-box-shadow: 0px 0px 7px 0px #c9c9cd;
  box-shadow: 0px 0px 7px 0px #c9c9cd;
  border-radius: 2px;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  /* border-color: rgba(126, 239, 104, 0.8); */
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6); */
  outline: 0 none;
}

* {
  overflow-wrap: anywhere;
}

.h1 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: bold
}

.ico {
  max-width: 24px
}

.share_btn {
  display: block;
  width: 26px;
  height: 26px;
  text-align: center;
}

.share_btn .ico {
  vertical-align: initial;
}