#cards {
 text-align:center;
 width:100%;
 top:40%;
 bottom:0%;
 position:absolute;
 z-index:1;
 overflow:auto;
 -webkit-box-shadow: 0 3px 6px #000;
-moz-box-shadow: 0 3px 6px #000;
-ms-box-shadow: 0 3px 6px #000;
-o-box-shadow: 0 3px 6px #000;
 box-shadow: 0 3px 6px #000;
}

.zoomImage {
 box-sizing:border-box;  
 background:#fff;
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.35);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.35);
-ms-box-shadow: 0 3px 6px rgba(0,0,0,.35);
-o-box-shadow: 0 3px 6px rgba(0,0,0,.35);
 box-shadow: 0 3px 6px rgba(0,0,0,.35);
 border-radius:1em;
 max-width:314px;
 margin:auto;
 overflow: hidden; 
 position:relative;
 border:1px solid #999;
 height: 35%;
 top:2.5%; 
 cursor:pointer;
}
.zoomBack{
  position:absolute;
  left:10px;
  color:black;
  text-shadow: 0 0px 3px white,0 0px 3px white,0 0px 3px white,0 0px 3px white;
}

#zoomImg {
	position:absolute;
	display:block;
	margin-bottom:10px;
}

.closeBtn {
 right:166px;
}
.closeBtn:hover {
 background-color: #aaaaaa;
 color:white;
}

.selectBtn {
 color:#46b5fb;
 right:16px;
}
.selectBtn:hover {
 background-color: #46b5fb;
 color:white;
}

.largeButton {
 display:inline-block;
 width:150px;
 text-align:center;
 cursor:pointer;
 padding-top:0.3em;
 padding-bottom:0.3em;
 box-sizing:border-box;  
 margin:1em;
 border:1px solid #46b5fb;
}

.card.highlight {
  background-color: #CEF !important;
}
.card.usedItem {
  background-color: #EEE;
}

.card {
 vertical-align:top;
 text-align:center;
 padding:10px; /* script sets this in pixels */
 background:#fff;
 margin:5px;
 position:relative;
 cursor:pointer;
 box-sizing:border-box;  
 line-height:0em;
 z-index : 0;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.35);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.35);
-ms-box-shadow: 0 3px 6px rgba(0,0,0,.35);
-o-box-shadow: 0 3px 6px rgba(0,0,0,.35);
 box-shadow: 0 3px 6px rgba(0,0,0,.35);
 border-radius:1em;

 display:inline-block;
 width:150px;
 height:95px;
 overflow:hidden;
}

.card .cardInner {
 padding:5px;
 display:table-cell;
 vertical-align:middle;
}
.verticalCenterBox {
 display:table;
 width: 100%;
 height: 100%;
}
.verticalCenterBoxInner {
  display:table-cell;
  vertical-align:middle;
}

.card img {
 max-width:130px;
 max-height:75px;
}

.card .infoicon {
 background: white;
 border-radius: 20px;
}

.card .hintbtn {
 position:absolute;
 right:5px;
 top:5px;
 padding:0px;
 color:#666; 
 cursor:pointer;
 text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

.card .hintbtn_audio,.card .hintbtn_video,.card .hintbtn_speech   {
 margin-top:0.2em;
}

.card .hintbtn_image {
 /* place i icon on top of image */
 position:absolute;
 top:0.2em;
 right:0.2em;
}

.card .playVideoBtn {
 position:absolute;
 left:50%;
 margin-left:-0.5em;
 margin-top:0.1em;
 font-size:5em;
 color:#f3f3f3;
}

.card .playVideoBtn:hover {
 color:white;
 cursor:pointer;
}

.card .playMediaBtn {
 position:relative;
 text-align:center;
 color:#333;

 display:inline-block;
 padding:0.5em;
 padding-top:0.2em;
 padding-bottom:0.2em;
 background:#f3f3f3;
 border-radius:10px;
}

.card .playMediaBtn:hover {
 color:#1177b2;
 cursor:pointer;
}

.card .videoThumb {
 cursor:pointer;
 margin-top:3px;
}
.modal-dialog .videoThumb {
 display:none;
}

/* Play Speech Button in Dialog */
#modalContentInner > a {
 display:inline-block;
 padding:1em;
 padding-top:0.5em;
 padding-bottom:0.5em;
 background:#3197d2;
 cursor:pointer;
 color:white;
 border-radius:10px;
 margin-top:1em;
}
#modalContentInner > a:hover {
 background:#51B7F2;
}

#modalContentInner {
 margin-top:5px;
}

#scrollPanel {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow:auto;
  background: transparent center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#wrapper {
  box-sizing:border-box;
  position:absolute;
  width:100%;
  height:100%;
  top:0%;
  left:0%;
  z-index:1;
  display:table;
  table-layout: fixed;
}

#mainimage {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  position:relative;
}

#baseimg {
/*  max-width:100%; */
}
.resizeText {
  overflow-wrap: normal;
}

.borderFrame{
 -webkit-box-shadow:0px 0px 10px #000;
 -moz-box-shadow:0px 0px 10px #000;
 box-shadow:0px 0px 10px #000;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px 5px 5px 5px;
 background:white;
 border:1px solid gray;
}

 
#solutionPanel {
	background:#fff;
	display:none;
	position:absolute;
	z-index:5001;
	min-height:100%;
	height:100%;
	width:100%;
	top:0px;
	overflow:auto;
  background-image:url("back.jpg");
}

.solutions {
	float:left;
	border:1px solid #999;
	margin-left:20px;
	margin-bottom:20px;
	background-color:#eee;
	padding-top:2px;
	padding-bottom:2px;
	cursor:pointer;
}

.solutions:hover {
	background:#ffc;
}

#solutionMarker {
	position:absolute;
}

#markerLayer {
	position:absolute;
	left:0px;
	top:0px;
	visibility:hidden;
}
.markInner {
  	position: absolute;
	top: 0;
	left: 0;
}
.marker_inner {
	font-size:14px;
	position:absolute;
	border:1px solid #999;
	padding:3px;
	top:22px;
	background:#FFF;
    border-radius:5px;
    white-space: nowrap;
}
.marker_inner.left {
	left:4px;
}
.marker_inner.right {
	right:4px;
}

.marker_inner img {
    max-width:150px;
    max-height:120px;
    padding:0px !important;
}
.marker{
	position:absolute;
	cursor:pointer;
}
.marker svg {
	width:32px;
	height:32px;
  	top: -8px;
	left: -4px;
  	position: relative;
	border-radius: 100%;
}
#solutionMarker.marker svg {
  	top: 0px;
	left: 0px;
}

.marker:hover  {
	z-index:100;
}
.marker_inner:hover {
	top:23px;
	z-index:100;
	background:#ffc;
}

#feedback {
  display: block; 
  position: absolute; 
  left: 50%; 
  margin-left: -180px; 
  top: 20%; 
  max-height: 60%; 
  width: 360px; 
  padding: 2%; 
  overflow: auto;
  
  webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -ms-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  border: 10px solid #ddd;
  background: white;
  z-index: 100000;
}