@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:400,700);

html {
    width: 100%;
    margin: 0;
    padding: 0;
}
body, h1, h2, h3, h4, h5, form, a, p, ul, ol, li, img, textarea, input, select, option, fieldset {
    font: 100% "Open Sans", sans-serif;
    color: #5c5c5c;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
body.noscroll {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bold, .bold a {
    font-weight: 700;
}
.heavy {
    color: #000;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}
.center {
    text-align: center;
}
#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


#alerts {
    position: absolute;
    top: -100%;
    right: 0;
    max-width: 25%;
    background: #fff;
    border-left: solid 1px #2A678E;
    border-bottom: solid 1px #2A678E;
    transition: all .5s;    
    overflow: hidden;
    z-index: 1;
}
#alerts .cards {
    background: #F9F9FA;
    padding: 0;
    border-top: none;
    border-right: none;
}
#alerts .cards div {
    padding-bottom: 16px;
}
#alerts .cards div:last-child {
    padding-bottom: 0;
}
#alerts.show {
    top: 105px;
    -webkit-overflow-scrolling: touch;
}
#alerts .innersub {
    width: 100%;
    margin: 0;
}
#alerts .cards .innersub p.create {
    padding: 0;
    text-align: center;
}
#alerts .cards .innersub p.create a {
    display: block;
    border-radius: 0;
    border: none;
    border-top: solid 1px #fff;
    background: #2A678E;
    color: #fff;
    padding: 4px 0;
}
#alerts .cards .innersub p.create a:hover {
    text-decoration: none;
    background: #2d3481;    
}
#alerts .innersub div {
    margin: 8px;
}
#alerts .innersub div div {
    margin: 4px 0;
}
#alerts .close {
    color: #fff;
    position: absolute;
    display: inline-block;
    top: 1px;
    right: 0;
    font-size: 20px;
    padding: 0 12px 3px 12px;
    margin: auto;
    text-align: right;
    z-index: 100;
    transition: background .2s, color .2s;
}
#alerts .close:hover {
    cursor: default;
    background: #9B3D3D;
}
#nav {
    position: fixed;
    top: -100%;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    visibility: hidden;
    text-align: center;
    background: #333333;
    background: rgba(0,0,0,.8);
    font-size: 30px;
    z-index: 9999;
    transition: all .3s;
}
#nav.show {
    top: 0;
    overflow: auto;
    visibility: visible;
    -webkit-overflow-scrolling: touch;
}
#nav ul {
    display: inline-block;
    padding-top: 5%;
}
#nav li {
    margin: 6px 0;
}
#nav li.group {
    color: #808080;
    font-size: 24px;
    margin: 16px 0 0 0;
}
#nav li a {
    color: #fff;    
}
#nav li a:hover {
    color: #808080;    
}
#nav .close {
    position: absolute;
    display: inline-block;
    top: 20px;
    right: 10%;
    font-size: 32px;
    padding: 0 12px 4px 12px;
    color: #fff;
    margin: auto;
    text-align: right;
    transition: background .2s;
}
#nav .close:hover {
    cursor: default;
    background: #9B3D3D;
}

#modalwrap {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
    background: #2A678E;
	background: rgba(42,103,142,.8);
	z-index: 999;
	transition: opacity .5s .2s, visibility 0s .5s;
}
#modalwrap.show {
	opacity: 1;
	visibility: visible;
	transition: opacity .5s;
}
#modal {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 7.5%;
	left: 7.5%;
	width: 85%;
    height: 85%;
	background: #fff;
	border: solid 1px #c6c6c6;
	box-shadow: 0 0 30px 0 #111;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    transition: all .5s;
}
#modal #sub {
    height: 85%;
    height: calc(100% - 79px);
    overflow-y: auto;
}
#modal #innersub {
    width: 100%;
}
#modal #innersub.family {
    height: auto;
}
#innersub.family .cards.full {
    width: auto;
}
#sub.general .links {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;    
}
#sub.general .links div {
    position: relative;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 25%;
    color: #fff;
    border: solid 1px #fff;
    text-align: center;
    padding: 4px 0;
    background: #9B3D3D;
}
#sub.general .links div.notsaved {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    float: none;
    width: 100%;
    z-index: 999;
}
#sub.general .links div.notsaved p {
    color: #fff;
}
#sub.general .links div.notsaved.switch {
    display: block;
}
#sub.general .links div a {
    color: #fff;
}
#sub.general .links div span {
    box-sizing: border-box;
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 4px;
    color: #fff;
    background: #9B3D3D;
    z-index: 999;
    transition: all .2s;
}
#sub.general .links div:hover span {
    top: 100%;
    visibility: visible;
    opacity: 1;
}
#sub.general .links div span a {
    border: solid 1px #fff;
    margin: 4px;
}
#sub.general .links span a.linkmembers {
    display: block;
    color: #fff;
    padding: 4px;
}
#sub.general .links span a.linkmembers.new {
    text-transform: uppercase;
    background: #813333;
}
#sub .temp {
    width: 75%;
    margin: 64px auto;
    text-align: center;
}
#modalwrap.show #modal {
	opacity: 1;
	visibility: visible;
    transition: all .5s .2s;  
}
#modal .close, #modal .justclose, #modal .closePA, #modal .closePAAJAX, #modal .closePAAJAXvisit {
	position: absolute;
	top: 0;
	right: 0;
    padding: 0 8px 4px 8px;
	font-size: 32px;
	color: #fff;
    z-index: 9999;
}



#modal .close:hover, #modal .justclose:hover {
    cursor: default;
    background: #9B3D3D;
}
.pulltitle a {
    color: #fff;
}
.pulltitle p.surveybutton {
    text-align: center;
}
.pulltitle p.surveybutton a {
    display: inline-block;
    padding: 4px 8px;
    border: solid 1px #aaa;
    border-top: none;
    border-radius: 2px;
    background: #9B3D3D;
}
.pulltitle .back {
	position: absolute;
	top: 0;
	left: 8px;
	font-size: 32px;
	color: #fff;
    z-index: 800;
}
.pulltitle .back:hover {
    cursor: default;
	color: #ddd;
}
.pulltitle .back.inmodal {
    display: none;
}
#modalcontent {
    height: 100%;
}
#modalcontent .pulltitle {
    background: #2A678E;
    z-index: 700;
    min-height: 47px;
}
#modalcontent h1 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 200%;
    text-align: center;
    padding: 4px 0;
    width: 100%;
    background: #2A678E;
    color: #fff;
}
#modalcontent h1 img {
    vertical-align: middle;
    border-radius: 50%;
}
#modalcontent h1 span {
    font-size: 75%;
}
#modalcontent h1 a {
    font-family: "Roboto Condensed", sans-serif;
}
#modalcontent h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 150%;
    text-align: center;
    padding-bottom: 4px;
    width: 100%;
    background: #2A678E;
    color: #fff;
}

#topbar {
    position: relative;
    width: 100%;
    background: #2A678E;
    z-index: 700;
}
#topbar a.back {
    position: absolute;
    bottom: 0;
    left: 2px;
    color: #fff;
	font-size: 40px;
}
#topbar .content {
    position: relative;
    text-align: center;
    width: 80%;
    margin: auto;
}
#topbar .content h1, #topbar .content h2, #topbar .content p, #topbar .content a {
    color: #fff;    
}
#topbar .content .logo {
    position: relative;
    float: left;
    z-index: 999;
}
#topbar .content .title {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    z-index: 100;
}
#topbar .content .title.short h1 {
    padding-top: 8px;
}
#topbar .content h1 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 200%;
    display: inline-block;
}
#topbar .content h1 a {
    font-family: "Roboto Condensed", sans-serif;
}
#topbar .content h1.noimg img {
    display: none;
}
#topbar .content h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 150%;
}
#topbar .content .menu {
    position: relative;
    float: right;
    margin-top: 28px;
    font-size: 14px;
    z-index: 600;
}
#topbar .content .menu i {
    font-size: 28px;
}
#topbar .content .menu i.fa-stack-1x {
    color: #9B3D3D;
    font-size: 18px;
}
#topbar .content .menu a {
    display: inline-block;
    margin-left: 16px;
    transition: color .2s;
}
#topbar .content .menu a:hover {
    color: #ddd;
}

#login {
    text-align: center;
}
#login form {
    box-sizing: border-box;
    width: 300px;
    margin: 10% auto 0 auto;
}
#login form p.welcome {
    font-size: 100%;
    background: #2d3481;
    color: #fff;
    padding: 4px;
}
#login form p.error {
    font-size: 100%;
    background: #9B3D3D;
    color: #fff;
    margin-top: 4px;
    padding: 4px;
}
#login form input {
    font-size: 20px;
    color: #5c5c5c;
    box-sizing: border-box;
    display: inline-block;
    border: none;
    border-bottom: solid 1px #2d3481;
    padding: 8px 4px;
    width: 100%;
    margin: 4px 0;
}
#login form input[type="submit"] {
    background: transparent;
    border: solid 1px #2d3481;
    margin-top: 16px;
}
#login form input[type="submit"]:hover {
    border: solid 1px #78A22F;
    color: #78A22F;
}
#login form a {
    display: block;
    color: #2d3481;
    text-decoration: none;
    font-size: 14px;
    margin-top: 8px;
}
#login form a:hover {
    text-decoration: underline;
}
#search {
    width: 75%;
    margin: 8px auto 0 auto;
}
#search p {
    float: right;
    margin-right: 64px;
}
#search.fullsearch p, #search.fullsearch div.searchdate {
    width: 75%;
    float: none;
    margin: auto;
}
#search input {
    box-sizing: border-box;
    padding: 4px;
    width: 100%;
    font-size: 90%;
}
#home, #innersub {
    width: 75%;
    margin: auto;
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 64px 16px;
}
#innersub.newtable {
    display: block;
}
#home .row, #innersub .row {
    display: table-row;
}
#innersub .group {
    display: table-row-group;
}
#innersub .group.newtable {
    display: table;
    width: 100%;
    margin: auto;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 64px 16px;
}
#innersub.notable {
    display: block;
    margin-top: 16px;
}
.options {
    width: 75%;
    margin: 16px auto 0 auto;
    text-align: center;
}
.exports {
    width: 75%;
    margin: 16px auto 0 auto;
}
.exports input, .exports select {
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px;
    font-size: 90%;
}
.exports input[type="submit"] {
    padding: 4px 8px;
    font-size: 14px;
    background: transparent;
    border: solid 1px #2d3481;
    border-radius: 2px;
}
.options a.button, .options select {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 8px;
    font-size: 14px;
    background: transparent;
    border: solid 1px #2d3481;
    border-radius: 2px;
    min-height: 31px;
}
.options select {
    -webkit-appearance: menulist;
}
.cards {
    vertical-align: top;
    background: #fff;
    display: table-cell;
    box-sizing: border-box;
    border: solid 1px #ddd;
    border-top: solid 4px #2A678E;
    padding: 8px;
    margin: 0 2.5% 16px 2.5%;
    width: 45%;
}

/*added ERD on 2/7/2020*/
.cardsV {
    vertical-align: top;
    background: #fff;
    display: table-cell;
    box-sizing: border-box;
    /*border: solid 1px #ddd;
    border-top: solid 4px #2A678E;*/
    padding: 8px;
    margin: 0 0 0 0%;
    width: 99%;
}

.cards.nocell {
    display: block;
    float: left;
}
.cards.full {
    display: table-caption;
    caption-side: bottom;
    width: auto;
    margin: 0 64px;
}
#innersub.full {
    display: block;
}
#innersub.landscape {
    width: 99%;
    font-size: 95%;
}

#innersub.landscapeplanguide {
    width: 98%;
    font-size: 85%;
}


#innersub.landscapeplanguidePRINT {
    width: 98%;
    color: black;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    font-weight:2000px;
}


#innersub.full .cards .visitdeets {
    float: left;
    width: 35%;
}
#innersub.full .cards.totschart .visitdeets {
    padding: 16px;
}
#innersub.full .cards.totschart {
    background: #f8f8ff;
}
#innersub.full .cards.totschart .totals {
    font-size: 100%;
}
#innersub.full .cards.totschart table {
    table-layout: auto;
}
#innersub.full .cards.totschart td:last-child {
    width: auto;
}
#innersub.full .cards .chart {
    float: right;
    width: 45%;
    min-width: 410px;
    padding-right: 8px;
    margin-top: 16px;
}
#innersub.full .cards .chart .left, #innersub.full .cards .chart .right {
    width: 50%;
    margin-bottom: -50px;
}
#innersub.full .cards, .justsave {
    display: block;
    width: 75%;
    margin: 16px auto;
}
#innersub.landscape .cards {
    width: 100%;
}
#innersub.landscape .cards {
    overflow-x: auto;
}
#innersub.landscape .cards table {
    border-collapse: collapse;
    min-width: 800px;
}
#innersub.landscape .cards table th {
    text-align: left;
}
#innersub.landscape .cards table tr.famstart {
    border-top: solid 1px #ccc;
}
#innersub.landscape .cards table tr.famstart td {
    padding-top: 6px;
}
.justsave {
    padding: 8px;
}
.cards.mini {
    display: block;
    float: left;
    width: 47%;
    height: 200px;
    min-width: auto;
    text-align: center;
    border-top: solid 1px #ddd;
    border-bottom: solid 4px #2A678E;
    margin: 0 1.5% 16px 1.5%;
}
a .cards.mini p {
    color: #5c5c5c;
}
a:hover .cards.mini p {
    color: #aaa;
}
.cards.mini p {
    color: #aaa;
}
a:hover .cards.mini p {
    color: #aaa;
}
.cards table {
    table-layout: fixed;  
    width: 100%;
}
.bridgingreport .cards {
    overflow-x: auto;
}
.bridgingreport .cards table {
    table-layout: auto; 
    border-collapse: separate;
    border-spacing: 2px 0;
    font-size: 90%;
}
.bridgingreport .cards table th {
    padding: 0 4px;
    border-bottom: solid 1px #ddd;
}
.bridgingreport .cards table th:first-child {
    text-align: left;
}
.bridgingreport .cards table td {
    text-align: center;
    padding: 1px 4px;
}
.bridgingreport .cards table td:first-child  {
    text-align: left;
}
.bridgingreport .cards table tr:last-child  {
    background: #f8f8ff;
}
.cards table td:last-child {
    width: 40%;
}
.bridgingreport .cards table td.green, .bridgingreport .cards table th.green {
    background: #BED29B;
}
.bridgingreport .cards table td.blue, .bridgingreport .cards table th.blue {
    background: #B6C1D9;
}
.bridgingreport .cards table td:last-child {
    width: auto;
}
.cards table.fampic tr:nth-child(even) {  
    background: #eee;
}
.cards table.fampic td {  
    padding: 2px 0 2px 8px;
}
.cards table.fampic td:last-child {
    width: 60%;
}
.cards table.fampic td div {  
    padding: 0;
    margin: 0;
}
.cards table.fampic td label {  
    display: block;
    width: 100%;
    padding: 8px 0;
}
.cards table.fampic td input.name {  
    width: 50%;
}
.cards table.fampic td textarea {  
    height: 64px;
    padding: 4px;
}
.cards table.immunize th {
    background: #2A678E;
    color: #fff;
    padding: 6px 0;
}

.cards table.immunizesmall th {
    background: #2A678E;
    color: #fff;
    padding: 6px 0;
}
.cards div {
    position: relative;
    margin: 8px 0;
    padding-bottom: 16px;
    border-bottom: solid 1px #aaa;
}
.cards div.tg, .cards div.childtoggle, .cards div.er1next {
    padding-bottom: 0;
}
.cards div.left {
    width: 50%;
    border-bottom: none;
    padding-bottom: 0;
}
.cards .famdetails {
    position: relative;
    margin: 0 0 -4px 0;
    padding: 0;
}
.cards .famdetails div {
    margin: 0;
    border-bottom: none;
}
.famdetails p.agency, .famdetails p.visitor {
    font-size: 75%;
    position: absolute;
    bottom: 0;
}
.famdetails p.agency {
    left: 0;
}
.famdetails p.visitor {
    right: 0;
}
.famdetails p.alldetails {
    font-size: 75%;
    display: none;
}
.cards.borderless div {
    margin: 4px 0;
    border-bottom: none;
}

.cards.borderlessnomarg div {
    margin: 0px 0;
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 50%;

}

.cards.borderlessnomargprint div {
    margin: 0px 0;
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 50%;
    background-color: white;

}





.cards.borderless div.clear {
    margin: 0;
    padding: 0;
}
.cards.borderless div.indent {
    margin: 4px 0 0 12px;
    padding-bottom: 0;
}

.cards.borderless div.smallfont {
    font-size: 100%;
}
.cards.borderless div.visitdeets div.indent {
    margin: 4px 0 0 16px;
    padding-bottom: 0;
}
.cards.borderless div.visitdeets div.indent p.deetsline {
    border-bottom: solid 1px #ddd;
    padding: 4px 0;
    margin: 4px 0;
}
.cards.borderless div.radio, .cards.borderless div.toggle {
    display: flex;
  align-items: center;
}
.cards.borderless div.radio label, .cards.borderless div.toggle label {
    flex: 1 auto;
    display:flex;
    justify-content:center;
    align-self:stretch;
    align-items:center;
}
.cards.borderless div.textbox {
    padding-bottom: 19px;
}
.cards.borderless div.toolcheck {
    background: #eee;
    color: #999;
    font-size: 90%;
    box-sizing: border-box;
    display: inline-block;
    width: 25%;
    border: solid 1px #ccc;
    padding-bottom: 0;
    margin-bottom: 8px;
}
.cards.borderless div.toolcheck.notsched {
    background: #fff;
    color: #5c5c5c;
}
.cards.borderless div.toolcheck span {
    display: block;
    padding: 4px 8px;
    text-align: center;
}
.cards.borderless div.toolcheck span.toolname {
    background: #6087A1;
    color: #fff;
}
.cards.borderless div.toolcheck.notsched span.toolname {
    background: #2A678E;
    color: #fff;
}
.cards.borderless div.toolcheck span.calcheck {
    padding: 4px 32px;
}
.cards.borderless div.toolcheck span.toolaction {
    background: #ddd;
    border-top: solid 1px #ddd;
}
.cards .toolcheck.notsched input[type="checkbox"] + label span.toolaction {
    display: none;
}
.cards.borderless div.toolcheck span.tooladd {
    border-top: solid 1px #ddd;
}
.cards.borderless div.toolcheck i {
    position: absolute;
    top: auto;
    left: 2px;
    font-size: 32px;
    color: #aaa;
}
.cards.borderless div.highlight {
    padding-bottom: 0;
    border: solid 1px #bbb;
    margin-bottom: 16px;
    background: #f8f8ff;
    padding: 0 8px;
}
.cards.borderless div.highlight input {
    background: transparent;
}
.cards.borderless p.hchart {
    background: #eee;
    margin: 4px 0 6px 0;
    min-height: 38px;
    width: 100%;
    box-sizing: border-box;
}
@keyframes stretch-bar {
    0% {
        width: 0;
    }
}
.cards.borderless p.hchart span.bar {
    background: #C2D4A0;
    display: none;
    padding: 8px 0;
    text-indent: 16px;
    width: 0%;
    box-sizing: border-box;
    animation: stretch-bar 1s ease-out;
}
.cards div.violent, .cards div.violentsub, .cards div.safety, .cards div.fam {
    margin: 0;
    padding-bottom: 0;
}
.cards div:last-child {
    border-bottom: none;
}
.cards div.links {
    text-align: center;
    margin: 8px 0;
    padding: 0;
    border-bottom: none;
}
.cards div.links a:hover {
    text-decoration: underline;
}
.cards div.multiinput, .reportcards div.multiinput {
    padding-bottom: 0;
}
.cards div.multiinput span {
    text-align: left;
    float: left;
    width: 47.5%;
}
.reportcards div.multiinput span.left {
    text-align: left;
    width: 47%;
    margin-left: 1.5%;
}
.reportcards div.multiinput span.right {
    text-align: left;
    width: 47%;
    margin-right: 1.5%;
}
.cards div.multiinput span.center, .reportcards div.multiinput span.center {
    text-align: center;
    margin-left: 5%;
}
.cards div p {
    padding-top: 3px;
}
.cards div p.reminder, .cards p.fpdue {
    background: #9B3D3D;
    color: #fff;
    padding: 3px;
}
.cards p.fpdue {
    margin-top: 4px;
}
.cards p.header, .cards p.category, .cards p.label-p, .cards p.header a, .reportcards p.header, #success p.header, .snapheader p.header {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
}

.cards p.headersmall, .cards p.headersmall a, .reportcards p.headersmall, #success p.headersmall, .snapheader p.headersmall {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
}

.cards p.headersmallPP, .cards p.headersmallPP a, .reportcards p.headersmallPP, #success p.headersmallPP, .snapheader p.headersmallPP {
    font-family: "Roboto Condensed", sans-serif;
    color: #5c5c5c;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.cards p.detailPP, .cards p.detailPP a, .reportcards p.detailPP, #success p.detailPP, .snapheader p.detailPP {
    font-family: "Roboto Condensed", sans-serif;
    color: #000000;
    font-size: 16px;
    font-weight: 200;
    text-transform: capitalize;
}

.cards p.enrollheader {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 4px;
}

.cards p.planprintbox {
  border: solid 1px #ddd;
    padding: 4px;
    margin: 0 0 4px 0;
}

.cards div.enrollgroup {
    background: #f8f8ff;
    border: solid 1px #ddd;
    padding: 4px;
    margin: 0 0 4px 0;
}



.cards div.enrollgroup p {
    font-size: 95%;
    margin: 0;
    padding: 0 12px;
}
.cards div.enrollgroup div.collapse, .cards div.piccologroup div.collapse {
    padding-bottom: 0;
}

.cards div.enrollgroup p.header {
    font: 100% "Open Sans", sans-serif;
    font-weight: 700;
    margin-left: 4px;
    padding: 0;
}
.cards div.enrollgroup p.header a {
    font-family: "Open Sans", sans-serif;
    font-size: 100%;
}
.cards div.enrollgroup .collapse p:first-child {
    padding: 4px 12px 0 12px;
}
.cards p.header a:hover, .cards li a:hover {
    text-decoration: underline;
}
.cards input.search {
    padding: 4px;
    width: 100%;
    font-size: 90%;
}
.cards.mini p {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-top: 50px;
}
.cards.mini p i {
    font-size: 32px;
}
.cards a {
    color: #2A678E;
}
.cards a:hover {
    text-decoration: underline;
}
.cards a.start {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    color: #78A22F;
    font-size: 13px;
    line-height: 45px;
    float: left;
    text-align: center;
    display: block;
    border: solid 2px #78A22F;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin-right: 16px;
    transition: all .2s;
}

.cards a.startsmall {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    color: #78A22F;
    font-size: 10px;
    line-height: 37px;
    float: left;
    text-align: center;
    display: block;
    border: solid 2px #78A22F;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    margin-right: 3px;
    transition: all .2s;
}

.cards a.start:hover {
    color: #C2D4A0;
    border: solid 2px #C2D4A0;
    text-decoration: none;
}
.cards a.review {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    color: #2d3481;
    font-size: 12px;
    line-height: 46px;
    float: left;
    text-align: center;
    display: block;
    border: solid 2px #2d3481;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin-right: 16px;
    transition: all .2s;
}

.cards a.reviewsmall {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    color: #2d3481;
    font-size: 10px;
    line-height: 37px;
    float: left;
    text-align: center;
    display: block;
    border: solid 2px #2d3481;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    margin-right: 3px;
    transition: all .2s;
}
.cards a.review:hover {
    color: #2A678E;
    border: solid 2px #2A678E;
    text-decoration: none;
}
.cards a.upload {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    color: #78A22F;
    font-size: 12px;
    line-height: 45px;
    float: left;
    text-align: center;
    display: block;
    border: solid 2px #78A22F;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin-right: 16px;
    transition: all .2s;
}
.cards a.upload:hover {
    color: #C2D4A0;
    border: solid 2px #C2D4A0;
    text-decoration: none;
}
.cards span.indicator {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    display: inline-block;
    border: solid 2px #2A678E;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}
.cards span.qlinks {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    background: #fff;
    border: solid 1px #ddd;
    padding: 10px 8px;
    border-radius: 8px;
    margin-top: -12px;
    margin-left: 16px;
    display: inline-block;
    z-index: 9999;
    box-shadow: 1px 1px 3px #aaa;
    transition: all .2s;
}
.cards span.qlinks:before {
    content:"";
    position: absolute;
    left: -10px;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid #888;
}
.cards span.indicator:hover span {
    visibility: visible;
    opacity: 1;
}
.cards span.indicator a:hover {
    cursor: default;
}
.cards span.indicator a:focus span {
    visibility: visible;
    opacity: 1;
}
#innersub ol, .cards ol {
    margin-left: 20px;
}
.cards ol li {
    list-style: decimal;
}
#innersub.whatsnew ol li {
    list-style: decimal;
    margin: 8px 0;
}
.cards li {
    margin: 4px 0;
}
.cards li.gone {
    text-decoration: line-through;
}
a.user i {
    color: #2A678E;
    font-size: 60px;
    padding: 16px;
    margin-top: 8px;
    border-radius: 50%;
    border: solid 2px #2A678E;
    background: #fff;
}
.cards a.user i {
    background: #ddd;
}
.cards #general a.user i {
    font-size: 100%;
    padding: 4px;
}
.pulltitle a.user i {
    vertical-align: top;
    font-size: 60%;
    padding: 6px;
    margin-top: 0;
}


.cards textarea {
    font-size: 14px;
    color: #5c5c5c;
    box-sizing: border-box;
    display: block;
    border: solid 1px #ddd;
    padding: 8px;
    width: 100%;
    height: 100px;  
}
.cards input, .reportcards input, .justsave input  {
    color: #5c5c5c;
    box-sizing: border-box;
    border: solid 1px #ddd;
    padding: 8px;
    margin: auto;    
    width: 100%;
}
.cards select, #search select {
    background: #fff;
    color: #5c5c5c;
    box-sizing: border-box;
    border: solid 1px #ddd;
    height: 38px;
    padding: 0 8px;
    margin: auto;    
    width: 100%;  
}
#search div.select {
    float: left;
    width: 33.33%;
    position: relative;
    font-size: 90%;
}
.cards div.select {
    margin-top: 0;
    border-bottom: none;
}
.cards div.datetime, .cards div.fullname, #search div.datetime {
    float: left;   
    width: 50%;
    margin: 0;
    padding: 0;
}
.cards div.shortdate {
    float: left;
    width: 33.33%;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    border: solid 1px #ddd;
    padding: 0;
    margin: 0 auto 25px auto;    
    height: 40px;
}
.cards div.shortdate select {
    border: none;
}

.cards div.shortdatefour {
    float: left;
    width: 25%;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    border: solid 1px #ddd;
    padding: 0;
    margin: 0 auto 25px auto;    
    height: 40px;
}
.cards div.shortdatefour select {
    border: none;
}



.cards div.shortdatefive {
    float: left;
    width: 20%;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    border: solid 1px #ddd;
    padding: 0;
    margin: 0 auto 25px auto;    
    height: 40px;
}
.cards div.shortdatefive select {
    border: none;
}





#lname {
    border-left: none;
}
.cards div.date, .cards div.time, .reportcards div.date, #search div.date {
    position: relative;
    box-sizing: border-box;
    border: solid 1px #ddd;
    padding: 0;
    margin: 0 auto 25px auto;    
    width: 100%;
    height: 40px;
}
.cards div.time {
    border-left: none;
}
.cards div.time.fullw {
    border-left: solid 1px #ddd;
}
.cards div.date input, .cards div.time select, .reportcards div.date input, .cards div.shortdate input, .cards div.shortdatefour input, .cards div.shortdatefive input, #search div.date input {
    height: 100%;
    padding-left: 8px;
    border: none;
}
.cards div.date label, .cards div.time label, .reportcards div.date label, .cards div.shortdate label, .cards div.shortdatefour label, .cards div.shortdatefive label, #search div.date label {
    position: absolute;
    top: 8px;
    left: 8px; 
    width: auto;
}
.cards div.date button, #search div.date button, .cards div.pushdate button, .collapse div.tf button, .cards div.shortdate button, .cards div.shortdatefour button, .cards div.shortdatefive button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 38px;
}
/* Had to adjust this to make the buttons fit */
.collapse div.tf button {
    bottom: 16px;
}
.cards div.check, .cards div.collapse {
    margin: 0;
}
.cards input[type="checkbox"], .cards input[type="radio"], .cards input[type="file"] {
	width: 0.1px;
	height: 0.1px;
    visibility: hidden;
    opacity: 0;
    position: absolute;
	z-index: -1;
}
.cards input[type="checkbox"]#checkall {
	width: auto;
	height: auto;
    visibility: visible;
    opacity: 1;
    position: static;
	z-index: 1;
}
.cards input[type="checkbox"] + label, .cards a.cboxlink {
    font-size: 20px;
    font-weight: 700;    
    display: inline-block;
    text-align: center;
    background: transparent;
    padding: 5px 12px 6px 13px;
    color: #fff;
    border: solid 1px #ddd;
    transition: all .2s;
}
.cards input[type="checkbox"]#checkall + label {
    font-size: 90%;
    font-weight: normal;    
    display: inline-block;
    text-align: left;
    background: transparent;
    padding: 0 0 0 2px;
    color: #5c5c5c;
    border: none;
    transition: none;
}
.cards .toolcheck input[type="checkbox"] + label {
    font-size: 95%;
    font-weight: normal;    
    display: block;
    text-align: center;
    background: transparent;
    padding: 0;
    color: #5c5c5c;
    border: none;
    transition: all .2s;
}
.cards .toolcheck input[type="checkbox"] + label i.fa-calendar-check-o {
    display: none;
}
.cards table input[type="checkbox"] + label {  
    display: block;
    margin: 0;
}
.cards input[type="file"] + label {
    display: block;
    height: 200px;
    min-width: auto;
    text-align: center;
    border: solid 1px #ddd;
    border-bottom: solid 4px #2A678E;
    margin: 0 auto 16px auto;
}
.cards input[type="file"] + label span {
    display: inline-block;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-top: 50px;
}
.cards input[type="file"] + label i {
    font-size: 32px;
}
.cards input[type="file"] + label:hover {
    cursor: pointer;
}
.cards input[type="file"] + label:hover span {
    color: #aaa;
}
.cards .fammembers input[type="checkbox"] + label, .cards a.cboxlink, .cards .immunize input[type="checkbox"] + label {
    font-weight: normal;
    font-size: 16px;
    color: #5c5c5c;
    margin: 0 4px 4px 0;
}

/* Added - JRF 12/16/19 */
.cards.borderlessnomarg div.fammembersfixed {
    width: 100%;
}


/* Added the box-sizing property to fix the labels overflowing their cells - JRF 12/16/19 */
.cards.borderlessnomarg div.fammembersfixed input[type="checkbox"] + label, input[type="text"] + label {
    width: 100%;
    font-weight: normal;
    font-size: 10px;
    color: #5c5c5c;
    margin: 0 1px 1px 0;
    text-align: left;
    vertical-align: middle;
    box-sizing: border-box;

}
/* Added - JRF 12/16/19 */
.cards.borderlessnomarg div.fammembersfixed input[type="checkbox"]:checked + label, input[type="text"]:checked + label {
    color: #fff;
}




/* Added - ERD 2/7/2020 */
.cardsV.borderlessnomargV div.fammembersfixed {
    width: 100%;
}


/* Added the box-sizing property to fix the labels overflowing their cells - ERD 2/7/2020 */
.cardsV.borderlessnomargV div.fammembersfixed input[type="checkbox"] + label, input[type="text"] + label {
    width: 100%;
    font-weight: normal;
    font-size: 10px;
    color: #5c5c5c;
    margin: 0 1px 1px 0;
    text-align: left;
    vertical-align: middle;
    box-sizing: border-box;

}
/* Added - ERD 2/7/2020 */
.cardsV.borderlessnomargV div.fammembersfixed input[type="checkbox"]:checked + label, input[type="text"]:checked + label {
    color: #fff;
}




.cards .actlist input[type="checkbox"] + label {
    font-weight: normal;
    font-size: 10px;
    color: #5c5c5c;
    width: 74%;
    margin: 0 1px 1px 0;
    text-align: left;
    vertical-align: middle;
    height: 22px;
}


.cards .immunizesmall input[type="checkbox"] + label {
    font-weight: normal;
    font-size: 10px;
    color: #5c5c5c;
    margin: 0 4px 4px 0;
}


.cards a.cboxlinkred {
    font-weight: normal;
    font-size: 16px;
    color: #FFFFFF;
    background-color: #9B3D3D;
    margin: 0 4px 4px 0;
    display: inline-block;
    text-align: center;
    padding: 5px 12px 6px 13px;
    border: solid 1px #ddd;
    transition: all .2s;

}


.cards .immunize input[type="checkbox"] + label {
    margin-right: 0;
}
.cards .immunize td.three input[type="checkbox"] + label {
    box-sizing: border-box;
    display: inline-block;
    width: 33.33%;
    padding: 5px 0 6px 0;
}

.cards .immunizesmall input[type="checkbox"] + label {
    margin-right: 0;
}
.cards .immunizesmall td.three input[type="checkbox"] + label {
    box-sizing: border-box;
    display: inline-block;
    width: 33.33%;
    padding: 5px 0 6px 0;
}

.cards a.cboxlink:hover {
    text-decoration: none;
    color: #000;
}
.cards input[type="checkbox"]:checked + label {
    color: #fff;
    background: #2A678E;
    border: solid 1px #ddd;
}
.cards .toolcheck input[type="checkbox"]:checked + label {
    color: #5c5c5c;
    background: #fff;
    border: none;
}
.cards div.toolcheck.notsched input[type="checkbox"]:checked + label {
    border: none;
}
.cards .toolcheck input[type="checkbox"]:checked + label span.tooladd {
    display: none;
}
.cards .toolcheck.notsched input[type="checkbox"]:checked + label span.toolaction {
    display: block;
}
.cards .toolcheck input[type="checkbox"]:checked + label i.fa-calendar-o {
    display: none;
}
#wrapper #home div.row div.cards div.results p.resultshide {
     font-size: 75%;
    display: none;
}
.cards .toolcheck input[type="checkbox"]:checked + label i.fa-calendar-check-o {
    display: block;
}
.cards input[type="radio"] + label {
    box-sizing: border-box;
    text-transform: uppercase;
    display: block;
    text-align: center;
    background: transparent;
    width: 33.33%;
    float: left;
    padding: 8px 0;
    color: #5c5c5c;
    border: solid 1px #ddd;
    transition: all .2s;
}
.cards .briefs input[type="radio"] + label, .cards .briefs .shortdate .shortdatefour .shortdatefive{
    width: 25%;
}
/* Added this - JRF 5/21/21 */
.cards #milestones .tf  {
    float: left;
    width: 50%;
}
/* Added this - JRF 5/21/21 */
.cards #milestones .tf input[type="radio"] + label {
    width: 100%;
}
.cards .tf input[type="radio"] + label {
    width: 50%;
}

.cards .tfwide input[type="radio"] + label {
    width: 100%;
    font-size: 12px;
    text-transform: lowercase;
    text-align: left;    

}
/* Added this - JRF 5/21/21 */
.cards #milestones .tf input[type="text"] {
    width: 100%;
}
.cards .tf input[type="text"] {
    box-sizing: border-box;
    display: block;
    text-align: center;
    background: transparent;
    width: 50%;
    float: left;
    padding: 8px 0;
    color: #5c5c5c;
    border: solid 1px #ddd;
    transition: all .2s;
}
.cards .tf.lbs input[type="text"] {
    text-align: left;
    padding: 8px;
}
.cards .tf input[type="text"] + label {
    position: absolute;
    top: 8px;
    left: 8px;
}
.cards input[type="radio"]:checked + label {
    background: #2A678E;
    color: #fff; 
}
.cards input[type="radio"] + label:nth-child(4) {
    border-left: none;
    border-right: none;
}
.cards.wizard input[type="radio"] + label:nth-child(4) {
    border-left: solid 1px #ddd;
}
.cards .tf input[type="radio"] + label:nth-child(4), .cards .tf input[type="radio"] + label:nth-child(8), .cards .tf input[type="text"]:nth-child(2) {
    border-left: none;
    border-right: solid 1px #ddd;
}
.cards input[type="submit"], .justsave input[type="submit"] {
    box-sizing: border-box;
    font-size: 20px;
    background: transparent;
    border: solid 1px #2d3481;
    width: 100%;
    border-radius: 2px;
}
form.simple {
    display: inline;
}
.snapheader {
    box-sizing: border-box;
    padding: 4px;
    width: 75%;
    margin: 16px auto 0 auto;
    background: #2A678E; 
}
.snapheader p {
    color: #fff;       
}
.reportcards input[type="submit"] {
    box-sizing: border-box;
    display: block;
    font-size: 20px;
    background: transparent;
    border: solid 1px #2d3481;
    width: 97%;
    margin: auto;
    border-radius: 2px;    
}
.cards.attachcard {
    border: none;
}
.cards .attachbutton input[type="submit"] {
    display: block;
    width: 50%;
    margin: auto;
    border-radius: 2px;
}
.cards a.remove {
    color: #dd0000;
}
.cards input[type="submit"]:hover, .cards a.button:hover, .reportcards input[type="submit"]:hover, .justsave input[type="submit"]:hover {
    border: solid 1px #78A22F;
    color: #78A22F;
    text-decoration: none;
}
.cards a.button, .fullsearch input[type="submit"] {
    box-sizing: border-box;
    padding: 4px 8px;
    font-size: 14px;
    background: transparent;
    border: solid 1px #2d3481;
    width: 100%;    
    border-radius: 2px;
}
.cards a.button.whitebutton {
    color: #fff;
    border: solid 1px #fff;
}
.cards .qlinks a.button {
    font-size: 11px;
}
.cards .qlinks a.button:hover {
    cursor: pointer;
}
.cards #saved, #savedTOP, #savedHOVER, #savedTOPv, #savedHOVERv,  .cards #error, .cards #errorTOP, #errorHOVER,.cards #errorTOPv, #errorHOVERv, .cards #redirect, .cards #redirectTOP,.cards #redirectHOVER, .cards #redirectTOPv,.cards #redirectHOVERv, .justsave #saved, .justsave #savedTOP, .justsave #savedHOVER, .justsave #savedTOPv, .justsave #savedHOVERv, .justsave #error, .justsave #errorTOP , .justsave #errorHOVER ,.justsave #errorTOPv , .justsave #errorHOVERv ,.cards #savedone, #modal #error {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
    padding: 10px 0;
    float: left;
    background: #9B3D3D;
    color: #fff;
    width: 100%;
    transition: all .5s;
}
.cards #saved, #savedTOP,#savedHOVER, #savedTOPv,#savedHOVERv,  .justsave #saved, .cards #redirect,.cards #redirectTOP,.cards #redirectHOVER, .cards #redirectTOPv,.cards #redirectHOVERv,  .cards #savedone {
    background: #0F4E21;
}
.cards .loading {
    text-align: center;
    display: none;
}
#gensaved {
    opacity: 0;
    visibility: hidden;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
    padding: 10px 0;
    float: left;
    background: #9B3D3D;
    color: #fff;
    width: 100%;
    transition: all .5s;    
}
#notify {
    box-sizing: border-box;
    width: 100%;   
    margin: 0;
    padding: 0;
}
#notify p {
    text-align: center;
    color: #fff;
    background: #9B3D3D;    
    padding: 10px;
}
.cards #saved p,#savedTOP p, #savedHOVER p,#savedTOPv p, #savedHOVERv p, #gensaved p, .cards #error p, .cards #errorTOP p, .cards #errorHOVER p, .cards #errorTOPv p, .cards #errorHOVERv p,  .cards #redirect p,.cards #redirectTOP p, .cards #redirectHOVER p, .cards #redirectTOPv p, .cards #redirectHOVERv p, #innersub #success p, #innersub #pdfsonly p, .cards #savedone p {
    color: #fff;
}
.cards #error a {
    font-size: 18px;
    display: inline-block;
    color: #fff;
    border: solid 1px #fff;
    padding: 0 32px;
    margin: 2px 12px;
    transition: all .2s;
}
.cards #errorTOP a {
    font-size: 18px;
    display: inline-block;
    color: #fff;
    border: solid 1px #fff;
    padding: 0 32px;
    margin: 2px 12px;
    transition: all .2s;
}
.cards #error a:hover {
    background: #fff;
    border: solid 1px #9B3D3D;
    color: #9B3D3D;
    text-decoration: none;
}
.cards #errorTOP a:hover {
    background: #fff;
    border: solid 1px #9B3D3D;
    color: #9B3D3D;
    text-decoration: none;
}
.cards #saved a, #savedTOP a,#savedHOVER a, #savedTOPv a,#savedHOVERv a, .cards #redirect a, .cards #redirectTOP a, .cards #redirectHOVER a, .cards #redirectTOPv a, .cards #redirectHOVERv a, .cards #savedone a {
    font-size: 18px;
    display: inline-block;
    color: #fff;
    border: solid 1px #fff;
    padding: 0 32px;
    margin: 2px 12px;
    transition: all .2s;
}
.cards #saved a:hover,#savedTOP a:hover, #savedHOVER a:hover,#savedTOPv a:hover, #savedHOVERv a:hover,  .cards #redirect a:hover,.cards #redirectTOP a:hover, .cards #redirectHOVER a:hover,.cards #redirectTOPv a:hover, .cards #redirectHOVERv a:hover, .cards #savedone a:hover {
    background: #fff;
    border: solid 1px #0F4E21;
    color: #0F4E21;
    text-decoration: none;
}
.cards #saved.alert,#savedTOP.alert,#savedTOPv.alert,#savedHOVER.alert,#savedHOVERv.alert, #gensaved.alert, .cards #error.alert, .cards #errorTOP.alert, .cards #errorTOPv.alert, .cards #errorHOVER.alert,.cards #errorHOVERv.alert, #innersub #success.alert, #innersub #pdfsonly.alert, .cards #redirect.alert,.cards #redirectTOP.alert, .cards #redirectTOPv.alert, .cards #redirectHOVER.alert, .cards #redirectHOVERv.alert,  .cards #savedone.alert, #modal #error.alert {
    opacity: 1;
    visibility: visible;
}
.cards.wizard {
    position: relative;
    padding: 0;
}
.cards.wizard div.summary a {
    display: block;
    font-size: 125%;
    text-align: center;
}
.cards.wizard div.pushdate {
    position: relative;
    margin-bottom: 6px;
    padding-bottom: 0;
}
.cards.wizard div.pushdate label {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: middle;
    height: 100%;
    padding: 8px 6px;
    background: #2A678E;
    color: #fff;
}
.cards.wizard div.pushdate input {
    padding-left: 120px;
    border-right: none;
    border-left: none;
}
.cards.wizard fieldset {
    border: none;
    padding: 8px 16px;
}
.cards.wizard .fieldset {
    border: none;
    padding: 0 16px 8px 16px;
}
.cards.wizard fieldset div.box {
    border: solid 2px #5c5c5c;
    padding: 8px 8px 0 8px;
}
.cards.wizard .savebutton {
    margin: 8px 16px;
}
.savebutton  p.loading {
    height: 45px;
    padding-top: 0;
}
.cards .calendar p.header {
    font-size: 150%;
    text-transform: uppercase;
}
.cards .calendar table td {
    border: solid 1px #ddd;
    height: 100px;
    vertical-align: top;
    padding: 0 4px;
}
.cards .calendar table td:last-child {
    width: auto;
}
.cards .calendar table td span {
    float: left;
}
.cards .calendar table td ul {
    text-align: right;
}
.cards .calendar table td li {
    font-size: 90%;
}
.cards .calendar a.left, .cards .calendar a.right {
    font-size: 150%;
}
#innersub #success, #innersub #pdfsonly {
    opacity: 0;
    visibility: hidden;
    background: #9B3D3D;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 4px 0;
    transition: all .5s;    
}
.reportch div {
    z-index: 999;
}
.reportch input[type="radio"] + label {
    background: #fff;
    width: 100%;
    float: none;
}
.reportch input[type="radio"] + label:nth-child(4) {
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
}
.reportch p.fselect:hover {
    cursor: default;
}
.mini.reportch p {
    color: #5c5c5c;
}
.mini.reportch p i {
    font-size: inherit;
}
a.sched, .cards p.header a.sched {
    color: #5c5c5c;
    font-size: 16px;
    font-weight: normal;
    border: solid 1px #2d3481;
    padding: 2px 4px;
    display: inline-block;
}
a.sched:hover, .cards p.header a.sched:hover {
    text-decoration: none;
    border: solid 1px #78A22F;
    color: #78A22F;
}

/* required css for formToWizard plugin */
form legend {
    display: none;
}
.prev { float: left;}
.next { float: right;}

.prev, .next {
    box-sizing: border-box;
    text-align: center;
    padding: 4px 8px;
    font-size: 20px;
    background: transparent;
    border: solid 1px #2d3481;
    width: 100px;
    border-radius: 2px;
    margin-top: 16px;
}
.cards .prev:hover, .cards .next:hover {
    border: solid 1px #78A22F;
    color: #78A22F;
    text-decoration: none;
}
#steps {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    background: #2A678E;
	width: 100%;
    box-sizing: border-box;
    list-style:none;
    overflow:hidden;
    margin:0px;
    padding:0px;
}
#steps li:hover {
	cursor: pointer;
	color: #eee;
}
.steps li {
    display: table-cell;
    border: solid 1px #2A678E;
	border-right: solid 1px #fff;
    vertical-align: middle;
    color: #aaa;
    font-size: 100%;
    width: 10%;
    padding: 8px;  
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;  
    transition: all .3s;
}
.steps li span {
    font-size: .7em;
    display:block;
}
.steps li.current {
    border-right: none;
    border-left: none;
    color:#000;
}
.stepDetails {
    box-sizing: border-box;
	position: relative;
	padding: 0;
}

.breadcrumb li {
    margin: 0;
	background: #2A678E;
    color: #fff;
    text-align: center;
}
.breadcrumb li.current {
    background: #fff;
    border-right: none;
    color: #2A678E;
    position: relative;
}

#timeout {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
    background: #2A678E;
	z-index: 999;
}
#timeout .timeoutbox {
    font-size: 125%;
    box-sizing: border-box;
    position: absolute;
    top: 35%;
    left: 35%;
    width: 30%;
    height: 30%;
    background: #fff;
    padding: 32px 16px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 1px 1px 3px #5c5c5c;
}
#timeout .timeoutbox img {    
    max-width: 100%;
}
#timeout .timeoutbox button {    
    box-sizing: border-box;
    background: transparent;
    border: solid 1px #2d3481;
    border-radius: 2px;
    padding: 6px;
    text-transform: uppercase;
}
/* Added this - JRF 5/21/21 */
#ui-datepicker-div {
    z-index: 1000!important;
}

@media screen and (max-width: 1366px) {
    #home, #innersub, #topbar .content {
        width: 95%;
    }   
    #nav .close {
        right: 2.5%;
    }
    #search {        
        width: 95%;
    }
    .cards input[type="file"] + label, .cards .attachbutton input[type="submit"] {
        width: 100%;
        min-width: 100%;         
    } 
    #timeout .timeoutbox {
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
    }

    #innersub.full .cards .visitdeets {
        float: none;
        width: 100%;
    }
    #innersub.full .cards.totschart .visitdeets {
        padding: 0;
    }
    #innersub.full .cards .chart {
        float: none;
        width: 100%;
        padding-right: 0;
        margin-top: 16px;
    }





 

}
@media screen and (max-width: 800px) {
    #topbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    #topbar .content .menu  {
        font-size: 8px;
    }
    #topbar .content .menu a {
        margin-left: 8px;
    }
    #alerts {
        max-width: 50%;
        width: 50%;
    }
    #alerts.show {
        top: 93px;
    }
    #alerts .cards {
        width: auto;
        margin: 0;
    }
    #search {
        width: 90%;
        margin-top: 116px;
        padding-right: 0;
    }
    #search p {
        float: none;
        margin: 0;
    }
    #search.fullsearch p, #search.fullsearch div.searchdate {
        width: 100%;
    }
    #sub {
        margin-top: 93px;        
    }
    #sub.wsearch {
        margin-top: 0;        
    }
    #sub.general .links div a {
        font-size: 80%;
    }
    #home, #innersub, #home .row, #innersub .row, #innersub .group  {
        display: block;
    } 
    #innersub {
        padding-top: 4px;
    }
    #modal .close, .pulltitle .back, #modal .justclose { 
        top: -6px;
    }
    #modalcontent #sub {
        margin-top: 0;
    }
    .cards, #innersub.full .cards {
        display: block;
        margin: 16px auto;
        width: 95%;
    }
    .cards.mini {
        display: block;
        float: left;
        margin: 16px 2.5%;
        width: 45%;
        min-width: 45%;
    }
    .cards.mini p, .reportcards p {
        font-size: 100%;
    }
    .cards.full {
        display: block;
        margin: 16px auto;
    }
    .cards input[type="radio"] + label, .cards .fammembers input[type="checkbox"] + label, .cards .immunize input[type="checkbox"] + label {
        font-size: 14px;
    }


    .cards .immunizesmall input[type="checkbox"] + label {
        font-size: 10px;
    }
    .cards.borderless div.toolcheck {
        width: auto;
    }
    h1.noimg img {
        display: none;
    }
    #nav ul {
        padding-top: 15%;
    }
    #topbar .logo img {
        height: 75px;
        margin-top: 12.5px;
    }
    #topbar .content p {
        font-size: 85%;
    }
    #modal {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .cards div.multiinput span {
        float: none;
        width: auto;
    } 
    .cards div.shortdate {
        height: 37px;
    }
  .cards div.shortdatefour {
        height: 37px;
    }
  
   .cards div.shortdatefive {
        height: 37px;
    }
  

    .reportcards input[type="submit"] {
        width: 95%;
    }
    .reportcards div.multiinput {
        width: 95%;
        margin: auto;
    }
    .reportcards div.multiinput span.left, .reportcards div.multiinput span.right {
        float: none;
        width: 80%;        
    }
    .cards div.multiinput span.center {
        text-align: left;
        margin-left: 0;
    }
    #steps li {
        font-size: 75%;
        padding: 8px 2px;
    }
    .exports {
        width: 95%;
    }



    
}
@media screen and (max-width: 600px) {
    .cards .qlinks a.button {
        display: block;
        margin-bottom: 4px;
    }

   .cards.borderlessnomarg div.fammembersfixed input[type="checkbox"] + label, input[type="text"] + label {
    width: 100%;
    font-weight: normal;
    font-size: 7px;
    color: #5c5c5c;
    margin: 0 1px 1px 0;
    text-align: left;
    vertical-align: middle;
    box-sizing: border-box;

}



}


@media screen and (max-width: 500px) {
    body {
        font-size: 40%;
    }
    #topbar .content .title p {
        font-size: 6px;
    }
    #topbar .logo img {
        height: 50px;
    }    
    #topbar .content .menu.short  {
        margin-top: 6x;
    }
    #topbar .content .menu a  {
        margin-left: 6px;
    }
    #topbar .content .menu a.cal {
        display: none;
    }
    #topbar .content .menu i  {
        font-size: 16px;
    }
    #topbar .content .menu span.fa-stack  {
        height: auto;
    }
    #search {
        margin-top: 60px;
    }
    #alerts {
        max-width: 100%;
        width: 100%;
    }
    #alerts.show {
        top: 77px;
    }
    #alerts .cards a.start {
        font-size: 12px;
        line-height: 30px;
        height: 30px;
        width: 30px;
    }
    #sub {
        margin-top: 77px;        
    }
    #sub.wsearch {
        margin-top: 0;        
    }
    #innersub.full .cards .chart {
        min-width: auto;
    }
    #innersub.full .cards .chart .left, #innersub.full .cards .chart .right {
        width: 100%;
        float: none;
    }
    #timeout .timeoutbox {
        top: 12.5%;
        left: 12.5%;
        width: 75%;
        height: 75%;
    }


#pshover {

	        display: none;       
    }

#vshover {
	        display: none;       
    }


.cards .actlist input[type="checkbox"] + label {
    font-weight: normal;
    font-size: 6px;
    color: #5c5c5c;
    width: 74%;
    margin: 0 1px 1px 0;
    text-align: left;
    vertical-align: middle;
    height: 22px;
}



.cards p.headersmall, .cards p.headersmall a, .reportcards p.headersmall, #success p.headersmall, .snapheader p.headersmall {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 8px;
    font-weight: 400;
    text-transform: capitalize;
}

.cards p.headersmallPP, .cards p.headersmallPP a, .reportcards p.headersmallPP, #success p.headersmallPP, .snapheader p.headersmallPP {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 20px;
    font-weight: 1000;
    text-transform: capitalize;
}




 
}
@media screen and (max-width: 350px) {
    .cards input[type="radio"] + label, .cards .fammembers input[type="checkbox"] + label, .cards .immunize input[type="checkbox"] + label {
        font-size: 6px;
    }

    .cards .immunizesmall input[type="checkbox"] + label {
        font-size: 6px;
    }


#pshover{
	        display: none;      
    }

#vshover {
	        display: none;     
    }

.cards .actlist input[type="checkbox"] + label {
    font-weight: normal;
    font-size: 6px;
    color: #5c5c5c;
    width: 74%;
    margin: 0 1px 1px 0;
    text-align: left;
    vertical-align: middle;
    height: 22px;
}


.cards p.headersmall, .cards p.headersmall a, .reportcards p.headersmall, #success p.headersmall, .snapheader p.headersmall {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 8px;
    font-weight: 400;
    text-transform: capitalize;
}

.cards p.headersmallPP, .cards p.headersmallPP a, .reportcards p.headersmallPP, #success p.headersmallPP, .snapheader p.headersmallPP {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 20px;
    font-weight: 1000;
    text-transform: capitalize;
}

ul, ol, li {
    font: 60% "Open Sans", sans-serif;
    color: #5c5c5c;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}




}

/*AJAX LOADER*/
.cp-spinner {
    width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative
}
.cp-round:before {
    border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px #bababa;border-right:solid 6px #bababa;border-bottom:solid 6px #bababa;border-left:solid 6px #bababa;position:absolute;top:0;left:0
}
.cp-round:after {
    border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px #2A678E;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px transparent;position:absolute;top:0;left:0;animation:cp-round-animate 1s ease-in-out infinite
}
@keyframes cp-round-animate {
    0% {
        transform:rotate(0)
    }
    100% {
        transform:rotate(360deg)
    }
}