* { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }

html { margin: 0 }

body { 
  background: #bbb;  
  font: normal 400 12px Roboto Regular; 
  margin: 0; padding: 0;
}

.hide { display: none; }

.m_on { display: none; }

page {
  background: #fff;
  display: block;
  position: relative;
  margin: 0 auto;
}

page:nth-of-type(2n) { background: #f9f9f9; }

page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
  padding: 9% 5% 5% 5%; 
}

page[size="A4"][layout="portrait"] {
  width: 21cm;
  height: 29.7cm;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

page[size="A4"][layout="landscape"] {
  width: 29.7cm;
  height: 21cm;
  padding: 0; 
  margin: 0 auto;
  box-sizing: border-box;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


page[size="A5"] {  
  width: 14.8cm;
  height: 21cm; 
  padding: 9% 5% 5% 5%; 
}

page[size="A5"][layout="portrait"] {
  width: 14.8cm;
  height: 21cm; 
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

page[size="A5"][layout="landscape"] {
  width: 21cm;
  height: 14.8cm;
  padding: 0; 
  margin: 0 auto;
  box-sizing: border-box;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}



/* ------------------------------------------------------------------- */

@media print {

/* 
@page { size: A4 landscape; margin: 0; }
@page { size: A4 portrait; margin: 0; }
*/

@page:first { }

page { page-break-after: always; }
page:last-child { page-break-after: auto; }
page:first-of-type { margin-top: -0.5cm !important; }

}


/* ------------------------------------------------------------------- */

.winner, .school,
.section, .place, .level, .age, 
.judges, .director { position: absolute; text-align: left; }


.winner, .school { width: 11cm; left: 10.3cm; }
.winner.portrait, .school.portrait { width: 9cm; left: 11.4cm; }

.winner {
  text-transform: uppercase;
  font: normal 400 min(26px, 400px) Roboto Black;
  top: 11cm;
}

.school {
  text-transform: uppercase;
  font: normal 400 min(22px, 400px) Roboto Regular;
  top: 10cm;
}

.winner.min { font-size: 26px; }
.winner.mid { font-size: 26px; }
.winner.max { font-size: 25px; top: 10.4cm; }

.school.min { top: 10.6cm; }
.school.mid { top: 9.93cm; }


.section, .age {
  font: normal 400 min(22px, 400px) Roboto Black;
}

.section.portrait { width: 8.2cm; top: 9.7cm; left: 11.4cm;}

.section.landscape { width: 6.2cm; top: 14cm; left: 8.1cm;}
.age { width: 6.2cm; top: 14cm; left: 15.5cm; }


.level {  
  font: normal 400 min(14px, 400px) Roboto Regular;
  width: 3cm; text-align: right;
  top: 13.8cm; left: 17.9cm; 
}

.place {  
  font: normal 400 min(50px, 400px) Roboto Black;
  width: 3cm; text-align: center;
  top: 8.7cm; left: 13.2cm; 
}


.judges, .director {
  font: normal 400 min(15px, 400px) Roboto Regular;
  width: 11cm; left: 16cm;
}

.judges { top: 16.5cm; }
.director { top: 17.9cm; }


.section.small { font-size: 22px; top: 9.7cm; }




page[size="All"] {  
  width: 21cm;
  height: auto; 
  padding: 5%; 
}

page[size="Full"] {  
  width: 21cm;
  padding: 2%; 
}

page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}

page[size="A3"][layout="portrait"] {
  width: 42cm;
  height: 29.7cm;  
}


.headline {
  font: normal 400 30px Roboto Bold;
  text-align: center;
  margin: 70px 0 20px 0;
}

.subtitle {
  font: normal 400 20px Roboto Light;
  text-align: center;
  margin: 30px 0 30px 0;
}

.note {
  display: flex;
  align-items: center; 
  justify-content: center; 
  font: normal 400 12px Roboto Regular;
  background: #fff9e6;
  padding: 5px;
  margin: 30px auto 30px auto;
}


.line {
  display: block;
  margin-bottom: 4px;
}

.list {
  display: block;
  margin-bottom: 4px;
}
.list:nth-of-type(2n) {   
  background: #f3f3f3; }
  
  
.item  { font-size: 22px; margin-bottom: 18px; }

  
th {
  font: normal 400 17px Roboto Bold;
  text-align: left;
  padding: 10px 4px 6px 12px;
}

tbody:after {
    content: "-";
    display: block;
    line-height: 10px;
    color: transparent;
}


tr {
  background: #ddd;
  font-size: 13px;
}

tr:nth-of-type(2n) {   
  background: #f9f9f9; }

td { color: #222; border-bottom: solid 2px #fff; }

td a:link { color: #000; text-decoration: none; }
td a:visited { color: var(--color3); text-decoration: line-through; }

td hr { height: 1px; border: 0; margin: 0 0 3px 0; }

td.number { font-size: 18px; font-weight: 900; }
td.hour { font-size: 18px; font-weight: 500; }
tr.section { background: #F9F399; padding: 30px 0 30px 0; }
td.dance { font-size: 15px; font-weight: 500; }
td.school { font-size: 14px; font-weight: 700; }

  

.frame {
  background: #eee;
}


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

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }



/*  SCHEDULER */

table.scheduler {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 40px;
  box-sizing: content-box;
  border-collapse: collapse;
}


thead tr td {  background: var(--color1); color: var(--initial); }

thead.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
}

thead th.red, tfoot td.red { background: var(--color3); }


tr {
  display: table-row;
  background: #e7e7e7;
  border: solid 1px #fff;
  cursor: pointer;
}

tr:hover { background: #ddd; }

td .dot {
  position: relative;
  display: inline-block;
  min-width: 30px;
  font: normal 400 10px Roboto Light;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  vertical-align: middle;
  padding: 2px 4px 1px 4px;
  margin-right: 3px;
}

td span.dot b { font: normal 400 10px Roboto Black; color: #fff; }

td .dot.red { background: #e21d35; }
td .dot.pink { background: #ff4da6; }
td .dot.indigo { background: #990099; }
td .dot.violet { background: #4d0594; }
td .dot.blue { background: #4d6dcb; }
td .dot.ciel { background: #08a8dd; }
td .dot.teal { background: #009999; }
td .dot.green { background: #19b319; }
td .dot.lime { background: #99cc00; }
td .dot.yellow { background: #cccc00; }
td .dot.orange { background: #df8020; }
td .dot.dark { background: #777; }
td .dot.gray { background: #d1d1d1; color: #111; }


td.title {
  vertical-align: middle;
  padding: 10px 8px 8px 8px;
}

td.title b { font: normal 400 18px Roboto Black; }
td.title b.min { font: normal 400 13px Roboto Bold; }

td span {
  font: normal 400 12px Roboto Light;
  text-transform: lowercase;
}

td span.name {
  font: normal 400 13px Roboto Regular;
  text-transform: none;
}


td.entry {
  border: solid 1px #fff;
  background: #ddd;
  vertical-align: middle;
  padding: 15px 10px 10px 10px;
}

td.huge { font: normal 400 23px Roboto Black; }
td.max { font: normal 400 17px Roboto Black; }
td.med { font: normal 400 20px Roboto Regular; }
td.min { font: normal 400 11px Roboto Regular; line-height: 22px; }

td i { font-size: 11px; }
td i.good { color: #36BB45; }
td i.bad { color: #e21d35; }

td.entry.none a { color: #222; }
td.gala, td.gala a { background: #f7b355 !important; color: var(--color1) !important; }
td.break, td.break a { background: var(--color3) !important; color: #fff !important; }

td.entry.red, td.entry.red a { background: var(--color1); color: #fff; }
td.entry.black, td.entry.black a { background: #000; color: #ddd; }
td.entry.white, td.entry.white a { background: #eee; color: #000 !important; }
td.entry.yellow, td.entry.yellow a { background: #f7b355; color: #000 !important; }
td.entry.accent, td.entry.accent a { background: var(--color1); color: #fff; }


td.title a { width: 100%; min-height: 100px; }

td.type {
  background: #ddd;
  vertical-align: middle;
  padding: 0 6px 0 12px;
}

td.type b { font: normal 400 18px Roboto Bold; }
td.type.r { text-align: right; padding-right: 20px; }


.bigtitle, .bigsubtitle {
  text-transform: uppercase;
  font: normal 400 min(4vw, 400px) Roboto Black;
  text-align: center;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.bigsubtitle {
  font: normal 400 min(3vw, 180px) Roboto Light;
  letter-spacing: 0.25vw;  top: 50%;
}


@media (pointer:none), (pointer:coarse) { 

.d_on { display: none; }
.m_on { display: block; }


.schedules { 
  flex-direction: column !important; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  touch-action: pan-x; 
  overscroll-behavior-x: contain; 
  scrollbar-gutter: stable both-edges;
}

.schedules .scheduler { width: max-content; flex: none; table-layout: fixed; }

table.scheduler { display: table; white-space: normal; overflow: visible; }
td.huge { font: normal 400 28px Roboto Bold; width: 16%; }
td.huge.s { width: 8%; }
thead.sticky { position: relative; top: 0;}

td.title { font: normal 400 26px Roboto Regular; }
td.title b { font: normal 400 30px Roboto Bold; }
td.title b.min { font: normal 400 26px Roboto Medium; }

td .dot { font: normal 400 20px Roboto Light; }
td span.dot b { font: normal 400 21px Roboto Black;  }
td.entry { font: normal 400 35px Roboto Regular; }
 }




@media print {
  thead { display: table-row-group }
.bigtitle, .bigsubtitle { font-size:  min(5vw, 400px); }

}

@media (pointer:none), (pointer:coarse) { }