/** 
* 2-20-2019 - Kevin
* Added styling for 'multiples' tools elements
*
* 10-16 - Kevin
* Modified 'toolhelp-scroll' by adding 'max-height:85vh' in order to prevent the browser from not scrolling the text area in some cases.
*
Update 9-18 - Kevin
* Added *overscroll-behavior-y: contain;* to *modalDialog* to prevent overscrolling from incorrectly triggering in modal dialogs on Android devices.
*
*/ 
 
 
 /* ------------------------------------------------
                 3rd Party
--------------------------------------------------- */

.flatpickr-current-month {
    margin-top:10px;
}
.flatpickr-next-month svg{
    margin-top:10px;
}
.flatpickr-prev-month svg {
    margin-top:10px;
}
.flatpickr-calendar.hasTime.static.arrowTop.open {
    position: absolute;
    min-width: 150px;
}

 /* ------------------------------------------------
                 Gallery (adapted from w3 css) 
--------------------------------------------------- */

.ij-tooltip,.ij-display-container{position:relative}.ij-tooltip .ij-text{display:none}.ij-tooltip:hover .ij-text{display:inline-block}
.ij-dropdown-hover:hover > .ij-button:first-child,.ij-dropdown-click:hover > .ij-button:first-child{background-color:#ccc;color:#000}
.ij-bar-block .ij-dropdown-hover .ij-button,.ij-bar-block .ij-dropdown-click .ij-button{width:100%;text-align:left;padding:8px 16px}
.ij-bar .ij-button{white-space:normal}
.ij-content{max-width:980px;margin:auto}.ij-rest{overflow:hidden}
.ij-dropdown-hover.ij-mobile,.ij-dropdown-hover.ij-mobile .ij-btn,.ij-dropdown-hover.ij-mobile .ij-button,.ij-dropdown-click.ij-mobile,.ij-dropdown-click.ij-mobile .ij-btn,.ij-dropdown-click.ij-mobile .ij-button{width:100%}
.ij-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.ij-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.ij-display-container:hover .ij-display-hover{display:block}.ij-display-container:hover span.ij-display-hover{display:inline-block}.ij-display-hover{display:none}
.ij-button:hover{color:#000!important;background-color:#ccc!important}

/* Colors */
.ij-amber,.ij-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.ij-aqua,.ij-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.ij-blue,.ij-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.ij-light-blue,.ij-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.ij-brown,.ij-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.ij-cyan,.ij-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.ij-blue-grey,.ij-hover-blue-grey:hover,.ij-blue-gray,.ij-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.ij-green,.ij-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.ij-light-green,.ij-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.ij-indigo,.ij-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.ij-khaki,.ij-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.ij-lime,.ij-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.ij-orange,.ij-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.ij-deep-orange,.ij-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.ij-pink,.ij-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.ij-purple,.ij-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.ij-deep-purple,.ij-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.ij-red,.ij-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.ij-sand,.ij-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.ij-teal,.ij-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.ij-yellow,.ij-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.ij-white,.ij-hover-white:hover{color:#000!important;background-color:#fff!important}
.ij-black,.ij-hover-black:hover{color:#fff!important;background-color:#000!important}
.ij-grey,.ij-hover-grey:hover,.ij-gray,.ij-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.ij-light-grey,.ij-hover-light-grey:hover,.ij-light-gray,.ij-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.ij-dark-grey,.ij-hover-dark-grey:hover,.ij-dark-gray,.ij-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.ij-pale-red,.ij-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.ij-pale-green,.ij-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.ij-pale-yellow,.ij-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.ij-pale-blue,.ij-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.ij-slide {
    display: block;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height: 60%;
}
.ij-caption {
    text-align: center;
    color: white;
    font-size: 2em;
}

 /* ------------------------------------------------
                 Divs and stuff 
--------------------------------------------------- */

div#toolBody{
    font-size: 16px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

[aria-hidden="true"]{
    /* visibility: hidden; */
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

#ij-tool-header {
    display: flex;
    justify-content: center;
    align-items: center; 
    cursor: default;
    margin-bottom:14px;
}

 /* ------------------------------------------------
                 header/footer 
--------------------------------------------------- */

header#tool-header-wrapper{
    background: #f2f2f2;
    padding: 10px 0;
    margin-bottom: 18px;
    text-align: center;
}

#tool-header-wrapper p.tool-header {
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    font-weight: 500;
    color: #333;
    padding: 10px 10px 20px 10px;
    margin: 0;
    display: inline-block;
}

.tool-subheader{
    padding-bottom: 15px;
}

/* --------------------------------------------
                   text
----------------------------------------------*/

span.pdf {
    background: #E53E00;
    padding: 4px 2px;
    border-radius: 4px;
    font-size: .8em;
    font-weight: 700;
    font-style: normal;
    color: #FFF;
}  

.pdf-text{
    color: #656565;
    font-size: .9em;
    font-weight: 300;
    font-style: italic;
    text-align: right;
    margin-right: 10px;
    margin-bottom: 0px;
}

span.detail{
    color: #656565;
    font-size: .7em;
    font-weight: 300;
    font-style: italic;
    text-align: right;
    margin-right: 10px;
} 

.pdf-text>a {
    color: #656565;
}

.pdf-text>a:hover {
    text-decoration: none;
    color: #333;
 }

 .sub-header{
    color: #333;
    font-size: 1em;
    font-weight: 500;
    margin: 15px 0 0
 }

 p.lead{
    font-size: 1.05em;
    font-weight: 500;
 }

 p.bullet-heading{
    text-indent: 5px;
    margin-bottom: 3px;
 }

 .sub-header.warning {
    color: #f98924;
    padding-top: 10px;
}

 .warning-text{
    font-style: italic;
    font-size: 1em;
    color: #f98924;
    margin-top: 7px;
    padding-bottom: 10px;
 }

 .impnote,
 .results {
    margin-top: 30px;
    background: #f2f2f2;
    padding: 0 17px;
    border-radius: 5px;
    box-shadow: 0 1px 3px 0 hsla(0,0%,40%,.25);
}
.ij-lghtwt {
    font-size: inherit;
    font-weight: 100;
}

.ij-center{
    text-align: center;
}
.ij-right{
    text-align: right;
}

.ij-sm{
    font-size: .6em; 
}

.asterisk{
    content: "\22C6";
    font-size: x-large;
    color: #f98924;
}


div#yourDate {
    font-weight: 500;
}


 @media (max-width: 768px) {
       .pdf-text{
         font-size: .8em;
         text-align: center;
         margin-right: 0;
       }
       #tool-header-wrapper p.tool-header{
        line-height: 1.3;
        font-size: 1.5em;
        display: block;
       }

       img.icon{
        display: block;
        margin: auto;
       }

   } 

/*new alert box   */
.sub-header.warning {
color: #7f6413;
padding-top: 10px;
}

div.alert-note {
background: #ffeaa7;
padding: 8px 15px 8px 54px;
text-indent: -41px;
border-radius: 4px;
border: 1px solid #e0c66f;
box-shadow: 0 1px 3px 0 hsla(0,0%,40%,.25);
position: relative;
}

/* div.border {
background: #e0c66f;
position: absolute;
width:1px;
top: 0%;
bottom: 0%;
left: 47px;
overflow: hidden;
} */

span.alert {
padding-right: 9px;
margin-right: 5px;
font-size: 1.5em;}


/* ------------------------------------------------
                 rows and columns 
--------------------------------------------------- */


.full-col{
    text-align: center;
    clear: both;
}

.form-row{
    margin-right: -15px;
    margin-left: -15px;
}

.col-sm-6,
.col-sm-5,
.col-sm-7 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
 }



@media (min-width: 768px) {
 .col-sm-6 {
    width: 50%;
    float: left;
 }
  .col-sm-7 {
    width: 58.33333333%;
    float: left;
 }
 .col-sm-5 {
    width: 41.66666667%;
    float: left;
 }
}

/* ------------------------------------------------
                      grid 
        (to replace above rows and columns)
--------------------------------------------------- */

    .ij-container *{box-sizing: border-box;}

    .ij-container{
        width: 100%; 
    }

    /*-- our cleafix hack -- */ 
    .ij-row:before, 
    .ij-row:after {
        content:"";
        display: table ;
        clear:both;
    }

    [class*='ij-col-'] {
        min-height: 1px; 
        /*-- our gutter -- */
        padding: 12px;

    }
    @media screen and (max-width: 419px) {
        /* 9/17/19 - Kevin: Added to allow mobile users with small screens to see all columns of the Breastfeeding and Diappering log. */
        [class*='ij-col-'] {
            padding: 0px;
        }
    }



    /* [class*= 'ij-col-'],:after,:before{
        box-sizing:initial;
    } */


    /*-- some extra column content styling --*/
    [class*='ij-col-'] > p {
     padding: 0;
     margin: 0;
    }

    .extra-margin{
    margin-top: 0;
    }

@media all and (min-width:768px){
   [class*='ij-col-'] { float: left; }

    .ij-col-1{ width: 16.66%; }
    .ij-col-2{ width: 33.33%; }
    .ij-col-3{ width: 50%;    }
    .ij-col-4{ width: 66.66%; }
    .ij-col-5{ width: 83.33%; }
    .ij-col-6{ width: 100%;   }
    .extra-margin{ margin-top: 34px; }
}



/* ------------------------------------------------
                      button
--------------------------------------------------- */
.ij-btn{
    display: inline-block;
    padding: 6px 12px;
    margin: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #f2f2f2;
    background-image: none;
    border: 1px solid #d3d4de;
    border-radius: 4px;

}

.ij-btn:hover{
    color: #333;
    background-color: #fff;
    border-color: #bdbfc6;
}

/*alert button*/
.ij-btn-alert{
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.ij-btn-alert:hover{
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}

/*lg button*/
.ij-btn-lg{
    padding: 8px 13px;
    font-size: 1.4em;
    line-height: 1.3333333;
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 hsla(0,0%,40%,.25);

}
/*sm button*/
.ij-btn-sm{
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/*sm button with icon*/
.ij-btn-sm-icon {
    padding-left: 5px;
    padding-right: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.ij-btn-last {
    margin-bottom: 10px;
}
.ij-btn-label {
    margin:0;
    padding: 3px 5px;
    font-size: .65em;
    line-height: 1.5;
    border-radius: 3px;
}

    .ijBottomNavToolsImage{
        width:27px;
        padding-bottom:5px;
    }


/* 
    Added by Thor on 10/1/2018 because .svg images on mobile nav bar were WAY too big 
    Not sure what happened... 
*/

.ijBottomNav {
    display:flex;
    justify-content: center;
    align-items: center;
}

/* ------------------------------------------------
                    new form
--------------------------------------------------- */

input.ij-form-control{
    display: block;
    width: 100%;
    height: 35px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #f2f2f2;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
   /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 0px 17px rgba(31,175,164,.4);*/
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

select.ij-select{
    background-color: #f2f2f2;
    border-radius: 4px;
}

input.ij-form-control-wbtn{
    display: inline-block;
    width: 75%
}



/* ------------------------------------------------
                      form
--------------------------------------------------- */
input.form-control, input.flatpickr-input {
    display: block;
    width: 100%;
    height: 35px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #f2f2f2;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
   /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 0px 17px rgba(31,175,164,.4);*/
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.multi-input-container{
        padding: 6 12px;
        background-color: #f2f2f2;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
       /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 0px 17px rgba(31,175,164,.4);*/
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        margin-bottom: 16px;
    }

input.ij-input{
    padding: 6 12px;
    background-color: #f2f2f2;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 0px 17px rgba(31,175,164,.4);*/
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

input.multi-input{
    display: inline-block;
    width: 65px;
    height: 32px;
    background: rgba(0,0,0,0);
    box-shadow: none;
    border: none;
    text-align: center;
    margin-bottom: 0;
}

input[type=text].multi-input {
    width: 49%;
    text-align: left;
}

input[type=text].check-input {
    width: 50%;
    margin-top: 3px;
    margin-left: 0;
}

input[type=text].inline-input,
input[type=number].inline-input {
    display: inline-block;
    width: 30%;
    margin: 0px 2px 0;
}

td>input[type=text] {
    width: 100%;
}

label.tool-form-label{
    font-size: 1em;
    font-weight: 300;
    margin-top: 10px;
}

.form-table input {
    margin: 1px 5px;
    text-align: center;
}

 input[type="submit"].inputbtn,
 input[type="button"].inputbtn{
    background-color: #f2f2f2;
    border: 1px solid;
    border-color: #d3d4de;
    color: #333;
    font-weight: 500;
    font-size: .875rem;
    line-height: normal;
    padding: .5em 1.25em;
    position: relative;
    margin: 5px 0 5px 27%;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
 }

 input[type="submit"].inputbtn:hover,
 input[type="button"].inputbtn:hover{
    color: #333;
    background-color: #fff;
    border-color: #bdbfc6;
 }

 input#start,
 button#fmcStartSession,
 button#fmcStop,
 button#bfdStartFeeding,
 button#bfdStartDiapering,
 button#bfdStopFeeding,
 button.inputbtn {
    padding: 16px 34px;
    margin: 30px 0;
    font-size: 1.4em;
    box-shadow: 0 1px 2px 0 hsla(0,0%,40%,.25);
}

button.injoyButton {
    margin: 30px 2px 15px 0;
}

.button-div {
    text-align: center;
}   

 input.stacked {
    display: block;
}

ol>li>input.form-control {
    display: inline-block;
}

input#bpcCompanion3 {
    margin-bottom: 4px;
}
input#bpcCompanion1 {
    margin-top: 2px;
}

input#weight{
    margin-top: 3px;
    margin-bottom: 4px;
}

select#cycleLength,
select#month,
select#day,
select#year,
select#feet,
select#inches {
    padding: 0 13px;
    margin-top: 3px;
    margin-bottom: 4px;
    height: 34px;
    
}
select#cycleLength{
    width: 34%;
    height: 25px;
}
select#month,
select#day,
select#year{
    width: 32.1%;
}
select+em,
input+em {
    font-size: .9em;
    padding-left: 2px;
    padding-right: 2px;
    }    

/*file input styles    */
input.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
input.inputfile + label {
    color: #333;
    background-color: #f2f2f2;
    display: inline-block;
    padding: 6px 12px;
    margin: 5px 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid #d3d4de;
    border-radius: 4px;
    text-overflow: ellipsis;
}
input.inputfile + label svg {
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.2em;
    margin-right: 0.25em;
}
input.inputfile:focus + label,
input.inputfile + label:hover {
    background-color: #fff;
}
input.inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}


@media (max-width: 768px) {
    .form-table input {
        width: 95%;
    }
    input[type="submit"].inputbtn{
        margin: 0;
    }
    input#start{
        margin-bottom: 17px;
    }
    input[type=text].check-input {
    width: 100%;
    }
    input[type=text].inline-input {
    width: 40%;
    }
    button#bfdStartDiapering {
    margin-top: 0;
    }
     input#start,
     button#fmcStartSession,
     button#fmcStop,
     button#bfdStartFeeding,
     button#bfdStartDiapering,
     button#bfdStopFeeding,
     button.inputbtn {
        font-size: 1.2em;
    }
    select+em {
    font-size: .8em;
    }
}

input.ij-ToDo {
    line-height:1.5;
    height:31px;
    margin-bottom:0px;
    margin-top:4px;
    margin-left:1em;
    width:90%;
}

.flatpickr-rContainer {
   max-width: 308px;
}


.flatpickr-month {
    padding: 0;
}

/* ------------------------------------------------
                accordion and list style
--------------------------------------------------- */

#ijToolAccordion {
    margin-top: 25px;
    margin-bottom: 25px;
    min-width:230px;
}

label.accordion-label,
p.accordion-label{
    font-size: 1.5em;
    font-weight: 500;
    color: #1fafa4;
    padding: 10px 0;
}
#ijToolAccordion-container {
    margin: 0 auto;
    width: 50%;
}
#ijToolAccordion input.accordion-input {
    display: none;
}
#ijToolAccordion label.accordion-label,
p.accordion-label {
    color: #333;
    background: #f2f2f2; 
    cursor: pointer;
    display: block;
    margin: 0.5em 0 .125em 0;
    padding: .25em 1em .25em 2em;
    padding-left: 3.5rem;
    z-index: 20;
}
#ijToolAccordion label.accordion-label:before {
    content: "\002B";
    padding: 0px 10px;
    border-right: 1px solid #ddd;
    position: absolute;
    left: 32px;
}    
#ijToolAccordion label.accordion-label:hover {
    background: #f2f2f2; /* Old browsers */
    background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 25%, #ffffff 75%, #f2f2f2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 25%,#ffffff 75%,#f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f2f2f2 0%,#ffffff 25%,#ffffff 75%,#f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
}

#ijToolAccordion input:checked + label {
    padding-left: 3.3rem;
    color: #333;
    background: #f2f2f2; /* Old browsers */
    background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 25%, #ffffff 75%, #f2f2f2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 25%,#ffffff 75%,#f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f2f2f2 0%,#ffffff 25%,#ffffff 75%,#f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
    margin-bottom: 0;
}

#ijToolAccordion input:checked + label:before{
    content: "\2212";
}

#ijToolAccordion article {
    background: #fff;
    height:0px;
    padding: 0 10px;
    overflow:hidden;
    z-index:10;
}

#ijToolAccordion input:checked ~ article {
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
    height: auto;
    margin-bottom: .125em;
}

/*#ijToolAccordion label.accordion-label.last {
    margin-bottom: 25px;
}*/

.checkbox label {
    font-size: 1em;
    font-weight: 300;
    padding-left: 2.5em;
    text-indent: -2.1em;
}
.checkbox label:last-child {
    margin-bottom: 25px;
}

.checkbox label input {
    width: 13px;
    margin: 15px 10px 0 10px;
}

.checkbox {
    margin-left: 35px;
}
div article .checkbox {
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    label.accordion-label,
    p.accordion-label {
        font-size: 1.2em;
    }

    .checkbox label input {
        width: 13px;
        margin: 0px 4px 0px 0px;
    }
}

/*accordion interaction
------------------------------------------*/

label.accordion-label{/*text-align: center;*/color: #656565;font-size: larger;}
#ijToolAccordion-container {margin: 0 auto; width: 75%;}
.accordion-input {display: none;}
#ijToolAccordion label {background-color: #fcf7e3; border: 1px solid #fcf7e3; border-radius: .25em;	cursor: pointer; display: block; margin-bottom: .125em; padding: .5em 1em;	z-index: 20;}
#ijToolAccordion label:hover {/*background: #ffd2ae;*/border: 1px solid #f6f6f6;} /* Background color makes the accordion jumpy */
#ijToolAccordion input:checked + label {/*background: #ffd2ae;*/border-bottom-right-radius: 0;border-bottom-left-radius: 0;color: #656565;} /* Background color makes the accordion jumpy */
#ijToolAccordion article {background-color: #fcf7e3;height:0px;	overflow:hidden;z-index:10;}
#ijToolAccordion input:checked ~ article {border-bottom-left-radius: .25em; border-bottom-right-radius: .25em;height: auto;margin-bottom: .125em;}
.center-text{text-align: center;}
p.headline{color: #656565;	font-weight: 700;font-size: large;padding: 10px 0;}
p.subhead{font-weight: 700;	font-size: medium;	padding-top: 10px;}
p.spacing{margin: 5px;}
article .white-bg{background-color: #fff;	padding: 10px 0;}
p.spacing:nth-last-child(1){margin-bottom: 20px;}

.ij-float-container-left {
    width:50%;
    display: inline-block;
    text-align: left;
}
.ij-float-container-right {
    width:50%;
    display: inline-block;
    text-align: right;
}


/* ------------------------------------------------
                    Fullscreen
--------------------------------------------------- */

.ij-hidden {display:none;}
.ij-fullscreen-dialog {text-align:center;padding-top:30px;overflow:auto;position:fixed;margin:0;top:0;left:0;bottom:0;right:0;background-color:white;z-index: 99999;}
.ij-fullscreen-container {width:90vw;height:90vw;margin:auto;}


/* ------------------------------------------------
                    tables 
--------------------------------------------------- */
table.ij-table {
    border-spacing: 0;
    width: 100%;
}
table.ij-table td:first-child, table.ij-table th:first-child {
    padding-left: 0;
}

table.ij-table td, table.ij-table th {
    border-bottom: 0.1rem solid #e1e1e1;
    border-left: 0 solid #fff;
    border-right: 0 solid #fff;
    padding: 1.2rem 1rem;
    text-align: left;
    vertical-align: baseline;}

@media (max-width: 419px){
    /* 19/17/19 - Kevin: increased max-width and decreased padding for smaller mobile devices to see the edit and delete icons. */
    table.ij-table td, table.ij-table th{
        padding: 1rem .3rem;
    }
}

/*table.ij-table>tbody tr:first-child {
    font-weight: 700;
}*/

table.ij-table>tbody tr:first-child td {
    border-top: 0;
}


.form-table {
    width: 100%;
    max-width: 100%;
    margin: 15px 0;
    background-color: #f2f2f2;
}

.form-table>thead,
tr.tablehead{
    background-color: #fff;
    color: #333;
    font-size: 1rem;
}

.form-table>tbody>tr>td, 
.form-table>tbody>tr>th, 
.form-table>tfoot>tr>td, 
.form-table>tfoot>tr>th, 
.form-table>thead>tr>td, 
.form-table>thead>tr>th{
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    text-align: center;
}

.form-table>tbody>tr>td.left-align {
    text-align: left;
    padding-left: 27px;
}

/*summary+table>tbody,
.table2>tbody {
    background-color: #f2f2f2;
    border: none;
    border-collapse: collapse;
}   */ 

summary+table>tbody tr:first-child,
.table2>tbody tr:first-child {
    font-size: 1rem;
    font-weight: 500;
    background-color: #fff;
}

@media (max-width: 500px){
    .ij-tr-collapse {
        display:none;
    }
}

/* ------------------------------------------------
                 iframe 
--------------------------------------------------- */
.injoyiframebox{
    position:relative;
    padding-bottom:66.67%;
    height:0;
    overflow:hidden;
    max-width:100%
}
.injoyiframe{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    border: dashed;
    border-width: 1px;
    border-color: #ddd
}

/* ------------------------------------------------
                 tool help 
--------------------------------------------------- */
.toolhelp {
    font-weight: 700;
    text-align: left;
    background: #f2f2f2;
    border-radius: 18px;
    margin-left: 10px;
    padding: 7px 12px 6px 13px;
    box-shadow: 0 1px 2px 0 hsla(0,0%,40%,.25);
    position: relative;
    max-height: 34px;
    margin-right: 20px;
}

.toolhelp-scroll {
    background: #fff;
    padding: 5px 15px;
    border-radius: 2px;
    text-align: left;
    overflow-y: auto;
    max-height: 85vh;
}
.toolhelp-scroll > div > ul {
    padding-left: 20px;
}
.toolhelp-scroll > div > ul > li {
    padding-bottom: 12px;
}

@media (max-width: 768px) {
    .toolhelp-scroll {
        max-height: 80vh;
        overscroll-behavior-y: contain;
    }

}

.toolhelp-text ul {
    font-weight: 300;
}

.toolhelp-text>ul>li {
    text-align: left;
}

/* Tooltip text */
.toolhelp::before {
    display: none;
    content:'Click for Instructions';
    width: 150px;
    background-color: rgb(56, 56, 56, .5);
    color: #fff;
    text-align: center;
    padding: .5em;
    border-radius: 6px;

    /* Position the tooltip text */
    position:absolute;
    top: 2em;
    left: -9.2em;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.toolhelp:hover::before{
    display: inherit;
}

.modalDialog {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in;
    pointer-events: none;
    overflow-y:auto;
}

#modal-container {
    width:100%;
    display:inline-block;
    position:relative;
}
#modal-innercontainer {
    margin-top: -15px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:0px;
}

.modalDialog:target {
    opacity:1; pointer-events: auto;
}

.modalDialog > div {
    width: 85%; 
    margin: 4% auto;
}

/* Doubling up the modal close in TI*/

#closeToolModal:after {
    content: "\00D7";
    font-size: 2em;
    font-weight: 700;
    float:right;
    color: #FFFFFF;
}



/*@media (max-width: 768px) and (max-height:500px)*/

/* ---------------------------------------------
          details and summary styling
---------------------------------------------- */

summary {
    font-size: 1.2em;
    font-weight: 500;
    color: #333;
    background: #f2f2f2;
    cursor: pointer;
    display: block;
    margin: 0.5em 0 .125em 0;
    padding: .25em 1em;
}

/*summary::-webkit-details-marker {
    display: none;
}

summary:after {
    content: "\002B";
    color: #333;
    position: absolute;
    right: 6%;
    font-size: 1.2em;
    font-weight: 700;
}

details[open] > summary:after {
    content: "\00D7";
}*/

@media (min-width: 768px) {
    br.brhide{
        display: none;
    }

}

/* -------------------------------------------------------------------------------------
                                                baby info tracker photo gallery styles
----------------------------------- */


    #photo-gallery{
            width: 80%;
            margin: 30px auto;
            
        }
        #photo-gallery > div{
          display: flex;
          flex-wrap: wrap;
        }

        a.full-img {
          font-size: 16px;
          overflow: hidden;
          display: inline-block;
          margin-bottom: 8px;
          width: calc(33.333% - 6.667px);
          margin-right: 8px;
          text-decoration: none;
          color: #333;
        }

        a.full-img:nth-of-type(3n) {
          margin-right: 0;
        }


        a.full-img:hover img.thumb-img {
          transform: scale(1.5);
        }

        #ijFigure {
          margin: 0;
          overflow: hidden;
        }

        .figcap{
            margin-bottom: 15px;
            font-family: sans-serif;
            font-size: .8em;
            color: #c1c1c1;
            text-align: center;
        }

        img.thumb-img {
          border: none;
          max-width: 100%;
          height: auto;
          display: block;
          background: #ccc;
          transition: transform .2s ease-in-out;
        }

        .image-upload{
            display: inline-block;
        }

        input.inline-form{
            display: inline-block;
            width: 50%;
        }
        i.icon-image, i.icon-camera {
            font-size: 2.3em;
        }
        
        @media screen and (min-width: 50em) {
          a.full-img {
            width: calc(16.666% - 6.667px);
          }
          
          a.full-img:nth-of-type(3n) {
            margin-right: 8px;
          }
          
          a.full-img:nth-of-type(6n) {
            margin-right: 0;
          }
        }

/* -------------------------------------------------------------------------------------
                                                                contraction timer styles
----------------------------------- */

div#timer {
    font-size: 2.5em;
}


/* --------------------------------------------------------------------------------------
                                                          fetal movement counter styles
----------------------------------- */


a#SessionCounterDisplay2 {
    font-size: 1.4em;
}

@media (max-width: 768px){
    a#SessionCounterDisplay2 {
        font-size: 1.1em;
        line-height: 1;
    }
}

button.counter-btn:focus {
    outline: 0 solid #fff;
}

.counter-btn{
    background: #f2f2f2;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 1px 2px 0 hsla(0,0%,40%,.25);
}

.cssload-wrap {
    text-align: center;
    line-height: 16px;
}
    
.cssload-container {
    display: inline-block;
}

.cssload-dots {
    display: inline-block;
    position: relative;
}
.cssload-dots:not(:last-child) {
    margin-right: 7px;
}
.cssload-dots:before, .cssload-dots:after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
}
.cssload-dots:nth-child(1):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -1.58s;
        -o-animation-delay: -1.58s;
        -ms-animation-delay: -1.58s;
        -webkit-animation-delay: -1.58s;
        -moz-animation-delay: -1.58s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(1):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -1.58s;
        -o-animation-delay: -1.58s;
        -ms-animation-delay: -1.58s;
        -webkit-animation-delay: -1.58s;
        -moz-animation-delay: -1.58s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(2):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -3.15s;
        -o-animation-delay: -3.15s;
        -ms-animation-delay: -3.15s;
        -webkit-animation-delay: -3.15s;
        -moz-animation-delay: -3.15s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(2):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -3.15s;
        -o-animation-delay: -3.15s;
        -ms-animation-delay: -3.15s;
        -webkit-animation-delay: -3.15s;
        -moz-animation-delay: -3.15s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(3):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -4.73s;
        -o-animation-delay: -4.73s;
        -ms-animation-delay: -4.73s;
        -webkit-animation-delay: -4.73s;
        -moz-animation-delay: -4.73s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(3):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -4.73s;
        -o-animation-delay: -4.73s;
        -ms-animation-delay: -4.73s;
        -webkit-animation-delay: -4.73s;
        -moz-animation-delay: -4.73s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(4):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -6.3s;
        -o-animation-delay: -6.3s;
        -ms-animation-delay: -6.3s;
        -webkit-animation-delay: -6.3s;
        -moz-animation-delay: -6.3s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(4):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -6.3s;
        -o-animation-delay: -6.3s;
        -ms-animation-delay: -6.3s;
        -webkit-animation-delay: -6.3s;
        -moz-animation-delay: -6.3s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(5):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -7.88s;
        -o-animation-delay: -7.88s;
        -ms-animation-delay: -7.88s;
        -webkit-animation-delay: -7.88s;
        -moz-animation-delay: -7.88s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(5):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -7.88s;
        -o-animation-delay: -7.88s;
        -ms-animation-delay: -7.88s;
        -webkit-animation-delay: -7.88s;
        -moz-animation-delay: -7.88s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(6):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -9.45s;
        -o-animation-delay: -9.45s;
        -ms-animation-delay: -9.45s;
        -webkit-animation-delay: -9.45s;
        -moz-animation-delay: -9.45s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(6):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -9.45s;
        -o-animation-delay: -9.45s;
        -ms-animation-delay: -9.45s;
        -webkit-animation-delay: -9.45s;
        -moz-animation-delay: -9.45s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(7):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -11.03s;
        -o-animation-delay: -11.03s;
        -ms-animation-delay: -11.03s;
        -webkit-animation-delay: -11.03s;
        -moz-animation-delay: -11.03s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(7):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -11.03s;
        -o-animation-delay: -11.03s;
        -ms-animation-delay: -11.03s;
        -webkit-animation-delay: -11.03s;
        -moz-animation-delay: -11.03s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(8):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -12.6s;
        -o-animation-delay: -12.6s;
        -ms-animation-delay: -12.6s;
        -webkit-animation-delay: -12.6s;
        -moz-animation-delay: -12.6s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(8):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -12.6s;
        -o-animation-delay: -12.6s;
        -ms-animation-delay: -12.6s;
        -webkit-animation-delay: -12.6s;
        -moz-animation-delay: -12.6s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(9):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -14.18s;
        -o-animation-delay: -14.18s;
        -ms-animation-delay: -14.18s;
        -webkit-animation-delay: -14.18s;
        -moz-animation-delay: -14.18s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(9):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -14.18s;
        -o-animation-delay: -14.18s;
        -ms-animation-delay: -14.18s;
        -webkit-animation-delay: -14.18s;
        -moz-animation-delay: -14.18s;
    background-color: rgb(194,194,194);
}
.cssload-dots:nth-child(10):before {
    transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
    animation: cssload-animBefore 1.75s linear infinite;
        -o-animation: cssload-animBefore 1.75s linear infinite;
        -ms-animation: cssload-animBefore 1.75s linear infinite;
        -webkit-animation: cssload-animBefore 1.75s linear infinite;
        -moz-animation: cssload-animBefore 1.75s linear infinite;
    animation-delay: -15.75s;
        -o-animation-delay: -15.75s;
        -ms-animation-delay: -15.75s;
        -webkit-animation-delay: -15.75s;
        -moz-animation-delay: -15.75s;
    background-color: rgb(116,189,174);
}
.cssload-dots:nth-child(10):after {
    transform: translateY(200%);
        -o-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
    animation: cssload-animAfter 1.75s linear infinite;
        -o-animation: cssload-animAfter 1.75s linear infinite;
        -ms-animation: cssload-animAfter 1.75s linear infinite;
        -webkit-animation: cssload-animAfter 1.75s linear infinite;
        -moz-animation: cssload-animAfter 1.75s linear infinite;
    animation-delay: -15.75s;
        -o-animation-delay: -15.75s;
        -ms-animation-delay: -15.75s;
        -webkit-animation-delay: -15.75s;
        -moz-animation-delay: -15.75s;
    background-color: rgb(194,194,194);
}
/* Styling for multiple baby tools */

/* .activeBabyButton {
    background-color: #1FAFA4;
    font-weight: bold;
} */
.ij-dropdown-multiples {
    width:30%;
}
#ij-multiple-baby-select{
    width:100%;
    padding-right:24px;
    background-color: #ab8ab8;
    font-size: 18px;
    font-family:'Roboto', sans-serif;
    word-wrap:normal;
    color:inherit;
    min-width:fit-content;
    max-width:initial;
}
#ij-multiple-baby-info-p{
    clear:left;
    margin-bottom:0px;
    font-size:16px;
}
#ij-multiple-baby-info-div{
    display:table;
    padding-bottom:10px;
    display:flex; 
    margin: auto .4em;
}
#ij-multiple-baby-dropdown{
    display:inline-block; 
    width:100%; 
    margin:auto;
}
#ij-baby-select-tooltip{
    order:2; 
    float:right;
    max-height:fit-content;
    width:auto;
    min-width:44%;
    margin-left:2%; 
    margin-right:2%;
}
#ij-multiple-openmodal{
    order:3; 
    height:36px; 
    margin-right:0px; 
    margin-left:0px;
}




@keyframes cssload-animBefore {
    0% {
        transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    25% {
        transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    50% {
        transform: scale(1) translateY(200%);
        z-index: -1;
    }
    75% {
        transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    100% {
        transform: scale(1) translateY(-200%);
        z-index: -1;
    }
}

@-o-keyframes cssload-animBefore {
    0% {
        -o-transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    25% {
        -o-transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    50% {
        -o-transform: scale(1) translateY(200%);
        z-index: -1;
    }
    75% {
        -o-transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    100% {
        -o-transform: scale(1) translateY(-200%);
        z-index: -1;
    }
}

@-ms-keyframes cssload-animBefore {
    0% {
        -ms-transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    25% {
        -ms-transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    50% {
        -ms-transform: scale(1) translateY(200%);
        z-index: -1;
    }
    75% {
        -ms-transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    100% {
        -ms-transform: scale(1) translateY(-200%);
        z-index: -1;
    }
}

@-webkit-keyframes cssload-animBefore {
    0% {
        -webkit-transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    25% {
        -webkit-transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    50% {
        -webkit-transform: scale(1) translateY(200%);
        z-index: -1;
    }
    75% {
        -webkit-transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    100% {
        -webkit-transform: scale(1) translateY(-200%);
        z-index: -1;
    }
}

@-moz-keyframes cssload-animBefore {
    0% {
        -moz-transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    25% {
        -moz-transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    50% {
        -moz-transform: scale(1) translateY(200%);
        z-index: -1;
    }
    75% {
        -moz-transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    100% {
        -moz-transform: scale(1) translateY(-200%);
        z-index: -1;
    }
}

@keyframes cssload-animAfter {
    0% {
        transform: scale(1) translateY(200%);
        z-index: -1;
    }
    25% {
        transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    50% {
        transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    75% {
        transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    100% {
        transform: scale(1) translateY(200%);
        z-index: 1;
    }
}

@-o-keyframes cssload-animAfter {
    0% {
        -o-transform: scale(1) translateY(200%);
        z-index: -1;
    }
    25% {
        -o-transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    50% {
        -o-transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    75% {
        -o-transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    100% {
        -o-transform: scale(1) translateY(200%);
        z-index: 1;
    }
}

@-ms-keyframes cssload-animAfter {
    0% {
        -ms-transform: scale(1) translateY(200%);
        z-index: -1;
    }
    25% {
        -ms-transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    50% {
        -ms-transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    75% {
        -ms-transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    100% {
        -ms-transform: scale(1) translateY(200%);
        z-index: 1;
    }
}

@-webkit-keyframes cssload-animAfter {
    0% {
        -webkit-transform: scale(1) translateY(200%);
        z-index: -1;
    }
    25% {
        -webkit-transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    50% {
        -webkit-transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    75% {
        -webkit-transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    100% {
        -webkit-transform: scale(1) translateY(200%);
        z-index: 1;
    }
}

@-moz-keyframes cssload-animAfter {
    0% {
        -moz-transform: scale(1) translateY(200%);
        z-index: -1;
    }
    25% {
        -moz-transform: scale(0.7) translateY(0);
        z-index: -1;
    }
    50% {
        -moz-transform: scale(1) translateY(-200%);
        z-index: 1;
    }
    75% {
        -moz-transform: scale(1.3) translateY(0);
        z-index: 1;
    }
    100% {
        -moz-transform: scale(1) translateY(200%);
        z-index: 1;
    }
}

@media (max-width: 768px){
    span.cssload-dots:nth-last-child(-n+5) {
        display: none;
    }
}