/* global */
.error {
	color: red;
}

.f-size-14 {
	font-size: 14px;
}

.f-size-16 {
	font-size: 16px;
}

/* Ensure dropdown arrow is visible for all form-select elements */
.form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 6 6 6-6'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right .75rem center !important;
	background-size: 16px 12px !important;
	padding-right: 2.25rem !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.form-select:focus {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667eea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.booking-color {
	background-color: #32be70 !important; /* Green */
}

.consultation-color {
	background-color: blue !important; /* Blue */
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040; /* Just below the navbar (z-index 1050) */
}

.component-header-container {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-direction: row;
		padding: 10px 12px 0px 12px;
    	background-color: white;
    	font-size: 18px; 
    	font-weight: 600;
	}
	
    @media screen and (min-width: 769px) {
    	/* Nothing to do here for now. */	 
	}
		
}

.component-header-container .component-label-attr {
	
	@media screen and (min-width: 1px) {
    	font-size: 14px; 
    	font-weight: 300;
    	color: blue;
	}
    @media screen and (min-width: 769px) {
    	font-size: 16px; 
	}
	
}

.header-logo-hide-mobile {
	@media screen and (min-width: 1px) {
    	display: none !important;
	}
    @media screen and (min-width: 641px) {
    	display: block !important;
	}
}

/* START: Overrides for Flatpickr - date picker. */
.flatpickr-wrapper {
	width: 100%;
}

.flatpickr-calendar {
	@media screen and (min-width: 1px) {
		 left: -120px !important;
		font-size: 0.9em !important;
	}
    @media screen and (min-width: 769px) {
    	 left: -72px !important;
		font-size: 1em !important;
	}
}
/* END: Override CSS for Flatpickr - date picker. */

.nav-link-custom-select {
    max-width: 95%;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 1px 0 0 10px;
}

/* Overrides for FullCalendar CSS */
.fc {
  	@media screen and (min-width: 1px) {
		font-size: 0.9em !important;
	}
    @media screen and (min-width: 769px) {
		font-size: 1em !important;
	}
    
}

/* Overrides for FullCalendar CSS */
.fc .fc-toolbar-title {
  	@media screen and (min-width: 1px) {
		font-size: 1em !important;
	}
	@media screen and (min-width: 381px) {
		font-size: 1.1em !important;
	}
    @media screen and (min-width: 769px) {
		font-size: 1.75em !important;
	}
    
}

/* Overrides for FullCalendar CSS */
.fc .fc-button {
	@media screen and (min-width: 1px) {
		padding: 0.25em 0.5em !important;
    	font-size: 0.9em !important;
	}
	@media screen and (min-width: 381px) {
		font-size: 1em !important;
	}
    @media screen and (min-width: 769px) {
		padding: .4em .65em !important;
	}
}

/* Overrides for FullCalendar CSS */
.fc-today-button.fc-button.fc-button-primary {
	@media screen and (min-width: 1px) {
		display: none !important;
	}
    @media screen and (min-width: 769px) {
		display: flex !important;
	}
}

/* Overrides for FullCalendar CSS */
.fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:first-child {
	display: flex;
}

/* This is used in FullCalendar. */
.add-booking-section-attr {
	@media screen and (min-width: 1px) {
		font-size: 0.8em !important;
	}
	@media screen and (min-width: 381px) {
		font-size: 0.9em !important;
	}
    @media screen and (min-width: 769px) {
		font-size: 1.1em !important;
	}
}
/* This is used in FullCalendar. */
.add-booking-section-attr .legend-attr {
	@media screen and (min-width: 1px) {
		height: 20px !important;
		width: 20px !important;
	}
    @media screen and (min-width: 769px) {
		height: 25px !important;
		width: 25px !important;
	}
}

/* Override bootstrap css */
.navbar .dropdown .link-dark {
    color: white !important;
}

/* This is used in Patient Consultation info section. */
.info-container {
	width: 100%; 
	display: flex;
	flex-direction: column; 
	padding: 0 0 0 5px;
}

.tooth-ui-row-container {
	@media screen and (min-width: 1px) {
		transform: scale(0.7); /* 70% of the original size */
	}
	
	@media screen and (min-width: 391px) {
		transform: scale(0.8); 
	}
	
	@media screen and (min-width: 401px) {
		transform: scale(0.85);
	}
	
	@media screen and (min-width: 601px) {
		transform: scale(1); 
	}	
}

.scale-responsive {
	@media screen and (min-width: 1px) {
		transform: scale(0.65); /* 65% of the original size */
	}
	
	@media screen and (min-width: 391px) {
		transform: scale(0.8); 
	}
	
	@media screen and (min-width: 601px) {
		transform: scale(1); 
	}
}

.nav-pills-flex {
	@media screen and (min-width: 1px) {
		font-size: 12px;
	}
	
	@media screen and (min-width: 401px) {
		font-size: 13px;
	}
	
	@media screen and (min-width: 601px) {
		font-size: 14px;
	}
}

.tooth-chart-legend-flex {
	@media screen and (min-width: 1px) {
		flex-direction: column;
	}
	
	@media screen and (min-width: 601px) {
		flex-direction: row;
	}
}

.billing-row-flex {
	@media screen and (min-width: 1px) {
		flex-direction: column;
	}
	
	@media screen and (min-width: 1160px) {
		flex-direction: row;
	}
}

.show-container-desktop-flex {
	@media screen and (min-width: 1px) {
		display: none !important;
	}
	
	@media screen and (min-width: 601px) {
		display: flex !important;
	}
}

.hide-container-desktop-flex {
	@media screen and (min-width: 1px) {
		display: flex !important;
	}
	
	@media screen and (min-width: 601px) {
		display: none !important;
	}
}

.row-flex {
	@media screen and (min-width: 1px) {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	
	@media screen and (min-width: 601px) {
		flex-direction: row;
	}
}

.info-label-attr {
	@media screen and (min-width: 1px) {
		min-width: 100px;
	}
	
	@media screen and (min-width: 601px) {
		min-width: 80px;
	}
	
}
.hide-show-sidebar {
	@media screen and (min-width: 1px) {
		display: none !important;
	}
	
	@media screen and (min-width: 601px) {
		display: flex !important;
	}
}

.hide-show-header-label-container {
	@media screen and (min-width: 1px) {
		display: none !important;
	}
	
	@media screen and (min-width: 601px) {
		display: flex !important;
	}
}

.hide-show-header-nav-item-container {
	@media screen and (min-width: 1px) {
		display: flex !important;
	}
	
	@media screen and (min-width: 601px) {
		display: none !important;
	}
}

.hide-show-header-user-name {
	@media screen and (min-width: 1px) {
		display: none !important;	
	}
	
	@media screen and (min-width: 601px) {
		display: flex !important;
	}
}

.padd-label-container {
	@media screen and (min-width: 1px) {
		padding: 0 0 0 20px;
	}
	
	@media screen and (min-width: 601px) {
		padding: 0 0 0 10px;
	}
}

.right-control-container {
	@media screen and (min-width: 1px) {
		display: none !important;
	}
	
	@media screen and (min-width: 601px) {
		width: 100%;
		display: flex !important;
    	justify-content: flex-end;
	}
}

.nav-link.log-out {
	font-size: 0.7rem;
    text-decoration: underline;
    color: blue;
    padding: 0 10px 0 0;
    cursor: pointer;
}


.header-section-container {
	@media screen and (min-width: 1px) {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between; 
	}
	
	@media screen and (min-width: 601px) {
		flex-direction: row;
	}
}

.bg-white-override {
	@media screen and (min-width: 1px) {
		background-color: white !important;
	}
	@media screen and (min-width: 601px) {
		background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
	}
}

/* Bootstrap class override. */
.navbar-expand-lg .navbar-toggler {
	@media screen and (min-width: 601px) {
        display: none;
    }	
}

/* Bootstrap class override. */
.navbar-expand-lg .navbar-collapse {
	@media screen and (min-width: 1px) {
	    flex-basis: 100%;
	    flex-grow: 1;
	    align-items: center;
	    z-index: 1050;
	    position: absolute;
	    width: 100%;
	    /* margin: 42px 0 0 0; */ 
	    /* border: 0.05rem solid lightgray; */
	    left: 0px;
	    background: white;
		border-radius: 15px;
		margin-top: 55px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	}
	
	@media screen and (min-width: 601px) {
        display: none !important;
        flex-basis: auto; 
        flex-grow: unset;
        align-items: unset;
        width: unset;
        margin: unset;
        position: unset; 
        border: unset;
	}	
}

/* Bootstrap class override. */
.navbar-nav .dropdown-menu {
    position: absolute;
} 

/* Bootstrap class override. */
.dropdown-menu[data-bs-popper] {
	
	@media screen and (min-width: 1px) {
    	left: -107px;
	}
	
	@media screen and (min-width: 601px) {
		left: -55px;
	}
}

/* glyphicons */
@font-face {
		  font-family: 'Glyphs';
		  src:  url('/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
		        url('/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff') format('woff');
}

.cursor-pointer {
	cursor: pointer;
}
		
.login {
	width: 100%;
}

.login .textbox-width {
	width: 200px;
}

.login .error-message {
	color: red;
	font-style: italic;
}

.header {
	position: sticky;
	top: 0;
}

.header .user-details-container {
	padding-left: 10px;
	padding-right: 10px;
}


.header .user-details-container .user-full-name {
	color: blue; 
	font-style: italic;
}


.header .user-details-container .user-details {
	height: 37px;
}

.header .user-details-container .logout {
	float: right;
}

.back-button {
	padding: 5px 0px 0px 10px;
}

.sub-menu-button {
	width: 300px;
}


.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: #f8f8f8;
}

.btn-margin-top {
	margin-top: 5px;
}


/* Main DIV */

/*
#wrapper {
    padding-left: 0;    
}

#page-wrapper {
    width: 100%;        
    padding: 0;
    background-color: #fff;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 225px;
    }

    #page-wrapper {
        padding: 22px 10px;
    }
}
*/

.page-header-fixed {
	position: fixed; 
	top: 0; 
	width: 100%; 
	z-index: 1;
}

/* Side Navigation */

@media(min-width:768px) {
    .side-nav {
        position: fixed;
        top: 60px;
        left: 225px;
        width: 225px;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        border-top: 1px rgba(0,0,0,.5) solid;
        overflow-y: auto;
        background-color: #f8f8f8;
        bottom: 0;
        overflow-x: hidden;
        padding-bottom: 40px;
    }

    .side-nav>li>a {
        width: 225px;
        border-bottom: 1px rgba(0,0,0,.3) solid;
    }

    .side-nav li a:hover,
    .side-nav li a:focus {
        outline: none;
        background-color: #fff !important;
    }
}

.side-nav>li>ul {
    padding: 0;
    border-bottom: 1px rgba(0,0,0,.3) solid;
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    color: #337ab7;    
}

.side-nav>li>ul>li>a:hover {
    color: #D3D3D3;
}

.navbar .nav > li > a > .label {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 14px;
  right: 6px;
  font-size: 10px;
  font-weight: normal;
  min-width: 15px;
  min-height: 15px;
  line-height: 1.0em;
  text-align: center;
  padding: 2px;
}

.navbar .nav > li > a:hover > .label {
  top: 5px;
}

/* overrides */

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	background-color: #fff;
	border: 1px solid lightgray;	
}

.link-selected {
    color: #212529 !important; /* black */ 
}

.form-horizontal .control-label {
	margin-left: -36px;
}

.btn-div {
	padding-right: 130px;
	margin-top: 5px;
	width: 100%;
}

.btn-size {
	width: 64px;
}

.container-menu {
	
	@media screen and (min-width: 1px) {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		/*align-content: flex-start;*/	
	}
	
	@media screen and (min-width: 601px) {
		
		
	}

}

.container-menu .item {
	
	@media screen and (min-width: 1px) {
		margin: 20px;
	}
	
	@media screen and (min-width: 601px) {
		margin: 40px;
		
	}
	
	@media screen and (min-width: 1200px) {
		margin: 50px;
		
	}
	
}

.container-menu .item .caption {
    display: block;
    padding-top: 7px;
    width: 100px;
    text-align: center;
}	

.container-menu .item .menu {
    width: 300px;
    height: 70px;
}

.form-group {
	margin-bottom: 5px;
}

.btn-width-default {
	width: 85px;
}

.btn-update-width-default {
	width: 100px;
}

.btn-width-default-120 {
	width: 120px;
}

.mobile-footer {
	
	@media screen and (min-width: 1px) {
		display: flex; 
		flex-direction: row;
	}
	
	@media screen and (min-width: 601px) {
		display: none; 
	}
}

.mobile-footer .menu-item {
	
	@media screen and (min-width: 1px) {
		flex: 25%; 
		border: 1px solid;
	}
	
}

.page-wrapper-custom {
	
	@media screen and (min-width: 1px) {
		height: 90vh;
    	overflow: auto;
		margin: 0 0 0 0;
		background-color: white;
		padding-bottom: 80px !important;  /* This is to ensure the footer is always visible. */	 	
	}
	
	@media screen and (min-width: 601px) {
		padding-bottom: 20px;
	}
}

.page-wrapper-custom.custom-modal {
	height: 100%;
}

.page-wrapper-custom .page-body {
	
	@media screen and (min-width: 1px) {
		padding: 0px 5px;
	}
}

.page-wrapper-custom .page-body .btn-desktop-container {
	
	@media screen and (min-width: 1px) {
		display: none;
	}
	
	@media screen and (min-width: 601px) {
		display: block;
	}
}

.page-wrapper-custom .page-body .btn-mobile-container {
	
	@media screen and (min-width: 1px) {
		display: block;
		width: 100%;
		padding-top: 5px;
	}
	
	@media screen and (min-width: 601px) {
		display: none;
	}
}

.page-wrapper-custom .page-body .table-desktop-container {
	
	@media screen and (min-width: 1px) {
		display: none;
	}
	
	@media screen and (min-width: 601px) {
		display: block;
	}
}

.page-wrapper-custom .page-body .table-mobile-container {
	
	@media screen and (min-width: 1px) {
		display: block;
	}
	
	@media screen and (min-width: 601px) {
		display: none;
	}
}

.page-wrapper-custom .page-body .btn-mobile-container .btn-mobile {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
}

.page-wrapper-custom .page-body .error-message{
	
	@media screen and (min-width: 1px) {
		color: red;
	}
}


.page-wrapper-custom .page-body .info-message{
	
	@media screen and (min-width: 1px) {
		color: blue;
	}
}

.page-wrapper-custom .page-body .header-container {
	
	@media screen and (min-width: 1px) {
		top: 52px; 
		height: 90px;
		padding: 10px 12px 0px 12px;
		background-color: white;
	}
}

.page-wrapper-custom .page-body .header-container.adjustment {
	
	@media screen and (min-width: 1px) {
		width: 100%;
		height: unset;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px;
	}
	
	@media screen and (min-width: 601px) {
		justify-content: flex-start;
	}
}

.page-wrapper-custom .page-body .header-container.with-image {
	
	@media screen and (min-width: 1px) {
		display: flex;
		justify-content: center;
		padding-right: 38px;
	}
	
	@media screen and (min-width: 601px) {
		justify-content: left;
		
	}
}

.page-wrapper-custom .page-body .header-container.height-auto {
	
	@media screen and (min-width: 1px) {
		height: auto;
		padding-top: 15px;
	}
}

.page-wrapper-custom .page-body .header-container .label-attr {
	
	@media screen and (min-width: 1px) {
		font-size: 20px;
		font-weight: 600; 
		margin-top: 5px;
		/* padding-left: 7px; */
	}
}

.page-wrapper-custom .page-body .header-container .search-container {
	
	@media screen and (min-width: 1px) {
		margin-top: 10px; 
		display: inline-flex;
	}
}

.page-wrapper-custom .page-body .header-container .search-container .search-box{
	
	@media screen and (min-width: 1px) {
		min-width: 80px;
		max-width: 100px; 
		margin-right: 5px;
	}
	
	@media screen and (min-width: 601px) {
		max-width: 182px; 
	}
	
}

.page-wrapper-custom .page-body .header-container .search-container .btn-attr{
	
	@media screen and (min-width: 1px) {
		min-width: 85px;
		margin-right: 5px;
	}
}

.page-wrapper-custom .page-body .pagination.margin-0 {
	
	@media screen and (min-width: 1px) {
		margin: 0;
	}
}

.page-wrapper-custom .page-body .data-container {
	
	@media screen and (min-width: 1px) {
		padding-top: 15px;
	}
}

.page-wrapper-custom .page-body .data-container-modal {
	
	@media screen and (min-width: 1px) {
		margin: 0; 
		padding: 5px;
	}
}

.page-wrapper-custom .page-body .button-container {
	
	@media screen and (min-width: 1px) {
		margin: 10px 0;
		padding: 0 10px;
	}
}

.page-wrapper-custom .page-body .button-container.buttons-flex {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
	}
}

.page-wrapper-custom .page-body .button-container.buttons-flex .item {
	
	@media screen and (min-width: 1px) {
		margin: 5px 5px;
		min-width: 40%;
	}
	
	@media screen and (min-width: 601px) {
		min-width: 14%;
	}
	
}

.page-wrapper-custom.patient-details-container .page-body .button-container.control-width-medium {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 60%;
	}
}

.page-wrapper-custom.employee-details-container .page-body .button-container.control-width-medium {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 39%;
	}
}

.page-wrapper-custom.service-details-container .page-body .button-container.control-width-medium {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 39%;
	}
}

.page-wrapper-custom.service-type-details-container .page-body .button-container.control-width-medium {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 39%;
	}
}

.page-wrapper-custom.medicine-details-container .page-body .button-container.control-width-medium {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 39%;
	}
}

.page-wrapper-custom.user-account-details-container .page-body .button-container.control-width-medium {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 39%;
	}
}

.page-wrapper-custom.consultation-form-details-container .page-body .button-container.control-width-medium {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 39%;
	}
}

.page-wrapper-custom.consultation-details-container .page-body .button-container.control-width-medium {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 39%;
	}
}

.page-wrapper-custom.consultation-details-container .page-body .button-container .control-width-small {
	
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 10%;
	}
}

.page-wrapper-custom.consultation-details-container .page-body .billing-container  {
	
	@media screen and (min-width: 1px) {
		padding: 0 10px;
		margin-bottom: 10px;
	}
	
}

.page-wrapper-custom .page-body .data-container.margin-attr {
	
	@media screen and (min-width: 1px) {
		margin-top: 15px;
		margin-left: 15px;
		padding: 0 15px 0 0;
	}
}

.page-wrapper-custom .patient-info-header .col-form-label {
	
	@media screen and (min-width: 1px) {
		padding-top: 0px;
		padding-bottom: 0px;
		font-size: 0.9rem;
		min-width: 125px;
	}
}

.page-wrapper-custom .page-body .data-container .col-form-label {
	
	@media screen and (min-width: 1px) {
		padding-top: 0px;
		padding-bottom: 0px;
		font-size: 0.9rem;
		min-width: 125px;
	}
}

.page-wrapper-custom .page-body .data-container .control-width-medium {
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 26%; 
	}
}

.page-wrapper-custom .page-body .data-container .control-width-large {
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 75%; 
	}
}

.page-wrapper-custom .page-body .billing-container .control-width-small {
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 18%; 
	}
}

.page-wrapper-custom .page-body .data-container-modal .modal-control-width-small {
	@media screen and (min-width: 1px) {
		width: 100px;
	}
	
	@media screen and (min-width: 601px) {
		width: 100px;
	}
}

.page-wrapper-custom .page-body .data-container-modal .modal-control-width-medium {
	@media screen and (min-width: 1px) {
		width: 150px;
	}
	
	@media screen and (min-width: 601px) {
		width: 150px;
	}
}

.page-wrapper-custom .page-body .data-container-modal .modal-control-width-large {
	@media screen and (min-width: 1px) {
		width: 300px;
	}
	
	@media screen and (min-width: 601px) {
		width: 300px;
	}
}

.page-wrapper-custom .page-body .data-container .d-flex {
	@media screen and (min-width: 1px) {
		display: flex;
		flex-direction: row;
	}
	
	@media screen and (min-width: 601px) {
		flex-direction: column;
	}
}

.page-wrapper-custom .page-body .data-container .btn-container.d-flex {
	@media screen and (min-width: 1px) {
		display: flex;
		flex-direction: row !important;
		justify-content: space-between; 
		align-items: center; 
		padding: 10px;
	}
}

.page-wrapper-custom .page-body .data-container .flex-unset {
	@media screen and (min-width: 1px) {
		flex: unset;
	}
}

.page-wrapper-custom .page-body .billing-container .flex-unset {
	@media screen and (min-width: 1px) {
		flex: unset;
	}
}

.page-wrapper-custom .page-body .data-container .input-group.width-attr {
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 80%;
	}
}

.page-wrapper-custom .page-body .billing-container .input-group.width-attr {
	@media screen and (min-width: 1px) {
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 80%;
	}
}

.page-wrapper-custom .page-body .data-container .input-group.width-attr .input-group-append.padding-attr {
	@media screen and (min-width: 1px) {
		padding-left: 5px;
	}
}

.page-wrapper-custom .page-body .billing-container .input-group.width-attr .input-group-append.padding-attr {
	@media screen and (min-width: 1px) {
		padding-left: 5px;
	}
}


.page-wrapper-custom .page-body .data-container .d-flex .item {
	
	@media screen and (min-width: 1px) {
		
	}
	
	@media screen and (min-width: 601px) {
	
	}
}


.patient-details-container .page-body .patient-cards-container {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 10px;
	}

}	

.patient-details-container .page-body .patient-cards-container .patient-card-container{
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%; 
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}
	
	@media screen and (min-width: 601px) {
		flex: 35%;
		max-width: 49%;
	}
	
}	

.patient-details-container .page-body .patient-cards-container .patient-card-container .name-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}

.patient-details-container .page-body .patient-cards-container .patient-card-container .birthday-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
		/*background-color: lightgoldenrodyellow;*/
	}
}

.patient-details-container .page-body .patient-cards-container .patient-card-container .right-space {
	
	@media screen and (min-width: 1px) {
		padding: 0 3px 0 0;
	}
}

.patient-details-container .page-body .patient-cards-container .patient-card-container .contactno-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
		/*background-color: lightyellow;*/
	}
}

.patient-details-container .page-body .patient-cards-container .patient-card-container .guardian-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
		/*background-color: lightyellow;*/
	}
}

.patient-details-container .page-body .patient-cards-container .patient-card-container .address-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.patient-details-container .page-body .patient-cards-container .patient-card-container .button-container {
	
	@media screen and (min-width: 1px) {
		padding: 10px 10px 0px 10px;
		margin: 0 0 10px 0;
	}
}

.patient-details-container .page-body .patient-cards-container .patient-card-container .footer-container {
	
	@media screen and (min-width: 1px) {
		/* padding: 10px; */
		background-color: white;
		font-size: 0.8rem;
		color: white;
	}
}


.employee-details-container .page-body .employee-cards-container {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 10px;
	}

}	

.employee-details-container .page-body .employee-cards-container .employee-card-container{
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%; 
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}
	
	@media screen and (min-width: 601px) {
		flex: 35%;
		max-width: 49%;
	}

}	

.employee-details-container .page-body .employee-cards-container .employee-card-container .name-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}

.employee-details-container .page-body .employee-cards-container .employee-card-container .gender-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.employee-details-container .page-body .employee-cards-container .employee-card-container .fee-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.employee-details-container .page-body .employee-cards-container .employee-card-container .type-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.service-details-container .page-body .service-cards-container.one-record {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	@media screen and (min-width: 601px) {
		width: 50%;
	}
}	

.service-details-container .page-body .service-cards-container {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 10px;
	}

}	

.service-details-container .page-body .service-cards-container .service-card-container{
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%; 
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}
	
	@media screen and (min-width: 601px) {
		flex: 35%;
		max-width: 49%;
	}

}	

.service-details-container .page-body .service-cards-container .service-card-container .description-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}


.service-details-container .page-body .service-cards-container .service-card-container .fee-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.service-details-container .page-body .service-cards-container .service-card-container .type-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.service-type-details-container .page-body .service-type-cards-container {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 10px;
	}

}	

.service-type-details-container .page-body .service-type-cards-container .service-type-card-container{
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%;
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}
	
	@media screen and (min-width: 601px) {
		flex: 35%;
		max-width: 49%;
	}

}	

.service-type-details-container .page-body .service-type-cards-container .service-type-card-container .type-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}

.service-type-details-container .page-body .service-type-cards-container .service-type-card-container .description-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}


.medicine-details-container .page-body .medicine-cards-container {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 10px;
	}

}	

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container{
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%; 
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}
	
	@media screen and (min-width: 601px) {
		flex: 35%;
		max-width: 49%;
	}

}	

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container .description-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container .itemcode-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container .genericname-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container .remarks-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container .lotno-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container .datemanufactured-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container .expirationdate-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.medicine-details-container .page-body .medicine-cards-container .medicine-card-container .retailsellingprice-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.user-account-details-container .page-body .user-account-cards-container {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 10px;
	}

}	

.user-account-details-container .page-body .user-account-cards-container .user-account-card-container{
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%; 
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}
	
	@media screen and (min-width: 601px) {
		flex: 35%;
		max-width: 49%;
	}

}	

.user-account-details-container .page-body .user-account-cards-container .user-account-card-container .name-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}

.user-account-details-container .page-body .user-account-cards-container .user-account-card-container .username-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.user-account-details-container .page-body .user-account-cards-container .user-account-card-container .password-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.user-account-details-container .page-body .user-account-cards-container .user-account-card-container .role-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}	

.consultation-details-container .page-body .consultation-cards-container {
	
	@media screen and (min-width: 1px) {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 10px;
	}

}

.consultation-details-container .page-body .consultation-cards-container .tooth-history-card-container{
	
	@media screen and (min-width: 601px) {
		flex: 100% !important;
		max-width: unset !important;
	}

}	

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container{
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%; 
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}
	
	@media screen and (min-width: 601px) {
		flex: 35%;
		max-width: 49%;
	}

}	

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .name-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .date-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .complaint-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .gender-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .age-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .dentist-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .consultationno-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .status-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-details-container .page-body .consultation-cards-container .consultation-card-container .payment-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-details-container .page-body .consultation-cards-container .today-card-container {
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%; 
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}
	
	@media screen and (min-width: 1051px) {
		flex: 35%;
		max-width: 49%;
	}

}	

.consultation-details-container .page-body .consultation-cards-container .today-card-container .name-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}

.consultation-details-container .page-body .consultation-cards-container .today-card-container .detail-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

/* For Tooth History Details in View Chart modal */
.consultation-cards-container .consultation-card-container{
	
	@media screen and (min-width: 1px) {
		flex: 100%;
		border: 1px solid gray;
	    width: 100%; 
	    border-radius: 10px 10px 10px 10px;
	    margin: 0 10px 10px 0;
	    overflow: hidden;
	    box-shadow: 0 0 10px 1px gray;
	    background-color: white;
	}

}

.consultation-cards-container .consultation-card-container .name-container {
	
	@media screen and (min-width: 1px) {
		padding: 5px 5px 5px 10px;
		background-color: blue;
		font-size: 1.1rem;
		color: white;
	}
}

.consultation-cards-container .consultation-card-container .date-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.consultation-cards-container .consultation-card-container .gender-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}

.page-body .consultation-cards-container .consultation-card-container .age-container {
	
	@media screen and (min-width: 1px) {
		padding: 3px 10px;
		font-size: 0.8rem;
	}
}


/* Tooth conditions color coding */

.bg-intact {
	background-color: #fefefe;
	color: black;
	border: 1px solid lightgray;
}

.bg-caries {
	background-color: #fafaa5;
	color: gray;
}

.bg-restored {
	background-color: #d6faa5;
	color: black;
}

.bg-missing {
	background-color: #b60909;
	color: white;
}

.bg-fractured {
	background-color: #f4a679;
	color: gray;
}

.bg-endodontically {
	background-color: #a4e8fc;
	color: gray;
}

.bg-impacted {
	background-color: #e6b1fd;
	color: black;
}

.bg-periodontally {
	background-color: #fea6ec;
	color: black;
}

.bg-erosion {
	background-color: #fc9e67;
	color: black;
}

.bg-orthodontically {
	background-color: #fc67c2;
	color: black;
}

/* This was created to exclude the component in getting cleanup by the cleanUpFormBeforeOrAfterSave() */
.form-control-custom {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}