/* ========================================================================
   Style de base de l'application
 ========================================================================== */

/* Base
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat.ttf") format("ttf");
}


* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-family: 'Montserrat', 'Roboto', 'Arial', sans-serif;
}

#courbes-container {
  margin-top: 30px;
}

.no-margin {
  margin: 0;
}

.text-red {
  color: red;
}

.text-blue {
  color: blue;
}

.text-green {
  color: green;
}

.text-bold {
  font-weight: bold;
}

.infos-pagination span {
  display: inline-block;
  color: #000;
}

img#photo-preview {
  height: 200px;
  width: 200px;
}

.photo-supp-container {
  background-color: #ff857c;
  border-radius: 25px;
  color: #fff;
  padding: 15px 20px;
  width: 300px;
  margin: 30px auto;
  font-weight: bold;
}

.modif-piece-photo {
  border-radius: 25px;
  box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.08);
}

.photo-supp-container .uk-checkbox {
  border-radius: 25px !important;
  border: solid 1px #fff !important;
}

.photo-supp-container .uk-radio:checked, .photo-supp-container .uk-checkbox:checked, .photo-supp-container .uk-checkbox:indeterminate {
  background-color: #fff;
  border-color: transparent;
}

.uk-switcher .chosen-container, .modal-chosen-select .chosen-container {
  width: 100% !important;
}


.chosen-container .chosen-drop {
  z-index: 100;
}

#header-logo, .menu-mobile-btn-container {
  display: none;
}

#fullscreen, #setting-link {
  color: #a5a5a5;
  margin-right: 15px;
}

#mobile-menu-top {
  display: none;
  padding: 0px 25px;
  border-bottom: solid 1px #eee;
}

#connexion-notification {
  border-radius: 10px;
  background-image: linear-gradient(to right, #de0aff, #a7aaff);
  color: #fff;
  font-weight: bold;
  padding: 20px;
}

.uk-notification-message {
  background: transparent;
  padding: 0px;
}



/* -----------------------------
Switch */

.uk-switch {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 60px;
}

/* Hide default HTML checkbox */
.uk-switch input {
  display: none;
}

/* Slider */
.uk-switch-slider {
  background-color: rgba(0, 0, 0, 0.22);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 500px;
  bottom: 0;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: .2s;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
}

/* Switch pointer */
.uk-switch-slider:before {
  content: '';
  background-color: #fff;
  position: absolute;
  width: 30px;
  height: 30px;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  transition-property: transform, box-shadow;
  transition-duration: .2s;
}

/* Slider active color */
input:checked+.uk-switch-slider {
  background-color: #39f !important;
}

/* Pointer active animation */
input:checked+.uk-switch-slider:before {
  transform: translateX(26px);
}

/* Modifiers */
.uk-switch-slider.uk-switch-on-off {
  background-color: #f0506e;
}

input:checked+.uk-switch-slider.uk-switch-on-off {
  background-color: #32d296 !important;
}

/* Style Modifier */
.uk-switch-slider.uk-switch-big:before {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}

.uk-switch-slider.uk-switch-small:before {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}

input:checked+.uk-switch-slider.uk-switch-big:before {
  transform: translateX(26px) scale(1.2);
}

/* Inverse Modifier - affects only default */
.uk-light .uk-switch-slider:not(.uk-switch-on-off) {
  background-color: rgba(255, 255, 255, 0.22);
}



/* Header
   ========================================================================== */

header {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 200px);
  background-color: #fff;
  border-bottom: solid 1px #eee;
  padding: 15px 25px;
  text-transform: uppercase;
  color: #9c9c9c;
  border-bottom-right-radius: 25px;
  z-index: 100;
  height: 90px;
}

#header-search .chosen-container {
  border: none;
  width: 400px !important;
  text-transform: none;
}

#header-search .chosen-container-single .chosen-single div b {
  display: none;
}

#header-user-photo {
  width: 30px;
}


header .uk-search-icon {
  min-height: auto;
}


#header-search {
  width: 350px;
  /*border-radius: 25px;*/
  border: none;
  font-size: 15px;
}


#account-link {
  color: #a5a5a5;
  font-size: 12px;
  border: none;
}


#account-link:hover {
  text-decoration: none;
}

#header-credit {
  color: #043e94;
  font-size: 12px;
  background: #d4f2ff;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
}

#header-credit:hover {
  text-decoration: none;
}


.header-list>li {
  display: inline-block;
  margin-right: 20px;
}

.notification-counter {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: #fff;
  height: 5px;
  width: 5px;
}


#account-dropdown {
  padding: 0px 10px 20px 10px;
  top: 50px;
  /*box-shadow: 0 1px 2px rgb(0 0 0 / 17%);*/
  box-shadow: none;
  border: solid 1px #eee;
  border-top: none;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

#account-dropdown ul {
  padding-left: 10px;
}

#account-dropdown ul li {
  font-size: 12px;
  padding: 5px 0px;
}

.bdd-link a {
  color: #a5a5a5;
  font-size: 12px;
}






/* Scroll bar
   ========================================================================== */


::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #03a9f4;
  border-radius: 25px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: ;
}


#menu::-webkit-scrollbar {
  display: none;
}


/* Firefox */

:root {
  scrollbar-color: #03a9f4 #000 !important;
  scrollbar-width: thin !important;
}

.table-container {
  scrollbar-color: #03a9f4 #eee !important;
  scrollbar-width: thin;
}

#menu {
  scrollbar-width: none;
}


/* Preloader
   ========================================================================== */

#preloader {
  width: 100%;
  height: 100vh;
  margin-left: auto;
  position: fixed;
  background: #fff;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  z-index: 900;
}

#preloader img {
  width: 100px;
  text-align: center;
  margin: auto;
}





/* Ajax loader
   ========================================================================== */

.ajax-loader {
  width: 100%;
  height: 100vh;
  margin-left: auto;
  position: fixed;
  background: #fff;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  z-index: 900;
}

#preloader img {
  width: 100px;
  text-align: center;
  margin: auto;
}

.progress-bar {
  height: 40px;
  background: red;
}




/* Contenu de la page dans un modal
   ========================================================================== */


#modal-page-body {
  padding: 0px 50px;
}

#modal-page-body #page-content {
  padding-top: 50px;
}

.form-modal-link {
  color: #000;
  transition: .7s;
}

.form-modal-link:hover {
  text-decoration: none;
}


.form-modal-link div {
  text-align: center;
  text-transform: uppercase;
  font-size: 11px;
  margin-top: 15px;
}


.modal-create-item iframe {
  width: 1280px !important;
  height: 720px !important;
}





/* Contenu de la page sans le menu
   ========================================================================== */

#page-body-right {
  width: calc(100% - 210px);
  margin-left: auto;
  padding: 0px 30px;
}


/* Menu
   ========================================================================== */

#menu {
  position: fixed;
  z-index: 101;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0px;
  width: 200px;
  height: 100%;
  overflow-y: scroll;
  background-image: linear-gradient(to bottom right, #fff, #fff);
  border-right: solid 1px #eee;
}

#menu-content {
  padding-top: 0px;
  text-align: left;
  width: 100%;
  height: 100%;
  margin: auto;
}

#menu-logo-container {
  width: 100%;
  margin: auto;
  text-align: center;
  /*border-bottom: solid 1px #eee;*/
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#menu-logo-container img {
  width: 65px;
  margin: auto;
}

#dashboard-accordion {
  margin-bottom: -20px;
}

.menu-icon, .menu-title {
  display: inline-block;
  vertical-align: middle;
}

.uk-accordion-title::before {
  display: none;
}

.uk-accordion> :nth-child(n+2) {
  margin-top: 0px;
}


#menu-content .menu-title {
  color: #a2a2a2;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
}

#menu-content .menu-icon {
  color: #a2a2a2;
  font-size: 22px;
  font-weight: 500;
  padding-bottom: 5px;
  margin-right: 10px;
  transition: .7s;
}

#menu-content {
  padding-top: 100px;
}


#menu-content-inner {}

#menu-content-inner ul li {
  padding: 12px 5px 12px 20px;
  transition: .7s;
  cursor: pointer;
}

#menu-content-inner>ul>li:hover {
  background-color: #effaff;
}

#menu-content-inner>ul>li:hover .menu-title {
  color: #0036fb;
}

#menu-content-inner>ul>li:hover .menu-icon {
  color: #0036fb;
}


#menu-content .uk-accordion>li.uk-active .menu-icon {
  color: #0036fb;
}

#menu-content .uk-accordion>li.uk-active .menu-title {
  color: #0036fb;
}


#menu-content .uk-accordion .menu-dashboard.uk-active .menu-icon {
  color: #1e87f0;
  font-weight: bold;
}

#menu-content .uk-accordion .menu-dashboard.uk-active .menu-title {
  color: #1e87f0;
}

#menu-content .uk-accordion>li.uk-active {
  border-right: solid 4px #9dceff;
  background-color: #effaff;
}

#menu .uk-accordion-content li {
  padding: 0px 5px;
}

#menu .uk-accordion-content li a {
  color: #444;
  font-size: 13px;
  border-bottom: solid 1px #cfcfcf;
}

#menu .uk-accordion-content li a:hover {
  text-decoration: none;
  color: #1e87f0;
  border-bottom: solid 1px #0036fb;
}


/* Titres
   ========================================================================== */

.title-container {
  padding: 20px 0px 70px 0px;
}

.title {
  color: #9a9a9a;
  font-size: 25px;
  font-weight: bold;
}



/* Contenu de la page
   ========================================================================== */

#page-content {
  min-height: 100vh;
  padding-top: 120px;
}



/* Tableaux
   ========================================================================== */

.table-container {
  overflow-x: scroll;
}

.total-td {
  background: #f5f5f5;
  font-weight: bold;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  padding: 15px 10px!important;
}

.metas-table-container {
  border-radius: 10px;
  padding: 20px 20px 10px 20px;
  box-shadow: 0px 1px 4px 0px #f1f1f1;
}

.list-disponibilite, .list-indisponibilite {
  text-align: center;
  font-weight: bold;
  padding: 5px 20px;
  border-radius: 10px;
  width: 120px;
}

.autorisation-ajout, .autorisation-modif, .autorisation-supp {
  padding: 10px;
  border-radius: 10px;
  font-weight: bold;
}

.autorisation-ajout {
  background: #a0e2ff59;
  color: #03a9f4;
}

.autorisation-modif {
  background: #fff5b23b;
  color: #ffa500;
  ;
}

.autorisation-supp {
  background: #ff9b9b1a;
  color: #ff5f95;
}

.table-container::-webkit-scrollbar {
  height: 5px;
}

/* Track */
.table-container::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 25px;
}

/* Handle */
.table-container::-webkit-scrollbar-thumb {
  background: #03a9f4;
  border-radius: 25px;
}

/* Handle on hover */
.table-container::-webkit-scrollbar-thumb:hover {
  background: ;
}


.table-container table {
  border-collapse: separate;
  border-spacing: 0 10px;
}


.table-container table tbody tr {
  background-color: #fff;
  transition: .7s;
}

.table-container table tbody tr:hover {
  background-color: #f9f9f9;
}

.table-container table tr td {
  transition: .7s;
  vertical-align: middle;
  padding: 10px 10px;
  font-size: 14px;
  min-width: 200px;
  border-bottom: solid 1px #f5f5f5c2;
}

#table-calendrier-disponibilite {
  border-collapse: collapse;
}

#table-calendrier-disponibilite .indisponible {
  background: #ffa5a5;
}

#table-calendrier-disponibilite .jour-inexistant {
  background: #000;
  color: #fff;
}

.table-container.table-calendrier-disponibilite-container table tr td {
  transition: .7s;
  vertical-align: middle;
  padding: 5px 10px;
  font-size: 14px;
  min-width: auto !important;
  width: auto !important;
  border: solid 1px #eee;
}

#table-calendrier-disponibilite .mois-td {
  text-align: left;
}



/*
.table-container table tr td:first-child{
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.table-container table tr td:last-child{
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}*/

.delete-check-all {
  border-radius: 25px;
}

#modele-save {
  border-radius: 25px;
  border: solid 1px #000;
}

.delete-check-all-th, .table-line-number {
  width: 50px;
  text-align: center !important;
}

.table-delete-button {
  color: red;
  text-align: center;
  margin: auto;
}

.table-alert {
  padding: 5px 10px;
  text-align: center;
  border-radius: 25px;
}

.uk-alert-violet {
  background: #ffdeff;
  color: #b500b5;
}

.delete-check-td {
  width: 50px;
  text-align: center;
}

.actions-td a {
  margin-left: 15px;
}

.list-table th {
  font-weight: bold;
  color: #000;
  font-size: 12px;
}

.total-table-container, .total-table-container .list-table {
  background: #fbfbfb;
}

.table-container.total-table-container table tbody tr, .table-container.total-table-container table tbody tr:hover {
  background-color: #fff;
}

.table-pagination {
  text-transform: uppercase;
  font-size: 12px;
  margin: 30px 0px 100px 0px;
  color: #000;
  font-weight: bold;
}

.search-by-keyword {
  width: 600px;
  border: none;
  border-bottom: solid 1px #eee;
}

.forms-container {
  padding: 50px 0px 100px 0px;
}

.page-actions {
  padding: 0px 0px 40px 0px;
}

.page-actions a {
  margin-right: 10px;
}


.page-actions a:hover {
  text-decoration: none;
  color: #000;
}

.action-delete-link {
  background: #ff9b9b1a;
  color: #ff5f95;
  border-radius: 15px;
  padding: 10px 30px;
  font-weight: bold;
}

.action-help-link {
  background: #4d66ef21;
  color: #2c46d2;
  border-radius: 15px;
  padding: 10px 30px;
  font-weight: bold;
}


.action-add-link, .action-print-link {
  background: #a0e2ff59;
  color: #03a9f4;
  border-radius: 15px;
  padding: 10px 30px;
  font-weight: bold;
}

.action-list-link {
  background: #edfff6;
  color: #31b773;
  border-radius: 15px;
  padding: 10px 30px;
  font-weight: bold;
}

.action-modify-link {
  background: #ffeb3b1f;
  color: #d5bf00;
  border-radius: 15px;
  padding: 10px 30px;
  font-weight: bold;
}

.action-cancel-link {
  background: #ff9c9c;
  color: #fff;
  border-radius: 25px;
  padding: 10px 30px;
  font-weight: bold;
}

.action-deliver-link {
  background: #31b773;
  color: #fff;
  border-radius: 25px;
  padding: 10px 30px;
  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.08);
  font-weight: bold;
}

.action-return-link {
  background: #b147c3;
  color: #fff;
  border-radius: 25px;
  padding: 10px 30px;
  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.08);
  font-weight: bold;
}

.action-print-link_ {
  background: #424242;
  color: #fff;
  border-radius: 25px;
  padding: 10px 30px;
  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.08);
  font-weight: bold;
}

.action-help-link_ {
  background: #ff2b73;
  color: #fff;
  border-radius: 25px;
  padding: 10px 30px;
  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.08);
  font-weight: bold;
}

.action-back-link {
  background: #ff9b9b52;
  color: #ff5f95;
  border-radius: 15px;
  padding: 10px 30px;
  font-weight: bold;
}

/* Evite l'effet d'index superieur par rapport au champs chosen */

[class*='uk-animation-'] {
  animation-fill-mode: none;
}


.photo-td div {
  border-radius: 25px;
  text-transform: uppercase;
  background-image: linear-gradient(to right, #04a9f4, #36e3f9);
  text-align: center;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.table-preview-photo {
  border-radius: 25px;
  width: 50px;
  height: 50px;
}

.delete-confirm {
  font-size: 20px;
}

#form-supprimer, #form-annuler {
  padding-top: 30px;
}



.list-info {
  width: 50%;
  border-radius: 50px;
  text-align: center;
  font-weight: bold;
  margin: 50px auto;
  padding: 30px 40px;
}


.list-green-state {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00ff00;
  display: inline-block;
  margin-right: 20px;
}

.list-red-state {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff0000;
  display: inline-block;
  margin-right: 20px;
}

#rapport-livraisons-table-container {
  display: none;
}

#retour-articles-table-container {
  display: none;
  margin-top: 70px;
}

#retour-articles-table-container input, #retour-articles-table-container select {
  margin: 5px;
}

.table-duplicate {
  color: blue;
  float: right;
  cursor: pointer;
}

.table-delete-duplicated {
  text-align: center;
  color: red;
  cursor: pointer;
}

.uk-notification {
  width: 550px !important;
  text-align: center;
}


/***** Contexte menu *******/

.context-menu {
  position: absolute;
  display: none;
  border-radius: 10px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 4%);
  border: solid 1px #f9f9f9;
  padding: 15px 25px;
  cursor: pointer;
}

.context-menu .uk-dropdown-nav>li>a {
  color: #000;
  padding: 10px 0px;
  cursor: pointer;
}



/* Page de details
   ========================================================================== */

.details-etat-paiement {
  width: 120px;
  border-radius: 10px;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}

.details-etat-paiement.paye {
  background: #cffde6;
  color: #31b773;
}

.details-etat-paiement.nonpaye {
  background: #ff9b9b52;
  color: #ff5f95;
}



/* Page de paiement
   ========================================================================== */

#mois-container {
  margin-top: -50px;
  text-align: center;
}

#mois-container .added-month {
  width: 180px;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  margin: 0px 5px 5px 0px;
}

#mois-container .added-month:nth-child(even) {
  background: #d8eafc;
  color: #1e87f0;
}

#mois-container .added-month:nth-child(odd) {
  background: #edfbf6;
  color: #32d296;
}




/* Recu de paiement
   ========================================================================== */

#recu-a5 {
  width: 21cm;
  height: 14.85cm;
  margin: 75px auto 0px auto;
}

#recu-logo {
  text-align: center;
  margin: auto;
  width: 100px;
  padding: 0px 0px 10px 0px;
}

.recu-number {
  color: #000;
  font-size: 10px;
  text-align: center;
  font-weight: bold;
  background-color: #f1f1f1;
  padding: 10px 10px 10px 15px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  text-transform: uppercase;
  border: solid 1px #444;
}

.contrat-id {
  padding: 10px 0px 10px 0px;
  font-size: 10px;
  text-transform: uppercase;
  text-align: right;
  font-weight: bold;
}

.printed-by {
  padding: 10px 0px 0px 0px;
  font-size: 10px;
  display: none;
}

.recu-solde {
  border: solid 2px #000;
  width: 150px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  margin: auto;
  margin-top: -25px;
  padding: 5px 20px;
  float: left;
}

.signature {
  padding: 10px 50px 15px 0px;
  font-size: 10px;
  text-decoration: underline;
  text-transform: uppercase;
  text-align: right;
  font-weight: bold;
}

#recu-content {}

.recu-content-left {
  border: solid 2px #444;
  height: 100%;
  padding: 0px 15px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  height: 100%;
}

.recu-content-right {
  border: solid 2px #444;
  padding: 0px 15px;
  padding-bottom: 30px;
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  height: 100%;
}

.recu-title {
  text-transform: uppercase;
  font-size: 10px;
  text-align: center;
  border: solid 2px #000;
  width: 80%;
  margin: 10px auto 20px auto;
  font-weight: bold;
}

.recu-nom, .recu-prenom, .recu-numero, .recu-email {
  font-size: 10px;
  padding-bottom: 10px;
}

.recu-propriete, .recu-type, .recu-entree, .recu-sortie, .recu-nombre-jours, .recu-prix-jour, .recu-prix-total, .recu-reduction, .recu-date-contrat, .recu-date-paiement {
  font-size: 10px;
  padding-bottom: 10px;
}

.recu-montant-reste, .recu-montant-du, .recu-montant-paye {
  font-weight: bold;
  border: solid 1px #000;
  font-size: 12px;
  padding: 2px;
  text-align: center;
  margin-bottom: 10px !important;
}


.no-margin-grid {
  margin-top: 0px !important;
}

#recu-prestations {
  text-align: center;
  font-size: 9.5px;
  font-weight: bold;
  text-transform: uppercase;
}

#recu-contact {
  text-align: left;
  font-size: 10px;
  font-weight: bold;
}

.no-padding-left {
  padding-left: 0px;
}

#recu-qrcode {
  width: 75px;
  margin: auto;
  margin-top: -30px;
}





/* Formulaires
   ========================================================================== */


.form-container {
  margin: 100px auto 200px auto;
}

.page-recap-container {
  margin-top: 50px;
  padding: 20px 40px 50px 40px;
  background-color: #fff;
  /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);*/
}

.page-recap-container .title {
  color: #9a9a9a;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: solid 1px #eee;
  padding-bottom: 30px;
}

.page-recap-container .uk-grid-small {
  font-size: 15px;
}

.form-container input, .form-container select, .form-container textarea, .chosen-container {
  border-radius: 7px;
  border: solid 1px #f1f1f1;
  background-color: #f5f5f524;
}


#form-search {
  width: 100%;
  margin: auto;
}

#form-search .champs-container {
  text-align: left;
}

#form-search .champs-container input, #form-search .champs-container select {
  border-radius: 7px;
  border: solid 1px #f1f1f1;
  background-color: #f5f5f524;
}

#form-search .champs-container .submit-btn {
  margin-top: 10px;
  font-weight: bold;
}


.search-submit-btn {
  text-align: center;
  background: #ecf9ff;
  border: none;
  color: #04a9f4;
  font-weight: bold;
  height: 50px;
  font-size: 15px;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.search-cancel-btn {
  text-align: center;
  background: #fff5f585;
  border: none;
  color: #ff9c9c;
  font-weight: bold;
  height: 50px;
  font-size: 15px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

.search-submit-btn span svg, .search-cancel-btn span svg {
  width: 20px;
}



input[type="file"] {
  border: solid 1px transparent;
  background-color: transparent;
  padding: 10px 0px;
}

.uk-input, .chosen-container {
  height: 50px;
}


/* Chosen
   ========================================================================== */

.chosen-container-single .chosen-single span {
  padding-top: 15px;
  font-size: 15px;
}

.chosen-container-single .chosen-single div b {
  margin-top: 15px;
}




.form-info {
  width: 50%;
  text-align: center;
  font-weight: bold;
  margin: 0px auto;
}

.form-info.large {
  width: 70%;
}

.champs-label {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  padding-left: 0px;
  margin-bottom: 50px;
  color: #a0a0a0;
}

.champs-obligatoire {
  color: red;
  font-size: 15px;
}

.submit-btn-container {
  text-align: center;
  margin: 70px auto 50px auto;
}

.submit-btn {
  text-align: center;
  text-transform: uppercase;
  background: #2c46d2;
  width: 300px;
  padding: 15px 30px;
  border: none;
  border-radius: 25px;
  color: #fff;
}


.input-file-container {
  display: block;
  text-align: center;
}


.input-file-container button {
  border: none;
  height: 100px;
  width: 600px;
  border: solid 1px #eee;
  border-radius: 50px;
  margin: auto;
  font-size: 12px;
  background-color: #f8f8f8;
}

.input-danger {
  background: #fef4f6 !important;
  color: #f0506e !important;
  text-align: center;
  font-weight: bold;
  border: none !important;
}

.input-success {
  background: #edfbf6 !important;
  color: #32d296 !important;
  text-align: center;
  font-weight: bold;
  border: none !important;
}

#articles-infos-container .submit-btn-container.checkItem-container {
  margin: 0px 0px 0px 0px !important;
  padding-top: 20px;
}

#articles-infos-container .submit-btn-container.checkItem-container button {
  border-radius: 0px;
  width: 100%;
  height: 50px;
}

.submit-btn-container.btn-article-to-table-container {
  margin-top: 30px;
}

#page-components {
  margin-top: 50px;
}

.page-component {
  border-radius: 0px;
  padding: 50px;
  background: #fbfbfb;
  color: #000;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
}

.liste-page-acces-name {
  padding: 10px 20px;
  text-align: center;
  background: #fbfbfb;
  color: #000;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);

}



.page-component-title {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 50px;
}

/* Swal alert 2
   ========================================================================== */

.swal2-modal {
  border-radius: 25px !important;
  border: solid 1px #eee !important;
}

.swal2-confirm {
  border-radius: 25px !important;
}



/* Footer
   ========================================================================== */

footer {
  border-top: solid 1px #dedede;
  padding: 25px;
  text-transform: uppercase;
  color: #9c9c9c;
  font-size: 12px;
  margin-top: 50px;
}



/* Impression
   ========================================================================== */

@media print {

  @page {
    size: landscape;
  }

  html, body {
    height: 99%;
  }

  .print-hide {
    display: none;
  }

  .infos-pagination span {
    display: none;
  }

  #page-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  #page-body-right {
    width: 100%;
  }

  .title-container .title {
    border-bottom: solid 1px #000;
    padding-bottom: 15px;
  }

  .table-container table {
    border-collapse: collapse;
  }

  .table-container table tr th {
    border: solid 1px #000;
    background-color: #f2f2f2;
  }


  .table-container table tr td {
    border: solid 1px #000;
    padding: 5px 10px;
    min-width: auto;
  }

  .list-info {
    margin: 0px auto 10px auto;
  }


  /*** Recu ***/

  #recu-a5 {
    width: 21cm;
    height: 14.85cm;
    margin: 0px auto;
  }

  #recu {
    margin-left: -30px;
  }

  .printed-by {
    display: block;
  }

  /******** Page de details *********/

  * {
    box-sizing: border-box !importan;
    margin: 0;
    padding: 0;
  }

  .details-page-title {
    margin: 0px auto;
    padding: 0px !important;
  }

  .details-page #photo-preview {
    width: 120px;
    height: 120px;
  }

  .details-page tr {
    border-bottom: solid 1px #eee !important;
  }

}











/* Page ajout articles
   ========================================================================== */


#achats-infos, #oldachats, #reception-infos, #oldreceptions {
  width: 90%;
  margin: auto;
  border-radius: 25px;
  padding: 0px 70px 30px 0px;
}


#articles-infos-container, #colis-infos-container {
  border: solid 1px #eee;
  width: 100%;
  margin: 50px auto;
  border-radius: 25px;
  padding: 30px 70px 30px 0px;
}

#colis-infos-container .submit-btn-container {
  margin-bottom: 15px;
}



/* Page des détails
   ========================================================================== */

.details-page .uk-tab-left {
  height: 100%;
}

.details-page .uk-tab-left li {
  border-bottom: solid 1px #eee;
  padding: 10px 0px;
}

.details-page .uk-tab-left li.uk-active {
  border-right: solid 1px #eee;
  background-color: #effaff;
}

.details-page .uk-tab-left>*>a {
  text-align: left;
  border: none !important;
  text-transform: none;
}


.details-page-content {
  width: 95%;
  margin: auto;
}

.details-page-title {
  border-bottom: solid 1px #eee;
  width: 95%;
  margin: 50px auto;
  padding-bottom: 30px;
  font-size: 20px;
}

.details-page-table-item-title {
  font-weight: bold;
}

.details-page-content .uk-table-striped>tr:nth-of-type(odd), .uk-table-striped tbody tr:nth-of-type(odd) {
  background: #f8f8f8;
  border: none;
}






.cv-form-page #photo-preview {
  width: 120px;
  height: 120px;
}


#modal-photo-crop-preview-container, .croppie-container {
  width: 300px !important;
  height: 300px !important;
  margin: auto;
}

#modal-photo-crop .uk-modal-body {
  height: 500px;
  padding-top: 50px;
}

#modal-photo-crop .uk-modal-header {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

#modal-photo-crop .uk-modal-dialog {
  border-radius: 25px;
  overflow: hidden;
}

img#photo-preview, .cr-boundary {
  border: solid 2px #e0e0e0;
}