/*
 * Merandex Technology Solutions, LLC
 *   Copyright 2017   All rights reserved
 *
 */

body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.4; }	/* Bootstrap 4 uses a different font family than BS3 */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { line-height: 1.1; }				/* BS4 defaults to line height 1.2 BS3 is 1.1 */
#HeaderName { margin-top: 5px; margin-bottom: 5px; font-size: 8.3vw; }
#NameWell { margin: 0 auto; }
.maxWidth-SixH { max-width: 600px; }
#dbcHeader { margin: 0; background-color: white; min-height: 0; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
#dbcFooter { margin: 11.42vw 0 0 0; }
#dbcFooterContainer { background-color: white; }
.dbc-link { text-decoration: underline;  }
.sectionHeader { font-weight: bold; }
.videoLabel {  }
.TopMarginFivePx { margin-top: 5px; }
#referBody { padding-top: 0; padding-bottom: 0; }
.referError { border-color: red; border-width: 1px; background-color: #ffe6e6;  }
#ReferMobileMessage { font-size: 12px; }
.btn-dbc { padding: 2.77vw 4.4vw; line-height: 6.6vw; font-size: 5vw; white-space: normal; }
.btn-dbc-arrow { padding: 2.77vw 2.2vw 2.77vw 4.4vw; }
.btn-dbc.hasIcon {white-space: nowrap; }
.DbcSMIcon { height: 13.3vw; }
.DbcGetOwnLink, .DbcInstallLink { font-size: 4vw; }
.DbcBreak { line-height: 1; font-size: 5.71vw; }
/* StaticOverlay is for when the dibc is to be shown BUT NOT functional.  Landing.php will pass a param to invoke this */
#StaticOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; }
.dbcWidgetWrapper { margin: 10px 0; }

/* Non Interactive styling - shown on landing.php */
body.nonInteractive #dbcHeader { padding-left: 0; padding-right: 0; }
body.nonInteractive .dbcTabs { line-height: normal; }
body.nonInteractive .dbcTab { padding: 0 5px; font-size: 4vw; }
body.nonInteractive .MenuButton { display: none; }
body.nonInteractive { scrollbar-width: thin; scrollbar-color: #ccc #333; }
body.nonInteractive::-webkit-scrollbar { width: 5px; height: 5px; }
body.nonInteractive::-webkit-scrollbar-thumb { background: #ccc; }
body.nonInteractive::-webkit-scrollbar-track { background: #333; }
body.nonInteractive .dbcWidgetWrapper { font-size: 5vw; }
body.nonInteractive .dbcWidgetWrapper input { width: 30vw; }
body.nonInteractive .dbcWidgetWrapper input[type=button] { padding: 1px 3px; }
body.nonInteractive .dbcWidgetWrapper input[type=reset] { padding: 1px 3px; }
body.nonInteractive .dbcWidgetWrapper span { width: 25vw; }
body.nonInteractive .col { padding-left: 5px; padding-right: 5px; }
body.nonInteractive .fitText { display: inline; }

/*
 * iOS 11 bug with fixed Modals
 * https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8
 * https://bugs.webkit.org/show_bug.cgi?id=176896
 * This forces the main window to scroll to the top of the page
 */
body.modal-open { position: fixed; width: 100%; }


.btn-static,
.btn-static:hover {	cursor: default; }

.videoContainer { width: 100%; max-width: 400px; margin: 10px auto; }		/* Bootstrap 4 */
.fitText { display: inline-block; font-size: 5vw; }
.menu-right { float: right; }
.audioPlayer { display: table; margin: 0 auto; }

.btn span {  font-weight: bold; }
.btnText { font-weight: bold; }

.fa-mobile { font-size: 9.4vw; }
.fa-envelope { font-size: 6vw; }
.fa-stack { font-size: 5vw; }
.fa-stack-txt { font-size: 3vw; }
.DbcContactIcon { display: none; margin-right: 5px; }

.noLeftPadding { padding-left: 0 !important; }
.noLeftMargin { margin-left: 0 !important; }
.poweredBy { font-size: 3.33vw; }


#preview {
    position: fixed;
    top: 50%;
    height: 2px;  /* actual text will overlap! */
    margin-top: -1px;  /* subtract half the height */
    line-height: 0px;  /* centre the text on the base line */
    text-align: center;
    left: 50%; /* added */
    transform: translateX(-50%) rotate(90deg); /* added translateX */
	-webkit-transform:  translateX(-50%) rotate(90deg);
    white-space: nowrap;
    z-index: 9999;
    font-size: 120px;
    color: yellow;
	opacity: 0.5;
	pointer-events: none;
}
#smsWarnDontShow { display: inline; height: auto; width: auto; margin: 0 3px 0 0; }
#smsWarnHelpBlock { font-size: medium; }
#smsWarnMsg { font-weight: bold; }

/* xs < 768 */
@media screen and (max-width: 189px) {
	.DbcGetOwnLink, .DbcInstallLink { font-size: 3vw; }
}

@media screen and (min-width: 190px) {
}

@media screen and (min-width: 225px) {
}

@media screen and (min-width: 275px) {
	.DbcContactIcon { display: inline-block; }
}

@media screen and (min-width: 350px) {
	.fa-mobile { font-size: 34px; }
	.fa-envelope { font-size: 21px; }
	.fa-stack { font-size: 18px; }
	.fa-stack-txt { font-size: 10px; }
	.btn-dbc { padding: 10px 16px; line-height: 1.3333333; font-size: 18px; }
	.btn-dbc-arrow { padding: 10px 8px 10px 16px; }
	.DbcSMIcon { height: 46px; }
	.DbcGetOwnLink, .DbcInstallLink { font-size: 18px; }
	.DbcBreak { font-size: 20px; }
	#dbcFooter { margin: 40px 0 0 0; }
	.poweredBy { font-size: 12px; }
}

@media screen and (min-width: 561px) {
	.fitText { font-size: 28px; }
	#HeaderName { font-size: 46px; }
}

/* sm */
@media screen and (min-width: 768px) {
}

/* md */
@media screen and (min-width: 992px) {
}

/* lg */
@media screen and (min-width: 1200px) {
}

/* Not currently used */
@media all and (display-mode: standalone) {
	#FSCheck { float: left; }
}


/* Sidebar CSS */
#mySidebar {
	background-color:#f5f5f5;
	position: fixed;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 10px 0 10px;
	z-index: 500;
}
ul.SidebarList {
	padding: 0;
	margin: 0;
	font: normal 18pt tohoma, arial, helvetica;
}
ul.SidebarList > li {
	list-style-type: none;
	white-space: nowrap;
	display: block;
	color: #000000;
	padding: 0 3px 10px 0;
}
ul.SidebarList > li.header { padding: 0 3px 0 0; text-decoration: underline; }
ul.SidebarList > li.clickable { cursor: pointer; }
ul.SidebarList > li.indent { margin-left: 20px; }
ul.SidebarList > li > a {
	text-decoration: none;
	color: #000000;
}
/* END Sidebar CSS	*/

/* RCIDModal CSS	*/
#rcidSendButton { margin-bottom: 2px; }
#rcidSendButton, #rcidAuthButton { width: 100px; }
#rcidSendButton:focus, #rcidAuthButton:focus { color: orange; }
#rcidSendButton:hover, #rcidAuthButton:hover { color: orange; }
.vertical-align {
	display: flex;
	align-items: center;
}

.doubleLine {
    border-top: 4px double #000;
    margin: 0 0 15px 0;
}
/* END RCIDModal CSS	*/

button.close {			/* Overdride the Modal Close icon styles	*/
	padding: 10px;
	color: #FF0000;
	opacity: .6;
}

.dbcEmbed {
	border: none;
}


#QRCode { width: 400px; max-width: 80vw; }

/* CSS for the bottom tabs */
#DbcTabsDiv {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 0 5px 0;
	border-top: 1px solid #AAA;
	text-align: center;
	display: inline-block;
/***
	With Display Flex, the left and right most tabs lose their rounded outside corner.
	The margin: 0 -5px; on the dbcTab seems to be causing it. With magin 0 auto, the rounded corners are OK, but the tabs are not overlapping.
	display: flex;
	justify-content: space-between;
	align-items: center;
***/
}
.DbcTabData.TabSelected { display: block; }
.DbcTabData { display: none; }
.dbcTabs {
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 25px;
	overflow: hidden;
	font-size: 12px;
	position: relative;
}
/* Now done via border-top on DbcTabsDiv
.dbcTabs:before {
	position: absolute;
	content: "";
	width: 100%;
	top: 0;
	left: 0;
	border-top: 1px solid #AAA;
	z-index: 1;
}
*/

.dbcTab {
	border: 1px solid #AAA;
	background: #D1D1D1;
	background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	display: inline-block;
	position:relative;
	z-index: 0;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
	text-shadow: 0 1px #FFF;
	margin: 0 -5px;
	padding: 0 15px;
	font-weight: bold;
	cursor: pointer;
}
.dbcTab.selected {
	background: #FFF;
	color: #333;
	z-index: 2;
	border-top-color: #FFF;
}
.dbcTab:before,
.dbcTab:after {
	border: 1px solid #AAA;
	position: absolute;
	top: -1px;
	width: 6px;
	height: 6px;
	content: "";
}
.dbcTab:before {
	left: -7px;
	border-top-right-radius: 6px;
	border-width: 1px 1px 0px 0px;
	box-shadow: 2px 0px 0 #ECECEC;
}
.dbcTab:after {
	right: -7px;
	border-top-left-radius: 6px;
	border-width: 1px 0px 0px 1px;
	box-shadow: -2px 0px 0 #ECECEC;
}
.dbcTab.selected:before {
	box-shadow: 2px 0px 0 #FFF;
}
.dbcTab.selected:after {
	box-shadow: -2px 0px 0 #FFF;
}

.MenuButton {
	background-color: #EEE;
	border-radius: 4px;
	border: 1px solid black;
	padding: 3px;
	margin: 5px 0 0 3px;
	float: left;
}
.MenuButtonBar {
	width: 15px;
	height: 3px;
	background-color: black;
	margin: 2px 0;
}

#MenuDiv {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 0 5px 0;
	text-align: center;
	display: inline-block;
}
#MenuDiv.WithText {
	width: 100%;
	border-top: 1px solid #AAA;
}
.MenuText {
	max-width: 600px;
	margin:0 auto;
	font-size: 22px;
	font-weight: bold;
}