/*
 *  Document   : material_style.css
 *  Author     : Inquisitor
 *  Description: This style sheet is used for customize material design components.
 
 
 				[Table Of Content]
 				
 				1. MENU
 				2. TABLE
 				3. BADGES
*/
/**********************************
			1. MENU
**********************************/
.menuBackground {
  background: white;
  height: 148px;
  width: 100%;
}
.input-icon i {
  color: #ccc;
  display: block;
  position: absolute;
  margin: 13px 2px 4px 10px;
  width: 16px;
  height: 16px;
  font-size: 19px;
  text-align: center;
}
.newicon {
  border: 1px solid gray;
  border-radius: 20%;
  padding: 5px;
  color: #fff;
  background: #6777ef;
}


.newicon:hover {
  border: 1px solid gray;
  border-radius: 20%;
  padding: 5px;
  color: #fff;
  background: #a6a7aa;
}
.btn-round:hover{
  background: #8b97ef;
}


.menuBar {
  box-sizing: border-box;
  background: #0080c0;
  color: white;
  width: 100%;
  height: 64px;
  padding: 16px;
}



.temp-card {
  position: relative;
  overflow: hidden;
}

.hover-btn {
  position: absolute;
  bottom: 47%;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  background-color: rgba(80, 62, 146, 0.7);
  color: #fff;
  border: none;
  padding: 3px 7px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  
}

.temp-card:hover .hover-btn {
  opacity: 1;
  transform: translate(-50%, 0); /* slide up */
}


.dlt-btn {
  position: absolute;
  bottom: 34%;
  left: 49%;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #4f555a;
  padding: 0px 2px !important;

  /* same animation defaults as hover-btn */
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: all 0.3s ease;
  cursor: pointer;
}

.dlt-btn i {
  font-size: 12px;
  line-height: 1;
  background-color: rgba(255, 68, 0, 0.2);
  border-color: transparent;
  color: #fa6c39;
  padding: 8px;
  border-radius: 5px;
}

.dlt-btn:hover i {
  background-color: #f86e3c;
  color: #fff;
}

.temp-card:hover .dlt-btn {
  opacity: 1;
  transform: translate(-50%, 0); /* same slide-up as hover-btn */
}



.upload-btn{
  padding: 7px 21px;
  font-size: 15px;
  color: white;
  background: linear-gradient(135deg, #d2ba63 0%, #c4a852 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(210, 186, 99, 0.4);
}
.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(210, 186, 99, 0.5);
}

/**********************************
			2. TABLE
**********************************/
.ml-table-striped > tbody > tr:nth-of-type(even) {
  background-color: #f9f9f9;
}
.mdl-data-table thead {
  background: #fafafa;
}
.mdl-data-table {
  width: 100% !important;
}
.ml-table-bordered > tbody > tr > td,
.ml-table-bordered > thead > tr > td {
  border: 1px solid #f0f0f0;
}

/**********************************
			3. BADGES
**********************************/
.badges .ml-card-holder .demo-badge-3[data-badge]:after {
  background-color: #9c27b0;
}

.mdl-badge .demo-badge-3[data-badge]:after {
  background-color: #9c27b0;
}

.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet {
  padding: 15px 10px 15px 20px;
}
.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet:hover {
  background: rgba(0, 0, 0, 0.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.wrapper {
  box-sizing: border-box;
  position: absolute;
  right: 16px;
}

.mdl-tabs__tab {
  text-decoration: none !important;
}
.mdl-textfield__label:after {
  bottom: 20px !important;
}

.mdl-gridcell {
  background: #bdbdbd;
  padding: 30px 0;
  text-align: center;
  color: #424242;
  font-weight: bold;
  margin: 8px;
}
.mdl-foo {
  background: black;
  padding: 5px;
}
.txt-width {
  width: 100% !important;
  max-width: 500px !important;
}
.full-width {
  width: 100% !important;
}
.select-width {
  width: 100% !important;
  max-width: 300px !important;
}
.getmdl-select .mdl-icon-toggle__label {
  float: right;
  margin-top: -30px;
  color: rgba(0, 0, 0, 0.4);
}
.mdl-button--fab:focus {
  outline: none !important;
}
.mdl-button--icon:focus {
  outline: none !important;
}
.mdl-textfield__label {
  color: #747474;
  font-size: 13px !important;
}
.mdl-textfield__input {
  color: #191313 !important;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
.tab-left-side {
  justify-content: flex-start !important;
}
.tab-right-side {
  justify-content: flex-end !important;
}
.page-header.navbar .page-logo {
  line-height: 1.7 !important;
}
.txt-full-width {
  width: 100% !important;
}
.menuBar .mdl-button .material-icons {
  color: #ffffff;
}
.mdl-js-button {
  right: 10px;
}
.mdl-menu__item {
  font-size: 12px;
}
.mdl-menu__item .material-icons {
  padding-right: 10px;
  vertical-align: middle;
}
.mdl-cell {
  float: left;
}
#headerSettingButton {
  color: #ffffff;
}
.mdl-tabs__tab.tabs_three {
  width: calc(100% / 3);
}
.mdl-tabs__panel table tr:first-child th {
  border: 0;
}
.dtp .dtp-buttons {
  text-align: center !important;
}
.dtp-buttons button {
  margin-left: 10px;
}
/* select item fixed hight css */

.getmdl-select {
  outline: none;
}

.getmdl-select .mdl-textfield__input {
  cursor: pointer;
}

.getmdl-select .selected {
  background-color: #ddd;
}

.getmdl-select .mdl-icon-toggle__label {
  float: right;
  margin-top: -30px;
  color: rgba(0, 0, 0, 0.4);
  transform: rotate(0);
  transition: transform 0.3s;
}

.getmdl-select.is-focused .mdl-icon-toggle__label {
  color: #3f51b5;
  transform: rotate(180deg);
}

.getmdl-select .mdl-menu__container {
  width: 100% !important;
  margin-top: 2px;
}

.getmdl-select .mdl-menu__container .mdl-menu {
  width: 100%;
}

.getmdl-select .mdl-menu__container .mdl-menu .mdl-menu__item {
  font-size: 16px;
}

.getmdl-select__fix-height .mdl-menu__container .mdl-menu {
  overflow-y: auto;
  max-height: 288px !important;
}

.getmdl-select__fix-height .mdl-menu.mdl-menu--top-left {
  bottom: auto;
  top: 0;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
	cursor: not-allowed;
	background-color: #FBFBCE;
}

.float-right{
  float: right !important;
}
.float-none{
  float: none !important;
}
.select-height{
  height: 30px;
  border-radius: 4px !important;
}
.menucolor {
	background-color: #e1e5ec !important;
	border-right: 4px solid #4680ff;
}
.iconinput-pd{
    padding: 1px 5px !important;
}
.edit-img {
	height: 130px !important;
	position: absolute;
	width: 130px !important;
	background: #fff;
	overflow: hidden;
}

.custom-file-upload {
	display: inline-block;
	cursor: pointer;
}
.custom-file-upload input[type="file"] {
	display: none;
}
.edit-img img {
	border-radius: 50%;
	height: 130px !important;
	width: 130px !important;
}
.profile-img-wrap img {
	border-radius: 50%;
	height: 120px;
	width: 120px;
}
/* .dataTables_paginate{
  display: none;
} */
.fnt14{
  font-size: 14px !important;
}
.boxsize {
	float: right;
	width: 20px;
	height: 25px;
}
.mdl-button{
  width: 130px;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
	display: flex;
}
/* Multiple upload files & images css start  */
.form__container {
  position: relative;
  width: 100%;
  height: 200px;
  border: 2px dashed silver;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: silver;
  margin-bottom: 5px;
  transition: background-color 0.3s ease;
}

.form.active {
  background-color: rgba(192, 192, 192, 0.2); /* Use RGB color values */
}

.form__file {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0;
}

.form__files-container {
  display: flex;
  width: 100%;
  padding: 5px 0;
  justify-content: space-between;
  align-items: center;
}

.form__text {
  font-size: 15px;
  color: #333;
  max-width: 450px;
  white-space: nowrap; /* Fixed typo from 'whitespace' to 'white-space' */
  overflow: hidden;
  text-overflow: ellipsis;
}

.form__icon {
  font-size: 22px;
  color: #1871b5;
  text-decoration: none;
}

.file-upload-form {
  width: 500px;
  margin: 5% auto;

}

.modal-body {
  /* max-height: 70vh; */
  overflow-y: auto;
}
#upload-image-container {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
}
#upload-image-container.active {
  border-color: #007bff;
  background-color: #f8f9fa;
}
#images-list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.image-box {
  width: 150px;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
.image-box img {
  max-width: 100%;
  height: auto;
  margin-bottom: 5px;
}
.image-box .filename {
  font-size: 12px;
  word-break: break-all;
}
.image-box .actions {
  margin-top: 5px;
}
.image-box .actions a {
  margin: 0 5px;
  text-decoration: none;
}

.form__container:hover {
	border: 2px dashed #007bff !important;
}
.file-item{
  display: flex;
}
.file-name{
  width: 80%;
}
.file-actions{
  width: 20%;
  text-align: right;
}

/* Multiple upload files & images css end  */
.text-right{
  text-align: right !important;
}
.text-center{
  text-align: center !important;
}
.select2-container--bootstrap .select2-search__field::placeholder {
	color: #fff !important;
	opacity: 0;
}
.ht200{
  height: 200px !important;
}
.newtoggle {
  padding: 0px;
  position: absolute;
  z-index: 1010;
  width: 100%;
}
.ulbrdr {
  border: 1px solid #e3e3e3;
  padding: 5px !important;
  background: white;
}
.float-left {
  float: left !important;
}
.float-right {
  float: right !important;
}
.point {
  background-color: white !important;
  cursor: pointer !important;
}
.form-control::placeholder {
	color: var(--bs-secondary-color);
	opacity: 0.5 !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: grey; /* Set the color of the icon background */
  border-radius: 50%; /* Optional: make it circular */
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  color: white; /* Adjust the arrow color inside the icon */
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: darkgrey; /* Change the background color on hover */
}


@media (max-width: 576px) {
  .col-xs-1 { width: 8.33%; }
  .col-xs-2 { width: 16.67%; }
  .col-xs-3 { width: 25%; }
  .col-xs-4 { width: 33.33%; }
  .col-xs-5 { width: 41.67%; }
  .col-xs-6 { width: 50%; }
  .col-xs-7 { width: 58.33%; }
  .col-xs-8 { width: 66.67%; }
  .col-xs-9 { width: 75%; }
  .col-xs-10 { width: 83.33%; }
  .col-xs-11 { width: 91.67%; }
  .col-xs-12 { width: 100%; }
  
  /* Common styles for all columns */
  [class*="col-xs-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
  }
}

.dc-card:hover {
	transform: translateY(-3px) !important;
}
    .toggle-switch {
      width: 60px;
      height: 30px;
      background: #ccc;
      border-radius: 30px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s;
    }
    .toggle-switch::before {
      content: '';
      position: absolute;
      width: 26px;
      height: 26px;
      background: #fff;
      border-radius: 50%;
      top: 2px;
      left: 2px;
      transition: transform 0.3s;
    }
    .toggle-switch.active {
      background: #4caf50;
    }
    .toggle-switch.active::before {
      transform: translateX(30px);
    }

 .section-title{font-weight:700;font-size:1rem;color:#2563eb}
    /* .form-control,.form-select{padding:.4rem .6rem}
    .input-group-text{padding:.35rem .5rem} */
    /* .form-label{margin-bottom:.25rem;font-weight:600;color:#374151} */
    .btn-sm{--bs-btn-padding-y:.35rem;--bs-btn-padding-x:.7rem}
    .grid-gap{row-gap:.5rem}
    .card-soft{box-shadow: 0 6px 20px rgba(0,0,0,.06)}

#itemsTableWrapper { max-height: 55vh; overflow: auto; }
#itemsTableWrapper thead.sticky-top { top: 0; z-index: 2; }
.input-group > .form-control[readonly] { background-color: #fff; cursor: pointer; }
.dropdown-menu li:last-child .btn { width: 80px; }

.main-layout {
  display: flex;
  align-items: flex-start;
}

/* Left Section (Scrollable) */
.left-scroll {
  height: 100vh;           /* make it full screen height */
  overflow-y: auto;        /* scroll only this column */
  padding-right: 20px;
  background: #fff;
}

/* Right Section (Fixed Sidebar) */
.right-fixed {
  position: sticky;        /* stays fixed as you scroll */
  top: 0;                  /* stick from top */
  height: 100vh;           /* full viewport height */
  overflow-y: auto;        /* allow scroll inside if content too long */
  background: #f8f9fa;
  padding: 20px;
  box-shadow: -2px 0 10px rgba(0,0,0,0.05);
  border-left: 1px solid #e0e0e0;
  z-index: 10;             /* ensure it stays above scrolling content */
}

/* Optional: Nice scrollbars for modern look */
.left-scroll::-webkit-scrollbar,
.right-fixed::-webkit-scrollbar {
  width: 6px;
}
.left-scroll::-webkit-scrollbar-thumb,
.right-fixed::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* Responsive adjustment for small screens */
@media (max-width: 992px) {
  .main-layout {
    flex-direction: column;
  }
  .right-fixed {
    position: relative;
    height: auto;
    box-shadow: none;
    border-left: none;
    border-top: 1px solid #ddd;
  }
}
.mt25{
    margin-top:25px;
}
.text-left{
  text-align:left;
}
.text-right{
  text-align:right;
}
.fw50{
  font-weight: 500;
}
.colorwithweight{
  color: #3d3a97;
  font-weight: 500;
}

/* Keep your existing design — add smooth hover lift + shadow */
.info-box {
  transition: all 0.3s ease;
  cursor: pointer;
}

.info-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Icon animation on hover */
.info-box-icon i {
  transition: all 0.3s ease;
}

.info-box:hover .info-box-icon i {
  transform: scale(1.2) rotate(5deg);
}

/* Optional: subtle icon glow */
.info-box:hover .info-box-icon {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}


/* Smooth transition for hover */
.info-box-icon i {
  color: #fff; /* your current icon color */
  transition: all 0.3s ease;
}

/* When hovering over the box, make icon grey */
.info-box:hover .info-box-icon i {
  color: #cfcfcf; /* soft grey effect */
  transform: scale(1.1);
}

/* Optional: subtle shadow lift for the box */
.info-box {
  transition: all 0.3s ease;
}
.info-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.input-icon-new{
  position: relative;
}
.input-icon-new .form-control{
 padding-left:33px;
}
.img-overlay {
  position: relative;
  padding: 0;
  margin: 0;
}

.img-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(128, 128, 128, 0.25);
  pointer-events: none;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.slide img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 6s ease-out;
}

.slide.active {
  opacity: 1;
}

.slide.active img {
  transform: scale(1); 
}


.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #fff;
  padding: 8px 14px;
  cursor: pointer;
  background: rgba(0,0,0,0.45);
  border-radius: 4px;
}
.button:hover { background:#d61a1a; }