body,table,.form-select,.topnav .navbar-nav .dropdown-item,.form-control,h1,h2,h3,h4,h5,h6{
  color:black!important;
}

body {
  background:#383839f6;
}
body[data-layout=detached] .container-fluid{
  max-width:100%!important;
}
.page-content{
  padding: calc(70px + 12px) 0 0px 0!important;
}

span.select2-selection,
span.select2-selection__arrow,
span.select2-selection__rendered{
  height:38px!important;
}

#my-batch-dropzone{
  overflow-y: auto;
  max-height:500px;
}


.topnav .navbar-nav .nav-link {
  font-size: 14px;
}

.text-danger {
  color: #e4022c !important;
}

.btn-primary {
  color: #fff;
  background-color: #e4022c;
  border-color: #e4022c;
}
.btn-primary:hover,.btn-primary:active, .btn-primary:focus {
  color: #fff;
  background-color: #b40122 !important;
  border-color: #b40122 !important;
  box-shadow: unset !important;
}

.btn-danger {
  color: #fff;
  background-color: #f35e06;
  border-color: #f35e06;
}
.btn-danger:hover {
  color: #fff;
  background-color: #f35e06;
  border-color: #f35e06;
}
.page-item.active .page-link {
  background-color: #e4022c;
  border-color: #e4022c;
}

.remove_custom_building,
.remove_custom_localisation{
  position: absolute;
  transform: translate(-50%,-50%);
  top: 15px;
  right: -5px;
  border-radius: 50%;
  background:red;
  padding:4px;
  color:white;
}

span.select2-selection__rendered{
  display: flex!important;
  align-items: center!important;
}

.fc-event {
  right:unset!important
}

.arrow-desc{
  transition: 0.5s;
}

.arrow-rotate{
  transform: rotate(180deg);
}

.select2 { width: 100% !important; }

.bg-login-overlay {
  background: black;
  opacity: 1 !important;
}

body.login #layout-wrapper::before {
  height: 0px !important;
}

body.login .page-title-box {
  display: none !important;
}

body[data-layout="detached"] .vertical-menu .user-img img {
  border: 2px dashed #d9232d;
}

.row_problem_selected{
  padding: 10px 0px 15px 0px;
  border: 1px solid rgb(56, 179, 56);
  border-radius: 10px;
}

option:hover{
  cursor:pointer;
  background: #cfcfcf!important;
}

select option:checked{
  background: #cfcfcf!important;
}

.dropzone{
  padding:0!important;
  min-height: 100px!important;
}
.dropzone .dz-message{
  margin : 1.3em 0!important;
}

.img_approved{
  border: 5px solid limegreen;
  border-radius: 10px;
}

html #navbar_custom{
  background-color: #000000;
}

#navbar_custom > button{
  color:#eeb902!important;
}

.datatable > tbody > tr > td:nth-child(2){
  text-wrap: wrap!important;
}


/* BREAK FOR MOBILE/TABLET */
@media (max-width: 991.98px) {
  #topnav-menu-content > ul > li > a.nav-link{
    color: #000000!important;
  }

  #menu_admin_para{
    text-align: center!important;
  }

  .table-responsive{
    margin-top:21px!important;
  }

  .page-content{
    padding-left:5px!important;
    padding-right:5px!important;
  }

  .topnav{
    top:80px!important;
    text-align: center!important;
  }

  .topnav .dropdown-item {
    text-align: center !important;
    padding-right: 3rem;
  }

  body[data-topbar="colored"] #page-topbar {
    background: #000000 !important;
  }
}

.mm-active .active,
.mm-active .active i {
  color: #d9232d !important;
  font-weight: bold;
}

.bg-danger {
  background-color: #d9232d !important;
}



#sidebar-menu ul li a {
  padding: 0.25rem 1.5rem;
}

a.nav-link {
  color: white !important;
}

body[data-layout="detached"] #layout-wrapper::before {
  content: unset !important;
}

.centered {
  text-align: center;
  vertical-align: middle;
}

#status_1 {
  background-color: blue;
}
#status_2 {
  background-color: #35c43b;
}
#status_4 {
  background-color: red;
}
#status_5 {
  background-color: orange;
}
#status_6 {
  background-color: rgb(28, 28, 172);
}



.fc-daygrid-day-events {
  margin-left: 10px;
  margin-right: 10px;
  color: white;
  text-wrap: wrap;
  text-align: center;
}

@media (max-width: 600px) {
  .fc-daygrid-event {
    /* Adjust styles for mobile */
    display: block;
    max-height: none;
    overflow: visible;
  }
  /* You can add more styling adjustments for mobile here */
}
.fc-daygrid-event{
  justify-content: center;
  font-size: inherit!important;
}

.fc-event{
  cursor:pointer;
  border:0!important;
  background-color: unset!important;
}


.custom-event-content{
  overflow: auto;
  padding:3%;
  font-size: small;
  width:100%;
}

.fc-list-event-time{
  width:20%!important;
}
.fc-list-event-title{
  flex-grow: 1;
}
.fc-list-table .fc-event {
  display: flex; /* Change display to flex for better control over child elements */
  width: 292%; /* Ensure it takes the full width available */
  box-sizing: border-box; /* Make sure padding and borders are included in the total width */
}

/* Additional styling to ensure content within .fc-event is displayed as you desire */
.fc-list-table .fc-event .fc-event-title {
  flex-grow: 1; /* Allow the title to grow and fill available space */
}

.custom-event-content { border-radius:0px !important; }

@media only screen and (max-width:800px){
  .fc-daygrid-day-events {
    max-height: 50px;
    text-wrap:nowrap!important;
  }
}

.fc-list-event-time, .fc-list-event-graphic { display:none; }

.fc-daygrid-day-frame {
 /* min-height: 150px !important;*/
}

.centered {
  text-align: center;
  vertical-align: middle;
}

#capture_button,
#capture_button_building{
  background-color: rgb(95, 95, 95);
  opacity: 0.6;
  position: absolute;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius: 50%;
  width:50px;
  height:50px;
  border:5px;
  border-style: double;
  border-color: white;
}

#capture_button{
  bottom:10%;
}

#capture_button_building{
  bottom:2%;
}

#switch_camera{
  position: absolute;
  right:0%;
  top:10%;
  transform:translate(-50%,-50%);
}

#switch_camera >i{
  /* background-color: rgb(95, 95, 95)!important; */
  opacity: 0.6!important;
  color: rgb(95, 95, 95)!important;
  font-size: 30px!important;
  border:5px;
  border-radius: 50%;
  border-style: double;
  border-color: white;
}

.flash-effect {
  animation: flashAnimation 0.5s;
}


#photos,
#photos_building{
  overflow-x: auto;
  padding-left:0!important;
  display: flex;
  justify-content :start;
}

.photoLi{
  position: relative;
  max-width: auto;
  height: 150px;
  width: auto;
  list-style: none;
}

.delete_photo {
  color:white;
  background-color: #d9232d;
  border:0;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  right: -10px; /* or left: 0; depending on where you want the button */
  /*padding: 2px 5px 2px 5px;*/ /* Adjust padding as needed */
  transform:translate(-50%,-50%);
}

.microphone_overlay{
  height:200svh;
  width:100%;
  background-color: black;
  opacity: 0.8;
  position: fixed;
  z-index: 1000;
  top:0;
  left:0;
}

.no-scroll {
  overflow: hidden;
}

#mic{
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  font-size: 50px;
}

.pulsating {
  animation: pulsate 1.5s ease-in-out infinite;
}

.pos-f-t {
  position: sticky;
  top: 0;
  z-index: 100;
}

.rounded{
  border-radius:3rem!important;
}

.photo{
  height:150px;
  width:auto;
}

#canvas,
#canvas_building{
  display: none;
}

#calendar {
  min-height: 550px; /* Adjust the value as needed */
}

#camera_stream,
#camera_stream_building{
  width:100%;
  max-height: 550px;
}

@keyframes pulsate {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.9); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes flashAnimation {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.card-title {
  margin: 0 0 30px 0!important;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  left: 0;
  right: 0;
  overflow: hidden;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

/* Define the fade-in effect */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

/* Apply the animation when the overlay is active */
#overlay.overlay-animation {
  display: flex; /* Assuming you want to keep using flex */
  animation: fadeIn 0.5s ease forwards; /* Animation name, duration, timing function, fill mode */
}



.loader,
.cat_synonyms_loader,
.prob_synonyms_loader {
  font-size: 6px;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #000000,
                1.8em -1.8em 0 0em rgba(0,0,0, 0.7),
                2.5em 0em 0 0em rgba(0,0,0, 0.6),
                1.75em 1.75em 0 0em rgba(0,0,0, 0.5),
                0em 2.5em 0 0em rgba(0,0,0, 0.4),
                -1.8em 1.8em 0 0em rgba(0,0,0, 0.3),
                -2.6em 0em 0 0em rgba(0,0,0, 0.2),
                -1.8em -1.8em 0 0em rgba(0,0,0, 0.1);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.1),
                1.8em -1.8em 0 0em #000000,
                2.5em 0em 0 0em rgba(0,0,0, 0.7),
                1.75em 1.75em 0 0em rgba(0,0,0, 0.6),
                0em 2.5em 0 0em rgba(0,0,0, 0.5),
                -1.8em 1.8em 0 0em rgba(0,0,0, 0.4),
                -2.6em 0em 0 0em rgba(0,0,0, 0.3),
                -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2),
                1.8em -1.8em 0 0em rgba(0,0,0, 0.1),
                2.5em 0em 0 0em #000000,
                1.75em 1.75em 0 0em rgba(0,0,0, 0.7),
                0em 2.5em 0 0em rgba(0,0,0, 0.6),
                -1.8em 1.8em 0 0em rgba(0,0,0, 0.5),
                -2.6em 0em 0 0em rgba(0,0,0, 0.4),
                -1.8em -1.8em 0 0em rgba(0,0,0, 0.3);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.3),
                1.8em -1.8em 0 0em rgba(0,0,0, 0.2),
                2.5em 0em 0 0em rgba(0,0,0, 0.1),
                1.75em 1.75em 0 0em #000000,
                0em 2.5em 0 0em rgba(0,0,0, 0.7),
                -1.8em 1.8em 0 0em rgba(0,0,0, 0.6),
                -2.6em 0em 0 0em rgba(0,0,0, 0.5),
  }
}

.col-checklist .form-check label {
  color:#fff;
}
.shadow-custom{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  color:#fff !important;
}

.accordion-button:not(.collapsed) { color:#000 !important; }

.remove_photo{
  position:absolute;
  transform: translate(-50%,-50%);
  top:7%;
  right:4%;
  padding:1px 3px 1px 3px!important;
}

.reset_photo{
  position:absolute;
  transform: translate(-50%,-50%);
  top:7%;
  left:12%;
  padding:1px 3px 1px 3px!important;
}

.copy_photo{
  position:absolute;
  transform:translate(-50%,-50%);
  bottom:12%;
  left:12%;
  padding:1px 3px 1px 3px!important;
}

.ptro-scroller{
  overflow: unset!important;
}

.ptro-holder {
  bottom: 32px;
}
.ptro-icon-btn[class] {
  border-radius: 27px;
  background-color: #272a2f;
  box-shadow: inset -1px -1px 8px 1px rgba(0, 0, 0, 0.7);
  position: relative;
  color: #c4c8cb;
}
.ptro-icon-btn[disabled] {
  color: #575757;
}
.ptro-icon-btn:not([disabled]):hover[class] {
  background-color: #233 !important;
  color: #c4c8cb !important;
}
.ptro-color-active-control[class] {
  background-color: #656565;
  box-shadow: inset 1px 1px 8px 1px rgba(0, 0, 0, 0.7);
}
.ptro-color-active-control[class]::after {
  box-shadow: inset -1px -1px 8px 1px rgba(255, 255, 255, 0.1);
}
.ptro-icon-btn::after {
  content:'';
  width: 100%;
  height: 100%;
  border-radius: 27px;
  position: absolute;
  box-shadow: inset 1px 1px 8px 1px rgba(255, 255, 255, 0.1);
}
.ptro-color-main[class] {
  background-color: #00000000;
}
.ptro-wrapper[class] {
  background-color:  #00000000;
}

span.ptro-info{
  display: none;
}

#painterroContainer-bar{
  z-index: 10000;
}
.mfp-close{
  color:white!important;
}

#painterroContainer-canvas{
  height: 80vh!important;
  width: auto!important;
  object-fit: cover;
  max-width:100%;
}

.ptro-bar > div {
  justify-content: center;
}

/* Style for the track before the thumb */
#zoom-slider::-webkit-slider-runnable-track {
  background: #86b5e8d1; /* Bootstrap primary blue, for example */
}

#zoom-slider::-moz-range-track {
  background: #86b5e8d1;
}

#zoom-slider::-ms-track {
  background: #86b5e8d1; /* For IE */
}

/* Style for the track after the thumb (only works in WebKit browsers) */
/* #zoom-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #007bff 0%, #007bff 50%, #ddd 50%, #ddd 100%);
} */

/* Style for the thumb */
#zoom-slider::-webkit-slider-thumb {
  background: #007bff;
  border: none; /* Removes default border */
}

#zoom-slider::-moz-range-thumb {
  background: #007bff;
}

#zoom-slider::-ms-thumb {
  background: #007bff;
}

.border-box-section{
  border:1px solid #d3d3d378;
  padding:1%;
  border-radius: 10px;
}
.title-border-box-section{
  font-weight: bold;
  position: absolute;
  /* transform: translate(-50%, -50%); */
  top: -8px;
  left: 22px;
  background: white;
}

@media only screen and (max-width: 800px) {
  h6.title-border-box-section{
    left:20%;
  }
}
@media only screen and (max-width: 400px) {
  h6.title-border-box-section{
    left:30%!important;
  }
}

.email-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.email-icon {
  font-size: 48px;
  animation: sendEmail 2s ease-in-out infinite;
}

@keyframes sendEmail {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(300px);
      opacity: 0;
  }
}

#modal_send_report .alert{
  margin-bottom: unset!important;
}

.environnement_label,
.inspection_line_span{
  display:block;
  cursor: pointer;
}
.environnement_label:hover,
.inspection_line_span:hover{
  background-color:lightgray!important;
}
.environnement_label.focused,
span.inspection_line_span.focused{
  background-color:#3b5de7!important;
  color:white;
}

.environnement-select,
.inspection_line_select{
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
}

@media (max-width:800px){
  .row_photo{
    flex-wrap:wrap;
    justify-content: center;
  }
}

.datatable td,
.datatable th{
  vertical-align: middle;
  text-align: center;
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
  padding: .2em 0 !important;
}

.table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control {
  padding-left: unset !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before,
.table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before {
  content: "" !important;
  background-color: unset !important;
  border: unset !important;
  box-shadow: unset !important;
}

.text_legend {
    font-size: 0.8em; /* Reduced font size */
    list-style: none; /* No bullet points */
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Horizontal with line wrap */
}

.text_legend li {
    cursor: pointer;
    padding: 0 4px;
    margin: 2px;
    background: #e9e9e9;
    border-radius: 10px;
    border: 1px solid black;
    padding: 3px;
}

div.dt-buttons {
  width: 100% !important;
}

ul.nav-tabs li.nav-item button.nav-link {
  color: black;
}

ul.nav-tabs li.nav-item button.nav-link.active {
  font-weight: bold;
}

@media (max-width: 767.98px) {
  .modal-fullscreen-md-down .modal-body {
    padding: 0.25em !important;
  }
}