/* Vue */
[v-cloak] {
  display: none;
}

.fukidasi-enter-active {
  animation: fadeinLeft 0.5s;
}

.fukidasi-leave-active {
  animation: fadeinLeft 0.5s reverse;
}

.fukidasi-enter-active:has(.balloon-company) {
  animation: fadeinRight 0.5s;
}

.fukidasi-leave-active:has(.balloon-company)  {
  animation: fadeinRight 0.5s reverse;
}

@keyframes fadeinLeft {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeinRight {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 事務局ログイン */

.admin-login {
  color: white; 
  background-color: red;
  margin-left:.5em;
}

/* 事務局の吹き出し */

.balloon-secretariat {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon-secretariat .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon-secretariat .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #ffbf7f;
  border-radius: 50%;
  background: #ffe2c6;
}

.balloon-secretariat .chatting {
  width: 100%;
}

.says-secretariat {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #ffe2c6;
}

.says-secretariat:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #ffe2c6;
}

.says-secretariat p {
  margin: 0;
  padding: 0;
  white-space: pre-line;
}

/* 申請システムの吹き出し */

.balloon-system {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon-system .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon-system .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #bf7fff;
  border-radius: 50%;
  background: #c6c6ff;
}

.balloon-system .chatting {
  width: 100%;
}

.says-system {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #c6c6ff;
}

.says-system:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #c6c6ff;
}

.says-system p {
  margin: 0;
  padding: 0;
  white-space: pre-line;
}

/* 事業者の吹き出し */

.balloon-company {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon-company .faceicon {
  float: right;
  margin-left: -90px;
  width: 80px;
}

.balloon-company .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #7fff7f;
  border-radius: 50%;
  background: #c6ffc6;
}

.balloon-company .chatting {
  width: 100%;
  text-align: right;
}

.says-company {
  display: inline-block;
  position: relative; 
  margin: 5px 105px 0 0;
  padding: 17px 13px;
  border-radius: 12px;
  background: #c6ffc6;
  text-align: left;
}

.says-company:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  right: -24px;
  border: 12px solid transparent;
  border-left: 12px solid #c6ffc6;
}

.says-company p {
  margin: 0;
  padding: 0;
  white-space: pre-line;
}

/* 貨物の文字背景 */

.text-bg-dk {
  color: #fff !important;
  background-color: RGBA(255, 236, 237, var(--bs-bg-opacity, 1)) !important;
}

/* 整備の文字背景 */

.text-bg-st {
  color: #fff !important;
  background-color: RGBA(227, 244, 250, var(--bs-bg-opacity, 1)) !important;
}

/* 貨物のボタン */

.btn-dk {
  color: #fff;
  background-color: #FFA3A6;
  border-color: #FFA3A6;
}

.btn-dk:hover {
  color: #fff;
  background-color: #e59295;
  border-color: #e59295;
}

.btn-dk:focus, .btn-dk.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 123, 0, 0.5);
}

.btn-dk.disabled, .btn-dk:disabled {
  color: #fff;
  background-color: #c0c0c0;
  border-color: #c0c0c0;
}

.btn-dk:not(:disabled):not(.disabled):active, .btn-dk:not(:disabled):not(.disabled).active,
.show > .btn-dk.dropdown-toggle {
  color: #fff;
  background-color: #cc8284;
  border-color: #cc8284;
}

.btn-dk:not(:disabled):not(.disabled):active:focus, .btn-dk:not(:disabled):not(.disabled).active:focus,
.show > .btn-dk.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 123, 0, 0.5);
}

/* 整備のボタン */

.btn-st {
  color: #fff;
  background-color: #75CCE8;
  border-color: #75CCE8;
}

.btn-st:hover {
  color: #fff;
  background-color: #69b7d0;
  border-color: #69b7d0;
}

.btn-st:focus, .btn-st.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-st.disabled, .btn-st:disabled {
  color: #fff;
  background-color: #c0c0c0;
  border-color: #c0c0c0;
}

.btn-st:not(:disabled):not(.disabled):active, .btn-st:not(:disabled):not(.disabled).active,
.show > .btn-st.dropdown-toggle {
  color: #fff;
  background-color: #5da3b9;
  border-color: #5da3b9;
}

.btn-st:not(:disabled):not(.disabled):active:focus, .btn-st:not(:disabled):not(.disabled).active:focus,
.show > .btn-st.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}