:root {
  --bs-primary: #fff;
  --bs-primary-bg:#ff6f03;
  --ey-background-color: #2e2e38;
  --ey-color: #ff6f03;
  --ey-color-rgb: 255, 233, 0;
  --ey-second-color: #747480;
  --bs-primary-rgb: 116, 116, 128;
  --bs-primary-clarity: rgba(217, 170, 0, 0.2);
  --bs-primary-inverse: #2e2e38;
  --bs-primary-active: #D9AA00;
  --bs-text-primary: #ff6f03; 
  --bs-border-color: #ff6f03;
  --bs-pagination-active-bg:#ff6f03;
  --bs-pagination-focus-color:  #ff6f03;  
  --bs-component-active-bg: #ff6f03;
  --bs-component-hover-color:  #ff6f03; 
  --vz-gray-700: #495057;
  --vz-white-rgb: 255, 255, 255;

  --bs-app-header-base-bg-color: #ff6f03;
--bs-app-sidebar-light-bg-color: #ff6f03;
  --bs-text-primary: #fff;
  --bs-app-sidebar-light-menu-link-bg-color-active: #ff0202;
  --bs-app-sidebar-light-menu-link-color: #F7F8FB;
  --bs-app-sidebar-light-menu-heading-color:#F7F8FB;
  --bs-app-sidebar-light-menu-link-icon-color: #F8F8F8;
  --bs-app-sidebar-base-toggle-btn-bg-color: #ff0202;
}
/*Rupee Font*/
@font-face {
    font-family: 'RupeeForadian';
    src: url('../fonts/rupee_foradian-webfont.eot');
    src: local('?'), url('../fonts/rupee_foradian-webfont.ttf') format('truetype'), url('../fonts/rupee_foradian-webfont.svg#webfontw9XvPLwL') format('svg');
    font-weight: normal;
    font-style: normal;
}

.rupees {font-family: 'RupeeForadian'}
.card {
  -webkit-box-shadow: 0 1px 10px rgba(56, 65, 74, .15);
  box-shadow: 0 1px 10px rgba(56, 65, 74, .15);
}
.modal-header {
  background-color: var(--ey-background-color) !important;
  color: var(--bs-white) !important;
}
.modal-title{
  color: var(--bs-white) !important;

}
.modal-title, .modal-header .btn-close {
  margin-bottom: 0;
  line-height: 1.5;
  color: #fff !important;
}

.typed-cursor{display: none !important;}
.loader {
  width: 16px;
  height: 16px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  display: block;
  margin: -50px auto 0;
  position: relative;
  color: #FFF;
  transform: translateY(30px);
  box-sizing: border-box;
  animation: animloader 2s ease infinite;
  z-index: 100000;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  color: #FFF;
  position: absolute;
  left: 30px;
  top: 0;
  animation: animloader 2s 0.2s ease infinite;
}
.loader::before {
  animation-delay: 0.4s;
  left: 60px;
}

@keyframes animloader {
  0% {
    top: 0;
    color: var(--ey-background-color);
  }
  50% {
    top: 30px;
    color: rgba(255, 255, 255, 0.2);
  }
  100% {
    top: 0;
    color: var(--ey-color);
  }
}
.form-check-input:checked {
  background-color:  var(--ey-color);
  border-color:  var(--ey-color);
}    
.form-check-label {
  color: var(--bs-gray-800) !important;
}

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog, .modal .modal-dialog {
    position: fixed;
    margin: auto;
    width: 50%;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content, .modal .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body, .modal .modal-body {
    padding: 15px 15px 40px;
}

.modal .modal-dialog.modal-xxl {
    width: 70% !important;
}
/*Left*/
.modal.left.fade .modal-dialog {
    left: -50%;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show .modal-dialog {
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog, .modal.fade .modal-dialog, .modal .modal-dialog {
    right: -50%;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog, .modal.fade.show .modal-dialog, .modal.show .modal-dialog {
    right: 0;
}


@media (max-width: 576px) {
    .modal.left .modal-dialog, .modal.right .modal-dialog, .modal .modal-dialog {
        width: 100%;
    }

    .formDropdown .dropDiv {
        width: 96%;
    }
}

@media (max-width: 480px) {
    .modal.left .modal-dialog, .modal.right .modal-dialog, .modal .modal-dialog {
        width: 100%;
    }

    .formDropdown .dropDiv {
        width: 96%;
    }
}


/**** DataTables ****/

.truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* or adjust as necessary */
}
.tooltip {
  max-width: 400px; /* Set your desired max width */
}
.tooltip-inner {
  max-width: 400px; /* Set your desired max width */
  white-space: pre-wrap; /* Preserve line breaks */
}
/**** DataTables ****/

.tooltip-inner {
  text-align: left;
}
/********* Toastr *******/
.toastr {
  width: 400px !important; /* Set your desired width */
}

.toast {
  width: 100%; /* Ensure the toast uses the full width of the toastr */
}
#toastr-container>div{
  opacity: 1 !important;
}

.toastr .toastr-title{
  font-weight: 600 !important;
}
.toast-content {
  display: flex;
  align-items: center;
}
/********* Toastr *******/

.no-data{
  align-self: center !important;
}

.loader {
  width: 16px;
  height: 16px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  display: block;
  margin: -30rem auto 0;
  position: relative;
  color: #FFF;
  transform: translateY(30px);
  box-sizing: border-box;
  animation: animloader 2s ease infinite;
  z-index: 100000;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  color: #FFF;
  position: absolute;
  left: 30px;
  top: 0;
  animation: animloader 2s 0.2s ease infinite;
}
.loader::before {
  animation-delay: 0.4s;
  left: 60px;
}

@keyframes animloader {
  0% {
    top: 0;
    color: var(--ey-background-color);
  }
  50% {
    top: 30px;
    color: rgba(255, 255, 255, 0.2);
  }
  100% {
    top: 0;
    color: var(--ey-color);
  }
}
    

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected, .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted{
  color: var(--ey-background-color);
  font-weight: 700;
}
/* .table > thead > tr > th {
  --vz-bg-opacity: 1;
  background-color: var(--vz-gray-700) !important;
  --vz-text-opacity: 1;
  color: rgba(var(--vz-white-rgb), var(--vz-text-opacity)) !important;
} */
table.dataTable {
  border-collapse: collapse;
}

[data-kt-app-header-minimize=on] .app-header, [data-kt-app-layout=light-sidebar]:not([data-kt-app-header-fixed-mobile=true]) .app-header{
  background-color: var(--bs-app-header-base-bg-color);
}


.initialsName {
  border-radius: 50%;
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-color: var(--bs-app-sidebar-base-toggle-btn-bg-color);
  color: var(--bs-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
  font-size: larger;
  text-align: center;
}

.card-footer{
  display: flex
  ;
      flex-shrink: 0;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
      background-color: var(--bs-modal-footer-bg);
      border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
      border-bottom-right-radius: var(--bs-modal-inner-border-radius);
      border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.card-footer>* {
  margin: calc(0.5rem * .5);
}
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-sub .menu-item .menu-link .menu-title {
    color: unset;
}
.btn.btn-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg);
}