body {
  background-color: transparent;
}

body.daishinko
{
  background: rgb(95,155,218);
  background: linear-gradient(180deg, rgb(164 229 244) 0%, rgb(22 36 117) 100%);
  background-attachment: fixed;
}

.countercgi {
  display: none;
}

.counterdisplay {
  color: #fff;
}

#touken_schedule .container {
  max-width: 750px;
  margin-bottom: 10px;
}

.tama-container {
  /*background-color: #d9edf7;
  color: #31708f;*/
  background-color: #337ab7;
  color: #fff;
  margin-bottom: 0;
}

body.daishinko .tama-container {
  background-color: #abe9ff;
  border-color: #abe9ff;
}

body.daishinko .tama-container .counter-container.panel-heading {
    background-color: #abe9ff;
    border-color: #abe9ff;
}

.custom-target .stat-box {
  color: #ca8b00;
}

body.daishinko .custom-target .stat-box {
  color: #fbff9b;
}

.stat-box, .tama-amount {
  text-align: center;
}

.big-text {
  padding: 10px;
  font-size: 40px;
}

.maintenance-text {
  line-height: 60px;
  font-size: 20px;
}

.progress {
  margin-bottom: 0px;
}

.progress.overflow {
  background-color: #337ab7;
}

.reward-row .progress-bar {
  min-width: 2em;
}

.reward-row {
  padding: 2px 0 2px 0;
  border: 1px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.reward-row.targeted {
  border: 1px solid #fdb81d;
  background: #fbfbb6;
  background: -moz-linear-gradient(top, #ffffff 0%, #fff0ad 50%, #ffe693 51%, #ffffff 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%,#fff0ad 50%,#ffe693 51%,#ffffff 100%);
  background: linear-gradient(to bottom, #ffffff 0%,#fff0ad 50%,#ffe693 51%,#ffffff 100%);
}

.reward-row.reward-tier-primary {
  line-height: 18px;
  color: #c73b3b;
}
.reward-row.reward-tier-primary .reward{
  font-size: 18px;
}

.reward-row.reward-tier-secondary {
  line-height: 18px;
  color: #2c7cab;
}
.reward-row.reward-tier-secondary .reward{
  font-size: 18px;
}

body.daishinko .reward-row {
  background-color: #f4fcff;
  border: 1px solid #99d7eb;
}

.reward {
  text-align: right;
  word-break: normal;
  word-break: auto-phrase;
}

.version {
  font-size: 18px;
  font-weight: normal;
}

.tama-container .counter-container, .incr-counter {
  padding: 5px 15px;
}

.counter-container {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}

.spinner-counter {
  display: -webkit-flex;
  display: flex;
  padding-left: 1px;
}

.counter-digit {
  width: 35px;
  height: 95px;
  position: relative;
  margin-left: -1px;
}

.counter-digit .counter-digit-input {
  width: 100%;
  top: 31%;
  height: 38%;
  text-align: center;
  font-size: 2rem;
  border-radius: 0;
  border: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  position: absolute;
}

.counter-digit:first-child .counter-digit-input {
  border-left: 1px solid #ccc;
}

.counter-digit:last-child .counter-digit-input {
  border-right: 1px solid #ccc;
}

.counter-digit .counter-digit-input:focus {
  outline: none;
}


.counter-digit .counter-digit-button {
  width: 100%;
  height: 31%;
  left: 0;
  position: absolute;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 4px;
  color: #aaa;
}

.tama-container .counter-digit .counter-digit-button {
  color: #91A8BD;
  background-color: #F6F8FD;
  border-color: #CEDDE8;
}

.counter-digit .counter-digit-button:hover {
  background-color: #e6e6e6;
}

.counter-digit .count-up {
  top: 0;
  border-radius: 8px 8px 0 0;
}

.counter-digit .count-down {
  bottom: 0;
  border-radius: 0 0 8px 8px;
}

.legacymode-checkbox label {
  font-size: 14px;
  font-weight: normal;
}


/* loading spinner begin　https://projects.lukehaas.me/css-loaders/ */
.loading{
  color: #999999;
  text-align: center;
  margin-top: 40px;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  font-size: 5px;
  margin: -10px auto 20px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* loading spinner end */

.instrument-box .instrument-label {
  padding: 6px 5px 0 0;
  text-align: right;
}

.instrument-box .instrument-counter {
  display: flex;
  padding: 0;
}

.instrument-counter .instrument-content {
  position: relative;
  margin-bottom: 2px;
}

.instrument-progress.progress {
  width: 100%;
  position: absolute;
  height: 100%;
}

.instrument-progress .instrument-progress-label {
  position: absolute;
  width: 100%;
  left: 0;
  font-size: 16px;
  padding: 4px 0;
  display: inline-block;
  text-align: center;
}

.instrument-counter .counter-digit-button, .instrument-config-counter .counter-digit-button {
  width: 35px;
  height: 32px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 6px;
  color: #aaa;
}

.instrument-counter .counter-digit-button:hover, .instrument-config-counter .counter-digit-button:hover {
  background-color: #e6e6e6;
}

.instrument-input .form-control {
  height: 32px;
}

.instrument-goal {
  font-size: 20px;
  color: #999;
  text-align: right;
  margin-right: 45px;
  margin-top: -13px;
}

.write-vertical {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.instrument-config-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
}

.instrument-config-label {
  width: 80px;
  text-align: right;
  padding-right: 10px;
}

.instrument-config-counter {
  display: flex;
  align-items: center;
}

.instrument-config-counter .count-up {
  order: 2;
}

.instrument-config-counter .count-down {
  order: 1;
}

.instrument-config-counter .counter-count {
  order: 0;
}

.zeropadding {
  padding: 0;
}

@media (max-width: 767px) {
  .tama-container {
    padding: 0px;
  }
  .tama-container .counter-container {
    padding: 5px 0;
  }
  .tama-container .counter-container .spinner-counter {
    justify-content: center;
  }
  .incr-counter {
    padding: 5px;
  }
  .incr-counter .counter-container>div {
    padding: 0 5px;
  }

  .title {
    font-size: 18px;
  }
  .title .version {
    font-size: 12px;
  }

  .big-text {
    font-size: 25px;
    padding: 0;
    margin: -5px 0;
  }
  .stat-box span {
    display: block;
  }
  .stat-box {
    padding-bottom: 5px;
    padding-top: 5px;
  }
  .stat-box input[type=checkbox] {
    display: block;
  }

  .instrument-box {
    padding: 0 5px;
  }
}

.caret {
  margin-right: 3px;
}

.tipnotes {
  text-align: center;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid #999;
  border-top: 1px solid #999;
  margin: 8px 0;
}

.scroll-container {
  display: flex;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 3px;
}

.stack-container {
  display: flex;
  flex-direction: column;
}

.scroll-container.display1 .scroll-pane {
  transform: translate(0%, 0);
}

.scroll-container.display2 .scroll-pane {
  transform: translate(-100%, 0);
}

.scroll-container.display3 .scroll-pane {
  transform: translate(-200%, 0);
}

.scroll-container .scroll-pane {
  flex-shrink: 0;
  width: 100%;
  padding: 0 30px;
  transition: transform 0.3s;
}

.stack-container .scroll-pane {
  padding: 0px 10px 5px 10px;
}

.scroll-button {
  position: absolute;
  height: 100%;
  padding: 0 10px;
  border: none;
  border-radius: 0;
}

.scroll-button.to-left {
  left: 0;
  background: linear-gradient(90deg, rgba(230,230,230,1) 0%, rgba(247,247,247,1) 35%, rgba(255,255,255,0) 100%);
}

.scroll-button.to-right {
  right: 0;
  background: linear-gradient(270deg, rgba(230,230,230,1) 0%, rgba(247,247,247,1) 35%, rgba(255,255,255,0) 100%);
}

body.daishinko .scroll-button.to-left, body.daishinko .scroll-button.to-right {
  background: #ffffff55;
}

body.daishinko .scroll-button.to-left:hover, body.daishinko .scroll-button.to-right:hover {
  background: #ffffff77;
}

.stats {
  display: flex;
}

.stat-label {
  display: block;
  align-items: center;
  text-overflow: ellipsis;
}

.stats .stat-box {
  padding-left: 5px;
  padding-right: 5px;
  flex-grow: 1;
}

.stats .stat-box.bordered {
  border-width: 0 1px 0 0;
  border-style: solid;
  border-image: linear-gradient( to bottom, rgba(0,0,0,0), #ccc, rgba(0,0,0,0) ) 1;
}

.stats .counter {
  max-width: 40px;
  flex-grow: 0;
}

.stats .counter .counter-digit-button {
  width: 40px;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  color: #aaa;
}

.vertical-align {
  display: flex;
  align-items: center;
}

.stats .counter .longbutton {
  padding-top: 15px;
  padding-bottom: 15px;
}

.stats .counter .counter-digit-button:hover {
  background-color: #e6e6e6;
}

.stats .counter .count-up {
  border-radius: 8px 8px 0 0;
}

.stats .counter .count-down {
  border-radius: 0 0 8px 8px;
}

#add-tegata .tegata-label {
  padding-top: 13px;
}

.tegata-box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tegata-box.tegata-total {
  margin-top: 20px;
}

.tegata-option {
  margin-right: 12px;
}

.tegata-option .minus {
  border-color: #ebb;
  color: #c33;
}

.modal-content hr {
  margin-top: 8px;
  margin-bottom: 8px;
}

body.daishinko .title, body.daishinko .tipnotes, body.daishinko .scroll-container {
  color: white;
}

body.daishinko .btn-default, body.daishinko .instrument-progress-label {
  color: #54658b;
}

body.daishinko .counter-digit .counter-digit-button,
body.daishinko .tama-container .counter-digit .counter-digit-button,
body.daishinko .stats .counter .counter-digit-button {
  border-color: #b1cddf;
  background-color: #d2ebf6;
  color: #8fb8d3;
}

body.daishinko .counter-digit .counter-digit-button:hover,
body.daishinko .stats .counter .counter-digit-button:hover {
  background-color: #c4dae6;
}

body.daishinko .progress {
  background-color: #d9e1e4;
}