.app-application-window{ min-height:auto; } .ui-datepicker{ width:365px; } .ui-widget.ui-widget-content{ border:1px solid #f3eded; box-shadow:10px 10px 20px #e3e3e3; } .ui-datepicker th{ font-weight:normal; color:#999; } .ui-datepicker td span, .ui-datepicker td a{ text-align:center; border:rgba(255,255,255,0) 1px solid !important; background:none !important; padding:12px; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{ background-color:#0066ff !important; color:#fff !important; } .app-ovulation-calculator{} .app-ovulation-calculator .menstrual-calendar{} .app-ovulation-calculator .menstrual-calendar .calendar-picker{ width:367px; } .app-ovulation-calculator .menstrual-calendar .calendar-form{ width:calc( 100% - 450px ); } .app-ovulation-calculator .menstrual-calendar .calendar-form .date-of-last-menstrual-period{} .app-ovulation-calculator .menstrual-calendar .calendar-form .date-of-last-menstrual-period .label{ font-size:17px; font-weight:bold; } .app-ovulation-calculator .menstrual-calendar .calendar-form .date-of-last-menstrual-period .note{ color:#999; font-size:13px; } .app-ovulation-calculator .menstrual-calendar .calendar-form .date-of-last-menstrual-period input{ font-family:webfont; width:calc( 100% - 2px ); height:50px; line-height:50px; box-shadow:0 0 20px rgba(57,102,255,0.08); border:#0066ff 1px solid; background-color:#fff; background:linear-gradient(182deg, rgb(223,223,223,0.22), rgb(251,251,251,0.6) 70.71%), linear-gradient(170deg, rgb(183,183,183,0.01), rgba(255,255,255,0) 70.71%), linear-gradient(336deg, rgb(233,233,233,0.01), rgba(255,255,255,0) 70.71%); font-size:13px; text-indent:10px; } .app-ovulation-calculator .menstrual-calendar .calendar-form .date-of-last-menstrual-period input[type="text"][error="error"]{ background-color:rgba(212,0,0,0.13); background:rgba(212,0,0,0.13); } .app-ovulation-calculator .menstrual-calendar .calendar-form .menstrual-cycle{} .app-ovulation-calculator .menstrual-calendar .calendar-form .menstrual-cycle{} .app-ovulation-calculator .menstrual-calendar .calendar-form .menstrual-cycle .label{ font-size:17px; font-weight:bold; } .app-ovulation-calculator .menstrual-calendar .calendar-form .menstrual-cycle select{ font-family:webfont; width:calc( 100% - 2px ); height:50px; line-height:50px; box-shadow:0 0 20px rgba(57,102,255,0.08); border:#0066ff 1px solid; background-color:#fff; background:linear-gradient(182deg, rgb(223,223,223,0.22), rgb(251,251,251,0.6) 70.71%), linear-gradient(170deg, rgb(183,183,183,0.01), rgba(255,255,255,0) 70.71%), linear-gradient(336deg, rgb(233,233,233,0.01), rgba(255,255,255,0) 70.71%); font-size:13px; text-indent:6px; } .app-ovulation-calculator .menstrual-calendar .calendar-form div[data-type="submit"]{ font-family:webfont; width:auto; height:50px; line-height:50px; padding:0 10px; text-align:center; background-color:#0086f5; border:#0078db 1px solid; border-radius:4px; color:#fff; font-size:13px; cursor:pointer; user-select:none; } @media screen and ( max-width:800px ) { .app-ovulation-calculator .menstrual-calendar .calendar-form{ width:calc( 100% - 410px ); } } @media screen and ( max-width:600px ) { .app-ovulation-calculator .menstrual-calendar .calendar-picker{ display:none; } .app-ovulation-calculator .menstrual-calendar .calendar-form{ float:inherit; width:initial; } } .app-ovulation-calculator .ovulation-results{} .app-ovulation-calculator .ovulation-results .calendar-picker-and-report{ } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker{ width:calc( 100% - 8px) !important; padding:3px 3px 0; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td a{ padding:20px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date{ } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date a, .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ui-state-active a{ position:relative; display:block; background-color:transparent !important; border:#b97801 1px solid !important; color:#b97801 !important; height:100%; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date a:before{ content:""; position:absolute; left:0; bottom:0; z-index:2; width:50%; height:20px; line-height:25px; font-size:12px; font-family:"webfont"; border-radius:0 100% 0 0; background-color:#b97801 !important; color:#fff; text-align:left; text-indent:2px; overflow:hidden; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-2 a{ } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-2 a:before{ content:"2%"; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-5 a{ } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-5 a:before{ content:"5%"; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-9 a{ } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-9 a:before{ content:"9%"; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-15 a{ } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-15 a:before{ content:"15%"; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-19 a{ } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.proportion-19 a:before{ content:"19%"; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td.ovulation-date.ovulation-day a:before{ background-color:#895000 !important; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report{ background-color:#fffdfe; border:#f3eded 1px solid; box-shadow:10px 10px 20px #e3e3e3; padding:18px; line-height:24px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p{ margin-top:20px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p span.report-last-menstrual-period{ display:inline-block; margin:0 2px; padding:0 10px; background-color:#f0f0f0; border-radius:4px; border:#bbbbbb 1px solid; color:#333; font-size:13px; height:18px; line-height:18px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p span.report-menstrual-cycle{ display:inline-block; margin:0 2px; padding:0 10px; background-color:#f0f0f0; border-radius:4px; border:#bbbbbb 1px solid; color:#333; font-size:13px; height:18px; line-height:18px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p span.report-ovulation-date{ display:inline-block; margin:0 2px; padding:0 10px; background-color:#b97801; border-radius:4px; border:#ccc 1px solid; color:#fff; font-size:13px; height:18px; line-height:18px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p span.report-ovulation-day{ display:inline-block; margin:0 2px; padding:0 10px; background-color:#895000; border-radius:4px; border:#ccc 1px solid; color:#fff; font-size:13px; height:18px; line-height:18px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p span.report-ovulation-date-color{ display:inline-block; margin:0 6px; width:20px; height:10px; background-color:#b97801; overflow:hidden; text-indent:-100px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p span.report-ovulation-day-color{ display:inline-block; margin:0 6px; width:20px; height:10px; background-color:#895000; overflow:hidden; text-indent:-100px; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p.hide{ display:none; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .report p.show{ display:block; } @media screen and ( max-width:800px ) { .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .ui-datepicker td a{ padding:10px; } } @media screen and ( max-width:600px ) { .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker{ overflow-x:auto; } .app-ovulation-calculator .ovulation-results .calendar-picker-and-report .calendar-picker .hasDatepicker{ width:800px; } }