nav.navbar.navbar-dark.sticky-top.bg-dark.flex-md-nowrap.p-0 {
   // background: radial-gradient(#2196F3, white);
}
    canvas {
        display: none;
    }
    hr {
        margin-top: 32px;
    }
    input[type="file"] {
        display: block;
        margin-bottom: 16px;
    }
    div {
        margin-bottom: 16px;
    }
    nav.navbar.navbar-dark.sticky-top.bg-dark.flex-md-nowrap.p-0 {
    width:100%;
    opacity: 1; 
}
button.close {
    color: white !important;
    opacity: 1;
}

input.anomalie {
    float: left;
    margin: 0 auto;
    margin-top: 5px;
}

.info_projet b {
    float: left;
    margin-left: 15px;
}

.info_projet span {
    float: left;
    margin-left: 15px;
}

.col-lg-12.pull-left.info_projet {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 16px
}
.row{
  margin: 0px !important
}
ul.acton_btn {
    background: white;
    width: 100%;
    float: left;
    bottom: 0;
    position: fixed;
    margin: 0;
    padding: 0;
}
ul.action_btn li a{
  cursor: pointer;
}
ul.acton_btn li {
  
    float: left;
    
    height: 75px;
    list-style: none;
    text-align: center;
    line-height: 75px;
    font-size: 25px;
    margin: 0;
    /* padding: 0 !important; */
}
.no-mg {
    margin: 0 !important;
    padding: 0 !important;
}
ul.acton_btn li:nth-child(1) {
    background: #e63766;
}
.container-fluid {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: auto;
    margin-left: auto;
}
h1.h1 {
    position: relative;
    color: white;
    font-size: 90%;
    right: 15px;
    float: none;
    line-height: 47px;
    text-align: center;
 
}

a.close_li {
    float: left;
    width: 30%;
}

a.photo_li {
    float: left;
    width: 40%;
}

a.list_li {
    float: left;
    width: 30%;
}

ul.acton_btn li a {
    cursor: pointer;
}
ul.acton_btn li a:hover {
    background: white;
    color: #e63766 !important;
}

ul.acton_btn li a:hover i {
    color: #e63766;
}
ul.acton_btn li a:hover {
    cursor: pointer;
    color:white;
}
center.loading_msg {
    float: left;
    width: 100%;
    top: 54%;
    position: absolute;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.7;
}
span#capture {
    border: 1px solid #c1c1c1;
    color: #7a7f86;
    font-weight: 900;
    padding: 15px;
    position: fixed;
    bottom: 0;
    background: #dad7d785;
    left: 2px;
    text-align: center;
    font-size: 140%;
}
img.logo {
    background: white;
    border-radius: 5px;
    width: 45px;
    float: left;
    zoom: 0;
    padding: 5px;
    margin-top: 5px;

}
    a.navbar-brand.col-lg-12 {
    margin: 0;
}
img#preview {
    width: 100%;
}
button.btn.btn-warning.direct_save {
    margin-left: 34%;
}
.modal-header {
    line-height: 39px;
    background: #141618;
    color: white;
    border-radius: 0px !important;
    margin-bottom: 0 !important;
}

.modal-dialog {
    border: 1px solid white;
    border-radius: 0px !important;
}

.modal-content {
    border-radius: 0px !important;
    margin-bottom: 0;
}

.modal-dialog * {
    border-radius: 0px !important;
}
.modal-dialog .btn {
    border-radius: 10px !important;
}

.modal-footer {
    margin-bottom: 0;
    margin: 0;
}

button.btn.btn-primary.save_continue {
    float: left;
    position: absolute;
    left: 18px;
}
.loader img{
    left: 60%;
    top: 50%;
        margin:-60px 0 0 -60px;

    position: fixed;
     -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


i.fa.fa-camera {
     color: #c1c1c1;
    line-height: 65px;
    font-size: 25px;
}
video#qr-video {
    width: 100%;
}
body{
	margin:0px;
}  

.tools_bar {
    float: left;
    width: 100%;
    background: #8e8e8ea1;
    height: 90px;
}

.toH{
	    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
header.navbar.navbar-expand.navbar-dark.flex-column.flex-md-row.bd-navbar {
    background: #563D7C;
 
    height: 65px;
    color: #e4d5d5;
    width: 100%;
}
.col-lg-4.pull-left.lefttext {
    text-align: left;
}
ul.result_check {
    float: right;
    width: 100%;
    list-style: none;
    direction: rtl;
    text-align: right;
}
input[type="radio"] {
    margin-left: 15px;
}
ul.result_check li {
       max-width: 85%;
    direction: rtl;
    padding: 5px;
    font-family: 'Cairo', sans-serif;
}
select.form-control.refuse_reason {
    height: 45px !important;
}
.hide {
    display: none;
}
div#output {
    border: 1px dashed black;
    width: 120px;
    height: 63px;
    margin-top: 15px;
    margin-right: 15px;
    border-radius: 6px;
    opacity: 0;
}
.thumb img {
    width: 100%;
}
.to_top {
    position: absolute;
    top: -1500px;
    opacity: 0;
}
i.fa.fa-check.big_check {
    border: 4px solid green;
    border-radius: 59%;
    padding: 41px;
    font-size: 97px !important;
    /* float: left; */
    margin: 0 auto;
    text-align: center;
}
video#qr-video {
    width: 100%;
    border: 1px dashed #a0969652;
    background: #a5a3a31f;
    
}

 main.col-md-9.col-lg-10 {
    margin: 0 !important;
    padding: 0 !important;
}






 #sidebarCollapse {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}


#sidebarCollapse span:first-of-type {
    /* rotate first one */
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    /* second one is not visible */
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    /* rotate third one */
    transform: rotate(-45deg) translate(1px, -1px);
}
#sidebarCollapse.active span {
    /* no rotation */
    transform: none;
    /* all bars are visible */
    opacity: 1;
    margin: 5px auto;
}

.wrapper {
    display: flex;
    align-items: stretch;
    perspective: 1500px; 
}

#sidebar {
    min-width: 250px;
    max-width: 317px;
    background: #7386D5;
    color: #fff;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
}

#sidebar.active {
    margin-left: -317px;
    transform: rotateY(100deg); /* Rotate sidebar vertically by 100 degrees. */
}

@media (max-width: 768px) {
    /* Reversing the behavior of the sidebar: 
       it'll be rotated vertically and off canvas by default, 
       collapsing in on toggle button click with removal of 
       the vertical rotation.   */
    #sidebar {
        margin-left: -250px;
        transform: rotateY(100deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }

    /* Reversing the behavior of the bars: 
       Removing the rotation from the first,
       last bars and reappear the second bar on default state, 
       and giving them a vertical margin */
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }

    /* Removing the vertical margin and make the first and last bars rotate again when the sidebar is open, hiding the second bar */
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }
}


/*
    ADDITIONAL DEMO STYLE, NOT IMPORTANT TO MAKE THINGS WORK BUT TO MAKE IT A BIT NICER :)
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif !important;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar {
    /* don't forget to add all the previously mentioned styles here too */
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}
ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 48px; /* Height of navbar */
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */
 
.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
/*
 * Utilities
 */
button#sidebarCollapse {
    /* background: none; */
    border: none;
    cursor: pointer;
    float: right;
}
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }


span#capture {
    float: right;
    right: 15px;
    opacity: 0.8;
    z-index: 99;
  
    cursor: pointer;
}
.table-responsive {
    display: block;
    width: 100%;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
span#capture:hover {
    opacity: 1;
}
body.no-margin{
      overflow-y: hidden;
    width: 100% !important;
    overflow-x: hidden;
 }
video#qr-video {
    position: relative;
    z-index: 1;
}

span#list {
    float: right;
    top: -90px;
    width: 65px;
    height: 65px;
        background: radial-gradient(#08802d, #68f55fb8);

    border-radius: 60px;
    color: white;
    text-align: center;
    line-height: 65px;
    font-size: 25px;
    opacity: 0.8;
    position: relative;
    z-index: 99;
    right: 20px;
}

span#list:hover {
    opacity: 1;
}
 .box {
  width: 100%;
  height: 600px;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(black, .2);
  background: lighten(#f0f4c3, 10%);
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.wave {
    opacity: 0.9;
    position: absolute;
    top: 3%;
    left: 50%;
    background: #ad222b;
  width: 500px;
  height: 500px;
  margin-left: -250px;
  margin-top: 0px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 3000ms infinite linear;
}

.wave.-three {
  animation: drift 5000ms infinite linear;
}

.wave.-two {
  animation: drift 7000ms infinite linear;
  opacity: .1;
  background: yellow;
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  line-height: 300px;
  text-align: center;
  transform: translate3d(0, 0, 0);
  color: white;
  text-transform: uppercase;
  font-family: 'Playfair Display', serif;
  letter-spacing: .4em;
  font-size: 24px;
  text-shadow: 0 1px 0 rgba(black, .1);
  text-indent: .3em;
}
@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}


.ocrloader {
  width: 94px;
  height: 77px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  backface-visibility: hidden;
  span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    background-color: rgba(45, 183, 183, 0.54);
    z-index: 1;
    transform: translateY(135%);
    animation: move 0.7s cubic-bezier(0.15, 0.44, 0.76, 0.64);
    animation-iteration-count: infinite;
  }
  > div {
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48%;
    backface-visibility: hidden;
  }
  i {
    display: block;
    height: 1px;
    background: #000;
    margin: 0 auto 2px;
    margin: 0 auto 2.2px;
    backface-visibility: hidden;
    &:nth-child(2) { width: 75%; }
    &:nth-child(3) { width: 81%; }
    &:nth-child(4) { width: 87%; }
    &:nth-child(6) { width: 71%; }
    &:nth-child(7) { width: 81%; }
    &:nth-child(8) { width: 65%; }
    &:nth-child(9) { width: 83%; }
    &:nth-child(10) { width: 75%; }
    &:nth-child(12) { width: 86%; }
    &:nth-child(14) { width: 65%; }
    &:nth-child(16) { width: 75%; }
    &:nth-child(18) { width: 83%; }
  }
  &:before,  &:after, em:after, em:before {
    border-color: #000;
    content: "";
    position: absolute;
    width: 19px;
    height: 16px;
    border-style: solid;
    border-width: 0px;
  }
  &:before {
    left: 0;
    top: 0;
    border-left-width: 1px;
    border-top-width: 1px;
  }
  &:after {
    right: 0;
    top: 0;
    border-right-width: 1px;
    border-top-width: 1px;
  }
  em:before {
    left: 0;
    bottom: 0;
    border-left-width: 1px;
    border-bottom-width: 1px;
  }
  em:after {
    right: 0;
    bottom: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }
}

@keyframes move {
  0%, 100% { transform: translateY(135%); }
  50% { transform: translateY(0%); }
  75% { transform: translateY(272%); }
}

svg.ldi-kz3hoc {
    position: absolute;
    z-index: 9;
    left: 0;
    background: white;
    opacity: 0.1;
    top: -55px;
}

.result_work {
    position: relative;
     z-index: 10;
     float:left;
     width: 100%;
     text-align: center;
}
.alert {
    float: left;
    width: 100%;
}
.static{
 // position: static !important;
}
a.close_li {
    color: black;
}
.container-fluid {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: auto;
    margin-left: auto;
    float: left;
    width: 100%;
    min-height: 1074px;
}
@media (max-width: @screen-xs-min) {
  .modal-xs { width: @modal-sm; }
}

@media only screen and (max-width: 400px) {
   h1.h1 {
    position: absolute;
    color: white;
    font-size: 60%;
    right: 15px;
    float: none;
    line-height: 47px;
    text-align: center;
    top: 20px;
 }

 #qr-video{
 	margin-top: 61px ;
 }

.alert h4 {
    font-size: 19px;
}

button.btn.btn-lg.btn-danger.nonconform {
    font-size: 15px;
    float: right;
}

button.btn.btn-lg.btn-danger.nonconform {}

button.btn.btn-lg.btn-success.conform {
    float: left;
    font-size: 15px;
}

.result h2 {
    font-size: 16px;
}

.result_check label.btn.btn-info.btn-lg {
    font-size: 18px;
}

}

@media only screen and (max-width: 510px) { {

  .info_projet span{
    width: 100% !important;
  }

}