@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

@font-face {
    font-family: 'Basier Circle';
    src: url('fonts/BasierCircle-Regular.woff'),
         url('fonts/BasierCircle-Regular.woff') format('woff');
    /* font-weight: normal;
    font-style: normal; */
  }

  :root {
     /* WIX Color */
     --linecolor1: #2B2F37;
     --bgcolor1:#131720;
     --bgcolor1hov: #42454C; /* #2B2E36 */
     --bgcolor2:#42454C;
     --bgcolor2hov:#424f75;
     --bgcolor3:#116DFF;
     --bgcolor4: #FFB700;
     --bgcolor5: #ECEFF3;
     --color1:#fff;
     --color2: #a1a09d;

  }
  #ifrEditor ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}
  ::-webkit-scrollbar {
     width: 5px;
     height: 5px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
     background: var(--bgcolor1);
  }
  /* Track  on hover */
  ::-webkit-scrollbar-track:hover {
     background: var(--bgcolor1);
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
     background: var(--bgcolor2hov);
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
     background: var(--bgcolor2hov);
     cursor: pointer;
  }

  /* old before 15-09-2024 */
  /* body,.modal-body,.offcanvas-body,.inputgroup,input,.accordion-item { */

  body:not(.qa-main):not(.accordion), 
  .modal-body:not(.qa-main):not(.accordion), 
  .offcanvas-body:not(.qa-main):not(.accordion), 
  .inputgroup:not(.qa-main):not(.accordion), 
  input:not(.qa-main):not(.accordion), 
  .accordion-item:not(.qa-main):not(.accordion) {
     background-color: var(--bgcolor1);
     font-family: 'Roboto', Helvetica, Arial, sans-serif;
     /* font-family: 'Basier Circle', sans-serif; */
     font-size: 12px;
     letter-spacing: 0.65px !important; 
}


.modal-header, .img-hover-zoom-title{
   color: var(--color1);
}

select, datalist {
     border-radius: 3px;
     background-color: var(--bgcolor1) !important;
     color: var(--color1);
  }
  
  strong{
     color: var(--color1);
  }
  
  select:hover, datalist:hover,.modal-header,.modal-footer {
     background-color: var(--bgcolor1hov);
  }

.inputgroup select {
     -webkit-appearance: none;
    /* Hide arrow in WebKit browsers */
     -moz-appearance: none;
    /* Hide arrow in Firefox */
  }
  input,.inputgroup {
     border-radius: 3px;
     background-color: var(--bgcolor1);
     color: var(--color1);
  }
 input:not([type=checkbox]),select {
     border: 1px solid var(--linecolor1);
     color: var(--color1) !important;
     height: 22px;
     padding: 0 0 0 1px;
  }
  .inputgroup {
     border: 1px solid var(--linecolor1) !important;
     border-radius: 3px !important;
     color: var(--color1);
     position: relative;
     display: flex;
    /* flex-wrap: wrap;
     */
    /* align-items: stretch;
     */
     width: 100%;
     height: 22px !important;
  }
  .inputgroup input{
     border: none !important;
     height: 20px !important;
     border-top-right-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
  }
  .inputgroup select{
     border: none !important;
     height: 20px !important;
     border-top-left-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     width: 25px;
  }

  svg{
     /* cursor:  pointer !important; */
  }
  
  /* svg path, 
  svg circle, 
  svg rect, 
  svg polygon, 
  svg ellipse, 
  svg line,
  svg polyline {
     opacity: 0.9 !important;
     fill: var(--color1);
      stroke: var(--color1) !important;  
      stroke-width: 1;
  } */

   svg path:not(#accordionMenu *, .icon-wrapper *),  
   svg circle:not(#accordionMenu *, .icon-wrapper *),  
   svg rect:not(#accordionMenu *, .icon-wrapper *),  
   svg polygon:not(#accordionMenu *, .icon-wrapper *),  
   svg ellipse:not(#accordionMenu *, .icon-wrapper *),  
   svg line:not(#accordionMenu *, .icon-wrapper *),  
   svg polyline:not(#accordionMenu *, .icon-wrapper *) {  
      opacity: 0.9 !important;  
      fill: var(--color1);  
   }


  svg:hover path, 
  svg:hover circle, 
  svg:hover rect, 
  svg:hover polygon, 
  svg:hover ellipse, 
  svg:hover line,
  svg:hover polyline {
      opacity: 1 !important;
      /* filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5)) 
          drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.3))
          brightness(1.1); */
      /* filter: drop-shadow(0px 0px 4px transparent) 
      drop-shadow(0px 0px 8px transparent)
      brightness(1.1); */
  }

.toolItem {
   font-size: 11px;
}

.active svg{
   opacity: 1 !important;
}

.style-label.styleval {
   color: var(--bgcolor4); /* Color when select is not null */
}



/* For cusom radio buttons used in stylesheet Updated on 13-09-2024 */
.style-item label {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   /* margin-right: 10px; */
}

.style-item input[type="radio"] {
   display: none; /* Hide the actual radio button */
}

.style-item svg.icon {
   width: 24px;
   height: 24px;
   fill: var(--color1); /* Default color for unselected option */
   transition: fill 0.3s ease; /* Smooth transition for color change */
}

/* Style for the selected radio button */
.style-item input[type="radio"]:checked + svg.icon {
   fill: var(--bgcolor4); /* Color for the selected option */
}


.qa-compo{
   display: flex;
   justify-content: center;
   
}

/* For Wizards added on 01-10-2024 */

/* #mdlGridWizard,#mdlFormWizard,#mdlMasterDetailsWizard,#mdlCarouselWizard,#mdlMarqueeWizard,#mdlDashboardWizard,#mdlChartJsWizard,#mdlSearchGridWizard
,#mdlECommerceWizard,#mdlAddAccordion,#mdlAddOffcanvas,#mdlAddShape,#mdlCallReport { */

.modal{
   background-color: var(--bgcolor1);
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   /* font-family: 'Basier Circle', sans-serif; */
   font-size: 12px;
   letter-spacing: 0.65px !important; 
   font-weight: 400;

   label,h1,h2,h3,h4,h5,h6{
      color: var(--color1);
   }

   h1{
      font-size: 24px;
   }
   h2{
      font-size: 22px;
   }
   h3{
      font-size: 20px;
   }
   h4{
      font-size: 18px;
   }
   h5{
      font-size: 16px;
   }
   h6{
      font-size: 14px;
   }

   select {
      height: 28px !important;
   }
   input{
      padding-left: 5px;
   }

   input[type=checkbox],input[type=radio]{
      font-size: 16px;
      margin-top: 0;
      border-color: var(--linecolor1);
      height: 18px;
      width: 18px;
   }

   input[type=number] {
      font-size: 12px !important;
      padding: 0 5px;
      height: 22px;
  }

#tblMasterDetails thead tr:nth-child(1) th {
   background-color: grey;
   color: #fff;
}

#tblMasterDetails th:nth-child(-n+5),
#tblMasterDetails td:nth-child(-n+5) {
   background-color: lightgrey;
}

#tblMasterDetails th:nth-child(n+6):nth-child(-n+9),
#tblMasterDetails td:nth-child(n+6):nth-child(-n+9) {
   background-color: lightyellow;
}

#tblMasterDetails th:nth-child(n+10),
#tblMasterDetails td:nth-child(n+10) {
   background-color: lightcyan;
}


#tblDetailsGrid thead tr:nth-child(1) th {
   background-color: grey;
   color: #fff;
}

#tblDetailsGrid th:nth-child(-n+5),
#tblDetailsGrid td:nth-child(-n+5) {
   background-color: lightgrey;
}

#tblDetailsGrid th:nth-child(n+6):nth-child(-n+7),
#tblDetailsGrid td:nth-child(n+6):nth-child(-n+7) {
   background-color: lightyellow;
}


}

.input-group *:not([type=checkbox]) {
   height: 28px !important;
}


/* For Red Mark X (close) */
.btn-close-custom {
   filter: invert(38%) sepia(82%) saturate(3453%) hue-rotate(353deg) brightness(104%) contrast(97%) !important;
 }

/* .btn-close-custom {
   filter: invert(18%) sepia(92%) saturate(7484%) hue-rotate(356deg) brightness(84%) contrast(124%);
 } */
 
 

/* .qa-compo> *:first-child{
   width: -webkit-fill-available;
} */