@font-face {
    font-family: Aptos;
    src: url(../fonts/aptos.ttf);
}

body {
    font-family: 'Roboto', Arial, sans-serif;
}

.hide-srcollBar::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: red;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.hide-srcollBar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-srcollBar::-webkit-scrollbar {
    display: none;
}

.hide-srcollBar {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: overlay;
    width: auto;
    scrollbar-color: rgba(0, 0, 0, 0);
}

.bg-dark-blue{
    background-color: #161C24;
}
/* .desktopMenuList{
    width: 50px;
    padding-left: 8px !important;
    padding-right: 8px  !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
} */
.desktopMenuListTitle{
    display: none;
}
.sideMenuMin{
    padding-left: 16px !important;
    padding-right: 16px !important;
}
/* .desktop-side-menu{
    width: 345px;
} */
@media (min-width:1280px) and (max-width:1500px) {
    .desktop-side-menu{
        width: 280px;
    }
}



#legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 5px;
    margin-left: 5px;
    /*border: 3px solid #000;*/
}

#legend h3 {
    margin-top: 0;
}

#legend img {
    width: 25px;
    vertical-align: middle;
}
.hide {
    display: none !important;
}
.hover-scroll-bar{
    /* rest of css*/
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 0px;
    padding-right: 0px;
    /* for firefox*/
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
    
}

.scroll-bar::-webkit-scrollbar {
    display: block;
    width: 4px;
    height: 4px;
}

.scroll-bar::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-bar::-webkit-scrollbar-thumb {
    background: #9900BFd1;
    position: absolute;
}
.hover-scroll-bar{
  /* rest of css*/
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 0px;
  padding-right: 0px;
  /* for firefox*/
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  
}

.hover-scroll-bar::-webkit-scrollbar, .child::-webkit-scrollbar{
  width: 0px;
  background: transparent;
}
.hover-scroll-bar::-webkit-scrollbar-thumb{
  background: transparent;
  border-radius: 10px;
}
/*::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others).*/
.hover-scroll-bar:not(:has(.child:hover)):hover::-webkit-scrollbar-thumb, 
.child:hover::-webkit-scrollbar-thumb{
  background: #F4F6F820;
  border-radius: 10px;
}
/* for firefox*/
.hover-scroll-bar:hover{
  scrollbar-color: #9900BFd1 #F4F6F8 ;  
}


table .btn-group {
    display:flex
}

table .btn-group a {
  margin-right: 3px;
}

#overlay{	
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    100% { 
        transform: rotate(360deg); 
    }
}
.is-hide{
    display:none;
}

/* Model Box  */

.modal {
    z-index: 1072;
    @apply hidden fixed top-0 left-0 w-full h-full outline-none
  }
  
  .modal.show {
    @apply block
  }
  
  .modal-backdrop {
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    @apply fixed bg-black top-0 left-0
  }
  
  .modal-backdrop.fade {
    @apply opacity-0
  }
  
  .modal-backdrop.show {
    @apply opacity-50
  }
  
  .modal.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,-50px);
    transform: translate(0,-50px);
  }
  
  .modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
  }

  /* Camera Style */


 #container {
    width: 640px;
    margin: 20px auto;
    padding: 10px;
  }
  
  #interactive.viewport {
    width: 400px;
    height: 300px;
    margin-top: 20px;
  }
  
  
  #interactive.viewport canvas, video {
    float: left;
    width: 400px;
    height: 300px;
  }
  
  #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
    margin-left: -640px;
  }
  
  .controls fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }
  
  .controls .input-group {
    float: left;
  }
  
  .controls .input-group input, .controls .input-group button {
    display: block;
  }
  
  .controls .reader-config-group {
    float: right;
  }
  
  .controls .reader-config-group label {
    display: block;
  }
  
  .controls .reader-config-group label span {
    width: 9rem;
    display: inline-block;
    text-align: right;
  }
  
  .controls:after {
    content: '';
    display: block;
    clear: both;
  }
  
  
  #result_strip {
    margin: 10px 0;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    padding: 10px 0;
  }
  
  #result_strip > ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  
  #result_strip > ul > li {
    display: inline-block;
    vertical-align: middle;
    width: 160px;
  }
  
  #result_strip > ul > li .thumbnail {
    padding: 5px;
    margin: 4px;
    border: 1px dashed #CCC;
  }
  
  #result_strip > ul > li .thumbnail img {
    max-width: 140px;
  }
  
  #result_strip > ul > li .thumbnail .caption {
    white-space: normal;
  }
  
  #result_strip > ul > li .thumbnail .caption h4 {
    text-align: center;
    word-wrap: break-word;
    height: 40px;
    margin: 0px;
  }
  
  #result_strip > ul:after {
    content: "";
    display: table;
    clear: both;
  }
  
  
  .scanner-overlay {
    display: none;
    width: 640px;
    height: 510px;
    position: absolute;
    padding: 20px;
    top: 50%;
    margin-top: -275px;
    left: 50%;
    margin-left: -340px;
    background-color: #FFF;
    -moz-box-shadow: #333333 0px 4px 10px;
    -webkit-box-shadow: #333333 0px 4px 10px;
    box-shadow: #333333 0px 4px 10px;
  }
  
  .scanner-overlay > .header {
    position: relative;
    margin-bottom: 14px;
  }
  
  .scanner-overlay > .header h4, .scanner-overlay > .header .close {
    line-height: 16px;
  }
  
  .scanner-overlay > .header h4 {
    margin: 0px;
    padding: 0px;
  }
  
  .scanner-overlay > .header .close {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 16px;
    width: 16px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
  }
  
  
  i.icon-24-scan {
    width: 24px;
    height: 24px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII=");
    display: inline-block;
    background-repeat: no-repeat;
    line-height: 24px;
    margin-top: 1px;
    vertical-align: text-top;
  }
  
  @media (max-width: 603px) {
  
    #container {
      width: 300px;
      margin: 10px auto;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  
    #container form.voucher-form input.voucher-code {
      width: 180px;
    }
  }
  @media (max-width: 603px) {
  
    .reader-config-group {
      width: 100%;
    }
  
    .reader-config-group label > span {
        width: 50%;
    }
  
    .reader-config-group label > select, .reader-config-group label > input {
        max-width: calc(50% - 2px);
    }
  
    #interactive.viewport {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }
  
  
    #interactive.viewport canvas, video {
      margin-top: -50px;
      width: 300px;
      height: 270px;
    }
  
    #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
      margin-left: -300px;
    }
  
  
    #result_strip {
      margin-top: 5px;
      padding-top: 5px;
    }
  
    #result_strip ul.thumbnails > li {
      width: 150px;
    }
  
    #result_strip ul.thumbnails > li .thumbnail .imgWrapper {
      width: 130px;
      height: 130px;
      overflow: hidden;
    }
  
    #result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
      margin-top: -25px;
      width: 130px;
      height: 180px;
    }
  }
  @media (max-width: 603px) {
  
    .overlay.scanner {
      width: 640px;
      height: 510px;
      padding: 20px;
      margin-top: -275px;
      margin-left: -340px;
      background-color: #FFF;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  
    .overlay.scanner > .header {
      margin-bottom: 14px;
    }
  
    .overlay.scanner > .header h4, .overlay.scanner > .header .close {
      line-height: 16px;
    }
  
    .overlay.scanner > .header .close {
      height: 16px;
      width: 16px;
    }
  }
  
/* Tab Style */
.active-tab {
    color: #9900BF;
    border-bottom: 2px solid #9900BF;
}


/* Sonata Redesign */
.sonata-redesign .nav-tabs{
    display: flex;
    align-items: center;
    gap: 20px;
}
.sonata-redesign .alert.alert-danger{
  padding: 20px;
  background-color: #f44336;
  color: white;
  border-radius: 15px;
  margin-bottom: 15px;
}

.sonata-redesign .nav-tabs li{
    padding: 20px 0px;
    font-size: 18px;
    font-weight: 700;
    color: #637381;
    padding: 20px 0px;
    text-decoration: none;
}
.sonata-redesign .nav-tabs a{
    padding: 20px 0px;
    text-decoration: none;
    color: #637381;
}
.sonata-redesign .nav-tabs li .active {
    border-bottom: 2px solid #9900BF;
    color: #9900BF;

}
.sonata-redesign .navbar-brand {
    color: #151D48;
    font-size: 30px;
    font-weight: 600;
}

.sonata-redesign .box-title {
    color: #151D48;
    font-size: 20px;
    font-weight: 600;
    margin-top: 30px;
}

.sonata-redesign .sonata-ba-form {
    display: grid;
    grid-template-columns: repeat(1fr 1fr);
    grid-template-rows: repeat(1fr 1fr);
    gap: 20px 20px;
}



.sonata-redesign .control-label {
    font-size: 14px;
    color: #212B36;
    font-weight: 700;
}
:is([data-theme="dark"] .sonata-redesign .box-title) {
    color: #fff;
}
:is([data-theme="dark"] .sonata-redesign .sonata-ba-form-actions) {
    color: #fff;
}
:is([data-theme="dark"] .sonata-redesign .control-label) {
    color: #fff;
}
:is([data-theme="dark"] .sonata-redesign .control-label__text) {
    color: #fff;
}

:is([data-theme="dark"] .sonata-redesign .nav-tabs-custom) {
    color: #fff;
}

:is([data-theme="dark"] .sonata-redesign .changer-tab) {
    color: #fff;
}
:is([data-theme="dark"] .border-dark ){
    border: 2px solid white;
  }

.sonata-redesign .sonata-ba-field .form-control {
    font-size: 14px;
    color: #737791;
    padding: 0px 16px;
    border-radius: 8px;
    height: 48px;
    border: 1px solid #C3D3E2;
    outline: none;
    width: 100%;
    margin-top: 4px;
}

.sonata-redesign .sonata-ba-field .form-control:focus {
    border-color: #9900BF;
    
    box-shadow: none;
}

.sonata-redesign .sonata-ba-field .form-control::placeholder {
    color: #737791;
}

.sonata-redesign .sonata-ba-form-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 4px;
    margin-top: 20px;
}

.sonata-redesign .sonata-ba-form-actions button, .sonata-redesign .sonata-ba-form-actions a{
    background-color: #9900BF;
    border-radius: 8px;
    padding: 10px 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    outline: none;
    box-shadow: none;
    border: none;
}


.sonata-redesign  .field-actions a, .sonata-redesign  .field-actions button {
    background-color: #9900BF;
    border-radius: 8px;
    padding: 10px 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    outline: none;
    box-shadow: none;
    border: none;
    width:fit-content
}

.sonata-redesign .box-body .sonata-ba-collapsed-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sonata-redesign .sonata-ba-field input[type="file" i] {
    font-size: 14px;
    color: #737791;
    padding: 10px 0px;
    border-radius: 8px;
    border: 1px solid #C3D3E2;
    outline: none;
    margin-top: 4px;
    margin-bottom: 10px;
}

.sonata-redesign .sonata-ba-field input[type="file" i]:focus {
    border-color: #9900BF;
    box-shadow: none;
    
}

.sonata-redesign .sonata-ba-field input[type="file" i]::placeholder {
    color: #737791;
}

.sonata-redesign .sonata-ba-field .select2-hidden-accessible {
    font-size: 14px;
    color: #737791;
    padding: 0px 16px;
    border-radius: 8px;
    height: 48px;
    border: 1px solid #C3D3E2;
    outline: none;
    width: 100%;
    margin-top: 4px;
}

.sonata-redesign .sonata-ba-field select {
    font-size: 14px;
    color: #737791;
    padding: 0px 16px;
    border-radius: 8px;
    height: 48px;
    border: 1px solid #C3D3E2;
    outline: none;
    width: 100%;
    margin-top: 4px;
}
.sonata-redesign .sonata-ba-field .select2-hidden-accessible:focus {
    border-color: #9900BF;
    box-shadow: none;
}

.sonata-redesign .sonata-ba-field .select2-hidden-accessible::placeholder {
    color: #737791;
}

.sonata-redesign .sonata-ba-field .select2-container--bootstrap {
    display: none;
}

.sonata-redesign .box-primary .sonata-ba-collapsed-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: 1fr 1fr; */
    gap: 20px 20px;
    grid-template-areas: "location-grid location-grid";

}

.sonata-redesign #sonata-ba-field-container-s65effb4818bd2_LatLng {
    grid-area: location-grid;
}

.sonata-redesign .btn-info{
    background-color: #9900BF;
    color: #fff;
    border-color: #9900BF;
    display: flex;
    align-items: center;
    justify-content:  center;
}

.sonata-redesign input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #C3D3E2;
    border-radius: 3px;
    display: flex;
    justify-items: center;
    align-items: center;
}

.sonata-redesign input[type="checkbox"]:checked {
    background-color: #9900BF;
}

.sonata-redesign input[type="checkbox"]:checked::after {
    content: "\2713";
    font-size: 18px;
    color: white;
    line-height: 0px;
    margin-left:2px;
}

.sonata-redesign .checkbox label{
    display: flex;
    align-items: center;
    gap: 10px;
}

.sonata-redesign .checkbox{
    margin-top: 40px;
}

@media (max-width:500px){
    .sonata-redesign .box-primary .sonata-ba-collapsed-fields{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.sonata-redesign  .gmap {
    height: 250px !important;
}

/* Sonata Show Page */
.sonata-ba-view {
    background-color: #fff; /* For light mode */
    padding: 30px;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
}

:is([data-theme="dark"] .sonata-ba-view) {
    color: #fff;
    background-color: #161C24;
}

.sonata-ba-view .box-title {
    font-size: 22px;
    font-weight: 700;
}

.sonata-ba-view table {
    text-align: left;
    margin-top: 20px
}

.sonata-ba-view table td {
    margin-left: 5px
}

/* Sonata Delete */
.sonata-ba-delete .btn.btn-danger {
    background-color: #9900BF;
    border-radius: 8px;
    padding: 10px 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    outline: none;
    box-shadow: none;
    border: none;
    width: fit-content;
}

.sonata-ba-delete .btn.btn-danger:hover {
    background-color: {{ primaryColor }}; /* Darker purple on hover */
    border-color: {{ primaryColor }};
}

.sonata-ba-delete .btn.btn-success {
    background-color: #9900BF;
    border-radius: 8px;
    padding: 10px 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    outline: none;
    box-shadow: none;
    border: none;
    width: fit-content;
}

.sonata-ba-delete .btn.btn-success:hover {
    background-color: #218838; /* Darker green on hover */
    border-color: #218838;
}

.sonata-ba-delete {
    background-color: #fff; /* For light mode */
    padding: 30px;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
}

.sonata-ba-delete form{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}


.sonata-ba-delete .box-title {
    font-size: 22px;
    font-weight: 700;
}

:is([data-theme="dark"] .sonata-ba-delete) {
    color: #fff;
    background-color: #161C24;
}

/* select2 */
.select2-results__options li:hover {
  cursor: pointer;
}

.header-order-action .select2-container .select2-choice, .select2-result-label {
  height: 3rem; 
}

#helpVideoModel iframe {
  display: block;
  width: 100%;
  height: 300px;
  border-radius:15px;
}

#helpVideoModel embed{
  border-radius:10px;
  height:70vh
}
#helpVideoModel iframe {
  display: block;
  width: 100%;
  height: 70vh;
}

#helpVideoModel form {
  /*width: 95%;*/
  margin-left: auto;
  margin-right: auto;
}

.modal#helpVideoModel {
border-radius: 7px;
overflow: hidden;
background-color: transparent;
}

.modal#helpVideoModel .logo a img {
width: 30px;
}

.modal#helpVideoModel .modal-content {
border: none;
border-radius: 15px !important; 
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

.modal#helpVideoModel .modal-content .modal-body {
padding-top:0;
border-radius: 15px !important; 
overflow: hidden;
background-color: #fff;
padding-left: 0px;
padding-right: 0px;
-webkit-box-shadow: 0 10px 50px -10px rgba(0, 0, 0, 0.9) !important;
box-shadow: 0 10px 50px -10px rgba(0, 0, 0, 0.9) !important;
}

.modal#helpVideoModel .modal-content .modal-body h2 {
font-size: 18px;
}

.modal#helpVideoModel .modal-content .modal-body p {
color: #777;
font-size: 14px;
}

.modal#helpVideoModel .modal-content .modal-body h3 {
color: #000;
font-size: 22px;
}

.modal#helpVideoModel .modal-content .modal-body .close-btn {
color: #000;
}

.modal#helpVideoModel .modal-content .modal-body .promo-img {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}

.modal#helpVideoModel .modal-content .modal-body .promo-img .price {
top: 20px;
left: 20px;
position: absolute;
color: #fff;
}

.modal#helpVideoModel .btn {
border-radius: 30px;
}

.modal#helpVideoModel .warp-icon {
  width: 65px;
  height: 25px;
  margin: 0 auto;
  position: relative;
  background: rgba(62, 100, 255, 0.05);
  color: #3e64ff;
  border-radius: 50% !important;
  opacity:0
}

.modal#helpVideoModel .warp-icon span {
font-size: 40px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.modal#helpVideoModel .close-btn {
position: absolute;
right: 20px;
top: 0px;
font-size: 20px;
}

.close-model-btn-color i{
  color: #ccc;
}

/* .select2-container{
  height: 48px;
  width: 100% !important;
}

.select2-selection__rendered{
  line-height: 45px !important;
}

.select2-selection__arrow{
  height: 40px !important;
}

.select2-selection--single{
   height: 48px !important;
} */

.disabled, input[readonly]{
  background-color: #ccc;
  border: none;
}

.box {
  min-width: 355px;
  /* height: 137px; */
  background-color: #FAFAFD;
  border-radius: 4px;
}

@media (max-width:500px) {
  .box {
      min-width: 300px !important;
  }
}

:is([data-theme="dark"] .box) {
  background-color: #333D49;
}

.box h1 {
  font-weight: 600;
  font-size: 16px;
}

.box p {
  font-size: 16px;
}

.box i {
  font-size: 24px;
}

/* Styling for the content */
.content {
  display: none;
  margin-top: 20px;
}

.content.active {
  display: block;
}

/* Style for active box */
.box.active {
  background-color: #FAE4FF;
}

:is([data-theme="dark"] .box.active) {
  background-color: #5D167A38;
}

.box.active h1 {
  color: #9900BF !important;
}

#box1.active .arrow{
  display: block;
}
#box2.active .arrow{
  display: block;
}
#box3.active .arrow{
  display: block;
}
#box4.active .arrow{
  display: block;
}

/* .arrow{
  display: none;
} */

:is([data-theme="dark"] .box.active h1) {
  color: #fff !important;
}


.file-input {
  position: relative;
  width: 100%;
  height: 40px;
  overflow: hidden;
  background-color: #FAFAFD;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: Arial, sans-serif;
}

:is([data-theme="dark"] .file-input) {
  background-color: #333D49;
}

.file-input input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.file-input .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-input .button-text {
  margin-left: 5px;

}


.toggle-btn {
  width: 40px;
  min-width: 40px;
  height: 20px;
  border-radius: 10px;
  background-color: #DFE3E4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

:is([data-theme="dark"] .toggle-btn) {
  background-color: #5D167A38;
}

.toggleActive {
  background-color: #9900BF;
}

.toggle-btn .indicator {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.3s;
}

.toggle-left .indicator {
  transform: translateX(-9px);
}

.toggle-right .indicator {
  transform: translateX(9px);
}

#imagePreview {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid #ddd;
  padding: 10px;
  margin-top: 10px;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  backdrop-filter: blur(5px); /* Add a blur effect to the background */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 7% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 35%; /* Could be more or less, depending on screen size */

  border-radius: 20px;
  height: auto;
}

/* The Close Button */
/* .close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;

} */

/* .close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} */

.sonata-actions {
  position: relative;
}

.input-group.date {
  position: relative;
}

.input-group.date .input-group-addon {
  position: absolute;
  right: 12px;
  top: 15px
}

.flatpickr-input[readonly] {
  background: unset;
  outline-color: #9900BF;
  border: 1px solid #919eab;
  color: rgb(0, 0, 0);
}

/* :is([data-theme="dark"] .flatpickr-input[readonly]) {
  background: #fff;
} */

/* Force override - add this AFTER the problematic CSS */
/* :is([data-theme="dark"] .flatpickr-input[readonly]) {
  background: #1f2937 !important;
  color: #ffffff !important;
} */

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  padding: 0.75rem 1.25rem;
  margin-top: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

/* .close {
  float: right;
  font-size: 1.5rem;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 1.00;
  background-color: transparent;
  border: 0;

} */

/* select2 design */
.select2-selection.select2-selection--single {
  height: 48px !important;
  border: 1px solid rgb(145, 158, 171);
  border-radius: 0.5rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important;
}

/* hearder dropdown */
:is([data-theme="dark"] .profile-menu svg path) {
  stroke: #fff !important
}

:is([data-theme="dark"] .profile-menu ul li:hover svg path) {
  stroke: #000 !important
}

.button-hover-bg:hover {
  background-color: #c16fd5 !important;
  cursor: pointer;
}

.box-cursor{
  cursor: pointer;
}