/* CSS Document */
@import 'https://fonts.googleapis.com/css?family=Lato';

* {padding:0; margin:0;}

body,html {
	color: #767561;
	font-family: 'Lato';
	font-size: 14px;
	height:100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {background-color:#EAEAEA;}

body.sample_questionnaires{
	font-family: 'Lato', sans-serif;
}

a { text-decoration: none; color: #CB800E; transition: all .2s;}
a:hover {color: #DE5900;}
.wrapper {
	margin: 0 auto;
	position: relative;
	text-align: left;
	max-width: 900px;
	z-index: 1;}
.header {position:relative; height:80px;}
.header h1 {position:absolute; left:155px; top:70px; display:none;}
#menu1 li {float:left; list-style:none;}
#menu1 li a {padding:5px 27px; font-size:10px; text-transform:uppercase; display:block; color:#fff; text-decoration:none; font-weight:bold;}
#menu1 li.grey a {background-color:#949688;}
#menu2 {display:none;}
#mobile_nav {
  display: none;
}

.help_link span:after {
    content: '\f059';
    visibility: visible;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color:#666;
}

.help_marker {
    visibility: hidden;
}

.practice_logo {background-image: url("/custom/images/logo.png");
	display: block;
	height: 48px;
	left: 0;
	text-decoration: none;
	padding: 12px 0 0 6px;
	margin-top: 12px;
	background-repeat:no-repeat;}

.content {
	background-color:#fff;
	border-radius:10px;
	padding:15px 25px;
	margin: 10px 15px;
	width: calc(100% - 5px);
}
.portal_menu h3 {border-bottom: 1px solid #ccc;
	color: #363636;
    font-weight: normal;
    margin-bottom: 16px;
    padding: 10px 0 6px;
    text-align: center;}
.text {max-width:calc(100% - 220px); min-height:300px; line-height:150%; }
.text h1 {font-weight: 300;font-size: 2.2em;margin-bottom: 8px; padding-bottom: 8px; padding-top:12px; line-height: 35px;}
.text h2 {padding:3px 0px; margin:4px 0px; color: #666; font-size:20px;}
.text .spacer {height: 170px; width: 85px; float:left;}
.text li {
    list-style: disc inside none;
    padding: 2px;
}


input[type=text],input[type=password],input[type=email], select {
	border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    color: #666666;
    padding: 3px;
    width: 95%;
}

p.login_extra.register a {
	font-size: 13px;
	font-weight: bold;
}

textarea {border-radius:6px;border: 1px solid #CCCCCC;color: #666666; padding:6px; width:99%;}

select {
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    padding: 3px;
}

.sub_foot {padding-top:10px;}
.sub_foot a {color:#999;}

/*SPECIAL */
/*LOGIN FORM */
#signin_form {margin:25px 100px 0px 190px;}
.signin_inputs input {
    border: 1px solid #999999;
    border-radius: 3px;
    padding: 8px;
	width:150px;
	font-weight: 500;
}

.pt_allergies {display:none;}

.button, button {
	font-weight: bold;
	background-image: none !important;
	-webkit-appearance: none;
}

.button.login {
	border: none !important;
	padding: 8px 20px;
	width: auto !important;
	-webkit-appearance: none;
	background-image: none !important;
}

/* -----------------------------------------------------------------------*/
/* >>>>>>>>>>>>>>>>>>>> UPDATE PORTAL MENU ANIMATIONS<<<<<<<<<<<<<<<<<<<<-*/
/* ---------------------------------------------------------------------*/
.portal_menu li {
    transition: all .1s;
    padding: 0px 0px 8px 10px;
}

.portal_menu li {
    background-position: 8px 0
}

.portal_menu li:hover {
    background-position: 0 0;
    margin-left:0;
}

.portal_menu li a:hover {
    text-decoration: none;
    font-weight: bold;
}


/* -----------------------------------------------------------------------*/
/* >>>>>>>>>>>>>>>>>>>> Bobs demo customizations<<<<<<<<<<<<<<<<<<<<-*/
/* ---------------------------------------------------------------------*/
.button.short, .button {
    padding: 6px 6px;
    font-size: 13px;
    border-radius: 6px;
    margin-right: 6px;
    background-color: #739a64;
    background-image: none;
}

.button.short:hover {background-color: #759096;}

.text .questionnaire_options > h1 {
    border-top-color: #ccc;
}

.text .questionnaire_options > h1 {
	margin-top: 25px;
    padding: 10px 0 5px;
}

.close {
	visibility: hidden;
}
.close:before {
	display: inline-block;
    content: '\f057';
    visibility: visible;
    display: inline-block;
    font: normal normal normal 22px/1 FontAwesome;
    left: -5px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color:white;
    float:right;
    transition: color .2s;
}

.close:hover:before{
	color: #dedede;
}

/*checkboxes */

.control-group {
	display: inline-block;
	width: 200px;
	height: 210px;
	margin: 10px;
	padding: 30px;
	text-align: left;
	vertical-align: top;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.control {
	font-size: 18px;
	position: relative;
	display: inline-block;
	margin-bottom: 15px;
	padding-left: 30px;
	cursor: pointer;
}

.control input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.control__indicator {
	position: absolute;
	top: 2px;
	left: 0;
	width: 15px;
	height: 15px;
	background: #e6e6e6;
	border: solid 1px #999;
	border-radius: 2px;
}

.control--radio .control__indicator {
	border-radius: 50%;
}

/* Hover and focus states */
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
	background: #ccc;
}

/* Checked state */
.control input:checked ~ .control__indicator {
	background: #2aa1c0;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
	background: #759096;
}

/* Disabled state */
.control input:disabled ~ .control__indicator {
	pointer-events: none;
	opacity: .6;
	background: #e6e6e6;
}

/* Check mark */
.control__indicator:after {
	position: absolute;
	display: none;
	content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after {
	display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after {
	top: 1px;
	left: 5px;
	width: 3px;
	height: 8px;
	transform: rotate(45deg);
	border: solid #fff;
	border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
	border-color: #7b7b7b;
}

/*New Form Stylings */
.draggable form {
	padding: 0;
}

.draggable {
	background-color: #eee;
	border-radius: 0 0 6px 6px;
}

.draggable h2 {
	color: white;
	background-color: #036;
	border-radius: 0;
}

table, p, .draggable form > div {
	margin: 0 15px;
}

.fam_table > tbody > tr:nth-child(even) td {
    background-color: #dedede;
}

/* Fix padding on Forms */

form:not(.questionnaire_form){
	padding: 8px 18px 12px;
}

form#signin_form {
	padding: 20px;
}
#seconary_nav {
	display: none;
}


/*MOBILE VIEW */
@media only screen and (max-width: 800px) {

	/*SPECIFIC */
	.practice_logo {
	  margin: auto;
	  position: relative;
	}

	.text {max-width:100%;}

	.text h1 {font-size:2rem;}

	/*GENERAL*/

	#mobile_nav {
		position:relative;
		text-align:center;
		padding:5px;
		display:block;
	}
	#mobile_nav > select {
	  font-size: 20px;
	  text-align: center;
	}
	.portal_menu {display:none}

	#seconary_nav {display:block}

	div.main_logo {
	  padding: 20px;
	  width: 100%;
	}
	.main_logo img {
	  max-width: 400px;
	}
	.wrapper {
	  position: relative;
	}

	.background-block {
	  display:none;
	}
	.text {
	  width: auto;
	}
	.content {
	  top: auto;
	  width: auto;
	}
	.text h1 {
	  font-size: 2.25rem;
	  line-height: 40px;
	  margin-bottom: 15px;
	}
	/* Sign in form */
	#signin_form {
	  margin: 25px 0;
	}
	#signin_form label span {
	  display: block;
	  margin-left: auto;
	  padding: 0 5px 0 0;
	  text-align: center;
	  width: auto;
	}

	.signin_inputs input {
	  font-size: 18px;
	  width: 90%;
	}
	#aToolTip {display:none !important;}

	/* Reset Form */
	.reset_form {
	  font-size: inherit;
	  margin: 16px auto;
	  width: auto;
	}

	/*No tables! */
	table, tbody, tr, td {
	  display: block;
	  width: auto;
	}

	/*table exceptions */
	.ui-datepicker-calendar table {display:table;}
	.ui-datepicker-calendar tr {display:table-row;}
	.ui-datepicker-calendar td {display:table-cell;}

	.button {
	  white-space: unset;
	  width: auto;
	}

	.draggable {
	  left: 0 !important;
	  width: 100% !important;
	}

	.draggable h2 .close {
	  font-size: 18px;
	}

	/* For the Registration Page */
	div .stats_block label, div  .contact_block label, div  .ec_block label, div  .insurance_block label, div  .zip, div  .city, div  .state, div  .country, div .HEIGHT, div  .WEIGHT, div  .PWD1, div  .PWD2 {
	  display: block;
	  float: none;
	  width: auto;
	}

	div .block label span {
		font-size:15px;
		color:#999;
	}

	div.cc_card_details, div.cc_person_details {
	  clear: both;
	  display: block;
	  float: none;
	  margin: 15px 0;
	  overflow: hidden;
	  width: auto;
	}

	/*Secure Messages */
	div .thread_sms.from_pt {
	  margin: 8px 20px 0 10px;
	}
	div .thread_sms.from_dr {
	  margin: 8px 10px 0 20px;
	}
	.thread_sms .message_foot > span {
	  display: block;
	  padding:0;
	}
	.new_secure_message #title {
	  min-width: 240px;
	}

	/*Appointments */
	div.calendar_holder {
	  display: block;
	  float: none;
	  width: auto !important;
	}
	div.mini_calendar {
	  float: left;
	  padding-right: 5%;
	  width: 45%;
	}
	.mini_calendar h4 {
	  border-bottom: 1px solid #333333;
	  font-size: 20px;
	  padding: 5px;
	  text-align: center;
	}
	.calendar_holder .invalid {display:none;}
	div.mini_calendar table td {
	  font-size: 18px;
	}
	div.mini_calendar table td span {
	  color: #666666;
	  display: block;
	  float: none;
	  text-align: center;
	}
	.mini_calendar > table td {
	  background-position: center bottom !important;
	}
	.mini_calendar table th {display:none;}
	.mini_calendar .past {display:none;}

	/* Billing & Invoices */
	.billing_options > div {
	  clear: both;
	  float: none !important;
	  margin-bottom: 15px;
	  width: auto !important;
	}
	.balance_label .pt_balance {
	  display: block;
	}
	button.button.make_payment_button {
	  float: none;
	  margin: auto;
	}
	.button.print_it {
	  display: block;
	  float: none;
	  margin: 0 auto 5px;
	}

	/* Vaccines */
	ul.vaccines li h4 {
	  display: block;
	  float: none;
	  text-align: left;
	}
}