/*! Copyright 2011 - Tamtris Web Servces Inc. - FertilityFriend.com */

/* Theme colors */
:root {
    --ff-theme-color: hsl(290, 26%, 41%); /* d09cbf */
    --ff-theme-color-shade: hsl(290,26%,21%); /* 56% s */
    --ff-theme-color-light: hsl(290,26%,97%);
    --ff-theme-text-color: #fff; 
    --ff-theme-text-color-shade: #fff;
    --ff-theme-text-color-error: hsl(344, 75%, 83%);

    /* basic card colors */
    --ff-card-text-color: #222;
    --ff-card-review-text-color: #fff;
    --ff-card-review-color: hsl(135, 30%, 40%);
    --ff-card-alert-text-color: #fff;
    --ff-card-alert-color: red;
    --ff-card-message-text-color:#fff;
    --ff-card-message-color:hsl(219, 30%, 40%);
    

    --ff-theme-color-grey: #f2f2f2;
    --ff-theme-color-grey-border: #ccc;

}
/*! Copyright 2011 - Tamtris Web Servces Inc. - FertilityFriend.com */
:root {
   
    --ff-theme-font-size: 4.3vmin; 
    --f7-font-size: 4.3vmin;
   


    /* fertility colors */
    --ff-fertility-normal: var(--ff-theme-color-grey);
    --ff-fertility-menses: #f4b3c4;
    --ff-fertility-menses-text: #333;
    --ff-fertility-menses-heavy: hsl(344, 75%, 63%);
    --ff-fertility-menses-heavy-text: #fff;
    --ff-fertility-menses-light: hsl(344, 75%, 93%);
    --ff-fertility-menses-light-text: #333;
    --ff-fertility-fertile: hsl(103, 34%, 77%);
    --ff-fertility-fertile-text: #333;
    --ff-fertility-posfertile: #c4eeb3;
    --ff-fertility-posfertile-text: #333;
    --ff-fertility-ovulation: hsl(103, 34%, 55%);
    --ff-fertility-ovulation-text: #333;
    --ff-fertility-luteal: #ffe1c5;
    --ff-fertility-luteal-text: #333;
    --ff-fertility-test: #ffffff;
    --ff-fertility-test-text: #333;
}


@media (min-width: 512px) { 
    :root {
        --ff-theme-font-size: 20px;
        --f7-font-size: 20px;
    }
}

.ff_link {
    display: inline-block;
    border-bottom: 1px solid currentColor; 
    text-decoration: none;
}

.ff_fab {
    background-color: var(--ff-theme-color) !important;
    border: 1px solid var(--ff-theme-text-color);
    color: var(--ff-theme-text-color);
}
.ff_fab i {
    color: var(--ff-theme-text-color) !important;
}

.ff_select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    background: none;
    background-color: #fff;
    border: none;

}

.ff_dark {
    background-color: var(--ff-theme-color-shade) !important;
    color: var(--ff-theme-text-color-shade) !important;
}
a.ff_dark {
    background-color: var(--ff-theme-color-shade) !important;
    color: var(--ff-theme-text-color-shade) !important;
    border-color: var(--ff-theme-text-color-shade) !important;
}

.ff_dark_keypad {
    background-color: #333 !important;
    color: #ccc !important;
}

.ff_select {
    border: 1px solid var(--ff-theme-color-grey-border);
    border-radius: 3px;
    padding: 7px;
    background-color: #fff;
}


.section_separator {
    border-top: 3px solid var(--ff-theme-color-shade);
}

.purple_title {
	color: var(--ff-theme-color-shade);
}

/* Table */
table.the_table {
        border-width:0px 0px 0px 0px;
        border-spacing: 0px;
        border-style: solid;
        border-color: #ccc;
        border-collapse: collapse;
        background-color: white;
        font-size: var(--ff-theme-font-size);
}
table.the_table th,table.the_table td {
        padding: 3px;
        border-style: solid;
        border-color: #ccc;
        font-size: var(--ff-theme-font-size);
}
table.the_table th {
    color: var(--ff-theme-text-color) ; 
    background-color:var(--ff-theme-color);
    border:none;
    font-size: larger;
}
table.the_table td {
    border: none;
}


table.the_table tr td {
    background-color: white;
    border: none;
    color: var(--ff-card-text-color);
}

table.the_table tr.even td {
        background-color:var(--ff-theme-color-grey);
        border:1px solid white;
        color: var(--ff-card-text-color);
        /* border: none; */
}
table.the_table tr.odd td {
        background-color: white;
        border: none;
        color: var(--ff-card-text-color);
}


/* Table No Border */
table.the_table2 {
        border-width:0px 0px 0px 0px;
        border-spacing: 0px;
        border-style: solid;
        border-color: var(--ff-theme-color-shade);
        border-collapse: collapse;
        background-color: white;
}
table.the_table2 th,table.the_table td {
        padding: 3px;
        border-style: solid;
        border-color:var(--ff-theme-color-shade);
}
table.the_table2 th {
    color: var(--ff-theme-text-color) ; 
    background-color: var(--ff-theme-color);
    border-width:0px 0px 0px 0px;
}
table.the_table2 td {
        border-width:0px 0px 0px 0px;
}
table.the_table2 tr.even td {
        color: var(--ff-theme-text-color);
        background-color:var(--ff-theme-color-light);
}
table.the_table2 tr.odd td {
        background-color: white;
}

/* Message banners and help text */
.help_text {margin-left: 0px;background-color: var(--ff-theme-color-light);}
.banner_header {display: inline;padding-right:3px;padding-left:3px;background-color: var(--ff-theme-color-shade);color:var(--ff-theme-text-color-shade);font-weight:bold}
.error_text {font-weight:bold;color:var(--ff-theme-text-color-error);}

/* calendar */

.cal_na {background-color:var(--ff-fertility-normal); text-decoration: none; } 
.cal_normal {background-color: var(--ff-fertility-normal); text-decoration: none; }
.cal_menses {background-color: var(--ff-fertility-menses);color: var(--ff-fertility-menses-text);text-decoration: none; }
.cal_menses_medium {text-shadow:none; background-color: var(--ff-fertility-menses);color: var(--ff-fertility-menses-text);text-decoration: none; }
.cal_menses_light {text-shadow:none; background-color: var(--ff-fertility-menses-light);color: var(--ff-fertility-menses-light-text);text-decoration: none; }
.cal_menses_heavy {text-shadow:none; background-color: var(--ff-fertility-menses-heavy);color: var(--ff-fertility-menses-heavy-text);text-decoration: none; }

.cal_fertile {background-color: var(--ff-fertility-fertile);color: var(--ff-fertility-fertile-text);text-decoration: none; }

.cal_posfert {background-color: var(--ff-fertility-posfertile);color: var(--ff-fertility-posfertile-text);text-decoration: none; }
.cal_luteal {background-color: var(--ff-fertility-luteal);color: var(--ff-fertility-luteal-text);text-decoration: none; }

.cal_ovulation {background-color: var(--ff-fertility-ovulation);color: var(--ff-fertility-ovulation-text);text-decoration: none; }

.cal_lastdata {background-color: var(--ff-fertility-normal);text-decoration: none; }


.cal_current {text-shadow:none; border: 4px solid var(--ff-theme-color-shade);text-decoration: none;}

.cal_current_lnk {text-decoration:underline; font-weight:900;color: var(--ff-theme-color-shade);}

.cal_title {color: var(--ff-theme-text-color) ; background-color: var(--ff-theme-color); }
.cal_test {background-color: var(--ff-fertility-test);border: 3px solid var(--ff-fertility-menses);color: var(--ff-fertility-test-text);text-decoration: none; }

.cal_legend {background-color: #FFFFFF; border: solid var(--ff-theme-color-shade);}
.cal_date {color: #000000 ; background-color: var(--ff-theme-color-shade);color: var(--ff-theme-text-color-shade); font-weight: bold;}
.cal_text {color: var(--ff-theme-text-color) ;  }
.cal_header  {color: var(--ff-theme-text-color-shade) ; background-color: var(--ff-theme-color-shade); font-weight: bold;width:80px}
.cal_legend_text {color: var(--ff-theme-text-color);}
.cal_sel {background-color: var(--ff-theme-color-light);}


.cal_menses_border {background-color: var(--ff-fertility-normal);border: 3px solid var(--ff-fertility-menses);color: var(--ff-fertility-menses-text);text-decoration: none; }
.cal_fertile_border {background-color:var(--ff-fertility-normal); border: 3px solid var(--ff-fertility-fertile);text-decoration: none; }
.cal_ovulation_border {background-color: var(--ff-fertility-normal);border: 3px solid var(--ff-fertility-ovulation);text-decoration: none; }


/* Generic Module Styles */
.mod_caption {display: inline;background-color: var(--ff-theme-color);color: var(--ff-theme-text-color);font-weight:bold;font-size:var(--ff-theme-font-size);padding: 2px 5px;margin-left: 2px}

.mod_title {color: var(--ff-theme-text-color-shade) ; background-color: var(--ff-theme-color-shade); font-weight: bold;}

.mod_content2 {background-color: var(--ff-theme-color-light);color: var(--ff-theme-text-color); } 

.mod_content {background-color: var(--ff-theme-color-light);color: var(--ff-theme-text-color);}
.mod_header {color: var(--ff-theme-text-color-shade) ; background-color: var(--ff-theme-color-shade); font-weight: bold;}
.mod_even_row {background-color: var(--ff-theme-color-grey);color: var(--ff-card-text-color); }
.mod_odd_row {background-color:#ffffff;color: var(--ff-card-text-color);}
/* interpretation block */
.interpretation_header {color: var(--ff-theme-text-color) ; background-color: var(--ff-theme-color); font-weight: bold;}
.interpretation_subheader {color: var(--ff-theme-text-color) ; background-color: var(--ff-theme-color); font-weight: bold;}
.interpretation_subrow {background-color: var(--ff-theme-color-grey);color: var(--ff-card-text-color);  }
.interpretation_row {background-color: var(--ff-theme-color-grey);color: var(--ff-card-text-color); }


table.ff_fert_cal_table {
    width:100%;
    font-size:var(--ff-theme-font-size);
}
td.ff_fert_cal_table {height:35px;}

.faq {font-size:smaller; padding:3px; border: 1px solid var(--ff-theme-color-shade);background-color: var(--ff-theme-color-grey);}

/* cards */

.ff_card {padding:3px; color: var(--ff-card-text-color); background-color: var(--ff-theme-color-grey);margin-bottom:20px;}
.ff_card_title {padding:3px; font-size:larger; background-color: var(--ff-theme-color); color: var(--ff-theme-text-color);font-weight:bold;}
.ff_card_alert_title {padding:5px 3px; font-size:larger; background-color:var(--ff-card-alert-color); color: var(--ff-card-alert-text-color);font-weight:bold;}
.ff_card_review_title {padding:5px 3px; font-size:larger; background-color: var(--ff-card-review-color); color: var(--ff-card-review-text-color);font-weight:bold;}
.ff_card_message_title {padding:5px 3px; font-size:larger; background-color: var(--ff-card-message-color); color: var(--ff-card-message-text-color);font-weight:bold;}


input[type=checkbox] {
	 border: 1px solid var(--ff-theme-color-grey-border);
	   padding: 0.5em;
	   font-size: 15px;
	   line-height: 1.2em;
	   width: 80%;
	   background: #fff;
	   /*background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); */
	   -webkit-appearance: none;
	   -webkit-box-shadow: 1px 1px 1px #fff;
	   -webkit-border-radius: 0.5em;
	display: inline-block;
	   font-size: larger;
	   line-height: 1em;
	   margin: 0 0.25em 0 0;
	   padding: 0;
	   width: 1.5em;
	   height: 1.5em;
	   -webkit-border-radius: 0.25em;
	   vertical-align: text-top;
}
input[type=checkbox]:checked {
	background: url(../images/cb.png) no-repeat center center;
     -webkit-background-size: 28px 28px; 
 }


textarea {font-size:larger;}



/* key pad */
#temp_keypad td.keypad {font-size:larger;text-align:center;color:#fff;background-color:teal;width:33%;height:2em;}

.row1 {background-color:#eeeeee;border:1px solid #ccc;}
.row2 {background-color:#fff;border:1px solid #ccc;}
.data_header {background-color:#ddd;font-weight:bold;padding-bottom:5px;padding-top:5px;margin-bottom:5px;}
.dpo {color:teal;font-weight:bold;}

/* Tablet */
#fftablet_split{}
#fftablet_left {vertical-align:top;width:100%;}
#fftablet_right {vertical-align:top;display:none;} 
.tablet_display {display:none;}
.tablet_display_blk {display:none;}
.tablet_no_display {}

/* @media only screen and ( min-device-height:1023px ) and (orientation:landscape){ */
@media only screen and ( min-device-height:1023px ) and (min-aspect-ratio: 4/3) {
	#fftablet_left {width:50%;display:inline-block;}
	#fftablet_right {width:46%;margin-left:25px;display:inline-block;} 
	.tablet_display {display:inline-block;}
    .tablet_display_blk {display:block;}
	.tablet_no_display {display:none;}
}

/* Tablet */
@media 
  (min-width: 800px) 
  and (orientation: landscape) { 
  	#fftablet_left {width:50%;display:inline-block;}
	#fftablet_right {width:46%;margin-left:25px;display:inline-block;} 
	.tablet_display {display:inline-block;}
    .tablet_display_blk {display:block;}
	.tablet_no_display {display:none;}
} 

.smalltext {font-size:smaller;}
.pickertext {font-size:smaller;padding-bottom:3px;}

div.dta_list {
	padding:5px;
	border:1px solid #888;
}

body,img {
-webkit-touch-callout: none;
-webkit-user-select:none;
}

/* ============================== iPhone ============================== */

/* img */

img.chart_style {
box-shadow: 5px 5px 7px #888;
border-radius: 5px;
max-width:98%;
} 


img.edge2edge {
padding:1px;
max-width:100%;
} 


img.chart_style_zoomed {
box-shadow: 5px 5px 7px #888;
border-radius: 5px;
width:auto;
}

img.ff_icon {
border-:1px solid #ccc;
border-radius: 3px;
margin-bottom:3px;
margin-right:3px;	
}

/* Tab Bar */

table.ff-bar {
 width:100%;
}

table.ff-bar-dta {
background-color:#ffffff;
}

table.ff-bar td {
 height: 44px;
 width:25%;
 text-align:center;
 vertical-align: bottom;
 font-size:50% !important;
}

.ff-calendar {
    background-image: url('../images/home.svg');
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: 28px 28px;
    color:#797979;
}


.ff-calendar-s {
    background-image: url('../images/home-s.svg');
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: 28px 28px;
    color:#0433ff;
}

.ff-chart {
    background-image: url('../images/chart.svg');
    background-repeat: no-repeat;
    background-position: center 6px;
    background-size: 28px 22px;
    color:#797979;
}

.ff-chart-s {
    background-image: url('../images/chart-s.svg');
    background-repeat: no-repeat;
    background-position: center 6px;
    background-size: 28px 22px;
    color:#0433ff;
}

.ff-data
{
    background-image: url('../images/data.svg');
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: 28px 28px;
    color:#797979;
}
.ff-data-s
{
    background-image: url('../images/data-s.svg');
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: 28px 28px;
    color:#0433ff;
}
.ff-analysis
{
    background-image: url('../images/analysis.svg');
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: 16px 28px;
    color:#797979;
}
.ff-analysis-s
{
    background-image: url('../images/analysis-s.svg');
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: 16px 28px;
    color:#0433ff;
}

.ff-customize
{
    background-image: url('../images/customize.svg');
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: 16px 28px;
    color:#797979;
}

.ff-defaults
{
    background-image: url('../images/defaults.svg');
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: 16px 28px;
    color:#797979;
}

ul[data-role=listview] li a.ui-btn { font-weight: normal;} 

.banner {border:1px solid orange;padding:3px;}

img.ff-icon {
	vertical-align:middle;
	height:1.2em;
}


  .ffbutton { display:inline-block;margin:5px;border:1px solid var(--ff-theme-color-grey-border);border-radius:5px;padding:5px;text-decoration:none !important;}
  .ffbutton-bold { background-color:orange; font-weight:bold;}
  
  .fficon-highlight {
  	filter:  brightness(0.5);
  }

#temp_dta::placeholder {
	height:1.5em !important;
	width:4em !important;
	font-size:50px !important;
	font-weight:bold !important;
	text-align:center !important;
	padding-top:15px;
}

/* Theme override */

.button {
	border-color: var(--ff-theme-color-shade) !important;
	color: var(--ff-theme-color-shade) !important;
}

.button:active,
.button.active-state {
  background:none !important;
	border-style: solid !important;
}

.item-input {
border-radius:3px !important;
border:1px solid #ccc  !important;
margin-bottom:2px  !important;
margin-top:1px  !important;
}

a,a:visited {
color: var(--ff-theme-color-shade) !important;
}

.navbar-inner {
color: var(--ff-theme-color-shade) !important;
}

.content-block {
margin-top:10px !important;
}


select,input.bbt,input.weight,
input[type=text],input[type=password],
input[type=time],input[type=numpad],
input[type=date],input[type=email] {line-height:30px !important;font-size:larger !important;height:30px !important}


.item-divider {
	padding-bottom: 2px !important;
	padding-top: 3px !important;
	font-weight:bolder;
	
	color: var(--ff-theme-text-color) !important; 
	background-color: var(--ff-theme-color) !important;
}

label.label-checkbox i.icon-form-checkbox {
  border-radius: 0.25em !important;
}

/* fix horizontal bounce for iOS */
.page-content {overflow-x:hidden !important;}


/* button block */

.ff_button_group_inactive {
  padding: 3px 5px;
  text-align: center;
  min-width:55px;
  border-radius:10px;
  border:1px solid var(--ff-theme-color-grey-border);
  background-color:white;
  display:inline-block;
  margin-bottom:5px;
}
.ff_button_group_active {
  padding: 3px 5px;
  text-align: center;
  border-radius:10px;
  min-width:55px;
  border:1px solid darkorange;
  color: orange !important;
  background-color:white;
  display:inline-block;
  margin-bottom:5px;
}

/* Colored filled button */


.button.button-fill.color-orange {
color: #000 !important;
}

.button.button-fill.color-red {
color: #fff !important;
}
.button.button-fill.color-green {
color: #000 !important;
}


/* */
.tf_ruler {padding:5px;max-width:98%;}
.tf_slider {padding:5px;max-width:98%;}
.tf_highlight {border:3px solid var(--ff-theme-color-shade)}
.ticker_style {
    box-shadow: 5px 5px 7px #888;
    border-radius: 5px;
    max-width:98%;}
.tfbutton {display: inline-block;border: 1px solid var(--ff-theme-color-shade);border-radius:5px;padding:3px; color: var(--ff-theme-color)}
.tfsmall { font-size:80%;}
.tflink {text-decoration: underline;}
.tflight {color:#ccc}
.tfbuttonlight {display: inline-block;border: 1px solid #ccc;color:#ccc;border-radius:5px;padding:3px;}
.tf_tabhighlight { color: blue !important; font-weight:bold;}

h1 {font-size:160%;}

.tf_footer {
    text-align: center;
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    background-color: white;
    border-top: 1px solid #ccc;
    z-index:9999;
}

.tf_wizzard {
    margin-top:44px !important;
    height:40px;
    text-align: center;
    position: relative;
    color: #fff !important;
    background-color: var(--ff-theme-color);
    vertical-align: middle !important;
}

.tf_wizzard_icon {
    vertical-align: text-bottom;

}

a.tf_wizzard_right,a.tf_wizzard_right:visited {
    position: absolute;
    right:10px;

    display: inline-block;
    padding:3px; 
    color: #fff !important;
}
a.tf_wizzard_left,a.tf_wizzard_left:visited {
    position: absolute;
    left:10px;
    
    display: inline-block;
    padding:3px; 
    color: #fff !important;
}
/* slide show */

.tf_slideshow_div {
    position: relative;
    max-width:480px;
    display:inline-block;
}

.tf_slideshow_img {
    max-height:400px;
    margin-right:60px;
    margin-left:60px;
}

.tf_slideshow_leftctrl {
    position: absolute;
    left:10px;
    top:40%;
    z-index: 99999;
}
.tf_slideshow_rightctrl {
    position: absolute;
    right:10px;
    top:40%;
    z-index: 99999;
}
}