*, html, body {font-family: "Inter Tight", serif;}
a {transition: 0.5s all ease;}
a:hover {transform: scale(0.95); color: #555;}
.btn {transition: 0.5s all ease;font-weight: bold;
 border-radius: 30px;
 padding: 3px 20px;}
.btn:hover {transform: scale(0.95);}
label {font-size: 13px; color: #666;}
.width-1450 {width: 1450px; padding-top: 80px !important; padding-bottom: 80px !important;}
.first-log  {
  font-size: 13px;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: #b39c9c !important;
  border-color: #e6e6e6 !important;
  font-weight: 500;
}
.first-log:hover {color: #fff !important;
  border-color: #fff !important;
  font-weight: 500;
  background: orange;}

  .back {
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  text-decoration: none;}
.page-title {text-align: center;font-weight: bold;}
.btn-primary {background: rgba(34,34,34,1);color: #f9f7f2; border: 1px solid rgba(34,34,34,1);}
.btn-primary:hover {background: rgb(63, 62, 62);color: #f9f7f2;}
.btn-login {padding: 10px;
 border-radius: 11px;}
.btn-secondary { background: transparent; color: #51585e;}
.btn-secondary:hover {background: rgb(63, 62, 62);color: #f9f7f2;}
div.dataTables_wrapper div.dataTables_filter {
 text-align: center;margin-bottom: 20px;
}
.center {text-align: center;}
.ml-30 {margin-left: 30px;}
th.label {vertical-align: middle;}
.formnew {
 background: #fff;
 padding: 20px;
 border-radius: 20px;
 margin: 20px auto;
 box-shadow: 0px 0px 50px #e5e5e5;
 max-width: 880px;

}
.text-danger{
 text-align: center;
 background: #ff00006b;
 border-radius: 10px;
 color: #fff !important;
 padding: 9px;
 font-size: 13px;
}
.text-success{
 text-align: center;
 background: #00ff006b;
 border-radius: 10px;
 color: #fff !important;
 padding: 9px;
 font-size: 13px;
}
.pswlink {
 color: #999;
 text-decoration: none;
 font-size: 12px;
}
.form-control:focus {box-shadow: 1px 1px 1px #7d8fec;border-color: #fb6d35;}
.navbar {
 background-image: url(https://d9hhrg4mnvzow.cloudfront.net/get.rauva.com/home/abd52ad7-background_11hc0s0000000000000028.jpg);
 position: fixed;
 top: 0; left: 0;
 width: 100%;
 z-index: 1000;
 padding: 0px;
}
.navbar-brand img {
 height: 20px;
}
.nav-item a {
 color: #fff;
 padding: 10px;
 text-decoration: none;
 font-weight: 700;
}
div.dataTables_scrollHead table.table-bordered {margin-left: auto !important;}
.dataTables_scrollHeadInner {width: auto !important;}

.date-picker-container {
 display: flex;
 align-items: center;
}

.date-picker-container form {display: inherit; min-width: 180px;}
.date-picker-container input{
 padding: 5px;
 font-size: 12px;
 height: 30px;
 border-radius: 10px 0px 0px 10px;
 }

 .date-picker-container .btn {
 text-transform: uppercase;
 font-size: 10px;
 border-radius: 0px 10px 10px 0px;
 }

 .nav-item { font-size: 13px; color: #666; transition: 0.2s all ease; margin-right: 12px;}
 .nav-item i { font-size: 15px; margin-right: 2px; color: #fff; }
 .nav-item:hover {color: #999; transform: scale(0.98)}

 .dataTables_wrapper .col-sm-12.col-md-6 {width: 100%;}
 #clientsTable_filter label {display: flex; margin-bottom: 10px;}
.clickable-log-row, .clickable-row {
 cursor: pointer;
}

 .navbar .container-fluid {max-width: 1270px;}
#rauvaTable_filter label {font-size: 0px;}
 .dataTables_filter input {
 background-image: url(https://www.w3schools.com/css/searchicon.png);
 background-position: 10px 10px;
 background-repeat: no-repeat;
 background-size: 15px;
 font-size: 16px;
 padding: 9px 18px 9px 40px !important;
 border: 1px solid #ddd;
 height: 33px;
 border-radius: 14px;
 }
.form-control, .form-select {margin-top: 3px;}
.toggle-container h4 small {background: #fff;  padding: 2px 11px;  border-radius: 5px;  font-size: 11px;}
.formnew h4 {
  margin-bottom: -10px;
  margin-top: 10px;
  border-bottom: 0px solid #999;
  font-size: 15px;
  padding-bottom: 5px;
}
    .toggle-container {
        display: flex;
        align-items: baseline;
        gap: 1rem;
       margin-bottom: 5px;
        background: #f2f2f2;min-height: 40px;
        border-radius: 9px;padding-bottom: 6px;
    }
    .toggle-container input[type="checkbox"] {
        transform: scale(1.2);
        cursor: pointer;
    }
    .switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4cd964; /* iOS green */
}

input:checked + .slider:before {
    transform: translateX(22px);
}

.slider.round {
    border-radius: 34px;
}


.bg-grey {
  background: #f2f2f2;
  border-radius: 9px;
  padding: 10px; display: none;margin-top: -10px;
  margin-bottom: 20px;
}
 #clientsTable_wrapper .pagination {padding-bottom: 150px;}
 #rauvaTable_info {
  opacity: 0.3;
  font-size: 11px;
}
.dataTables_paginate {margin-top: 20px !important;}
 .dataTables_filter {
 font-size: 0px;
 }

.dataTable th {border: none !important;
 padding: 3px 4px!important ; font-size: 12px;}
 .dataTable thead tr {border: none !important;padding: 3px 4px!important ;}


/***** LOGIN ***/
.login {max-width: 350px; padding-top: 12vh; background: url(https://d9hhrg4mnvzow.cloudfront.net/get.rauva.com/home/abd52ad7-background_11hc0s0000000000000028.jpg);}
.login .card {
 border-radius: 20px;
 background: #ffffff;

 border: none;}

 .login h2 {text-align: center; margin-bottom: 15px !important; font-weight: 800; color: #fff; font-size: 20px;}

 .container.mt-5 {margin-top: 80px !important;}
 .btn-next, .btn-prev {
 line-height: 2;
 border-radius: 50%;
 width: 50px;
 }

 .shadow_light { box-shadow: 12px 12px 52px #ededed, -12px -12px 52px #ffffff;; border-radius: 20px;}
 .stat_top { border-radius: 11px; padding: 15px; text-align: center; }
 .width_stat {max-width: 630px; margin: auto; font-size: 13px;margin-top: -18px}
 .bignum strong {font-size: 17px; font-weight: 800;}
 .smallnum i {color: #999}
 .num {font-weight: 800; font-size: 15px;}
 tbody {border-color: #fff;}

 table.dataTable.display > tbody > tr:nth-child(2n+1) > .sorting_1, table.dataTable.order-column.stripe > tbody > tr:nth-child(2n+1) > .sorting_1, table.dataTable.stripe > tbody > tr:nth-child(2n+1) > *, table.dataTable.display > tbody tr > .sorting_1, table.dataTable.display > tbody > tr:nth-child(2n+1) > * {background: #ffffff; box-shadow: none;padding: 20px 10px;}
 table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td {
 padding: 10px 10px;
 }
 table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
 box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha)) ;
 }
 table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 { box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha)) ;}
 tbody > tr:hover > * {
 box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035);
 box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha));
 }
 table.dataTable.display > tbody > tr:hover > * {
 box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035);
 box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.04);
 }
 table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.04);}
 tbody > tr, tbody > tr:hover, tbody > td, tbody > tr:hover {cursor: pointer; background: #fff !important; box-shadow: none !important;}

.bold {font-weight: 800;}
.smalltext {font-size: 80%; opacity: 0.8;}
.people {font-weight: 800; font-size: 23px; padding: 15px 9px !important;}

.labeltag {
 background: #ccc;

 font-size: 12px;
 border-radius: 50px;
 }

table {width: 100% !important;}
input[readonly] {
    background-color: transparent; border: none;
}
.badge {
 font-size: 0.775rem;
 font-weight: 500;
 padding: 0.3em 0.65em;
 border-radius: 10px;
 display: inline-block;
 min-width: 70px;
 text-align: center;
 text-transform: capitalize;
 background-color: #e6c09f;
}
.badge.bg- {padding: 0;}
.active > .page-link, .page-link.active {background-color: #000;
 border-color: #000;}
.bg-valid, .bg-Done {
 background-color: #08b866;
 color: #fff;
}

.bg-invalid {
 background-color: #c21123;
 color: #fff;
}


.bg-error, .bg-Error {
 background-color: #c21123;
 color: #fff;
}

.bg-pending, .bg-Pending, .bg-Connected {
 background-color: #ff9c07;
 color: #fff;
}

.bg-done {
 background-color: #0d6efd;
 color: #fff;
}

.bg-todo, .bg-To {
 background-color: #6c757d;
 color: #fff;
}

.bg-inactive {
 background-color: #adb5bd;
 color: #212529;
}

.bg-unknown {
 background-color: #dee2e6;
 color: #495057;
}

.badge.clickable {
 cursor: pointer;
 transition: background-color 0.2s ease-in-out;
}

.badge.clickable:hover {
 opacity: 0.85;
}

.bl {border-left: 2px solid rgb(255, 123, 0) !important;}

.status-selector{
 min-width: 110px;
 border-radius: 30px;font-size: 12px;
 padding: 2px 10px;
}

.status-selector.status-To {
 background-color: #f8d7da; /* Rouge clair */
 color: #721c24;
 border-color: #f5c6cb
}

.status-selector.status-Done {
 background-color: #d4edda; /* Vert clair */
 color: #155724;
 border-color: #c3e6cb;
}

.status-selector.status-Pending {
 background-color: #ffeeba; /* Jaune clair */
 color: #856404;
 border-color: #ffeeba;;
}


 .stat_book {margin-top: 250px ;margin-bottom: 150px;}
.internal_com {height: 30px;}
 .modal-header {padding-bottom: 0px !important;}

 .titleh3 {
 margin-top: 50px;
 margin-bottom: 19px;
 font-weight: 800;
 font-size: 22px;
 }
 .titleh4 {
 font-size: 16px;
 opacity: 1;
 background: #f2f2f2;
 color: #666;
 width: 100px;
 margin: auto;
 margin-bottom: 8px !important;
 border-radius: 10px;z-index: 20;
 position: relative;
 }

.border_bottom {border-top: 1px solid #e5e5e5;}
.center {text-align: center !important;}
.modal-footer {border-top: none;}
.modal-header {border-bottom: none;}

 .btn-save {width: 100%;font-weight: 800; padding: 15px;}
 .btn-group-radio label {
 display: inline-block;
 align-items: center;
 padding: 10px 15px;
 font-size: 16px;
 cursor: pointer;
 width: 24.3%;
 margin-bottom: 6px;
 }
 .btn-group-radio .lab25 {

 width: 24.3%;

 }
 .btn-group-radio label.lab33 {
 width: 32.8%;

 }

 .btn-group-radio .btn-check:checked + label {
 background-color: #007bff;
 color: white;
 }



 .modal {background: rgba(250,250,250,0.9);}
 .modal-dialog {box-shadow: 15px 15px 30px #e8e8e8, -15px -15px 30px #fff; min-width: 800px;}
 .modal-content {border: none; min-width: 800px;}
hr {margin: 20px 0; color: #e5e5e5;}
.main_grey { background: #f2f2f2; margin-left: 6px; padding: 3px 0px 10px; border-radius: 11px; }

.table-responsive {
 overflow-x: auto; 
 -webkit-overflow-scrolling: touch; 
}





.statwidth .width_stat {max-width: 800px;}
.mg50 {margin-top: 80px;}
.noshowtable {max-width: 800px;
 margin: auto;
 margin-bottom: 150px;}
 .smal {padding: 4px 10px !important; }
 .datefromto {text-align: center;}
 .datefromto .form-control {width: 120px !important;display: inline-block;
 font-size: 13px !important;}
 .table td, .table th {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 font-size: 11px;
 }
 .copyable {
 cursor: pointer;
 color: #0d6efd;
 }
 .copyable:hover {
 text-decoration: underline;
 }
 td, th {
 font-size: 0.85rem;
 white-space: nowrap;
 }


 .pt-30 {padding-top: 40px;}

 #logTable_length {display: none !important;}
 @media (max-width: 990px) {

 .datefromto label { font-size: 10px;}

 .nav-item{
 font-size: 20px;
 padding: 15px 0px;margin-left: -8px;
 }
 #navbarNav .date-picker-container {padding: 20px 10px;}
 #navbarNav {height: 100vh;}
 .navbar-toggler {background: #00000015;border-radius: 0px;margin-right: -12px;}
 .date-picker-container form {
 display: inherit;
 width: 90%;
 margin-bottom: 30px;
 position: absolute;
 bottom: 60px;
 left: 5%;
 }
 .btn-next, .btn-prev {
 line-height: 1.5;
 border-radius: 50%;
 width: 39px;
 height: 39px;
 margin-top: 7px;
 }
 .titleh4 {margin-bottom: -10px !important;}
 .statwidth .width_stat {
 max-width: 800px;
 padding: 15px;
 }
 .smal {padding: 2px 11px !important;}
}


@media (max-width: 850px) {
 .table td, .table th {
 white-space: nowrap;
 overflow: hidden; 
 text-overflow: ellipsis;

 }
 input, select, textarea {
 font-size: 16px !important;
 }
 .table th {font-size: 12px;}
 .modal-content {border: none;min-width: 100% !important; width: 100%;}
 .modal-dialog {box-shadow: 15px 15px 30px #e8e8e8, -15px -15px 30px #fff; min-width: 100% !important; width: 100%;}
 .btn-group-radio label {font-size: 12px;width: 32.6% !important;}
 .form-control {font-size: 13px;}
 .datefromto .form-control {width: 120px !important;display: inline-block;
 font-size: 13px !important;}
}

@media (max-width: 768px) {
 .stat_top {width: 50%;padding: 6px 5px 0px;}
 .stat_top.smallnum {padding: 5px 15px 12px;}
 .width_stat {margin-top: 0px;border-radius: 10px;}
 .bignum strong {font-size: 25px; font-weight: 800;}
 .title {font-size: 20px; text-align: center;}
 .title strong {display: block;}
}
@media (max-width: 458px) {
 .btn-group-radio label {width: 49% !important;}
}