body {
    padding: 0;
    margin: 0;
    font-family: "Arial", sans-serif;
    font-size: 3.5vmin;
    background-color: #f0f0f0;
}

code, pre {
    font-family: "Helvetica", sans-serif;
    background-color: #f0f0f0;
    border-radius: 0.2em;
}

pre {
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 0.5em;
}

img {
    max-width: 100%;
}

h3 {
    font-size: 3.5vmin;
}

input, select {
    font-size: 3.5vmin;
    margin-top: 0.1em;
    margin-bottom: 0.5em;
}

input[readonly] {
    cursor: default;
    background-color: rgba(239, 239, 239, 0.3);
    color: rgb(84, 84, 84);
    border-color: rgba(118, 118, 118, 0.3);
}

/*input[type="checkbox"] {
    display: inline;
}*/

button {
    margin: 1em 0.1em 0.5em 0.1em;
    font-size: 3vmin;
}

hr {
    margin-block-start: 0.5em;
    margin-block-end: 1em;
}

/* ----- Class "squaredCheckbox" Styles ----- */
/*
<div class="squaredCheckbox">
    <input type="checkbox" value="None" id="id_level" name="check" checked />
    <label for="id_level"></label>
</div>
*/
.squaredCheckbox {
  width: 20px;
  position: relative;
}
.squaredCheckbox label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    margin-top: 0.3em;
}
.squaredCheckbox label:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
}
.squaredCheckbox label:hover + label::after {
      opacity: 1.5;
  }
.squaredCheckbox input[type=checkbox] {
    visibility: hidden;
}
.squaredCheckbox input[type=checkbox]:checked + label:after {
      opacity: 1;
}


/* ----- Class "content" Styles ----- */
.content {
    max-width: 50em;
    margin: 5em auto 3em auto;
    padding: 0 1em;
}

/* -- LINK Styles -- */
.content a:link { /* unvisited link */
    text-decoration: none;
    color: black;
}

.content a:visited { /* visited link */
    color: black;
}

.content a:hover { /* mouse over link */
    color: darkslategrey;
}

.content a:active { /* selected link */
    color: darkslategrey;
}



/* ----- Class "plan" Styles ----- */
.plan {
    padding: 0.5em 1em;
    margin: 1em auto;
    background-color: #ffffff;
    border-radius: 1em;
}

.plan p:first-child {
    margin-top: 0.3em;
}

.plan ul {
    margin: 0 0 0 0;
    padding-inline-start: 0px;
}

.plan li {
    display: block;
    border: 2pt;
    border-color: #f0f0f0;
    border-radius: 5pt;
    border-style: solid;
    padding: 0.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
/*    background-color: #f0f0f0;*/
}

.plan small {
    font-size: 0.6em;
}



/* ----- Class "workout" Styles ----- */
.workout {
    padding: 0.5em 1em;
    margin: 1em auto;
    background-color: #ffffff;
    border-radius: 1em;
}

.workout p:first-child {
    margin-top: 0.3em;
}

.workout td {
    min-width: 33vmin;
}

.workout ul {
    margin: 0 0 0 0;
    padding-inline-start: 0px;
}

.workout li {
    display: block;
    border: 2pt;
    border-color: #f0f0f0;
    border-radius: 5pt;
    border-style: solid;
    padding: 0.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
/*    background-color: #f0f0f0;*/
}

.workout li#dateDivider {
    display: contents;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}

.workout h6 {
    font-weight: normal;
    margin: 0.5em 0 0 0;
    text-align: right;
}

.workout hr {
    margin-top: inherit;
    margin-bottom: inherit;
}

.workout small {
    font-size: 0.6em;
}



/* ----- Class "workoutHead" Styles ----- */
.workoutHead h3, .workoutHead input {
    margin: 1em 0.1em 0.5em 0.1em;
    display: inline-block;
}

.workoutHead small {
    margin: 1em 0.1em 0.5em 0.1em;
    float: right;
}



/* ----- Class "workoutDetails" Styles ----- */
.workoutDetails th, .workoutDetails td {
    padding: 0.1em 0.5em 0.1em 0.1em;
}

.workoutDetails input {
    width: 15vmin;
}



/* ----- Class "workoutDiff" Styles ----- */
.workoutDiff {
    display: inline-table;
    font-size: 2.5vmin;
/*    color: green;*/
}



/* ----- Class "newWorkout" Styles ----- */
.newWorkout {
    padding: 0.5em 1em;
    margin: 1em auto;
    background-color: #ffffff;
    border-radius: 1em;
}

.newWorkout select {
    max-width: 60vmin;
}



/* ----- Class "newTemplate" Styles ----- */
.newTemplate {
    padding: 0.5em 1em;
    margin: 1em auto;
    background-color: #ffffff;
    border-radius: 1em;
}

.newTemplate select {
    max-width: 50vmin;
}



/* ----- Class "login" Styles ----- */
.login {
    padding: 0.5em 1em;
    margin: 1em auto;
    background-color: #ffffff;
    border-radius: 1em;
}

.login button {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 95%;
    text-align: center;
    margin: 0.5em 2.5% 0.5em  2.5%;
    padding: 0.5em;
    background-color: #303030;
    color: #f1f1f1;
/*    border-color: #94da3a;*/
    border-radius: 0.5em;
    border-width: 0;
}

.login button:hover {
    background-color: #404040;
}



/* ----- Class "about" Styles ----- */
.about {
    padding: 0.5em 1em;
    margin: 1em auto;
    background-color: #ffffff;
    border-radius: 1em;
}



/* ----- Class "footer" Styles ----- */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 0.5em 1em;
    margin: 0;
    color: #303030;
    background-color: #94da3a;
}

.footer ul {
    padding-inline-start: 0;
}

.footer li {
    list-style: none;
    font-size: 2vmin;
    margin-bottom: 1em;
}



/* ----- Class "menu" Styles ----- */
ul.menu {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #303030;
    color: #ffffff;
    font-weight: 900;
    font-size: 16pt;
    margin: 0;
    padding: 0 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    transition: margin-right .5s;
}

ul.menu a {
    color: #94da3a;
    text-decoration: none;
    cursor: pointer;
}

ul.menu a:hover {
    text-decoration: underline;
    color: #ffffff;
}

ul.menu li {
    display: inline-block;
    margin: 1em;
}

ul.menu h1#menu-heading {
    display: block;
/*    float: left;*/
    overflow-x: hidden;
    font-weight: lighter;
/*    font-size: 22pt;*/
    font-size: 6vmin;
    color: #94da3a;
    margin-left: 2.5em;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

ul.menu div#back-symbol {
    display: none;
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 2vmin 2vmin 2vmin 2vmin;
    position: relative;
    transition: 0.5s;
}

ul.menu div#burger-symbol {
    display: block;
    float: right;
    margin: 0;
    cursor: pointer;
    background-image: url("/static/burgerfadein.png");
    background-repeat: repeat-y;
    padding: 2vmin 2vmin 2vmin 2vmin;
    position: relative;
    transition: 0.5s;
}



/* ----- Class "contextMenu" Styles ----- */
.contextMenu {
    position: fixed;
    display: none;
    width: 40vmin;
    z-index: 1;
    background-color: #ffffff;
    box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
    transition: .2s;
}

.contextMenu ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

.contextMenu li {
    list-style: none;
    padding: 0.5em;
}

.contextMenu li:hover {
    background: rgba(0, 0, 0, 0.2);
}

.contextMenu hr {
    margin-block-start: 0;
    margin-block-end: 0;
}



/* ----- Class "sidenav" Styles ----- */
.sidenav {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #303030;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 15vmin;
}

.sidenav a {
    padding: 0.1em 0.1em 0.8em 0.5em;
    text-decoration: none;
    font-size: 5vmin;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}



/* ----- Class "errorlist" Styles ----- */
.errorlist {
    display: none;
}



/* ----- Class "formFieldErrors" Styles ----- */
.formFieldErrors {
    color: red;
}



/* ----- Submit/Save-Button Style ----- */
#save-btn {
    left: 0;
    bottom: 0;
    width: 95%;
    text-align: center;
    margin: 0.5em 2.5% 0.5em  2.5%;
    padding: 0.5em;
    background-color: #303030;
    color: #f1f1f1;
/*    border-color: #94da3a;*/
    border-radius: 0.5em;
    border-width: 0;
}

#save-btn:hover {
    background-color: #404040;
}



/* ----- Options-Button Style ----- */
#option-symbol {
    display: inline;
    float: right;
    margin-left: 1em;
}