.card-img img {
    height: 100px;
    object-fit: contain;
}
#swal2-title{
    color:black;
}
td.no-record,strong.no-record{
    color: red;
}
.toggle-user input.switch {
    margin-bottom: 0 !important;
}
.toggle-user input:checked {
    background: #D0DDFB;
}
.toggle-user input[type="checkbox"] {
    position: relative;
    width: 40px;
    height: 16px;
    -webkit-appearance: none;
    appearance: none;
  background: #DFDFDF;
    outline: none;
    border-radius: 2rem;
    cursor: pointer;
}
.order-chart select.form-control {
    padding: 4px;
}
.toggle-user input.switch:checked {
    background: #e1f5d1;
}
.toggle-user input:checked:after {
    transform: translateX(100%);
    background: #6CF102;
}
.setting-form {
    grid-template-columns: repeat(2, 49%) !important;
}
.setting button.request.acc {
    display: block;
    margin: 0;
}
.toggle-user input:after {
   background: #757575;
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    top: -1px;
    left: 2px;
    transition: 0.5s;
}
.sidebar-icon-only .sidebar .nav .nav-item .nav-link {
    text-align: center;
    justify-content: center;
}
.sidebar-icon-only .sidebar .nav .nav-item .nav-link span.menu-icon {
    margin: 0 auto;
}
.sidebar-icon-only .sidebar .nav .nav-item .nav-link span.menu-icon {
    justify-content: center;
}
button.btn.btn-primary {
    background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%);
    color: #fff;
    padding: 12px 30px;
    min-width: 100px;
}
.view-drivers-col {
    padding: 7px 0;
}
a {
    color: #000;
}
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td, table tbody tr td {
    padding: 18px !important;
}
.preloader {
  position: fixed;
  top: 45%;
  left: 45%;
  z-index: 9999;
  width: 100px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #25b09b;
  animation: l15 1s infinite linear;
}
.preloader::before,
.preloader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: l15 2s infinite;
}
.preloader::after {
  margin: 8px;
  animation-duration: 3s;
}
@keyframes l15{ 
  100%{transform: rotate(1turn)}
}

nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link {
  color: #ffffff;
  background-color: black;
  border-color: #2c2e33 #2c2e33 black; 
}

.sidebar .nav .nav-item.active > .nav-link {
  background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%);
  position: relative; 
  color: #fff;
}
/* .sidebar .nav .nav-item.active > .nav-link:before {
  content: "";
  width: 3px;
  height: 100%;
  background: #0090e7;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0; 
}
  */
.padding {
    padding: 10px;
}
  
/* GRID */
.col {
  padding: 10px 20px;
  margin-bottom: 10px;
  background: #fff;
  color: #666666;
  text-align: center;
  font-weight: 400;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}
  
.row h3 {
  color: #666666;
}
  
.row.grid {
  margin-left: 0;
}
  
.grid {
  position: relative;
  width: 100%;
  background: #fff;
  color: #666666;
  border-radius: 2px;
  margin-bottom: 25px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}
  
.grid .grid-header {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 15px 10px 10px 20px;
}
  
.grid .grid-header:before,
.grid .grid-header:after {
  display: table;
  content: " ";
}
  
.grid .grid-header:after {
  clear: both;
}
  
.grid .grid-header span,
.grid .grid-header > .fa {
  display: inline-block;
  margin: 0;
  font-weight: 300;
  font-size: 1.5em;
  float: left;
}
  
.grid .grid-header span {
  padding: 0 5px;
}
  
.grid .grid-header > .fa {
  padding: 5px 10px 0 0;
}
  
.grid .grid-header > .grid-tools {
  padding: 4px 10px;
}
  
.grid .grid-header > .grid-tools a {
  color: #999999;
  padding-left: 10px;
  cursor: pointer;
}
  
.grid .grid-header > .grid-tools a:hover {
  color: #666666;
}
  
.grid .grid-body {
  padding: 15px 20px 15px 20px;
  font-size: 0.9em;
  line-height: 1.9em;
  color: black;
  background-color: white;
}
  
.grid .full {
  padding: 0 !important;
}
  
.grid .transparent {
  box-shadow: none !important;
  margin: 0px !important;
  border-radius: 0px !important;
}
  
.grid.top.black > .grid-header {
  border-top-color: #000000 !important;
}
  
.grid.bottom.black > .grid-body {
  border-bottom-color: #000000 !important;
}

.grid.top.blue > .grid-header {
  border-top-color: #007be9 !important;
}

.grid.bottom.blue > .grid-body {
  border-bottom-color: #007be9 !important;
}

.grid.top.green > .grid-header {
  border-top-color: #00c273 !important;
}

.grid.bottom.green > .grid-body {
  border-bottom-color: #00c273 !important;
}

.grid.top.purple > .grid-header {
  border-top-color: #a700d3 !important;
}

.grid.bottom.purple > .grid-body {
  border-bottom-color: #a700d3 !important;
}

.grid.top.red > .grid-header {
  border-top-color: #dc1200 !important;
}

.grid.bottom.red > .grid-body {
  border-bottom-color: #dc1200 !important;
}

.grid.top.orange > .grid-header {
  border-top-color: #f46100 !important;
}

.grid.bottom.orange > .grid-body {
  border-bottom-color: #f46100 !important;
}

.grid.no-border > .grid-header {
  border-bottom: 0px !important;
}

.grid.top > .grid-header {
  border-top-width: 4px !important;
  border-top-style: solid !important;
}

.grid.bottom > .grid-body {
  border-bottom-width: 4px !important;
  border-bottom-style: solid !important;
}


/* SUPPORT TICKET */
.support ul {
    list-style: none;
  padding: 0px;
}

.support ul li {
  padding: 8px 10px;
}

.support ul li a {
  color: #999;
  display: block;
}

.support ul li a:hover {
  color: #666;
}

.support ul li.active {
  background: #0073b7;
}

.support ul li.active a {
  color: #fff;
}

.support ul.support-label li {
  padding: 2px 0px;
}

.support h2,
.support-content h2 {
  margin-top: 5px;
}

.support-content .list-group li{
  padding: 15px 20px 12px 20px;
  cursor: pointer;
  color: #000;
  background-color: #fff;
  border-top: 1px solid #666 !important;
}
.support-content .list-group > li:last-child {
border-bottom: none !important;
}


.support-content .list-group li:hover {
  background: transparent !important;
  /* background: #eee; */
}

.support-content .fa-padding .fa {
  padding-top: 5px;
  width: 1.5em;
}

.support-content .info {
  color: #777;
  margin: 0px;
}

.support-content a {
  color: #999999 !important;
}

.support-content .info a:hover {
  text-decoration: underline;
}

.support-content .info .fa {
  width: 1.5em;
  text-align: center;
}

.support-content .number {
  color: #777;
}

.support-content img {
  margin: 0 auto;
  display: block;
}

.support-content .modal-body {
  padding-bottom: 0px;
}

.support-content-comment {
  padding: 10px 10px 10px 30px;
  background:black;
  border-top: 1px solid black;
}


/* BACKGROUND COLORS */
.bg-red, .bg-yellow, .bg-aqua, .bg-blue, .bg-light-blue, .bg-green, .bg-navy, .bg-teal, .bg-olive, .bg-lime, .bg-orange, .bg-fuchsia, .bg-purple, .bg-maroon, bg-gray, bg-black, .bg-red a, .bg-yellow a, .bg-aqua a, .bg-blue a, .bg-light-blue a, .bg-green a, .bg-navy a, .bg-teal a, .bg-olive a, .bg-lime a, .bg-orange a, .bg-fuchsia a, .bg-purple a, .bg-maroon a, bg-gray a, .bg-black a {
    color: #080707 !important;
}
.bg-white, .bg-white a {
  color: #999999 !important;
}
.bg-red {
  background-color: #f56954 !important;
}
.bg-yellow {
  background-color: #f39c12 !important;
}
.bg-aqua {
  background-color: #00c0ef !important;
}
.bg-blue {
  background-color: #0073b7 !important;
}
.bg-light-blue {
  background-color: #3c8dbc !important;
}
.bg-green {
  background-color: #00a65a !important;
}
.bg-navy {
  background-color: #001f3f !important;
}
.bg-teal {
  background-color: #39cccc !important;
}
.bg-olive {
  background-color: #3d9970 !important;
}
.bg-lime {
  background-color: #01ff70 !important;
}
.bg-orange {
  background-color: #ff851b !important;
}
.bg-fuchsia {
  background-color: #f012be !important;
}
.bg-purple {
  background-color: #932ab6 !important;
}
.bg-maroon {
  background-color: #85144b !important;
}
.bg-gray {
  background-color: #eaeaec !important;
}
.bg-black {
  background-color: #222222 !important;
}
.ticket.btn.active {
  background-color: #666;
}

.custom-size {
  font-size: 24px; /* Adjust the size as needed */
  color: green;
}

.form-control[readonly]{
  background-color: #666;
}


label.error {
  color: #dc3545;
  position: relative;
  padding-top: 11px;
}
/* New css 04-06-2024 */
.text-end {
  text-align: right;
}
.response-data {
  display: flex;
  gap: 30px 0;
  flex-flow: row wrap;
}
.response-data h6 {
  width: 50%;
}

.response-data h6 span {
  display: block;
}
img.user-image {
  height: 300px;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.scratch-rw .col-12:nth-child(4n+1) .scratch-card {
  background: #8d58e8;
}
.scratch-rw .col-12:nth-child(4n+2) .scratch-card {
  background: #39cc57;
}
.scratch-rw .col-12:nth-child(4n+3) .scratch-card {
  background: #fa9e1d;
}
.scratch-rw .col-12:nth-child(4n+4) .scratch-card {
  background: #2b7ed1;
}
.scratch-card{
  padding: 20px;
  border-radius: 12px;
}
.scratch-rw .col-12:nth-child(4n+1) .scratch-card   h3 {
  color: #f3a911;
}
.scratch-rw .col-12:nth-child(4n+2) .scratch-card   h3 {
  color: #8b50e8;
}
.scratch-rw .col-12:nth-child(4n+4) .scratch-card   h3 {
  color: #f3a911;
}
.personal-card {
  padding: 20px;
  border-radius: 12px;
  background: #443c3c;
}
.help-id
{
  color: #f3a911;
}
.personal-card h3 {
  color: #e1404c;
}

.chat-box{
  height: 400px;
  overflow-y: scroll;
  padding: 15px;
}
.chat-box::-webkit-scrollbar {
  width: 6px;
}
.chat-box::-webkit-scrollbar-thumb {
  background-color: #f3a911;
}
.messages-card{
  padding: 30px;
}
.chat-box .card {
  background: #2e274a;
}


/* 05/06/24 start */

ul.list-unstyled.chat-box {
  width: 100%;
}

.chat-box  li.right-msg {
  width: 50%;
  margin-left: auto;
}


.chat-box li.right-msg .card {
  background: #433c3c;
  /* margin-right:15px; */
}

.chat-box  li.left-msg {
  width: 70%;
  margin-right: auto;
 
}
.chat-box  li.left-msg .card{
   background:#f1f1f1;
   color:#000;
   margin-left:15px;
   min-height: unset;
}

.chat-box  li .card .card-body {padding:10px;min-height: unset !important;height: auto !important;max-height: unset !important;}

.chat-box  li {
  align-items:flex-end;
}
.chat-box li img {
  max-width: 40px;
}
.msg_time {
  text-align: right;
}

.chat-box .card { 
  border-radius: 20px;
}

.ticket-list .media-body > a {
  color: #fff !important;
}

.ticket-list .media-body > a {
  color: #fff !important;
}

.ticket-list span.label button {
  margin: 0 5px;
}

ul > li.list-group-item.ticket-list:last-child{
  border-bottom:0 !important;
}

ul > li.ticket-list:last-child {
  border-bottom: 0px !important;
}


ul > li.list-group-item.ticket-list:last-child{
  border-bottom:0 !important;
}

ul > li.ticket-list:last-child {
  border-bottom: 0px !important;
}

.grid.support-content  li.list-group-item.ticket-list:last-child {
  border:none !important;
}


.ticket-list p.info a {
  color: #2b8de7 !important;
}

.ticket-list span.number.pull-right.d-flex {
  align-items: center;
}

.ticket-list .mdi-checkbox-marked-outline::before {
  content: "\F135";
  display: block;
  height: unset;
  line-height: 1;
}

.ticket-list i.custom-size {
  font-size: 18px;
  padding: 2px;
  display: block;
  background: #fff;
  border-radius: 5px;
  margin-right:10px;
  margin-left:5px;
}
button.btn.ticket.btn-default.active {
  background: #2b8de7;
}

.support-content .list-group li:first-child {
  border: none !important;
}

a.text-success.markAsComplete {
  background: red;
  color: #fff !important;
  border-radius: 15px;
  padding: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  margin-right: 6px;
}
/* 05/06/2024 end */

/* 06/06/2024 start */
.modal input, .modal select, .modal textarea {
  border: 1px solid #d8d8d8;
  padding: 12px;
  width: 100%;
  border-radius: 6px;
  margin-bottom: 24px !important;
}

.survey-skip .accordion-button:not(.collapsed) {
  color: #000 !important;
  box-shadow: none !important;
}
.survey-skip  .accordion-button {
  font-weight: 700;
  padding: 0 !important;
  background-color: transparent !important; 
}

.select-survey-ques .accordion-button {
  color: #ffffff !important;
  background-color: #01a47d !important;
}

.select-survey-ques .accordion-button {
  border-radius: 0;
  border: 1px solid #01a47d;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
}

.accordion-body {
  padding: 1rem 1.25rem;
}

.question-pick i
{
  color: #01a47d !important;
}
.pick-qustions {
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
}
.question-pick a {
    border: 1px solid #01a47d70;
    padding: 8px 14px;
    color: white;
    text-decoration: none;
    width: max-content;
}

button.remove-option {
  border: unset;
  background: unset;
  font-size: small;
  color: #ff0000;
}

.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 15px;
  flex-wrap: wrap;
  margin: 0 0 15px 0px;
}
.options .col-12.col-md-6.mb-3 {
  width: 100%;
}
button.addOption {
  border: unset;
  background: #01a47d;
  color: #fff;
  border-radius: 4px;
}

button.removeOpts {
  border: unset;
  background: unset;
  font-size: small;
  color: #ff0000;
}  

/* 10-06-2024  start*/

.modal-open .modal .modal-body.pt-2 {
  padding: 40px;
  border-radius: 5px;
}
.modal-open .modal {
  background: #ffffff38 !important;
}
.btn.add {
  min-width: 100px;
  min-height: 40px;
  margin: 0 auto !important;
  display: block;
}

.modal-open .modal .modal-content {
  border-radius: 1.2rem;
}

.modal-open .modal label.error {
  color: #dc3545;
  position: relative;
  padding-top: 0;
}
h4.response-title.d-flex.justify-content-between.align-items-center {
  padding: 0.75rem;
}
h4.response-title.d-flex.justify-content-between.align-items-center {
  padding: 0.75rem;
}

.modal-content .accordion-button {
  padding: 10px;
  background: #2b8de7 !important;
}

.modal-content .accordion-body {
  padding: 0;
  margin-top: 25px;
}
.default-btn {
  background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%);
  color:#fff;
  padding: 12px 30px;
 }


.modal-content .question-pick a i {
  font-size: 22px;
  color: #2b8de7  !important;
}
.modal-content .question-pick a {
  font-size: 14px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 5px;
  border-color: #2b8de7;
  width:100%;
}

.pick-qustions .question-pick {
  flex: 1;
}
.pick-qustions .question-pick:first-child {
  flex-basis:10%;
}
select#exampleInputCategory ,select#card_type{
  height: 40px;
  background: transparent;
  
  padding: 5px;
}

select#exampleInputCategory option  ,select#card_type option {
  background: #000;
}

form#add-question textarea.form-control {
  background: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
}


form#add-question .form-group {
  margin-bottom:0;
}

form#add-question button.btn.btn-primary  , form#edit-question button.btn.btn-primary{
  min-height: 50px;
   min-width: 250px;
   margin-top: 30px;
   margin-left: 15px;
   margin: 0 auto !important;
   display: block;
}
.vehiclecategory {
  display: flex;
  align-items: center;
  gap: 7px;
}

.vehiclecategory label {
  margin: 0;
}


/* 11-06-2024 */

.sidebar .nav .nav-item {
  padding: 0 10px;
  margin: 1px 0;
}

.sidebar .nav.sub-menu .nav-item .nav-item.active {
  color: #ffffff;
  background: transparent;
}
form#add-question .row .options {
  display: flex;
 gap: 0;
 flex-wrap: wrap;
 margin: 0 0 15px 0px;
 width: 100%;
}

/* form#add-question .row  div[class^="col"] , form#edit-question .row div[class^="col"] {
 background: #000;
 padding: 20px;
 border-radius: 15px;
 margin-left: 15px;
 max-width: calc(50% - 30px);
 flex-basis: calc(100% - 30px);
 width: 100%;
} */
.toggle-user input:checked:after {
 transform: translateX(100%);
 background: #0088e1;
}

change
form#add-question button.btn.btn-primary {
 min-height: 50px;
 min-width: 250px;
 margin-top: 30px;
 margin-left: 15px;
 margin: 0 auto !important;
 display: block;
}

remove

.options .col-12.col-md-6.mb-3 {
 width: 100%;
 /* margin: 0 !important; */
}

div#options .options + div.col-12 {
 background: transparent;
}

 button.addOption {
 min-width: 100px;
 min-height: 35px;
}

form#add-question .row .options .form-group input {
 background: transparent;
 border: none;
 border-bottom: 1px solid;
 margin-bottom: 12px;
}

button.remove-option {
 background: red;
 color: #fff;
 border-radius: 4px;
 position: relative;
}

button.remove-option::before {
 content: "x";
 font-size: 125%;
 line-height: 1;
 margin-right: 5px;
 font-family: 'Rubik';
}
form#add-question .row > .row.w-100 {
  margin: 0;
  padding: 0;
}
.top_question_block {
  background: #000;
  padding: 20px;
  border-radius: 15px;
  margin-left: 15px;
}
form#edit-question .option_row .options {
  display: flex;
  column-gap:30px;
  margin:0;
}
form#edit-question .option_row .options input{
margin-bottom:10px;
background: #000;
border:none;
border-bottom:1px solid;
}
form#edit-question .top_question_block {
  margin-left:0;
}

 form#edit-question .row div[class^="col"] ,  form#add-question .row div[class^="col"]{
  background: #000;
  padding: 20px;
  border-radius: 15px;
  margin-left: 0px;
  max-width: calc(50% - 15px);
  flex-basis: calc(100% - 15px);
  width: 100%;
 }
 form#edit-question .row ,  form#add-question .row  {
  column-gap:30px;
  margin:0;
 }

 form#add-question  .top_question_block ,
 form#edit-question  .top_question_block  {
  background: #000;
  padding: 20px;
  border-radius: 15px;
  margin: 0;
  width:100%;
  margin-bottom:15px;
}

form#add-question .top_question_block div[class^="col"] ,
form#edit-question .top_question_block div[class^="col"] {
  padding: 0;
  margin: 0;
  width:100%;
  max-width: unset;
}

form#edit-question  .top_question_block textarea{
  background: #000;
  border:none;
  border-bottom:1px solid;
}

form#add-question textarea.form-control {
  width: 100%;
  max-width: unset !important;
}

form#add-question .top_question_block .form-check ,
form#edit-question .top_question_block .form-check {
  display: inline-flex;
  width: max-content;
  align-items: center;
  margin-right: 20px;
}

form#add-question .top_question_block .form-group label ,
form#edit-question .top_question_block .form-group label {
  display: block;
}


form#add-question .top_question_block .form-check .form-check-label ,
form#edit-question .top_question_block .form-check .form-check-label {
  padding-left: 0;
}

form#add-question .top_question_block .form-check input.form-check-input {
  margin-top: -4px;
}
.custom_pagination {
  justify-content: center;
  margin-top:40px;
  
}
.custom_pagination li.page-item a.page-link  {
  border: none;
  outline: none;
  cursor:pointer;
}

.custom_pagination ul.pagination {
  gap: 15px;
}

.custom_pagination li.page-item.disabled span.page-link  {
  background: #000 !important;
      border: none;
}


/* form#edit-question .option_row  div[class^="col"]{
  max-width: calc(100% - 30px);
  flex-basis: calc(100% - 30px);
  width: 100%;
} */


/* 26 june 2024 css */

.add-driver-form .form-control {
  background: #F2F2F3;
  border-color: #F2F2F3;
  padding: 10px 14px;
  height: auto;
  border-radius: 6px;
}
.search-input input[type="search"] {
  border: 1px solid #d9d9d9;
  font-size: 14px;
  padding: 8px 12px 8px 40px;
  border-radius: 6px;
}
.search-input  button {
  padding: 0;
  border: none;
  background: transparent;
  position: absolute;
  left: 8px;
  top: 6px;
}
.relative
{
  position: relative;
}
table thead p {
  margin: 0;
  color: #000;
}
button.sort-btn {
  background: transparent;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d9d9d9;
  padding: 8px;
  font-size: 13px;
}
.rounded {
  border-radius: 10px !important;
}


button.btn.ticket.btn-default {
    background: #666;
    margin-right: 20px;
}

button.btn.ticket.btn-default.active {
   background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%);
    margin-right: 20px;
}
.form-control:focus {
  background-color: unset;
}
.sidebar .nav.sub-menu .nav-item .nav-link:hover {
  color: #000000c2;
}

.img-preview {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin-top: 10px;
    }


/* 15/07/2024 start  */

.has_preview_img .input-group {
    display: block;
    width: 100%;
}

.has_preview_img .input-group img {
    max-width: 50px;
    max-height: 50px;
    margin-bottom: 30px;
}

.has_preview_img .input-group input {
    width: 100%;
}
.stretch-card .card {
    padding: 20px;
    margin-bottom: 30px;
}

.stretch-card .card h5 {
    margin-bottom: 15px;
}

.equipment_popup {
    display: none; /* Hide by default */
}

.equipment_popup.show {
    display: block; /* Show when 'show' class is added */
}

.equipment_popup.hide {
    display: none; /* Hide when 'hide' class is added */
}


#add_ticket_popup {
    background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%);
    position: relative;
    color: #fff;
}
.bg-info {
     background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%);
}
/* 15/07/2024 end  */
* Help desk ticket */
/* GRID */
.col {
    padding: 10px 20px;
    margin-bottom: 10px;
    background: #fff;
    color: var(--main) !important;
    text-align: center;
    font-weight: 400;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

/* .row h3 {
    color: var(--main) !important;
} */

.row.grid {
    margin-left: 0;
}

.grid {
    position: relative;
    width: 100%;
    background: #fff;
    color: var(--main) !important;
    border-radius: 2px;
    margin-bottom: 25px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

.grid .grid-header {
    position: relative;
    border-bottom: 1px solid #ddd;
    padding: 15px 10px 10px 20px;
}

.grid .grid-header:before,
.grid .grid-header:after {
    display: table;
    content: " ";
}

.grid .grid-header:after {
    clear: both;
}

.grid .grid-header span,
.grid .grid-header > .fa {
    display: inline-block;
    margin: 0;
    font-weight: 300;
    font-size: 1.5em;
    float: left;
}

.grid .grid-header span {
    padding: 0 5px;
}

.grid .grid-header > .fa {
    padding: 5px 10px 0 0;
}

.grid .grid-header > .grid-tools {
    padding: 4px 10px;
}

.grid .grid-header > .grid-tools a {
    color: #999999;
    padding-left: 10px;
    cursor: pointer;
}

.grid .grid-header > .grid-tools a:hover {
    color: var(--main) !important;
}

.grid .grid-body {
    padding: 15px 20px 15px 20px;
    font-size: 0.9em;
    line-height: 1.9em;
}

.grid .full {
    padding: 0 !important;
}

.grid .transparent {
    box-shadow: none !important;
    margin: 0px !important;
    border-radius: 0px !important;
}

.grid.top.black > .grid-header {
    border-top-color: #000000 !important;
}

.grid.bottom.black > .grid-body {
    border-bottom-color: #000000 !important;
}

.grid.top.blue > .grid-header {
    border-top-color: #007be9 !important;
}

.grid.bottom.blue > .grid-body {
    border-bottom-color: #007be9 !important;
}

.grid.top.green > .grid-header {
    border-top-color: #00c273 !important;
}

.grid.bottom.green > .grid-body {
    border-bottom-color: #00c273 !important;
}

.grid.top.purple > .grid-header {
    border-top-color: #a700d3 !important;
}

.grid.bottom.purple > .grid-body {
    border-bottom-color: #a700d3 !important;
}

.grid.top.red > .grid-header {
    border-top-color: #dc1200 !important;
}

.grid.bottom.red > .grid-body {
    border-bottom-color: #dc1200 !important;
}

.grid.top.orange > .grid-header {
    border-top-color: #f46100 !important;
}

.grid.bottom.orange > .grid-body {
    border-bottom-color: #f46100 !important;
}

.grid.no-border > .grid-header {
    border-bottom: 0px !important;
}

.grid.top > .grid-header {
    border-top-width: 4px !important;
    border-top-style: solid !important;
}

.grid.bottom > .grid-body {
    border-bottom-width: 4px !important;
    border-bottom-style: solid !important;
}


/* support-content TICKET */
.support-content ul {
   list-style: none;
    padding: 0px;
}

.support-content ul li {
    padding: 8px 10px;
}

.support-content ul li a {
    color: #999;
    display: block;
}

.support-content ul li a:hover {
    color: #666;
}

.support-content ul li.active {
    background: #0073b7;
}

.support-content ul li.active a {
    color: #fff;
}

.support-content ul.support-label li {
    padding: 2px 0px;
}

.support-content h2,
.support-content h2 {
    margin-top: 5px;
}

.support-content .list-group li {
    padding: 15px 20px 12px 20px;
    cursor: pointer;
}

.support-content .list-group li:hover {
    background: #eee;
}

.support-content .fa-padding .fa {
    padding-top: 5px;
    width: 1.5em;
}

.support-content .info {
   color: #777;
   margin: 0px;
   display: flex;
   align-items: baseline;
   gap: 5px;
}
.support-content a {
    color: #111;
}

.support-content .info a:hover {
    text-decoration: underline;
}

.support-content .info .fa {
    width: 1.5em;
    text-align: center;
}
.help-desk .btn-group {
   margin-bottom: 10px;
}
.support-content .number {
    color: #777;
    align-items: center;
}
.help-desk button.btn.ticket {
   padding: 5px;
   height: auto;
   font-size: 12px;
   line-height: 1;
   font-weight: 500;
}
.support-content img {
    margin: 0 auto;
    display: block;
}

.support-content .modal-body {
    padding-bottom: 0px;
}

.support-content-comment {
    padding: 10px 10px 10px 30px;
    background: #eee;
    border-top: 1px solid #ccc;
}

.number {
   float: right !important;
}

a.text-success.markAsComplete {
   background: red;
   color: #fff !important;
   border-radius: 15px;
   padding: 5px;
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
    height: max-content;
   margin-right: 6px;
}
a.text-success.markAsComplete i {
   font-size: 12px;
}
.ticket-list span.label {
   margin: 0 5px;
}
.equipment_popup.help-desk form {
   min-width: 42%;
}
#add_ticket textarea.title {
   min-height: 50px;
}
#add_ticket textarea.description {
   min-height: 120px;
}

/*** End of Help Desk**/


/*chat system starrt **/



.ps-container {
   -ms-touch-action: auto;
   touch-action: auto;
   overflow: hidden!important;
   -ms-overflow-style: none;
}

.media-chat {
   padding-right: 64px;
   margin-bottom: 0;
}

.media {
   padding: 16px 12px;
   -webkit-transition: background-color .2s linear;
   transition: background-color .2s linear;
}

.media .avatar {
   flex-shrink: 0;
}

.avatar {
   position: relative;
   display: inline-block;
   width: 36px;
   height: 36px;
   line-height: 36px;
   text-align: center;
   border-radius: 100%;
   background-color: #f5f6f7;
   color: #8b95a5;
   text-transform: uppercase;
}

.media-chat .media-body {
   -webkit-box-flex: initial;
   flex: initial;
   display: table;
}

.media-body {
   min-width: 0;
}

.media-chat .media-body p {
   position: relative;
   margin: 4px 0;
   color: cadetblue;
}

.media>* {
   margin: 0 8px;
}

.media-chat .media-body p.meta {
   background-color: transparent !important;
   padding: 0;
   opacity: .8;
}

.media-meta-day {
   -webkit-box-pack: justify;
   justify-content: space-between;
   -webkit-box-align: center;
   align-items: center;
   margin-bottom: 0;
   color: #8b95a5;
   opacity: .8;
   font-weight: 400;
}

.media {
   padding: 16px 12px;
   -webkit-transition: background-color .2s linear;
   transition: background-color .2s linear;
}

.media-meta-day::before {
   margin-right: 16px;
}

.media-meta-day::before, .media-meta-day::after {
   content: '';
   -webkit-box-flex: 1;
   flex: 1 1;
   border-top: 1px solid #ebebeb;
}

.media-meta-day::after {
   content: '';
   -webkit-box-flex: 1;
   flex: 1 1;
   border-top: 1px solid #ebebeb;
}

.media-meta-day::after {
   margin-left: 16px;
}

.media-chat.media-chat-reverse {
   padding-right: 12px;
   padding-left: 650px;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
   flex-direction: row-reverse;
}

.media-chat {
   padding-right: 64px;
   margin-bottom: 0;
}

.media {
   padding: 16px 12px;
   -webkit-transition: background-color .2s linear;
   transition: background-color .2s linear;
}

.chat_response  .media-chat.media-chat-reverse .media-body {
   float: right;
   clear: right;
   background-color: #48b0f7 !important;
   color: #fff !important;
}
.chat_response  .media-chat.media-chat-reverse .media-body  p{
    color: #fff !important;
}
.chat_response .publisher {
   /* background-color: #52662a;
   color: #fff; */
    flex-flow: row wrap;
}
.border-light {
   border-color: #f1f2f3 !important;
}
form#query-response {
   width: 94%;
}
/* .reponse-input .publisher-btn i {
   color: #fff;
} */

.reponse-input {
   display: flex;
   justify-content: space-between;
}
.chat_response  .publisher-input::placeholder {
   /* color: #fff !important; */
}
.bt-1 {
   border-top: 1px solid #ebebeb !important;
}

.publisher {
   position: relative;
   display: -webkit-box;
   display: flex;
   -webkit-box-align: center;
   align-items: center;
   padding: 12px 20px;
   background-color: #f9fafb;
}

.publisher>*:first-child {
   margin-left: 0;
}

.publisher>* {
   margin: 0 8px;
}

.publisher-input {
   -webkit-box-flex: 1;
   flex-grow: 1;
   border: none;
   outline: none !important;
   background-color: transparent;
}

button, input, optgroup, select, textarea {
   font-family: Roboto,sans-serif;
   font-weight: 300;
}

.publisher-btn {
   background-color: transparent;
   border: none;
   color: #8b95a5;
   font-size: 16px;
   cursor: pointer;
   overflow: -moz-hidden-unscrollable;
   -webkit-transition: .2s linear;
   transition: .2s linear;
}

.file-group {
   position: relative;
   overflow: hidden;
}

.publisher-btn {
   background-color: transparent;
   border: none;
   color: #cac7c7;
   font-size: 16px;
   cursor: pointer;
   overflow: -moz-hidden-unscrollable;
   -webkit-transition: .2s linear;
   transition: .2s linear;
}

.file-group input[type="file"] {
   position: absolute;
   opacity: 0;
   z-index: -1;
   width: 20px;
}

.text-info {
   color: #48b0f7 !important;
}
.chat_response .response-title {
   padding: 0 42px 16px 22px;
}
.chat_response  .qury.help-id {
   color: #52662a;
}
.chat_response  span.text-muted {
   color: gray !important;
   font-size: 14px;
}
.chat_response   span.qury {
   font-size: 16px;
}
.chat_response  .media.media-chat {
   display: flex;
   align-items: center;
}
.chat_response  .media.media-chat .media-body {
   background: #f5f6f7;
   width: max-content;
   border-radius: 8px;
   padding: 8px 20px;
   min-width: 300px;
}

.media-chat .media-body .msg_time {
   text-align: right;
   font-style: italic;
   color: #a7a7a7 !important;
   font-size: 12px;
}
.support-content ul.pagination li.active {
   background: transparent;
   padding: 3px;
}
.support-content ul.pagination li {
   padding: 3px;
}
.chat_response  label#description-error {
   bottom: -22px;
}

.visually-hidden {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   padding: 0 !important;
   border: 0 !important;
   height: 1px !important;
   width: 1px !important;
   overflow: hidden;
}
img.response-image{
   max-width: 30%;
 }
 span.publisher-btn.file-group {
   flex-basis: 20%;
   display: flex;
   gap: 10px;
   justify-content: end;
   align-items: center;
}
p#fileName {
   margin-bottom:0;
}
.navbar .navbar-menu-wrapper .count-indicator .count {
    position: absolute;
    left: 66%;
    width: 15px;
    height: 15px;
    color: #ffffff;
    border-radius: 100%;
    text-align: center;
    font-size: .625rem;
    line-height: 1.5;
    top: 0px;
}
.form-group {
    position: relative;
}
.password-toggle {
    position: absolute;
    right: 14px;
    top: 33px;
}
.reviews-section {
    padding: 20px;
}

.heading {
    font-size: 2rem;
    margin-bottom: 20px;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-item {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.review-info {
    flex-grow: 1;
}

.review-info h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
}

.review-date {
    color: #888;
    font-size: 0.9rem;
}

.review-rating {
    font-size: 1.2rem;
    color: #ffcc00;
}

.star {
    color: #ddd;
}

.star.filled {
    color: #ffcc00;
}

.review-comment {
    margin: 0;
    color: #333;
}

.review-user {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.9rem;
    color: #666;
}

.row.details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust spacing between columns */
}

.detail-name {
    padding: 20px;
}

.user-info, .payment-info {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Adjust spacing inside each column */
}

.img-preview {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.det-id {
    margin-bottom: 10px;
}

.heading {
    margin-bottom: 20px;
}
 .admin-sidebar li .menu-icon img {
    height: 20px;
    width: 23px;
    object-fit: contain;
}
.iti__selected-flag {
    height: 50px !important;
}
.form-control.is-invalid {
    background-image: none !important;
}
        label.error {
            color: #db7373;
            position: relative;
            padding-top: 11px;
        }
        .toggle-password, .toggle-pass {
            position: absolute;
            right: 10px;
            top: 27px;
            transform: translateY(-50%);
            cursor: pointer;
            margin-top: 13px;
        }
    
    .wallet-section {
        padding: 20px 0;
    }
    .wallet-card, .user-info-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
    }
    .wallet-card .form-group label {
        font-weight: 600;
    }
    .form-group label {display: block;}
    .wallet-card .btn-default-btn {
        margin-top: 10px;
    }
    .iti {
    width: 100% !important;
}
    .user-info-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 20px;
    }
    .user-info-card .d-flex {
        align-items: center;
    }
    .edit-icon {
        cursor: pointer;
        width: 24px;
        height: 24px;
    }
    .user-info-card .user-details {
        margin-top: 15px;
    }
    .user-info-card .detail-item {
        margin-bottom: 10px;
    }
    .user-info-card .detail-label {
        font-weight: 600;
    }
    .user-info-card .detail-value {
        font-weight: 400;
    }
.tab-buttons {
    display: flex;
    border-bottom: 0px solid #007bff;
    border-radius:6px;
    gap: 10px;
}
.set-content .nav-pills .nav-link {
    border: 1px solid #d1d1d1 !important;
    padding: 10px 15px;
    background: transparent;
    border-radius: 12px;
    margin: 4px 0;
}
.set-content  .nav-pills .nav-link.active, .set-content  .nav-pills .show>.nav-link {
    background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%);
    color: white !important;
    background-color: transparent !important;
    padding: 10px;
    border-radius: 15px;
}
.tab-button {
    flex: 1;
    padding: 10px 20px;
    border: 1px solid #007bff;
    background-color: #fff;
    color: #331477;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    border-radius:6px;
    width: 32px;
}
.shipment-list-table tr td .btn.btn-outline-primary {
    margin-right: 5px;
    background: #341176;
    color: #fff;
    display: flex;
    align-items: start;
    padding: 6px 12px;
    border-radius: 6px;
}
.shipment-list-table tr td .btn.btn-outline-success {
    background: #1e6584;
    color: #fff;
    display: flex;
    align-items: start;
    padding: 6px 12px;
    border-radius: 6px;
}
.tab-button.active {
    background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%);;
    color: #fff;
    border-bottom: 1px solid transparent;
     border-radius:6px;
}

.tab-content {
  padding: 20px;
  border: 1px solid #007bff;
  border-radius: 14px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* new 13-08-24 */

.comp-register .login-left-icon img {
    width: 46%;
    left: -40px;
    position: fixed;
    left: 0;
    top: 13%;
}


/* New---10/09/2024---- */
button.dt-paging-button {
  border-radius: 50px !important;
  font-size: 12px;
}
.dt-layout-row .dt-paging nav button.dt-paging-button.current {
  background: linear-gradient(96.8deg, #6316DB -0.73%, #350C75 -0.73%, #11998E 148.47%) !important;
  color: #fff !important;
}
.dt-layout-row .dt-paging nav button.dt-paging-button.current:hover {
  color: #000000 !important;
  background: transparent !important;
} 

/*23-09-2024*/
.setting-form select.form-control {
  height: 47px;
  border-radius: 10px;
  width: 100%;
  padding: 0 5px;
  background: #f2f2f3;
}
a.btn.btn-light {
    padding: 12px 30px;
}
.gap {
    gap: 0;
}
.setting-form {
    display: flex;
    flex-direction: column;
}
.change-img img {
    width: 30px;
    max-width: 100%;
}

.change-img {
    position: absolute;
    bottom: 30px;
    left: 50px;
}
.forms-sample .form-control {
  height: 47px;
  border-radius: 30px;
  background: #f7f7fc;
}
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title {
    display: none;
}
.sidebar-icon-only .sidebar {
    flex: unset;
}
.sidebar-icon-only ul.nav.admin-sidebar {
    padding: 10px;
    position: relative;
    z-index: 9999;
}
.sidebar-icon-only .profile-desc {
    padding-left: 10px !important;
    margin-bottom: 10px;
}
.sidebar-icon-only .sidebar .nav .nav-item .menu-icon i {
    font-size: 20px;
}
/*24-09-2024*/
.modal-dialog {
    position: absolute;
    top: 50%;
    left: calc(50% + 135px);
    transform: translate(-50%, -50%) !important;
    margin: 0px !important;
}
.driver-pop-up {
    padding: 0 !important;
    overflow-y: unset !important;
}

@media only screen and (max-width:1500px) and (min-width:1200px) {
  .admin-dashboard .card .card-body {
    padding: 0px;
} 
.admin-dashboard .card {
  margin: 0px;
}
.admin-dashboard .card .total-earning h3 {
  font-size: 18px;
}
.users-table .card .card-body {
  padding: 20px;
}
.dt-layout-cell.dt-layout-full tr td {
  text-align: left !important;
}
.dt-layout-cell.dt-layout-full span.dt-column-title {
  padding-right: 15px;
}
.dt-length label {
  padding-left: 15px;
  font-size: 14px;
  text-transform: capitalize;
}
.dt-search label {
      padding-right: 15px;
  font-size: 14px;
  text-transform: capitalize;
}

.admin-dashboard .card .card-body .earn-dashboard img {
  height: 55px;
  width: 55px;
  object-fit: contain;
}
.dt-layout-cell.dt-layout-full th.dt-type-numeric {
  text-align: left;
}
div.dt-container .dt-paging nav .dt-paging-button:hover {
  background: transparent !important;
  color: #000 !important;
}
span.dt-column-title p {
  text-align: left;
}
table#myTable th {
  line-height: 10px !important;
}
.main-panel .content-wrapper .dt-layout-cell.dt-layout-full thead th:last-child,
.main-panel .content-wrapper .dt-layout-cell.dt-layout-full tbody td:last-child {
    text-align: right !important;
}
.card-body .table-responsive {
  margin: 0;
  padding-top: 30px;

}
.main {
  padding: 20px;
}
section.table-data {
  padding: 0px;
}
section.table-data h1.heading {
  padding: 0px;
}
span.rate {
  font-size: 20px;
}
.list-blade .table-responsive {
  padding-top: 30px;
}
.role-per .table-responsive tr th:first-child {
  width: 10%;
}

.role-per .table-responsive tr th:last-child,
.role-per .table-responsive tr td:last-child {
  text-align: right !important;
}
.rev {
  background-color: white;
  border-radius: 15px;
  display: flex;
  box-shadow: 0 0 10px #00000021;
}
.cht ul.list-unstyled.chat-box img {
  height: 50px;
}
.cht .chat-box li.right-msg .card {
  background: transparent;
  border: none;
  box-shadow: 0 0 10px #00000021;
  margin-right: 20px;
  padding: 10px;
}
img.chat-user {
  padding: 0px !important;
}
.cht .card.messages-card {
  border: none;
}
.cht textarea {
  border-radius: 15px;
}
p.info{
  font-size: 13px;
}

}
@media only screen and (max-width:1350px) and (min-width:992px) {
  .admin-dashboard .card .card-body {
    padding: 0px;
} 
.total-earning h3 {
  font-size: 18px;
}
.earn img {
  width: 50px;
}

h3.total {
  font-size: 14px;
}

span.rate {
  font-size: 14px;
  line-height: 1.4em;
}
.users-table .card .card-body {
  padding: 20px;
}
button.dt-paging-button {
  border-radius: 50px !important;
  font-size: 12px;
}
.col-lg-3, .lightGallery .image-tile {
  flex: 0 0 33%;
  max-width: 33%;
}
}
/* New---10/09/2024---- */

/* 26 dec 2024 */
td.banner-listing img {
  width: 100px;
  height: 50px;
  border-radius: 0;
}

a.nav-link.active {
  font-weight: bold;
}