/*@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/OpenSans-Light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.pt-sans-narrow-regular {
  font-family: "PT Sans Narrow", serif;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-narrow-bold {
  font-family: "PT Sans Narrow", serif;
  font-weight: 700;
  font-style: normal;
}
*/

HTML { font-size: calc((1vh + 3vw) * 0.7); font-variant-ligatures: normal; }

body * { font-family: "PT Sans Narrow", 'Roboto', 'Noto Sans', 'Droid Sans', open_sanslight, sans-serif; font-style: normal; font-variant: normal; font-weight: 100; }  /* ensure same font for everything - do not move this entry! */
body { background: #eee; }
body:has(dialog[open]) {  /* disable scrolling behind modal dialogs, via https://cassidoo.co/post/css-for-dialogs/ */
  overflow: hidden;
}
dialog::backdrop {  /* blur background */
  backdrop-filter: blur(2px);
}

fieldset > legend {
    font-family: 'Droid Sans', open_sansregular, sans-serif;
    font-size: 110%;
    text-align: left;
  }

fieldset > legend > input {
    padding: 0;
    font-size: 90%;
}

fieldset > input {
    padding: 0;
}

h1 { font-family: "open_sansregular", sans-serif; font-size: 170%; margin: 0; text-align: center; } /* App name */
h2 { font-family: "open_sansregular", sans-serif; font-size: 140%; margin: 0; }  /* tab name */
h3 { font-size: 120%; margin: 0; }  /* training title */
h4 { font-size: 110%; margin: 0; }  /* exercise set */
dl { margin-top: .5em; }
dt { font-size: 110%; }
p  { font-size: 90%; }

th, td { margin: 1.2em; vertical-align: top; }

table {
    table-layout: auto;
  }

input {
    background: #eee;
    font-size: 100%;
    margin: 0;
  }

select, optgroup {
    font-size: 90%;
    font-family: 'open_sanslight';
  }

.icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: text-top;
  }

.large-icon {
    width: 1.3em;
    height: 1.3em;
    vertical-align: middle;
  }

.large-icon-text {
    vertical-align: middle;
    font-size: 1.7em;
  }

.icon:hover, .large-icon:hover, button:hover {
    filter: brightness(85%);
  }

.icon:active, .large-icon:active, button:active {
    filter: brightness(60%);
  }

button:disabled,
button[disabled] {
    filter: brightness(150%);
  }

.thick {
    border-width: medium;
  }

.thin {
    border-width: thin;
  }

.left {
    border-left-style: solid;
    border-left-color: black;
  }

.right {
    border-right-style: solid;
    border-right-color: black;
  }

.top {
    border-top-style: solid;
    border-top-color: black;
  }

.bottom {
    border-bottom-style: solid;
    border-bottom-color: black;
  }

.border {
    border-style: solid;
    border-color: black;
    border-radius: .7em .2em .7em .2em;
    background: #ddd;
  }

details, summary {
    font-style: italic;
    font-weight: lighter;
  }

fieldset {
    margin: .4em;
    padding: .4em;
  }

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

.weight {
    width: 5em;  /* enough width to fit the placeholder text and numbers with decimals */
  }

.reps {
    width: 4em;
  }

/* class for img action */
.disabled {
    opacity: 0.3;
  }

.left-align {
    text-align: left;
  }

.center {
    margin-left: auto;
    margin-right: auto;
  }


.check_box {
    display:none;
    height: .8em;
    width:  .8em;
    display:inline-block;
    padding: 0 0 0 0px;
}

label > .check_box {
    background:url('../icons/7787525_circle_arrow_down_direction_navigation_icon.png') no-repeat;
}

label > .check_box:checked {
    background:url('../icons/7787507_correct_right_arrow_direction_left_icon.png') no-repeat;
}

/* icon gradient for halved */
.gradient {
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}