﻿/*
    smaller font sizes
*/

@media (max-width: 1199px) { 
    h1, .h1 {
        font-size: 26px;
    } 
    .btn-lg, .btn-group-lg > .btn{
        font-size: 15px;
    }
    .underline-link{
        font-size: 14px;
    }
    .ship-summary-value .underline-link,
    .ship-summary-value{
        font-size: 18px;
    }
    .ship-summary-label{
        font-size: 12px;
        padding-bottom: 0px;
    }

    .photoreport-summary-value .underline-link,
    .photoreport-summary-value {
        font-size: 18px;
    }

    photoreport-summary-label {
        font-size: 12px;
        padding-bottom: 0px;
    }
    body,
    .log-upload-wrap .col-xs-4{
        font-size: 12px;
    }
    .page-header-wrap .underline-link{
        margin-top: 6px;
    }
    .nav > li{
        display: inline-block;
    }

    .col-lg-2-3.text-right{
        float: right;
    }
    .ship-summary > div:nth-child(4n){
        text-align: right;
    }

    .table-wrap .table > thead > tr > th,
    .table-wrap .table > tbody > tr > td{
        padding: 8px 4px;
    }

    .table-wrap .table > thead > tr > th{
        padding-right: 25px;
        position: relative;
        vertical-align: top;
    }

    table[data-sortable] th:after{
        position: absolute;
        right: 10px;
        top: 7px;
    }

    .main{
        padding: 15px;
    }

    .page-header-wrap{
        padding-top: 15px;
    }

    .navbar-nav{
        margin-top: 0;
    }

    .nav.navbar-right{
        float: right;
        margin-right: -5px;
    }

    /*.jas-wrap{
        margin-top: -50px;
    }*/
    
       
}

@media (max-width: 1279px) {
    .scrollable .table-wrap{
        margin-top: 0px;
    }
    .scrollable-outer-wrap::before {
        content: "";
        width: 50px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#228574+0,228574+100&0+0,1+100 */
        background: -moz-linear-gradient(left,  transparent 0%, rgba(34,133,116,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  transparent 0%,rgba(34,133,116,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  transparent 0%,rgba(34,133,116,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        opacity: 0.75;
        z-index: 5;
        height: 105%;
        position: absolute;
        top: -20px;
        right: -35px;
        -webkit-border-top-left-radius: 100%;
        -webkit-border-bottom-left-radius: 100%;
        -moz-border-radius-topleft: 100%;
        -moz-border-radius-bottomleft: 100%;
        border-top-left-radius: 100%;
        border-bottom-left-radius: 100%;
    }
    .scrollable-wrap{
        max-width: 100%;
        overflow-x: auto;
    }
    .scrollable-outer-wrap {
        position: relative;
        overflow: hidden;
    }
    .scrollable{
        min-width: 1250px;
    }

    .scrollable .row{
        margin-left: 0px;
        margin-right: 0px;
        padding-right: 0px;
    }
}







.col-xs-2-3{
        width: 20%;
        float: left;
        padding: 5px 1px;
        margin-bottom: 10px;
    }
.col-xs-2-3:nth-child(5n+1) {
        clear: left;
    }

@media (max-width: 1399px) and (min-width: 1200px){
    .col-lg-2-3{
        width: 20%;
    }
    /*.col-lg-2-3:nth-child(3n+1) {
        clear: left;
    }*/
}

@media (min-width: 1400px){
    .col-lg-2-3{
        width: 20%;
        margin-bottom: 10px;
    }
    .col-lg-2-3:nth-child(5n+1) {
        clear: left;
    }
    .loaded-to-date-ship-summary-wrap{
        max-width: 75%;
    }
}