@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i,600,700&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
th{
   font-weight: 600;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

.table td, .table th {
    padding: 0.35rem;
    font-size: 13px;
}

.overlay {
	position: absolute;
	z-index: 5;
	height: 100%;
	width: 100%;
}

body {
   background:url(../images/body_bg.png) repeat;
   font-family: 'Roboto', sans-serif ;
   font-weight: 400;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
.form-group{
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.bordert1Dashed{
   border-top: 1px #ccc dashed;
}
.bg-light {
    background-color: #f3f3f3!important;
}
.text-theme{
   color: var(--theme-color) ;
}
.text-blue{
	color: blue !important;
}
.record_table>tr>td{
	vertical-align: middle;;
}
.btn{
   cursor: pointer;
}
.btn-outline-theme {
  color: var(--theme-color) ;
  border-color: var(--theme-color) ;
   cursor: pointer;
}

.btn-outline-theme:hover {
  color: #fff;
  background-color: var(--theme-color) ;
  border-color: var(--theme-color);
}
.btn-outline-theme:focus, .btn-outline-theme.focus {
  box-shadow: 0 0 0 0.2rem rgba(191, 62, 1, .50);
}
.btn-theme-fill{
  background-color: #ffffff;
  color: var(--theme-color) ;
}
.btn-theme-fill:hover{
  color: #ffffff;
  background-color: var(--theme-color) ;
}
.btn-theme-fill:focus, .btn-theme-fill.focus {
  box-shadow: 0 0 0 0.2rem rgba(191, 62, 1, .50);
}

.btn.btn-theme{
   background-color: var(--theme-color) ;
   color: #ffffff;
}
.btn.btn-theme:hover{
   background-color: var(--theme-color);
   color: #ffffff;
}
.btn-theme:focus, .btn-theme.focus {
  box-shadow: 0 0 0 0.2rem rgba(191, 62, 1, .50);
}

   .btn.btn-queue{
      text-transform: uppercase;
      font-size: 14px;
      background: var(--queue-icon);
      padding: 7px 10px 7px 38px;
      background-position: 5px 3px;
   }

.btn.btn-queue:hover{
   color: var(--theme-color);
   background-color: #fff;
}

.btn.btn-videocam{
   text-transform: uppercase;
   font-size: 14px;
   background: var(--video-icon);
   padding: 7px 10px 7px 43px;
   background-position: 5px 0px;
}

.btn.btn-videocam:hover{
   color: var(--theme-color);
   background-color: #fff;
}



.norecordmsg {
	text-align: center;
	padding: 10px 0;
	width: 90%;
	margin: 10px auto;
	border: 1px #ddd dashed;
}

.shadowNew {
  box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}

.btn-theme-toggle {
    background-color: #6c757d;
    border-color: #6c757d;
    text-transform: uppercase;
		color: #ffffff;
}
.btn-theme-toggle.active {
    background-color: var(--theme-color) ;
    outline: none;
    border-color: var(--theme-color) ;
		color: #ffffff;
}
.btn-theme-toggle:hover{
   color: #ffffff;
}
.ui-widget-content{
   border: 0px !important;
}
.switch {
    position: relative;
    display: block;
    vertical-align: top;
    width: 60px;
    height: 20px;
    padding: 2px;
    margin: 5px 10px 5px 0;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
    border-radius: 18px;
    box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: #eceeef;
    border-radius: inherit;
    /*  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);*/
}

.switch-label:before,
.switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}

.switch-label:before {
    content: attr(data-off);
    right: 11px;
    color: #ECEEEF;
    ;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

.switch-label:after {
    content: attr(data-on);
    left: 11px;
    color: #C91F37;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    opacity: 0;
}

.switch-input:checked ~ .switch-label {
    background: #C91F37;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.switch-input:checked ~ .switch-label:before {
    opacity: 0;
}

.switch-input:checked ~ .switch-label:after {
    opacity: 1;
}

.switch-handle {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 22px;
    height: 22px;
    background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
    background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-handle:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}

.switch-input:checked ~ .switch-handle {
    left: 38px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}


/*==================================================
 * Shadow Effect 2
 * ===============================================*/

body{
   font-family: sans-serif, "Roboto";
   padding-bottom: 100px;
}
.navbar {
    border-bottom: 1px #ccc solid;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
}
.navbar-brand img{
   max-width: 300px;
}
.navbar-nav .nav-link{
   text-align: center;
}
.navbar-light .navbar-nav .nav-link {
    color: #454545;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--theme-color) ;
}
.navbar-nav .nav-link img{
   width: 25px;
   height: 25px;
   margin-bottom: 7px;
}

/*Patient Info*/
.consumerinfo {
    width: 100%;
    padding: 5px;
    display: table;
    margin-bottom: 10px;
    height: 90px;
    border-radius: 5px;
    margin:10px 0px;
}

.consumerImg {
    width: 66px;
    height: 66px;
    border-radius: 100%;
    overflow: hidden;
    float: left;
   margin-top: 7px;
}
.consumerImg img{
   max-width: 100%;
   height: 100%;
}

.consumerdetails {
    float: left;
    padding-left: 10px;
    line-height: 22px;
    padding-top: 7px;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}

.consumerdetails .consumerName {
    font-size: 17px;
    font-weight: 600;
}

.consumerdetails .consumerAge {
    font-size: 14px;
}

.consumerdetails .consumerId {
    font-size: 14px;
}


.doctorProfile {
    padding: 10px;
    display: table;
    width: 100%;
    position: relative;
    height: 90px;
    border-radius: 5px;
}

.doctorProfile .doctorPic {
    width: 60px;
    height: 60px;
    float: left;
    border-radius: 50%;
   -webkit-border-radius: 50%;
   -os-border-radius:50%;
    overflow: hidden;

}
.doctorProfile>.doctorPic>img{
   max-width: 100%;
   height:100%;
}

.doctorInfo {
    position: absolute;
    padding-left: 70px;
    font-size: 16px;
    line-height: 24px;
    padding-top: 7px;
}

.doctorInfo span {
    font-size: 14px;
}

.modal-custome-header{
   padding-left: 15px;
   padding-right: 15px;
   border-bottom: 1px #ccc solid;
}
.modal-custome-header .consumerinfo{
   margin: 0px;
   padding: 0px;
}

.tokenno {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border: 1px var(--theme-color)  solid;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    font-size: 24px;
    float: left;
    margin-right: 10px;
    color: var(--theme-color) ;
}

.queue-table {
    margin: 0px auto;
    padding: 0;
   font-family: 'Roboto', sans-serif;
}

.queue-table tr td {
    font-size: 16px;
    line-height: 24px;
}
.queue-table tr td strong{
   font-weight: 500;
}

.queue-table tr td span {
    font-size: 14px;
}
 .nav-tabs .nav-link.active {
    background-color: var(--theme-color) ;
    color: #fff;
    text-decoration: none;
    border: none;
}

 .nav-tabs .nav-link {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--theme-color) ;
    background-color: #f2f2f2;
    border: none;
    cursor: pointer;
}

 .customeTab.nav-tabs .nav-link.active {
    background-color: #ffffff;
    color: var(--theme-color) ;
    text-decoration: none;
    border: none;
}

 .customeTab.nav-tabs .nav-link {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--theme-color) ;
    background-color: #f2f2f2;
    border: none;
    cursor: pointer;
}


.modal-title{
   font-weight: 600;
   font-size: 16px;
}

.payNowContent{   }
.payNowContent strong{
   font-weight: 600;
   font-size: 15px;
   line-height: 25px;
}

.payNowContent.payNowWithCard{
   height: 30vh;
}
.payNowContent.payNowWithCard .col-6{
   padding-top: 7px;
   padding-bottom: 7px;
}
.payNowContent.payNowWithCard .totalPayable{
   font-weight: bold;
}
/*Appointment*/

.fullwidthBox{
   background-color: #ffffff;
   padding: 0px 15px;
   width: 100%;
}
.appointmentList {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    width: 100%;
    display:block;
}

.appointmentList>li{
   list-style: none;
   display: block;
   margin: 55px 0px;
   background-color: #ffffff;
   position: relative;
   font-family: 'Raleway', sans-serif;
}

.appointmentList>li.fixApt{
   margin: 55px 0px;
}
.appointmentList>li>h2 {
    font-size: 15px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
    margin: 0px;
    margin-bottom: 5px;
    line-height: normal
}

.appointmentList>li>small {
    font-size: 11px;
    line-height: 17px;
}

.aptDoctorInfo{
   padding: 15px;
   display: table;
   width: 100%;
}
.aptDoctorInfo>h2{
   font-size: 18px;
   color: #333;
   line-height: 25px;
   font-weight: 600;
}
.aptDoctorInfo>p{
   font-size: 16px;
   font-weight: 500;
   line-height: 25px;
   color: #848484;
}
.aptDoctorInfo>.doctorImage {
    width: 60px;
    height: 60px;
    float: left;
    border-radius: 100px;
    overflow: hidden;
    margin-right: 15px;
}

.aptDoctorInfo>.doctorImage img {
    max-width: 100%;
    height: 100%;
}
.aptInfo{
   padding: 15px;
}
.aptInfo>h2{
   font-weight: 600;
}
.actionBtn{
   padding: 10px 10px;
}

.roomNo, .currentTokenNo, .currentTokenNo, .appointmentTiming{
   padding-top: 15px;
   font-family: 'Roboto', sans-serif;
}
.roomNo>h4, .currentTokenNo>h4, .currentTokenNo>h4, .appointmentTiming>h4{
   font-weight: 500;
   font-size: 15px;
   padding-bottom: 10px;
}
.tokenCircle{
   width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background-color: var(--theme-color) ;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
   display: inline-block;
}
.remider_action_btn a {
    text-decoration: none;
    color: var(--theme-color) ;
}

.appointmentDetails a img {
    vertical-align: sub;
}

.appointmentDate {
   position: absolute;
   top: -33px;
   background-color: #fff;
   font-size: 15px;
   width: 180px;
   padding: 8px 15px;
   border-radius: 5px 5px 0px 0px;
   box-shadow: 0px -4px 4px #77777736;
   text-align: center;
   font-weight: 500;
}

.remider_list.schedule li {
    margin-top: 34px;
}

.teleconsultaiton {
    width: 50px;
    position: absolute;
    top: 5px;
    right: 0px;
}

.appointmentHeader {
background-color: #dadada;
    padding: 15px 15px 0px;
}
.addHealthConTd{
	width: 250px;
}
.HConExistFrom{
	width: 100px;
}

/*Search*/
#custom-search-input {
    padding: 3px;
    border: solid 1px #E4E4E4;
    border-radius: 0px;
    background-color: #fff;
    margin-top: 7px;
}

#custom-search-input input {
    border: 0;
    box-shadow: none;
}

#custom-search-input button {
    margin: 2px 0 0 0;
    background: none;
    box-shadow: none;
    border: 0;
    color: #666666;
    padding: 0 8px 0 10px;
    border-left: solid 1px #ccc;
}

#custom-search-input button:hover {
    border: 0;
    box-shadow: none;
    border-left: solid 1px #ccc;
}

#custom-search-input .glyphicon-search {
    font-size: 23px;
}

/*Doctor list and Appointment*/

ul.doctor_listouter {
    margin: 0px;
    padding: 0px;
}

ul.doctor_listouter > li {
    list-style: none;
    display: inline-block;
    box-sizing: border-box;
    width: 49%;
    border: 1px #ccc solid;
    min-height: 100px;
    margin: 10px 0px;
}

ul.doctor_listouter > li:nth-child(2n) {
    float: right;
}

ul.doctor_listouter > li > .doctorinfo {
    padding: 7px;
    display: table;
    width: 100%;
    position: relative;
    background-color: #f0f0f0;
}

ul.doctor_listouter > li > .doctorinfo > .doctor_images {
   width: 66px;
   height: 66px;
   overflow: hidden;
   float: left;
}

ul.doctor_listouter > li > .doctorinfo > .doctor_details {
   position: absolute;
   padding-left: 74px;
   line-height: 22px;
   padding-top: 10px;
}

ul.doctor_listouter > li > .doctorinfo > .doctor_details span {
   font-size: 13px;
}
ul.doctor_listouter > li > .doctorinfo span:first-child{
   font-weight: 600;
}

ul.doctor_listouter > li > .doctor_appointment > .table {
   margin-bottom: 0px;
   text-align: center;
   color: #116cc1;
   font-size: 13px;
}

ul.doctor_listouter > li > .doctor_appointment > .table a {
   text-decoration: none;
   color: #116cc1;
   font-size: 15px;
}

#datetimepicker1 {
    background: #fff var(--datepicker-icon) no-repeat;
    background-position: 98%;
}

.datePickerIcon {
    background: #fff var(--datepicker-icon) no-repeat;
    background-position: 98%;
}
.timePickerIcon {
    background: #fff url(../icons/clock.png) no-repeat;
    background-position: 98%;
}

#ui-datepicker-div .ui-datepicker-header{
   border-top: var(--theme-color) !important;
   background: var(--theme-color) !important;
}


.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{
   background: var(--theme-color) !important;
}

.borderB-0{
   border-bottom: 0px;
}

.ui-datepicker-header {
    position: relative;
    padding: .5em 0 !important;
}



/*Billing Style Start*/
.accordion .card-header button{
   text-decoration: none;
   color: #454545;
   font-size: 14px;
   text-transform: uppercase;
   font-weight: 500;
   font-family: 'Roboto', sans-serif;
   }
.card-header{
   padding: 7px 1.25rem !important;
   font-family: 'roboto', sans-serif;
   font-weight: 500;
}
.accordion .card-header .btn-link:after {
    font-family: 'FontAwesome';
    content: "\f068";
    float: right;
}
.accordion .card-header .btn-link.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067";
}

.healthMoneyList {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    width: 100%;
    display:block;
}

.healthMoneyList>li{
   list-style: none;
   display: block;
   margin: 55px 0px;
   background-color: #ffffff;
   position: relative;
   font-family: 'Roboto', sans-serif;
}

.healthMoneyDate {
   position: absolute;
    top: -30px;
    background-color: #fff;
    font-size: 15px;
    width: 180px;
    padding: 8px 15px;
    border-radius: 5px 5px 0px 0px;
    box-shadow: 0px -2px 5px -2px;
    text-align: center;
    font-weight: 500;
}
.healthMoneyList>li.fixApt{
   margin: 20px 0px;
}
.healthMoneyList>li>h2 {
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin: 0px;
    margin-bottom: 5px;
    line-height: normal
}

.healthMoneyList>li>small {
    font-size: 11px;
    line-height: 17px;
}

.healthMoneyInfo{
   padding: 15px;
   display: table;
   width: 100%;
}
.healthMoneyInfo>h2{
   font-size: 18px;
   color: #333;
   line-height: 25px;
   font-weight: 400;
}
.healthMoneyInfo>p{
   font-size: 16px;
   font-weight: 400;
   line-height: 25px;
}
.healthMonyBalance{
   color: var(--theme-color) ;
}
.healthMoneyInfo>.billImage {
   width: 100%; 
   max-width: 70px;
    max-height:100px;
    float: left;
    overflow: hidden;
    margin-right: 15px;
}
.healthMoneyInfo>.billImage img {
    max-width: 100%;
    max-height: 100%;
}
.healthMoneySummary{
   padding: 15px;
}
.healthMoneySummary>h2{
   font-weight: 600;
}
.actionBtn{
   padding: 10px 10px;
}
.healthMoneySummary p{
   line-height: 24px;
}
.healthMoneySummaryContent{
   width: 100%;
   height: auto;
   overflow: hidden;
}

ul.helathMoneyTopMenu{
   margin: 0;
   padding: 0;
   text-align: right;
   font-family: 'Roboto', sans-serif;
   text-transform: uppercase;
   font-weight: 500;
   font-size: 14px;
}
ul.helathMoneyTopMenu>li{
   list-style: none;
   display: inline-block;
   text-align: center;
   padding: 10px 15px;
}
ul.helathMoneyTopMenu>li>img{
   width: 30px;
   margin-bottom: 7px;
}
.currentBalance{
   text-align: center;
   padding: 10px 0;
   color: var(--theme-color) ;
   font-family: 'Roboto',
   sans-serif;
   text-transform: uppercase;
   font-weight: 500;
   font-size: 14px;
}
.currentBalance img{
   margin-bottom: 7px;
   width: 30px;
}

ul.conPendingOrderOuter{
   list-style: none;
   margin: 0;
   padding:0px;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
}
ul.conPendingOrderOuter>li{
   list-style: none;
   display: block;
   margin: 5px 0px;
   border: 1px #ccc solid;
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #f3f3f3;
}
ul.conPendingOrderOuter>li .conPendigOrderInfoHead{
   font-weight: 500;
}
ul.conPendingOrderOuter>li .conPendigOrderInfoHead small{
   font-size: 100%;
   font-weight: 400;
}
ul.conPendingOrderOuter>li p{
   font-size: 16px;
   line-height: 28px;
}
ul.conPendingOrderOuter>li .conPendingOrderDetailIcon{
   text-align: right;
}
.conTransactionListOuter{
   width: 100%;
   padding: 10px 12px;
   background-color: transparent;
}
.conTransactionListOuter .card{
   background-color: transparent;
   box-shadow: none;
   border:0px;
}
.conTransactionListOuter ul.conTransactionList{
   list-style: none;
   display: block;
   margin: 0px;
   padding: 0;
   }
.conTransactionListOuter ul.conTransactionList>li{
   list-style: none;
   display: block;
   border: 1px #ccc dashed;
   padding: 10px;
   margin: 5px;
   background-color: #ffffff;
}
/*Billing Style End*/


/*Reminder Page Style*/
.setReminderOuter{
   background-color: #f2f2f2;
   padding: 15px 15px;
   border-radius: 5px;
   margin-bottom: 20px;
}


/*My Medial Record*/
.viewRecordContentBox{
   width: 100%;
   overflow: hidden;
}
.myMedicalRecordHeader{
   background-color: #dadada;
}
.myMedicalRecordHeader h3{
   font-size: 16px;
    color: var(--theme-color) ;
    font-weight: 600;
    padding-top: 16px;
    padding-left: 15px;
   font-family: 'Roboto', sans-serif;
}
ul.medicalRecordMenu{
   list-style: none;
   margin: 0;
   padding: 0;
   text-align: right;
}
ul.medicalRecordMenu>li{
   list-style: none;
   display: inline-block;
   padding: 10px;
}

.myMedicalRecordDisplayBox{
   background-color: #ffffff;
}

.card-header h4 {
   font-size: 18px;
   color: #454545;
   line-height: 25px;
}

.vitalNameDropdown{
	width:120px;
}

.table-wrapper table.table td a.delete {
    color: var(--theme-color);
}
.toogleSwitch {
    height: 0;
    width: 0;
    visibility: hidden;
}

.switchLable {
    cursor: pointer;
    text-indent: -9999px;
    width: 65px;
    height: 32px;
    background: #b7b7b7;
    display: block;
    border-radius: 100px;
    position: relative;
}

.switchLable:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 23px;
    height: 20px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

.toogleSwitch:checked + .switchLable {
    background: var(--theme-color) ;
}

.toogleSwitch:checked + .switchLable:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.switchLable.toogleSwitch:active:after {
    width: 130px;
}

.table-wrapper .form-control{
	border-radius: 0px;
	height: 32px;
}

.canvasjs-chart-canvas{
   width: 100%;
   height: auto;
   position: relative !important;
}

footer {
   background-color: #fff;
   padding: 10px 0px;
   border-top: 1px #ccc solid;
   position: fixed;
   bottom: 0px;
   z-index: 1;
   width: 100%;
}

.poweredBy {
    font-size: 14px;
    text-align: center;
}

.poweredBy img {
    max-width: 200px;
   vertical-align: middle;
}


/*Settings*/
.nav-pills{
   background-color: #f2f2f2;
}
.nav-pills .nav-link {
    border-radius: 0;
   border-bottom: 1px #ccc solid;
   color: #454545;
   font-size: 13px;
   text-transform: uppercase;
}
.nav-pills .nav-link:last-child{
   border-bottom: 0px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--theme-color) ;
   border-bottom-color: var(--theme-color) ;
}
.sliderHead{
   font-family: 'Roboto', sans-serif;
   padding-bottom: 15px;
   text-transform: uppercase;
   font-size: 13px;
   font-weight: 600;
}

.slidecontainer {
  width: 100%;
   margin-top: 15px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
   border-radius: 8px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: var(--theme-color) ;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}
.sliderRow img{
   width: 25px;
}
.sliderRow{
   background-color: #f2f2f2;
   border-radius: 4px;
   padding: 15px 15px;
   margin-bottom: 20px;
}

.ui-datepicker{
   box-shadow: none;
}
.select2.select2-container{
   width:250px !important;
}
.select2-container--default .select2-selection--single{
   border: 1px solid #ccc !important;
}
.progress-bar{
   background-color: var(--theme-color) ;
}
.nav-pills{
   background-color: #f2f2f2;
}
.nav-pills .nav-link {
    border-radius: 0;
   border-bottom: 1px #ccc solid;
   color: #454545;
   font-size: 13px;
   text-transform: uppercase;
}
.nav-pills .nav-link:last-child{
   border-bottom: 0px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--theme-color) ;
   border-bottom-color: var(--theme-color) ;
}
.sliderHead{
   font-family: 'Roboto', sans-serif;
   padding-bottom: 15px;
   text-transform: uppercase;
   font-size: 13px;
   font-weight: 600;
}

.slidecontainer {
  width: 100%;
   margin-top: 15px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
   border-radius: 8px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: var(--theme-color) ;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}
.sliderRow img{
   width: 25px;
}
.sliderRow{
   background-color: #f2f2f2;
   border-radius: 4px;
   padding: 15px 15px;
   margin-bottom: 20px;
}

.ui-datepicker{
   box-shadow: none;
}

/*Upload Drug Image*/
.uploadDrugImage{
   width: 150px;
   height: 150px;
   position: relative;
   margin: 0 auto;
}
 .profile-pic {
      max-width: 200px;
      max-height: 200px;
      display: block;
      }

      .file-upload {
      display: none;
      }
      .circle {
      border-radius: 0 !important;
      overflow: hidden;
      width: 150px;
      height: 150;
      border: 5px solid rgba(255, 255, 255, 0.7);
      position: absolute;
      top: 0;
      }
      img {
      max-width: 100%;
      height: auto;
      }
      .p-image {
      position: absolute;
         z-index: 1;
      bottom: 0px;
      color: #666666;
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    padding: 10px;
    border-radius: 6px;
    box-shadow: 2px 1px 5px #888888;
         background-color: #f2f2f2;
      }
      .p-image:hover {
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
      }
      .upload-button {
      font-size: 1.2em;
      }

      .upload-button:hover {
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
      color: #999;
      }

/*29-03-2020 top login button */
/*.btn.btn-theme.requestCredentialBtn{
    clear: both;
    bottom: 10px;
    position: absolute;
    font-size: 12px;
     background-color: #ffffff;
    color: var(--theme-color) ;
    border: 1px var(--theme-color)  solid;
}*
/*bottom login button */
/*.btn.btn-theme.requestCredentialBtn {
    clear: both;
    bottom: -90px;
    position: absolute;
    font-size: 12px;
    background-color: #ffffff;
    color: var(--theme-color) ;
    border: 1px var(--theme-color)  solid;
    right: -75px;
}*/
.btn.btn-theme.requestCredentialBtn {
    clear: both;
    border: none;
    bottom: -163px;
    position: absolute;
    font-size: 12px;
    background-color: transparent;
    color: var(--theme-color) ;
    /* border: 1px var(--theme-color)  solid; */
    right: -45px;
}

.uploadMedRecButton, .shareMedRecButton{
	cursor: pointer;
}
.uploadMedRecButton{
	background: url(../icons/upload.png) no-repeat;
	background-position: 50% 2px;
	color: #777777;
	padding: 35px 10px 10px !important;
	font-weight: 600;
	font-family: 'Roboto', sans-serif;
}

.shareMedRecButton{
	background: url(../icons/share.png) no-repeat;
	background-position: 50% 2px;
	color: #777777;
	padding: 35px 10px 10px !important;
	font-weight: 600;
	font-family: 'Roboto', sans-serif;
}

progress{
  width: 100%;
}

.pickerIcon{
   background: var(--datepicker-icon) no-repeat;
   background-size: 30px;
   width: 35px;
   border: none;
   position: absolute;
   top: 43px;
   right: 7px;
   height: 35px;
   color: transparent;
   outline: none;
}



/*Responsive*/
@media (max-width: 767px){
  .myMedicalRecordHeader .col-sm-6{
    flex: 0 0 100%;
    max-width: 100%;
  }
 ul.medicalRecordMenu{
  margin-top: 10px;
  border-top: 1px #FFFFFF solid;
  text-align: center;
  padding: 10px 0px;
  }

  #allergyComponentId .card-header .col-sm-7, #allergyComponentId .card-header .col-sm-5{
    max-width: 50%;
  }
   #healthConditionComponentId .card-header .col-sm-7, #healthConditionComponentId .card-header .col-sm-5{
    max-width: 50%;
  }
   #vitalComponentId .card-header .col-sm-7{
    max-width: 40%;
  }
  #vitalComponentId .card-header .col-sm-3{
    width: 40%;
  }
    #vitalComponentId .card-header .col-sm-2{
    width: 20%;
  }
  #addVitalsTable .table td, .table th{
    font-size: 10px;
  }
  .nav-tabs .nav-link{
    font-size: 13px;
    padding: .5rem 7px;
  }
  .card-header h4{
    font-size: 14px;
  }
  .input-group .btn.btn-theme{
    font-size: 15px;
  }
  .btn.btn-theme{
    font-size: 12px;
  }
  #settingComponentId .col-3, #settingComponentId .col-9{
    max-width: 100%;
    flex: 0 0 100%;
  }
  #settingComponentId .col-3{
    margin-bottom: 10px;
  }
	.navbar-brand img{
	   max-width: 200px;
	}
	#recordsComponentId .nav.nav-tabs{
	margin-top: 15px;
}
.myMedicalRecordDisplayBox .table td, .table th{
	font-size: 13px;
}
.tab-content .card-body{
	padding: 5px;
}
footer{
	padding: 5px 0px;
}
.poweredBy img{
	max-width: 115px;
}

#activitySettingComponentId .sliderRow .col{
	padding: 0px 5px;
}
#activitySettingComponentId .sliderRow .col-8{
	flex: 0 0 50%;
	max-width: 50%;
}
.card-header{
      padding: 5px 5px !important;
}
.myMedicalRecordHeader h3{
  padding-top: 7px;
}

.btn.btn-secondary{
  font-size: 12px;
}

}