/* -------- The session modal overlay (transparent darkened area covering the page) -------- */

.session-modal-overlay {
	
	/* Position properties */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	/* Flex/display properties */
	display: flex;
	justify-content: center;
	align-items: center;
	
	/* Color properties */
	background-color: rgba(0, 0, 0, 0.5);
	
	/* z-index */
	z-index: 1000;
}

.session-modal-overlay.hidden {
	
	display: none;
}


/* -------- The actual dialog box -------- */

.session-modal-dialog {
	
	display: flex;
	flex-direction: column; /* displays flex-items in a column, top-to-bottom */
	
	width: 460px;
	max-width: 90%;
	
	background-color: #ffffff;
	border-radius: 8px;
	
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


/* -------- Dialog's header styles -------- */

.session-modal-header {
	
	padding: 18px 20px;
	border-bottom: 1px solid #dddddd;
	
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	
	display: flex;
	flex-direction: row; /* default = row (displays flex-items in a row, left-to-right) */
  	justify-content: space-between;
  	
  	background-color: #F5F5F5;
}

.session-modal-header h2 {
	
	margin: 0;
	font-size: 20px;
	color: #054776;
	font-weight: bold;
}


/* -------- Dialog's "x" (close) button styles -------- */

#sessionModalCloseButton { /* The "x" button in dialog title bar */
	padding: 0 0.35rem 0 0.35rem;
	border-radius: 1rem;
	font-size: normal;
	background-color: inherit;
	border: none;
	color: #054776;
}

#sessionModalCloseButton:hover,
#sessionModalCloseButton:focus {
	background-color: #D5D5D5;
}


/* -------- Dialog's body styles -------- */

.session-modal-body {
	
	padding: 1.5rem 1.5rem 1.75rem 1.5rem; /* was: 26px 20px 28px 20px; */
}

.session-modal-body p {
	
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.session-modal-body p:last-child {
	
	margin-bottom: 0;
}


/* -------- Dialog's button container -------- */

.session-modal-actions {
	
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	
	padding: 14px 20px; /* top/bottom right/left */
	border-top: 1px solid #dddddd;
	
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	
	background-color: #F5F5F5;
}


/* -------- Dialog's action buttons -------- */

.session-modal-actions button {
	
	padding: 8px 14px 8px 14px;
	
	border: 1px solid #aaaaaa;
	border-radius: 0.35rem; /* 4px; */
	
	color: #FFFFFF;
	background-color: #004c83; /* #f5f5f5; */
	cursor: pointer;
}

.session-modal-actions button:hover,
.session-modal-actions button:focus {
	background-color: #067cb9; /* #e5e5e5; */
}

#sessionModalSignOutButton {
	background-color: #c01823;
	/* border-color: #a6a6a6; */
}

#sessionModalSignOutButton:hover,
#sessionModalSignOutButton:focus {
	background-color: #e62f3d;
}