@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
body {
font-family: Lato;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-bold { font-weight: bold; }
.vert-middle { vertical-align: middle; }
.page-container {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
.header-container {
height: 45px;
border-bottom: 1px solid #999;
}
.navigator-container {
position: absolute;
left: 0;
width: 225px;
top: 46px;
bottom: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.form-container {
position: absolute;
border-left: 1px solid #888;
left: 225px;
right: 0px;
top: 46px;
bottom: 0px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.save-button {
cursor: pointer;
float: right;
line-height: 45px;
color: hsl(10,80%,50%);
padding: 0 10px;
font-size: 1.1em;
}
.navigator-container .form-item {
position: relative;
cursor: pointer;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navigator-container .form-item:hover,
.navigator-container .form-item.selected {
background-color: #eee;
}
.navigator-container .header {
background-color: #bbb;
border-color: #aaa;
text-transform: capitalize;
}
[contenteditable]:empty:not(:focus):before {
content:attr(data-ph);
color: #d0d0d0;
}
.diagram-note-input [contenteditable]:empty:not(:focus):before,
.final-notes:empty:not(:focus):before {
color: hsl(45,90%,45%);
}
.image-flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.hidden {
display: none;
}
.header {
background-color: hsl(200,80%,50%);
border: 1px solid hsl(200,60%,50%);
border-left: none;
border-right: none;
color: white;
font-size: 0.9em;
padding: 3px 3px 3px 10px;
}
.check-item,
.select-item,
.radio-item,
.left-right-item,
.sub-header {
position: relative;
margin-left: 10px;
font-size: 1.2em;
line-height: 1.2em;
padding: 12px 50px 12px 0;
border-bottom: 1px solid #ccc;
}
.check-item:last-child,
.select-item:last-child,
.radio-item:last-child,
.left-right-item:last-child {
border-bottom: none;
}
.form-item {
position: relative;
border-bottom: none;
margin: 0;
padding: 12px;
padding-right: 0px;
font-size: 1.2em;
}
.form-item:after {
position: absolute;
content: " ";
bottom: 0px;
left: 10px;
right: 0px;
height: 1px;
background-color: #ccc;
}
.form-item:last-child:after {
display: none;
}
.check-item {
position: relative;
}
.check-item input[type="checkbox"] {
margin-right: 10px;
}
.check-item label {
cursor: pointer;
}
input[type="checkbox"] {
cursor: pointer;
position: relative;
-webkit-appearance: none;
appearance: none;
box-sizing: content-box;
outline: none;
content: " ";
width: 28px;
height: 18px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 14px;
left: 0;
top: 1px;
/* margin-top: -9px; */
transition: 0.3s;
vertical-align: text-bottom;
}
input[type="checkbox"]:checked {
background-color: hsl(120,65%,55%);
border: 1px solid hsl(120,56%,55%);
}
input[type="checkbox"]:after {
position: absolute;
content: " ";
width: 16px;
height: 16px;
background-color: white;
border: 1px solid #d2d2d2;
border-radius: 16px;
box-shadow: 0px 1px 2px rgba(120,120,120,0.3);
left: 0;
top: 50%;
margin-top: -9px;
transition: 0.3s;
}
input[type="checkbox"]:checked:after {
left: 11px;
}
.sub-header {
font-family: helvetica;
text-align: center;
font-weight: bold;
}
.form-container select {
margin-top: -2px;
font-size: 1.0em;
color: #222;
font-family: Lato;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
.radio-item table {
margin-top: 10px;
width: 100%;
text-align: center;
}
.left-right-item table {
text-align: center;
}
.left-right-item > span,
.check-item > span,
.form-item > span {
display: block;
margin-bottom: 10px;
}
.table-item {
font-size: 1.2em;
padding-left: 12px;
}
.table-item .label {
text-align: right;
width: 1px;
}
.table-item table.multiple-items {
width: 100%;
}
.table-item table.multiple-items tr {
border-bottom: 1px solid #ccc;
}
.table-item table.multiple-items tr:last-child {
border-bottom: none;
}
.table-item table.multiple-items td {
padding: 12px;
}
.table-item select,
.table-item input {
box-sizing: border-box;
width: 100%;
}
.multi-select {
display: inline-block;
border: 1px solid hsl(10,80%,50%);
border-radius: 5px;
color: hsl(10,80%,50%);
font-size: 0.8em;
white-space: nowrap;
}
.multi-select span {
cursor: pointer;
display: inline-block;
padding: 6px 12px;
border-right: 1px solid hsl(10,80%,50%);
transition: 0.3s;
}
.multi-select span.selected {
color: white;
background-color: hsl(10,80%,50%);
}
.multi-select span:last-child {
border-right: none;
}
.left-right-item td {
padding: 5px;
}
.form-item td {
padding: 5px;
}
.form-container input[type="text"] {
font-size: 1.0em;
font-family: Lato;
color: #222;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
.form-item table input[type="text"] {
box-sizing: border-box;
width: 100%;
}
.semmes {
text-align: center;
}
.title {
text-align: center;
font-family: helvetica;
font-weight: bold;
margin-bottom: 10px;
}
.semmes .point-container {
display: inline-block;
position: relative;
}
.test-point {
cursor: pointer;
position: absolute;
width: 100px;
height: 100px;
background-color: hsla(5,70%,60%,0.5);
border: 1px solid hsla(5,70%,55%,0.55);
border-radius: 100px;
transform: scale(0.6,0.6);
transition: 0.3s;
}
.test-point.selected {
background-color: hsla(120,70%,60%,0.5);
border-color: hsla(120,70%,55%,0.55);
}
.test-point:before {
position: absolute;
content: " ";
width: 50px;
height: 50px;
background-color: hsl(5,60%,50%);
border: 1px solid hsl(5,60%,40%);
border-radius: 50px;
top: 50%;
margin-top: -26px;
left: 50%;
margin-left: -26px;
transition: 0.3s;
}
.test-point.selected:before {
background-color: hsl(120,60%,50%);
border-color: hsl(120,60%,40%);
}
.test-point span {
position: absolute;
content: " ";
width: 26px;
height: 10px;
background-color: hsla(0,0%,100%,1);
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -13px;
border-radius: 2px;
transition: 0.7s ease-out;
}
.test-point.selected span {
transform: rotateZ(310deg);
margin-left: -9px;
margin-top: -4px;
}
.test-point span:after {
position: absolute;
content: " ";
width: 10px;
height: 10px;
background-color: hsla(0,0%,100%,1);
bottom: 0;
left: 0;
border-radius: 2px;
transition: 0.2s;
/* transition-delay: 0.9s; */
}
.test-point.selected span:after {
height: 18px;
/* transition-delay: 0s; */
}
.test-point[data-point-number="1"] {
top: 35px;
left: 65px;
}
.test-point[data-point-number="2"] {
top: 160px;
left: 100px;
}
.test-point[data-point-number="3"] {
top: 180px;
left: 20px;
}
.test-point[data-point-number="4"] {
top: 230px;
left: -30px;
}
.test-point[data-point-number="5"] {
top: 280px;
left: 89px;
}
.test-point[data-point-number="6"] {
top: 260px;
left: 29px;
}
.test-point[data-point-number="7"] {
top: 300px;
left: -20px;
}
.test-point[data-point-number="8"] {
top: 400px;
left: 50px;
}
.test-point[data-point-number="9"] {
top: 410px;
left: -15px;
}
.test-point[data-point-number="10"] {
top: 560px;
left: 35px;
}
.test-point[data-point-number="11"] {
top: 35px;
right: 65px;
}
.test-point[data-point-number="12"] {
top: 160px;
right: 100px;
}
.test-point[data-point-number="13"] {
top: 180px;
right: 20px;
}
.test-point[data-point-number="14"] {
top: 230px;
right: -30px;
}
.test-point[data-point-number="15"] {
top: 280px;
right: 89px;
}
.test-point[data-point-number="16"] {
top: 260px;
right: 29px;
}
.test-point[data-point-number="17"] {
top: 300px;
right: -20px;
}
.test-point[data-point-number="18"] {
top: 400px;
right: 50px;
}
.test-point[data-point-number="19"] {
top: 410px;
right: -15px;
}
.test-point[data-point-number="20"] {
top: 560px;
right: 35px;
}
.feet-diagram {
text-align: center;
margin: 10px auto;
padding: 10px;
}
.diagram-container {
position: relative;
display: inline-block;
}
.notes {
cursor: pointer;
position: absolute;
right: 10px;
top: 6px;
z-index: 1;
width: 30px;
height: 34px;
opacity: 0.4;
background-color: hsl(45,10%,80%);
border: 1px solid hsl(45,10%,65%);
transition: 0.3s;
}
.notes.open, .notes.content, .notes:hover {
background-color: hsl(45,90%,80%);
border-color: hsl(45,90%,65%);
}
.notes:hover {
opacity: 0.6;
}
.notes:before {
position: absolute;
content: " ";
top: -1px;
right: -1px;
border-top: 6px solid white;
border-right: 6px solid white;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
}
.notes:after {
position: absolute;
content: " ";
top: -1px;
right: -1px;
border-left: 6px solid hsl(45,10%,65%);
border-bottom: 6px solid hsl(45,10%,65%);
border-top: 6px solid transparent;
border-right: 6px solid transparent;
transition: 0.3s;
}
.notes.content:after, .notes:hover:after {
border-left-color: hsl(45,90%,65%);
border-bottom-color: hsl(45,90%,65%);
}
.notes.open, .notes.content {
opacity: 1;
}
.notes.open {
cursor: default;
width: 200px;
min-height: 150px;
height: auto;
z-index: 2;
padding: 15px 5px 5px 5px;
}
.notes.open:before, .notes.open:after {
display: none;
}
.note-clipper {
overflow: hidden;
}
.note-input, .notes .close-button {
display: none;
}
.open .note-input {
display: block;
outline: none;
width: 100%;
margin-top: 13px;
min-height: 150px;
min-width: 200px;
line-height: 1.35em;
}
.notes.open .close-button {
cursor: pointer;
display: block;
position: absolute;
top: 3px;
right: 3px;
content: " ";
left: 0;
height: 25px;
/* border: 1px solid black; */
}
.notes.open .close-button:after {
position: absolute;
top: 6px;
right: 0px;
content: " ";
width: 16px;
height: 4px;
background-color: hsl(45,90%,60%);
transform: rotateZ(-45deg);
}
.notes.open .close-button:before {
position: absolute;
top: 0px;
right: 0px;
content: " ";
width: 15px;
height: 15px;
box-shadow: inset -2px 2px 0px 2px hsl(45,90%,60%);
}
.foot-diagram-notes {
width: 100%;
}
.foot-diagram-notes tbody {
border: 1px solid #ccc;
border-left: none;
border-right: none;
}
.foot-diagram-notes tr:first-child td:nth-child(1),
.foot-diagram-notes tr:first-child td:nth-child(2),
.foot-diagram-notes tr:first-child td:nth-child(4) {
width: 1px;
}
.diagram-note-input {
vertical-align: top;
}
.diagram-note-input div[contenteditable] {
background-color: hsl(45,90%,80%);
border: 1px solid hsl(45,90%,65%);
padding: 5px;
min-height: 140px;
}
.add-picture {
width: 150px;
height: 150px;
background-color: #999;
border: 1px solid #666;
color: white;
text-align: center;
line-height: 150px;
font-size: 0.8em;
}
.foot-diagram-notes td {
/* border: 1px solid black; */
}
.feet-diagram .feet-diagram-point {
cursor: move;
}
.feet-diagram .left,
.feet-diagram .right {
position: relative;
/* border: 1px solid black; */
}
.feet-diagram-point {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 35px;
height: 35px;
background-color: hsl(200,80%,50%);
border: 1px solid hsl(200,50%,50%);
border-radius: 50px;
text-align: center;
line-height: 33px;
padding-right: 1px;
color: white;
font-size: 14px;
}
.feet-diagram-point:after {
position: absolute;
content: " ";
top: 100%;
left: 50%;
margin-top: -5px;
margin-left: -9px;
border-top: 20px solid hsl(200,80%,50%);
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
.feet-diagram-point:before {
position: absolute;
content: " ";
top: 100%;
left: 50%;
margin-top: -3px;
margin-left: -9px;
border-top: 20px solid hsl(200,50%,50%);
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
.delete-foot-point,
.delete-anticoagulant,
.delete-product {
cursor: pointer;
position: relative;
display: inline-block;
box-sizing: border-box;
width: 23px;
height: 23px;
background-color: hsl(5,80%,50%);
border: 1px solid hsl(5,50%,50%);
border-radius: 50px;
text-align: center;
line-height: 19px;
color: white;
font-size: 12px;
top: -4px;
}
tr:last-child .delete-anticoagulant,
tr:last-child .delete-product {
display: none;
}
.final-notes {
background-color: hsl(45,90%,80%);
border: 1px solid hsl(45,90%,65%);
padding: 10px;
margin: 10px;
min-height: 200px;
box-sizing: border-box;
}
.product-wrap {
width: 500px;
margin: 0 auto;
}
.products {
display: inline-block;
table-layout: fixed;
border-top-left-radius: 5px;
width: calc(100% + 10px);
overflow: hidden;
}
.products thead td {
border-bottom: 1px solid #aaa;
background-color: #ddd;
}
.products thead td:last-child {
width: 1px;
border-bottom: none;
background-color: transparent;
}
.products thead td:nth-child(1) {
width: 1px;
}
.products thead td:nth-child(2) {
width: 50px;
}
.products thead td:nth-child(4) {
width: 125px;
}
.products thead td:nth-child(5) {
border-top-right-radius: 5px;
overflow: hidden;
width: 125px;
}
.products tbody td {
border-bottom: 1px solid #ccc;
}
.products tbody td:last-child,
.products tbody tr:last-child td {
border-bottom: none;
}
.products tbody input,
.products tbody select {
width: 100%;
}
.products tbody tr:nth-child(2n) td {
background-color: #f0f0f0;
}
.products tbody tr:nth-child(2n) td:last-child {
background-color: transparent;
}
.product-totals {
float: right;
}
.product-totals .amount {
font-weight: bold;
text-align: right;
width: 125px;
border-bottom: 1px dotted #ccc;
}
!
