// Customer List Table CSS
.default-list-table {
  // border: 1px solid $border-clr;
  // border-radius: 20px;
  .table {
    // background: $white;
    // border-color: $border-clr;
    // border-collapse: collapse;
    // border-radius: 20px;
    // overflow: hidden;
    // margin: 0;

    background: #fff;
    border-radius: 20px !important;
    border: 1px solid #D7DDE9;
    border-collapse: separate;
    border-spacing: 0;
		margin-bottom: 0;
		tr {
			vertical-align: middle;

			&:nth-of-type(odd) {
				background: $bg-clr3;
			}

			&:last-child {
				border-color: transparent;
			}

			th:first-of-type {
				width: 105px;
				max-width: 105px;
			}

			&:hover .edit-panel {
				opacity: 1;
				visibility: visible;
		  }
			&:hover .user-edit-panel {
			  transform: translateY(-10px);
			}
		}

    td, th {
      padding: 15px 30px;
      color: $text-clr2;
			span.timetable {
				display: block;
				font-size: 14px;
		  }
    }
    thead tr {
      background: $bg-clr2 !important;

      th {
        font-weight: 500;
        color: $text-clr1;

				&:last-child {
					text-align: right;
				}
      }
    }

    tbody tr {
			th {
				color: $text-clr2;
				font-weight: 400;
				font-size: 16px;
			}

			td:last-child {
				text-align: right;
			}
		}
  }
}

// Customer Verified base
.base {
  margin-left: 20px;
  background: $bg-clr3;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: $fw-500;
}
.verified {
  color: $decoration-clr-1;
  background-color: $decoration-clr-shade-1;
}
.un-verified {
  color: $decoration-clr-3;
  background-color: $decoration-clr-shade-3;
}

.action-card {
	text-align: center;
	.dropdown-toggle {
		height: 40px;
		width: 40px;
		display: grid;
		place-content: center;
		font-size: 20px;
		border-radius: 5px;
		color: $text-clr2;
    margin-left: auto;
		transition: .5s;
		background: transparent;
    position: absolute;
    top: -20px;
    right: 0;
		&::after {
			display: none;
		}
		&:hover {
			background-color: $primary;
			color: $white;
		}
	}
	.dropdown-menu {
		width: 200px;
		padding: 20px 0;
		border: none;
		background-color: $white;
		box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.15);
	}
	.dropdown-item {
		padding: 0 20px;
		line-height: 26px;
    color: $text-clr2;
    font-size: 16px;
    &:hover,
    &:focus {
      color: $text-clr1;
      background-color: transparent !important;
    }
	}

	li {
		&:not(:last-child) {
			.dropdown-item {
				padding-bottom: 8px;
				display: block;
			}
		}
	}

	ul li a {
		font-size: 20px;
		color: $text-clr2;
		transition: color .5s ease;

		.title {
			font-size: 16px;
			font-weight: 400 !important;
			line-height: 26px;
			color: $text-clr2;
		}

		&:hover {
			color: $danger;
		}
	}
}

.user-edit-panel {
	position: relative;
	cursor: pointer;
	transition: all 0.5s ease;
	&:hover {
		transform: translateY(-10px);
		.edit-panel {
			opacity: 1;
			visibility: visible;
			// transform: scale(1);
		}
	}
}
.edit-panel {
	position: absolute;
	bottom: -20px;
	transition: all 0.5s ease;
	opacity: 0;
	visibility: hidden;
	// transform: scale(0);
	ul {
		li {
			a {
				font-size: 14px;
				line-height: 26px;
				font-weight: 400;
        transition: all 0.5s ease;

        &:hover {
          color: $decoration-clr-3;
        }
			}
		}
	}
}


// Manage Staff
.default-list-table {
	&.manage-staff {
			.table {
			td, th {
				padding: 10px 30px;
			}
		}
	}
}
.user-info-panel {
	.user-img {
    width: 40px;
    height: 40px;
	img {
    width: 40px;
    height: 40px;
    object-fit: cover;
	}
}
	.user-info {
		h4 {
			color: $text-clr1;
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
		}

		span {
			color: $text-clr2;
			font-size: 16px;
			line-height: 24px;
		}
	}
}

.user-status {
	position: relative;

	&.active {
		&::before {
			background: $decoration-clr-1;
		}
	}
	&::before {
		content: "";
		height: 12px;
		width: 12px;
		background: $text-clr3;
		display: block;
		border-radius: 50px;
		border: 2px solid $white;
		position: absolute;
		top: -5px;
		right: -1px;
	}
}

.staff-role-heigh {
	max-height: 595px;
	padding-right: 10px;
}
.default-list-table {
	&.staff-role-table {
		border-radius: 5px;
		.table {
			tr {
				vertical-align: initial;
				&:nth-of-type(odd) {
					background: $white;
				}
			}
			td {
				padding: 10px 20px;
				width: 50%;
				&:last-child {
					text-align: left;
				}
				&:first-child {
					border-right: 1px solid $border-clr;
				}
			}
		}
	}
}

// Mobile App Setting
.default-list-table{
	&.app-setting {
		.app-img img {
			width: 70px;
			height: 50px;
			border: 1px solid $border-clr;
			border-radius: 3px;
    }

		tbody tr td:nth-child(4) {
			max-width: 650px;
		}

		.action-card ul li a {
			font-size: 20px;
			color: $primary;
			transition: color .5s ease;

			.title {
				font-size: 16px;
				font-weight: 400 !important;
				line-height: 26px;
				color: #7E7F92;
			}

			&:hover {
				color: $danger;
			}
		}

		.passField {
			width: 200px;
			border: none;
			font-size: 16px;
			line-height: 26px;
			font-weight: 400;
			color: $text-clr2;
			background-color: transparent !important;

			&:focus {
				outline: 0;
			}
		}

		.toggle-password {
			cursor: pointer;
		}
	}
}

// Mobile App Setting
.default-list-table{
	&.apk-setting {

		.table th,
		.table td{
			width: 25%;
		}

		tbody tr td:nth-child(4) {
			max-width: 650px;
		}

		.action-card ul li a {
			font-size: 20px;
			color: $primary;
			transition: color .5s ease;

			.title {
				font-size: 16px;
				font-weight: 400 !important;
				line-height: 26px;
				color: $text-clr2;
			}

			&:hover {
				color: $danger;
			}
		}

		.passField {
			width: 200px;
			border: none;
			font-size: 16px;
			line-height: 26px;
			font-weight: 400;
			color: $text-clr2;

			&:focus {
				outline: 0;
			}
	  }
	}
}

