/* Loyalty Settings tables */
.loyalty_level th, .loyalty_point th {
	width: 100px;
}
.loyalty_level td, .loyalty_point td {
	line-height: 2;
}
.loyalty_using_point, .loyalty_using_point_limits, .loyalty_using_point_min_cart, .loyalty_customization {
	padding-bottom: 15px;
	line-height: 2;
}
.loyalty_customization tr, .loyalty_customization_message tr, .loyalty_customization_display tr {
	display: flex;
}
.loyalty_customization .button {
	margin-left: 5px;
}
.loyalty_customization th {
	width: 120px;
	margin-bottom: 9px;
	padding: 10px 10px 0 0;
	display: inline-flex;
	align-items: center;
    justify-content: left;
}
.loyalty_customization td {
	padding: 10px 10px 0 0;
	display: inline-flex;
	align-items: center;
    justify-content: left;
}
.loyalty_customization_message th, .loyalty_customization_display th {
	width: 120px;
	margin-bottom: 9px;
	padding: 10px 10px 10px 0;
	display: inline-flex;
	align-items: center;
    justify-content: left;
}
.loyalty_customization_message td, .loyalty_customization_display td {
	padding: 10px 10px 10px 0;
	display: inline-flex;
	align-items: center;
    justify-content: center;
}

.loyalty_customization_membercard {
	display: inline-flex;
	align-items: center;
    justify-content: center;
}

/* Points Modal Popup */
#points-modal {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-content {
	background-color: #fefefe;
	padding: 20px;
	border: 1px solid #888;
	width: 400px;
	border-radius: 5px;
}
.modal-content h2 {
	margin-top: 0;
}
.modal-content th {
    width: 120px;
    text-align: left;
}
.modal-content td {
	width: 280px;
}
.modal-content input#points-amount {
    width: 80px;
}
.modal-content input#points-description {
    width: 100%;
}
.point-modal-footer {
    margin-top: 20px;
	display: flex;
	justify-content: right;
	align-items: center;
}
.close-modal, .close-modal-log {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
.close-modal:hover, .close-modal:focus{
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* Styles for Points Log Modal */
#points-log-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}
.log-modal-content {
    background-color: #fff;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    border-radius: 5px;
    width: 80%;
    max-width: 700px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.log-modal-content h2 {
    margin-top: 0;
}
#points-log-table {
    width: 100%;
    border-collapse: collapse;
}
#points-log-table th, #points-log-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
#points-log-table th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
}
#points-log-table tbody tr:hover {
    background-color: #f1f1f1;
}
.close-modal-log {
    cursor: pointer;
    float: right;
    font-size: 24px;
}

/* Users page */
th#actions {
	width: 120px;
}
th#current_points, th#total_earned {
	width: 80px;
}
td.current_points, td.total_earned {
	text-align: center;
}
.button.reward-points, .button.deduct-points {
    padding: 0 5px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* User Profile */
.user-points td {
	margin-bottom: 0;
	padding: 20px 10px 20px 0;
}

/* Upload form */
.yobm-upload-form {
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    padding: 20px;
}

/* Settings */
.label-child {
	padding-left: 20px;
}

/* Premium */
tr.premium-locked, tr.premium-locked .titledesc, tr.premium-locked label, tr.premium-locked .description {
	color: #aaaaaa;
}

tr.premium-locked .premium-label {
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    background-color: #d63638 !important;
    margin-left: 10px;
    margin-bottom: 4px;
    padding: 5px 10px;
    border-radius: 5px;
}

tr.premium-locked .premium-label::before{
    font-family: 'dashicons';
    content: "\f160";
    margin-right: 4px;
}

tr.premium-locked .premium-label:hover {
    color: #ffffff;
    background-color: rgb(26, 156, 26) !important;
}

tr.premium-locked .premium-label:hover::before {
    content: "\f528";
}