/* -----  Table style  ----- */
table td a{ color: #fff;  font-weight: lighter; }

.wid-h4 { width: 80%;  }

table td a:hover { color: #008fe5;; text-decoration:  none; }

/* .td { text-align: center;  width: 55px;  border: 1px solid yellow;  } */

td .fa { font-size: 12px;  }

table td, table th {  font-size: 12px;   }

.avatar {   width:  45px;  height: 45px; }

.col-xl-3 .img-circle{ width:  100px;  height: 100px; }

/* -----  Sidebar avatar ------ */
.sidebar_avatar { text-align: center;  }

.sidebar_avatar .side_avatar { width: 90px;  height: 90px;  }

.side-nav li .sub {  padding-left: 20%; width: 195px;   }

.left-icons { width: 15px; height: 15px; margin-right: 6%;   }

.sidebar .fa { color: #fff;  }

/* -------  Header Account  ------- */
.account  {  padding: 8%; }

.account li .fa {  width: 40px;  }

/* ------  Forgotten password   ------- */
.forget {  
    display: inline-block; vertical-align: middle;  width: 54%;
    text-align: right; 
}

.forget a {   text-decoration: none;  color: #008fe5;;  font-size: 12px;   }

.forget a:hover { text-decoration: none;  font-weight: bold; font-size: 11px;  }

.form-check, .forget { display: inline-block; }

.form-check { margin-bottom: 0;    width: 45%; }

.form-foot { margin-top: 5%;  padding-bottom: 6%;   }

.reset-btn { padding-bottom: 10%; }

.placeholders h3 { color: #fff;  font-weight: bold;  }

.default-option { color: #fff;  background-color: #474b50; }

.hide-option { display: none; }

.show-option { display: inline; }

.modo { font-size: 13px; }

.r { color: red; }

.g { color: #2bff00ea; }

.m { color: #008fe5;  font-weight: bold; }

.delete, .confirm-add-item { top: 30%;  left: 20%; }

.delete .modal-content, .confirm-add-item .modal-content { border-radius: 2px; width: 80%;   height: 200px;  }

.delete .modal-content { background-color: red; }

.confirm-add-item .modal-content { background-color: #646c74; color: #fff; }

.delete .modal-content .close, .confirm-add-item .modal-content .close {  position: absolute; top: 6%; right: 4%;  color: #000; font-size: 28px;  }

.delete .modal-content .container, .confirm-add-item .modal-content .container
{ width: 80%; margin: auto; text-align: center;  margin-top: 6%; }

.delete .modal-content .container h3, .confirm-add-item .modal-content .container h3
{ color: #fff; }

.confirm-add-item .modal-content .container .slim-btn { width: 100px;  text-align: center; background-color: #008fe5; }

.confirm-add-item .modal-content .container .slim-btn:hover { font-weight: bold; }

.delete .modal-content .container .slim-btn { background-color: #fff;  color: #000;  width: 100px; }

.delete .modal-content .container .slim-btn:hover { font-weight: bold; }

/* =====================  Shoops  =============== */
.page-title { font-size: 18px; }

.page-title a:hover { text-decoration: none; }
.nom-usuel { font-size: 16px; }

.left-div, .right-div { display: inline-block;  }

.left-div { width: 45%;  }

.right-div { display: inline-block; vertical-align: top; width: 50%;  font-weight: bold;  }

.panel-heading a:hover { text-decoration: none; }

.panel-form {  width: 98%;  margin-left: 2%;      }

.panel-form .slim-btn { width: 100px; width: 100px;  text-align: center;  background-color: rgba(0, 0, 0, 0.5);   }

.item { left: 10%; }


.item .close, .show1 .close { position: absolute; top: 10%;  right: 5%; color: red;  font-size: 30px; }

.item .modal-content, .show1 .modal-content { width: 90%;  background-color: #646c74; color: #fff;   }

.item .container, .show1 .container {    width: 85%;  padding-top: 5%; padding-bottom: 5%; }

.item .container h2 { color: #fff;  margin-bottom: 4%;  font-weight: bold;  font-size: 20px; }

.btn-file { margin-bottom: 3%;   } 

.show1 { position: absolute; top: 0;  bottom: 0; background-color: rgba(0, 0, 0, 0.5);  width: 100%; z-index: 9999999999; }

.slim-btn-blue  { background-color: #008fe5;  width: 100px; text-align: center;  }

.slim-btn-blue:hover { font-weight: bold; }

.plus-btn:hover { cursor: pointer; }

.col-xl-1 { padding-top: 1.5%;  padding-bottom: 1%;    }

.right { text-align: right; }

.btn-form { margin-top: 5%; background-color: #616971;   width: 94%; padding: 4%;  border-radius: 2px;  margin: auto;     }

.pb { display: none; }

/* ====================    Commande   ======================= */
.legend { border-bottom: none;  font-size: 14px;  font-weight: 900;   }

.fieldset { border: 1px solid #fff;  padding-left: 2%;  padding-right: 2%;  margin-bottom: 4%;  }

.date-fieldset { text-align: center;  border: 4px double #fff;     }

.date-fieldset .date-input { width: 70%;   margin: auto;  }

.date-legend { border-bottom: none;  font-size: 14px;  font-weight: 900;  }

.no { width: 120px;  }

.select-tr { cursor: pointer; }

.cession { display: none; }

.legends { width: 100%;    padding: 4%; padding-top: 1%; }

.legend-title { width: 100%;  font-size: 16px; color: #fff;  font-weight: 700;  margin-bottom: 3%; }

.legend-box, .legend-lbl  {  display: inline-block;   }

.legend-box {  width: 20px;  height: 20px; margin: auto;    }

.legend-lbl {  display: inline-block;  vertical-align: top;  width: 75%;   font-size: 15px;  margin-left: 5%;     }

.box1 { background-color: #008fe5; }

.box2 { background-color: #098009; }

.box3 { background-color: #e52200; }

.box4 { background-color: #fcac80; }

.box5 { background-color: #04ba89; }

.boxe1 { background-color: #008fe5;  width: 20px;  height: 20px; margin: auto;  }

.boxe2 { background-color: #098009;  width: 20px;  height: 20px; margin: auto;  }

.boxe3 { background-color: #e52200;  width: 20px;  height: 20px; margin: auto;  }

.boxe4 { background-color: #fcac80;  width: 20px;  height: 20px; margin: auto;  }

.boxe5 { background-color: #04ba89;  width: 20px;  height: 20px; margin: auto;  }

.panel-hd { color: #fff;  font-weight: 700;  }

.modal-hd .close {  margin-top: -5%;  font-size: 30px; }


/* =============================   Rapport style  ====================== */
.pnl-head {  font-size: 14px; font-weight: 700;  border-bottom: 1px solid #ddd;  color: #fff;  width: 95%; margin: auto;  text-align: center;   }

.pnl-body { color: #fff;  width: 95%; margin: auto;  text-align: center; }

.pnl-body .col-lg-6 {  height: 40px;  font-size: 14px;  line-height: 2.85;  }

.white { color: #fff;  font-weight: 700; }

.custom-card {      width: 100%;  height: 200px;  background-color: #2c2c2c;   margin-bottom: 6%;  }

.custom-card-head { width: 100%;  height: 50px;  font-size: 16px;  line-height: 3.125;  border-bottom: 1px solid #ddd;  padding-left: 5%; font-weight: 700;   }

.custom-card-body { width: 90%;  margin: auto;   }

.tx-right { text-align: left; }

.body-content {  font-size: 14px; height: 35px;  line-height: 2.5;  }

.br { margin-bottom: 3%; }

.view-detail {  position: absolute;  right: 10%;   }

.view-detail { cursor: pointer; }

.solde {  width: 90%; margin: auto;   border: 2px double #ddd;  padding: 2%; font-size: 14px;  font-weight: 700;  }

.modal-hd { text-align: center;    }

.modal-hd .modal-title { font-size: 18px;  font-weight: bold; }

.excel-btn {  background-color: #098009; color: #fff;  }

.excel-btn i { font-size: 20px; }

.custom-card-head a { color: #fff; }

.logo h4 {  text-align: center; }


@media (min-width: 1366px) {
    .table-responsive{ overflow: hidden;   }
}


@media (max-width: 767px) {
    .logo {   width: 30%;  margin-top: 3%; padding-left: 1%;  }

    .logo a { font-weight: bold; }

    .notifications { display: none; }

    .nav-collapse {  
        background-image: linear-gradient(to top, #676e76, #677585, #7d8c9b);    border: none; 
    }

    .side-nav {   padding-left: 8%; }

    .left-icons {     margin-right: 14%;   }

    .sidebar_avatar {   text-align: left; }

    .col-xl-3 {  width: 35%; }

    .col-xl-3 .img-circle { width: 100%; }

    .panel-form {  width: 95%;  margin-left: 4%;      }

    .col-xl-8, .col-xl-1 { display: inline-block; }

    .col-xl-8 { width: 100%;  }

    .col-xl-1 { display: inline-block; vertical-align: middle; width: 1%;  }

    .item { left: 0%; }

    .item .modal-content { width: 100%; }

    .delete, .confirm-add-item { top: 30%;  left: 3%; }

    .delete .modal-content, .confirm-add-item .modal-content {  width: 95%;   height: 200px;  }

    
}

@media (min-width: 768px) and (max-width: 1024px) {
    .delete, .confirm-add-item { top: 20%;  left: 2%; }

    .delete .modal-content, .confirm-add-item .modal-content {  width: 95%;   height: 200px;  }

    .panel-form {  width: 95%;  margin-left: 4%;       }

    .table-responsive table { width: 600px; }

    .pagination {
        width: 250px;
    }
}

@media (min-width: 360px) and (max-width: 640px) {
    .table-responsive table { width: 600px; }

    #datatable label {
        display: none;
    }
}