/*
 *  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%;
}

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

/**********************************
			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;
}