@media only screen {
    body {
        background-color: #353535;
    }

    .ctl-limiter select, .ctl-limiter input, .ctl-limiter ul, .ctl-limiter textarea {
        max-width: 500px; /* stop dropdowns & other items from going full-width on main screens */
    }
}

/* I don't want a background colour on the menu unless it's on a tiny device */
@media only screen and (min-width : 768px) {
    .navbar-default {
        background-color: transparent;
        border: 0;
    }

        .navbar-default .navbar-brand {
            color: transparent;
        }
}

.navbar-nav > li > a {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 10pt;
    color: #ffffff !important;
}

.navbar-nav > li > a:hover {
    background-color: #696969 !important;
}

.pagination > li.active > a {
    background-color: #768da2;
    color: #ffffff!important;
}

.active a {
    color: #d6d5d5 !important;
}

/* add a drop-shadow to dragndrop items when they're being dragged*/
.ui-draggable-dragging {
    -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.3);
    font-size: 20pt;
    width: 300px;
    border: 2px dashed #696969;
}

/* I want to make the drop are as large as possible in case the user drops in the white space*/
.droppable {
    min-height: 600px;
}

.highlight-drop-area {
    border: 2px dashed #696969;
}

/* this makes the tables have far less white space and no top border */
table.table-noborder tr > td {
    border-top: none !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.title-alert {
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    font-weight: bold;
    font-size: 12pt;
}

.alert-grey {
    background-color: #cacaca;
    border-color: #696969;
}

.alert-less-padding {
    margin: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
}

    .alert-less-padding .form-group {
        margin: 0px;
        padding: 0px;
    }

    .alert-less-padding .btn  {
        margin-top: 5px;
    }
        
.pagination {
    margin-top: 0px;
    margin-bottom: 10px;
}

/* no background color on active menu items pls..*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus
{
    background-color: transparent;
}

/* no background color on active menu items on the category selectors either pls ..*/
.nav-tabs .dropdown-menu > .active > a {
    background-color: transparent;
}


/* x-small screens */
@media only screen and (max-width : 400px) {

    #smallDialogBox .modal-dialog {
        max-width: 340px;
    }
   
    .review-answer {
        max-width:50px;
        
    }

}

/* non x-small screens */
@media only screen and (min-width : 400px) {

    .review-answer {
        width: 100px;
    }
}

/* scrollable tables */
.scroll-height-normal {
    max-height:240px;
}

.scroll-height-large {
    max-height: 500px;
}

table.tc-table {
    font-family: Tahoma, sans-serif;
    font-size: 10pt;
}
    table.tc-table th {
        color: #000000;
        background-color: #accae6;
    }


    table.tc-table td {
        font-size: 10pt;
    
    }


.repeatheader {
    color: #00548D !important;
    font-weight: bold;
    background-color: #F5F5F5 !important;
}

.repeatheader_dark {
    color: #ffffff !important;
    font-weight: bold;
    background-color: #898989 !important;
}

.rowheader {
    color: #000000 !important;
    font-weight: bold;
    background-color: #d6d5d5 !important;
}

.page-header {
    margin-left: 10px;
    font-size: larger;
}

.progress {
    background: rgba(245, 245, 245, 1);
    border: 0px solid rgba(245, 245, 245, 1);
    border-radius: 4px;
    height: 20px;
}

.progress-bar-custom {
    background: rgba(77, 199, 87, 1);
}

.progress-striped .progress-bar-custom {
    background-color: rgba(77, 199, 87, 1);
    background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255, 255, 255, 0.15),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255, 255, 255, 0.15)),color-stop(0.75,rgba(255, 255, 255, 0.15)),color-stop(0.75,transparent),to(transparent)));
    background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255, 255, 255, 0.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,transparent 75%,transparent);
    background-size: 40px 40px;
}

.alert-sm {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.alert-xs {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* on the unit edit dialog, reduce the vertical spacing and padding so things fit better onscreen */
.unit-edit-dialog .form-group {
    margin-bottom: 10px;
}

.unit-edit-dialog .form-control:not(textarea) {
    padding-left: 6px;
    height: 32px; /* tighter input boxes */
}

.unit-edit-dialog .control-small {
    height: 28px!important; /* neater textboxes (overrides previous entry above - .unit-edit-dialog .form-control:not(textarea)) */
}
.unit-edit-dialog .alert-info {
    margin-top: 10px;
    margin-bottom: 5px;
}

.well-sm {
    margin-top: 2px;
    margin-bottom: 6px;
}

.dropdown-menu > li > a {
    color: #00548D !important;
}

table.table-dashboard tr > td {
    border-top: none !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

table.table-dashboard th, table.table-dashboard td {
    font-size: smaller;
    color: rgba(84, 74, 74, 1)
}

.control-centered {
    text-align:center!important;
}

.control-right {
    text-align: right!important;
}

.text-pink {
    color: #FF69B4;
}

/* I want disabled controls to appear properly when printed (also for on-screen version too) */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    opacity: 1;
}

    .radio input[type="radio"]:disabled + label {
        opacity: 0.9;
    }

.label-bigger {
    font-size:10pt;
}

/* don't grey out the delivered buttons on purchase orders when disabled */
.btn.disabled {
    opacity: 1;
}

/* scrollable list of ordered products when in edit-mode */
.pre-scrollable {
    min-height: 550px;
    margin-top: 4px;
}

.checkbox-nopadding {
    padding-left: 0;
}