/* CSS Document */

:root {
  --hover_colour: #20b2aa;
  --hover_text: #000000;
}

.school_hub #main-content {
  width: calc(100vw - 260px);
}
.school_hub #main-content.collapsed {
  width: calc(100vw - 64px);
}
.school_hub #main-content.teacher,
.school_hub #main-content.collapsed.teacher
 {
  width: 100%;
  margin-left: 2rem;
  margin-right: 2rem;
}
.sidebar.teacher {
  display: none;
}

.sidebar {
  min-height: calc(100vh - var(--header_height));
  border-right: 1px solid #e5e5e5;
  -webkit-transition: width 0.25s ease;
  transition: width 0.25s ease;
    width: 260px;
}
.sidebar .link-text{
  opacity: 1;
  -webkit-transition: opacity 0.1s ease 0.25s;
  transition: opacity 0.1s ease 0.25s; 
  white-space: nowrap;
  font-size: 16px;
  color: black;
}
.school_hub .nav-item {
  cursor: pointer;
}
.school_hub .nav-item i {
  color: #46aaff;
}
.sidebar.collapsed {
  width: 64px; 
  padding: 0.3rem;
}
.sidebar.collapsed .link-text{
  opacity: 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s; 
  pointer-events: none; 
  width: 0;
  overflow: hidden;     
}
.sidebar.collapsed .nav-link {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sidebar-nav .nav-link {
  padding: 0.75rem 1rem
}
#sidebarexpand {
 display: none;
}
.collapsed #sidebarexpand {
 display: block;
}
#sidebarcollapse {
display: block;
}
.collapsed #sidebarcollapse {
display: none;
}
.sidebar-toggle {
  margin: 0.5rem auto;
}

.schools_form_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.school_location {
    color: #20b2aa;
    font-size: 1rem;
    font-weight: bold;
    text-align: start;
    margin: 0;
}
/* Full-screen overlay */
#school-loading-screen{
  position: fixed;
  inset: 0;              /* top/right/bottom/left: 0 */
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,.8);
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  margin: 0;
}

/* the inner wrapper doesn't need layout styling anymore */
#school-loading-screen .loading{
  background: none !important;
  margin: 0 !important;
  text-align: center;
}

/* optional: size the spinner if you want */
#school-loading-screen .progress-spinner{
  width: 64px;
  height: 64px;
}
.import_summary_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}
.import_summary_col {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
  overflow: hidden;
}
.import_summary_col .outline-box {
    padding: 10px 2px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid var(--light);
    color: #000000;
    text-align: center;
}
.import_summary_table {
  white-space: nowrap; 
  font-size: 0.8rem;
  overflow-x: auto;
}
tr.old_data_row td {
  background-color: #e5e5e5;
  color: #545353;
  font-size: 0.8rem;
}
.preview_values p {
  margin: 0;
  text-align: start;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.filter_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      width: 100%;
      gap: 2rem;
}
.filter_block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 0.5rem;
}


/* =======================================================
   Components
   ======================================================= */
.outline-header-clear {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--lighter);
    border: 2px solid var(--light);
    border-bottom: none;
    --bs-heading-color: var(--contrast);
    font-size: 1rem;
    padding: 5px;
    width: 100%;
    min-width: 100%;
    margin: 0;
    color: var(--contrast);
}
.form_layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  gap: 0.5rem;
  font-size: 0.9rem;
}
.form_layout p {
  text-align: start;
  font-weight: bold;
}

.formlabel {
  min-width: 50px;
  max-width: 50px;
}
.pls_complete {
  border-color: #dc143c;
}
.import_actions{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
          gap:.5rem;
  position:relative;
  text-align: end;
  min-width: 150px;
  max-width: 150px;
}
/* --- Badge hides when user is interacting with buttons --- */
.import_actions:has(.preview-action-button:hover) .import_badges{
  display:none;
}

/* Fallback if :has isn't supported in a browser you care about:
   hide badge when hovering anywhere in the cell */
@supports not selector(.x:has(.y)) {
  .import_actions:hover .import_badges{
    display:none;
  }
}
.import_preview_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
  gap: .5rem;
}
.import_input {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;  
}
select.form-control.import_input {
  padding: 0.2rem 0.625rem;
  font-size: 0.85rem;
  line-height: 1.1;
}
.td-clip{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.students-table {
  table-layout: fixed;
  width: 100%;
  cursor: default;
}

/* make sure truncation works inside flex children */
.td-clip, .td-clip * { min-width: 0; }

.import-table {
  table-layout: fixed;
  width: 100%;
  cursor: default;
}
.import-table .c-rownum { 
  width: 3.7%; 
  text-align: center; 
  white-space: nowrap;
  }
.import-table .c-email { 
  width: calc(47% - 140px);
  }
.import-table .c-email span { 
  overflow-x: auto;
  white-space: nowrap;
  }

.import-table::-webkit-scrollbar {
  height: 6px;
} 
.import-table .c-first { 
  width: 14%; 
  }
.import-table .c-last  { 
  width: 18%;   
  }
.import-table .c-year  { 
  width: 5.3%;
  }
.import-table .c-group { 
  width: 11.1%;
  }
.import-table .c-action { 
  width: -webkit-fit-content; 
  width: -moz-fit-content; 
  width: fit-content; 
  } 

.tt_section_header {
    height: 2rem;
    background-color: #40e0d0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
            border: 1px solid darkgrey;
}
.tt_section_header.clear {
    background-color: transparent;
    border: 1px solid transparent
}
.tt_section_header.mobile {
    font-size: 14px;
    height: 2.5rem;
    text-align: start;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
}
.tt.section_body {

  margin-bottom: 1rem;
}
p.tt_label {
   text-transform: uppercase;
   font-family: inherit;
   font-size: 14px;
   font-weight: bold;
   margin: 0;
   padding: 3px 2px;
   text-wrap: pretty;
}
p.tt_title {
   font-family: inherit;
   font-size: 10px;
   font-weight: normal;
   margin: 0;
   padding: 3px 2px;
}
p.tt_title.mobile {
   font-family: inherit;
   font-size: 9px;
   font-weight: normal;
   margin: 0;
   padding: 3px 2px;
}
.tt_mob_day_label {
  border-left: 1px solid darkgray;
  border-right: 1px solid darkgray;
}
.section_a.tt_blocked,
.section_b.tt_blocked {
position: relative;
}
.tt_blocked {
    background-image: repeating-linear-gradient(
    45deg,
    #efeeee,
    #efeeee 1px,
    transparent 3px,
    transparent 10px
  );
}
.tt_mob_blocked {
    background-image: repeating-linear-gradient(
    45deg,
    #e9e9e9,
    #e9e9e9 1px,
    transparent 3px,
    transparent 10px
  );
}
.halfterm .section_a,
.halfterm .section_b
 {
  display: none;
}
.section_a.tt,
.section_b.tt {
    min-height: 5rem;
}
.mini-am-row .section_a.tt{
    min-height: 1.5rem;
}
.mini-pm-row .section_b.tt{
    min-height: 1.5rem;
}
.mini-am-row.mini-pm-row .section_b.tt{
    display: none;
}
.tt_day_col .section_a.tt,
.tt_day_col .section_b.tt {
    min-height: 6rem;
}
.mini-am-row .tt_day_col .section_a.tt{
    min-height: 2rem;
}
.mini-pm-row .tt_day_col .section_b.tt{
    min-height: 2rem;
}
.section_a.tt_blocked::before {
    content: "AM";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.7);
    color: #797979;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}
.section_b.tt_blocked::before {
    content: "PM";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.7);
    color: #797979;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}
.mini-am-row.mini-pm-row .section_a.tt_blocked::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.7);
    color: #797979;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}
.halfterm_message {
  text-align: center;
  border-bottom: 1px solid darkgray;
  border-left: 1px solid darkgray;
  border-right: 1px solid darkgray;
}
.halfterm_message h1{
  margin-bottom: 0.5rem;
  margin-top: 0;
  padding-top: 0.5rem;
  color: #6b6b6b;
}
.halfterm_message.tt {
  text-align: center;
  width: 725px;
  border-bottom: 1px solid darkgray;
  border-left: 1px solid darkgray;
  border-right: 1px solid darkgray;
}
.tt.section_header.mobile {
    font-size: 14px;
    height: 2rem;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.tt.section_a.mobile,
.tt.section_b.mobile {
    min-height: 4rem;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
p.tt.date_nav_sm {
    font-size: 12px;
    margin-top: 0.5rem;
    margin-bottom: 0;
    line-height: 1;
}
p.tt.date_nav_lg {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    line-height: 1;
}
.tt_day_col {
    min-width: 145px;
    max-width: 145px;
}

.form-control.autofill-hidden {
  position:absolute !important;
  left:-9999px !important;
  top:0 !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* =======================================================
   Buttons
   ======================================================= */
.button:hover {
  background-color: var(--hover_color);
  color: var(--hover_text);
}
.button.slim {
  font-size: 0.85rem;
  padding: 0.25rem 1rem;
  margin: 0.1rem;
  white-space: nowrap; 
}
.button.slim i {
  font-size: 1rem;
}
.button.mini {
  font-size: 0.85rem;
  padding: 0.1rem 0.25rem;
  margin: 0.1rem auto;
  white-space: nowrap;
  border-radius: 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
          box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.button.mini i {
  font-size: 1rem;
  line-height: 1;
}
.button.mini .text {
  font-size: 0.8rem;
  line-height: 1;
}
.button.mini.disabled {
  border: none;
}

.form_layout .button {
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
          box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.actiontab {
    padding: 0.25rem 0.75rem;
    border-radius: 5px;
  cursor: pointer;
  margin: 0.2rem;
  white-space: nowrap;
  color: #46aaff;
  border:2px outset #999999;
  font-weight: normal;
  background-color: #FFFFFF;
 font-size: calc(0.7*(15px + 0.390625vw));
}
.actiontab.selected {
background-color: #46aaff;
color: #000000;
border: 2px inset #46aaff;
}
.preview-action-button .text{
  display:none;
  margin-left:.3rem;
  margin-right: 0.2rem;
  letter-spacing: normal;
  text-decoration: none;
    white-space: nowrap;
    font-weight: bold;
    text-transform: uppercase;
  z-index:10; 
}
.preview-action-button{
  position:relative;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  padding: .1rem .25rem;
}
.preview-action-button:hover .text{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
}
span.import_badges {
  min-width: 90px;
  max-width: 100px;
}
.import_actions .badge {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.import_actions span.badge {
    vertical-align: middle;
}
.import_actions .badge .badge-span {
    vertical-align: middle;
    line-height: 1.25em;
}

.import_actions .badge i {
  margin-left: auto;
  font-size: 0.9rem;
}

.tt.has_an_exam {
  background: hsl(160, 95%, 93%);
}



/* =======================================================
   Colours
   ======================================================= */


/*BUTTON COLOURS*/
.std {
background-color: #40e0d0;
--hover_color: #1a8f89;
color: #000000;
--hover-text: #ffffff;
}
.contrast {
background-color: #20b2aa;
--hover_color: #67faeb;
color: #000000;
--hover-text: #000000;
}
.cta {
background-color: #000000;
--hover_color: #20b2aa;
color: #FFFFFF;
--hover-text: #000000;
}
.light {
background-color: #FFFFFF;
--hover_color: #40e0d0;
color: #000000;
--hover-text: #000000;
}
.school-outline {
  border: 1px solid #46aaff;
  background-color: #ffffff;
  --hover_color: #46aaff;
  color: #000000;
  --hover-text: #ffffff;
}
.school-outline-contrast {
  border: 1px dashed #46aaff;
  background-color: #a8d1fc;
  --hover_color: #46aaff;
  color: #000000;
  --hover-text: #ffffff;
}
.school {
  border: 1px solid #46aaff;
  background-color: #46aaff;
  --hover_color: #002896;
  color: #000000;
  --hover_text: #ffffff;
}
.school-delete {
  background-color: #d50811;
  --hover_color: #ff6d6f;
  color: #ffffff;
  --hover_text: #000000;
}
.import-skip {
  background-color: #ffffff;
  --hover_color: #d50811;
  color: #d50811;
  --hover_text: #ffffff;
  border: 1px solid #d50811;
}
.import-save {
  background-color: #ffffff;
  --hover_color: #00a651;
  color: #00a651;
  --hover_text: #ffffff;
  border: 1px solid #00a651;
}
.skip_color {
  background-color: #d4d4d4;
  color: #4c4c4c;
}
.update_color {
  background-color: #a8d1fc;
  color: #000000;
}



/* =======================================================
   Flex shortcuts
   ======================================================= */

.flex_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.between-center {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


/* =======================================================
   DIVIDERS
   ======================================================= */
.border-horizontal {
    border: 4px solid transparent;
    border-image-source: url('/assets/images/dividers/horizontal-line.svg');
    border-image-slice: 0 0 20 0;  /* Adjust based on the SVG dimensions */
}
.border-horizontal-top {
    border: 4px solid transparent;
    border-image-source: url('/assets/images/dividers/horizontal_line.svg');
    border-image-slice: 20 0 0 0;  /* Adjust based on the SVG dimensions */
}
.border-vertical-left {
    border: 4px solid transparent;
    border-image-source: url('/assets/images/dividers/horizontal_line.svg');
    border-image-slice: 0 20 0 0;  /* Adjust based on the SVG dimensions */
}
.border-vertical-right {
    border: 4px solid transparent;
    border-image-source: url('/assets/images/dividers/horizontal_line.svg');
    border-image-slice: 0 0 0 20;  /* Adjust based on the SVG dimensions */
}
.border-full {
    border: 4px solid transparent;
    border-image-source: url('/assets/images/dividers/border_lines.svg');
    border-image-slice: 20 20 20 20;  /* Adjust based on the SVG dimensions */
}

/* =======================================================
   MEDIA QUERIES
   ======================================================= */

@media (max-width: 768px) {
.sidebar {
  position: fixed;
  top: var(--header_height);
  left: 0;
  width: 260px;
  height: calc(100vh - var(--header_height));
  background: #fff;
  z-index: 1050;
  -webkit-box-shadow: 2px 0 10px rgba(0,0,0,0.2);
          box-shadow: 2px 0 10px rgba(0,0,0,0.2);
}
.sidebar-backdrop {
  position: fixed;
  top: var(--header_height);
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--header_height));
  background: rgba(0,0,0,0.35);
  z-index: 1040;
}
.sidebar.collapsed {
  width: 40px; 
}
.sidebar-nav .nav-link {
  padding: 0.75rem 1rem 0.75rem 0.3rem;
}
#main-content {
  max-width: calc(100vw - 40px);
  margin-left: auto;
}
#main-content.teacher {
  max-width: 100%;
  margin-left: 2rem;
  margin-right: 2rem;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
.import-table {
  table-layout: auto;
  width: 958px;
}

}

@media (max-width: 534px) {
  .formlabel {
  min-width: 42px;
  max-width: 42px;
}
.import-table {
  table-layout: auto;
  width: 768px;
}
}

@media print {
  .month-page {
    -webkit-column-break-after: page;
       -moz-column-break-after: page;
            break-after: page;
    page-break-after: always;
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
    page-break-inside: avoid;
    display: block !important;
  }
  .month-page:last-child {
    -webkit-column-break-after: auto;
       -moz-column-break-after: auto;
            break-after: auto;
    page-break-after: auto;
  }
  #pdf-preview-tt {
    width: 794px !important;
  }
}