body {
    /*padding-top: 70px;*/
    padding-bottom: 20px;
    max-width:1080px;
    margin-right: auto;
    margin-left: auto;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    /*
    padding-left: 15px;
    padding-right: 15px;
    */
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}

.validation-summary-errors li{
    padding-left: 15px;
    list-style-type: none;
}

.navbar {
    margin-bottom: 10px;
}

.navbar-header {
    position: relative;
}

.navbar-header > .btn {
    float: left;
}

.nav-title {
    font-size: 34px;
    position: absolute;
    left: 48%;
    transform: translateX(-48%);
}
.panel{
    margin-bottom: 10px;
}

    .pager-parts {
        background-color: #dff0d8;
        padding: 10px;
        border-radius: 10px 10px;
        margin-bottom: 12px;
    }

        .pager-parts nav {
            position: relative
        }

        .pager-parts ul {
            position: relative
        }

    .pager {
        margin: 0;
        min-height: 30px;
    }

    .pager-title {
        color: #3c763d;
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 60%;
    }

    .pager-date {
        width: 100%;
        padding: 2px 5px;
    }

    #menu-parts a {
        display: block;
    }

    table a {
        display: block;
    }


    .input-group {
        padding: 10px;
    }

        .input-group > label {
            padding: 0 5px;
        }

    th {
        background-color: lightgray;
    }

    .row-eq-height {
        display: flex;
        flex-wrap: wrap;
    }

    .detail [class*="col-"] {
        padding: 3px 5px;
        border: 1px solid #D8D8D8;
        color: #333;
        word-wrap: break-word;
    }

    .detail-th {
        font-weight: bold;
        background-color: #f1f1f1;
    }




.select-table > tbody > tr > td {
    padding: 0 8px;
}

    .select [class*="col-"] {
        padding: 4px 6px;
        color: #333;
    }

    .select hr {
        margin: 0;
        border-top: 1px solid #eeeeee;
    }

    .div-table{
        display: table;
    }

    .div-table-cell {
        display: table-cell;
        padding: 4px 10px 4px 5px;
    }

.select-color-hi {
    font-size: 115%;
    color: #ff3300;
}
.select-color-tei {
    font-size: 115%;
    color: #ff0099;
}
.select-color-kyo {
    font-size: 115%;
    color: #0000cd;
}


.input-text {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    body {
        font-size: 25px;
    }

    .nav-title {
        font-size: 32px;
    }

    .select {
        margin: 5px 10px;
        font-size: 18px;
    }

    .pager-date {
        font-size: 18px;
    }

    .validation-summary-errors li {
        font-size: 20px;
    }

    #ImageSpace {
        height: 400px;
    }

    .btn-size {
        padding: 5px 10px;
    }

    .detail div {
        min-height: 43px;
    }

    .detail .text-area {
        min-height: 150px;
    }
}

@media (max-width: 575px) {
    body {
        font-size: 20px;
    }

    .nav-title {
        font-size: 24px;
    }

    .select {
        margin: 2px 8px;
        font-size: 14px;
    }

    .validation-summary-errors li {
        font-size: 17px;
    }

    .sire-list {
        font-size: 13px;
    }

        .sire-list td {
            min-width: 86px;
        }

    #ImageSpace {
        height: 200px;
    }

    .btn-size {
        padding: 3px 5px;
        font-size: 14px;
    }

    .detail div {
        min-height: 28px;
    }

    .detail .text-area {
        min-height: 80px;
    }
}

@media (max-width: 496px) {
    body {
        font-size: 18px;
    }

    .nav-title {
        font-size: 21px;
        left: 35%;
        transform: translateX(-25%);
    }

    .pager li > a {
        font-size: 12px;
    }

    .select {
        margin: 0 8px;
        font-size: 11px;
    }

    .detail {
        font-size: 13px;
    }

}

@media (max-device-width: 480px) {
    #title {
        position: static;
        padding-left: 4em;
    }
    
}

@media (max-device-width: 370px) {
    .nav-title {
        font-size: 20px;
    }
}