/*Reset*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, hgroup, main, nav, section 
{
    border: 0;
	font-family: 'Lato', sans-serif;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	position:relative;
}

html {
	overflow-y: auto;
	font-size:1rem;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
	height:100%;
	width:100%;
}

article, aside, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
	height:100%;
	width:100%;
}

*, *:before, *:after {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

p {
	padding:5px;
}

img, a {
	border:0;
	outline:0;
}

a {
	color:black;
}

a:hover {
	color:blue;
}

.hide {
	display:none;
}

.center {
	text-align:center;
}

.oneline {
	white-space:nowrap;
}

strong {
	font-weight:bold;
}

/*LOGIN PAGE*/
.login {
	height: 100%;
	width: 100%;
	position:relative;
	padding:10px;
	display:flex;
	flex-flow:column nowrap;
}

#error_message {
	width: 100%;
    height: 25%;
    background-color: white;
    font-size: 2.5em;
	text-align:center;
	padding-top:25px;
	z-index:90;
}

#loginform {
	margin: 10px auto;
    width: 40%;
    font-size: 1.5em;
    text-align: center;
    border: 1px solid #aaa;
    background: whitesmoke;
    padding: 15px;
}

#loginform input{
	padding:15px;
	font-size:1.2em;
	margin:10px;
}

/*MAIN*/
main {
	height: 100%;
	width: 100%;
	position:relative;
	padding:10px;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-evenly;
}

/*Item Div*/
#item_wrapper {
	flex: 0 0 47%;
	width: 47%;
}

/*RIGHT SIDE*/
#right_side {
	flex: 0 0 50%;
	width: 50%;
}

#quiz_btns {
    width: 100%;
	margin-bottom:10px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: flex-start;
}

.btn {
	cursor:pointer;
	line-height:.9em;
	font-weight:bold;
	padding:1em;
	border: 1px solid #999;
	border-radius:5px;
	white-space: nowrap;
    overflow: hidden;
	background-color: #e9e9e9;
    background-image: -webkit-linear-gradient(top, #fff 0%, #e9e9e9 100%);
    background-image: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
    background-image: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%);
    background-image: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #e9e9e9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='white', EndColorStr='#e9e9e9');
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    outline: none;
}

.btn:hover {
	border: 1px solid #666;
    background-color: #e0e0e0;
    background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
    background-image: -moz-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
    background-image: -ms-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
    background-image: -o-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
    background-image: linear-gradient(to bottom, #f9f9f9 0%, #e0e0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#e0e0e0');
}

.btn:active {
	box-shadow: inset 1px 1px 3px #999999;
    background-color: #cccccc;
    background-image: -webkit-linear-gradient(top, #eaeaea 0%, #ccc 100%);
    background-image: -moz-linear-gradient(top, #eaeaea 0%, #ccc 100%);
    background-image: -ms-linear-gradient(top, #eaeaea 0%, #ccc 100%);
    background-image: -o-linear-gradient(top, #eaeaea 0%, #ccc 100%);
    background-image: linear-gradient(to bottom, #eaeaea 0%, #ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#eaeaea', EndColorStr='#cccccc');
}

/*Detail Div*/
#detail_wrapper {
	padding:3px 0;
	background:whitesmoke;
	height:calc(100% - 80px);
	overflow-y:scroll;
	overflow-x:hidden;
}

.detail_table {
	font-size:1em !important;
	padding:5px;
	margin:10px auto;
	flex: 1 1 32%;
	width:95%;
	border:1px solid #eee;
}

.detail_table.data-table > tbody > tr > td {
	padding:3px 5px;
}

.detail_table.data-table > tbody > tr > td:first-child {
	max-width:150px;
	min-width:100px;
	width:105px;
	vertical-align:top;
}

.detail_table.data-table .header {
	padding:5px;
	background-color:#eee;
}

span.patho {
	display:block;
}

/*All data-tables*/
.layer_info {
    height: 200px;
    vertical-align: middle;
    padding-top: 85px;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}

#order_info {
	height:100px;
}

.control {
	width:20px !important;
	padding:10px !important;
	text-align:center;
}

.data-table {
	color:black;
	font-size:.9em;
	vertical-align:middle;
	border-collapse: collapse;
    background: none repeat-x scroll 50% bottom #FCFDFD;
}

.dataTables_wrapper .dataTables_info {
    float: right;
    text-align: right;
}

.dataTables_wrapper .dataTables_filter {
    float: left;
    clear: both;
}

.data-table thead {
	font-weight:bold;
	text-transform: capitalize;
	font-size:1.1em;
}

.data-table th {
	padding:10px;
}

.data-table > tbody > tr > td {
	vertical-align:middle;
	padding:1px 5px;
}
	
.data-table tr.odd {
	background-color:#ddd;
}

.data-table tr:hover {
	cursor:pointer;
}

.data-table tr.even:hover {
	background-color:#eee;
}

.data-table tr.odd:hover {
	background-color:#ccc;
}

.data-table tr[class*='not_'] {
	display:none;
}

.data-table tr.odd.itarget {
	background-color: #939fa9;
	font-weight:bold;
}
.data-table tr.even.itarget {
	background-color: #bcc3ca;
	font-weight:bold;
}

/* Let's get this party started */
.data-table::-webkit-scrollbar,
.scrollbar::-webkit-scrollbar {
    width: 12px !important;
}
 
/* Track */
.data-table::-webkit-scrollbar-track,
.scrollbar::-webkit-scrollbar-track {
  //  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  border:1px solid white !important;
}
 
/* Handle */
.data-table::-webkit-scrollbar-thumb,
.scrollbar::-webkit-scrollbar-thumb {
    background: rgba(50,50,50,0.8) !important; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 
}
.data-table::-webkit-scrollbar-thumb:window-inactive,
.scrollbar::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(50,50,50,0.4) !important; 
}

/*MODALS*/
#dialog_wrapper {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 100; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.dialog {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	top:50px;
	padding:0;
	border: 1px solid #888;
	border-radius: 5px;
    width: 750px;
    max-width: 85%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	animation-name: animatetop;
	animation-duration: 0.4s
}

.dialog_main {
	background-color: whitesmoke;
    padding: 10px 0;
}

.dialog_head, .dialog_foot {
	padding:20px;
	display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
	align-items:center;
}

/*Dialog Header*/
.dialog_head {
	padding:10px 20px;
	background: #333;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
}

.dialog_head label {
	text-transform: capitalize;
}

/*The Close Button*/
.close {
	order:2;
	font-size:1.5em;
}

.close:hover,
.close:focus {
	color: #ccc;
	text-decoration: none;
	cursor: pointer;
}

/*Dialog Footer*/
.dialog_foot {
	border-top: 1px solid #ccc;
	padding: 10px 20px;
	justify-content:flex-end;
}

/*
.dialog_foot .dialog_next {
	text-decoration: none;
    font-size: 1.5em;
    padding: 10px 15px;
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,.1);
    display: inline-block;
    cursor: pointer;
    background: #00ABD1;
	fill: #fff;
    color: #fff;
}

.dialog_foot .dialog_next.disabled {
	background: #ccc;
	cursor: initial;
}

.dialog_foot .dialog_next:hover {
	background: #fff;
    transition: background-color .3s,transform .3s ease-out;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,.1);
    color: #8B5CC4;
	fill: #8B5CC4;
    transform: scale(1.05);
}*/

/* Add Animation */
@keyframes animatetop {
	from {top: -300px; opacity: 0}
	to {top: 50px; opacity: 1}
}

@keyframes animateright {
	from {right: -300px; opacity: 0}
	to {left: 50px; opacity: 1}
}


/* CARDS */
.card {
    text-align: center;
    /* color: white; */
    font-size: .8em;
	height:350px;
	max-width:95%;
	margin:auto;
	perspective: 1000px;
	background-color: transparent;
	z-index: 10000;
}

/* This container is needed to position the front and back side */
.card-container {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.card:hover .card-container {
  transform: rotateY(180deg);
}

.card-face {
    background: white;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,.1);
    border: 1px solid whitesmoke;
	cursor: pointer;
	position: absolute;
	height: 100%;
	width: 100%;
	display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    align-items: center;
	backface-visibility: hidden;
}

.card-face:hover {
	box-shadow: 0 5px 8px 0 rgba(0,0,0,.1);
}

.card-face.back {
	transform: rotateY(180deg);
    font-size: 1.5em;
}

.card-face .card_logo {
	max-width: 325px;
    max-height: 350px;
}

.card-face ul {
	position:absolute;
	margin:1em auto;
	color:#333;
	font-size:1.1em;
	list-style: none;
}

.card-face li {
	padding:5px 0;
}

.card-face .learnmore_btn {
	position:absolute;
	left:50px;
	right:50px;
	bottom:30px;
}