.click-circle {
     position: fixed;
     width: 30px;
     height: 30px;
     border: 3px solid rgba(255, 66, 66, 0.7);
     border-radius: 50%;
     pointer-events: none;
     transform: translate(-50%, -50%);
     animation: clickEffect 0.6s ease-out forwards;
     z-index: 9999;
 }

 @keyframes clickEffect {
     0% {
         opacity: 1;
         transform: translate(-50%, -50%) scale(0.5);
     }

     100% {
         opacity: 0;
         transform: translate(-50%, -50%) scale(1);
     }
 }

 p.mb-0.text-white {
     font-size: 20px;
 }

 .cursor-circle {
     position: fixed;
     width: 25px;
     height: 25px;
     border: 5px solid rgba(255, 86, 86, 0.6);
     border-radius: 50%;
     pointer-events: none;
     transform: translate(-50%, -50%);
     animation: pulseCircle 0.9s infinite;
     z-index: 9999;
 }



 @keyframes pulseCircle {
     0% {
         opacity: 1;
         transform: translate(-50%, -50%) scale(0.1);
     }

     100% {
         opacity: 0;
         transform: translate(-50%, -50%) scale(0.5);
     }
 }

 /* Loader Start */
 .loader_hidden {
     display: none;
 }

 td,
 th {
     text-align: left;
 }

 div#myModal2 {
     width: 30%;
 }

 .card {
     --bs-card-spacer-y: 0.5rem !important;
     --bs-card-spacer-x: 0.5rem !important;
 }

 .select2-container--default .select2-selection--single {
     border: 1px solid #e1e1e1;
 }

 a.text-secondary.fw-600 {
     font-weight: 700;
     font-size: 20px;
 }

 span.badge.badge-secondary {
     background: #d1d1d1;
     color: black;
 }

 .offcanvas,
 .offcanvas-lg,
 .offcanvas-md,
 .offcanvas-sm,
 .offcanvas-xl,
 .offcanvas-xxl {
     --bs-offcanvas-zindex: 1051 !important;
 }

 #loaderImg {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: clamp(40px, 4vw, 80px);
     /* responsive size */
     height: auto;
     animation: rotate 1s infinite linear;
     z-index: 999999;
 }

 td {
     border: none;
     border-bottom: 1px solid #dee2e6 !important;
 }

 .card {
     box-shadow: 1px 1px 2px 2px lightgray;
 }

 .select2-container .select2-selection--single {
     height: 36px;
 }

 .detail-row {
     padding: 8px 0;
     border-bottom: 1px solid #f1f1f1;
 }

 .detail-label {
     font-weight: 600;
     color: #666;
     font-size: 13px;
 }

 .detail-value {
     font-weight: 600;
     color: #111;
     font-size: 13px;
     word-break: break-word;
 }

 .wrap-path {
     word-break: break-all;
 }

 /* Mobile view label and value */
 @media (max-width: 768px) {
     .detail-label {
         margin-bottom: 4px;
         font-size: 12px;
         color: #888;
     }

     .detail-value {
         font-size: 13px;
         font-weight: 700;
     }
 }

 .offcanvas-header {
     position: sticky;
     top: 0;
     background: #fff;
     z-index: 999;
     border-bottom: 1px solid #ddd;
 }

 /* Default */
 .logo-small {
     display: none;
 }

 /* When collapsed */
 .sidebar-collapsed .logo-full {
     display: none;
 }

 .sidebar-collapsed .logo-small {
     display: block;
     text-align: center;
 }

 .pace {
     display: none;
 }

 @media (min-width: 768px) {
     .w-md-auto {
         width: auto !important;
     }
 }
 .opacity-25{
    opacity: 0.5 !important;
 }

 /* Mobile offcanvas full width */
 @media (max-width: 576px) {
     .offcanvas-end {
         width: 100% !important;
     }
 }

 .bg-gradient-ibiza {
     background: linear-gradient(45deg, #8c5bb1, #97745b) !important;
 }

 .bg-gradient-cosmic {
     background: linear-gradient(to right, #768ad5, #399393) !important;
 }

 .bg-gradient-ohhappiness {
     background: linear-gradient(45deg, #9b863b, #91b74e) !important;
 }

 .bg-gradient-security {
     background: linear-gradient(135deg, #1e3c72, #2a5298);
 }

 tbody td {
     font-family: "Segoe UI", Roboto, Arial, sans-serif;
     font-size: 15px;
 }

 a.nav-link {
     color: black;
     font-weight: 600;
     font-size: 14px;
 }

 a.modalData {
     color: darkcyan;
 }

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

 .offcanvas-header {
     border-bottom: 1px solid lavender;
 }

 .table thead th {
     top: 0;
     background: #ebebeb;
     color: #831fdd;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .table th,
 .table td {
     padding: 10px 12px;
     font-size: 14px;
     vertical-align: middle;
     font-family: "Segoe UI", Roboto, Arial, sans-serif;
 }

 .btn {
     letter-spacing: 0px;
 }

 li.mm-active {
     background: #0d6efd;
 }

 .form-select {
     padding: .375rem 1.25rem .375rem .75rem;
 }

 a {
     color: #2776b7;
 }

 /* Loader End */
 thead th {
     position: sticky;
     /* z-index: 999; */
     /* background-color: #558fe6 !important;
     color: #ffffff !important; */
     font-weight: 600 !important;
     font-size: 15px;
 }

 .bx-user-circle {
     font-size: 29px;
     margin-right: -8px;
     /* color: royalblue; */
     color: white !important;
 }

 table.table-bordered.dataTable tbody th,
 table.table-bordered.dataTable tbody td {
     /* border: 1px solid #c0fcc6; */
     border-bottom: 1px solid lightgray;
     padding: 10px;
 }

 div.dataTables_wrapper div.dataTables_paginate ul.pagination {
     margin: -5px 0;
     white-space: nowrap;
     float: right;
     position: absolute;
     right: 15px;
 }

 svg.w-5.h-5 {
     width: 3%;
 }

 p.text-sm.text-gray-700.leading-5.dark\:text-gray-600 {
     margin-top: 13px;
 }

 span.badge {
     font-weight: 500;
 }

 span.badge.badge-warning {

     background: #fff5cb;
     color: #b9a12d;
 }

 span.badge.badge-primary {
     background: #e9effd;
     color: #376cec;
     border: #e9effd;
 }

 span.badge.badge-purple {
     background: #f3edfd;
     color: #7c45ee;
 }

 span.badge.badge-green {
     background: #e8f6f1;
     color: #479f72;
 }

 span.badge.badge-orange {
     background: #fbf1e6;
     color: #da7d06;
 }

 span.badge.badge-dark {
     background: #c9c9c9;
     color: #727474;
 }

 .select2-container--default .select2-selection--single .select2-selection__rendered {
     line-height: 32px;
     margin-left: 9px;
 }

 .select2-container--default .select2-selection--single .select2-selection__arrow {
     top: 2px;
 }

 span.badge.badge-brown {
     background: green;
 }

 .required:after {
     content: " *";
     color: red;
 }

 .btn i {
     margin-right: 0px !important;
 }

 .switch {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 22px;
 }

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

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

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

 input:checked+.slider {
     background-color: #008cff;
 }

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

 .slider:after {
     content: "Disable";
     position: absolute;
     right: -10px;
     top: 4px;
     font-size: 10px;
     color: white;
 }

 input:checked+.slider:after {
     content: "Enable";
     left: 6px;
     right: auto;
 }

 .logo-icon {
     width: 182px;
 }

 .page-content {
     padding: 1rem 1rem 0.7rem 1rem;
 }

 fieldset {
     border: 1px solid #dcdcdc;
     border-radius: 6px;
     border-bottom: 0px solid gray !important;
 }



 legend {
     font-size: 19px;
     margin-top: -31px;
     background: white;
     color: #338eff;
     border: 1px solid #acb4b7;
     border-radius: 50px;
     padding: 0%;
     /* margin-bottom: 18px; */
     padding-right: 7.5rem;
     padding-left: 7.5rem;
 }

 html.color-sidebar .logo-icon {
     filter: invert(0);
 }

 .simplebar-mask,
 .topbar {
     /* background: black !important; */
     background-image: linear-gradient(to top, #6d028d, #0e0241) !important;
     color: white !important;
 }

 .user-info .user-name,
 .designattion {
     color: white !important;

 }


 table tbody tr td {
     transition: all 0.2s ease-in-out !important;
 }

 .btn {
     --bs-btn-padding-x: 0.5rem;
     --bs-btn-padding-y: 0.3rem;
 }

 .form-control {
     padding: .375rem .25rem;
 }

 table tbody tr:hover td {
     background-color: #f1f5ff !important;
 }

 @media (min-width: 1200px) {
     .modal-xl {
         --bs-modal-width: 1377px;
     }
 }

 .card {
     transition: all 0.2s ease-in-out;
 }

 /* .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
} */
 /* Colors */
 .tag {
     display: inline-block;
     padding: 2px 5px;
     font-size: 12px;
     font-weight: 600;
     border-radius: 2px;
     border-radius: 6px;
     margin-right: 0px;
     margin-bottom: 2px;
     white-space: nowrap;
 }

 .tag-green {
     background: #e8f6f1;
     color: #479f72;
 }

 .tag-primary {
     background: #e9effd;
     color: #376cec;
 }

 .tag-dark {
     background: #e7e7e7;
     color: #727474;
 }

 .tag-purple {
     background: #f3edfd;
     color: #7c45ee;
 }

 .tag-warning {
     background: #fff5cb;
     color: #b9a12d;
 }

 .btn-success {
     color: #fff;
     background-color: #008000;
     border-color: #008000;
 }

 span.badge.badge-success {
     background: #05966917;
     border: #05966917;
     color: #059669;
 }

 span.badge.badge-danger {
     background: #fcebeb;
     color: #df266c;
 }

 div#TablePagination {
     margin-top: 1rem;
 }

 .dropdown-menu {
     --bs-dropdown-min-width: 5rem;
 }

 th {
     white-space: nowrap;
     /* stop text going to next line */
     vertical-align: middle;
 }

 th i {
     display: inline-block;
     margin-right: 2px;
     vertical-align: middle;
 }

 th span {
     vertical-align: middle;
 }

 tbody,
 td,
 tfoot,
 th,
 thead,
 tr {
     border-style: none;
 }

 .telemetry-header {
     background: linear-gradient(90deg, #f8f9fa, #ffffff);
     border: 1px solid #eee;
 }

 .telemetry-tabs .nav-link {
     font-weight: 600;
     color: #444;
     border: none !important;
     border-radius: 10px 10px 0 0;
     padding: 10px 16px;
     transition: 0.2s;
 }

 .telemetry-tabs .nav-link:hover {
     background: #f4f6ff;
     color: #0d6efd;
 }

 .telemetry-tabs .nav-link.active {
     background: #0c6ffd;
     color: #fff !important;
     box-shadow: 0px 4px 10px rgba(13, 110, 253, 0.25);
 }

 .telemetry-tabs .nav-link.active i {
     color: #fff !important;
 }

 .telemetry-content {
     border: 1px solid #eee;
     border-top: none;
     border-radius: 0 0 12px 12px;
     background: #fff;
     padding: 15px;
 }

 .tab-icon i {
     font-size: 18px;
 }

 .tab-scroll {
     overflow-x: auto;
     white-space: nowrap;
     scrollbar-width: thin;
 }

 .tab-scroll::-webkit-scrollbar {
     height: 5px;
 }

 .tab-scroll::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 10px;
 }