@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 :root {
   --default-font: "Poppins", sans-serif;
   --heading-font: "Poppins", sans-serif;
   --nav-font: "Poppins", sans-serif;
 }

 :root {
   --background-color: #ffffff;
   /* Background color for the entire website, including individual sections */
   --default-color: #35211f;
   /* Default color used for the majority of the text content across the entire website */
   --heading-color: #200f0d;
   /* Color for headings, subheadings and title throughout the website */
   --accent-color: #2755b0;
   /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
   --accent-color-2: #fff500;
   --landing-blue: #12229d;
   --surface-color: #ffffff;
   /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
   --contrast-color: #ffffff;
   /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
   --bdr: rgba(120, 180, 160, .10);
   --bdr2: rgba(120, 180, 160, .18);
   --bdr3: rgba(120, 180, 160, .28);
   --bg: #fcfcfc;
   --bg2: #f1f3f5;
   --bg3: #fbfbfc;
   --bg4: #f6f7f8;
   /* --card:#182435;--card2:#1D2C40;--card3:#22334A;--card4:#283D56; */
   /* --bdr:rgba(120,180,160,.10);--bdr2:rgba(120,180,160,.18);--bdr3:rgba(120,180,160,.28); */
   /* --ink:#E8F2EE;--ink2:#B8D4CC;--ink3:#7AA898;--ink4:#3D6058;
  --teal:#2DD4A8;--tdim:rgba(45,212,168,.10);--tbdr:rgba(45,212,168,.25);--tdeep:#1A9C7C;
  --gold:#E8B84B;--gdim:rgba(232,184,75,.10);--gbdr:rgba(232,184,75,.25);
  --rose:#E86A5A;--rdim:rgba(232,106,90,.10);--rbdr:rgba(232,106,90,.25);
  --sky:#5AADE8;--sdim:rgba(90,173,232,.10);--sbdr:rgba(90,173,232,.22);
  --violet:#9B7EE8;--vdim:rgba(155,126,232,.10);--vbdr:rgba(155,126,232,.22);
  --green:#3EC87A;--gndim:rgba(62,200,122,.10);--gnbdr:rgba(62,200,122,.22); */

 }

 body {
   font-size: 13px;
   line-height: 23px;
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   background-color: #f5f6f8;
 }

 .mid-clr {
   color: #FF0000;
 }

 .note-popover.popover {
   display: none !important;
 }

 .select2-container--default .select2-selection--single {
   border: 1px solid #dddddd !important;
   min-height: 39px !important;
   padding: 0px !important;
 }


 .select2-container--default .select2-selection--multiple {
   padding: 4px !important;
 }

 .select2-container {
   width: 100% !important;
 }

 .Zebra_DatePicker_Icon_Wrapper {
   width: 100% !important;
 }


 .table .thead-light th {
   /* color: #ffffff !important;
   background: linear-gradient(90deg, rgba(56,71,117,1) 26%, rgba(25,42,89,1) 65%) !important;
    border-color: #f5f6f8 !important; */
 }

 .page-item.active .page-link {
   background-color: #577fa8 !important;
   border-color: #577fa8 !important;
 }


 .table-bordered td,
 .table-bordered th {
   border: 1px solid #cdd2db !important;
 }

 table td {
   padding: 5px !important;

 }

 .Zebra_Tooltip .Zebra_Tooltip_Message {
   background: #479a74 !important;
 }

 .Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Bottom div {
   border-color: #479a74 transparent transparent !important;
 }


 /*.note-popover .popover-content .note-color-palette, .panel-heading.note-toolbar .note-color-palette {
    line-height: 1;
    width: 100%;
    display: inline-flex;
}*/

 .note-editor .btn-group,
 .btn-group-vertical {
   display: inline-block !important;
 }


 .strikeout {
   background-color: #ff000047 !important;
   color: #fff !important;
   pointer-events: none;
 }



 .note-popover .popover-content .dropdown-menu.note-check li a i,
 .panel-heading.note-toolbar .dropdown-menu.note-check li a i {
   visibility: visible !important;
 }


 .Zebra_Tooltip .Zebra_Tooltip_Message {
   max-width: 500px !important;
 }

 .Zebra_Tooltip {
   width: auto !important;
 }


 ::-webkit-scrollbar-thumb {
   background: #4f5d70;
   border-radius: 4px;
 }

 ::-webkit-scrollbar-track-piece {
   /* background: #ccc;*/
 }

 ::-webkit-scrollbar {
   width: 7px;

 }





 /*--------------------------------------------CSS from CRM------------------------------------------*/

 .apexcharts-canvas {
   position: relative;
   user-select: none;
   /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
 }

 /* scrollbar is not visible by default for legend, hence forcing the visibility */
 .apexcharts-canvas ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 6px;
 }

 .apexcharts-canvas ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0, 0, 0, .5);
   box-shadow: 0 0 1px rgba(255, 255, 255, .5);
   -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
 }

 .apexcharts-canvas.apexcharts-theme-dark {
   background: #343F57;
 }

 .apexcharts-inner {
   position: relative;
 }

 .legend-mouseover-inactive {
   transition: 0.15s ease all;
   opacity: 0.20;
 }

 .apexcharts-series-collapsed {
   opacity: 0;
 }

 .apexcharts-gridline,
 .apexcharts-text,
 .apexcharts-annotation-rect {
   pointer-events: none;
 }

 .apexcharts-tooltip {
   border-radius: 5px;
   box-shadow: 2px 2px 6px -4px #999;
   cursor: default;
   font-size: 14px;
   left: 62px;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   top: 20px;
   overflow: hidden;
   white-space: nowrap;
   z-index: 12;
   transition: 0.15s ease all;
 }

 .apexcharts-tooltip.apexcharts-theme-light {
   border: 1px solid #e3e3e3;
   background: rgba(255, 255, 255, 0.96);
 }

 .apexcharts-tooltip.apexcharts-theme-dark {
   color: #fff;
   background: rgba(30, 30, 30, 0.8);
 }

 .apexcharts-tooltip * {
   font-family: inherit;
 }

 .apexcharts-tooltip .apexcharts-marker,
 .apexcharts-area-series .apexcharts-area,
 .apexcharts-line {
   pointer-events: none;
 }

 .apexcharts-tooltip.apexcharts-active {
   opacity: 1;
   transition: 0.15s ease all;
 }

 .apexcharts-tooltip-title {
   padding: 6px;
   font-size: 15px;
   margin-bottom: 4px;
 }

 .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
   background: #ECEFF1;
   border-bottom: 1px solid #ddd;
 }

 .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
   background: rgba(0, 0, 0, 0.7);
   border-bottom: 1px solid #333;
 }

 .apexcharts-tooltip-text-value,
 .apexcharts-tooltip-text-z-value {
   display: inline-block;
   font-weight: 600;
   margin-left: 5px;
 }

 .apexcharts-tooltip-text-z-label:empty,
 .apexcharts-tooltip-text-z-value:empty {
   display: none;
 }

 .apexcharts-tooltip-text-value,
 .apexcharts-tooltip-text-z-value {
   font-weight: 600;
 }

 .apexcharts-tooltip-marker {
   width: 12px;
   height: 12px;
   position: relative;
   top: 0px;
   margin-right: 10px;
   border-radius: 50%;
 }

 .apexcharts-tooltip-series-group {
   padding: 0 10px;
   display: none;
   text-align: left;
   justify-content: left;
   align-items: center;
 }

 .apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
   opacity: 1;
 }

 .apexcharts-tooltip-series-group.apexcharts-active,
 .apexcharts-tooltip-series-group:last-child {
   padding-bottom: 4px;
 }

 .apexcharts-tooltip-series-group-hidden {
   opacity: 0;
   height: 0;
   line-height: 0;
   padding: 0 !important;
 }

 .apexcharts-tooltip-y-group {
   padding: 6px 0 5px;
 }

 .apexcharts-tooltip-candlestick {
   padding: 4px 8px;
 }

 .apexcharts-tooltip-candlestick>div {
   margin: 4px 0;
 }

 .apexcharts-tooltip-candlestick span.value {
   font-weight: bold;
 }

 .apexcharts-tooltip-rangebar {
   padding: 5px 8px;
 }

 .apexcharts-tooltip-rangebar .category {
   font-weight: 600;
   color: #777;
 }

 .apexcharts-tooltip-rangebar .series-name {
   font-weight: bold;
   display: block;
   margin-bottom: 5px;
 }

 .apexcharts-xaxistooltip {
   opacity: 0;
   padding: 9px 10px;
   pointer-events: none;
   color: #373d3f;
   font-size: 13px;
   text-align: center;
   border-radius: 2px;
   position: absolute;
   z-index: 10;
   background: #ECEFF1;
   border: 1px solid #90A4AE;
   transition: 0.15s ease all;
 }

 .apexcharts-xaxistooltip.apexcharts-theme-dark {
   background: rgba(0, 0, 0, 0.7);
   border: 1px solid rgba(0, 0, 0, 0.5);
   color: #fff;
 }

 .apexcharts-xaxistooltip:after,
 .apexcharts-xaxistooltip:before {
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
 }

 .apexcharts-xaxistooltip:after {
   border-color: rgba(236, 239, 241, 0);
   border-width: 6px;
   margin-left: -6px;
 }

 .apexcharts-xaxistooltip:before {
   border-color: rgba(144, 164, 174, 0);
   border-width: 7px;
   margin-left: -7px;
 }

 .apexcharts-xaxistooltip-bottom:after,
 .apexcharts-xaxistooltip-bottom:before {
   bottom: 100%;
 }

 .apexcharts-xaxistooltip-top:after,
 .apexcharts-xaxistooltip-top:before {
   top: 100%;
 }

 .apexcharts-xaxistooltip-bottom:after {
   border-bottom-color: #ECEFF1;
 }

 .apexcharts-xaxistooltip-bottom:before {
   border-bottom-color: #90A4AE;
 }

 .apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
   border-bottom-color: rgba(0, 0, 0, 0.5);
 }

 .apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
   border-bottom-color: rgba(0, 0, 0, 0.5);
 }

 .apexcharts-xaxistooltip-top:after {
   border-top-color: #ECEFF1
 }

 .apexcharts-xaxistooltip-top:before {
   border-top-color: #90A4AE;
 }

 .apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
   border-top-color: rgba(0, 0, 0, 0.5);
 }

 .apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
   border-top-color: rgba(0, 0, 0, 0.5);
 }

 .apexcharts-xaxistooltip.apexcharts-active {
   opacity: 1;
   transition: 0.15s ease all;
 }

 .apexcharts-yaxistooltip {
   opacity: 0;
   padding: 4px 10px;
   pointer-events: none;
   color: #373d3f;
   font-size: 13px;
   text-align: center;
   border-radius: 2px;
   position: absolute;
   z-index: 10;
   background: #ECEFF1;
   border: 1px solid #90A4AE;
 }

 .apexcharts-yaxistooltip.apexcharts-theme-dark {
   background: rgba(0, 0, 0, 0.7);
   border: 1px solid rgba(0, 0, 0, 0.5);
   color: #fff;
 }

 .apexcharts-yaxistooltip:after,
 .apexcharts-yaxistooltip:before {
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
 }

 .apexcharts-yaxistooltip:after {
   border-color: rgba(236, 239, 241, 0);
   border-width: 6px;
   margin-top: -6px;
 }

 .apexcharts-yaxistooltip:before {
   border-color: rgba(144, 164, 174, 0);
   border-width: 7px;
   margin-top: -7px;
 }

 .apexcharts-yaxistooltip-left:after,
 .apexcharts-yaxistooltip-left:before {
   left: 100%;
 }

 .apexcharts-yaxistooltip-right:after,
 .apexcharts-yaxistooltip-right:before {
   right: 100%;
 }

 .apexcharts-yaxistooltip-left:after {
   border-left-color: #ECEFF1;
 }

 .apexcharts-yaxistooltip-left:before {
   border-left-color: #90A4AE;
 }

 .apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
   border-left-color: rgba(0, 0, 0, 0.5);
 }

 .apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
   border-left-color: rgba(0, 0, 0, 0.5);
 }

 .apexcharts-yaxistooltip-right:after {
   border-right-color: #ECEFF1;
 }

 .apexcharts-yaxistooltip-right:before {
   border-right-color: #90A4AE;
 }

 .apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
   border-right-color: rgba(0, 0, 0, 0.5);
 }

 .apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
   border-right-color: rgba(0, 0, 0, 0.5);
 }

 .apexcharts-yaxistooltip.apexcharts-active {
   opacity: 1;
 }

 .apexcharts-yaxistooltip-hidden {
   display: none;
 }

 .apexcharts-xcrosshairs,
 .apexcharts-ycrosshairs {
   pointer-events: none;
   opacity: 0;
   transition: 0.15s ease all;
 }

 .apexcharts-xcrosshairs.apexcharts-active,
 .apexcharts-ycrosshairs.apexcharts-active {
   opacity: 1;
   transition: 0.15s ease all;
 }

 .apexcharts-ycrosshairs-hidden {
   opacity: 0;
 }

 .apexcharts-zoom-rect {
   pointer-events: none;
 }

 .apexcharts-selection-rect {
   cursor: move;
 }

 .svg_select_points,
 .svg_select_points_rot {
   opacity: 0;
   visibility: hidden;
 }

 .svg_select_points_l,
 .svg_select_points_r {
   cursor: ew-resize;
   opacity: 1;
   visibility: visible;
   fill: #888;
 }

 .apexcharts-canvas.apexcharts-zoomable .hovering-zoom {
   cursor: crosshair
 }

 .apexcharts-canvas.apexcharts-zoomable .hovering-pan {
   cursor: move
 }

 .apexcharts-zoom-icon,
 .apexcharts-zoomin-icon,
 .apexcharts-zoomout-icon,
 .apexcharts-reset-icon,
 .apexcharts-pan-icon,
 .apexcharts-selection-icon,
 .apexcharts-menu-icon,
 .apexcharts-toolbar-custom-icon {
   cursor: pointer;
   width: 20px;
   height: 20px;
   line-height: 24px;
   color: #6E8192;
   text-align: center;
 }

 .apexcharts-zoom-icon svg,
 .apexcharts-zoomin-icon svg,
 .apexcharts-zoomout-icon svg,
 .apexcharts-reset-icon svg,
 .apexcharts-menu-icon svg {
   fill: #6E8192;
 }

 .apexcharts-selection-icon svg {
   fill: #444;
   transform: scale(0.76)
 }

 .apexcharts-theme-dark .apexcharts-zoom-icon svg,
 .apexcharts-theme-dark .apexcharts-zoomin-icon svg,
 .apexcharts-theme-dark .apexcharts-zoomout-icon svg,
 .apexcharts-theme-dark .apexcharts-reset-icon svg,
 .apexcharts-theme-dark .apexcharts-pan-icon svg,
 .apexcharts-theme-dark .apexcharts-selection-icon svg,
 .apexcharts-theme-dark .apexcharts-menu-icon svg,
 .apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
   fill: #f3f4f5;
 }

 .apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
 .apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
 .apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
   fill: #008FFB;
 }

 .apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
 .apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
 .apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
 .apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
 .apexcharts-theme-light .apexcharts-reset-icon:hover svg,
 .apexcharts-theme-light .apexcharts-menu-icon:hover svg {
   fill: #333;
 }

 .apexcharts-selection-icon,
 .apexcharts-menu-icon {
   position: relative;
 }

 .apexcharts-reset-icon {
   margin-left: 5px;
 }

 .apexcharts-zoom-icon,
 .apexcharts-reset-icon,
 .apexcharts-menu-icon {
   transform: scale(0.85);
 }

 .apexcharts-zoomin-icon,
 .apexcharts-zoomout-icon {
   transform: scale(0.7)
 }

 .apexcharts-zoomout-icon {
   margin-right: 3px;
 }

 .apexcharts-pan-icon {
   transform: scale(0.62);
   position: relative;
   left: 1px;
   top: 0px;
 }

 .apexcharts-pan-icon svg {
   fill: #fff;
   stroke: #6E8192;
   stroke-width: 2;
 }

 .apexcharts-pan-icon.apexcharts-selected svg {
   stroke: #008FFB;
 }

 .apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
   stroke: #333;
 }

 .apexcharts-toolbar {
   position: absolute;
   z-index: 11;
   top: 0px;
   right: 3px;
   max-width: 176px;
   text-align: right;
   border-radius: 3px;
   padding: 0px 6px 2px 6px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .apexcharts-toolbar svg {
   pointer-events: none;
 }

 .apexcharts-menu {
   background: #fff;
   position: absolute;
   top: 100%;
   border: 1px solid #ddd;
   border-radius: 3px;
   padding: 3px;
   right: 10px;
   opacity: 0;
   min-width: 110px;
   transition: 0.15s ease all;
   pointer-events: none;
 }

 .apexcharts-menu.apexcharts-menu-open {
   opacity: 1;
   pointer-events: all;
   transition: 0.15s ease all;
 }

 .apexcharts-menu-item {
   padding: 6px 7px;
   font-size: 12px;
   cursor: pointer;
 }

 .apexcharts-theme-light .apexcharts-menu-item:hover {
   background: #eee;
 }

 .apexcharts-theme-dark .apexcharts-menu {
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
 }

 @media screen and (min-width: 768px) {
   .apexcharts-canvas:hover .apexcharts-toolbar {
     opacity: 1;
   }
 }

 .apexcharts-datalabel.apexcharts-element-hidden {
   opacity: 0;
 }

 .apexcharts-pie-label,
 .apexcharts-datalabels,
 .apexcharts-datalabel,
 .apexcharts-datalabel-label,
 .apexcharts-datalabel-value {
   cursor: default;
   pointer-events: none;
 }

 .apexcharts-pie-label-delay {
   opacity: 0;
   animation-name: opaque;
   animation-duration: 0.3s;
   animation-fill-mode: forwards;
   animation-timing-function: ease;
 }

 .apexcharts-canvas .apexcharts-element-hidden {
   opacity: 0;
 }

 .apexcharts-hide .apexcharts-series-points {
   opacity: 0;
 }

 .apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
 .apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
 .apexcharts-radar-series path,
 .apexcharts-radar-series polygon {
   pointer-events: none;
 }

 /* markers */

 .apexcharts-marker {
   transition: 0.15s ease all;
 }

 @keyframes opaque {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 /* Resize generated styles */
 @keyframes resizeanim {
   from {
     opacity: 0;
   }

   to {
     opacity: 0;
   }
 }

 .resize-triggers {
   animation: 1ms resizeanim;
   visibility: hidden;
   opacity: 0;
 }

 .resize-triggers,
 .resize-triggers>div,
 .contract-trigger:before {
   content: " ";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   overflow: hidden;
 }

 .resize-triggers>div {
   background: #eee;
   overflow: auto;
 }

 .contract-trigger:before {
   width: 200%;
   height: 200%;
 }

 .todaysQuery {
   background: rgb(93, 90, 86);
   background: linear-gradient(90deg, rgba(93, 90, 86, 1) 27%, rgba(9, 9, 9, 1) 65%);
 }

 /* .text-center span {
   color: #FFFFFF !important;
 } */

 .text-center p {
   /* color: #FFFFFF !important; */
 }

 .yesterdayQuery {
   background: rgb(194, 33, 169);
   background: linear-gradient(90deg, rgba(194, 33, 169, 0.4431897759103641) 26%, rgba(255, 0, 0, 1) 69%);
 }

 .thisMonthQuery {
   background: rgb(34, 155, 222);
   background: linear-gradient(90deg, rgba(34, 155, 222, 1) 30%, rgba(15, 52, 255, 1) 57%);
 }

 .confirmedQuery {
   background: rgb(92, 222, 34);
   background: linear-gradient(90deg, rgba(92, 222, 34, 1) 13%, rgba(40, 147, 41, 1) 57%);
 }

 .invoice {
   background: rgb(142, 112, 136);
   background: linear-gradient(90deg, rgba(142, 112, 136, 1) 27%, rgba(101, 15, 83, 1) 69%);
 }

 .voucher {
   background: rgb(245, 185, 1);
   background: linear-gradient(90deg, rgba(245, 185, 1, 1) 27%, rgba(255, 153, 94, 1) 65%);
 }

 .masterdatacls {
   width: 43rem !important;
   left: -188px !important;
   z-index: 999;
   font-size: 14px;
 }

 .masterdatacls .col-lg-4 {
   padding: 0px 1px;
   border-bottom: 1px solid #dddddd87;
   border-right: 1px solid #dddddd87;
 }

 .qbox {
   position: relative;
   top: 2px;
 }

 .page-content {
   padding-top: 106px !important;
 }

 .newquerybox {
   background-color: #fff;
   padding: 15px;
   border-radius: 10px;
   margin-bottom: 20px;
   position: relative;
   /*	box-shadow: 46px -12px 45px #0000000a; */
   box-shadow: 0 10px 20px rgb(0 0 0 / 8%);
 }

 .newquerybox h2 {
   font-weight: 700;
   color: #000;
   font-size: 25px;
 }

 .newquerybox .numbox {
   font-weight: 600;
   color: #000;
 }

 .totalqbbtn {
   position: absolute;
   top: 10px;
   right: 10px;
   border-radius: 50px;
   background-color: #0098af;
   padding: 2px 12px;
   font-size: 12px;
   font-weight: 700;
   color: #fff;
 }

 .monthbox {
   display: flex;
   gap: 5px;
 }

 .welcome-container {
   background: white;
   padding: 20px;
   border-radius: 10px;
   margin: 20px 0px;
   position: relative;
   margin-top: 30px;
   box-shadow: 0 10px 20px rgb(0 0 0 / 4%);
 }

 .logo-container {
   position: absolute;
   top: -50px;
   left: 50%;
   transform: translateX(-50%);
   background: white;
   border-radius: 50%;
   padding: 10px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   border: 1px solid #2456b0;
 }

 .logo-container img {
   width: 87px;
   height: 87px;
   object-fit: contain;
 }

 .text-section {
   text-align: center;
   margin-top: 55px;
   text-align: center;
 }

 .text-section h2 {
   margin: 5px 0;
   font-size: 25px;
   font-weight: 700;
   color: #000;
   margin-top: -10px;
   text-transform: capitalize;
 }

 .text-section p {
   margin: 0;
   font-size: 13px;
   font-weight: 600;
 }

 .datetime {
   font-size: 14px;
   color: #333;
   font-weight: 600;
   position: absolute;
   right: 20px;
   bottom: 13px;
 }

 .newcard {
   background: white;
   border-radius: 12px;
   overflow: hidden;
   width: 100%;
   height: -webkit-fill-available;
   margin-bottom: 20px;
   box-shadow: 0 10px 20px rgb(0 0 0 / 8%);
 }

 .newcard-header {
   padding: 20px;
   border-bottom: 1px solid #ccc;
   font-size: 22px;
   font-weight: 500;
   color: #000;
 }

 #statusChart {
   width: 100% !important;
   height: 272px !important;
   object-fit: contain;
 }

 #monthChart {
   width: 100% !important;
   height: 272px !important;
   object-fit: contain;
   padding: 10px;
 }

 .newcard-header2 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px;
   border-bottom: 1px solid #ccc;
   font-size: 14px;
   font-weight: 700;
   color: #000;
 }

 .newcard-header2 h3 {
   margin: 0;
   font-size: 14px;
   font-weight: 700;
   color: #000;
 }

 .newcard-header2 button {
   background: #2456b0;
   color: white;
   border: none;
   padding: 4px 16px;
   border-radius: 6px;
   cursor: pointer;
   font-weight: 600;
   font-size: 11px;
   border-radius: 50px;
 }

 .chart-section {
   display: flex;
   align-items: center;
   margin-top: 20px;
 }

 .legend {
   margin-left: 20px;
   font-size: 14px;
 }

 .legend-item {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
 }

 .legend-color {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   margin-right: 8px;
 }

 .desc {
   margin-top: 15px;
   font-size: 13px;
   color: #666;
 }

 .qbox h4 {
   font-size: 14px;
   font-weight: 700;
   color: #000;
   margin-bottom: 0px;
 }

 .newcard p {
   padding: 15px;
   font-weight: 500;
   color: #000;
 }

 .qbox span {
   font-size: 12px;
   font-weight: 500;
   margin-bottom: 0px;
 }

 .call-logs {
   padding: 15px;
   display: grid;
   grid-template-columns: auto auto;
   gap: 10px;
 }

 .cbox {
   background: #f8f8f8;
   padding: 10px;
   font-size: 12px;
   font-weight: 600;
   color: #000;
   border-radius: 10px;
 }

 .swiper-button-next {
   height: fit-content;
 }

 .swiper-button-prev {
   height: fit-content;
 }

 .swiper-button-prev:after {
   position: absolute;
   left: -23px !important;
 }

 .swiper-container {
   height: 260px;
 }

 .swiper-wrapper+div {
   width: 50px;
   position: absolute;
   right: 11px;
 }

 .swiper-button-next:after,
 .swiper-button-prev:after {
   font-size: 9px;
   color: #fff;
   width: 20px;
   height: 20px;
   background: #2751a7;
   border-radius: 50px;
   line-height: 20px;
   text-align: center;
   font-weight: 700;
   bottom: -110px;
   align-items: end;
   position: absolute;
   bottom: -11px !important;
 }

 .donutcard canvas {
   width: 100%;
   height: 241px;
   margin: auto;
   object-fit: contain;
 }

 #chartNew,
 #chartProgress,
 #chartInterested,
 #chartClosed,
 #funnelChart {
   height: 280px !important;
   padding: 10px;
 }

 .monthbox i {
   background: #000;
   width: 20px;
   height: 20px;
   background: #000;
   color: #fff;
   border-radius: 6px;
   display: inline-block;
   font-size: 14px;
   font-weight: 800;
   text-align: center;
   line-height: 20px;
 }

 .white-back {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   background: #fff;
 }

 .simple blockquote p {
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   color: #1e528e;
   padding: 25px;
   font-size: 1.25em;
   font-style: italic;
   text-align: center;
 }

 .simple cite {
   font-size: 1em;
   float: right;
   font-style: normal;
   color: #1e528e;
 }

 .simple cite a {
   color: #2d91c2;
   font-style: italic;
   text-decoration: none;
   font-size: 0.85em;
 }

 .simple cite a:hover {
   color: #00b4cc;
 }


 /* Bubble Slider */

 .bubble blockquote {
   margin: 10px 10px 0;
   background: #fff;
   padding: 60px;
   position: relative;
   border: none;
   border-radius: 8px;
   font-size: 1.25em;
   color: #1e528e;
 }

 .bubble blockquote:before,
 .bubble blockquote:after {
   content: "\201C";
   position: absolute;
   font-size: 80px;
   padding: 10px;
   line-height: 1;
   color: #1e528e;
 }

 .bubble blockquote:before {
   top: 0;
   left: 10px;
 }

 .bubble blockquote:after {
   content: "\201D";
   right: 10px;
   bottom: -0.5em;
 }

 .bubble div {
   width: 0;
   height: 0;
   border-left: 0 solid transparent;
   border-right: 20px solid transparent;
   border-top: 20px solid #fff;
   margin: 0 0 0 60px;
   margin-bottom: 10px;
 }

 .bubble cite {
   padding-left: 20px;
   font-size: 1.25em;
   color: #f7f7f7;
 }

 .swal2-container .swal2-title {
   font-size: 16px !important;
 }

 /* .swal2-confirm{ 
    width: 100% !important; 
    padding: 5px 10px !important; 
    border: unset !important; 
    background-color: #d15151 !important; 
	 } */
 .notificationmain {
   position: fixed;
   bottom: 10px;
   right: 20px;
 }

 .notificationchild {
   background-color: #fd7b01;
   color: #ffffff;
   font-size: 14px;
   padding: 10px 30px;
   border-radius: 4px;
   cursor: pointer;
   margin-bottom: 5px;
   position: relative;
 }

 .notificationclose {
   position: absolute;
   right: 4px;
   color: #fff;
   font-size: 12px;
   cursor: pointer;
   top: 2px;
 }

 .clrorng {
   color: #ff6a00 !important;
 }

 .footTitle {
   white-space: nowrap;
   margin: 0px 3px;
   text-transform: uppercase;
   cursor: pointer;
   border-radius: 3px;
   text-align: center;
   width: fit-content;
   display: inline-flex;
   padding: 5px 10px;
   color: #ffffff !important;
   background: linear-gradient(90deg, rgba(56, 71, 117, 1) 26%, rgba(25, 42, 89, 1) 65%) !important;
   border-color: #f5f6f8 !important;
   font-size: 11px;
 }

 .right-box,
 .right-box2 {
   position: fixed;
   top: 0px;
   z-index: 99999;
   right: 0;
   background-color: #fff;
   width: 500px;
   color: #000;
   height: 100%;
   box-shadow: 0px 0px 5px 1px #253564;
   border-radius: 4px;
   display: none;
 }

 .right-box-title {
   font-weight: 700;
   background: linear-gradient(90deg, rgba(56, 71, 117, 1) 26%, rgba(25, 42, 89, 1) 65%) !important;
   color: #fff;
   padding: 12px;
   font-size: 16px;
   position: relative;
 }

 #close-box {
   position: absolute;
   right: 10px;
   top: 10px;
   cursor: pointer;
 }

 #right-box-body {
   padding: 3px 20px;
   margin-bottom: 30px;
 }

 #box-title {
   text-transform: uppercase;
 }

 .boxcls {
   box-shadow: 0px 0px 4px 0px #626262;
   background-color: #303744;
 }

 .boxcls h4 {
   padding-left: 20px;
   color: #fff;
   padding-top: 10px;
 }

 .querystatuscls .charts-div text {
   fill: #000000 !important;
 }

 #top_ten_agents .highcharts-container .highcharts-root .highcharts-credits {
   display: none;
 }

 #sales_expense svg g text {
   fill: #ffffff !important;
 }


 .google-visualization-tooltip {
   background-color: #fff !important;
   color: #000 !important;

 }


 .highcharts-button-symbol {
   display: none;
 }

 .highcharts-button {
   display: none;
 }

 .querynocls .card {
   margin-bottom: 0px;
 }

 .querynocls .card-body {
   -webkit-box-flex: 1;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 1px;
   padding: 4px;
 }

 .querystatuscls .charts-div text {
   fill: #fff !important;
 }

 .apexcharts-legend-text {
   color: #fff !important;
 }





 .swiper {
   width: 100%;
   height: 100%;
 }

 .swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #444;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 /* css*/
 testi-slider.owl-carousel .owl-nav button.owl-prev,
 .owl-carousel .owl-nav button.owl-next {
   /* Add your custom styles here */
   background-color: skyblue;
   color: white;
   border-radius: 50%
     /* etc. */
 }



 .testi-slider {
   position: relative !important;
 }

 .testi-slider .owl-theme .owl-nav {
   position: absolute !important;
   right: 20px !important;
   bottom: 0px !important;
   display: flex;
 }

 .testi-slider .owl-carousel .owl-nav button.owl-prev,
 .testi-slider .owl-carousel .owl-nav button.owl-next {
   background: #2856b1 !important;
   width: 25px;
   height: 25px;
   color: #f0eeee;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
 }

 .testi-slider .owl-carousel .owl-nav button.owl-prev span,
 .testi-slider .owl-carousel .owl-nav button.owl-next span {
   font-size: 24px;
   display: contents;
 }

 /* =============================================================================================================== */

 .hamburger-menu {
   position: fixed;
   top: 0;
   left: 0;
   padding-top: 20px;
   padding-left: 15px;
   width: 100%;
   height: 43px;
   cursor: pointer;
   z-index: 9998;
   background: #EBEBEB;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }


 .bar,
 .bar:after,
 .bar:before {
   width: 30px;
   height: 3px;
 }

 .bar {
   position: relative;
   transform: translateY(10px);
   background: black;
   transition: all 0ms 300ms;
 }

 .bar.animate {
   background: rgba(255, 255, 255, 0);
 }

 .bar:before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 10px;
   background: black;
   transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }

 .bar:after {
   content: "";
   position: absolute;
   left: 0;
   top: 10px;
   background: black;
   transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }

 .bar.animate:after {
   top: 0;
   transform: rotate(45deg);
   transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }

 .bar.animate:before {
   bottom: 0;
   transform: rotate(-45deg);
   transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }


 .mobile-menu ul {
   margin: 0;
   padding: 0;
 }

 .mobile-menu li {
   font-size: 20px;
   line-height: 30px;
   margin: 0;
   overflow: hidden;
   padding: 5px;
   position: relative;
   text-align: left;
   text-transform: uppercase;
   padding-left: 15px;
 }

 .mobile-menu li:first-child {
   margin-top: 70px;
 }

 .mobile-menu li:hover {
   background: #CCCCCC;
 }

 .mobile-menu li a {
   text-decoration: none;
   color: black;
 }

 /*---------------------
Mobiles Menu - Slide IN 
----------------------*/
 .mobile-menu {
   top: 0;
   max-width: 250px;
   left: -100%;
   width: 100%;
   background: #EBEBEB;
   color: black;
   height: 100%;
   position: fixed;
   z-index: 9997;
   overflow-y: auto;
   -webkit-transform: translate3d(0, 0, 205px);
   -moz-transform: translate3d(0, 0, 205px);
   transform: translate3d(0, 0, 205px);
   -webkit-transition: all 500ms ease-in-out;
   -moz-transition: all 500ms ease-in-out;
   transition: all 500ms ease-in-out;
 }

 .mobile-menu.active {
   left: 0;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: all 500ms ease-in-out;
   -moz-transition: all 500ms ease-in-out;
   transition: all 500ms ease-in-out;
 }

 /*---------------------
Mobiles Menu - Dropdown Submenu
----------------------*/
 .has-children:hover {
   cursor: hand;
 }

 .children {
   display: none;
 }

 .mobile-menu .children li:first-child {
   margin-top: 0px;
 }

 .icon-arrow {
   position: absolute;
   display: block;
   font-size: 0.7em;
   color: black;
   top: 5px;
   right: 10px;
   transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   transition: 0.6s;
   -webkit-transition: 0.6s;
   -moz-transition: 0.6s;
 }

 .icon-arrow:after {
   content: "▼";
 }

 .icon-arrow.open {
   transform: rotate(-180deg);
   -webkit-transform: rotate(-180deg);
   -moz-transform: rotate(-180deg);
   transition: 0.6s;
   -webkit-transition: 0.6s;
   -moz-transition: 0.6s;
 }

 /* ======================================GRAPH================================ */
 /* .chart {
  border: 3px solid royalblue;
} */

 @import "compass/css3";

 * {
   box-sizing: border-box;
 }

 .chart {
   width: 50%;
   height: 20em;
   position: relative;
   background: #EDEDED;
   margin: 4em auto;
   max-width: 300px;
   position: relative;
   text-align: center;
   color: #FFF;
 }

 .chart__list {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 .chart__list__item {
   width: 25%;
   float: left;
   background: red;
   position: absolute;
   bottom: 0;
   padding: 20px 0;
   height: 0;
   transition: height 750ms ease;
 }

 .chart__list__item--1 {
   left: 0;
   background: #FAAA67;
 }

 .chart__list__item--2 {
   left: 25%;
   background: #C25439;
 }

 .chart__list__item--3 {
   left: 50%;
   background: #2B2B33;
 }

 .chart__list__item--4 {
   right: 0;
   background: #3C4756;
 }





 .chart-container {
   /* background-color: #ffffff; */
   padding: 30px;
   border-radius: 10px;
   /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
   text-align: center;
   max-width: 600px;
   width: 90%;
 }

 h2 {
   color: #333;
   margin-bottom: 20px;
 }

 #funnel-chart {
   display: block;
   margin: 0 auto;
 }

 .label-text {
   font-size: 14px;
   font-weight: bold;
   fill: #333;
 }

 .value-text {
   font-size: 14px;
   fill: #555;
 }

 /* Optional hover effect for better user interaction */
 .funnel-segment:hover {
   opacity: 0.8;
   cursor: pointer;
 }


 #chartContainer {
   /* width: 250px; */
   height: 300px;
 }

 .new-container button a {
   color: white;
 }

 /* .landings .Filter_input input{
  width: 0% !important;
 } */

 .Filter_input input,
 /* .Filter_input button, */
 .Filter_input select {
   width: 100%;
   align-self: center;
   border-radius: 6px;
   color: #474747;
   font-size: 13px;
   border: none;
   padding: 10px 20px;
   height: 55px;
   margin: 0px;
 }

 .Filter_input button {
   color: #fff
 }


 .form {
   width: 100%;
 }

 .btnq {
   border-radius: 50px;
   background-color: #2456b0;
   color: white;
   height: 30px;
 }

 .statu {
   padding: 5px;
   margin: 2px;
   width: 150px;
   border-radius: 31px;
   color: white;
   height: 30px;
 }

 .table-nowrap td,
 .table-nowrap th {
   white-space: unset;
   font-size: 15px;
 }

 #makesize {
   height: 120px;
 }

 #makesize h5 {
   font-size: 55px;
 }

 .radius {
   color: black;
 }

 .form input {
   color: black;
 }

 /* ==================================Query-Form========================================= */

 @media (min-width: 320px) and (max-width: 1400px) {
   .query-table tbody .btns-td ul li {
     font-size: 11px;
     padding: 2px 0;
     line-height: 11px;
     margin: 0;
     padding: 0;
   }

   .query-table tbody .btns-td .table-link {
     font-size: 11px;
     font-weight: 600;
     color: #fff;
     padding: 3px 4px;
     border-radius: 40px;
     background: rgb(39, 85, 176);
     display: ruby-text;
   }
 }



 /* ===========================video-promo========================================== */


 .right-menu-promo-video {
   margin-left: 76px;
 }

 .right-menu-promo-video button {
   height: 40px;
   width: 120px;
   border-radius: 9px;
   font-size: 14px;
   background-color: #5b73e8;
   border: none;
   margin-left: 64rem;
   margin-bottom: 20px;
 }

 .right-menu-promo-video button a {
   list-style: none;
   text-decoration: none;
   color: rgb(249, 246, 246);
   margin-left: -13px;
 }

 .right-menu-promo-video th {
   padding-left: 20px;
   color: rgb(184, 181, 181);
 }

 .video-promo-body {
   padding-left: 30px;
   padding-right: 0px;
 }

 /* ======================location-feature========================================== */

 .location-feature-body {
   margin-top: 15px;
   padding: 15px;
   background-color: white;
   border-radius: 12px;
   height: 40rem;
   width: 98%;
   margin-left: 13px;
 }


 .location-feature-body table tr td:nth-child(1) {
   color: rgb(124, 118, 118) !important;
   margin-top: 37px;
   font-weight: 500;
   font-size: 15px;
 }

 .location-feature-body table tr th {
   color: rgb(167 168 171);
 }

 .location-feature-body .table td {
   margin-top: 37px !important;
   font-size: 14px;
   font-weight: 300;
   vertical-align: middle !important;
   font-weight: 400;
   color: rgb(139, 135, 135);
 }

 .location-feature-body table td h4 {
   font-size: 15px;
   padding: 10px;
   margin-top: 5px;
   color: #0095e8;
 }

 .location-feature-body p {
   color: rgb(50, 48, 48);
   margin-left: 9px;
 }

 /* ==============landing pages============================================= */

 .landing-pages-body,
 .ADDS-body-page {
   margin-top: 40px;
   padding: 15px;
   background-color: white;
   border-radius: 12px;
   width: 98%;
   margin-left: 13px;
 }


 .landing-pages-body table tr td:nth-child(1),
 .body-pages-body table tr td:nth-child(1) {
   color: rgb(124, 118, 118) !important;
   margin-top: 14px;
   font-weight: 500;
   font-size: 15px;
 }

 .landing-pages-body .table td {
   margin-top: 14px;
   font-size: 14px;
   font-weight: 300;
   vertical-align: middle !important;
   font-weight: 400;
   color: rgb(139, 135, 135);
 }

 .landing-pages-body table td h4 {
   font-size: 15px;
   padding: 10px;
   margin-top: 5px;
   color: #0095e8;
 }

 .landing-pages-body table td p {
   height: 23px;
   width: 56px;
   background-color: #50cd89;
   border: 1px solid black;
   border-radius: 8px;
   line-height: 23px;
   align-items: center;
   text-align: center;
   margin-top: 15px;
   color: white;
   font-size: 12px;
   border: none;
 }

 .landing-pages-body table tr td a.edit-btn {}

 .landing-pages-body table tr td:nth-child(6) :hover {
   background-color: #50a5f1;
   color: white;
 }

 .landing-pages-body table tr th {
   color: rgb(167 168 171);
   ;
 }

 .landing-pages-body .right-menu-promo-video button {
   margin-right: 51px;
 }

 .pagingno .prev::before {
   content: " ";
   border-left: 2px solid #454242;
   border-bottom: 2px solid #575454;
   width: 8px;
   height: 8px;
   transform: rotate(45deg);
   cursor: pointer;
   display: block;
   margin-left: 11px;
   margin-top: 10px;

 }

 .pagingno .next::before {
   content: " ";
   border-right: 2px solid #464242;
   border-top: 2px solid #4a4848;
   width: 8px;
   height: 8px;
   transform: rotate(45deg);
   cursor: pointer;
   display: block;
   margin-left: 11px;
   margin-top: 10px;
 }

 /* ==================ADDS============================ */
 .faq {
   margin: 10px;
 }

 .faq .container-landing-pages {
   margin-top: 6rem;
   background-color: rgb(250, 247, 247);
   padding: 31px;
   border-radius: 13px
 }

 .faq .table thead th {
   vertical-align: bottom;
   border-bottom: 2px solid #f5f6f8;
   color: rgb(164, 151, 151);
   font-size: 14px;
   vertical-align: middle;
 }

 .faq .table td {
   color: rgb(49 44 44);
   font-weight: 400;

 }

 .ADDS-pages-body table td h4 {
   font-size: 15px;
   padding: 10px;
   margin-top: 5px;
   color: #0095e8;
 }

 .ADDS-pages-body table tr td:nth-child(1) {
   color: rgb(124, 118, 118) !important;
   margin-top: 14px;
   font-weight: 500;
   font-size: 15px;
 }

 .adds-footer {
   margin-top: 40px;
   width: 100%;
   height: 80px;
   background-color: rgb(237, 232, 232);
 }

 .ADDS-pages-body table tr th {
   color: rgb(167 168 171);
 }

 .footer1 {
   padding: 30px;
   margin-left: 20px;
   font-size: 15px;
 }

 .footer1 span {
   margin: 5px;
   color: gray;
 }

 .footer1 a {
   color: #5f5a5a;
 }

 .adds-footer .footer1 a {
   color: rgb(91, 88, 88);
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .adds-footer .footer1 a:hover {
   color: #54a4ea;
 }


 .landing-pages-body .icoon-pack {
   margin-top: -8px;
   display: flex;
   size: 50px;
 }

 .faq .landing-pages-body .table td {
   margin-top: 14px;
   font-size: 13px;
   font-weight: 400;
   vertical-align: middle !important;
   font-weight: 400;
   color: rgb(51, 49, 49);
 }

 .faq .landing-pages-body .left-menu h4 {
   margin-top: 43rem;
   color: black;
 }

 .faq .table .icoon-pack {
   margin-top: 12px;
   display: flex;
 }

 /* ======================================= */
 .coupon-body {
   width: 98%;
   padding: 10px;
   border-radius: 8px;
   background-color: rgb(255 255 255);
   margin-left: 13px;
 }

 .add-coupon span {
   font-size: 11px;
   color: rgb(210, 202, 202);
   margin-left: 15px;
   margin-left: 10px;
   font-weight: 400;
   color: gray;

 }

 .submet {
   background-color: #2456b0;
   color: white;
   border-radius: 9px;
   margin-right: 10px;
   height: 47px;
   min-width: 96px;
   justify-content: center;
   text-align: center;
   line-height: 47px;
   cursor: pointer;
   border: none;
 }

 .submit-danger {
   background-color: #e30404;
   color: white;
   border-radius: 9px;
   margin-right: 10px;
   height: 47px;
   min-width: 96px;
   justify-content: center;
   text-align: center;
   line-height: 47px;
   cursor: pointer;
 }

 .cansil {
   margin-top: 13px;
   margin-right: 30px;
   font-size: 14px;
 }

 .coupon-body .form input {
   color: black;
   background-color: #f1f2f2;
   border-radius: 5px;
   border: none;
   height: 50px;
 }

 .coupon-body .form-control {
   border-radius: 9px;
   background-color: #f1f2f2;
   border-radius: 5px;
   border: none;
   height: 50px;
 }

 .coupon-body .form-lebel {
   margin-bottom: .5rem;
   font-size: 1.05rem;
   font-weight: 500;
   color: var(--bs-gray-800);
 }

 .footer-add-cou {
   width: 100%;
   display: flex;
   background-color: white;
   margin-top: 20px;
   height: 40px;
 }

 .footer-add-cou span {
   margin-left: 10px;
   color: gray;
 }

 .footer-add-cou a {
   margin-left: 4px;
   color: #555252;
 }

 .footer-add-cou a:hover {
   color: #50a5f1;
 }

 .coupon-body #exampleFormControlSelect1 {
   font-size: 14px;
 }

 /* ================================================================ */
 .spn {
   height: 49px;
   width: 86px;
   font-size: 14px;
   line-height: 49px;
   text-align: center;
   background-color: #50cd89;
   border-radius: 7px;
 }

 .spn a {
   color: white;
 }

 .coupon-body .table td {
   vertical-align: top;
   border-top: 1px solid #f5f6f8;
   line-height: 5rem;
   font-size: 14px;
   color: #918383;
 }

 .coupon-body .table th {
   color: rgb(196, 192, 192)
 }

 .footer-add-cou {
   height: 77px;
   width: 100%;
   background-color: white;
   align-items: center;
 }

 .footer-add-cou a {
   margin-left: 15px;
   font-size: 14px;
 }

 .footer-add-cou span {
   font-size: 14px;
 }

 .container-fluid-view-cou {
   margin-top: 75px;
   padding: 15px;
   background-color: rgb(249, 248, 248)
 }

 /* ===================================new-coupon-new================================== */
 .common {
   margin-top: 6rem;
   float: left;
   width: 100%;
 }

 .common-sec span {
   font-size: 12px;
   color: rgb(210, 202, 202);
   margin-left: 15px;
   margin-left: 10px;
   font-weight: 500;
   color: gray;
 }

 .white-sheet {
   padding: 30px;
 }

 .package-form .form-select {
   padding: 7px;
 }

 .package-form label {
   margin-bottom: .5rem;
   font-size: 12px;
   font-weight: 500;
   color: #000
 }

 .vertical-tabs {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .vertical-tabs li {
   padding: 15px 0;
   color: #222;
   text-transform: capitalize;
   width: 100%;
   ;
 }

 .vertical-tabs li.active {
   padding-bottom: 50px;
   position: relative;
 }

 .vertical-tabs li.active::before {
   content: "";
   position: absolute;
   top: 48px;
   left: 22px;
   width: 1px;
   height: 40px;
   background-color: #c5c5c5;
 }

 .vertical-tabs li.active .step-no {
   color: white !important;
   background-color: #2456b0;
 }

 .vertical-tabs li a {
   color: #222;
   text-transform: capitalize;
   width: 100%;
   ;
   font-size: 13px;
 }

 .step-no {
   font-weight: 600 !important;
   color: #2456b0 !important;
   font-size: 1.25rem;
   background: #f1faff;
   padding: 8px 20px;
   border-radius: 4px;
   margin: 0 10px 0 0 !important;
   font-size: 14px !important;
 }

 .add-btn button {
   background-color: #f1faff;
   border-radius: 9px;
   /* margin-right: 10px; */
   height: 47px;
   width: 96px;
   justify-content: center;
   text-align: center;
   line-height: 47px;
   cursor: pointer;
   border: 1px solid #2457b0;
 }

 .add-btn button {
   color: #2456b0;
 }

 .add-btn button:hover {
   background-color: #2456b0;
 }

 .add-btn button:hover {
   color: #fff;
 }


 .add-btn.danger button:hover {
   background-color: #f1416c;
   color: white;
   border: 1px solid #f1416c;
 }

 .add-btn.danger button {
   border: 1px solid #f1416c;
 }

 .add-btn.danger button {
   color: #f1416c;
 }



 .add-btn.danger:hover button {
   color: #fff;
 }

 .add-btn.back-btn {
   background-color: #f1f2f2;
 }

 .add-btn.back-btn a {
   color: #222;
 }

 .extracare-btn {
   background-color: #2456b0;
   color: #fff;
   border-radius: 9px;
   margin-right: 10px;
   padding: 15px 20px;
   justify-content: center;
   text-align: center;
   font-size: 13px;
   line-height: 23px;
   cursor: pointer;
 }

 .border-top-dotted {
   border-top: 1px dashed #c3c3c3;
   padding-top: 10px;
   margin-top: 10px;
 }

 .multi-select-btns {
   margin: 20px 0;
 }

 .multi-select-btns ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: inline-block;
 }

 .multi-select-btns ul li {
   display: inline-block;
   margin: 0 10px 0 0;
 }

 .multi-select-btns ul li button {
   display: inline-block;
   padding: 3px 10px;
   border: 1px solid #ddd;
   border-radius: 6px;
   background-color: #fff;
   color: #222;
 }

 .multi-select-btns ul li button:hover {
   background-color: #2456b0;
   color: white;
   border: 1px solid #ddd;
 }

 .multi-select-btns ul li button.active {
   background-color: #2456b0;
   color: white;
   border: 1px solid #ddd;
 }

 .travel-list ul {
   padding: 0;
   list-style: none;
   display: inline-block;
 }

 .travel-list ul li {
   position: relative;
   padding: 12px;
   border: 1px solid #ddd;
   border-radius: 8px;
   display: inline-block;
   margin: 5px;
 }

 .travel-list ul li h6 {
   font-size: 14px;
   font-weight: 500;
 }

 .travel-list ul li .travel-img {
   width: 100%;
   max-width: 100px;
   height: 100%;
   max-height: 150px;
   object-fit: cover;
   overflow: hidden;
   border-radius: 10px;
 }

 .travel-list ul li .travel-img img {
   width: 100%;
 }

 .travel-list ul li .img-action {
   position: absolute;
   bottom: 20px;
   left: 20px;
   display: flex;
 }

 .travel-list ul li .img-action a {
   width: 20px;
   height: 20px;
   line-height: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0;
   padding: 0;
   border-radius: 3px;
   background: #222;
 }

 .travel-list ul li .img-action a.green {
   background: green;
   margin: 0 8px 0 0;
 }

 .travel-list ul li .img-action a.red {
   background: red;
 }

 .travel-list ul li .img-action a i {
   font-size: 10px;
   color: #fff;
 }

 .spn {
   height: 49px;
   width: 86px;
   font-size: 14px;
   line-height: 49px;
   text-align: center;
   background-color: #50cd89;
   margin-top: 10px;
   border-radius: 7px;
 }

 .white-sheet .table th {
   color: rgb(94, 94, 94);
 }

 .package .white-sheet .table td {
   vertical-align: top;
   border-top: 1px solid #f5f6f8;
   line-height: 2.2rem;
   font-size: 14px;
   color: #918383;

 }

 .package .white-sheet td h4 {
   font-size: 14px;
   line-height: 2.2rem;
   color: #5b73e8;
   ;
 }

 .view-coupon .white-sheet .table td {
   vertical-align: top;
   border-top: 1px solid #f5f6f8;
   line-height: 4.2rem;
   font-size: 14px;
   color: #918383;
 }

 .white-sheet .query-lead .table td {
   vertical-align: top;
   border-top: 1px solid #f5f6f8;
   line-height: 3rem;
   font-size: 14px;
   font-weight: normal;
   color: #918383;

 }

 .top-head {
   display: flex;
   justify-content: space-between;
 }

 .footer-add-cou {
   height: 77px;
   width: 100%;
   background-color: white;
   align-items: center;
 }

 .common-sec {
   margin-bottom: 23px;
 }

 form .table td a {
   margin-top: 37px;
   color: #000;
   font-size: inherit;
   font-weight: 300;
 }

 form .table td .icoon {
   margin-top: 32px;
   margin-bottom: 17px;
 }

 /* =========================================================== */
 .left-header-coupon h4 {
   font-size: 19px;
   color: #0a0a0a !important;
   margin-left: 15px;
 }

 .add-coupon-btn {
   margin-top: 50px;
   float: right;
   display: flex;
 }

 .add-coupon-btn span {
   background-color: #f1f2f2;
   border-radius: 9px;
   margin-right: 10px;
   height: 47px;
   width: 96px;
   justify-content: center;
   text-align: center;
   line-height: 47px;
   cursor: pointer;
 }

 .faq .table td {
   vertical-align: top;
   border-top: 1px solid #f5f6f8;
   line-height: 19px;
   font-size: 14px;
   color: #918383;
 }

 .faq .pagingno ul {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left: 50rem;
 }

 /* ===================package=============================== */
 .top-head {
   justify-content: space-between;
 }

 /* =======================1================================ */
 .view-coupon tr th,
 .video-promo tr th,
 .container-to-pack tr th,
 .container-state tr th,
 .tg-country tr th,
 .tg-city tr th,
 .package tr th,
 .landing-page tr th,
 .faq tr th,
 .addds-coupon tr th,
 .banners tr th,
 .query-lead tr th {
   font-weight: bold;
   color: #000 !important;
 }

 /*================2==================== */
 .view-coupon tr td,
 .view-coupon tr th,
 .video-promo tr td,
 .video-promo tr th,
 .container-to-pack tr td,
 .container-to-pack tr th,
 .container-state tr td,
 .container-state tr th,
 .tg-country tr td,
 .tg-country tr th,
 .tg-city tr td,
 .tg-city tr th,
 .package tr td,
 .package tr th,
 .landing-page tr td,
 .landing-page tr th,
 .faq tr td,
 .faq tr th,
 .banners tr td,
 .banners tr th,
 .addds-coupon tr td,
 .addds-coupon tr th,
 .query-lead tr td,
 .query-lead tr th {
   border: 1px solid #ccc;
 }

 /* ================1=================== */
 .view-coupon tr th,
 .video-promo tr th,
 .container-to-pack tr th,
 .container-state tr th,
 .tg-country tr th,
 .tg-city tr th,
 .package tr th,
 .landing-page tr th,
 .faq tr th,
 .addds-coupon tr th,
 .banners tr th,
 .query-lead tr th {
   border-top: none;
 }

 /* ===================2====================== */
 .view-coupon tr td:last-child,
 .view-coupon tr th:last-child,
 .video-promo tr td:last-child,
 .video-promo tr th:last-child,
 .container-to-pack tr td:last-child,
 .container-to-pack tr th:last-child,
 .container-state tr td:last-child,
 .container-state tr th:last-child,
 .tg-country tr td:last-child,
 .tg-country tr th:last-child,
 .tg-city tr td:last-child,
 .tg-city tr th:last-child,
 .package tr td:last-child,
 .package tr th:last-child,
 .landing-page tr td:last-child,
 .landing-page tr th:last-child,
 .faq tr td:last-child,
 .faq tr th:last-child,
 .addds-coupon tr td:last-child,
 .addds-coupon tr th:last-child .banners tr td:last-child,
 .banners tr th:last-child,
 .query-lead tr td:last-child,
 .query-lead tr th:last-child {
   border-right: none;
 }

 /* ====================2===================== */
 .view-coupon tr th:nth-child(1),
 .view-coupon tr td:nth-child(1),
 .video-promo tr th:nth-child(1),
 .video-promo tr td:nth-child(1),
 .container-to-pack tr th:nth-child(1),
 .container-to-pack tr td:nth-child(1),
 .container-state tr th:nth-child(1),
 .container-state tr td:nth-child(1),
 .tg-country tr th:nth-child(1),
 .tg-country tr td:nth-child(1),
 .tg-city tr th:nth-child(1),
 .tg-city tr td:nth-child(1),
 .package tr th:nth-child(1),
 .package tr td:nth-child(1),
 .landing-page tr th:nth-child(1),
 .landing-page tr td:nth-child(1),
 .faq tr th:nth-child(1),
 .faq tr td:nth-child(1),
 .banners tr td:nth-child(1),
 .banners tr th:nth-child(1),
 .query-lead tr td:nth-child(1),
 .query-lead tr th:nth-child(1) {
   border-left: none;
 }

 .landings .query-table .Filter_input input {
   height: 5px !important;
 }

 .lead-query button a {
   color: black;
 }

 .lead-query button {
   border: none;
 }

 .tg-state .act-link,
 .tg-country .act-link {
   width: 30px;
   height: 30px;
   line-height: 6px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   margin-top: 30px;
 }

 .video-promo .query-btns {
   text-align: center;
   display: block;
   margin-top: 34px;
 }

 .number-text span {
   height: 32px;
   width: 32px;
   background-color: #f1faff;
   color: #009ef7;
   text-align: center;
   justify-content: center;
   margin-right: 20px;
   line-height: 32px;
   border-radius: 9px;
 }

 .number-text h5 {
   margin-top: 3px;
   font-size: 19px;

 }



 body {
   background-color: #f5f6f8 !important;
 }

 /*******************
Feature 41
*******************/
 .wrap-feature41-box .f41-tab {
   display: block;
 }

 .wrap-feature41-box .f41-tab li a {
   display: flex;
   margin-bottom: 20px;
   padding: 25px;
 }

 .wrap-feature41-box .f41-tab li a .t-icon {
   margin-right: 25px;
   color: #8d97ad;
 }

 .wrap-feature41-box .f41-tab li a h5 {
   font-weight: 500;
 }

 .wrap-feature41-box .f41-tab li a h6 {
   font-size: 14px;
   margin-bottom: 0px;
 }

 .wrap-feature41-box .f41-tab li a.active,
 .wrap-feature41-box .f41-tab li a:hover {
   background: #ffffff;
   box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
 }

 .wrap-feature41-box .f41-tab li a.active .t-icon,
 .wrap-feature41-box .f41-tab li a:hover .t-icon {
   background: #00b4ff;
   background: -webkit-linear-gradient(legacy-direction(to right), #00b4ff 0%, #00b4ff 100%);
   background: linear-gradient(to right, #00b4ff 0%, #00b4ff 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-fill-color: transparent;
 }

 .batchpage {
   padding: 30px;
   background-color: #fff;
   border-radius: 20px;
   margin: 60px 0 0;
 }

 .batch-title {
   margin: 20px 0;
 }

 .batch-title h4 {
   font-size: 18px;
   font-weight: 600;
   line-height: 28px;
 }

 .batch-table.table td {
   padding: 14px;
   font-size: 12px;
   line-height: 24px;
   vertical-align: middle;
 }

 .batch-table.table .table-light {
   background-color: #f9f9f9;
 }

 .add-batch {
   background-color: #f9f9f9;
   padding: 5px 10px;
   border-radius: 5px;
   display: inline-block;
   text-align: center;
 }

 .add-batch i {
   color: #50cd89;
   font-size: 15px;
 }

 .del-batch {
   background-color: #f9f9f9;
   padding: 5px 10px;
   border-radius: 5px;
   display: inline-block;
   text-align: center;
 }

 .del-batch i {
   color: #f1416c;
   font-size: 15px;
 }

 .form-control.batch-select,
 .form-control.batch-input {
   /* margin: 0; */
   font-size: 12px;
   height: 55px;
 }

 .batch-submit {
   display: block;
   margin: 30px 0 0;
 }

 .wrapper {
   width: 100%;
   max-width: 31.25rem;
   margin: 6rem auto;
 }

 .label {
   font-size: .625rem;
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: +1.3px;
   margin-bottom: 1rem;
 }

 .my-table-search .crm-searchBar {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .my-table-search #searchQueryInput {
   width: 100%;
   height: 50px !important;
   background: #fff;
   outline: none;
   border: none;
   border-radius: 6px;
   padding: 10px 25px !important;
   font-size: 12px;
   margin: 0;
 }

 .crm-search-icon {
   background: #eee;
   width: 47px;
   height: 47px;
   line-height: 47px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 6px;
 }

 .crm-search-icon i {
   font-size: 14px;
   line-height: 10px;
   color: #000;
 }

 .my-table-search #searchQuerySubmit {
   background: none;
   border: none;
   outline: none;
   position: absolute;
   right: 1px;
   top: 1px;
   padding: 0;
 }

 .my-table-search #searchQuerySubmit:hover {
   cursor: pointer;
 }

 .sec-title h4,
 .sec-title h1 {
   font-size: 30px;
   font-weight: 600;
   line-height: 40px;
   color: #222;
 }

 .costing-icon::before {
   margin-bottom: 2px;
 }

 /* sales template list */
 .card {
   border-radius: 12px;

 }

 .card-title {
   font-weight: 600;
 }

 .switch {
   position: relative;
   display: inline-block;


 }

 .switch input {
   display: none;
 }

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

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

 input:checked+.slider {
   background-color: #28a745;
 }

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

 .sidebar-item {
   padding: 2px 12px;
   border-radius: 6px;
   cursor: pointer;
   margin-bottom: 5px;
   transition: 0.2s;
 }

 .sidebar-item:hover {
   background-color: #f1f1f1;
 }

 .sidebar-item.active {
   background-color: #007bff;
   color: #fff;
   font-weight: 500;
 }



 .status-btn {
   border: none;
   padding: 5px 12px;
   border-radius: 20px;
   font-size: 12px;
   cursor: pointer;
   transition: 0.3s;

 }

 /* Active */
 .status-btn.active {
   background-color: #28a745;
   color: #fff;
 }

 /* Inactive */
 .status-btn.inactive {
   background-color: #dee2e6;
   color: #333;
 }

 /* Hover effects */
 .status-btn.active:hover {
   background-color: #218838;
 }

 .status-btn.inactive:hover {
   background-color: #ced4da;
 }

 .sale-template-card {
   background: #ffffff;
   border-radius: 12px;
   /* padding: 16px; */
   display: flex;
   flex-direction: column;
   height: 90%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   transition: all 0.2s ease;
 }

 .template-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 }

 /* Header */
 .template-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #4f73b6;
   /* purple tone like image */
   color: white;
   padding: 10px 14px;
   border-radius: 8px;
 }

 .template-title {
   font-size: 15px;
   font-weight: 600;
   margin: 0;
   color: white;
 }

 /* Status Button */
 .status-btn {
   font-size: 12px;
   padding: 4px 10px;
   border-radius: 10px;
   border: none;
   cursor: pointer;
 }

 .status-btn.active {
   background: #6681b4;
   color: white;
 }

 .status-btn.inactive {
   background: #ef4444;
   color: white;
 }

 /* Type */
 .template-type {
   font-size: 13px;
   color: white;
   margin: 2px 0;
   /* padding-bottom: px; */
 }

 /* Description */
 .template-desc {
   padding: 12px;
   font-size: 14px;
   color: #444;
   flex-grow: 1;
   margin-bottom: 12px;
   height: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   overflow-y: scroll;
 }

 /* Footer */
 .template-footer {
   padding: 0 12px;
   display: flex;
   justify-content: space-between;
   gap: 8px;

   padding-top: 10px;
 }

 .template-footer p {
   font-size: 12px;
   color: #888;
   margin: 0;
 }

 /* Buttons */
 .action-btn {
   flex: 1;
   font-size: 13px;
   padding: 6px;
   border: none;
   cursor: pointer;
   transition: 0.2s;
   background-color: white;
 }

 .action-btn:hover {
   background: #e5e7eb;
 }

 .action-btn.delete {
   color: #ef4444;
 }

 .salesidebar {
   width: 260px;
   background: #ffffff;
   padding: 18px 14px;
   border-radius: 18px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 .salesidebar-title {
   font-size: 18px;
   font-weight: 600;
   color: #4a5568;
   margin-bottom: 16px;
   padding-left: 6px;
 }

 .salesidebar-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 14px;
   border-radius: 12px;
   cursor: pointer;
   /* margin-bottom: 8px; */
   transition: all 0.25s ease;
   font-size: 14px;
   color: #4a5568;
 }

 /* Left side layout */
 .salesidebar-item .icon {
   margin-right: 10px;
   font-size: 16px;
 }

 .salesidebar-item .label {
   flex: 1;
 }

 /* Count badge */
 .salesidebar-item .count {
   font-size: 12px;
   background: #eef2f7;
   padding: 4px 10px;
   border-radius: 999px;
   color: #555;
 }

 /* Hover */
 .salesidebar-item:hover {
   background: rgba(36, 86, 176, 0.08);
 }

 /* Active state (premium gradient) */
 .salesidebar-item.active {
   background: linear-gradient(135deg, #2456b0, #2f6fe0);
   color: #fff;
   box-shadow: 0 6px 16px rgba(36, 86, 176, 0.35);
 }

 /* Active badge */
 .salesidebar-item.active .count {
   background: rgba(255, 255, 255, 0.2);
   color: #fff;
 }



 .sales-template-container .template-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 20px;
   padding: 20px 0;
   font-family: 'Poppins', sans-serif;
 }

 .sales-template-container .itinerary-booking-card {
   background: var(--card);
   border: 1px solid #f0f0f0;
   border-radius: 13px;
   overflow: hidden;
   box-shadow: var(--sh);
   transition: all .2s;
   position: relative;
   display: flex;
   flex-direction: column;
   font-family: 'Poppins', sans-serif;
 }

 .sales-template-container .itinerary-booking-card:hover {
   border-color: #2755b0;
   box-shadow: 0 12px 30px rgba(39, 85, 176, 0.15);
   transform: translateY(-5px);
 }

 .sales-template-container .card-image-header {
   padding: 18px 20px 14px;
   border-bottom: 1px solid #f0f0f0;
   position: relative;
   display: block;
 }

 .sales-template-container .trip-name-br {
   font-size: 16px;
   font-weight: 700;
   color: #2456b0;
   letter-spacing: -.2px;
   line-height: 1.3;
   margin-bottom: 6px;
   text-transform: capitalize;
 }

 .sales-template-container .trip-type-br {
   position: absolute;
   top: 18px;
   right: 20px;
   font-size: 9px;
   padding: 2px 10px;
   border-radius: 12px;
   font-weight: 800;
   letter-spacing: 0.6px;
   text-transform: uppercase;
   cursor: pointer;
 }

 .sales-template-container .trip-type-br.status-active {
   background: rgba(31, 179, 142, 0.12);
   color: var(--teal);
   border: 1px solid rgba(31, 179, 142, 0.25);
 }

 .sales-template-container .trip-type-br.status-inactive {
   background: rgba(232, 106, 90, 0.12);
   color: var(--danger);
   border: 1px solid rgba(232, 106, 90, 0.25);
 }

 .sales-template-container .booking-body {
   padding: 5px 20px;
   flex: 1;
 }

 .sales-template-container .booking-row {
   display: flex;
   justify-content: space-between;
   font-size: 11.5px;
   padding: 8px 0;
   border-bottom: 1px solid #f0f0f0;
   color: var(--ink3);
   align-items: flex-start;
 }

 .sales-template-container .booking-row:last-child {
   border-bottom: none;
 }

 .sales-template-container .booking-row span {
   display: flex;
   align-items: center;
   gap: 6px;
   font-weight: 500;
 }

 .sales-template-container .booking-row strong {
   font-weight: 600;
   color: var(--ink2);
   text-align: right;
   max-width: 60%;
 }

 .sales-template-container .template-description-block {
   font-size: 12px;
   color: var(--ink2);
   line-height: 1.5;
   background: var(--card2);
   padding: 12px;
   border-radius: 8px;
   margin-top: 10px;
   max-height: 120px;
   overflow-y: auto;
   border-left: 3px solid var(--blue);
 }

 .sales-template-container .template-description-block::-webkit-scrollbar {
   width: 4px;
 }

 .sales-template-container .template-description-block::-webkit-scrollbar-thumb {
   background: var(--bdr2);
   border-radius: 4px;
 }

 .sales-template-container .card-footer-standard {
   padding: 12px 20px;
   border-top: 1px solid #f0f0f0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #fcfdfe;
   gap: 10px;
 }

 .sales-template-container .details-btn-br {
   background: var(--blue);
   border: 1.5px solid #eef2ff;
   border-radius: 8px;
   color: white;
   padding: 6px 12px;
   cursor: pointer;
   font-size: 11px;
   transition: all .2s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-weight: 600;
   flex-grow: 1;
 }

 .sales-template-container .details-btn-br:hover {
   background: var(--white);
   border-color: var(--blue);
   color: var(--blue);
   box-shadow: 0 4px 10px rgba(36, 86, 176, 0.1);
 }

 /* .details-btn-br.copy-btn {
    border-color: #dbeafe;
    color: #2563eb;
} */

 .sales-template-container .details-btn-br.whatsapp-btn {
   border-color: #dcfce7;
   color: #16a34a;
 }

 .sales-template-container .details-btn-br.edit-btn {
   border-color: #fef3c7;
   color: #d97706;
 }

 .sales-template-container .details-btn-br.delete-btn {
   border-color: #fee2e2;
   color: #dc2626;
 }

 .sales-template-container .details-btn-br.delete-btn:hover {
   background: #dc2626;
   color: #fff;
   border-color: #dc2626;
 }

 @media (max-width: 768px) {
   .sales-template-container .template-grid {
     grid-template-columns: 1fr;
   }
 }

 .no-data-found-container {
   height: 70vh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }


 .no-data-found-icon {
   font-size: 50px !important;
 }

 .recording-item{
  border-radius: 10px;
 }

 .audio-player-container{
  border-radius: 30px;
 }