/* =================================================================================================================================================== */
/* GENERAL */
/* =================================================================================================================================================== */
* {
	font-size: 1em;
}

caption {
	text-decoration: underline;
}

hr {
	margin: 5px;
}

label, .control-label, .checkbox, .radio {
	font-size: 15px;
}

legend {
	margin-bottom: 10px;
}

table{
	font-size: 1.025em;
}

#login {
	margin-top: 0em;
	width:80%;
}

#logo {
	padding-top:5px;
}

.alert {
	font-size: 1.05em;
	font-weight: bold;
}

.center  {
	margin: auto;
}

.control-label {
	font-size: 1em;
}

.form-group {
	margin-bottom: 5px;
}

.invisible {
	background: transparent;
	border: none;
}

.larger-font {
	font-size: 1.1em;
}

.largeAndBold {
	font-size: 1.2em;
	font-weight: bold;
}

.multiselect {
	padding: 6px;
	overflow: hidden;
}

.quantity-type {
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 15px;
}

.right {
	float: right;
}

.slim {
	padding: 5px;
}

.fsc-modal {
	max-height: 400px;
	overflow: scroll;
}

/* =================================================================================================================================================== */
/* RESPONSIVE */
/* =================================================================================================================================================== */
.container {
	margin-top: 2.5em;
	margin-bottom: 3em;
}

/* Small devices (tablets, 768px and up) */
@media(min-width:768px) {
	.container {
		margin-top: 5em;
		margin-bottom: 3em;
		width:95%;
	}
}
/* ------------------------------------------------------------------------------ */
/* 
 * 	Change table to reponsive format on smaller screens 
 *	
 */

@media(max-width: 991px){
	/* Force table to not be like tables anymore */
	.table.responsive table, thead, tbody, th, td, tr { 
		display: block;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.table.responsive thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.table.responsive tr { 
		border: 1px solid #ccc;
	}
	
	.table.responsive td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%;
	}
	
	.table.responsive td:before { 
		/* Now like a table header */
		position: absolute;

		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;

		/* Values come from data-th */
		content: attr(data-th);
		font-weight: bold;
	}
}
/* ------------------------------------------------------------------------------ */
.no-padding-left {
    padding-left: 0px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .no-padding-sm-left {
        padding-left: 0px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .no-padding-md-left {
        padding-left: 0px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .no-padding-lg-left {
        padding-left: 0px;
    }
}
/* ------------------------------------------------------------------------------ */
.no-padding-right {
    padding-right: 0px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .no-padding-sm-right {
        padding-right: 0px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .no-padding-md-right {
        padding-right: 0px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .no-padding-lg-right {
        padding-right: 0px;
    }
}
/* ------------------------------------------------------------------------------ */
.no-padding-side {
    padding-left: 0px;
    padding-right: 0px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .no-padding-sm-side {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .no-padding-md-side {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .no-padding-lg-side {
        padding-left: 0px;
        padding-right: 0px;
    }
}
/* ------------------------------------------------------------------------------ */
.pronum {
	font-size: 1.8em;
	font-weight: bold;
	margin-top: 0em;
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.pronum {
		font-size: 1.8em;
		font-weight: bold;
		margin-top: 1em;
	}
}
/* ------------------------------------------------------------------------------ */
.text-xs-right {
    text-align: right;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-sm-right {
        text-align: right;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-md-right {
        text-align: right;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-lg-right {
        text-align: right;
    }
}
/* ------------------------------------------------------------------------------ */
.title-padding {
	margin-top: 0em;
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.title-padding {
		margin-top: 2em;
	}
}

/* =================================================================================================================================================== */
/* NAVIGATION */
/* =================================================================================================================================================== */
.alpha-pagination > div:nth-child(1) > ul {
	margin-bottom: 0px;
}

.alpha-pagination > div:nth-child(2) > ul {
	margin-top: 0px;
}

.navbar {
	margin-bottom: 0px;
	color: #008BB9;
}

.navbar .nav li > a, .navbar .nav li > a:focus {
	font-weight: bold;
}

.navbar-fixed-bottom {
	min-height: 1em;
}

.navbar-fixed-bottom a#bottom {
	float: right;
}
.navbar-form {
	border: none;
	padding: 0px 15px;
}

.nav-bottom {
	margin-top: 45px;
}

.navbar-fixed-bottom {
	font-weight: bold;
}

.navbar-fixed-bottom .center {
	text-align: center;
}

.nav-bottom .container-fluid {
	background-color: #333333;
}

.nav-bottom .nav > li > a {
	color: #008BB9;
}

.nav-bottom .nav .open > a, .nav-bottom .nav .open > a:focus, .nav-bottom .nav > li > a:hover,
.navbar-default .nav .open > a, .navbar-default .nav .open > a:focus, .navbar-default .nav > li > a:hover { 
	background-color: #EEEEEE;
	color: #008BB9;
}

.nav-bottom .nav .open .dropdown-menu > li > a:hover {
	background-color: #008BB9;
}

.nav-bottom .nav .active > a {
	background-color: #008BB9;
	color: #EEEEEE;
}

.nav-mobile .nav .open > a, .nav-mobile .nav .open > a:focus, .nav-mobile .nav > li > a:hover,
.navbar-default .nav .open > a, .navbar-default .nav .open > a:focus, .navbar-default .nav > li > a:hover { 
	background-color: #EEEEEE;
	color: #008BB9;
}

.nav-mobile .nav > li > a {
	color: #008BB9;
}

.nav-mobile .nav {
	background-color: #333333;
}

.nav-mobile .nav .active > a {
	background-color: #008BB9;
	color: #EEEEEE;
}
.nav-mobile .nav .open .dropdown-menu > li > a:hover {
	background-color: #008BB9;
}

.nav-top, .nav-mobile {
	background-color: #008CBA;
}

.nav-top .btn {
	padding: 6px 12px;
}

/* =================================================================================================================================================== */
/* BUTTONS */
/* =================================================================================================================================================== */
#attached {
	font-size: 0.75em;
}

#euv button {
	padding-top: 5px;
	padding-bottom: 5px;
}

#manifested {
	padding-top: 5.5em;
	margin-top: -5.5em;
}

#customer button {
	font-size: 0.8em;
}

.button-checkbox button {
	margin: auto;
	font-size: 1em;
}

.button-checkbox-small button {
	margin-left:20px;
	padding: 0px 0px 0px 4px;
	font-size: 1em;
}

.square {
	padding: 0px;
	margin: 5px;
	width: 80px;
	display: inline-block;
}

.square button, .square a {
	padding: 10px; 
	width: 100%;
}

.small-square {
	padding: 0px;
	margin: 5px;
	width: 40px;
	display: inline-block;
}

.small-square button, .small-square a {
	padding: 5px; 
	width: 100%;
}

/* =================================================================================================================================================== */
/* COLOURS */
/* =================================================================================================================================================== */
.red {
	color: red;
}

.blue {
	color: blue;
}

.green {
	color: green;
}

.coloured option[value="on hold"] {
	color: red;
}

.coloured option[value="created"] {
	color: red;
}

.coloured option[value="pre-alert"] {
	color: red;
}

.coloured option[value="manifested"] {
	color: #6F6F6F;
}

.coloured option[value="in transit"] {
	color: #6F6F6F;
}

.coloured option[value="at destination"] {
	color: #6F6F6F;
}

.coloured option[value="delivered"] {
	color: #6F6F6F;
}

.coloured option[value="invoiced"] {
	color: blue;
}