@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
:root{
  --bs-primary:#23abfa;
}
body {
  background-color: var(--bs-light);
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
nav {
  background-color: var(--bs-white);
  min-height:4.5rem;
}
.navbar-expand-md .navbar-nav .nav-link{
  padding: .5rem 1rem;
  box-sizing: border-box;
  border:2px transparent solid;
}
.navbar-expand-md .navbar-nav .nav-link:hover{
  padding: .5rem 1rem;
  border-bottom-color: var(--bs-light);
}
.card.card-primary .card-header {
  background: var(--bs-primary);
  color: var(--bs-white);
}
.card.card-success  .card-header {
  background: #D9EEDA;
  color: #222;
}
.card.card-danger .card-header {
  background: var(--bs-danger);
  color: var(--bs-white);
}
td{
  vertical-align: middle;
}
/*
tr.invalid{
  display:none;
}
.bi{
  font-size:1.6rem;
}
*/
main {
  padding-top:1rem;
}
footer {
  background-color: var(--bs-light);
  height:3rem;
}
footer>hr {
  margin: 1rem 0 .5rem;
}
footer>p {
  padding-right: 1rem;
  margin:0;
  text-align:right;
  font-size:.7em;
}

h1, h2, h3, h4 {
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  font-weight: 300;
  line-height: 1.2;
  color: inherit;
}

h1{
  padding-bottom: .7rem;
  margin: 0 0 1.5rem;
  border-bottom: 1.5px solid #d3d7db;
  font-weight: 500;
  font-size: calc(1.3rem + .6vw);
}

.btn-default {
  color: #6c757d;
  border-color: #c3cbd2;
}
.btn-default:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-primary {
  background-color:#2196F3;
}
.btn-success {
  background-color:#24c77b;
}
.btn-warning {
  background-color:#ff9800;
  border-color: #db9227;
  color:#fff;
}
.btn-warning:hover {
  background-color: #cc7a00;
  border-color: #b86d00;
  color: #fff;
}
.btn-info {
  color: #fcfcfc;
  background-color: #9c27b0;
  border-color: #9525a8;
}
.btn-info:hover {
  color: #fcfcfc;
  background-color: #771e86;
  border-color: #681a76;
}

.bg-light-success {
  background-color: #d9eeda !important;
}
.bg-light-warning {
  background-color: #ffeacc !important;
}
.bg-light-info {
  background-color: #e3f2fd !important;
}

.row-cols-responsible>* {
  flex:0 0 auto;
  width: 20%;
}
@media (min-width:576px) {
  .row-cols-responsible>* {
    flex:0 0 auto;
    width: 12.5%;
  }
  .row-cols-responsible>.col-twice {
    width: 25%;
  }
}
@media (min-width:768px) {
  .row-cols-responsible>* {
    flex:0 0 auto;
    width: 8.3333333333%;
  }
  .row-cols-responsible>.col-twice {
    width: 16.666666666%;
  }
}
@media (min-width:1024px) {
  .row-cols-responsible>* {
    flex:0 0 auto;
    width: 5.555555555%;
  }
  .row-cols-responsible>.col-twice {
    width: 11.111111111%;
  }
}

/* LABEL + INPUT */
.form-group input {
  order: 2;
}
.form-group input.form-control{
  height: 3.4rem;
  padding: 1.25rem .75rem 0;
}
.form-group input.form-control::placeholder {
  color: transparent;
  padding-bottom: .1rem;
}
.form-group input + label.form-label {
  display: block;
  order: 1;
  transition: transform 0.2s;
  transform: translate(.8rem,-2.5rem) scale(1);
  transform-origin: 0 100%;
  margin-bottom:-.5rem;
  color:#AAA;
}
.form-group input:not(:placeholder-shown) + label, .form-group input:focus + label {
  display: block;
  order: 1;
  transition: transform 0.2s;
  transform: translate(.7rem,-3.4rem) scale(.7);
  transform-origin: 0 100%;
  color:#333;
}

/* MAP */
.well {
  padding: .8rem;
  margin-bottom: .5rem;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: .1rem;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.well:last-child{
  margin-bottom: 0rem;
}

.modal-dialog {
  max-width:650px;
}
/* FIREFOX PADDING-BOTTOM FIX */
.modal-dialog-scrollable .modal-body {
  padding-bottom:0;
}
.modal-dialog-scrollable .modal-body:after {
  content: "";
  display: block;
  height: 1rem;
}

fieldset {
  border: 1px #2196f3 solid;
  padding: 0 .5rem .3rem;
  background-color: #FcFcFc;
  margin-top: .5rem;
}

fieldset legend{
  border:0;
  font-size:16px;
  width:auto;
  margin-left:.5rem;
  margin-bottom:0;
  padding:0 .3rem;
  float:none;
}
fieldset legend + div{
  max-height:5.5rem;
  overflow-y:auto;
}

fieldset p{
  padding:1px 3px;
  margin:0;
}

fieldset p.append-row{
  color:#fcfcfc;
  background-color:#ef5e5e;
}
#map-info h4{
  font-weight:bold;
}
#map-info h4, #map-info p{
    margin-bottom:0;
}
#map-info .well button {
    margin-top: .5rem;
}