.ImageWrapper {
		height: 790px;
		border:solid 0px Blue; 
		position:relative;
		overflow:hidden;
}

.ImageWrapperViewer {
	height: auto;
	border:solid 0px Blue;
	position:relative;
	overflow:hidden;

}

.SP-Background {
	background: #707070;
  margin: 0; padding: 0; border: 0; outline: 0;
}


.SP-QuestionName {
	font-weight: normal;
	font-size:14pt;
}

.SP-TopicName
{
	font-weight: normal;
	font-size:14pt;
}

.SP-Question-Background {
	background: #505050;
	font-size: 13pt;
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0;
  color: #C0C0C0 !important;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px #303030;
}


#SmartBug {
  position: absolute;
  float: left;
  z-index: 99999;
}


.SP-Question-Background-SmartBug {
	background: #8494d1;
	font-size: 13pt;
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0;
  color: white !important;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0px 0px #303030;
}

.SP-Question-Lable-SmartBug {
	cursor: pointer;
	font-weight: bold;
	color: white;
}

.SP-Question-Content {
	background: #505050;
	float: right; 
	width: 19.5%;  
	border:solid 2px #505050; 
	height: 790px;
}

.SP-Question-Inner-Content {
	overflow:auto;  
	width: 100%; 
	height:755px;
	border:solid 0px blue;
	display: inline-block;
}

.SP-Question-Line {
	height: auto;
	min-height: 20px;
	
}
.SP-Question-Line-Comment {
	height: 50px;
}
.SP-Question-Line-Spacer {
	height: 5px;
}


.SP-Header {
	display: table;
  background:#1E3A50;
  height: 50px;
 	color: white;
 	font-family: Arial, Helvetica, sans-serif;
 	vertical-align: middle;
 	width: 100%;
}


.SP-Thumbnails {
	overflow-x: scroll; 
	overflow-y: hidden;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;
	/* &::-webkit-scrollbar {
        display: none;
   };*/
	
	width: 100%;
	height: 116px;
	white-space: nowrap;
	display: inline-block;

	margin-top: 2px;
	border:solid 0px blue;
	clear: both;
	
	background: linear-gradient(
      to bottom, 
      #505050,
      #505050 30%,
      #282828 60%,
      #282828 60%
    );
	
}

.SP-Thumbnails-Contents {
	float: left;
}

.SP-Thumbnail-Hover {
	
	 border-color: white !important;
}

.SP-Thumbnail {
	margin-right:3px;
	height: 90px;
	display: inline-block;
	border:solid 2px white;
}

.SP-Thumbnail.Selected {
	
	border:dashed 3px white;
}


.SP-Thumbnail.Highlight
{
	border:solid 2px red;
}

.SP-Thumbnail.Highlight.Selected
{
	border:dashed 3px red;
}


.SP-Thumbnail-Caption {
	/*width: 100px;*/
	text-align: center;
	color:#C0C0C0;
	font-family: Arial, Helvetica, sans-serif;
	float:left;
	text-shadow: 1px 1px #303030;
}

.SP-Header-Content {
	display: table-cell;
	vertical-align: middle;
	
}

.SP-Lable-Group {
	float: left;
	height: 25px;
}
.SP-Help {
	float: right;
	height: 25px;
	margin-right: 25px;
	font-size: 25px;
}

/* Container to hold all icons on the right side */
.SP-Icons {
	float: right;
	margin-right: 25px; /* space from the right edge */
}

/* Each icon in the container is shown inline-block */
.SP-Icons .SP-Icon {
	display: inline-block;
	margin-left: 20px;   /* space between icons */
	font-size: 30px;
	cursor: pointer;
	color: #C0C0C0;
	vertical-align: middle;
	text-decoration: none; /* ensure links have no underline, optional */
}

.SP-Zoom-100 {
	float: right;
	height: 25px;
	margin-right: 25px;
	font-size: 20px;
	cursor: pointer;
	color: #C0C0C0;
}

.SP-Header-Content a {
	color:#C0C0C0;
	text-decoration: none;
	margin-left: 100px
}

.SP-Label {
	font-weight: normal;
	margin-left: 100px;
	color: #C0C0C0 !important;
	text-shadow: 2px 1px #181818;
	font-size: 14pt;
}

.SP-Data {
	font-weight: normal;
	color:#C0C0C0;
	
}

#SP-RightMainImage {
  width: 49%;
  margin: 0 auto;
  float: right;
  #margin-right: 2px;
}

#SP-LeftMainImage {
  width:49%;
  margin: 0 auto;
  float: left;
  #margin-right: 2px;
}

#SP-CenterMainImage {
	width:99%;
	margin: 0 auto;

	#margin-right: 2px;
}

#rightImage {
	border: 0px solid #ccc; 
	padding:0px; 
	z-index: -999;
}


#leftImage {
	border: 0px solid #ccc; 
	padding:0px; 
	z-index: -999;
}

#CenterImage {
	border: 0px solid #ccc;
	padding:0px;
	z-index: -999;
}


.SP-transparent {
  background:#FFFFFF;
  background:rgba(0,0,0,0.0);
}





input[type=checkbox] {
  transform: scale(1.50);
  margin-right: 5px;
}

input[type=radio] {
	transform: scale(1.50);
	margin-right: 5px;
}

/* Hearbeat for session Poll */
.heart .filled {
	display: none;
}
.heart.toggled .filled {
	display: block;
}
.heart.toggled .hollow {
	display: none;
}

 #session-expired-overlay {
	 position: fixed;
	 top: 0; left: 0; right: 0; bottom: 0;
	 background: rgba(0, 0, 0, 0.3);
	 color: white;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 font-size: 1.5em;
	 z-index: 9999;
	 display: none;
	 pointer-events: none; /* <-- allows clicks to pass through */
 }

#overlay-expired-message {
	background: rgba(0, 0, 0, 0.6);
	padding: 1em;
	border-radius: 5px;
	pointer-events: auto; /* only this area is interactive */
}


#session-expired-overlay a {
	color: #ffff; /* bright cyan, highly visible */
	text-decoration: underline;

}

#session-expired-overlay a:visited {
	color: #ffff; /* override the default deep purple */
}

.swal-popup-soft {
	font-size: 0.9rem;
	padding: 1em;
	width: 28em;
	border-radius: 6px;
	background: #f4f4f4; /* softer background */
	color: #333; /* darker text for better readability */
}

.swal-popup-soft .swal2-title {
	font-size: 1.2em;
}

.swal-popup-soft .swal2-icon {
	transform: scale(0.8); /* smaller icon */
}
.swal-compact {
    padding: 12px !important;
    font-size: 14px !important;
}
/* Smaller SweetAlert2 icons */
.swal2-icon {
    transform: scale(0.6);   /* 60% of normal size */
    margin: 0 !important;    /* reduces vertical space */
}

#noteCategoryContainer {
    display: none;
}

.tooltip-container {
    max-width: 260px;
    font-size: 12px;
    line-height: 1.3em;
}

.tooltip-header {
    font-weight: bold;
    margin-bottom: 6px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
}

.tooltip-note {
    margin-bottom: 8px;
}

.tooltip-note-text {
    font-weight: 500;
}

.tooltip-note-info {
    font-size: 11px;
    color: #666;
    margin-left: 12px;
}

.tooltip-note-row-even {
    background: #f8f9fa;
}

.tooltip-note-row-odd {
    background: #ffffff;
}