:root {
	--nfw-color-red: red;
	--nfw-color-green-poison: #80BC5B;
	--nfw-color-black: #0A1F25;
	--nfw-color-green: #109AAB;
	--nfw-color-green-light: #CFEBEE;
	--nfw-color-blue-light: #E7F2F5;
	--nfw-color-white: #FFFFFF;
	--nfw-color-blue: #B8E1E6;
	--nfw-color-gray: #EDF2F3;
	--nfw-color-gray-dark: #6A748C;
	--nfw-color-gray-light: #e9ecef;
	--nfw-color-gray-medium: #8185A0;
	--nfw-color-gray-darker: #344767;
	--nfw-color-error-red: red;
}
html {
	font-size: 100%;
}
body {
	margin: 0;
	padding: 0;
	background-color: var(--nfw-color-blue-light);
	overflow-x: auto;
}

.nfw-score-bars {
	display: inline-flex;
	align-items: end;
	margin-right: 15px;
	border-top: 1px dotted var(--nfw-color-gray-light);
}
.nfw-score-bars-full {
	height: 7rem;
}
.nfw-score-bars-small {
	height: 4rem;
}
.nfw-score-bar {
	display: inline-block;
}
.nfw-score-bar-full {
	width: 1.8rem;
}
.nfw-score-bar-small {
	width: 0.9rem;
}
.nfw-score-bar-0 {
	background-color: var(--nfw-color-gray-dark);
}
.nfw-score-bar-1 {
	background-color: var(--nfw-color-green);
}
.nfw-score-bar-2 {
	background-color: var(--nfw-color-green-poison);
}
.nfw-score-bar-spacer {
	margin-right: 8px;
}
.nfw-score-box {
	display: inline-flex;
	flex-direction: column;
	background-color: var(--nfw-color-blue)
}
.nfw-score-box-full {
	width: 39rem;
	padding: 15px;
}
.nfw-score-box-small {
	width: 9rem;
	padding: 10px;
}

.nfw-score-box-text {
	font-size: 0.7rem;
	line-height: 1.8;
	dispay: inline-block;
	text-align: justify;
}
.nfw-score-box-text-full {
	flex-grow: 1;
	margin-right: 15px;
}
.nfw-score-box-text-small {
	margin-bottom: 10px;
}
.nfw-score-box-text-empty {
}
.nfw-score-box-title {
	text-align: center;
	margin-bottom: 15px;
}
.nfw-score-box-title-full {
}
.nfw-score-box-title-small {
	font-size: 0.8rem;
}
.nfw-score-box-row {
	display: flex;
	align-items: flex-end;
	margin-top: auto;
}
.nfw-score-box-row-middle {
	flex-grow: 1;
}
.nfw-score-box-score {
	display: inline-block;
	line-height: 1;
}
.nfw-score-box-score-full {
	font-size: 5rem;
}
.nfw-score-box-score-small {
	font-size: 2rem;
}

.nfw-inline-container {
	display: inline-block;
}
.nfw-centered-container {
    text-align: center;
}
.nfw-hidden-container {
    display: none;
}
.nfw-root {
	font-family: 'Open Sans', sans-serif;
	background-color: var(--nfw-color-blue-light);
	margin: 0;
	padding: 0;
	color: var(--nfw-color-gray-darker);
}
.nfw-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--nfw-color-blue);
	padding: 10px;
}
.nfw-header-left {
	display: flex;
	align-items: center;
}
.nfw-header-right {
	display: flex;
	align-items: center;
}
.nfw-logo {
	padding-bottom: 5px;
	width: 90px;
	filter: brightness(0) saturate(100%) invert(10%) sepia(14%) saturate(2105%) hue-rotate(146deg) brightness(89%) contrast(96%);
}
.nfw-login-logo {
	padding-bottom: 20px;
	width: 160px;
	filter: brightness(0) saturate(100%) invert(10%) sepia(14%) saturate(2105%) hue-rotate(146deg) brightness(89%) contrast(96%);
}
.nfw-login-container {
    text-align: center;
    background-color: var(--nfw-color-white);
    padding: 20px;
    display: inline-block;
    border-radius: 20px;
	box-shadow: 0 20px 27px 0 rgba(0,0,0,.05) !important;
}
.nfw-header-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	background-color: var(--nfw-color-green);
	color: var(--nfw-color-blue-light);
	border-radius: 50%;
	font-size: 16px;
	transition: background-color 0.3s;
	cursor: pointer;
}
.nfw-header-button:hover {
	background-color: var(--nfw-color-blue-light);
	color: var(--nfw-color-green)
}
.nfw-header-button-alert {
	background-color: var(--nfw-color-red);
	color: var(--nfw-color-white);
	cursor: default;
}
.nfw-header-button-alert:hover {
	background-color: var(--nfw-color-red);
	color: var(--nfw-color-white);
	cursor: default;
}
.nfw-header-space {
	display: inline-block;
	width: 10px;
}
.nfw-main {
	margin: 15px;
	display: flex;
}
.nfw-main-left {
  /*width: 15.625rem;*/
  flex-shrink: 0;
}
.nfw-main-right {
	flex-grow: 1;
	overflow-x: hidden;
	/*flex: 1; */
}
.nfw-panel {
	background-color: var(--nfw-color-white);
	color: var(--nfw-color-gray-darker);
	border-radius: 10px;
	border: none;
	margin: 0;
	padding: 15px;
	box-shadow: 0 20px 27px 0 rgba(0,0,0,.05) !important;
	display: inline-block;
}
.nfw-panel-full-width {
    display: block;
}
.nfw-panel-dark {
	background-color: var(--nfw-color-gray-darker);
	color: var(--nfw-color-white);
}
.nfw-align-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nfw-align-container-left {
    text-align: left;
}
.nfw-align-container-center {
    flex: 1;
    text-align: center;
}
.nfw-align-container-right {
    text-align: right;
}
.nfw-card-header {
    margin-bottom: 20px;
}
.nfw-card-title {
	color: var(--nfw-color-green);
	font-weight: 600;
}
.nfw-menu {
	/*width: 10.625rem;*/
	background-color: var(--nfw-color-white);
	border-radius: 10px;
	margin-right: 15px;
	padding: 10px;
	/*box-shadow: 0 .1125rem .225rem 0 rgba(0,0,0,.12) !important;*/
	box-shadow: 0 20px 27px 0 rgba(0,0,0,.05) !important;
}
.nfw-menu-item {
	display: flex;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
	cursor: pointer;
}
.nfw-menu-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-top: 8px;
	margin-bottom: 8px;
	background-color: var(--nfw-color-gray);
	color: var(--nfw-color-gray-dark);
	border-radius: 0.5rem;
	font-size: 0.875rem;
	box-shadow: 0 .3125rem .625rem 0 rgba(0,0,0,.12) !important;
	margin-right: 20px;
}
.nfw-menu-item:hover .nfw-menu-item-icon {
	background-color: var(--nfw-color-green-poison);
	color: var(--nfw-color-white);
}
.nfw-menu-item:hover .nfw-menu-item-icon-selected {
	background-color: var(--nfw-color-green);
	color: var(--nfw-color-white);
}
.nfw-menu-item:hover .nfw-menu-item-icon-alert {
	background-color: var(--nfw-color-red);
	color: var(--nfw-color-white);
}
.nfw-menu-item-icon-selected {
	background-color: var(--nfw-color-green);
	color: var(--nfw-color-white);
}
.nfw-menu-item-icon-alert {
	background-color: var(--nfw-color-red);
	color: var(--nfw-color-white);
}
.nfw-menu-item-caption {
	color: var(--nfw-color-gray-dark);
	font-size: .875rem;
	font-weight: 500;
}
.nfw-menu-item-caption-selected {
	color: var(--nfw-color-gray-darker);
	font-size: .875rem;
	font-weight: 600;
}
.nfw-fade-line {
	 border: none;
	 height: 1px;
	 background: linear-gradient(to right, transparent, black, transparent);
	 opacity: 0.25;
}
.nfw-profile-container {
	display: inline-block;
}
.nfw-profile-menu-container {
	 position: relative; /* This makes the container the reference point */
	 display: inline-block;
}
.nfw-profile-menu {
	 position: absolute;
	 top: 35px;
	 right: 0;
	 display: block;
	 padding: 10px;
	 background-color: white;
	 box-shadow: 0 0 10px rgba(0,0,0,0.1);
	 z-index: 1000; /* Ensures it appears above other elements */
	 border-radius: 5px;
	 white-space: nowrap;
}
.nfw-profile-menu::before {
	 content: "";
	 position: absolute;
	 top: -10px;
	 right: 12px;
	 border-width: 5px;
	 border-style: solid;
	 border-color: transparent transparent white transparent; /* Creates a white triangle */
}
.nfw-profile-menu-header {
	color: var(--nfw-color-green);
	font-size: .6rem;
	font-weight: 600;
	user-select: none;
}
.nfw-profile-menu-text {
	color: var(--nfw-color-gray-dark);
	font-size: .875rem;
	font-weight: 500;
	margin-bottom: 7px;
	user-select: none;
}
.nfw-profile-menu-logout {
	text-align: center;
	color: var(--nfw-color-gray-dark);
	font-size: .875rem;
	font-weight: 500;
	border-radius: 5px;
	cursor: pointer;
	padding: 5px 15px;
	user-select: none;
}
.nfw-profile-menu-logout:hover {
	background-color: var(--nfw-color-blue-light);
}
.nfw-close-button {
    font-size: 1.2rem;
    color: #aaa;
}
.nfw-close-button:hover {
    color: var(--nfw-color-green);
	cursor: pointer;
}
.nfw-refresh-button {
	font-size: 1rem;
	color: #aaa;
}
.nfw-refresh-button:hover {
    color: var(--nfw-color-green);
	cursor: pointer;
}
.nfw-spinner {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 3rem;
	height: 1rem;
}
.nfw-spinner-dot {
	width: 0.625rem;
	height: 0.625rem;
	background-color: var(--nfw-color-green);
	border-radius: 50%;
	animation: nfw-spinner-bounce 1s infinite ease-in-out;
}
.nfw-spinner-dot:nth-child(2) {
	animation-delay: 0.2s;
}
.nfw-spinner-dot:nth-child(3) {
	animation-delay: 0.4s;
}
@keyframes nfw-spinner-bounce {
	0%, 80%, 100% {
		 transform: scale(0);
	}
	40% {
		 transform: scale(1);
	}
}
.nfw-examiner-spacer {
	height: 15px;
}
.nfw-error {
    color: var(--nfw-color-error-red);
}
.nfw-study-select {
    display: inline-block;
    border: 1px solid var(--nfw-color-green);
    cursor: pointer;
    padding: 15px;
    margin-right: 1rem;
}
.nfw-study-select:hover {
    border-color: var(--nfw-color-green-poison);
}
.nfw-study-select-title {
    font-size: 2rem;
    line-height: 1;
}
.nfw-score-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: top; /* Center the content */
    gap: 15px; /* Add spacing between items */
}
.nfw-score-report-heading {
    text-align: center;
    margin: 1rem;
    font-weight: 600;
}
.nfw-pop-up-container {
    position: relative;
    display: inline-block;
}
.nfw-pop-up-hover {
}
.nfw-pop-up-pop {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 10px;
    z-index: 1;
}
.nfw-pop-up-container:hover .nfw-pop-up-pop {
    display: inline-block;
}
.nfw-scrollbox {
    width: 100%;
    overflow-x: auto;
}