@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600");

/* ==========================================================================
    NEW !! Site SAV
 ========================================================================== */
#homepage .card-deck {
  flex-wrap: wrap;
  justify-content: space-between;}
#homepage .card-deck .card {
  flex: 300px 1 0;
  min-width: 300px;
  max-width: 100%;
  margin: 0 15px 15px;}
#homepage #statistics {
  min-width: initial;
  max-width: 100%;
  flex: 100% 0 1;}

#contacts main .row {flex-wrap: wrap-reverse;}
#contacts #grid {
  display: grid;
  grid-template-columns: repeat(10, 10%);
  grid-template-rows: repeat(3, 35px);}
#contacts #grid-contact-details {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-auto-flow: row dense;}
#contacts #grid-contact-details input {
  overflow: hidden;
  border: none;
  color: #495057;}
#contacts #grid-contact-details label, #contacts #grid-contact-details input {
  margin: 0;
  border-top: 1px solid #dee2e6;
  padding: 6px 0;}
#contacts #grid-contact {
  display: grid;
  grid-template-columns: 5% 95%;
  grid-auto-flow: row dense;}
#contacts #grid-contact-details i, #contacts #grid-contact, #contacts #grid-contact label {
  border: none !important;}
#contacts #grid-contact-details i {
  font-size: 80px;color: #e5e6e7;}
#contacts #grid-contact input{
  border: none !important;}

#contacts #grid-contact-details textarea {
  border:none;
  resize: none;
  width:100%;
  margin-top: 0.4rem;}
#contacts #grid-contact-details div {
  border-top: 1px solid #dee2e6;}

#contacts form button {
  flex: 1 1 30%;}

#tickets {font-size: 0.85rem;}
#tickets table td {vertical-align: middle;}
#tickets #state {width:3rem;}
#tickets #dataTable {width: 100% !important;}

#ticketSummary .card-body {flex-wrap: wrap;}
#ticketSummary #materialAndSn {flex:50% 1 1; padding: 0 0.5rem; min-width: 250px;}
#ticketSummary #rmaAndCom {flex:50% 1 1; padding: 0 0.5rem; min-width: 250px;}
#ticketSummary #warrantyAndSeal {flex:25% 1 1; padding: 0 0.5rem;}
#ticketSummary #dates {flex:50% 1 1; padding: 0 0.5rem; min-width: 250px;}
#ticketSummary #buttons {flex:25% 2 1; padding: 0 0.5rem;}
#ticketSummary #problem {flex:100% 1 0; padding: 0 0.5rem;}
#ticketSummary #comments {flex:100% 1 0; padding: 0 0.5rem;}
#ticketSummary #summary {flex:100% 1 0; padding: 0 0.5rem;}
#ticketSummary #summary div {min-height: 70px;}

#ticketSummary #material-sn-rma-com, #ticketSummary #dates-warranty-seal-button {display: flex; flex:50% 1 0;}

#ticketSummary #warrantyAndSeal input {width:2rem;}
#ticketSummary #buttons button {display: block; width: 100%;}
#ticketSummary #state i {float:left; font-size: 1.32rem; margin-left: 1rem;}
#ticketSummary #state span {float:right; font-weight: 600; margin-right: 1rem;}

#ticketHistory .start-ticket .card-header {background-color: #ed5565; color:white;}
#ticketHistory .end-ticket .card-header {background-color: #1ab394; color:white;}
#ticketHistory .new-message .card-header {color: rgb(24, 28, 32); border: 1px solid rgba(0,0,0,.125);}
#ticketHistory .new-message .card-header:hover {cursor: pointer;}
#ticketHistory .new-message button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 150px;}
#ticketHistory form {display: flex; flex-wrap: wrap;}
#ticketHistory form > div { flex: 18% 1 0; padding: 0.5rem;}
#ticketHistory form > div > input, #ticketHistory form > div > input, #ticketHistory form > div > select {width:100%;}
#ticketHistory .collapsing {transition: none; display: none;}
#ticketHistory #new-message-summary, #ticketHistory #new-message-text { flex: 100% 1 0}
#ticketHistory .message {margin-bottom: 2rem;}
#ticketHistory .message .card-header {border-radius: 0; margin: -1px;}
#ticketHistory .message .card-body {
  background-color: white;
  margin: 0 -1px -1px;
  border: 1px solid lightgray;
  border-top: 0px;}
#ticketHistory .message-parcel .card-header, #ticketHistory .message-parcel .card-body {background-color: #1c84c6; color:white;}
#ticketHistory .message-parcel .card-header {margin: 0px; border-bottom: 1px solid  white;}
#ticketHistory .message-test .card-header {background-color: #1c84c6; color:white;}
#ticketHistory .message-customer .card-header {background-color: #f8ac59; color: rgb(24, 28, 32);}
#ticketHistory .message-supplier .card-header {background-color: #1ab394; color: rgb(24, 28, 32);}
#ticketHistory .message-opton .card-header {background-color: #23c6c8; color: rgb(24, 28, 32);}
#ticketHistory .message-timestamp { float:right;}
#ticketHistory .action {float:right;}
#ticketHistory .action i {margin-left: 1rem; }
#ticketHistory div.dropzone.is-dragover div {visibility: hidden;}
#ticketHistory div.dropzone {
  background-color: #409fff;
  background-image: url("/images/dropzone-overlay.png"), url("/images/dropzone-pattern.svg");
  background-position: top left, center center;
  background-attachment: fixed, fixed;
  background-size: auto, cover;}
#ticketHistory .message > .card-footer {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: stretch;
  justify-content: flex-start;
  background-color: white;
  background-color: white;
  margin: 0 -1px -1px;
  border: 1px solid lightgray;}
#ticketHistory .message-files-infos { width:100%; padding-bottom: 0.5rem;}
#ticketHistory .message-file {display:flex; margin: 0.5rem; }
#ticketHistory .message-file .card-body{
  width:198px;
  height:100px;
  font-size: 70px;
  color: #dadada;
  text-align: center;
  border-top:none;
  padding:0;}
#ticketHistory .message a.btn:hover { background: #00000010;}
#ticketHistory textarea { width: 100%;}
body.cke_editable { font-size: 14px; background-color: white; padding: 0.2rem 0.5rem;}

.message .card-body a {color: #007bff;}
.message .card-body a:hover {color: #0056b3;}
.message-file {width:200px; text-align: center;}
.message-file .image {display: flex; justify-content: center;}
.message-file .teaser {
  width:198px;
  height:100px;
  overflow: hidden;
  font-size: 50px;
  color: #dadada;}
.message-file .btn {
  line-height: 2;
  font-size: 8px;
  padding: .25rem .26rem;
  border-radius: 0;
  background: #00000000;
  position: absolute;}
.message-file .btn.delete {bottom: 3px;left: 3px;}
.message-file .btn.copy {bottom: 3px;right: 3px;}
.message-file .btn:hover { background: #00000010;}
.message-file .btn i {font-size:0.65rem;}
.message-file i {line-height: 2;}

#ticketFiles #fileList {
  display:flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
  text-align: center;}
#ticketFiles #fileList .card { flex: 0 0 200px; margin: 10px;}
#ticketFiles #fileList .card-body {height: 100px; padding: 1rem;}
#ticketFiles #fileList .card-footer svg {width: 30px;}
#ticketFiles #fileList .upload-icon {width: 20%;}
#ticketFiles #fileList .card-footer {height: 67px;}
#ticketFiles #fileList .progress { width: 90%; margin: auto;}

#ticketFiles #fileList.dropzone.is-dragover {
  justify-content: center;
  background-color: #409fff;
  background-image: url("/images/dropzone-overlay.png"), url("/images/dropzone-pattern.svg");
  background-position: top left, center center;
  background-attachment: fixed, fixed;
  background-size: auto, cover;}
#ticketFiles #fileList.dropzone.is-dragover .card { visibility: hidden; }

.card-subtitle ul {
  margin-bottom: initial;
  padding:initial;}
.card-subtitle ul li {
  display: inline-block;
  list-style: none;}
.card-subtitle ul li + li::before {
  content: "/\00a0";
  padding: 0 5px;
  color: #cccccc;}

header .card-subtitle li.active a {text-decoration: underline;font-weight: bold;}

#ticketSlip section.container-fluid {
  margin: 0 auto;}
#ticketSlip #print-customer-slip {z-index: 100;}
#ticketSlip .tab-content {position:relative;}
#ticketSlip .tab-pane {
  font-size: 15px;
  position: absolute;
  width: 100%;
  padding: 2rem;
  background: #fff;
  border: 1px solid #e7eaec;
  border-top: none;}
#ticketSlip .tab-pane {display: none;}
#ticketSlip .tab-pane.show {display: grid;}
#ticketSlip.print-preview {background-color: transparent}
#ticketSlip.print-preview .tab-pane {
  width: 100%;
  margin: 0;
  border:none;}
#ticketSlip .tab-pane button  {
  z-index: 1;
  position: absolute;
  right: 1rem;
  top: 1rem;}
#ticketSlip .ticket-slip-content, #ticketSlip .contenteditable {
  font-size: 15px;
  position: absolute;
  width: 100%;
  padding: 2rem;
  background: #fff;
  border: 1px solid #e7eaec;
  border-top: none;
  display: grid;
  grid-template-columns: repeat(19, 5%);
  grid-template-rows: 20mm 20mm 15mm 10mm 15mm 20mm 240mm 40mm 25mm;}
#ticketSlip .header-title {
  grid-area: 1 / 1 / 2 / 9;
  font-size: 3.15rem;
  border-bottom: 10px solid;}
#ticketSlip .ticket-owner {
  grid-area: 3 / 5 / 4 / 13;
  -padding-top: 30px;}
#ticketSlip .ticket-number {
  grid-area: 3 / 1 / 4/ 4;}
#ticketSlip .order-number {
  grid-area: 5 / 1 / 6/ 10;}
#ticketSlip .rma-number {
  grid-area: 5 / 5 / 6/ 13;}
#ticketSlip .sender {
  grid-area: 5 / 1 / 6/ 7;}
#ticketSlip .consignee {
  grid-area: 3 / 14 / 6/ 21;}
#ticketSlip .packing-list {
  grid-area: 7 / 1 / 8/ 21;}
#ticketSlip .comments {
  grid-area: 8 / 1 / 9/ 21;
  border-top: 4px solid;
  padding-top: 10px;}
#ticketSlip .footer {
  grid-area: 9 / 1 / 10/ 21;
  border-top: 4px solid;
  padding-top: 14px;}
#ticketSlip th.quantity {width:70px;}
#ticketSlip th.value {width:100px;}
#ticketSlip .table td, .table th {padding: .75rem 0;}
#ticketSlip .table th {border-bottom: 1px solid #dee2e6;}
#ticketSlip .slip-header {line-height: 2rem;}
#ticketSlip .slip-header small {float:right;}

#ticketReport .container-fluid {
  position: relative;}
#ticket-report-print  {
  position: absolute;
  right: 1rem;
  top: 1rem;}
#ticket-report-content {
  font-size: 15px;
  width: 100%;
  padding: 2rem;
  background: #fff;
  border: 1px solid #e7eaec;
  border-top: none;
  display: grid;
  grid-template-columns: repeat(20, 5%);
  grid-template-rows: 20mm 20mm 60mm 30mm 30mm auto auto auto 20px;}
#ticket-report-content .header-title {
  grid-area: 1 / 1 / 2 / 10;
  font-size: 3.15rem;
  border-bottom: 10px solid;}
#ticket-report-content .rma-number {
  grid-area: 1 / 11 / 2 / 15;
  align-self:center;}
#ticket-report-content .order-number {
  grid-area: 1 / 16 / 2 / 21;
  align-self:center;}
#ticket-report-content .customer {
  grid-area: 3 / 1 / 4 / 10;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .supplier {
  grid-area: 3 / 11 / 4 / 21;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .system {
  grid-area: 4 / 1 / 5 / 10;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .problem {
  grid-area: 4 / 11 / 5 / 21;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .timestamp-label {
  grid-area: 5 / 1 / 6 / 5;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .timestamp {
  grid-area: 5 / 4 / 6 / 10;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .visa-label {
  grid-area: 5 / 11 / 6 / 15;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .visa {
  grid-area: 5 / 14 / 6/ 21;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .comments {
  grid-area: 7 / 1/ 8 / 21;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .summary {
  grid-area: 8 / 1/ 9 / 21;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .messages {
  grid-area: 9 / 1/ 10 / 21;
  border-top: 1px solid;
  padding-top:10px;}
#ticket-report-content .start-ticket .card-header {background-color: #ed5565; color:white;}
#ticket-report-content .end-ticket .card-header {background-color: #1ab394; color:white;}
#ticket-report-content .message {margin-bottom: 2rem;}
#ticket-report-content .message .card-header {border-radius: 0; margin: -1px;}
#ticket-report-content .message-parcel {background-color: #1c84c6; color:white;}
#ticket-report-content .message-test {background-color: #1c84c6; color:white;}
#ticket-report-content .message-customer {background-color: #f8ac59; color: rgb(24, 28, 32);}
#ticket-report-content .message-supplier {background-color: #1ab394; color: rgb(24, 28, 32);}
#ticket-report-content .message-opton {background-color: #23c6c8; color: rgb(24, 28, 32);}
#ticket-report-content .message-timestamp { float:right;}
#ticket-report-content .message-files-infos { width:100%; padding-bottom: 0.5rem;}
#ticket-report-content .message-file {display:flex; margin: 0.5rem; }
#ticket-report-content .message-file .card-body{
  width:198px;
  height:100px;
  font-size: 70px;
  color: #dadada;
  text-align: center;
  border-top:none;
  padding:0;}
#ticket-report-content .message > .card-footer {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: stretch;
  justify-content: flex-start;
  background-color: white;
  border-top: none;}
#ticket-report-content .messages h5 {margin-bottom: 1.5rem;}
#ticket-report-content .order-number, #ticket-report-content .rma-number div {position: relative; top:10px;}

/* =============================================================================
    Page d'erreur
 ============================================================================ */
#error {background-color: #2f4050; font-size: 12px; color: white; overflow-x: hidden;}
#error h1 {font-weight:100; font-size:10rem;}
#error i {margin-bottom: 2rem; height: 7rem;}
#error .container {max-width: 600px; padding-top: 40px;}

/* ==========================================================================
    Page header
 ========================================================================== */
header {
  background-color: white;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  box-shadow: 0 .05rem .2rem rgba(0,0,0,.05);
  z-index: 2;
  position: sticky;
  top: 4rem;}
header ul {
  margin-bottom: initial;
  padding:initial;}
header ul li {
  display: inline-block;
  list-style: none;}
header ul li + li::before {
  content: "/\00a0";
  padding: 0 5px;
  color: #cccccc;}

/* ==========================================================================
    Page section
 ========================================================================== */
section.container-fluid {
  padding: 25px;}

/* ==========================================================================
    DataTables
 ========================================================================== */
div.dataTables_filter {
  text-align: right;}
div.dataTables_filter label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;}
div.dataTables_filter input {
  margin-left: 0.5em;
  display: inline-block;
  width: auto;}
#dataTable_info {
  line-height: 1.6rem;
  padding-left: 1rem;}
#dataTable-search-clear {
  margin-left: -4px;}
#dataTable-userCount {
  padding-top: 0.85em;
  line-height: 1.6rem;}

table.dataTable thead th::before, table.dataTable thead th::after {
  bottom: 0.45em !important;
  font-size: 1.5em;}
table.dataTable tbody tr {
    cursor: pointer;}

/* ==========================================================================
    FlashMessages
 ========================================================================== */
.alert-error {
  padding: 15px;
  margin:0px;
  border-radius: 4px;
  font-weight: bold;
  background-color: #ed5565;
	border: 1px solid #ed5565;
	color: #FFFFFF;
	text-align: center;}

.alert {
  padding: 15px;
  margin:0px;
  border: 1px solid transparent;
  border-radius: 0px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #dee2e6;}

/* ==========================================================================
  Global
 ========================================================================== */
body, html { height: 100%; }

body {
  !font-family: Roboto,Arial,sans-serif;
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: left;
  overflow-y: scroll;
  background-color: #f0f0f0;}

main { width: 100%; }
table .btn-sm { padding: 0.1rem 0.2rem; }

a, a:hover, a:active, a:focus {color: inherit;; text-decoration: none; outline: none; background-color: transparent;}

form .form-control:focus { border-color: #ced4da; box-shadow: none;}
form label.required:after { content: " *"; color: red;}
form label {font-weight: bold;}

.card {border-radius: 0;}

.card-header {
  border-bottom: none;
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: #fff;}
.card-subtitle {
  font-size: 0.8rem;
  margin-top: -0.375rem;
  margin-bottom: 0;}

.btn-primary {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFFFFF;}
.btn-primary:hover, .btn-primary:focus {
  background-color: #18a689;
  border-color: #18a689;
  color: #FFFFFF;}
.btn-danger {
  color: #fff;
  background-color: #ed5565;
  border-color: #ed5565;}
.btn-danger:hover, .btn-danger:focus {
  color: #fff;
  background-color: #ec4758;
  border-color: #ec4758;}
.btn-warning {
  color: #fff;
  background-color: #ffc107;
  border-color: #ffc107;}
.btn-warning:hover, .btn-warning:focus {
  color: #fff;
  background-color: #e0a800;
  border-color: #d39e00;}
.btn.focus, .btn:focus {
  outline: 0;
  box-shadow: none;}
.btn svg {
  width: 16px;
  height: 16px;}

.far.fa-file-pdf {color:red;}
.far.fa-file-word {color:#2d75df;}
.far.fa-file-excel {color:green;}
.far.fa-file-archive {color:#f4ae07;}
.far.fa-file-csv {color:green;}

/* ==========================================================================
  Login
 ========================================================================== */
body.login {font-size: 13px; color: #676a6c;}
body.login i {
  font-size: 13rem;
  padding-bottom: 2rem;}
body.login .middle-box {
  width: 300px;
  z-index: 100;
  margin: 0 auto;
  padding-top: 40px;}
body.login input, body.login .btn-sm {border-radius: 0px;}

/* ==========================================================================
  Sidebar
 ========================================================================== */
nav.sidebar.toggled {flex-basis: 60px; text-align: center;}
nav.sidebar.toggled span {display:none;}
nav.sidebar.toggled svg {width: 22px; height: 22px;}
nav.sidebar.toggled .sidebar-brand {background: #243747;}
nav.sidebar.toggled .sidebar-content {width: 60px;}

nav.sidebar {
  flex: 0 0 220px;
  min-height: 100vh;
  z-index: 2;}
nav.sidebar i {
  width: 18px;
  color: #fff;
  font-size: 1.3rem;
  vertical-align: middle;
  margin-right: 1rem;
  margin-bottom: 0.25rem;}
nav.sidebar i.fa-rocket, nav.sidebar i.fa-chart-bar {font-size: 1.15rem;}
nav.sidebar i.fa-users { font-size: 0.95rem;}

div.sidebar-content {position: fixed; width:220px; background: #354052; min-height: 100vh;}

ul.sidebar-nav {padding-left: 0;}

li.sidebar-header {
  color: #adb5bd;
  padding: .375rem 1.25rem;
  font-size: .75rem;}

a.sidebar-brand {
  height: 4rem;
  padding: 1.15rem 1.25rem;
  margin-bottom: .25rem;
  display: block;}
a.sidebar-brand i {
  color: #0cc2aa;
  font-size: 1.4rem;}
a.sidebar-brand span {
  color:white;
  font-size: 1.2rem;}
a.sidebar-link {
  display: block;
  padding: .75rem 1.25rem;
  color: #adb5bd;
  font-size: 0.85rem;}

li.sidebar-item.active .sidebar-link:hover, a.sidebar-link:hover {
  color: #e9ecef;
  background: #263441;}

/* ==========================================================================
  NavBar
 ========================================================================== */
.sidebar-toggle {
  cursor: pointer;
  width: 26px;
  height: 26px;}
.hamburger { position: relative; }
.hamburger, .hamburger::after, .hamburger::before {
  height: 3px;
  width: 24px;
  background: #495057;
  content: "";}
.hamburger::before {
  top: -7.5px;
  width: 18px;
  position: absolute; }
.hamburger::after {
  bottom: -7.5px;
  width: 14px;
  position: absolute; }
.avatar {
  margin-top: -15px;
  margin-bottom: -15px;
  width: 40px;
  height: 40px; }
.navbar {
  height: 4rem;
  border-bottom: 1px solid #dee2e6;
  padding: .75rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: #f0f0f0;}
.navbar svg {
  width: 18px;
  height: 18px;}

/* ==========================================================================
  Print
 ========================================================================== */
@media print {
  body {background-color: white;}
  div.card, div.summary {break-inside: avoid;}
  div.card.message {display:block;}
  #ticket-report-content, #ticketSlip .ticket-slip-content {border:none; padding:0;color:black;}
  #ticket-report-content .card.message {display: block;}
  }