/** Add css rules here for your application. */


/** Example rules used by the template application (remove for your app) */
h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 40px 0px 70px;
  text-align: center;
}

.sendButton {
  display: block;
  font-size: 16pt;
}

/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
  width: 400px;
}

.dialogVPanel {
  margin: 5px;
}

.serverResponseLabelError {
  color: red;
}

/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
  margin: 15px 6px 6px;
}

html {
	height: 100%;
	width: 100%;
}

body {
	margin: 0px !important;
	height: 100%;
	width: 100%;
}

* {
	font-family: 'Hind', sans-serif !important;
}

.banner {
	background-color: #0d4e9b;
	color: white;
	width: 100%;
	height: 110px;
}

.bannerTitle {
	font-size: 16.5pt;
	padding-left: 10px;
	padding-top: 10px;
	font-weight: bold;
	line-height: 16.5pt;
}

.displayFlex {
	display: flex;
}

.bannerTab {
	font-size: 13.5pt;
	cursor: pointer;
	position: relative;
	top: calc(100% - 45px);
	height: 20.25pt;
}

.bannerTabSelected {
	border-bottom: 3px solid white;
}

.marginLeft30 {
	margin-left: 30px;
}

.marginLeft20 {
	margin-left: 20px;
}

.marginLeft10 {
	margin-left: 10px;
}

.bannerBottomHeight {
	height: calc(100% - 32px);
}

.bannerRightTab {
	position: relative;
	left: calc(100% - 700px);
}

.bannerInitials {
	border: 3px solid white;
	border-radius: 28pt;
	width: 28pt;
	height: 24pt;
	padding-top: 4pt;
	text-align: center;
	top: calc(100% - 54px);
}

.formulationsTab {
	border-radius: 10px 10px 0px 0px;
	color: white;
	text-align: center;
	height: 29px;
	padding-top: 7px;
	font-size: 12pt;
	font-weight: bold;
	width: 120px;
	cursor: pointer;
}

.formulationsPublishTabEmpty {
	background-color: #8f9ba8;
}

.formulationsDraftsTabEmpty {
	background-color: #626f77;
}

.formulationsPublishTab {
	background-color: #0d4e9b;
}

.formulationsDraftsTab {
	background-color: #283147;
}

.formulationsTabs {
	margin-top: 25px;
	margin-left: 1.5%;
	display: flex;
}

.formulationsHeader {
	margin-left: 1.5%;
	width: 97%;
	height: 50px;
	color: white;
	border-radius: 6pt 10px 0px 0px;
	display: flex;
}

.formulationsCurveOutLeftPublish {
	border-radius: 0px 0px 3.75pt 0px;
	width: 10px;
	height: 36px;
	background-color: white;
}

.formulationsCurveOutLeft {
	border-radius: 0px 0px 10px 0px;
	width: 5px;
	height: 36px;
	background-color: white;
}

.formulationsCurveOutRight {
	border-radius: 0px 0px 0px 10px;
	width: 5px;
	height: 36px;
	background-color: white;
}

.formulationsPublishHeaderEmpty {
	background-color: #8f9ba8;
}

.formulationsDraftsHeaderEmpty {
	background-color: #626f77;
}

.formulationsPublishHeader {
	background-color: #0d4e9b;
}

.formulationsDraftsHeader {
	background-color: #283147;
}

.formulationsTableDraftsBorderEmpty {
	border-color: #626f77;
	border-radius: 0px 0px 10px 10px;
}

.formulationsTablePublishBorderEmpty {
	border-color: #8f9ba8;
	border-radius: 0px 0px 10px 10px;
}

.formulationsTableDraftsBorder {
	border-color: #283147;
	border-radius: 0px 0px 10px 10px;
}

.formulationsTablePublishBorder {
	border-color: #0d4e9b;
	border-radius: 0px 0px 10px 10px;
}

.formulationsHeaderLabel {
	font-size: 10.5pt;
	font-weight: 500;
	line-height: 50px;
	cursor: pointer;
}

.left25 {
	position: relative;
	left: 25px;
}

.formulationsHeaderArrow {
	font-size: 10.5pt;
	font-weight: 500;
	line-height: 50px;
	cursor: pointer;
}

.formulationsArrow {
	cursor: pointer;
	position: relative;
	top: 14px;
	margin-left: 10px;
}

.displayInlineFlex {
	display: inline-flex;
}

.formulationsTable {
	background-color: #e4e8ee;
	height: calc(100% - 5px);
}

.formulationsContainer {
	border-width: 2px;
	border-style: solid;
	margin-left: 1.5%;
	width: calc(97% - 4px);
	height: calc(100% - 165px);
	background-color: #e4e8ee;
}

.formulationsRow {
	margin-top: 2px; 
	height: 60px;
	margin-left: 2px;
	width: calc(100% - 6px);
	background-color: white;
	border: 1px solid #d3dee9;
	display: flex;
}

.formulationsRowBlueBackground {
	background-color: #f1f5f9;
}

.formulationsBarPublish {
	background-color: #0d4e9b;
}

.formulationsBarDrafts {
	background-color: #283147;
}

.formulationsTableData {
	font-size: 10.5pt;
	line-height: 60px;
	position: relative;
	left: 25px;
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.formulationsTableDoseData {
	font-size: 10.5pt;
	position: relative;
	left: 25px;
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.wordWrap {
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.mainContentHeight {
	height: calc(100% - 135px);
}

.formulationsActionPanel {
	border-left: 1px solid black;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 40px;
}

.cursorPointer {
	cursor: pointer;
}

.formulationsEditButton {
	position: relative;
	top: calc(50% - 10px);
	left: calc(33% - 10px);
}

.formulationsTrashButton {
	position: relative;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
}

.formulationsAddButton {
	color: white;
	height: 30px;
	margin-top: 20px;
	margin-left: 1.5%;
	background-color: #0d4e9b;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 9pt;
	font-weight: bold;
	border-width: 0px;
	border-radius: 5px;
	cursor: pointer;
}

.popupPanel {
	padding: 0px;
	border-width: 0px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.4);
}

.popupGlass {
	opacity: 0.6;
	background-color: black;
}

*:focus {
	outline: none;
}

.blackElements {
	color: black;
	border-color: black;
}

.blueBottomBorder {
	border-bottom-color: #449dd7 !important;
}

.textBoxError {
	border-bottom-color: #e02228 !important;
}

.formulationsErrorPosition {
	position: absolute;
	left: 235px;
}

.colorView {
	width: 100%;
	height: calc(100% - 110px);
}

.colorContent {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: calc(50% - 305px);
	width: 530px;
}

.marginLeftRightAuto {
	margin-left: auto;
	margin-right: auto;
}

.colorOpenSettingsLabel {
	font-size: 13.5pt;
	font-weight: bold;
	width: 125pt;
	color: #062ff9;
	border-bottom: 2px solid #062ff9; 
	position: relative;
	left: calc(100% - 170pt);
	top: calc(100% - 650px);
	cursor: pointer;
}

.colorCategoryButton {
	display: flex;
	border-radius: 10px;
	padding-top: 3px;
	width: 100%;
	height: 42px;
	margin-top: 15px;
	cursor: pointer;
	-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
}

.colorCategoryButton:hover {
	-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);	
}

.colorButtonTitle {
	font-size: 22.5pt;
	font-weight: bold;
	color: white;
	line-height: 45px;
	margin-left: 30px;
	width: 150px;
}

.colorButtonText {
	font-size: 14pt;
	font-weight: bold;
	color: white;
	line-height: 45px;
	margin-left: 30px;
	width: 150px;
	overflow: hidden;
}

.colorButtonWhite {
	color: black;
}

.colorSettingsRow {
	margin-left: 30px;
	width: calc(100% - 60px);
	border-bottom: 1px solid #dfe8ef;
	display: flex;
}

.colorSettingsLabel {
	margin-left: 10px;
	border-radius: 10px;
	color: white;
	width: 200px;
	height: 40px;
	font-size: 15pt;
	font-weight: bold;
	-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
	text-align: center;
	line-height: 40px;
	margin-top: 7.5px;
	margin-bottom: 7.5px;
}

.colorSettingsPoundSign {
	font-size: 15pt;
	font-weight: bold;
	margin-left: 25px;
	margin-top: 10px;
}

.colorSettingsTextBox {
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	width: 80px; 	
	margin-top: 10px;
	height: 30px;
	font-size: 15pt;
	margin-left: 10px;
}

.colorSettingsTextBox:focus {
	border-bottom: 2px solid #449dd7 !important;
}

.colorSettingsEditIcon {
	margin-left: 10px;
	margin-top: 15px;
	cursor: pointer;
}

.colorWeightTop {
	width: 100%;
	height: 60px;
	color: white;
	display: flex;
}

.colorWeightBackPanel {
	margin-left: 20px;
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
	cursor: pointer;
}

.colorWeightBackLabel {
	margin-left: 15px;
	font-size: 16pt;
	line-height: 16pt;
	margin-top: 1px;
}

.colorWeightTitle {
	font-weight: bold;
	text-align: center;
	width: calc(100% - 216px);
	margin-top: auto;
	margin-bottom: auto;
	font-size: 20pt;
}

.colorWeightScroll {
	width: 100%;
	height: calc(100% - 227px);
}

.colorWeightAddButton {
	color: white;
	height: 30px;
	margin-top: 10px;
	margin-left: 20px;
	background-color: #0d4e9b;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 9pt;
	font-weight: bold;
	border-width: 0px;
	border-radius: 5px;
	cursor: pointer;
}

.colorWeightContent {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.colorWeightEmptyPanel {
	width: 580px;
	min-width: 580px;
	margin-top: 15px;
	border-radius: 10px;
	border: 2px dashed #cccccc;
	height: 271px;
}

.colorWeightCard {
	width: 580px;
	min-width: 580px;
	max-width: 580px;
	margin-top: 15px;
	border-radius: 10px;
	background-color: #e4e8ee;
	border: 2px solid #bfcad8;
	z-index: 0;
	position: relative;
}

.colorWeightCardRow {
	display: flex;
	height: 33px;
	border-bottom: 2px solid #bfcad8;
	padding-left: 20px;
	line-height: 33px;
}

.colorWeightCardLabel {
	font-weight: bold;
	font-size: 12pt;
	margin-right: 10px;
	margin-top: 1px;
}

.colorWeightCardTextBox {
	background-color: transparent;
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom: 2px solid #939598;
	color: #08386a;
	height: 20px;
	font-size: 12pt;
	margin-top: 6px;
	min-width: 30px;
	max-width: 63px;
	padding-left: 5px;
}

.colorWeightCardUnitsLabel {
	background-color: transparent;
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom: 2px solid #939598;
	color: #08386a;
	height: 24px;
	font-size: 12pt;
	min-width: 35px;
	max-width: 82px;
	padding-left: 10px;
}

.colorWeightCardListBox {
	border-width: 0px;
	background-color: transparent;
	font-size: 12pt;
}

.colorWeightCardDash {
	margin-left: 5px;
	margin-right: 5px;
	line-height: 33px;
	font-size: 12pt;
	font-weight: bold;
}

.colorWeightCardRightPanel {
	display: flex;
	position: relative;
	left: calc(100% - 462px);
}

.colorWeightCardVitalPanel {
	display: flex;
	position: relative;
	left: calc(100% - 472px);
}

.colorWeightCardIcon {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	margin-top: 7px;
}

.colorWeightCardGreaterThan {
	border-bottom: 2px solid #939598;
	color: #08386a;
	font-size: 12pt;
	margin-bottom: 7px;
}

.colorWeightCardTrash {
	width: 30px;
	height: 30px;
	position: relative;
	left: calc(100% - 220px);
	top: -18px;
	padding: 5px;
	cursor: pointer;
}

.colorWeightCardJoulesBox {
	border-right-width: 0px;
	border-left: 2px solid #bfcad8;
	border-top: 2px solid #bfcad8;
	border-bottom: 2px solid #bfcad8;
	background-color: white;
	border-radius: 5px 0px 0px 5px;
	min-width: 30px;
	max-width: 63px;
	padding-left: 5px;
	height: 30px;
}

.colorWeightCardJoulesLabel {
	border-left-width: 0px;
	border-right: 2px solid #bfcad8;
	border-top: 2px solid #bfcad8;
	border-bottom: 2px solid #bfcad8;
	background-color: white;
	border-radius: 0px 5px 5px 0px;
	height: 23px;
	padding-top: 3px;
	min-width: 37px;
	max-width: 82px;
	padding-left: 10px;
}

.loginViewFlow {
	width: 100%;
	height: 100%;
	display: inline-flex;
}

.loginViewLeft {
	width: 50%;
	height: 100%;
	background-color: #0d2260;
}

.loginViewTitlte {
	color: #0d2260;
	font-size: calc(7vmin + 25pt);
	font-weight: bold;
	width: 100%;
	text-align: center;
	margin-top: auto;
}

.marginTopBottomAuto {
	margin-top: auto;
	margin-bottom: auto;
}

.loginViewEmailFlow {
	display: inline-flex;
	position: relative;
	left: calc(50% - 269px);
	margin-bottom: 25px;
	width: 550px;
	margin-top: auto;
}

.loginViewPasswordFlow {
	display: inline-flex;
	position: relative;
	left: calc(50% - 269px);
	width: 550px;
	margin-bottom: 0px;
}

.resetLink {
	position: relative;
	font-size: 14pt;
	left: calc(50% - 100px);
	margin-bottom: 20px;
	cursor: pointer;
	width: 200px;
}

.loginViewLabel {
	font-size: 16.5pt;
	font-weight: bold;
	width: 150px;
	text-align: right;
	line-height: 50px;
	margin-right: 20px;
}

.loginViewTextBox {
	font-size: 16.5pt;
	background-color: #f1f5f9;
	border: 2px solid #d3dee9;
	border-radius: 10px;
	width: 368px;
	height: 50px;
	padding-left: 10px;
}

.marginBottom90 {
	margin-bottom: 90px;
}

.displayInlineGrid {
	display: inline-grid;
	
}

.loginDisplayInlineGrid {
	display: inline-grid;
	grid-template-rows: 40% 50px 40px 70px 100px;
}

.loginViewButton {
	color: white;
	background-color: #0d2260;
	font-weight: bold;
	font-size: 15.75pt;
	cursor: pointer;
	border-radius: 10px;
	margin-left: 438px;
	position: relative;
	left: calc(50% - 269px);
	height: 45px;
	width: 100px;
	border-width: 0px;
	padding-top: 3px;
	margin-bottom: auto;
}

.messagesView {
	width: 100%;
	height: calc(100% - 110px);
}

.messagesLeftPanel {
	width: 137px;
	margin-left: 35px;
	margin-right: 35px;
}

.messagesRightPanel {
	height: 100%;
	width: calc(100% - 242px);
}

.messageNewMessageButton {
	color: white;
	background-color: #0d2260;
	font-weight: bold;
	font-size: 10.5pt;
	cursor: pointer;
	border-radius: 5px;
	width: 137px;
	border-width: 0px;
	margin-top: 35px;
	height: 35px;
}

.messagesLeftSpace {
	height: 100%;
	width: 5px;
}

.messagesSelectedSpace {
	background-color: #449dd7;
}

.messagesSelectedLabel {
	background-color: #f3f6fa;
}

.messagesLeftLabel {
	font-size: 10.5pt;
	width: 132px;
	padding-left: 10px;
	line-height: 35px;
}

.messagesLeftTab {
	display: flex;
	height: 35px;
	margin-top: 20px;
	cursor: pointer;
}

.messagesRightContainer {
	background-color: #e4e8ee;
	width: 100%;
	margin-top: 35px;
	border-radius: 10px;
	height: calc(100% - 125px);
	border: 2px solid #bfcad8;
	padding-top: 20px;
	padding-bottom: 20px;
}

.messagesBottomPanel {
	display: flex;
	margin-top: 10px;
}

.messagesShowingLabel {
	margin-left: 10px;
	font-size: 10.5pt;
}

.messagesPageCountPanel {
	display: inline-flex;
	position: absolute;
	right: 10px;
}

.messagesPageButton {
	font-size: 10.5pt;
	font-weight: bold;
	color: #a7a9ac;
	margin-right: 20px;
	border-radius: 12.5px;
	cursor: pointer;
	width: 25px;
	height: 24px;
	line-height: 25px;
	text-align: center;
	padding-top: 1px;
}

.messagesSelectedPage {
	background-color: black;
	color: white;
}

.messagesRow {
	display: flex;
	margin-left: 20px;
	width: calc(100% - 40px);
	height: 60px;
	margin-bottom: 2px;
	background-color: white;
	cursor: pointer;
}

.messagesRowSpace {
	width: 10px;
	height: 100%;
	background-color: #0d4e9b;
}

.messagesRowSpaceDraft {
	background-color: #253659;
}

.messagesRowLabel {
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10.5pt;
}

.messagesRowLabel li {
	display: none;
}

.messagesRowLabel span {
	font-size: 10.5pt !important;
}

.messagesSelectedIcon {
	background-color: white;
}

.messagesFailedBanner {
	width: 100%;
	height: 45px;
	background-color: #e02228;
	overflow: hidden;
	display: flex;
	cursor: pointer;
}

.messagesSuccessBanner {
	width: 100%;
	height: 45px;
	background-color: #57b047;
	overflow: hidden;
	display: flex;
	cursor: pointer;
}

.messagesBannerLeftElement {
	margin-left: auto;
	margin-right: 15px;
	margin-top: auto;
	margin-bottom: auto;
}

.messagesBannerRightElement {
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	color: white;
	font-size: 12pt;
	font-weight: bold;
}

@keyframes slideOut {
    from {top: -45;}
    to {top: 0;}
}

@keyframes slideIn {
    from {top: 0;}
    to {top: -45;}
}

.messagesBannerSlideOut {
	animation-name: slideOut;
    animation-duration: 1s;
}

.messagesBannerExtended {
	top: 0 !important;
}

.messagesBannerSlideIn {
	animation-name: slideIn;
    animation-duration: 1s;
}

.bannerEllipses {
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    width: 120px;
    cursor: default;
}

.colorWeightErrorIcon {
	margin-top: 3px;
	margin-left: 5px;
}

.popupBorder {
	padding: 0px;
	border-width: 0px;
}

.messagesEndingIcon {
	width: 20px;
	height: 20px;
	margin-right: 20px;
	margin-top: auto;
	margin-bottom: auto;
	cursor: pointer;
}

.messagesBodyTextArea {
	width: calc(100% - 4px);
	background-color: #e4e8ee;
	border: 2px solid #bfcad8;
	font-size: 15pt;
	border-radius: 10px 10px 0px 0px;
	height: 420px;
}

.formulationsDisabledButton {
	border-color: #888888 !important;
	color: #888888 !important;
	background-color: #cccccc !important;
	cursor: default !important;
}

.formulationsDisabledButton:hover {
	border-color: #888888 !important;
}

.analyticsCalendarSelected {
	background-color: #449dd7 !important;
	color: white;
}

.emptyBorderPopup {
	border-width: 0px !important;
	padding: 0px !important;
	background-color: transparent !important;
}

.logoutLabel {
	font-size: 13.5pt;
	padding-left: 20px;
	width: 150px;
	background-color: white;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
	font-weight: bold;
	padding-top: 10px;
	cursor: pointer;
	padding-bottom: 10px;
}

.logoutLabel:hover {
	background-color: #eeeeee;
}

.weightsLabelDisabled {
	color: #aaaaaa;
}

.weightsDisabledButton {
	color: #aaaaaa;
	background-color: #cccccc;
	cursor: no-drop;
}

.formulationsErrorTooltip {
	color: white;
	font-weight: bold;
	font-size: 12pt;
	background-color: #e02228;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
	border-radius: 5px;
	padding: 5px;
}

.weightHeaderShadow {
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
	position: relative;
	z-index: 3;
}

.messageBannerShadow {
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
}

.gwt-DatePicker td 
.datePickerDayIsValue {
	background-color: #d7dfe8 !important;
}

.gwt-DatePicker td 
.datePickerDayIsWeekend {
  background-color: white;
}

.gwt-DatePicker td 
.datePickerDayIsHighlighted {
  background-color: #F0E68C !important;
}

.gwt-DatePicker td
.datePickerWeekdayLabel {
	font-size: 10.5pt; 
	font-weight: bold;
	border-bottom: 1px solid #d3deea;
	color: black;
	padding-top: 3px;
}

.gwt-DatePicker td
.datePickerWeekendLabel {
	font-size: 10.5pt; 
	font-weight: bold;
	border-bottom: 1px solid #d3deea;
	color: black;
	padding-top: 3px;
}