.bar-tab,.bar-nav{
    max-width:1024px;
    margin:0 auto;
}

.back-button{
    font-size:12px;

}

.back-button i{
    font-size:24px;
}




.color-darkgreen{
    color:#b0d136;
}

.color-lighgreen{
    color:#beffc8;
}

.color-offgreen{
    color:#129ca4;
}

html{
    font-size:14px;
}

label{
    font-size:12px;
    color:#808080;
}


.hide{
    display:none !important;
}

.slideup{
    height:0px !important;
    overflow:hidden;
}

.transition{
    transition:all 0.2s;

}

.heightauto{
    height:auto;
}

a{
    color:#38b54a;
}


.settings-wrap{
    margin-top:40px;
}


.settings-head{
    position:relative;
    box-sizing: border-box;
    width:100%;
    padding:10px;
    margin-bottom:20px;
    font-size:16px;
    color:#606060;
    vertical-align: top;
    overflow:hidden;
    border-top:1px solid #f0f0f0;
}


.settings-head.settings-expanded{
  background:#e8e8e8;
}
.settings-head.settings-expanded i{
  color:#55a797;
}



.settings-more{
    height:auto;
    overflow:hidden;
    transition:all 0.2s;
    margin-top:-20px;
}

.settings-hide{
    height:0px;
}

.settings-toggle{
    position:absolute;
    top:0px;
    right:5px;

}

.settings-expanded .settings-toggle i{
    transform:rotate(180deg);
}

.settings-toggle i{
    color:#606060;
    font-size:16px;
    transition:all 0.2s;
}

.settings-head i{
    display:inline-block;
    font-size:30px;
    padding-right:15px;
    color:#a0a0a0;
    width:40px;
    text-align:left;
    vertical-align:top;

}

.settings-head h5{
    display:block;
    font-size:16px;
    color:#606060;
    margin:0px;
    vertical-align: top;
}

.settings-head span{
    
    color:#808080;
    font-size:12px;
}

.settings-head-right{
    display:inline-block;
}



.btn-darkgreen{
    background:#38b54a;
    color:white;
    border:none;
    border-radius:4px;
}

.layout-error-line{
    color:#d32f2f;
    font-size:13px;
    margin-top:-2px;
}

.invite-message{
    box-sizing: border-box;
    border:2px solid #38b54a;
    border-radius:6px;
    padding:10px;
    margin-bottom:20px;


}

.invite-message h5{
    color:#129ca4;
    font-size:22px;
    margin-top:0px;


}

.invite-message-tools{
    margin-top:10px;
    width:100%;
    overflow:hidden;

}

.animate{

}

.animated{
    text-align:center;
}

.animated i{
    font-size:18px;
    vertical-align:middle;
}

.settings-menu-panel{
    width:100%;
    background:#f0f0f0;
    height:auto;
    transition:all 0.2s;

}

.faded{
    opacity:0.2;
}


.btn-invite{
    display:inline-block;
    border:1px solid #a0a0a0;
    border-radius:3px;
    margin-right:10px;
    font-size:14px;
    color:#808080;
    padding:2px 10px;

}

.btn-invite.invite-green{
    background:#129ca4;
    color:#ffffff;
    border:1px solid #129ca4;
}

.btn-smaller{
    position:relative;
    float:right;
    box-sizing: border-box;
    color:#808080;
    font-size:13px;
    border:1px solid #129ca4;  
    padding:2px 10px 2px 3px;
    margin-left:10px;
    transition:all 0.2s;

}

.btn-smaller:hover{
    box-shadow:0px 0px 8px rgba(0,0,0,0.2);
}

.btn-smaller i{
    font-size:15px !important;
    color:#3ccab7 !important;
    line-height:21px;
    margin-left:0px;
    padding-left:0px;
    margin-right:5px !important;
}

.btn-add{
    position:relative;
    float:right;
    box-sizing: border-box;
    color:#808080;
    font-size:13px;
    border:1px solid #129ca4;  
    padding:2px 10px;
    padding-left:40px;
    margin-left:10px;

}



.btn-add:before{
    position:absolute;
    top:2px;
    left:2px;
    width:25px;
    height:25px;
    line-height:25px;
    text-align:center;
    content: "\f234";
    color:#3ccab7;
    font-weight:900;
    font-family: 'Font Awesome 5 Pro';
      font-size:15px;

}







.parent-precis-wrap{
    position:relative;
    box-sizing:border-box;
    display:inline-block;
    width:100%;
    border-bottom:1px solid #38b54a;
    min-height:90px;
    margin-bottom:10px;
    margin-right:10px;
    padding-left:40px;
    cursor:pointer;
    transition:all 0.2s;

}

.parent-precis-wrap.v2{
    width:100%;
    border:1px solid #a0a0a0;
    border-radius:10px;
    padding-right:10px;
    overflow:hidden;

}

.precis-confirm{
    margin-top:10px;
    font-size:18px;
    text-align:center;
    
}

.parent-precis-wrap.v2 .precis-edit{
    top:10px;
    right:10px;
}


.parent-invite-sent{
    margin-bottom:10px;
    vertical-align:top;
    margin-top:10px;

}

.parent-invite-sent i{
    vertical-align:top;
    font-size:30px;
    margin-right:10px;
    color:#129ca4;
}

.parent-invite-sent span{
    vertical-align:top;
    font-size:16px;
    color:#606060;
}
.parent-invite-sent span b{
    color:#303030;
    font-weight:bold;
}


.btn-conf{
    display:inline-block;
    padding:4px 10px;
    border:1px solid #129ca4;
    border-radius:3px;
    color:#808080;
    margin-left:5px;
    margin-right:5px;
    margin-top:10px;
    transition:all 0.2s;
    background:#ffffff;
    font-size:14px;
    
}

.btn-conf:hover{
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}

.parent-precis-wrap:hover{
}

.parent-precis-wrap h5{
    font-size:22px;
    color:#129ca4;
    font-weight:400;
    margin-top:15px;

}

.parent-precis-wrap small{
    color:#808080;
}

.parent-precis-wrap h6{
    font-size:16px;
    color:#606060;
    line-height:22px;
}

.parent-precis-wrap b{
    color:#a0a0a0;
    font-size:13px;
}

.parent-precis-wrap .req-circle{
    position:absolute;
    top:11px;
    left:0px;
}

.parent-precis-wrap.v2 .req-circle{
    left:5px;
}

.parent-precis-wrap .child-gender{
    display:inline-block;
    margin-left:10px;
    font-size:11px;
    padding:2px;
    line-height:12px !important;
    color:white;
    border-radius:3px;
}

.parent-precis-wrap .child-gender-Male{
    background:#1e88e5;

}

.parent-precis-wrap .child-gender-Female{
    background:#ec407a;
}

.clinic-h5{
    font-size:18px !important;
}

.txtarea-reaction{
    min-height:100px;
}

.dial-test{
    width:300px;
    height:300px;
}

.dial-wrapper{
    position:relative;
    overflow:hidden;

}

.dial-center{
    position:absolute;
    top:117px;
    left:50%;
    margin-left:-88px;
    width:170px;
    height:85px;
    background:white;
    z-index:100;
    cursor:pointer;
}

.dial-center h6{
    color:#a0a0a0;
    font-size:15px;
    text-align:center;
    margin:0px;
    
}

.dial-center h5{
    color:#909090;
    font-size:16px;
    text-align:center;
    margin:0px;
    margin-top:5px;
}

.dial-center h5 a{
    color:#909090;

}

.dial-center h5 b{
    color:#303030;
    font-weight:bold;
}


.dial-center h3{
    color:#606060;
    font-size:30px;
    text-align:center;
    margin:0px;
}

.dial-center h3 a{
    color:#606060;  
}

.dial{
    stroke: #129ca4 !important;
    stroke-width: 7 !important;
   
}



.req-circle{
    width:30px;
    height:30px;
    border-radius:50%;
    line-height:30px;
    text-align:center;
    text-transform:uppercase;
    color:white;
}

.req-{background:#e0e0e0;border:none;}
.req-a,.req-A{background:#e57373;border:none;}
.req-b,.req-B{background:#f44336;border:none;}
.req-c,.req-C{background:#f06292;border:none;}
.req-d,.req-D{background:#e91e63;border:none;}
.req-e,.req-E{background:#ba68c8;border:none;}
.req-f,.req-F{background:#9c27b0;border:none;}
.req-g,.req-G{background:#9575cd;border:none;}
.req-h,.req-H{background:#673ab7;border:none;}
.req-i,.req-I{background:#7986cb;border:none;}
.req-j,.req-J{background:#3f51b5;border:none;}
.req-k,.req-K{background:#64b5f6;border:none;}
.req-l,.req-L{background:#2196f3;border:none;}
.req-m,.req-M{background:#4fc3f7;border:none;}
.req-n,.req-N{background:#03a9f4;border:none;}
.req-o,.req-O{background:#4dd0e1;border:none;}
.req-p,.req-P{background:#00bcd4;border:none;}
.req-q,.req-Q{background:#4db6ac;border:none;}
.req-r,.req-R{background:#009688;border:none;}
.req-s,.req-S{background:#81c784;border:none;}
.req-t,.req-T{background:#4caf50;border:none;}
.req-u,.req-U{background:#aed581;border:none;}
.req-v,.req-V{background:#8bc34a;border:none;}
.req-w,.req-W{background:#ffb74d;border:none;}
.req-x,.req-X{background:#ff9800;border:none;}
.req-y,.req-Y{background:#bdbdbd;border:none;}
.req-z,.req-Z{background:#9e9e9e;border:none;}

.select-css {
	display: block;
	font-size: 14px;
	color: #606060;
	height:35px;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: 2px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover,input-field:hover {
	border-color: #888;
}
.select-css:focus,.input-field:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(56,181,69, .3);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #303030;
	outline: none;
}
.select-css option {
	font-weight:normal;
}

.input-field{
    height:40px !important; 
}

.form-spacer{
    width:100%;
    height:20px;
    overflow:hidden;

}

.precis-edit{
    position:absolute;
    top:5px;
    right:5px;
    color:#606060;
    
}

.precis-edit i{
    font-size:20px;
    opacity:0.5;
    transition:all 0.2s;
    color:#606060;
}

.precis-edit:hover i{
    opacity:1;
    color:#38b54a;

}

.child-overview-wrap{
    padding-top:20px;

}
.child-overview-wrap h3{
    color:#1caa97;
    font-size:25px;
    margin-top:10px;
    margin-bottom:0px;
}

.child-overview-wrap h4{
    color:#707070;
    font-size:20px;
    margin-top:10px;
    margin-bottom:10px;
}

.child-overview-center{
    text-align:center;
}

.targ-template,.targ-template-l1,.targ-template-l2{
    overflow:hidden;
    width:100%;
    transition:all 0.2s;
    padding-left:1%;
    padding-right:1%;
}

.targ-template.closed,.targ-template-l1.closed,.targ-template-l2.closed{
    width:0px !important;
    height:0px;
}

.child-overview-slider{
    width:100%;
    height:40px;
    overflow-x:scroll;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.schedule-vaccine{
    display:inline-block;
    padding:1px 10px;
    border:1px solid #1caa97;
    border-radius:3px;
    color:#707070;
    font-size:12px;
    margin-right:10px;
    margin-bottom:10px;

}

.schedule-vaccine.given{
    background:#1caa97;
    color:white;

}

.child-schedule-weekwrap{
    outline:1px dotted green;
}

.targ-schedule-child h5{
    font-size:16px;
    font-weight:bold;
    color:#606060;
    margin-top:0px;
    margin-bottom:5px;

}

.child-header-part{
    display:inline-block;
    width:49%;
    min-height:30px;
    line-height:30px;
    font-size:12px;
    color:#808080;
    margin:0px;
}
.child-header-part b{
    color:#606060;
}

.divider{
    width:100%;
    overflow:hidden;
    border-top:1px dashed grey;

    margin-top:10px;
    height:10px;
}

.child-schedule-wrapper{

}

.child-schedule-wrapper h3{
    color:#1caa97;
    font-size:20px;
    border-bottom:1px solid #1caa97;

}

.quick{
    color:#1caa97;
    font-size:20px;
    border-bottom:1px solid #1caa97;
    padding-bottom:5px;
    margin-top:15px;


}

.child-disease-row{
    line-height:30px;
    color:#707070;
    font-size:16px;
    border-bottom:1px solid #f0f0f0;

}

.child-disease-row a{
    font-size:14px;
}

.child-disease-row a small{
    float:right;
    color:#707070;
}

.child-disease-row b{
    color:#64b5f6;
}

.child-vac-detail-map{
    position:relative;
    width:100%;
    z-index:-1;
}

.child-vac-detail-map a.start{
    top:-20%;
}

.child-vac-detail-map a{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-20px;
    margin-top:-20px;
    z-index:1;
    transition:all 0.2s;

}

.child-vac-detail-map a i{
    font-size:40px;
    color:#1caa97;

}

.child-vac-hcp .big-tick{
    position:absolute;
    top:-40px;
    left:50%;
    margin-left:-40px;
    width:80px;
    height:80px;
    text-align:center;
    line-height:80px !important;
    z-index:2;
    background:#38b54a;
    border-radius:50%;
    opacity:0.9;

}

.child-vac-hcp .big-tick i{
    color:white;
    line-height:80px;
    font-size:40px;
}

.child-vac-hcp{
    box-sizing: border-box;
    position:relative;
    text-align:center;
    width:90%;
    margin-top:-40px;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
    border-radius:10px 10px 10px 10px;
    z-index:1;
    padding-top:60px;
    background:white;
    box-shadow:0px 0px 5px rgba(0,0,0,0.3);
    padding-bottom:20px;
    padding-left:10px;
    padding-right:10px;
}

.child-vac-hcp h4{
    font-size:20px;
    color:#606060;
}

.child-vac-hcp h5{
    font-size:18px;
    color:#404040;
}

.child-vac-hcp h6{
    font-size:18px;
    color:#303030;
}

.child-vac-hcp span{
    display:inline-block;
    font-size:12px;
    color:#1caa97;
    padding:2px 5px;
}

.btn-small{
    display:inline-block;
    font-size:12px;
    padding:2px 10px;
    color:#1caa97;
    border:1px solid #1caa97;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
}

.btn-small.allgreen{
    background:#1caa97;
    color:white;

}

.reaction-input{
    border:1px solid #a0a0a0;
    padding:5px;
    font-size:14px;
    color:#606060;
    width:100%;
    min-height:130px;
    resize:none;
}

.child-vac-hcp p{
    color:#a0a0a0;
    font-size:12px;
}

.child-vac-sig{
    width:50%;
    margin:0 auto;
}

.schedule-menu{
    position:sticky;
    top:44px;
    left:0px;
    width:100%;
    z-index:100;
    border-bottom:1px solid #a0a0a0;
    background:#ffffff;

}

.has-submenu{
    width:100%;
    height:50px;
    overflow:hidden;
}

.scrolling-wrapper {
    position:relative;
    z-index:100;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    background:#f0f0f0;
  
  }
  .scrolling-wrapper::-webkit-scrollbar {
    display: none;
  }


  .scrolling-wrapper > a {
    display: inline-block;
    height:35px;
    line-height:35px;
    padding:0px 10px;
    font-size:14px;
    font-weight:bold;
    color:#606060;

  }





.wrapper {
    width:315px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
}

.wrapper-small {
    width:290px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    margin-top:-345px;
}

.wrapper .donut {
    position:relative;
    width:100%;
    height:auto;
    transform:rotate(-90deg);

}

.wrapper-small .donut {
    position:relative;
    width:300px;
    height:auto;
    transform:rotate(-90deg);
}

.dount-hole{
    pointer-events: none;
}

.dount-ring{
    pointer-events: none;
}

.donut-pointer{
    position:absolute;
    width:350px;
    height:350px;
    transform:rotate(90deg);
    z-index:1;
}

.donut-pointer:after{
    position:absolute;
    content:'hello';
    top:50%;
    height:45%;
    left:50%;
    width:2px;
    background:#3ccab7;
}


.donut-segment {
  animation-name: fill-in;
  animation-fill-mode: forwards;
  animation-duration: 500ms;
  cursor:pointer;
  transition:all 0.2s;
  pointer-events: visibleStroke;
  opacity:0.8;
/*   animation-timing-function: ease-in-out; */
/*   opacity: 0; */
}

.donut-segment:hover{
    stroke-width:3.1;
    opacity:1;
}

@keyframes fill-in {
  from {
/*     opacity: 0; */
    stroke-dashoffset: 0;
  }
  to {
/*     opacity: 1; */
  }
}

.login-message{
    display:none;
    border:2px solid #c62828;
    border-radius:4px;
    padding:10px;
    font-size:16px;
    color:#c62828;
    margin-top:5px;
    margin-bottom:10px;
    background:white;
    max-width:70%;
}

.register-message{
    border:2px solid #129CA4;
    border-radius:4px;
    padding:20px;
    font-size:18px;
    color:#909090;
    background:white;
}

.audit-line{
    position:relative;
    width:100%;
    border-bottom:1px solid #e0e0e0;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:40px;
    font-size:12px;
    min-height:60px;
}

.audit-line i{
    position:absolute;
    top:13px;
    left:0px;
    font-size:20px;
    color:#1caa97;
}

.audit-line-body{

}

.child-icon-menu{
    display:inline-block;
    width:32.3%;
    text-align:center;
    margin-top:10px;
    transition:all 0.2s;
}

.child-icon-menu:hover{
    transform:scale(1.02);
}

.child-icon-menu i{
    display:block;
    font-size:40px;
    color:#1caa97;
    margin-bottom:5px;


}

.child-icon-menu >div{
    display:block;
    font-size:12px;
    color:#606060;
}

.visit-line{

}

.visit-line h5{
    border-bottom:2px solid #1caa97;
    font-size:20px;
    padding-bottom:3px;
    color:#1caa97;
}

.visit-line h6{
    font-size:18px;
}

.visit-line-stats{

}

.visit-reaction-item{
    box-sizing: border-box;
    width:100%;
    font-size:12px;
    border:1px solid #d32f2f;
    border-radius:4px;
    color:#808080;
    margin-bottom:5px;
    margin-top:5px;
    padding:5px;
}

.visit-line-stats span{
    display:inline-block;
    font-size:12px;
    width:32%;
    color:#909090;
    text-align:center;
}

.visit-line-stats span b{
    color:#303030;
    font-weight:bold;
}


.visit-line h6 a{
    font-size:18px;
    color:#707070;
}

.trans2{
    transition:all 0.2s;
}

.trans5{
    transition:all 0.5s;
}


.scan-panel{
    position:relative;
    width:100%;
    height:auto;
    float:left;
    border:1px solid #a0a0a0;
    overflow:hidden;
}

.scan-panel video{
    width:100%;
    height:auto;
    background:transparent;
}

.scan-panel:before{
    position:absolute;
    top:2px;
    left:2px;
    width:25px;
    height:25px;
    line-height:25px;
    text-align:center;
    content: "\f234";
    color:#3ccab7;
    font-weight:900;
    font-family: 'Font Awesome 5 Pro';
      font-size:15px;
      z-index:100;

}

.scan-right{
    float:right;
    width:49%;
    min-height:300px;
    margin-bottom:20px;
}

.scan-img-wrap{
    position:relative;
    
    
}

.scan-img-wrap img{

}

.scan-img-overlay{
    position:absolute;
    top:62%;
    left:6%;
    width:84%;
    height:11%;
    border:1px solid white;
    z-index:10;
    font-size:1.6vw;
    line-height:1.3vw;
    font-weight:normal;
    text-align:center;

    color:#606060;
    background:white;

}


.parent-header-wrap{
    text-align:center;
    margin-bottom:15px;
}

.parent-header-wrap h5{
    font-size:25px;
    font-weight:400;
    color:#129ca4;
    margin-bottom:10px;
    margin-top:0px;

}
.parent-header-wrap h6{
    font-size:18px;
    color:#808080;

}

.parent-header-wrap h6 small{
    color:#a0a0a0;
    font-weight:normal;
}

.comp-bar{
    position:relative;
    width:80%;
    margin:0 auto;
    border:2px solid #38b54a;
}

.comp-bar-fill{
    position:absolute;
    top:0px;
    left:0px;
    height:9px;
    background:#38b54a;
    border-radius:5px;

}

.message{
    box-sizing: border-box;
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
    background:#38b54a;
    color:white;
    padding:15px;
    font-size:16px;
    border-radius:5px;
    vertical-align:top;
    min-height:57px;
    overflow:hidden;

    
}

.message i{
    display:inline-block;
    font-size:30px;
    margin-right:10px;
}

.message span{
    display:inline-block;
    color:white;
    vertical-align:top;

}


.spinner {
    width: 40px;
    height: 40px;
  
    position: relative;
    margin: 100px auto;
  }
  
  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1caa97;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
  }
  
  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }
  
  @-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
  }
  
  @keyframes sk-bounce {
    0%, 100% { 
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 50% { 
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
  }