/* Variables */
html {
	--background-color: #0078BF;
	--button-background-color: #00843D; /* Login button login screen color */
	--input-border-color: #4B4B45; /* Line under logo login screen color */
	--button-color: white; /* Login button text color */
	--text-color: white;
	--text-color-mobile: black;
	--question-title-color: white;
	--question-title-color-mobile: black;
	--active-text-color: white;
	--question-title-color-summary-page: black;  /* Summary Text color */
	--survey-top-header: white; /* Background of survey header (back of logo) */
	/* --background-top-bar: linear-gradient(to bottom, #FEECE8 0%, #FFD4BE 100%); */
	--text-top-bar-color: black;
	/* --background-modal-body: #005CBC; */
	--background-modal-header: #4B4B45;
	--text-modal-header: white;
	--background-show-more-footer: #4B4B45;
	--text-show-more-footer: black;
	--background-menu: #00843D;
	--background-mobile-login-header: none; /* Login Page Background Logo Color */
	--background-mobile-login-footer: #4B4B45; /* MagView Footer Login */
	--color-hamburger-menu: white;
	--shadow-body-section: 0px 2px 5px rgb(50 50 50 / 30%), 0px 2px 5px rgb(50 50 50 / 30%);
	--text-desktop-header-section: #77787b; /* The Breast Center and ASI */
	--background-desktop-header-section: #4B4B45;
	--background-mobile-logo-section: #0078BF;
}

/* ============================================= */
/* ============= LINING UP HEADER ============== */
/* ============================================= */
.survey-header .survey-title {
	height: 83px;
    display: flex;
    justify-content: center;
}
.survey-header .survey-title a,
.survey-header .survey-title .survey-header-second-logo {
	display: flex !important;
    height: 100% !important;
    align-items: flex-end !important;
	justify-content: center !important;
}
.survey-header .survey-title .logo-text{
	margin-bottom: -3px !important;
	line-height: 1 !important;
}
.survey-header .survey-title img {
	height: 100% !important;
}

/* ============================================= */
/* =============== SURVEY STYLES =============== */
/* ============================================= */

/* Top Bar */
/* .survey-view .survey-header {
	background: var(--background-top-bar) !important;
} */

/* Text in Top Bar */
.survey-view .survey-header .survey-title span,
.survey-view .survey-header .survey-start-user-section span,
.survey-view .survey-header .user-options-dropdown {
	color: var(--text-top-bar-color) !important;
}

/* Text */
.search-patient-header,
.patient-row,
.respondent-row,
.start-survey-study,
.radio-inline span,
.question-body label,
.question-body td,
.question-container .long-text.text-center,
.survey-patient-search h2 {
	color: var(--text-color) !important;
	text-shadow: none !important;
}
.question-container .question-title {
	color: var(--question-title-color) !important;
}

.summary-page .question p{
	color: var(--question-title-color-summary-page) !important;
}

.survey-view .survey-header {
	background: linear-gradient(to bottom, #8e8e8e 0%, var(--survey-top-header) 40%, var(--survey-top-header) 79%) !important;
}


/* Buttons */
.survey-back-button-header,
.survey-back-button-header:before,
.survey-next,
.survey-next:before,
.survey-summary-view,
.survey-summary-view:before,
.survey-back,
.survey-back:before,
.survey-add-btn,
.survey-add-btn:before,
.btn-primary.survey-btn,
.question-container .survey-patient-search .toggle-btn,
.survey-log-in-user-btn,
#loginBtn {
	background-color: var(--button-background-color) !important;
	border: 1px solid var(--button-background-color) !important;
	color: var(--button-color) !important;
}

/* Inputs */
.question-container input[type=text],
.question-container input[type=tel],
.question-container select,
.question-container select.form-control,
.question-container select.form-control:not([size]):not([multiple]),
.form-group.with-high-input #UserName,
.form-group.with-high-input #Password {
	border: 1px solid var(--input-border-color) !important;
}

/* Radiobuttons */
.question-container .regular-radio+div.radio {
	border: 6px solid var(--input-border-color) !important;
}

/* Checkboxes */
.question-container .regular-checkbox+div.checkbox,
.question-container .regular-checkbox:checked+div.checkbox {
	border: 3px solid var(--input-border-color) !important;
}
.question-container .regular-radio:checked+div.radio:after,
.question-container .regular-checkbox:checked+div.checkbox:after {
	color: var(--input-border-color) !important;
}

@media screen and (max-width: 760px) {
	.question-container .question-title {
		color: var(--question-title-color-mobile) !important;
	}

	/* Text */
	.search-patient-header,
	.patient-row,
	.respondent-row,
	.start-survey-study,
	.radio-inline span,
	.question-body label,
	.question-body td,
	.question-container .long-text.text-center,
	.survey-patient-search h2 {
		color: var(--text-color-mobile) !important;
		text-shadow: none !important;
	}
}

/* "You have more options below" footer */
.survey-view .survey-footer .has-more-options {
	background-color: var(--background-show-more-footer) !important;
	color: var(--text-show-more-footer) !important;
	/* text-shadow: none; */
}

/* ============================================= */
/* ================ MODAL STYLES =============== */
/* ============================================= */

/* Header Background */
.modal-header {
	background: var(--background-modal-header) !important;
}

/* Modal background */
/* .modal-body,
.modal-footer,
.survey-content {
	background: var(--background-modal-body) !important;
} */

/* Header Text */
.modal-title,
.login-modal button.close {
	color: var(--text-modal-header) !important;
}


/* ============================================= */
/* ======= PATIENT RESULT PORTAL STYLES ======== */
/* ============================================= */

/* Global background */
body {	
	background: var(--background-color) !important;
    /* background-repeat: no-repeat;
    background-position: bottom 0% right 0px !important;
    background-size: 100%; */
}

/* Icons */
.form-group .input-with-icon-wrapper i {
	color: var(--button-background-color) !important;
}
.navbar-toggle {
	background: var(--button-background-color) !important;
}
.fa.fa-bars.menu-toggle {
	color: var(--color-hamburger-menu) !important;
}

/* Header Section */
.navbar-static-top {
	background: var(--background-desktop-header-section);
}
.welcome-title, .version-label, .caret.grey-colored, .logo-text {
	color: var(--text-desktop-header-section);
}

/* Menu Section */
#main-menu, 
.badge-big,
.left-menu-sublinks li.active,
.left-menu-link.active {
	background: var(--background-menu);
	border: none !important;
}
.card-body{
	border-left: 3px solid var(--background-menu) !important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover{
	border-bottom: 2px solid var(--background-menu) !important;
}

/* Buttons */
.btn-purple, form input[type='submit']{
	background-color: var(--button-background-color);
    border-color: var(--button-background-color);
	color: var(--button-color);
}
.btn-purple:hover{
	opacity: 0.7;
	background-color: var(--button-background-color);
    border-color: var(--button-background-color);
	color: var(--button-color);
}

/* Togglers */
.toggler-doc.active {
	background: var(--button-background-color);
    color: var(--button-color) !important;
    border-radius: 50px !important;
    border-bottom: var(--button-background-color);
    border-bottom-color: var(--button-background-color);
}
span.label-default{
	background-color: var(--button-background-color) !important;
}

/* Body Section */
section {
	box-shadow: var(--shadow-body-section);
}
section section {
	box-shadow: none;
}

/* Text */
.list-unstyled .left-menu-link a{
	color: var(--text-color);
}
.left-menu-sublinks li.active a,
.left-menu-link.active a{
	color: var(--active-text-color);
}




@media (max-width: 767px) {
	.navbar-brand-container {
		background-color: var(--background-mobile-logo-section);
	}
}

@media (max-width: 635px) {
	.logo-background {
		background: var(--background-mobile-login-header);
		border-bottom: solid 1px var(--input-border-color);
	}

	#mob-footer {
		background: var(--background-mobile-login-footer);
	}
}