/* Apply Poppins font to the entire body */
		body {
		margin: 0;
		padding: 0;
		font-family: 'Poppins', sans-serif;
		color: #000; /* Ubah warna teks menjadi hitam agar terbaca di latar belakang putih */
		text-align: center;
		background-color: #fff; /* Latar belakang putih */
		background-size: cover;
	  }

	.center-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 60px;
	}

	.center-logo::before,
	.center-logo::after {
		content: "";
		position: relative;
		flex: 1;
		border-top: 1px solid #02cd02;
		margin-top: 35px;
	}

	.center-logo:not(:empty)::before {
		margin-right: .25em;
	}

	.center-logo:not(:empty)::after {
		margin-left: .25em;
	}

	table th {
		background-color: transparent;
	}

	table tr {
		border: 2px solid transparent;
	}

	table td {
		border: 2px solid transparent;
	}

	.btn-square-social {
		width: 230px !important;
		max-width: 100% !important;
		max-height: 100% !important;
		height: 50px !important;
		text-align: left;
		padding: 13px;
		border-radius: 15px;
		font-family: 'Poppins', sans-serif;
		font-size: 17px;
		align-items: center;
		justify-content: flex-start;
		color: white;
		transition: background-color 0.3s ease, transform 0.3s ease;
	}

    .btn-square-sociall {
		width: 470px !important;
		max-width: 100% !important;
		max-height: 100% !important;
		height: 50px !important;
        margin-top: 5px;
		text-align: center;
		padding: 13px;
		border-radius: 15px;
		font-family: 'Poppins', sans-serif;
		font-size: 17px;
		font-weight: lighter;
		align-items: center;
		justify-content: flex-start;
		color: white;
		transition: background-color 0.3s ease, transform 0.3s ease;
	}

	.btn-square-social i {
		margin-right: 5px;
		padding-right: 10px;
	}
    .btn-square-sociall i {
		margin-right: 0px;
		padding-right: 10px;
	}

	/* Efek hover untuk tombol */
	.btn-square-social:hover {
		background-color: #2cab2c;
		transform: scale(1.05);
	}
    .btn-square-sociall:hover {
		background-color: #2cab2c;
		transform: scale(1.05);
	}

	.login100-form-btn.logout-btn {
		background-color: red;
		border-radius: 15px;
	}

	.login100-form-btn.logout-btn:hover {
		background-color: #B30000;
	}
	.scrollable-buttons {
		max-height: 400px;
		overflow-y: auto;
		padding: 10px;
		margin: 0 auto;
		margin-left: 15px;
		margin-top: 20px;
	}

	/* Modern scrollbar styles */
	.scrollable-buttons::-webkit-scrollbar {
		width: 8px;
	}

	.scrollable-buttons::-webkit-scrollbar-track {
		background: transparent;
	}

	.scrollable-buttons::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 10px;
	}

	.scrollable-buttons::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
	/* Media query for smaller screens */
	@media screen and (max-width: 740px) {
		table {
			width: 100%;
		}

		table tr {
			width: 100%;
		}

		table th {
			background-color: transparent;
		}

		table td {
			display: block;
			width: 100%;
			margin-bottom: 10px;
			text-align: center;
		}

		.btn-square-social {
			width: 100% !important;
		}
		.btn-square-sociall {
			width: 95% !important;
			text-align: left;
		}
		.scrollable-buttons {
				max-height: 380px;
				overflow-y: auto;
				padding: 10px;
				margin: 0 auto;
				margin-left: 15px;
				margin-top: 20px;
        }
	}