body {font-family: "Monserrat", sans-serif}
.w3-bar-block .w3-bar-item{padding:16px;font-weight:bold}
.w3-blauw{color: #4B68AB!important;}
.w3-colormain{color: #4B68AB!important;}
.w3-header-blauw{color: #fff; background: #4B68AB!important;}
.w3-header-colormain{color: #fff; background: #4B68AB!important;}
.w3-button-colormain{color: #fff; background: #4B68AB!important;}
.search-container button {
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.search-container button:hover {
  background: #ccc;
}

.file-list { list-style: none; padding: 0; }
.file-list li { margin: 10px 0; }

.view-btn { 
	background: #007bff; color: white; padding: 8px 15px; 
	border: none; border-radius: 4px; cursor: pointer; text-decoration: none;
}
.view-btn:hover { background: #0056b3; }

.pw-error { color: red; font-size: 0.9em; display: none; }
.pw-success { color: green; }

.2fabox { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; max-width: 360px; text-align: center; }
.2fagroup { margin-bottom: 20px; text-align: left; }
2falabel { display: block; margin-bottom: 8px; font-weight: bold; color: #444; text-align: center;}
2fainput { width: 100%; padding: 12px; font-size: 20px; letter-spacing: 5px; text-align: center; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
2fabutton { width: 100%; padding: 12px; background: #28a745; border: none; color: white; border-radius: 4px; cursor: pointer; font-size: 16px; }
.2faalert { background: #f8d7da; color: #721c24; padding: 10px; border-radius: 4px; margin-bottom: 15px; font-size: 14px; text-align: left; }

/* Modal Styles */
.modal {
	display: none; /* Hidden by default */
	position: fixed; z-index: 1000; left: 0; top: 0;
	width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);
	justify-content: center; align-items: center;
}
.modal-content {
	background-color: #fff; padding: 20px; border-radius: 8px;
	width: 80%; height: 80%; max-width: 900px; 
	position: relative; display: flex; flex-direction: column;
}
/*.modal-view {
	background-color: #fff; padding: 20px; border-radius: 8px;
	width: 90%; height: 90%; max-width: 1200px; 
	/*position: relative; display: flex; flex-direction: column;*/
}*/
.close-btn {
	position: absolute; top: 10px; right: 15px;
	font-size: 28px; font-weight: bold; cursor: pointer; color: #333;
}
.close-btn:hover { color: #ff0000; }

/* The iframe that will render our files */
#fileViewer {
	width: 100%; height: 100%; border: none; margin-top: 20px;
}