﻿child-vaccine-schedule .vaccine-table-th div {
    float: left;
    width: 5.555555555555556%;
    text-align: center;
    padding: 10px;
    background: whitesmoke;
    border-right: 1px solid white;
}

child-vaccine-schedule table.cdc-vacccine {
    width: 100%;
    text-align: center;
    border: none;
    table-layout: fixed;
}

child-vaccine-schedule table.cdc-vacccine th {
    /* width: 5.555555555555556%; */
    text-align: center;
    padding: 10px;
    background: #b1b0b0;
    border: 1px solid #cabdbd;
    color: #616060;
    font-size: 12px;
    height: 42px;
}
child-vaccine-schedule table.cdc-vacccine th:last-child {
    border-right: none;
}

child-vaccine-schedule table.cdc-vacccine td {
    border: 1px solid #dedede;
    padding: 10px;
    /* height: 50px; */
    background: whitesmoke;
    width: 5.555555555555556% !important;
}

child-vaccine-schedule table.cdc-vacccine td:first-child {
    background: #bfbfbf;
    color: white;
    height: 41px;
    font-size: 12px;
}

child-vaccine-schedule table.cdc-vacccine tr.top-head th {
    background: #eaeaea;
    color: grey;
    padding: 0;
    font-size: 11px;
    text-transform: uppercase;
    border: none !important;
    border-right:1px solid lightgrey !important;
    border-bottom:1px solid lightgrey !important;
    height: 25px;
}
child-vaccine-schedule table.cdc-vacccine tr.top-head th:last-child {
	border-right:none!important
}
.vaccine-table {
	position:relative;
}
.vaccine-btn {
    height: 40px;
    border: none;
    background-color: rgb(0, 158, 215);
    width: calc(5.555555555555556%);
    position: absolute;
    top: 0;
    left: 0;
    /* margin: 5px; */
    /* border-radius: 5px; */
    display: block;
    box-sizing: border-box;
    border-right: 1px solid white;
    font-size: 12px;
    font-weight: bold;
    color: white;
    overflow: hidden;
    line-height: 12px;
    text-align: center;
    text-shadow: none;
}
.vaccine-btn:hover {
	background-color: rgba(0, 158, 215, .9);
	z-index:1000;
}
tr.top-head th {
    border: 1px solid lightgrey !important;
}
child-vaccine-schedule table.cdc-vacccine td:first-child {
    border-left: 1px solid #bfbfbf;
}
.color-green {
    background: #197A85;
    cursor: default;
}
.color-green:hover {
    background-color: rgba(0, 112, 192, .8);
}
.color-violet {
    background: #963484;
    cursor: default;
}
.color-violet:hover {
    background-color: rgba(150, 52, 132, .8);
}
.color-blue {
    background: #b5e8fb;
    cursor: default;
}
.color-blue:hover {
    background-color: rgba(181, 232, 261, .8);
}

.HepB {
	top: 68px;
}
.RV {
    top: 109px;
}
.DTaP {
	top: 150px;
}

.Hib {
	top: 191px;
}
.PCV13 {
	top: 232px;
}
.IPV {
	top: 273px;
}
.IIV {
	top: 314px;
}
.MMR {
	top: 355px;
}
.VAR {
	top: 396px;
}
.HepA {
	top: 437px;
}
.MCV {
	top: 478px;
}
.Tdap {
    top: 519px;
}
.HPV {
    top: 560px;
}
.MenB {
    top: 601px;
}
.PPSV23 {
	top: 642px;
}
.span0 {
	display:none;
}
.span1 {
	width: 5.555555555555556%;
	/* margin: 5px; */
}

.span2 {
	width: calc(5.555555555555556% * 2);
}

.span3 {
	width: calc(5.555555555555556% * 3);
}

.span4 {
	width: calc(5.555555555555556% * 4);
}

.span5 {
	width: calc(5.555555555555556% * 5);
}

.span6 {
	width: calc(5.555555555555556% * 6);
}

.span7 {
	width: calc(5.555555555555556% * 7);
}

.span8 {
	width: calc(5.555555555555556% * 8);
}

.span9 {
	width: calc(5.555555555555556% * 9);
}

.span10 {
	width: calc(5.555555555555556% * 10);
}

.span11 {
	width: calc(5.555555555555556% * 11);
}

.span12 {
	width: calc(5.555555555555556% * 12);
}

.span13 {
	width: calc(5.555555555555556% * 13);
}

.span14 {
	width: calc(5.555555555555556% * 14);
}

.span15 {
	width: calc(5.555555555555556% * 15);
}

.span16 {
	width: calc(5.555555555555556% * 16);
}

.posBirth {
	left: 5.2em;
}

.pos1 {
	left: calc(5.2em + 5.555555555555556%);
}

.pos2 {
	left: calc(5.2em + 5.555555555555556% * 2);
}

.pos4 {
	left: calc(5.2em + 5.555555555555556% * 3);
}

.pos6 {
	left: calc(5.2em + 5.555555555555556% * 4);
}

.pos9 {
	left: calc(5.2em + 5.555555555555556% * 5);
}

.pos12 {
	left: calc(5.2em + 5.555555555555556% * 6);
}

.pos15 {
	left: calc(5.2em + 5.555555555555556% * 7);
}

.pos18 {
	left: calc(5.2em + 5.555555555555556% * 8);
}

.pos19-23 {
	left: calc(5.2em + 5.555555555555556% * 9);
}

.pos2-3 {
	left: calc(5.2em + 5.555555555555556% * 10);
}

.pos4-6 {
	left: calc(5.2em + 5.555555555555556% * 11);
}

.pos7-10 {
	left: calc(5.2em + 5.555555555555556% * 12);
}

.pos11-12 {
	left: calc(5.2em + 5.555555555555556% * 13);
}

.pos13-15 {
	left: calc(5.2em + 5.555555555555556% * 14);
}

.pos16 {
	left: calc(5.2em + 5.555555555555556% * 15);
}

.pos17-19 {
	left: calc(5.2em + 5.555555555555556% * 16);
}

.topPositionInRow {
    height: 20px;
}
.bottomPositionInRow {
    height: 20px;
    margin-top: 20px;
}

.vaccineReceived {
    /*background-image: url(../../images/check-circle-green.png);
    background-repeat: no-repeat;
    background-size: 12px 12px;
    border-left: 2px solid transparent;
    background-position: 0 2px;
    */
    /*text-decoration:line-through;*/
    opacity: 1;
}

child-vaccine-schedule .legend ul {
    text-align: left;
    list-style: none;
    padding: 0;
	overflow:auto;
	margin-top:15px;
}

child-vaccine-schedule .legend li {
    display: inline-block;
    width: 25%;
    float: left;
    position: relative;
    padding-left: 30px;
    font-size: 10px;
    padding-right: 10px;
    color: grey;
    margin-bottom: 15px;
}

child-vaccine-schedule .legend li span {
    position: absolute;
    width: 25px;
    height: 15px;
    top: 0;
    left: 0;
    background: white;
    border: 1px solid lightgrey;
}

child-vaccine-schedule .legend li span.leg-yellow {
    background: #009ed7;
    border-color: #009ed7;
}

child-vaccine-schedule .legend li span.leg-green {
    background: #197A85;
    border-color: #197A85;
}

child-vaccine-schedule .legend li span.leg-violet {
    background: #963484;
    border-color: #963484;
}

child-vaccine-schedule .legend li span.leg-blue {
    background: #b5e8fb;
    border-color: #b5e8fb;
}

child-vaccine-schedule .legend li span.leg-now {
    background: -webkit-repeating-linear-gradient(45deg, #fbd462, #fbd462 5px, #fbc013 5px, #fbc013 10px);
    background: repeating-linear-gradient(45deg, #fbd462, #fbd462 5px, #fbc013 5px, #fbc013 10px);
    border-color:lightgrey;
}

child-vaccine-schedule .legend li span.leg-received {
    background: #23ce6b;
    border-color: #23ce6b;
    text-align: center;
    line-height: 10px;
    font-size: 15px;
    color: white;
    text-decoration: none;
}

child-vaccine-schedule .vaccine-btn span {
	position:relative;
	z-index:100;
}

.vaccineRecommendedNow {
    /*color: white;
    background: -webkit-repeating-linear-gradient(45deg, #fbd462, #fbd462 5px, #fbc013 5px, #fbc013 10px);
    background: repeating-linear-gradient(45deg, #fbd462, #fbd462 5px, #fbc013 5px, #fbc013 10px);
    color: black;
    border: none;*/
}
.vaccineRecommendedNow:hover {
    opacity:.8;
}

.vaccineFootnote {
    float:left;
    color:#337ab7;
}

/*.vaccineReceived:before {
	background: url('../../images/line.png');
	background-size: 100% 100%;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
}
.vaccineReceived:after {
  background:url('../../images/line.png');
    background-size:100% 100%;
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:100;
    -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}*/

.vaccineReceived:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 0;
    z-index: 100;
    content: '\e14c';
    font-family: Material Icons;
    font-size: 18px;
    margin-top: -12px;
    color: white;
    opacity: .7;
    line-height: 24px;
	text-decoration: none !important;
}

.vaccineReceived span {
	display:none;
}

.vaccineReceived:hover span {
	display:block;
	opacity:.5;
	text-decoration:line-through;
}

.vaccineReceived:hover:before {
	display:none;
}

table.cdc-vacccine tr td:first-child a {
    color: #616060;
}

.vaccineReceived {
    background: rgb(35, 206, 107);
}

.vaccineReceived:hover {
    background: rgba(35, 206, 107, .8);
}

.vaccineRecommendedNow {
    background:#F18F01;
}
.vaccineRecommendedNow:hover {
    background: rgba(241, 143, 1, 0.8);
}
.vaccineLate {
    background: #d24545;
}
.vaccineLate:hover {
    background: rgba(210, 69, 69, 0.8);
}

child-vaccine-schedule .legend li span.leg-recommended {
    background: #f18f01;
    border: #f18f01;
}

child-vaccine-schedule .legend li span.leg-late {
    background: #d24545;
    border: #d24545;
}

child-vaccine-schedule .tab-content {
    overflow-x: auto;
}