@charset "UTF-8";

.content-input {
    margin-bottom: 30px;    
}

/* 修正768px - 990px input 跑版 */
@media screen and (min-width:768px) and (max-width:990px) {
    .content-input form .form-group input {
    width: 80%;
    }

    .field-pbform-hour {
    width: 22%;
    }

    .field-pbform-min {
        width: 20%;
    }

    .field-pbform-sec {
        width: 20%;
    }
}


.number-input {
    text-align: right;
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-right: 5px;
}

@media (max-width: 568px) {
    .number-input {
        width: 24%;
    }
}

@media (max-width: 320px) {
    .number-input {
        width: 23%;
    }
}

.btn-press {
    background-color: #00AB7B;
    border: 1px solid #00AB7B;
    border-radius: 50px;
    padding: 5px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
}
/*
.btn-press a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}
*/
@media (max-width: 768px) {
    .btn-press {
        margin-top: 20px;
        width: 85%;
    }
}

@media (max-width: 568px) {
    .btn-press {
        width: 100%;
    }
}

.btn-press:hover {
    background-color: #459725;
    border: 1px solid #459725;
}
.btn-press a:hover, .btn-press a:active, .btn-press a:visited {
    color:#fff;
    text-decoration: none;
}


.input-position {
    margin-left: 10px;
}

@media (max-width: 768px) {
    .input-position {
        margin-left: 0;
        margin-top: 10px;
    }
}

.input-position > label {
    padding-right: 10px;
}

.my-run-level {
    text-transform: uppercase;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    display: block;
    font-size: 70px;
    font-weight: bold;
    text-align: center;
    padding-top: 30px;
}

.progress {
    margin-bottom: 30px !important;
}

.result-content {
  margin-bottom: 20px; 
}
  
.result-content h3 {
    display: inline-block;
    border-bottom: 5px solid #00AB7B;
    padding-bottom: 8px;
    font-weight: bold;
}

@media(max-width:568px) {
    .result-content h3 {
        margin-bottom: 10px;
    }
}

.pace-clone {
    display: inline-block;
    font-size: 18px;
    padding-left: 20px;
}

@media (max-width: 768px) {
      .result-content .pace-clone {
        padding-left: 0; 
      } 
}

@media (max-width: 568px) {
      .result-content .pace-clone {
        margin-bottom: 10px; 
      } 
}

.result-content .row .pull-right {
    margin-bottom: -8px;
}
.result-content .row .pull-right span {
    font-size: 18px;
    font-weight: bold;
}

.result-content .input-group {
    float: right !important;
}

#table {
    padding: 0;
    margin-top: 10px
}

@media (max-width: 568px) {
      .result-content .input-group {
        margin-top: 0;
        margin-bottom: 20px;
        float: none !important; 
        width: 100%;
      } 
      .input-group > input {
          text-align: right;
      }
    
}


.table-inform input {
    width: 20%;
    text-align: right;
}
.table-inform th {
     text-align: center;
     font-weight: bold;
}

@media (max-width: 568px) {
    .table-inform input {
        width: 40%;
    }
}

.eBg {
  background-color: #5BC0DE !important; }

.mBg {
  background-color: #5CB85C !important; }

.tBg {
  background-color: #A9C650 !important; }

.aBg {
  background-color: #fce303 !important; }

.iBg {
  background-color: #F0AD4E !important; }

.rBg {
  background-color: #D9534F !important; }

.color-linear {
  background: -webkit-linear-gradient(left, #00AB7B, #5cc530) !important;
  background: -o-linear-gradient(left, #00AB7B, #5cc530) !important;
  background: -moz-linear-gradient(left, #00AB7B, #5cc530) !important;
  background: linear-gradient(to right, #00AB7B, #5cc530) !important;
}
  
.table-pace {
    display: none;
}

.result-content-none {
    opacity: 0.8;
    filter: alpha(opacity=50);
    background-image: url(../img/blur.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media (max-width:568px) {
    .result-content-none {
         background-size: 100% 100%;
    }
}


.result-content-none p {
    padding: 80px 10px;
    z-index: 9;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: black;
}

.result-content-none p a {
    text-decoration: none;
    border: 1px solid #00AB7B;
    border-radius: 10px;
    background-color: #00AB7B;
    color: #fff;
    padding: 8px;
    margin-left: 5px;
}

.result-content-none p > span {
    display: block;
    padding: 10px 0;
}

.btn-store {
  border: 1px solid #00AB7B;
  border-radius: 20px;
  background-color: #00AB7B;
  padding: 5px 12px;
  margin-left: 10px;
}

@media(max-width:568px) {
    .btn-store {
        margin-left: 0;
        padding: 5px 8px;
    }
    .btn-store a {
    font-size: 10px;
}
}

.btn-store:hover {
    background-color: #459725;
    border: 1px solid #459725; 
}
  
.btn-store a {
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: white; 
}
.btn-store a:hover, .btn-store a:active, .btn-store a:visited {
    color:#fff;
    text-decoration: none;
}