.period-calendar-container .period-calendar-date-selection>div,
.period-calendar-container2 .period-calendar-date-selection2>div{
width:210px;
position:relative;
display:inline-block;
vertical-align:top;
margin-top: 10px;
}
.result_desc{
margin-top:20px;
padding:10px 40px;
border-top: 1px solid #d0dae2;
}
.result_desc p{margin:5px !important}
.period_legends ul{width:60%; margin:auto;}
.period_legends ul li{margin:0; width:40%}
.period-calendar-container .period-calendar-date-selection div span.counts:first-child+h2,
.period-calendar-container2 .period-calendar-date-selection2 div span.counts:first-child+h2{
font-weight:normal;
color:#23346d;
text-transform:uppercase
}
.period-calendar-container .period-calendar-date-selection div .counts,
.period-calendar-container2 .period-calendar-date-selection2 div .counts{
font-size:1.5em;
font-weight:700;
color:#23346d;
margin-right:3px
}
.period-calendar-container .period-calendar-date-selection div span.counts:first-child+h2,
.period-calendar-container2 .period-calendar-date-selection2 div span.counts:first-child+h2{
font-size:.85em;
width:140px;
line-height:16px;
display:inline-block
}
.period-calendar-container .period-calendar-date-selection div div.display-box,
.period-calendar-container2 .period-calendar-date-selection2 div div.display-box2{
clear:both;
position:relative;
height:40px;
line-height:40px;
font-weight:700;
}
.period-calendar-container .period-calendar-date-selection div div.display-box p,
.period-calendar-container2 .period-calendar-date-selection2 div div.display-box2 p{
/*color:#fff!important;*/
margin:0!important;
padding:0!important;
width:100%!important;
height:100%!important;
text-transform:uppercase;
border: 1px solid #D8D8D8;
display:inline-block;
text-align:center;
}
.period-calendar-container .period-calendar-date-selection div div.display-box p span:first-child,
.period-calendar-container2 .period-calendar-date-selection2 div div.display-box2 p span:first-child{
font-size:.7em;
width:85px;
line-height:13px;
text-align:right;
font-weight:normal
}
.period-calendar-container .period-calendar-date-selection div div#calender_icon p span:first-child,
.period-calendar-container2 .period-calendar-date-selection2 div div#calender_icon2 p span:first-child{
position:relative;
left:-6px;
padding-top:4px
}
.period-calendar-container .period-calendar-date-selection div div.display-box p span,
.period-calendar-container2 .period-calendar-date-selection2 div div.display-box2 p span{
display:inline-block;
width:38px;
font-size:1.7em;
color:#222222;
margin-left:2px;
margin-top:3px;
}
.period-calendar-container .period-calendar-date-selection div:first-child div.display-box,
.period-calendar-container2 .period-calendar-date-selection2 div:first-child div.display-box2{
width:140px;
position:relative;
left:20px
}
.calender_icon, .calender_icon2, .decrement,.increment{
background:url("//womanjunction.com/wp-content/plugins/period_calc/Styles/favicon_temp2.png") no-repeat;
width:40px;
height:40px;
display:block;
cursor:pointer;
position:absolute;
top:0;
right:-42px;
background-position:-1px -1px
}
.calender_icon:active{
background-position:-83px -1px
}
.calender_icon2:active{
    background-position:-83px -1px
}
.decrement:active{
background-position:-84px -70px
}
.increment:active{
background-position:-84px -139px
}
.decrement{
background-position:-1px -70px;
left:-41px
}
.increment{
background-position:-1px -139px
}

.period-calendar-date-selection div:first-child+div .display-box,
.period-calendar-date-selection div:first-child+div+div .display-box{
position:relative;
left:87px;
width:100px
}
.print_header_background{
margin:0;
height:165px;
background-color:#e9f7fe;
display:none
}
.period-calendar-date-selection div:first-child+div .display-box p span,
.period-calendar-date-selection div:first-child+div+div .display-box p span{
font-size:1.95em!important;
padding-top:10px;
padding-top:10px\0;
text-align:center!important;
width:60px!important;
margin-left:0;
font-weight:bold!important
}
.track_it {
background-color:#EFF0F1;
text-align:center;
width:120px!important;
border-radius:3px;
font-weight:normal;
border: 1px solid #D1D1D1;
color:#222;
cursor:pointer;
text-transform:capitalize;
line-height:40px;
height:40px;
margin: 20px auto 20px auto;

}
.mobile_menu_icon_active{
display:none
}
div#ui-datepicker-div{
display:none
}
div#datepicker,
div#datepicker2 {
display:none;
position:absolute;
top:40px;
z-index:1;
background-color:#fff
}
div#datepicker .ui-datepicker-header,
div#datepicker2 .ui-datepicker-header{
background-color:#fff;
text-align:center;
border-top:1px solid #d0dae2;
border-bottom:1px solid #d0dae2;
margin-top:15px;
margin-left:15px;
margin-right:15px
}
.ui-datepicker{
border:2px solid #0265b3;
background:white;
padding:0
}
#period_result_calender .ui-datepicker{
box-shadow:none
}
.ie8 .ui-datepicker,.ie7 .ui-datepicker{
margin:4px auto 0
}
.ui-datepicker a{
text-decoration:none
}
.ui-datepicker table{
width:100%
}
.ui-datepicker-header{
background-color:#EFF0F1;
color:#23346d!important;
font-weight:bold;
text-transform:uppercase;
line-height:30px
}
.ui-datepicker-title{
text-align:center;
font-size:.925em;
}
.ui-datepicker-prev,.ui-datepicker-next{
display:inline-block;
width:30px;
height:30px;
text-align:center;
cursor:pointer;
background-repeat:no-repeat;
overflow:hidden;
background-position:center center
}
.ui-datepicker-prev{
float:left
}
.ui-datepicker-next{
float:right
}
.ui-datepicker-prev,.ui-datepicker-next{
background:url("//womanjunction.com/wp-content/plugins/period_calc/Styles/period_desktop.png") no-repeat;
background-position:0 -650px
}
.ui-datepicker-next{
background-position:-96px -650px
}
.ui-datepicker-prev span,.ui-datepicker-next span{
display:none
}
.period_results .ui-datepicker-prev,.period_results .ui-datepicker-next{
display:none
}
.ui-datepicker th{
text-transform:uppercase;
font-size:.825em;
padding: 7px 14px;
color:#048AD8;
}
.ui-datepicker tbody td{
padding:2px 2px
}
.period_results .ui-datepicker tbody td{
padding:0;
text-align:center
}
.ui-datepicker td span,.ui-datepicker td a{
display:inline-block;
text-align:center;
width:35px;
height:35px;
line-height:35px;
color:#0265b3;
font-size:.85em;
font-weight:normal
}
.ui-datepicker-calendar .ui-state-default{
background:0
}
div.datepicker-jsdisabled{
position:absolute;
top:71px;
left:40px;
z-index:1;
display:none
}
.datepicker-jsdisabled table{
width:275px;
margin:5px auto 0;
font-family:LucidaGrande,Arial,Helvetica,sans-serif;
border:1px solid #f4f7f7;
background:#f0f0f0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-o-border-radius:2px;
-ms-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px;
border-collapse:collapse
}
.ie8 .datepicker-jsdisabled,.ie7 .datepicker-jsdisabled{
margin:4px auto 0
}
.datepicker-jsdisabled table tr:first-child{
background-color:#e1e1e1;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e1e1e1,endColorstr=#f2f2f2);
background-image:-moz-linear-gradient(top,#e1e1e1 0,#ededed 19%,#f2f2f2 100%);
background-image:linear-gradient(top,#e1e1e1 0,#ededed 19%,#f2f2f2 100%);
background-image:-webkit-linear-gradient(top,#e1e1e1 0,#ededed 19%,#f2f2f2 100%);
background-image:-o-linear-gradient(top,#e1e1e1 0,#ededed 19%,#f2f2f2 100%);
background-image:-ms-linear-gradient(top,#e1e1e1 0,#ededed 19%,#f2f2f2 100%);
background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0%,#e1e1e1),color-stop(19%,#ededed),color-stop(100%,#f2f2f2));
color:#0c1954;
font-weight:bold;
text-transform:uppercase;
border-bottom:1px solid #fff;
padding:0
}
.datepicker-jsdisabled table tr:first-child{
text-align:center;
font-size:.925em
}
.datepicker-jsdisabled table tr:first-child>td:first-child,.datepicker-jsdisabled table tr:first-child>td:first-child+td+td{
width:30px;
height:30px
}
.ui-datepicker-prev-input,.ui-datepicker-next-input{
display:inline-block;
text-align:center;
cursor:pointer;
background-repeat:no-repeat;
overflow:hidden;
background-position:center center
}
.datepicker-jsdisabled table tr:first-child th{
text-transform:uppercase;
font-size:.925em;
padding:5px 0
}
.datepicker-jsdisabled table tr:first-child+tr td{
text-transform:uppercase;
font-size:.812em;
padding:5px 0;
color:#b4b7c1
}
.datepicker-jsdisabled table tr td{
width:30px;
height:30px;
border:0
}
.datepicker-jsdisabled table tr:first-child td{
width:auto;
height:auto
}
.datepicker-jsdisabled table tbody td input[type="submit"]{
display:inline-block;
font-weight:bold;
font-family:"LucidaGrande",Arial,Helvetica,Sans-serif;
text-align:center;
width:30px;
height:30px;
line-height:30px;
color:#7a7a7a;
font-size:1.05em;
padding:0
}
.datepicker-jsdisabled table tbody td input[type="submit"]{
background:#fdfdfd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
border:2px solid #fff;
cursor:pointer
}
.datepicker-jsdisabled table tbody td input[type="submit"]:hover{
border:2px solid #011954
}
.ui-datepicker-group{
width:269px;
display:inline-block;
float:left;
margin-right:0;
border-bottom:1px solid #d0dae2;
}
.ui-datepicker-group-last{
margin-right:0
}
.period_results{
clear:both;
display:none
}
#period_result_calender{
background:#fff
}
#period_result_calender .ui-datepicker{
border:0;
margin:0 auto;
width:550px!important
}
.legends{
font-size:15px;
color:white;
font-family:Arial;
font-weight:100;
margin:0 auto;

}
.legends ul{
display:inline-block;
padding:0;
margin:0
}
.legends ul li{
display:inline-block;
min-width:100px;
height:25px;
list-style:none;
list-style-image:none;
list-style-type:none;
padding-right:0
}
.legends ul li span{
width:40px;
height:20px;
display:inline-block;
float:left;
text-transform:uppercase
}
.legends ul li span:first-child+span{
background:none!important;
padding-top:3px;
padding-left:10px;
font-weight:bold;
color:#23346d;
font-size:.8em;
width:auto;
padding-right:10px
}
.legends ul li:last-child span:first-child+span{
padding-right:0
}
.legends ul li:first-child span{
background:#F7C6D2
}
.legends ul li:first-child+li span{
background:#CC0832
}
.legends ul li:first-child+li+li span{
background:#EAD1D7
}
.legends ul li:first-child+li+li+li span{
background:#048AD8
}

.period-calendar-container,
period-calendar-container2 {border-bottom:1px solid #d0dae2; padding-bottom:10px}
.period_legends{
display:none;
padding-top:20px;
margin:0;
padding-bottom:0;

margin-left:5px;
margin-bottom:10px;
text-align: center;
}
.print_button{
display:block;
cursor:pointer;
text-decoration:none;
text-transform:capitalize;
padding:8px 14px 8px 14px;
background-color:#0265b3;
color:#fff;
border-radius:4px;
text-align:center;
width:185px;
margin:0 auto;
margin-bottom:20px
}
.header_main{
display:none
}
.period_details{
width:100%;
margin:0 auto;
margin-top:0!important;
display:none
}
.prePeriod_detail,.periodDays_detail,.postPeriod_detail,.peakOvulation_detail{
width:auto;
background:#fff;
margin-top:-3px;
height:300px;
background-repeat:no-repeat;
display:none;
clear:both
}
.prePeriod_detail>div,.periodDays_detail>div,.postPeriod_detail>div,.peakOvulation_detail>div{
float:left;
width:30%
}
.period_details div.details{
padding-left:58px
}
.period_details div.discover{
padding-top:2px
}
.period_details span.top-border{
height:25px;
display:block;
margin-bottom:35px
}
.period_details h4{
color:#0265b3;
font-size:1.8em;
text-transform:capitalize
}
.period_details p{
font-size:1em;
color:#23346d
}
.period_details span{
font-size:1em;
color:#0265b3
}
.period_details ul{
margin:0;
padding:0;
margin-top:1em;
padding-left:18px;
margin-bottom:1.2em
}
.period_details ul li{
font-size:1em;
color:#23346d;
list-style-type:disc;
list-style-position:outside;
padding:5px 0 5px 0
}
.prePeriod_detail{
border:2px solid #CC6A7F;
display:block
}
.prePeriod_detail span.top-border{
background-image:linear-gradient(to right,#f82e5e,#f82e5e,#fd3164,#e31f46);
background-color:#CC6A7F
}
.periodDays_detail{
border:2px solid #e40dda
}
.periodDays_detail span.top-border{
background-image:linear-gradient(to right,#d309a5,#e60ede,#ea0feb,#d309a6);
background-color:#e40dda
}
.postPeriod_detail{
border:2px solid #7a62e5
}
.postPeriod_detail span.top-border{
background-image:linear-gradient(to right,#7143ab,#795dda,#7e6ffb,#7143ac);
background-color:#7a62e5
}
.peakOvulation_detail{
border:2px solid #0265b3
}
.peakOvulation_detail span.top-border{
background-image:linear-gradient(to right,#0067a1,#009cdc,#00adee,#0068a1);
background-color:#048AD8
}
.period_details div.discover>a{
background-color:#0265b3;
text-align:center;
cursor:pointer;
color:#fff;
text-decoration:none;
text-transform:capitalize;
font-size:14px;
border-radius:4px;
padding:8px 14px 8px 14px;
display:block
}
.nextPrevious{
display:block;

line-height:30px;
text-transform:uppercase;

height:30px;
border-top:1px solid #d0dae2;
overflow:hidden
}
.previous_result,.next_result{
display:block;
float:left;
font-size:.8em;
color:#0265b3;
cursor:pointer;
background:url('//womanjunction.com/wp-content/plugins/period_calc/Styles/prev.png') no-repeat;
background-position:left 9px;
padding-left:10px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none
}
.next_result{
float:right;
background:url('//womanjunction.com/wp-content/plugins/period_calc/Styles/next.png') no-repeat;
background-position:center right;
padding-right:10px;
padding-left:0
}
.period_results .ui-datepicker-title{
text-align:center;
font-size:.825em;
margin-bottom:10px
}
.period_results .ui-datepicker{
padding-bottom:0
}

.periodDays a.ui-state-default {
    background-color: #CC0832!important;
    background-image: none;
    color: #fff;
}
.postPeriod a.ui-state-default {
    background-color: #EAD1D7!important;
    background-image: none;
    color: #fff;
}
.prePeriod a.ui-state-default {
    background-color: #F7C6D2!important;
    background-image: none;
    color: #fff;
}
.round_border a {
    border-radius: 20px;
}

.ui-datepicker-today {
    background: #1faded;
}
.peakOvulation a.ui-state-default {
    background-color: #048AD8!important;
    background-image: none;
color:#fff;
	}

.icon_active {
    box-shadow: 1px 1px 11px #353333;
}

.ui-datepicker-current-day {
    background-color: #CC0832;
    border-radius: 20px;
}
.ui-datepicker-current-day a{color:#fff!important}

.ui-datepicker-group{border:1px solid #d0dae2; margin:10px 2px }

.period-calendar-container ul,
.period-calendar-container2 ul {margin:0 !important; padding:10px 0}
.period-calendar-container select,
.period-calendar-container2 select{
	background:#FFFFFF;
	color:#222;
	font-size:20px;
	width:140px;
	line-height:40px;
	height:40px;
	margin-left:20px;
}
.period_results{margin-top:10px;}
.menstrual_cyc,.last_period {
	margin-left:10px; 
	width:170px !important;}
.track_wrap{width: auto!important;display: block !important;margin-left: -40px;}
.calc2 {
position: relative;
display: inline-block;
vertical-align: top;
margin-top: 10px;}

@media(max-width:1100px)
{
.track_wrap{margin-left: 0px;}
.period-calendar-date-selection {
width: 200px;
margin-left: auto;
margin-right: auto;
}
div#datepicker, div#datepicker2 {left: -50px;}
.calender,.menstrual_cyc,.last_period {display:block !important;}
.track_it{width: 142px !important;}
.period-calendar-container select {margin-left: 10px;}
.nextPrevious{margin:0px}
#period_result_calender .ui-datepicker{width: auto !important;}
.ui-datepicker-group{float:none !important; margin:5px auto !important; display:block}
.legends ul li{min-width:160px;}
.result_desc{padding:10px 0px;}
.period_legends {
	width: 200px;
	margin: auto;
	padding:0!important
}
.period_legends ul{width:100%;}
.period_legends ul li{margin:0; width:100%}
.period_results p{margin:0!important}
}

.table_border {font-size:.8em;}

.menstrual_cyc2{
margin-left:30px; margin-right:0px; width:170px ;
}
@media only screen and (max-width: 1000px) {
    .calender2 , .menstrual_cyc2 , .calc2 {
        margin-left:30% ; !important
    }
}

@media only screen and (max-width: 400px) {
    .calender2 , .menstrual_cyc2 , .calc2 {
        margin-left:18% ; !important
    }
}