.hiddenOption {
    display: none;
}

.terms {
    max-width: 50em;
}

.leftmenu {
    position: fixed;
    left: 0em;
    top: 0em;
    width: 13em;
    height: 100vh;
    box-sizing: border-box;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    transform: translateX(-14em);
}

.menubg {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.2);
    overscroll-behavior: contain;
}


.shownmenu {
    transform: translateX(0);
    transition: 0.1s;
}

.hiddenmenu {
    transform: translateX(-13em);
    transition: 0.1s;
}

.footer {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
    font-size: 0.8em;
    color: #aaa;
}

.footer a {
    color: #aaa;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

body {
    margin: 0px;
    background: #eee;
    font-family: sans-serif;
    font-size: 11pt;
}

input {
    font-family: sans-serif;
    font-size: 11pt;
}

.menuul {
    margin-top: 0px;
    margin-bottom: 2px;
}

li, button {
    padding: 0.2em;
}

button:active, span:active, a:active {
				background: #eee;
			    }

svg {
    display: block;
}

.icon {
    width: 30px;
    height: 30px;
    stroke-width: 1.5;
    stroke-linecap: butt;
    fill: none;
}

.missedicon {
    margin-right: 0.3em;
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
    stroke-linecap: butt;
    fill: none;
}


.icontext {
    font-size: 4pt;
    font-weight: bold;
    stroke: none;
    fill: black;
}

.header .icon {
    stroke: black;
}

.navbutton .icon {
    stroke: black;
}

.leftmenu .icon {
    stroke: black;
}

.toleft {
}

.toright {
}

.header {
    background: #fff;
    margin-bottom: 2px;
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#subheader {
    display: flex;
    align-items: center;
}

.strikeout {
    color: #a00;
    text-decoration: line-through;
}

.header input {
    font-size: 14pt;
}

.hpane {
    background: white;
    margin-bottom: 2px;
    padding: 0.2em;
}

/*
.hpane::after {
    content: "";
    clear: both;
    display: table;
} */

.flexpane {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.centerflexpane {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.todaybutton {
    font-size: 1.5em;
    color: black;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
}

#massagelink {
    display: flex;
    justify-content: center;
}

#massagelink a {
    font-size: 1.5em;
    color: black;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    display: block;
}

.alert {
    background: yellow;
    display: block;
    border: 0.2em solid red;
    text-align: center;
    padding: 1em
}

.message {
    display: block;
    border: 0.2em solid black;
    text-align: center;
    padding: 1em
}

.messagebg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    display: block;
    background: rgba(0,0,0,0.2);
}

.messagebg > .message {
    position: relative;
    max-width: 40em;
    max-height: 75vh;
    margin: auto;
    display: block;
    overflow: scroll;
}    

.navbutton {
    background: white;
    padding: 0.2em;
}

.navbutton img {
    display: block;
}

.title {
    padding-left: 1em;
}

.menubutton {
    cursor: pointer;
    background: #fff;
    border-right: 2px solid #eee;
}

.menuul .menubutton {
    border: none;
}

.menuul, .menuul ul {
    background: #fff;
}

.menuul a {
    line-height: 200%;
}

.menuul form {
    display: inline;
}

.menuul input[type="submit"] {
    line-height: 200%;
    border: none;
    background: none;
    color: black;
    padding: 0px;
    cursor: pointer;
}

.menuul li {
    border-bottom: 1px solid rgba(0,0,0,0.25);
}

.menuul li:last-child {
    border-bottom: none;
}

.altview {
    border: 1px solid transparent;
    margin: 2px;
    margin-bottom: 0.4em;
    cursor: pointer;
    padding: 0.3em;
}

.altview.expanded {
    cursor: initial;
}

.altview .endtime {
    display: none;
}

.altview.expanded .endtime {
    display: inline-block;
}

.altview.expanded .classcontent {
    display: block;
}

.altview .classcontent {
    display: none;
}

.altview .times {
    display: inline;
}

.altview .classtitle {
    display: inline;
    white-space: nowrap;
}

.altview .classheader {
    overflow: hidden;
}

.altview.expanded .times {
    display: block
}

.altview.expanded .classtitle {
    display: block;
    white-space: initial;
}

.hideButton {
    border: 0;
    background: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5em;
    font-family: sans-serif;
}

.showButton {
    border: 0;
    background: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5em;
    font-family: sans-serif;
}

.altview .toleft {
    display: none;
}

.altview.expanded .toleft {
    display: block;
}

.altview.clone {
    display: none;
}

.altview input[type="submit"] {
    background: none;
    color: inherit;
    border-width: 0.2em;
    border-style: solid;
    border-color: inherit;
    padding: 0.2em 0.6em 0.2em 0.6em;
    border-radius: 10%;
}

.classfooter {
    display: flex;
    justify-content: space-between;
}

.warning {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.collapsebutton {
    float: right;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    margin: 0;
    background: none;
}

.collapsebutton img {
    display: block;
    width: 1.5em;
    height: 1.5em;
}

.collapsebutton .icon {
    width: 1.5em;
    height: 1.5em;
}

.fullicon {
    display: none;
}

.mobileicon {
    display: block;
}

.inlineicon {
    display: inline-block;
}

.marked {
    border: 1px solid red
}

.booked {
    border: 2px solid red;
}

.schedule {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(12em,1fr));
}


.day {
    background: #fff;
    display: none;
    width: 100%;
    vertical-align: top;
    margin-bottom: 0.2em;
    padding: 0.1em;
}

.today {
    background: #FCF8E3;
}

.current {
    display: block;
}

.weekbutton {
    display: none;
}

.daybutton {
    display: inline-block;
}

.hidden {
    display: none;
}

.toggles {
    display: inline-block;
}

.toggles div.formheading:after {
    content: ":";
}

.toggles > div {
    text-align: right;
}

.toggles > div > div {
    display: inline
}

.digest {
    padding: 0.15em;
}

.detail {
    padding: 0.15em;
}

.digest > .altinner {
    overflow: hidden;
    white-space: nowrap;
}

.altinner {
    margin: 0.15em;
}


.formwidget {
    margin: 0.1em;
    padding: 0.1em;
}

.formElement {
    margin-bottom: 0.2em;
}

.formwidget input {
    padding: 0.2em;
    box-sizing: border-box;
    width: 100%;
}

.formwidget input[type=text] {
    background: #f2f2f2;
}

.formwidget input[type=password] {
    background: #f2f2f2;
}

.formwidget input[type=number] {
    background: #f2f2f2;
}

.formwidget input[type=email] {
    background: #f2f2f2;
}

.formwidget select {
    padding: 0.2em;
    box-sizing: border-box;
    width: 100%
}

.formwidget * {
    font-size: 110%;
}

.formLabel {
    text-align: left;
}

.formheading {
    margin: 0.1em;
    padding: 0.1em;
}

.formError {
}

.errorElement {
    border: 1px solid red;
}

.hideContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.hideOnPhone {
    display: none;
}

.forwardbutton {
    order: 2;
    flex-grow: 0;
}

.backbutton {
    flex-grow: 0;
}

@media screen and (min-width: 480px) {
    .flexpane {
	justify-content: flex-start;
    }

    .centerflexpane {
	justify-content: flex-start;
    }
    
    .forwardbutton {
	order: 0;
    }
    
    .hideContainer {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
    }

    .altview.clone {
	display: block;
    }
    
    .formwidget input {
	width: initial;
    }

    .formwidget select {
	width: initial;
    }

    .formwidget * {
	font-size: initial;
    }

    .formElement {
	padding: 0.2em;
    }
    
    .formLabel {
	text-align: initial;
	padding-right: 0.2em;
    }

    .formContent {
    }

    .formError {
	padding-left: 0.2em;
    }

    .toggles div {
	display: inline
    }

    .toggles div.formheading {
	margin-right: 1em
    }

    .day {
	display: inline-block;
    }

    .weekbutton {
	display: inline-block;
    }

    .daybutton {
	display: none;
    }

    .detailbg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: block;
	background: rgba(0,0,0,0.2);
    }
    
    .detailbg > .altview {
	position: relative;
	top: 25%;
	max-width: 40em;
	margin: auto;
	display: block;
    }

    .hidden {
	display: none;
    }

    .digest.hidden {
	display: block;
    }

    .hideOnPhone {
	display: initial;
    }

    .hideButton {
	display: none;
    }
    
    .showButton {
	display: none;
    }

    .fullicon {
	display: block;
    }

    .mobileicon {
	display: none;
    }

}

.daytitle {
    padding: 0.2em;
    text-align: center;
}


@keyframes forwardnav {
    from { transform: translateX(0px)}
    to { transform: translateX(-200%)}
}

@keyframes backnav {
    from { transform: translateX(0px)}
    to { transform: translateX(200%)}
}

@-webkit-keyframes forwardnav {
    0% { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(-200%); }
}

@-webkit-keyframes backnav {
    0% { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(200%); }
}


@keyframes forwardnavin {
    from { transform: translateX(-200%)}
    to { transform: translateX(0px)}
}

@keyframes backnavin {
    to { transform: translateX(0px)}
    from { transform: translateX(200%)}
}

@-webkit-keyframes forwardnavin {
    100% { -webkit-transform: translateX(0px); }
    0% { -webkit-transform: translateX(-200%); }
}

@-webkit-keyframes backnavin {
    100% { -webkit-transform: translateX(0px); }
    0% { -webkit-transform: translateX(200%); }
}


.classheader {
    border-bottom: 1px solid rgba(0,0,0,0.5);
    padding-bottom: 0.2em;
    margin-bottom: 0.4em;
}

.classheader div {
    margin-bottom: 0.2em;
}

.classheader div:last-child {
    margin-bottom: 0em;
}

@-webkit-keyframes dissanim {
    0% { -webkit-transform: translateX(-100%); }
    10% { -webkit-transform: translateX(0px); }
    80% { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(200%); }
}

@keyframes dissanim {
    0% { transform: translateX(-100%); }
    10% { -webkit-transform: translateX(0px); }
    80% { -webkit-transform: translateX(0px); }
    100% { -webkit-transform: translateX(200%); }
}

.dissapear {
    color: white;
    background: green;
    padding: 1em;
    position: fixed;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    animation-name: dissanim;
    -webkit-animation-name: dissanim;
    animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}