@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
	--color-white: #ffffff;
	--color-base-dark: #3b3b3b;
	--color-base-grey: #9199a8;
	--color-dark-blue: #162d4f;
	--color-primary: #052d4c;
	--color-accent-dark: #ff755a;
	--color-for-link: #ff755a;
	--color-accent-light: #c6f2ee;
	--color-default-grey: #d8e0e5;

	--body-bg: #f8f8f8;
	--pharmacy-icon-bg: #e9ecee;
	--doctor-image-wrapper-bg: #e7ebee;
	--dividing-line: #eaeaea;
	--border-line: #e5e8ef;
	--file-upload-border: #ccc;
	--input-hover-border: #a8c1d5;
	--input-default-border: #256496;
	--error-message: #ff0000;
	--table-body-bg: #f2f3f4;
	--table-header-bg: #e9eaee;
	--app-header-border: #e4e9ef;
	--app-header-progress: #45ace5;

	--color-base: #3b3b3b; /* not used */
}

body,
html {
	font-family: 'Inter', sans-serif !important;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	padding: 0;
	margin: 0;
	color: var(--color-base-dark);
}

body {
	background-color: var(--body-bg);
	font-size: 16px;
	overflow-x: hidden;
	overflow-y: auto;
}

button,
input,
textarea,
select {
	font-family: 'Inter', sans-serif !important;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
}

a {
	color: var(--color-for-link);
}

.row {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.row.center {
	align-items: center;
	justify-content: center;
}

.col {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.check {
	position: relative;
	top: -4px;
	left: -5px;
	opacity: 0;
	display: inline-block;
	transform: rotate(45deg);
	height: 7px;
	width: 3px;
	border-bottom: 2px solid var(--color-base-grey);
	border-right: 2px solid var(--color-base-grey);
	margin-left: 11px;
}

.circle {
	position: relative;
	top: 2px;
	height: 16px;
	width: 16px;
	background-color: var(--color-dark-blue);
	border: solid 2px var(--color-base-grey);
	border-radius: 50%;
	display: block;
	z-index: 1;
}

.logo {
	width: 130px;
	height: 34px;
	object-fit: contain;
	position: absolute;
	left: 10px;
	bottom: 25%;
}

.md-live-logo {
	width: 105.8px;
	height: 20px;
	object-fit: contain;
	position: absolute;
	right: 10px;
	bottom: 40%;
}

.delete {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.pharmacy {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.pharmacy-icon {
	width: 100px;
	height: 80px;
	opacity: 0.8;
	border-radius: 10px;
	background-color: var(--pharmacy-icon-bg);
	display: flex;
	justify-content: center;
	align-items: center;
}

.doctor-image-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	background-color: var(--doctor-image-wrapper-bg);
	border-radius: 8px;
}

.call {
	width: 32px;
	height: 32px;
	object-fit: contain;
	margin-right: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

hr {
	border: none;
	height: 1px;
	background-color: var(--dividing-line);
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

form {
	display: flex;
	flex-direction: column;
	text-align: left;
}

label {
	display: flex;
	align-items: center;
}

input,
select,
textarea {
	margin: 0;
	padding: 0 9px;
	color: var(--color-base-dark);
	font-size: 1em;
	height: 34px;
	background: var(--color-white);
	border: 1px solid var(--border-line);
	border-radius: 8px;
	-webkit-border-radius: 8px;
	outline: none;
}

textarea {
	padding: 9px;
}

label input {
	margin-right: 8px;
}

select {
	height: 36px;
}

select:not([multiple]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-position: right 50%;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
	padding-right: 27px;
	cursor: pointer;
}

input:hover,
select:hover {
	border-color: var(--input-hover-border);
}

input:focus,
input:active,
select:focus,
select:active {
	border-color: var(--input-default-border);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

input + input,
input + select,
input + button,
select + input,
select + select,
select + button {
	margin-left: 15px;
}

.button-container {
	display: flex;
	justify-content: center;
	width: 100%;
}

.button-container-right {
	display: flex;
	justify-content: flex-end;
}

.input-container {
	position: relative;
	width: 100%;
	margin: auto;
	margin-bottom: 10px;
	text-align: left;
}

.input-container label ~ input,
.input-container label ~ select,
.input-container label ~ textarea {
	margin-top: 5px;
}

.error {
	height: 25px;
	color: var(--error-message);
}

.input-container input,
.input-container textarea {
	width: calc(100% - 20px);
}

.input-container select {
	width: 100%;
}

.input-container input[type='checkbox'] {
	width: auto;
}

.input-container .suggestions-container {
	position: absolute;
	top: 51px;
	width: 250px;
	background: var(--color-white);
	border: 1px solid var(--border-line);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	padding: 10px;
	max-height: 200px;
	overflow: scroll;
	z-index: 1000;
}

.input-container-single .suggestions-container {
	top: 55px;
	left: 0;
}

input ~ .suggestions-container {
	display: none;
}

input:focus ~ .suggestions-container {
	display: block;
}

.input-container label ~ .suggestions-container {
	top: 56px;
}

.input-container .suggestions-container .suggestion-item {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-color: var(--dividing-line);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.input-container .suggestions-container .suggestion-item:hover {
	color: var(--color-base-dark);
	transform: scale(1.025);
}

.input-container .suggestions-container .suggestion-item:first-child {
	padding-top: 0;
}

.input-container .suggestions-container .suggestion-item:last-child {
	padding-bottom: 0;
	border-bottom-width: 0;
}

button {
	color: var(--color-white);
	font-size: 14px;
	font-weight: 600;
	height: 36px;
	border: 0px solid;
	align-items: center;
	justify-content: center;
	padding-left: 15px;
	padding-right: 15px;
	cursor: pointer;
	border-radius: 8px;
	background-color: var(--color-accent-dark);
}

button.default {
	background-color: var(--color-default-grey);
	color: var(--color-primary);
}

button .clean {
	background-color: auto;
}

button:hover {
	opacity: 0.75;
}

button[type='submit'] {
	margin-top: 15px;
}

.row.tableBody {
	border-radius: 10px;
	background-color: var(--table-body-bg);
	height: 68px;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
}

.col50 {
	width: 50%;
	display: flex;
	flex-direction: column;
}

.col50.header {
	margin-left: 23px;
	flex-direction: column;
}

.col40 {
	width: 40%;
	display: flex;
	flex-direction: column;
}

.col30 {
	width: 30%;
	display: flex;
	flex-direction: column;
}

.col20 {
	width: 20%;
	display: flex;
	flex-direction: column;
}

.col10 {
	width: 10%;
	display: flex;
	flex-direction: column;
}

.col10 button {
	background-color: transparent;
	border: 0px solid;
}

table {
	width: 100%;
	padding: 10px;
	border-collapse: separate;
	border-spacing: 0 1em;
}

table tr {
	border-radius: 10px;
	background-color: var(--table-body-bg);
}

table tr th {
	font-weight: 400;
	background-color: var(--table-header-bg);
	color: var(--color-base-grey);
}

table tr th,
table tr td {
	text-align: left;
	padding: 10px;
}

table tr th:first-child,
table tr td:first-child {
	padding-left: 24px;
}

table tr th:last-child,
table tr td:last-child {
	text-align: right;
	padding-right: 24px;
}

.rows {
	width: 100%;
}

.rows .row {
	display: flex;
	flex: 1;
	flex-direction: row;
	padding: 15px;
}

.rows .row > div {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 40%;
}

.rows .row > div:last-child {
	display: block;
	text-align: right;
	align-self: center;
	margin-right: 0;
}

.rows .row:nth-child(even) {
	background-color: var(--table-body-bg);
}

.app {
	width: 100%;
	padding: 0;
	margin: 0;
}

.app-header {
	position: fixed;
	padding: 10px;
	width: calc(100% - 20px);
	height: 56px;
	border-bottom: 1px solid var(--app-header-border);
	box-shadow: 0 2px 4px 0 rgba(13, 26, 33, 0.2);
	background-color: var(--color-dark-blue);
	z-index: 100;
}

.app-header h1 {
	color: var(--color-white);
}

.app-header ul.progress {
	max-width: 1000px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	border-radius: 16px;
	margin: auto;
	text-overflow: ellipsis;
}

.app-header ul.progress li {
	display: flex;
	flex-grow: 1;
	padding-right: 20px;
	margin-right: -21px;
	text-overflow: ellipsis;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.app-header ul.progress li:first-child,
.app-header ul.progress li:first-child a {
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}

.app-header ul.progress li:last-child,
.app-header ul.progress li:last-child a {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

.app-header ul.progress li a {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	color: var(--color-base-grey);
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-top: 6px;
}

.app-header ul.progress li.complete a {
	color: var(--color-base-grey);
}

.app-header ul.progress li.current .circle {
	width: 17px;
	height: 17px;
	border: solid 2px var(--color-accent-dark);
}

.app-header ul.progress li.current .check {
	border-bottom: 2px solid var(--app-header-progress);
	border-right: 2px solid var(--app-header-progress);
}

.app-header ul.progress li.complete .check {
	opacity: 1;
}

.app-header ul.progress li.current a {
	color: var(--color-for-link);
	font-weight: 600;
	z-index: 1;
}

.line-container {
	display: flex;
	justify-content: center;
	flex: 1;
	width: 100%;
}

.line {
	background-color: var(--color-base-grey);
	max-width: 1000px;
	width: 100%;
	height: 1px;
	margin-top: 12px;
}

.app-header ul.progress li:first-child .line-container > div:first-child,
.app-header ul.progress li:last-child .line-container > div:last-child {
	opacity: 0;
}

.app-sub-header p {
	font-size: 16px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
}

.app-content-wrapper {
	box-sizing: border-box;
	position: relative;
	min-height: 100vh;
	padding-top: 100px;
}

.app-content-wrapper-bg {
	display: block;
	position: fixed;
	top: 76px;
	height: calc(100vh - 76px);
	z-index: -1;
}

.app-content-wrapper-bg-right {
	right: 0;
}

.app-content-wrapper-bg-fullwidth-bottom {
	top: auto;
	bottom: 0;
	min-width: 100vw;
}

.app-content-container {
	display: block;
	width: 100vw;
}

.app-content {
	display: flex;
	width: calc(100% - 10px);
	max-width: 1200px;
	margin: auto;
	justify-content: center;
	align-items: center;
}

.app-content.list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.list-item-header {
	height: 60px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: var(--color-accent-light);
}

.app-content-block {
	display: inline-block;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	color: var(--color-base-grey);
	width: calc(100% - 10px);
	vertical-align: top;
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 rgba(48, 49, 51, 0.1);
	background-color: var(--color-white);
}

.app-content-block:has(.body-metrics) {
	box-shadow: none;
	background-color: transparent;
}

.health-conditions {
	box-shadow: 0 1px 3px 0 rgba(48, 49, 51, 0.1);
	background-color: var(--color-white);
}

.health-conditions {
	box-shadow: 0 1px 3px 0 rgba(48, 49, 51, 0.1);
	background-color: var(--color-white);
}

.body-metrics .required-mark {
	color: var(--error-message);
}

.body-metrics .height-metrics,
.body-metrics .weight-metric {
	display: flex;
	align-items: center;
	width: 50%;
}

.body-metrics input {
	width: 60px;
	margin-left: 10px;
	padding: 0 30px 0 10px;
}

.body-metrics .unit {
	position: relative;
	left: -25px;
	top: 0;
}

.body-metrics-submit-btn {
	display: none;
}

.app-content-block-header {
	box-sizing: border-box;
	min-height: 36px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--color-accent-light);
	padding: 5px 10px;
}

.app-content-block-footer {
	height: 68px;
	border-top: 1px solid #e7e7e7;
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
}

.app-content-block-body {
	padding: 20px 24px;
}

.app-content-block-body.body-metrics {
	padding: 10px 24px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-bottom: 20px;
}

.app-content-block-fullname {
	margin-top: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-content .app-content-block:last-child {
	margin-bottom: 20px;
}

.app-content-block.one-fourth,
a .app-content-block.one-fourth {
	width: calc(25% - 10px);
	margin-right: 20px;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

.app-content-block.one-fourth:nth-child(4n),
a:nth-child(4n) .app-content-block.one-fourth {
	margin-right: 0;
	margin-bottom: 0;
}

.app-content-block.one-fourth:hover,
a:hover .app-content-block.one-fourth {
	transform: scale(1.1);
}

.app-content-block table,
.app-content-block .rows {
	margin-left: -24px;
	margin-right: -24px;
	margin-bottom: 20px;
	width: calc(100% + 48px);
}

.app-content-block .rows .row {
	padding-left: 24px;
	padding-right: 24px;
	width: 90%;
}

.app-content-block h1 {
	font-size: 16px;
	color: var(--color-base-dark);
	font-weight: 600;
}

#loading-container {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

#loading-container .loading-box {
	background-color: var(--input-default-border);
	border-radius: 15px;
	padding: 20px;
}

#file-upload-container {
	margin: 0;
	padding: 22px 9px;
	color: var(--color-base-grey);
	font-size: 1em;
	background: var(--color-white);
	border: 1px dashed var(--border-line);
	border-radius: 8px;
	-webkit-border-radius: 8px;
	outline: none;
	cursor: pointer;
}

.uploader-description {
	margin: 0;
}

.pharmaName {
	font-size: 14px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	margin: 0;
}

.pharmaAddress {
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	margin: 0;
}

.selected {
	background-color: var(--color-dark-blue) !important;
	color: var(--color-white);
}

.form-row-item {
	width: 18%;
}

.form-row-item-half {
	width: 9%;
}

.custom-alert {
	display: flex;
	align-items: center;
	padding: 6px 5px 6px 10px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--color-white);
}

.custom-alert__icon {
	margin-right: 7px;
}

.custom-alert__button {
	margin-left: 25px;
	cursor: pointer;
}

.choose-provider__datepicker-wrapper .react-datepicker__input-container input {
	width: 85%;
}

.checkbox-label {
	display: block;
	position: relative;
	padding-left: 23px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox-label input {
	position: absolute;
	top: 1px;
	left: 0;
	display: block;
	height: 0;
	width: 0;
	opacity: 0;
	cursor: pointer;
}

.checkbox-label .checkmark {
	box-sizing: border-box;
	display: block;
	position: absolute;
	top: 1px;
	left: 0;
	height: 14px;
	width: 14px;
	border: 2px solid var(--color-base-grey);
	border-radius: 2px;
	opacity: 1;
}

.checkbox-label:hover .checkmark {
	border: 2px solid #727984;
}

.checkbox-label input:checked ~ .checkmark {
	background-color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.checkbox-label:hover input:checked ~ .checkmark {
	background-color: var(--color-dark-blue);
	border: 2px solid var(--color-dark-blue);
}

.checkbox-label input:checked ~ .checkmark:after {
	content: '';
	position: absolute;
	top: -1px;
	left: 2px;
	width: 4px;
	height: 7px;
	border: solid var(--color-white);
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Mobile Styles */
@media only screen and (max-width: 750px) {
	.app-content-block.one-fourth,
	a .app-content-block.one-fourth {
		width: calc(100% - 60px);
		transition: all 0.2s ease-in-out;
		cursor: pointer;
		margin-right: 0;
	}

	.app-content-block.one-fourth:hover,
	a:hover .app-content-block.one-fourth {
		transform: none;
	}

	.app-header {
		position: relative;
	}

	.app-header > img {
		opacity: 0;
	}

	.app-header > h1 {
		position: absolute;
		top: 0;
		left: 10px;
		bottom: 0;
		right: 10px;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.4em;
	}

	.app-content-wrapper {
		min-height: auto;
		padding-top: 24px;
	}

	.form-row-item,
	.form-row-item-half {
		width: 100%;
	}

	.row.mobile-column {
		flex-direction: column;
	}

	.row.mobile-column .col50 {
		width: 100% !important;
	}

	.mobileHeaderTitle {
		color: var(--color-accent-dark);
		font-size: 16px;
		font-weight: 600;
	}

	.mobileHeaderSubTitle {
		color: var(--color-base-grey);
		font-size: 14px;
		font-weight: normal;
	}

	.custom-alert {
		margin: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.custom-alert__text {
		margin-bottom: 10px;
		text-align: center;
	}

	.custom-alert__button {
		margin-left: 0;
		min-width: 25%;
	}
}


@media only screen and (max-width: 400px) {
	button {
		font-size: 12px;
		padding-left: 10px;
		padding-right: 10px;
	}
}

#react-select-2-input {
	height: 20px;
}