/*
rework layout for v2 app before it gets out of hand
*/

/* variables, sizes and colors */
:root {
    --dark: rgb(66, 66, 66);
    --med_dark: #777;
    --med_light: lightgrey;
    --light: #F8F8F8;
    --green: #339900;

    --pale_pink: rgb(253, 229, 229);
    --pale_grey: rgb(231, 231, 231);
    --pale_blue: rgb(229, 244, 253);

    --ahp_blue: rgb(36 132 198);
    --ahp_red: rgb(236 28 36);
    --ahp_yellow: rgb(236, 177, 28);
    --coach_blue: #0078e7; /* original was #007AFF but pure-css blue is #0078e7 */

    font-size: 62.5%;

    --xlarge: 3rem;
    --large: 2.4rem;
    --medium: 1.8rem;
    --small: 1.5rem;
    --tiny: 1.2rem;
}

@media only screen and (max-width: 400px) {
    --xlarge: 2rem;
    --large: 1.72rem;
    --medium: 1.5rem;
    --small: .86rem;
    --tiny: .43rem;
}

@media print {
  .hidden-print {
    display: none !important;
  }
}
/* this overrides the basic pure grey button color */
.pure-button {
    background-color: #0078e724;
}
.pure-button-primary {
    background-color: #0078e7;
}

/* body flex, degenerate page size, and basic font */
body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;

    background: var(--light);
    color: var(--dark);
    font-family: Tahoma, Helvetica, Roboto, sans-serif;
    font-size: var(--medium);
}

/* unlinked logo with same size as button ones */
img.logo {
    vertical-align: middle;
    height:38px;
    border-style: solid;
    border-color: transparent;
    border-width: 1px;
}
/* pure-style small-radius button */
a img.logo{
    vertical-align: middle;
    border-radius: 2px;
    border-color: var(--med_light);
}
/* home-screen-style wide-radius button */
a img.logo_icon_button{
    vertical-align: middle;
    height:38px;
    border-style: solid;
    border-width: 1px;
    border-radius: 9px;
    border-color: var(--med_light);
}


img.small_logo {
    height: 1.6em;
    width: auto;
}

/* headers and text sizes */
h1 {
    margin: 0;
    padding: 0;
    color: var(--dark);
    font-size: var(--xlarge);
    font-weight: normal;
}

h2 {
    margin: 0 0 1.5rem 0;
    padding: 0;
    color: var(--dark);
    font-size: var(--large);
    font-weight: normal;
}

h2.tight {
    margin: 0;
}

h3 {
    margin: 0 0 .5rem 0;
    padding: 0;
    color: var(--dark);
    font-size: var(--medium);
    font-weight: bold;
}

h3.tight {
    margin: 0;
}

.small {
    font-size: var(--small);
}

.indent {
    margin-left:2em;
}


.tiny {
    font-size: var(--tiny);
}

/* form mods */
form.pure-form input[type=checkbox] {width:1em; height:1em}



/* table mods */
table.ahp_table.wide {
    width: 100%;
}

table.ahp_table th {
    text-align: left;
}

table.ahp_table td {
    text-align: left;
}

table.ahp_table th.right {
    text-align: right;
}

table.ahp_table td.right {
    text-align: right;
}

table.ahp_table th.center {
    text-align: center;
}

table.ahp_table td.center {
    text-align: center;
}

table.ahp_table.compact th {
    padding: .25em .25em;
    vertical-align: top;
}

table.ahp_table.compact td {
    text-align: left;
    padding: .25em .25em;
    vertical-align: top;
}

table.ahp_table.tight td {
    text-align: left;
    padding: 0 .25em 0;
    vertical-align: top;
}


/* major page layout regions */

#header {
    position: relative;
    background: var(--light);
    margin: 0;
    padding: 1rem;
    font-size: var(--large);
    font-weight: bold;
}

#header h1 {
    background: linear-gradient(to right, #ed1c24, #a7a7a7);
    /*background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047);*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.red_fade {
    background: linear-gradient(to right, #ed1c24, #a7a7a7);
    /*background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047);*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#header_extra {
    position: absolute;
    top: .5rem;
    right: 1rem;
    font-size: var(--medium);
    font-weight: normal;
    color: var(--dark);
}

#content {
    flex: 1;
    background: var(--light);
    margin-bottom: 5em
}

div.page {
    padding: .5rem 1rem 0;
}

div.wide_page {
    padding: .5rem 0 0 0;
}

div.top_section {
    margin-bottom: 2rem;
}

div.section {
    margin-top: 1rem;
    margin-bottom: 2rem;
}


#footer {
    height: 4rem; /* Footer height */
    padding: 1rem;
    color: #777;
    background: var(--light);
    width: calc(100% - 1rem);
    overflow: hidden;
    position: fixed;
    bottom: 0;
    /*border-top: 1px solid var(--dark);*/
    box-shadow: 0 0 32px -8px rgba(0, 0, 0, 0.50);
}

div.copyright{
    display: inline-block;
    color: var(--med_dark);
}
div.copyright a {
    text-decoration: none;
    color: var(--med_dark);
}

/* colored flags */
.new {
    color: var(--green)
}

.good {
    color: var(--green);
}

.error {
    color: var(--ahp_red);
}

.warn {
    color: var(--ahp_yellow);
}


.aside {
    color: var(--med_dark);
}

.subdued {
    color: var(--med_light);
}


/* reveal box  */
.reveal {
    border: 1px dashed var(--dark);;
    display: inline-block;
    padding: 0 .25rem;
    margin: 0;
}

dl.reveal dt {
    all: unset;
}

dl.reveal dd {
    all: unset;
}


/* combo workout controls */

div.swap {
    margin: 0 .5em 0 .5em;
    text-align: left;
    white-space: nowrap;
    position: absolute;
    bottom: -40px;
}

.compact div.swap {
    position: static;
}


/*  notes on combo workout */

div.notes {
    margin: .5rem 0 0 .5rem;
    border: 1px dashed var(--dark);
    padding: .3rem .3rem;
    max-width: 50rem;
    min-width: 0;
}


.notes_edit {
    display: none;
}

.editing .notes_view {
    display: none;
}

.editing .notes_edit {
    display: block;
}

div.notes_preview_inactive {
    border: 0;
}

.inactive div.notes_preview {
    display: none;
}

div.notes form {
    padding: 0 0 .5rem 0
}


/* buttons! */

button {
    min-width: 95px
}

div.button_row {
    margin-top: .5rem
}


.compact_button {
    min-width: 50px;
    padding: .5rem .25rem;
}

/* this modifies pure-button so it discretely fits embedded in text, but still looks like a button */
.inline-text-button {
    padding: 0 .25rem;
    vertical-align: inherit;
}

.ahp_xs {
    min-width: 2rem;
}
.ahp_sm {
    min-width: 8rem;
}

.ahp_md {
    min-width: 12rem;
}

.ahp_lg {
    min-width: 16rem;
}
.ahp_xl {
    min-width: 24rem;
}

/* handy dividing line */

.hrule:after, .hrule:before {
    content: "\00a0\00a0\00a0\00a0\00a0";
    text-decoration: line-through;
}

/* notices banner */

div.notice {
    font-size: var(--small);
    font-weight: normal;
    background: #e0fcb6;
    padding: .5rem
}

div.notice b {
    color: #339900
}

/* try to make exercise favorite relly clean */
.favex {
    height: 2em;
    display: inline-block;
}

.favex div.icon_box {
    float: left;
    margin-right: 10px;
    cursor: pointer;
}

.favex div.icon_box div {
    width: 1.2em;
    text-align: center;
    padding: 4px 4px;
    border: 1px dashed var(--dark);
    display: none;
    /*filter: grayscale(100%);*/
}

.favex.fav0 .neutral {
    display: block;
    filter: grayscale(100%);
}

.favex.fav1 .like {
    display: block;
}

.favex.fav2 .dislike {
    display: block;
}

.favex .invisible {
    visibility: hidden;
}

.pure-button {
    padding-right: .75em;
    padding-left: .75em;
}

/* calendar start */
div.calendars {
    text-align: center;
    position: relative;
    margin-bottom: 1rem;
}
div.calendar {
    padding-left: 2em; /* not rem */
    position: relative;
    margin-bottom: 2rem;
}

div.calendar .dim {
    opacity: 20%;
}

div.calendar .cal_title {
    width: 14em;
    padding: .25em
}

div.cal_top {
    border-top: 1px solid var(--pale_grey)
}

div.cal_left {
    border-left: 1px solid var(--pale_grey)
}

div.cal_cell {
    height: 2em;
    width: 2em;
    border-bottom: 1px solid var(--pale_grey);
    border-right: 1px solid var(--pale_grey);
    padding-top: 3px;
    text-align: right;
    vertical-align: bottom;
}

div.cal_hilight {
    color: var(--ahp_red)
}

div.cal_head {
    height: 1.2em
}

div.cal_off {
    background-color: #e0e0e0;
}

div.activity {
    height: 5px;
    width: 100%;
}

div.hide {
    visibility: hidden;
}

div.cardio {
    height: 3px;
    width: 100%;
    background-color: lightpink
}

div.work {
    height: 3px;
    width: 100%;
    background-color: #a0cdf8
}

div.other {
    height: 3px;
    width: 100%;
    background-color: #fae09a
}

div.rehab {
    height: 3px;
    width: 100%;
    background-color: #67dda2
}

div.stretch {
    height: 3px;
    width: 100%;
    background-color: #a48bd6
}

div.example {
    display: inline-block;
    width: 2em;
    vertical-align: middle
}

div.cal_legend {
    text-align: left;
    padding-left:2em
}

div.cal_zoom {
    border: 2px dashed var(--dark);
    background: var(--light);
    opacity: 100%;
    text-align: left;
    padding: .5em;
    position: absolute;
    top: 4em;
    left: 4em;
    width: 10em;
    z-index: 3;
}

div.cal_zoom_row{
    margin:1rem 0 1rem 0
}
#cal_zoom_date {
    margin-bottom: .5em;
}

#cal_zoom_saving {
    font-size: var(--tiny);
    position: absolute;
    bottom: 5px;
    right: 5px;
}

div.cal_zoom input {
    height: 3rem;
    width: 3rem;
    vertical-align: middle;
}

/* calendar end */


/* new nav copied from cat.css */
#footer {
    padding:5px 10px;
    height: 48px;
    width: calc(100% - 2rem);
}
div#nav_adapter {
    --med_dark: #777;
    --med_light: lightgrey;
    --medium: 1.8rem;
    --tiny: .43rem;

    background: var(--light);
    color: var(--dark);
    font-family: Tahoma, Helvetica, Roboto, sans-serif;

    position: relative;
    bottom: 0;
    width: 100%;
    height: 2.5rem; /* Footer height */

}


div.nav {
    margin: .25rem;
    font-size: 12px;
    text-align: center;

    /* taken from body*/


    /* taken from footer*/

}

div.nav a {
    color: var(--med_dark);
}

div.nav_button {
    padding: 4px 0px 1px 0px;
    display: inline-block;
    min-width: 5rem;
    border: 1px solid rgba(255, 255, 255, 0)
}

div.nav_button.selected {
    border-radius: 3px;
    /*border-top:none;*/
    border-color: var(--med_light);
    filter: grayscale(100%);

}

div.nav_icon {
    display: inline-block;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

/* end nav */
.info_button {
    color: var(--coach_blue);
    display: inline-block;
    margin: 0 .5em 0em 0em;
    border: 1px solid rgba(0, 0, 0, 0);
}

.info_box {
    margin: .5em .5em 1em .5em;
    border: 1px solid var(--coach_blue);
    border-radius: .5em;
    padding: 1em .5em;
    position: relative;
}

.info_box_icon {
    position: absolute;
    top: -.5em;
    left: -.5em;
    color: var(--coach_blue);
    background: var(--light);
}

div.referral_content {
    font-size:60%;
}
div.referral_content img{
    scale:60%
}

.center {
    text-align: center;
}