body { background: #f4f4f4 }

h1, .h1, h2, .h2, h3, .h3 { margin-top: 10.5px; margin-bottom: 10.5px; }
.h4, h4 { font-size: 1.2rem; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10.5px; margin-bottom: 10.5px; }

.bg-grey { background-color: #898989}

@media (max-width: 767px) {
	.h1, h1 { font-size: 30px; }
}

/* Header 
---------------- */
#header { background: #333333; color: #ffffff; padding-bottom: 10px; margin-bottom: 15px }
#header .create { padding-top: 20px }

.btn-success { background-color: #18bc9c; border-color: #fff; }
.btn-success:hover { color: #ffffff; background-color: #128f76; border-color: #11866f; }

.badge { color: #fff; background-color: #2c3e50; }
.list-group { margin-bottom: 20px}
.list-group-item { padding: 0.75rem}
.list-group-item>.badge { float: right; }
.pagination-links{ margin:30px 0; }
.pagination-links strong{ padding: 8px 13px; margin:5px; background: #f4f4f4; border: 1px #ccc solid; }
a.pagination-link{ padding: 8px 13px; margin:5px; background: #f4f4f4; border: 1px #ccc solid; }

/* NavBar
---------------- */
#navBarTop li.nav-item { margin: 0 5px}
.navbar-dark .active > .nav-link { background-color: #656565;}

/* Card
---------------- */
.card { margin: 0 auto; float: none; min-width: 140px;}
.card-header { color: #fff}

@media (max-width: 767px) {
	.card { margin: 8px; min-width: 45%;}
	.w-30, .w-40, .w-50, .w-60 { width: 100%}
}
@media (max-width: 768px) {
	.card { margin: 8px; min-width: 45%;}
}
@media (min-width: 768px) {
	#wrapper_all.container { max-width: 100%}
	.card { margin: 0 8px;}
}

/* Table
---------------- */
table.table { width: 100%}
.table td:nth-last-child(1) { padding-left:5px}
.table td:nth-child(9n) div, .table td:nth-child(10n) div { max-width: 40px; }
.table td:nth-child(n) .btn { max-width: 50px;}
.table th, .table td { font-size: 14px !important }

/* Pages
----------------- */
.page-item.active .page-link, .btn-primary { background-color: #898989; border-color: #969696;}

@media (min-width: 1200px){
	.container { max-width: 1240px; }
}

/* Formulaire 
----------------- */
#login { margin-top: 30px }
#modal_form .form img { width: 100%}
.w-30 { width: 30%}
.w-40 { width: 40%}
.w-50 { width: 50%}
.w-60 { width: 60%}
span.error{ color: red; display: block; font-size: 14px; font-style: italic; line-height: 20px  }
span:last-of-type { padding-bottom: 5px }
.help-block { color: red; font-size: 14px; font-style: italic; }
.loader { display: none; position: fixed; z-index: 1000; top: 0;left: 0;height: 100%;width: 100%; background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat; }

/* breadcrumb */
.breadcrumb { background: #cccccc; color: #333333 }
.breadcrumb a { color: #333333 }

/* progess bar */
.progress-bar { background: #333333; color: #ffffff }
.dash-box { text-align: center; }

/* Modal
--------------- */
#postalMsg { font-size: 16px; font-weight: normal; text-align: center !important }
#postalMsg .modal-header { padding: 0 8px 5px}
#postalMsg .modal-body { padding: 0 1rem}
#postalMsg .alert { padding: 0.75rem}
#postalMsg .alert-dismissible{ padding-right: 0.75rem}

@media (min-width: 576px){
	.modal-dialog { max-width: 700px !important; }
}


/* Footer */
footer { color: #717171; text-align: center; margin-top: 30px }