/* -------- USER PAGES --------- */

/* -------- HEADING --------- */
.heading {
	position:absolute;
	top:0px;
	background-color: rgba(160, 223, 236, 0.6);
	width:100%;
	height:60px;
}
#title {
	margin:5px auto 0px auto;
	font-size:2em;
	text-align:left;
	color:#fff;
	max-width:1200px;
}
#title img {
	vertical-align:middle;
	margin-right:10px;
	margin-bottom:5px;
}
.title-name {
	margin-left:40px;
	font-size:.6em;
}
ul#menu {
	display:block;
	float:right;
	margin:0px;
	top:0px;
	margin-right:20px;
	text-align:right;
}
ul#menu li {
	display:inline-block;
	font-size:.5em;
	text-align:right;
	padding:3px 6px;
	margin:0px 6px;
	cursor:pointer;
}

/* -------- TABLES --------- */
#search {
	width:220px;
}
#search-display > ul {
	list-style-type:none;
	margin:0;
	padding:0;
	max-width:240px;
}
#search-display > ul > li {
	background-color: #7EBCD9;
}
#search-display > ul > li:hover {
	background-color: #378eb9;
}
#search-display > ul > li > a {
	display:block;
	padding:5px 18px;
	font-weight:normal;
	color:#000;
	width:auto;
}

.table_full {
	margin:30px auto 0px auto;
	border:none;
	color:#000;
}

.table_tl, .table_tr, .table_bl, .table_br {
	table-layout: fixed;
	padding:0;
	margin:0;
	border-spacing:1px 4px;
}
.mid_spacer {
	display:block;
	width:20px;
}
.mid_separator {
	display:block;
	height:20px;
}
.v_separator {
	width:1px;
	color:#000;
	font-weight:100;
}
/*
table {
	border-spacing: 0;
//	border-collapse: collapse;
	padding: 0px;
	margin: 0px;
	border: none;
	width:100%;
}
td, th {
	height:36px;
	padding:10px 5px;
}
*/
tr.alt0 td {
    background-color: #A5D1E5;
}
tr.alt1 td {
    background-color: #7EBCD9;
}
tr.alt2 td {
    background-color: #E83030;
}
tr.alt3 td {
    background-color: #E72727;
}

table#patient-list {
	border-spacing:5px 10px;
    border-collapse: separate;
	margin:20px auto;
	padding:0;
	table-layout: fixed;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
tr.clickable-row {
	outline:3px solid transparent;
}
tr.clickable-row:hover {
	outline-color:#CDE5F0;
	cursor: pointer;
}
#patient-list th {
	font-size:.9em;
/*	font-weight:normal; */
	font-style:italic;
	padding:0px 7px;
}
#patient-list td {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	padding:1px 7px 0px 7px;
	white-space: nowrap;
	overflow:hidden;
}
#patient-list td.square30 {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width: 28px;
    height: 28px;
	border: 1px solid #999;
    padding-top: 1px;
/*	background-color: #aaa; */
    text-align: center;
    text-decoration: none;
    /* color: #000; */
}
.button-add {
	padding:7px 25px;
}
.button-buy {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	border: 1px solid transparent;
	width:100%;
	background-color:#ed1b24;
	color:#fff;
	padding:7px 25px;
	border-radius:9px;
	text-decoration:none;
}
.button-buy:hover {
	border-color: #888;
}

table#offers-list {
	border-spacing:30px 0px;
    border-collapse: separate;
	margin:20px auto;
	padding:0;
	table-layout: fixed;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
/* #offers-list td { */
.offer-div {
	background-color:#378eb9;
	border-radius:9px;
	margin:10px 0px;
	padding:10px 0px 0px 0px;
	width:135px;
}
.offer-div-price {
	font-size:1.5em;
	line-height:2em;
}
.order-form {
	width:100%;
	border-spacing:10px 0px;
    border-collapse: separate;
	background-color:#73B9FF;
	border-radius:15px;
}

/* -------- PATIENT INFO PANEL --------- */
.patient-panel {
	margin:55px 0px 45px 0px;
	padding:30px 40px 10px 40px;
	text-align:left;
	border:3px solid #378eb9;
	border-radius:20px;
}
.patient-panel-half {
	display:inline-block;
	vertical-align:bottom;
	width:450px;
}
.patient-panel-half p label {
	display:inline-block;
	width:120px;
	margin-right:30px;
}
.patient-panel-half p input {
	display:inline-block;
/*	margin:auto; */
	width:222px;
}
/* -------- MEASUREMENT PANEL --------- */
.measurement-info-panel {
	display:flex;
	justify-content:center;
	flex-direction:row;
	height:5em;
	margin-bottom:20px;
}
.measurement-help {
	display:inline-block;
	line-height:1.25em;
/*	background-color:#47b2e6; */
	text-align:left;
	margin-right:70px;
}
.measurement-number {
	display:inline-block;
	border-radius:50%;
	font-size:1.2em;
	width:25px;
	height:25px;
	line-height:1.25em;
	border:8px solid #378eb9;
	color:#000;
/*	background-color:#47b2e6; */
	text-align:center;
	margin:auto 15px;
}
.cursor-hand {
	cursor:pointer;
}
.patient-birth-year {
	background-color:#378eb9;
	padding:5px 20px;
	border-radius:9px;
	height:1.25em;
}
.tooth_id {
	border-radius:9px;
	color: #0e2328;
	text-align:center;
}
.tooth_pos {
	display:inline-block;
	width:20px;
	height:28px;
	padding-top:14px;
	margin:5px 0px;
}
.cell_sq {
	border-radius:7px;
}
.cell_num {
	width:20px;
	height:20px;
	line-height:1.25em;
/*	cursor:pointer; */
	color:#000;
	text-align:center;
}
.cell_dot {
	border-radius:50%;
	width:20px;
	height:20px;
	line-height:0px;
	font-size:0px;
/*	cursor:pointer; */
}

/* -------- MEASUREMENT CURRENT POSITION FOCUS FRAME --------- */
#data_enter_frame {
	position:fixed;
	pointer-events:none;
/*	background-color: none; */
/*	border:2px solid #ed1b24; already used class .red-border */
	top:0px;
	left:0px;
	width:22px;
	height:50px;
	overflow:hidden;
	z-index:971;
}

/* -------- MEASUREMENT FLOATING PANEL --------- */
#data_enter {
	position:fixed;
	background-color: #47b2e6;
	border:5px solid #0e2328;
	font-size:2em;
	top:0px;
	left:0px;
	width:200px;
	height:200px;
	overflow:hidden;
	z-index:991;
}
#de_id{
	position: absolute;
	width:50px;
	height:50px;
	top:0px;
	left:0px;
	background-color:#aaddaa;
	color: #0e2328;
	z-index:992;
}
#de_title{
	position: absolute;
	width:150px;
	height:50px;
	overflow:hidden;
	top:0px;
	left:50px;
	z-index:992;
}
.de_value{
	position: absolute;
	width:48px;
	height:48px;
/*	border-radius:50%; */
	cursor:pointer;
	z-index:999;
}

/* -------- RESULTS PANEL --------- */
.results-panel {
	margin:55px 0px 35px 0px;
	padding:30px 40px;
	text-align:left;
	border:3px solid transparent;
	border-radius:20px;
	background-color:#7dc9ed;
}
.show-results {
	display:inline-block;
	vertical-align:top;
	margin:0px 0px 0px 30px;
	text-align:center;
	min-width:240px;
}
#sum-ratio, #sum-bd, #sum-bcd {
/*	background-color:#ed1b24;
	border-radius:10px;
	position:relative;
	padding:5px 0;
	width: 160px;
	margin:5px 0 25px -80px;
	left:50%; */
	font-size:1.5em;
	color:#fff;
}
#circle-ratio, #circle-bd, #circle-bcd {
/*	position:relative;*/
	border-radius:50%;
	background-color:#ed1b24;
	margin:25px auto 0 auto;
/*	left:50%; */
	width:2px;
	height:2px;
	
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.5);	
}
.circle-graphic {
	margin:25px auto 0 auto;
}
.circle-improved {
	display:block;
	border-radius:50%;
	background-color:#fff;
	color:#000;
	text-align:center;
	font-size:56px;
	/*	margin:25px auto 0 auto; */
	margin:50px auto 0 auto;
	width:70px;
	height:70px;
}
.show-dots {
	margin-top:50px;
}
.show-dot-cont {
	display:inline-block;
	height:80px;
	width:80px;
	text-align:center;
	line-height:2em;
}
.show-dot {
	display:inline-block;
	height:40px;
	width:40px;
	border-radius:50%;
	
}
#show-dot-1, #show-dot-2, #show-dot-3 {
	display:block;
	height:18px;
	width:18px;
	margin:11px auto 0px auto;
	border-radius:50%;
	background-color:transparent;
} 
#show-dot-1 {
	background-color:#000;
}

/*
#show_graph {
	font-size:1.5em;
	position:relative;
	padding:0;
	width: 320px;
	height: 130px;
	margin:15px 0 25px -160px;
	left:50%;
}
.graph_bar {
	position:absolute;
	top:0px;
	height:100px;
}
#graph_line_v {
	position:absolute;
	width:3px;
	height:110px;
	top:-5px;
	left:-1px;
	background-color:#000;
	z-index:99;
}
.graph_ruler {
	position:absolute;
	height:25px;
	top:100px;
	border-left:1px solid #000;
	font-size:0.5em;
	color:#000;
}
*/

/* -------- BAR CHART --------- */
.stats-chart {
	display:flex;
	position:relative;
	align-items: left;
/*	justify-content: left; */
	text-align: center;
	width:auto;
/*	min-height: 100vh; */
	height:auto;
	color:#000;
	margin-bottom:240px;
}
/* y axis */
#bar-chart-y {
	display:flex;
	/* position:absolute; */
	width:60px;
	height: 60vh;
	/* height:100%; */
	left:-60px;
	top:-9px;
}
/* x axis */
#bar-chart-x1, #bar-chart-x2 {
	display:flex;
	position:absolute;
	width:1204px;
	height:30px;
	text-align:left;
	bottom:-70px;
	padding-left:66px;
}
#bar-chart-x2 {
	padding-left:80px;
/*	padding-right:16px; */
	bottom:-43px;
}
#bar-chart-x1 div, #bar-chart-x2 div{
	display:inline-block;
	position:relative;
	overflow:visible;
	text-align:center;
	width:51px;
	max-width:51px;
}
#bar-chart-x1 div {
	width:144px;
	max-width:144px;
	text-align:center;
	font-weight:bold;
}
#bar-chart-y div {
	display:block;
	position:absolute;
	width:45px;
	left:0px;
	text-align:right;
	font-weight:bold;
	height:20px;
	padding-top:10px;
}

.vbar, .vbar *, .stats-chart * {
  box-sizing: border-box;
}
 
/* BAR CHART CONTAINER */
.vbar {
	display: inline-flex;
	flex-grow: 1;
	width: auto;
	align-items: flex-end;
	height: 60vh;
	padding-top:10px;
	border-bottom: 2px solid #000;
}
 
/* EACH INDIVIDUAL BAR */
.vbar > div {
	position:relative;
/*	color: #fff; */
	width: 50px;
/*	padding-top:5px; */
}

.vbar > div > div {
	position:absolute;
	background-color: none;
	border: 3px solid #ed1b24;
	border-bottom: 1px solid #ed1b24;
	bottom:0px;
	width: 100%;
}

/* CHART LEGEND */
.chart-legend {
	display: flex;
	position:absolute;
	width:1000px;
	flex-direction: column;
	flex-wrap: nowrap;
	list-style: none;
	text-align:left;
	left:80px;
	bottom: -220px;
	height: 120px;
}
.chart-legend li {
	position: relative;
	line-height: 30px;
	padding-bottom:10px;
	margin-left: 100px;
}
.chart-legend li::before {
	display:inline-block;
	position:absolute;
	width: 80px;
	height: 16px;
	left: -100px;
	top: 5px;
	border-width: 3px;
	border-style: solid;
	content: "";
	/* margin-inline-end: 20px; */
}
.chart-legend li:nth-child(1)::before {
	background-color: none;
	border-color: #ed1b24;
}
.chart-legend li:nth-child(2)::before {
	background-color: #2792c6;
	border-color: #2792c6;
}
.chart-legend li:nth-child(3)::before {
	background-color: #ed7b24;
	border-color: #ed7b24;
}

@media print {
	body {
		background-color: #fff;
		color:#000;
	}
	.button-buy {
		background-color: #fff;
		color: #fff;
	}
	#circle-ratio, #circle-bd, #circle-bcd, .show-dot {
		-webkit-print-color-adjust: exact;
		border:1px solid #000;
	}
}
@media (max-width: 1220px) {
	#title img {
		margin-left:25px;
	}
}
@media (min-width: 640px) and (max-width: 970px) {

}
@media (min-width: 970px) {

}