@media all and (min-width: 1024px) {
 .mobileOnly {
  display: none;
 }
 .responsiveSpacer {
  display: inline;
 }
 .qrCode {
  width: 100px;
  border: 3px solid #ffffff;
 }
}
@media all and (max-width: 1023px) {
 .desktopOnly {
  display: none;
 }
 .responsiveSpacer {
  display: block;
 }
 .qrCode {
  width: 50px;
 }
}

BODY {
 margin-top: 20px;
}
BODY, INPUT, SELECT {
 font-family: Montserrat, sans-serif;
}

DIV, FORM, INPUT {
 box-sizing: border-box;
}

FORM.discreet {
 display: inline;
 margin: 0;
}

A, A:visited {
 transition: color 0.5s;
}

TH, TD {
 vertical-align: top;
}

P {
 white-space: normal;
}

/* overContent: peut s etaler en largeur, sans etre degueu sur mobile */
.overContent {
 max-width: 100%;
 max-height: 80vh;
 overflow: auto;
 padding: 0 !important;
 margin: 0 !important;
}

.small {
 font-size: 0.7em;
}
.number {
 text-align: right;
}

BODY.login {
 background-color: #111111;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: top center;
 min-height: 100vh;
 overflow: hidden;
 color: #eeeeee;
}

INPUT, SELECT, TEXTAREA {
 border: 0;
 padding: 13px 19px;
 color: #111111;
}
@media all and (min-width: 1024px) {
 SELECT {
  max-width: 60vw;
 }
}
TH SELECT {
 padding: 1px 5px;
 margin: 10px auto;
}

A.butt, A.butt:visited,
INPUT.butt {
 border-radius: 10px;
 font-variant: small-caps;
 background-color: rgba(250,180,50,1);
 color: #111111;
 padding: 10px 18px;
 font-size: 1em;
 text-decoration: none;
 transition: background-color 0.5s;
 white-space: nowrap;
 cursor: pointer;
}
A.butt:hover, A.butt:active,
INPUT.butt:hover {
 background-color: rgba(250,180,50,0.3);
}
A.butt {
 line-height: 3em;
}
A.iconButt, A.iconButt:visited {
 border-radius: 10px;
 background-color: rgba(250,180,50,1);
 color: #111111;
 padding: 3px 11px;
 font-size: 1.5em;
 text-decoration: none;
 transition: background-color 0.5s, color 0.5s;
}
A.iconButt:hover, A.iconButt:active, A.iconButt.active {
 background-color: rgba(250,180,50,0.3);
}

A.smallButt, A.smallButt:visited,
INPUT.smallButt {
 border-radius: 4px;
 font-variant: small-caps;
 background-color: rgba(250,180,50,1);
 color: #111111;
 padding: 0 5px;
 font-size: 1em;
 text-decoration: none;
 transition: background-color 0.5s, color 0.5s;
 white-space: nowrap;
 cursor: pointer;
}
A.smallButt:hover, A.smallButt:active,
INPUT.smallButt:hover {
 background-color: rgba(250,180,50,0.3);
}

A.scheduleAdditional, A.scheduleAdditional:visited {
 font-size: 0.6em;
 text-decoration: none;
}

A.log, A.log:visited {
 text-decoration: none;
}

FORM#loginForm {
 display: block;
 position: absolute;
 height: 300px;
 width: 330px;
 max-height: 90vh;
 max-width: 90vw;
 top: 50%;
 left: 50%;
 margin-top: -150px;
 margin-left: -165px;
 border-radius: 25px;
 padding: 18px 22px;
 text-align: center;
}
FORM#loginForm H1 {
 /* login Click logo */
 margin: 0;
 font-size: 2.2em;
}
FORM#loginForm H4 {
 /* login tagline */
 margin: 0;
 font-size: 0.6em;
}
INPUT.loginField {
 width: 100%;
 background-color: rgba(255, 255, 255, 0.5);
 margin: 5px 0;
 transition: background-color 0.5s;
 color: #555555;
}
INPUT.loginField:focus {
 background-color: rgba(255, 255, 255, 0.8); 
}
INPUT.loginButt {
 margin: 8px 0;
 float: right;
}

@media all and (min-width: 1024px) {
 IMG#companyLogo {
  max-width: 180px;
 }
 #menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 200px;
 }
 BODY {
  margin-left: 240px;
 }
 #searchBar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 5;
  padding: 9px 11px;
 }
 #searchInput {
  width: 450px;
 }
}

@media all and (max-width: 1023px) {
 IMG#companyLogo {
  width: 70vw;
  max-width: 200px;
 }
 BODY {
  margin-top: 125px;
 }
 #menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 125px;
  margin-top: -15px;
  overflow: hidden;
  transition: height 0.5s;
 }
 #menuTrigger {
  position: fixed;
  top: 0;
  right: 10px;
  z-index: 6;
  color: #eeeeee;
  font-size: 3em;
 }
 #searchBar {
  position: fixed;
  top: 103px;
  left: 0;
  z-index: 4;
  padding: 9px 11px;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.5s;
 }
 #searchInput {
  width: 100%;
  display: none;
 }
 #searchTrigger {
  position: fixed;
  top: 0;
  left: 10px;
  z-index: 6;
  color: #eeeeee;
  font-size: 3em;
 }
}

#menu A, #menu A:visited,
A.result, A.result:visited {
 display: block;
 color: #eeeeee;
 text-decoration: none;
 transition: background-color 0.5s, color 0.5s;
}
#menu A:hover, #menu A:active,
A.result:hover, A.result:active {
 background-color: #dddddd;
 color: #333333;
}
.result {
 padding: 10px;
}
A.menuLevel1 {
 font-weight: bold;
 padding: 11px 15px;
}
A.menuLevel2 {
 padding: 5px 0 5px 20px;
}
DIV.subMenu {
 height: 1px;
 overflow: hidden;
 transition: height 0.5s;
 font-size: 0.9em;
}
#menu H1 {
 text-align: center;
}
#userDisp {
 text-align: center;
 font-size: 0.8em;
 margin: 5px;
}
#poweredByClick {
 margin-top: -30px;
 text-align: center;
 font-size: 0.9em;
}
#systemVersion {
 text-align: center;
 font-size: 0.6em;
}
#menuButts {
 margin: 10px 0;
 text-align: center;
}
#menuButts A, #menuButts A:visited {
 display: inline;
 padding: 4px 13px;
 font-size: 1.5em;
}
#menu A.active, #menu A.active:hover {
 background-color: #333333;
 color: #eeeeee;
}

.successMsg {
 background-color: #00770b;
}
P.successMsg {
 background-color: #00770b;
 color: #eeeeee;
 padding: 9px 15px;
}
.errorMsg {
 background-color: #9c0202;
}
P.errorMsg,
DIV.errorMsg {
 color: #eeeeee;
 padding: 9px 15px;
}
.warningMsg {
 background-color: #ff9700;
}
.warningColor {
 color: #ff9700;
}
P.warningMsg {
 color: #eeeeee;
 padding: 9px 15px;
}

.errorField {
 outline: 4px solid #9c0202;
}


DIV.widgets DIV.full,
DIV.widgets DIV.half,
DIV.widgets DIV.third {
 border-radius: 15px;
 line-height: 2em;
 font-size: 0.9em;
}
@media all and (min-width: 1024px) {
 DIV.widgets {
  margin-left: -10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
 }
 DIV.widgets DIV {
  flex-direction: column;
  padding: 0 23px 15px;
  margin: 10px;
 }
 .full {
  flex: 100%;
 }
 .half {
  flex: 45%;
 }
 .third {
  flex: 30%;
 }
}
@media all and (max-width: 1023px) {
 DIV.widgets DIV {
  padding: 10px 23px 15px;
  margin: 5px auto;
 }
}
DIV.subWidget {
 border-radius: 10px;
 padding: 10px;
 text-align: center;
}
DIV.subWidget TABLE TD {
 padding: 5px 7px;
 text-align: left;
}

TABLE#aPlan,
TABLE#aRecords,
TABLE#aBudget {
 font-size: 0.8em;
}
TABLE#aPlan TH, TABLE#aPlan TD,
TABLE#aRecords TH, TABLE#aRecords TD,
TABLE#aBudget TH, TABLE#aBudget TD {
 padding: 5px 7px;
}
TABLE#aBudget TR:first-of-type {
 position: sticky;
}
@media all and (max-width: 1023px) {
 TABLE#aBudget TR:first-of-type {
  top: 120px;
 }
}
@media all and (min-width: 1024px) {
 TABLE#aBudget TR:first-of-type {
  top: 0;
 }
}
TR.aTitle {
 font-weight: bold;
}
#aPlan TD:nth-child(3),
#aPlan TD:nth-child(4),
#aRecords TD:first-child,
#aRecords TD:nth-child(6),
#aBudget TD:nth-child(2),
#aBudget TD:nth-child(3),
#aBudget TD:nth-child(4),
#aBudget TD:nth-child(5) {
 text-align: right;
}

TABLE#aRecords TD:last-child {
 opacity: 0;
 transition: opacity 0.5s;
}
TABLE#aRecords TR:hover TD:last-child {
 opacity: 1;
}

TABLE.form TH,
TABLE.form TD,
TABLE.form TH,
TABLE.form TD {
 padding: 7px 12px;
 white-space: nowrap;
}
TABLE.form TH,
TABLE.form TH {
 vertical-align: middle;
}
@media all and (max-width: 1023px) {
 TABLE.form.mobileJump TH,
 TABLE.form.mobileJump TD {
  display: block;
 }
}

.disable {
 text-decoration: none;
}
.disable:hover {
 color: #666666;
 text-decoration: line-through;
}
.disabled {
 color: #666666;
 text-decoration: line-through;
}
.disabled:hover {
 color: #dddddd;
 text-decoration: none;
}

#addButt1, #addButt2 {
 position: fixed;
 bottom: 50px;
 background-color: rgba(250,180,50,1);
 color: #111111;
 border-radius: 60px;
 min-width: 60px;
 margin: auto 10px;
 text-decoration: none;
 padding: 0px 10px;
 font-size: 4em;
 text-align: center;
 transition: background-color 0.5s;
}
#addButt1:hover, #addButt2:hover {
 background-color: transparent;
}
#addButt1 SPAN, #addButt2 SPAN {
 font-size: 0.25em;
 padding-right: 15px;
}
#addButt1 {
 right: 50px;
}
#addButt2 {
 right: 200px;
}

@media all and (min-width: 1024px) {
 INPUT.wide, INPUT.quickSearch, IFRAME.quickSearchFrame, TEXTAREA, TD.wide {
  width: 400px;
 }
 TEXTAREA {
  height: 200px;
 }
}
@media all and (max-width: 1023px) {
 INPUT.wide, INPUT.quickSearch, IFRAME.quickSearchFrame, TEXTAREA, TD.wide {
  width: 80vw;
 }
 BODY.quickSearchResult {
  margin-top: 5px;
 }
}
INPUT.narrow {
 width: 140px;
}
INPUT.fColor {
 height: 50px;
 width: 100px;
}

IFRAME.quickSearchFrame {
 height: 1px;
 border: 0;
 transition: height 0.5s;
}


#refDoc {
 width: 60px;
 opacity: 0;
 position: relative;
 left: -60px;
}

TABLE.list TH,
TABLE.list TD {
 padding: 5px 7px;
}

.spoiler {
 display: none;
}

.fieldLike {
 border: 1px solid !important;
 padding: 5px 7px !important;
 margin: 10px auto !important;
}

.hidden {
 height: 1px;
 width: 1px;
 margin: 0;
 padding: 0;
 border: 0;
}

.checkbox {
 transform: scale(2);
}

LABEL {
 margin-left: 10px;
 margin-right: 20px;
}

A.sorting, A.sorting:visited {
 text-decoration: none;
 font-size: 1.2em;
 padding: 0 5px;
}


/* FLAGS */

.flag {
 border-radius: 5px;
 padding: 2px 12px;
 font-variant: small-caps;
 line-height: 1.5em;
 color: #eeeeee;
 white-space: nowrap;
 background-color: #013e51;
}
A.flag, A.flag:visited {
 text-decoration:none;
 transition: color 0.5s, opacity 0.5s;
}
A.flag:hover, A.flag:active {
 opacity: 0.7;
}

.flagUser {
 background-color: #f35100;
}
.flagProf {
 background-color: #f00000;
}
.flagStudent {
 background-color: #08b800 !important;
}
.flagParent {
 background-color: #1b00b4 !important;
}
.flagWorkshopManager {
 background-color: #ffff00 !important;
}
.flagVisitor {
 background-color: #d3caff !important;
}
.flagSubject {
 background-color: #009eb8 !important;
}
.flagSchool {
 background-color: #013e51;
}
.flagRoom {
 
}
.flagNote {
 background-color: #cb9612; 
}
.flagYes {
 background-color: #029d00;
}
.flagNo {
 background-color: #9d0000;
}

.flag.active {
 background-color: #eeeeee;
 color: #013e51;
}

.flagOnDemand {
 background-color: #f64e00;
}
.flagSummer {
 background-color: #ff8f00;
}

.flagDue {
 background-color: #eba200;
}
.due {
 color: #eba200;
}
.flagPaid {
 background-color: #19a700;
}
.flagCancelled {
 background-color: #a70000;
}
.flagOverpaid {
 background-color: #000eba;
}

.oui {
 background-color: #2eb200;
}
.non {
 background-color: #b20000;
}

.bigFlag {
 font-size: 1.2em;
}

.counter {
 font-weight: normal;
 font-size: 0.9em;
 margin-left: 5px;
}

.border-bottom {
 border-bottom: 1px solid;
}


/* CALENDAR */

TABLE.calendar {
 border-spacing: 0;
}
TABLE.calendar TH,
TABLE.calendar TD {
 width: 150px;
}
TABLE.calendar TH {
 vertical-align: middle;
 padding: 20px 10px;
}
.dayNum {
 padding: 7px;
 border-radius: 17px;
}
TR.calendarBody TH,
TR.calendarBody TD {
 border-bottom: 2px solid #013e51;
 border-right: 2px solid #013e51;
}

.event {
 border-radius: 5px;
 padding: 5px 10px;
 min-width: 190px;
 max-width: 400px;
}
.headEvent {
 text-align: center;
 max-width: 100%;
}
.bodyEvent {
 text-align: center;
 margin-bottom: 1px;
}
.hours {
 text-align: center;
 margin: 2px 0 5px;
}
.eventSpoiler {
 height: 0px;
 transition: height, 0.5s;
 overflow: hidden;
}
.event:hover .eventSpoiler {
 height: 100px;
}


/* TAGS */

.tag {
 border-radius: 1px;
 padding: 2px 12px;
 font-variant: small-caps;
 line-height: 1.5em;
 color: #eeeeee;
 white-space: nowrap;
 background-color: #013e51;
}
A.tag, A.tag:visited {
 text-decoration:none;
 transition: color 0.5s, opacity 0.5s;
}
A.tag:hover, A.tag:active {
 opacity: 0.7;
}

.tagAlert {
 background-color: #cc0000;
}


/* DOTS */

.dot {
 display: inline-block;
 width: 10px;
 height: 10px;
 border-radius: 5px;
}


/* NOTES */

TABLE.notesList TD:first-of-type {
 white-space: nowrap;
}
TABLE.notesList TD {
 padding: 5px 7px;
}


/* HISTORY */

TABLE.historyList TD {
 padding: 5px 7px;
}


/* WAITING */

TABLE.waitingList TD {
 padding: 5px 7px;
}


/* INVOICES */

TABLE.invoicesList TD {
 padding: 5px 7px;
}


/* LESSONS */

A.declareLesson,
A.declareLesson:visited {
 margin: 10px;
 padding: 15px 30px;
 text-align: center;
 border-radius: 5px;
 text-decoration: none;
 font-weight: bold;
}
@media all and (min-width: 1024px) {
 A.declareLesson { display: inline; }
}
@media all and (max-width: 1023px) {
 A.declareLesson { display: block; }
}
.declareLesson.inactive {
 opacity: 0.3;
}

A.givenSquare,
A.givenSquare:visited {
 display: inline-block;
 box-sizing: border-box;
 width: 40px;
 height: 40px;
 margin: 0;
 padding: 10px;
 text-decoration: none;
 text-align: center;
}

.studentLessonPresent,
.profLessonPresent {
 background-color: #079c00;
}
.studentLessonAbsent {
 background-color: #9c0000;
}
.txtStudentLessonPresent,
.txtProfLessonPresent {
 color: #079c00;
}
.txtStudentLessonAbsent {
 color: #9c0000;
}
.studentLessonWorkshop {
 background-color: #00099c;
}
.profLessonAbsent {
 background-color: #e47d01;
}
.freeDay {
 background-color: #00a9c0;
}

TABLE.given TH {
 padding: 10px;
}
TABLE.given TH:first-of-type {
 font-weight: normal;
 white-space: nowrap;
}
TR.stickyRow {
 position: sticky;
 top: 0;
}

TABLE.abstract {
 outline: 1px solid #555555;
 margin: 0 auto;
}
TABLE.abstract TH,
TABLE.abstarct TD {
 padding: 8px 17px;
 text-align: left;
}

.happyMsg {
 background-color: rgba(255,144,34,0.5) !important;
 margin: 10px 0 !important;
 padding: 10px 23px !important;
}

IFRAME.showDoc {
 border: 0;
 width: 100%;
 height: 80vh;
}

TR.subCondens {
 font-style: italic;
}
TR.subCondens TD:first-child {
 padding-left: 15px !important;
}

TABLE.aResult {
 border: 1px solid #555555;
 margin: 27px 0;
 font-size: 0.8em;
}
TABLE.aResult TD {
 padding: 5px 7px;
}
TABLE.aResult TD:nth-child(2) {
 text-align: right;
}
TABLE.aResult TR:first-child {
 font-weight: bold;
}

.toReplace:link, .toReplace:visited {
 color: #f98400;
}
.isInWorkshop:link, .isInWorkshop:visited {
 color: #c2c2ff;
}

TABLE.trialsTable TH,
TABLE.regsTable TH {
 padding: 3px 9px;
}
TABLE.trialsTable TD,
TABLE.regsTable TD {
 padding: 5px 3px;
}

DIV.popup {
 position: absolute;
 z-index: 5;
 overflow: auto;
 border: 5px solid;
 border-radius: 15px;
 opacity: 0.95;
 padding: 10px 25px;
 text-align: center;
 font-size: 0.9em;
}
@media all and (min-width: 700px) {
 DIV.popup {
  width: 690px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -345px;
  margin-top: -200px;
 }
}
@media all and (max-width: 699px) {
 DIV.popup {
  width: 90vw;
  height: 50vh;
  top: 50px;
  left: 5vw;
 }
}
.popup FOOTER {
 font-size: 0.8em;
}

.isOpen1 {
 background-color: #3b9c3b;
}
.isOpen0 {
 background-color: #f54927;
}

.inputTitle {
 background-color: transparent;
 font-weight: bold;
}