/*
 文字色: #333333
 文字色2： #999999
 メイン： #91C9F4
 強調 : 648DF8
 背景： #FEFEFE
 補助： #D7D7D7
 危険： #FF9A68
 */

#register input::placeholder {
  color: #999999;
}

a, a:hover {
  color: #91C9F4;
}

.nav-tabs .nav-link {
  color: #999999;
}

.nav-tabs .nav-link.active {
  border: 1px solid #91C9F4;
  background-color: #91C9F4;
  color: #FEFEFE;
}

.nav-tabs {
  border-bottom: 1px solid #91C9F4;
}

.nav-tabs .nav-link:hover {
  border: 1px solid #91C9F4;
  background-color: #91C9F4;
  color: #FEFEFE;
  border-bottom: 1px solid #91C9F4;
}

.btn, .btn:hover {
  border-radius: 25px;
  border: 3px solid #91C9F4;
  background: #91C9F4;
  color: #FEFEFE;
}

button.pale-gray, button.pale-gray:hover {
  border-radius: 25px;
  border: 3px solid #999999;
  background: #999999;
  color: #FEFEFE;
}

hr {
  border-top: 1px solid #91C9F4;
  opacity: 1;
}

.body {
  background-color: #FEFEFE;
  color: #333333;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

.main {
  flex: 1;
}

footer{
  /*footerの装飾*/
  width: 100%;
  height:25px;
  background-color: #91C9F4;
  color: #FEFEFE;
  font-size: 0.8em;
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pale-gray {
  color: #999999;
}

.light-blue {
  color: #91C9F4;
}

.deep-blue {
  color: #6086E5;
}

.orange {
  color: #FF9A68;
}

.red {
  color: #d9534f;
}

.pale-gray-bg {
  background: #999999;
}

.light-blue-bg {
  background-color: #91C9F4;
}

.deep-blue-bg {
  background-color: #6086E5;
}

.orange-bg {
  background: #FF9A68;
}

.red-bg {
  color: #d9534f;
}

a.deep-blue:hover {
  color: #6086E5;
}

.list-group-item {
  background-color: #FEFEFE;
  border-bottom: 1px solid #D7D7D7;
}

.bi-dash-square, .bi-plus-square {
  font-size: 1.2rem;
}

.bi-check-square {
  font-size: 1.2rem;
  color: #bbbbbb;
}

.bi-check-square-fill,
.bi-check-circle-fill,
.bi-patch-check-fill,
.bi-check2-circle {
  font-size: 1.2rem;
  color: #5cb85c;
}

.bi-dash-circle {
  font-size: 1.2rem;
  color: #d9534f;
}

.bi-caret-down-fill {
  color: #4291F5;
}

.bi-caret-up-fill {
  color: #EB5447;
}

.bi-caret-right-fill {
  color: #AEB3BB;
}

.bi-bookmark-star-fill {
  font-size: 1.2rem;
}

.bi-bookmark-star-fill.rank-1 {
  color: #FFD700;
}

.bi-bookmark-star-fill.rank-2 {
  color: #C9CACA;
}

.bi-bookmark-star-fill.rank-3 {
  color: #815A2B;
}

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

.logo {
  width: 100%;
}

#login .form-control {
  border: 1px solid #91C9F4;
  background-color: #FEFEFE;
  border-radius: 25px;
}

button.disabled {
 background: #D7D7D7
}

#user-modify .row.caption,
#user-modify-password .row.caption,
#register .row.caption {
  width: 95%;
  color: #91C9F4;
  padding-left: 2.5%;
}

#register .register {
  width: 97.5%;
}

#user-modify #birth-year,
#register #birth-year {
  width: 20%;
}

#user-modify .input-group .txt,
#user-modify-password .input-group .txt,
#register .input-group .txt {
  text-align: center;
  margin-left: 2%;
  margin-right: 2%;
}

#register .register .btn {
  width: 100%;
}

#user-modify .container.block,
#user-modify-password .container.block,
#register .container.block {
  width: 95%;
  background: #D7D7D7;
  padding: 3.0%;
  border-radius: 10px;
}

#user-modify .form-control.is-valid,
#user-modify .form-control.is-invalid,
#user-modify-password .form-control.is-valid,
#user-modify-password .form-control.is-invalid,
#register .form-control.is-valid,
#register .form-control.is-invalid {
  background-position: right 3% top 50%;
}

#user-modify .form-control.is-invalid,
#user-modify-password .form-control.is-invalid,
#register .form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px' fill='%23d9534f' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

#user-modify .form-control.is-valid,
#user-modify-password .form-control.is-valid,
#register .form-control.is-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px' fill='%235cb85c' class='bi bi-check2-circle' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z'/%3E%3Cpath d='M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z'/%3E%3C/svg%3E");
}

#user-modify .form-control,
#user-modify-password .form-control,
#register .form-control {
  border: 0px solid #91C9F4;
  background-color: #FEFEFE;
  border-radius: 40px;
  padding-left: 30px;
}

#user-modify label,
#user-modify-password label,
#register label {
  margin-left: 30px;
}

#user-modify .bi-check2-circle,
#user-modify-password .bi-check2-circle,
#register .bi-check2-circle {
  position: absolute;
  margin-top: -2px;
  margin-left: -20px;
}

#user-modify .form-title,
#user-modify-password .form-title,
#register .form-title {
  color: #FEFEFE;
}

#user-modify a.btn.back,
#user-modify-password a.btn.back {
  min-width: 70px;
}

#user-modify #last-name {
  margin-right: 15px;
}

#league-list .container.block {
  width: 100%;
  border: 3px solid #91C9F4;
  padding: 3%;
  border-radius: 10px;
}

label.invalid {
  color: #d9534f;
}

.today, .today .list-group-item {
  background-color: #FEFEFE;
}

#admin .nav-tabs.strong, .today.nav-tabs {
  border-bottom: 1px solid #6086E5;
}

#admin .nav-tabs.strong .nav-link, .today.nav-tabs .nav-link.active {
  border: 1px solid #6086E5;
  background-color: #6086E5;
  border-bottom: 1px solid #6086E5;
}

#admin {
  width: 96%;
  border: 3px solid #FF9A68;
  padding: 3%;
  border-radius: 5px;
}
.number-spinner .btn,
.number-spinner .btn:hover,
.number-spinner .btn:active,
.number-spinner .btn:focus {
  border-radius: 0px;
  border: 0px solid #91C9F4;
  color: #999999;
  background-color: transparent;
}

.cancel.btn,
.cancel.btn:hover,
.cancel.btn:active,
.cancel.btn:focus,
.join.btn,
.join.btn:hover,
.join.btn:active,
.join.btn:focus {
  border: 0px;
  background: transparent;
}

#league .cancel.btn,
#league .cancel.btn:hover,
#league .cancel.btn:active,
#league .cancel.btn:focus {
  border: 1px solid #D7D7D7;
  background-color: #D7D7D7;
  border-radius: 40px;
  width: 100%;
}

#league .join.btn,
#league .join.btn:hover,
#league .join.btn:active,
#league .join.btn:focus {
  border: 1px solid #648DF8;
  background-color: #648DF8;
  border-radius: 40px;
  width: 100%;
}

.btn.back {
  width: 100%;
}

.btn.update, .btn.register {
  width: 100%;
  border: 3px solid #6086E5;
  background: #6086E5;
}

.btn.notify_via_linebot, .btn.cancel-league {
  width: 100%;
  border: 3px solid #FF9A68;
  background: #FF9A68;
}

#user-info .h1 {
  margin-bottom: 0;
}

/* xxl */
@media (max-width: 1399.98px) {
  #user-modify .form-control.is-valid,
  #user-modify .form-control.is-invalid,
  #user-modify-password .form-control.is-valid,
  #user-modify-password .form-control.is-invalid,
  #register .form-control.is-valid,
  #register .form-control.is-invalid {
    background-size: 2.5%;
  }
}

/* xl */
@media (max-width: 1199.98px) {
}

/* md */
@media (max-width: 991.98px) {
  #user-modify .form-control.is-valid,
  #user-modify .form-control.is-invalid,
  #user-modify-password .form-control.is-valid,
  #user-modify-password .form-control.is-invalid,
  #register .form-control.is-valid,
  #register .form-control.is-invalid {
    background-size: 5%;
  }
}

/* sm */
@media (max-width: 767.98px) {
  #user-modify .form-control.is-valid,
  #user-modify .form-control.is-invalid,
  #user-modify-password .form-control.is-valid,
  #user-modify-password .form-control.is-invalid,
  #register .form-control.is-valid,
  #register .form-control.is-invalid {
    background-position: right 4% top 50%;
  }
  #user-modify .form-control.is-valid,
  #user-modify .form-control.is-invalid,
  #user-modify-password .form-control.is-valid,
  #user-modify-password .form-control.is-invalid,
  #register .form-control.is-valid,
  #register .form-control.is-invalid {
    background-size: 5%;
  }
}

/* xs */
@media (max-width: 575.98px) {
}