:root {
  /*COLORS*/
    --primary-color: rgb(0, 0, 0);
    --secondary-color: #b42626;
    --tertiary-color: #ece3e3;
    --icu-green:#053c39cc;
    --icu-green-light:#053c394d;
    --background-color: rgba(123, 166, 149, 0.235);
    --card-color: white ;
    --main-background-color: #a0b8ba26;
    --top-bar-color: #ffffff;
    --dark-red: #840c0c;
    --bottom-bar-color: #113c4d;
    --black: rgb(0, 0, 0);
    --sidebar-bg: #fefefe;
    --button-color: #006064;
    --dark-blue: #1B3B5A;
    --light-green:rgba(237, 241, 241, 1); 
  /*SIZES*/
    --navheight: 68px;
  }

    html {
        scroll-padding-top: 100px;
        scroll-behavior: smooth;
    }

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}



body {  
    background-color:var(--main-background-color);
    text-align: center;
    font-size: 16px; /* Set a base font size to be used by other relative units */
    
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

    @media screen and (max-width: 800px) and (orientation: landscape) {
      --navheight: 60px;
    }    
  }

.lesser_detail {
  @media screen and (max-width: 550px) {
    display: none;
  }
}

/* LAYOUT */
  .topbar {    
    background-color: var(--top-bar-color);
    height: var(--navheight);
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100%;    
    z-index: 1000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 15px;
    gap:10px;
    box-shadow: 0 0 4px #2f312521;
    div {min-width: 0;}


    .logged-out-desktop {
      min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap:10px;
        @media screen and (max-width: 400px) {
          display: none;
        }
    }
    .logged-out-mobile {
      display: none;
      svg {
        fill: rgb(77, 77, 77);
      }
      @media screen and (max-width: 400px) {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
        gap:5px;
        width: 100%;
      }
    }
  }

  .topbarspace {
    height: var(--navheight);
  }
  .side-space {
    margin-left: var(--navheight) !important;
    @media screen and (max-width: 800px) { 
      margin-left: 0px !important;
      
    }
    
  }

  .topbar-controls {
    height: var(--navheight);
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    padding: 2px;
    gap:5px;
  }

  .menu-toggle {
    height: 100%;
    aspect-ratio: 1/2;
    background-color:transparent;
    border: none;
    color:black;
    justify-content: left;

  }

  .menu-toggle:hover {
    cursor: pointer;
  }

  .topbar .logo {
    font-size: 1.8em;
    color:var(--bar-text)
  }

  .topbar-profile {
    height: var(--navheight);
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    padding: 5px;
    gap:10px;
  }

  .topbar-profile img {
    width:40px; 
    height:40px; 
    border-radius:50%;
  }


  .topbar_menu_close {
    position: absolute;
    right:0px;
    height: calc(100% - var(--navheight)*2);
    display:none;
    flex-direction: row;
    align-items:center;
    justify-content: center;
    text-align: left;
    background-color: transparent;
    width: 1.5em;
    color: #888383;
  }

  .topbar_menu {
    display: grid;
    grid-template-columns: 1fr;
    background-color:rgba(230, 230, 230, 0.521);
    transition: all 0.3s ease;
    position: fixed;
    top:150px;
    z-index: 150;
    height: auto;
    font-size: 14px;
    width:var(--navheight);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    .side-menu-text {
      width:0px;
      overflow: hidden;
      display: inline-block;
      text-align: left;
    }
    
    @media screen and (max-width: 1000px) { 
      display:none;
    }    
  }
  .topbar_menu:not(.show) {
    .when-showed {display:none}
  }

  .topbar_menu.show {
    display: grid;
    grid-template-columns: 1fr;
    box-shadow: 0 0 20px #2f3125;
    width: 200px;
    background-color:var(--sidebar-bg);
    top:var(--navheight);
    border-top-right-radius: 0px;
    height: 100%;
    .side-menu-text {
      width:auto;
      word-wrap: none;
    }
    .topbar_menu_close {
      display: flex;
    }

  }


  .topbar_menu_close:hover {
    background-color: #20202010;
    color: #2c2a2a;
    cursor: pointer;
  }


  .topbar_menu > div {
    overflow: hidden;       
  }

  .topbar_menu ul {
    width:200px;
    padding-inline: 1em;
    text-align: justify;
    list-style-type:none;     
  }

  .topbar_menu li {
    height:3em;
    border-radius: 10px;
    padding:5px;

    a, button {
      display:flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      gap:10px;
    }

  }


  .topbar_menu li:hover svg {
    background-color: rgba(46, 46, 46, 0.096);
    cursor: pointer;
    border-radius: 5px;
    transform: scale(1.3);
    padding: 3px;

  }

   .topbar_menu:not(.show) .menu-option[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    font-size:0.9rem;
    font-weight: 500;
    background-color: #202020;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 5px;
    white-space: nowrap;
    font-family:Arial, Helvetica, sans-serif;
    transition-duration: 200ms;
    opacity: 0.7;
    visibility: visible;
    z-index: 200;
    transform: translateX(50px);
    parent:has('.show') { 
      opacity: 0;
      visibility: hidden;
    }
  }

  .topbar_menu .menu-option {
    color:var(--button-color);
  

  }

   .topbar_menu .menu-option svg {
    fill:var(--button-color);
   }

  .topbar_menu .menu-option.active svg {
    background-color: var(--light-green);
    border-radius: 5px;
    transform: scale(1.3);
    padding: 3px;
  }
  .superuser {
    margin-inline: 20px;
      
      li {height: 20px;}
  }
    .superuser .menu-option {
    color:var(--primary-color);
    font-size: 0.9em;

  }


   .superuser .menu-option svg {
    fill:var(--primary-color);
    height: 18px;
    width: 18px;
   }

  .superuser .menu-option.active svg {
    background-color: var(--tertiary-color);
    border-radius: 5px;
    transform: scale(1.3);
    padding: 3px;
  }
  .menu-option.special-access {
    color:var(--dark-red);
    > svg {fill:var(--dark-red);}
    
  }

  .footbar {
    display: none;
    box-sizing: border-box;
    @media screen and (max-width: 800px) {    
      background-color: var(--bottom-bar-color);
      height: var(--navheight);
      position: fixed;
      bottom: 0;
      width: 100%; 
      max-width: 100%;   
      z-index: 1000;
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: 1fr 1fr 1fr 1fr; 
      padding-inline: 10px; 
      padding-block: 5px;
      box-shadow:0 -4px 12px rgba(0,0,0,0.25);
    }
    a {
      height:100%;    
    }

    button {
      width: 100%;
      height: 100%;
      background-color:transparent;
      border: none;
      opacity:0.9;
      border-radius: 14px;
      transition-duration: 200ms;
    }
    button:focus {
      border-bottom: solid 2px rgba(255, 255, 255, 0.579)
    }
    button.footbar-selected {
      background-color: rgba(255, 255, 255, 0.12);
      
      opacity: 1;
    }
  }
  
  .footbarspace {
    height: 0;
    @media screen and (max-width: 800px) { 
      height: var(--navheight);
    }
  }
  


  
  .footbar button > div {  
    color: #ddd;  
    display: grid;
    grid-template-rows: 2fr 1fr;
    gap:0px;
    align-items: center; 
    color:#ffffff;
    
    img {
      margin:auto;
    }
    svg {
      margin:auto;}
  }
  
  .footbar-button-text {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 0.9em;
    line-height: 0.9em;
    margin-top: 0px;
    font-weight: 500;
    opacity: 0.75;
  }
  
  .footbar button:hover {
    background-color:rgba(0, 0, 0, 0.345);
    cursor: pointer;  
  }

  .new_log_entry {
  position: fixed; /* Fixed position relative to the viewport */
  bottom: 80px;   /* 20 pixels from the bottom */
  right: 20px;    /* 20 pixels from the right */
  z-index: 1000;  /* Ensure it's above other items */
}

.new_log_button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: black;  
  border-radius: 10px;
  margin: auto;
  width: 55px;
  height: 55px;
  font-size: 1em;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 4px 2px rgba(1, 1, 1, 0.438);
}

.new_log_button:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.2);
}

  .page-title {
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: -1px;
    font-size: 24px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

  }
  
  .logo {    
    color: var(--primary-color);
    font-weight: 650;
    letter-spacing: -2px;
    width: 100px;
    position: relative;

    

    .logo-ed {
      color: var(--secondary-color);

    }
    .logo-x {
      font-size: 1em;
      margin:2px;
      scale : 1.2;
    }

    .logo-x-construct {
      font-size: 1em;
      margin-left:5px;
      scale : 1.2;
      color: rgb(0, 0, 0);
      transition-duration: 800ms;
    }

    .logo-x-construct {
      position: relative;
      font-size: 0.7em;
      
    }

    .logo-x-construct::before {
      content: '';
      position: absolute;
      top: 50%;
      right: -50%;
      width: 10px;
      height: 2px;
      background-color: rgb(0, 0, 0);
      transition-duration: 800ms;
    }
  }

  .logo:hover > .logo-x-construct {
    color: rgb(0, 0, 0);
    transform: scale(1.5);
    margin-left:12px;
  }

  .logo.centered {
    margin: auto;
    margin-block: 20px;
    width:300px;
  }

  .logo:hover > .logo-x-construct::before {    
    width: 22px;
  }

  .user_name {
    font-size: 1.2em;
    color: rgb(0, 0, 0);
    font-weight: 600;
    letter-spacing: -1px;
  }

    .profile_picture {
    object-fit: cover;
    border-radius:50%;
    aspect-ratio: 1/1;
    width:100%;
    max-width: 100%;
  }

  .staff_profile_image_container {
    position: relative;
    aspect-ratio: 1/1;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    flex-grow: 0;
  }



/* FRAMEWORK *//* FRAMEWORK *//* FRAMEWORK *//* FRAMEWORK *//* FRAMEWORK *//* FRAMEWORK */
/* REUSABLE FLEX */
    .flex {
        display:flex;
        gap:5px;
    }
    .flex-v {
        display:flex;
        gap:5px;
        flex-direction: column;
    }
    .centered {
        align-items: center;
        justify-content: center;
    }
    .flex.center-top {
        align-items: flex-start;
        justify-content: center;
    }
    .flex-v.center-top {
        align-items: center;
        justify-content: flex-start;
    }
    .wrap {
      flex-wrap: wrap;
    }
    .flex.responsive {
      @media screen and (max-width: 550px) { 
      flex-direction: column;
      }
    }

/* REUSABLE GRID */
    .grid {
      display:grid;
      gap:5px;
    }
        .grid.col-1-1 {
      grid-template-columns: 1fr 1fr;
    }
    .grid.col-2-1 {
      grid-template-columns: 2fr 1fr;
    }
    .grid.col-1-2 {
      grid-template-columns: 1fr 2fr;
    }
    .grid.row-2-1 {
      grid-template-rows: 2fr 1fr;
    }
    .grid.row-1-2 {
      grid-template-rows: 1fr 2fr;
    }
    .grid.row-1-1-1 {
      grid-template-rows: 1fr 1fr 1fr;
    }
    .grid.auto-fit {
      grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    }


  .masonry {
      column-count: 3;
    column-gap: 1rem;
    > div {
          break-inside: avoid;
          margin-bottom: 1rem;
    }

  }

    .banner {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 10px;
      overflow: hidden;
      width: 100%;  
    }

    .banner img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      object-position:center;
    }

    .banner p {
      position: absolute;
      color: white;
      font-size: 24px;
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
      background-color: #202020a0;
      border-radius: 10px;
      padding: 10px;
      max-width: 90%;
    }

    /* POSTER *//* POSTER *//* POSTER *//* POSTER *//* POSTER *//* POSTER */
  .poster {
    position: relative;
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: end;
    overflow: hidden;
  }
  .poster-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;

  }

  .poster .meta{
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:60px 20px;
        background:linear-gradient(to top,rgba(0,0,0,0.8), rgba(0,0,0,0));
        z-index: 1;
    }
    .poster .poster-text {
        position:relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: end;
        z-index: 2;
        padding: 25px;
        gap:5px;
    }
    .poster .poster-subtitle {
        background-color: var(--course-colour2,var(--light-green,white));
        color: var(--course-colour1,var(--button-color,black));
    }
    .poster .poster-title {
        font-size: 30px;
        color: white;
        font-weight: 650;
        text-align: left;
    }
    .poster.poster-small  {
      max-height: 100%;
      height: auto;
      .poster-text {
        padding: 10px;
        gap:3px;
      }
      .poster-subtitle {
        background-color: var(--light-green);
        color: var(--button-color);
        font-size: 10px;
      }
      .poster-title {
        font-size: 16px;
        line-height: 0.9;
      }
      .meta {
        padding: 30px 10px;
      }
    }
/* CONTAINERS */
    .container {
      padding:15px;
      position: relative;
    }
    .container.responsive {
      @media screen and (max-width:550px) {
        padding: 10px 3px;
        width: 100%;
        
      }
    }

    .card {
      padding:10px;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.234);
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    .profile-card-sm {
      width: 190px;
      height: 70px;
      display: grid;
      position: relative;
      grid-template-columns: 50px auto;
      padding:5px;
      font-size: 14px;
      .coffee-icon {
        width: 20px;
      }
    }
    .card-responsive-1 {
      width:150px;
      height: 180px;
      display: grid;
      grid-template-rows: 2fr 1fr;
       @media screen and (max-width: 550px) {
        width: 100%;
        height: 70px;
        grid-template-columns: 140px auto;
        grid-template-rows: 1fr;
      }
    }
    .menu-container {
      display: flex;
      flex-direction: column;
      gap:5px;
      background-color: var(--light-green);
      border-radius: 10px;
      text-align: left;
      width:35ch;
      font-size: 14px;
      flex-shrink: 0;
      flex-grow: 0;
      position:sticky;
      top:100px;
      max-height: 80vh;
      overflow-y: auto;
      z-index: 10;
      padding: 5px;
      
      hr {
        height: 1px;
        border: none;
        width: 80%;
        margin-inline: auto;
        margin-block: 5px;
        background-color: var(--button-color);
        opacity: 0.7;
      }
      @media screen and (max-width: 550px) {
        width: 100%;
        max-height: 300px;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        border-radius: 0;
        border-bottom: 1px grey solid;
        gap: 15px;
        align-items: flex-start;
        .menu-item::after {
          content: '';
          display: block;
          width: 100%;
          height: 1px;
          background-color: var(--button-color);
          opacity: 0.2;
          margin-top: 2px;
        }
        .profile_header {
          width:100%;
          position:sticky;
          top:0;
          background-color: var(--light-green);
        
        }
        .flex-v {          
          overflow-y: scroll;
        padding:2px;
        }              
      }
    }
        .max-500 {
      max-width: 500px;
      margin: auto;
        }
    .max-800 {
      max-width: 800px;
      margin: auto;
      @media screen and (max-width: 550px) {
      flex-direction: column;
      padding-inline: 10px;
      }
    }
    .max-1000 {
      max-width: 1000px;
      margin: auto;
      @media screen and (max-width: 550px) {
      flex-direction: column;
      padding-inline: 10px;
      }
    }
    .max-1200 {
      max-width: 1400px;
      margin: auto;
      padding-inline: 90px;
      @media screen and (max-width: 1000px) {
        margin: auto;
      }
      @media screen and (max-width: 550px) {
        width:100%;
      margin: auto;
      flex-direction: column;
      }
    }
    .max-800.col-2-1 {
      @media screen and (max-width: 550px) {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 1fr;
      }
    }



/* BUTTONS */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background-color: var(--button-color);
  color:white;
  border-radius: 20px;
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  padding-inline: clamp(5px, 2vw, 15px);
  padding-block: clamp(3px, 1.5vw, 10px);
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.btn-green {
  background-color: rgba(0, 128, 0, 0.534);
}

.btn-red {
  background-color: rgba(212, 18, 18, 0.678);
}

.btn-blue {
  background-color: rgba(18, 31, 212, 0.637);
}

.btn-grey {
  background-color: rgba(128, 128, 128, 0.534);
  color: black;
  border: none;
}
.btn-light {
  background-color: var(--light-green);
  color:var(--button-color);
}
.btn-dark {
  background-color: var(--button-color);
  color:white;
}

.btn-clear {
  background-color: transparent;
  padding:1px;
}

.btn-word {
  background-color: transparent;
  color:var(--button-color);
  text-transform: capitalize;
  padding:1px;
}
.btn-cancel {
  background-color: rgba(255, 0, 0, 0.084);
  color:var(--dark-red);
}

.btn:hover {
  cursor: pointer;
  opacity: 0.8;
}

.btn:active {
  cursor: pointer;
  border-style: inset;
}

.btn:focus {
  border: outset 2px var(--icu-green-light);
}
.btn:disabled {
  filter: grayscale(100%);
  opacity: 0.7;
}
.btn:disabled:hover {
  cursor: none;
}

.clear-button {

  background-color: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  padding: 2px;
  color:#373833;
  transition: all 0.8s ease;
  position: relative;
  border-radius: 5px;
  
}

.clear-button.withtext {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5px;
}

.clear-button.withtextbelow {
  display: flex;
  flex-direction: column;

  gap:0px;
  
}

.clear-button:hover {
  cursor: pointer;
  color: black;
}

/*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*/
  .dlg {
    border: solid 1px gray;
    border-radius: 10px;
    padding: 0px;
    width: 80%;
    max-width: 500px;
    position: relative;
    
    p {
      width:100%;
      text-align: center;
      padding-inline: 30px;
    }

    .btn {
      min-width: 100px;
      margin-inline:auto;
      margin-block: 10px;
    }

  }
  .dlg-header {
    position: sticky;
    top: 0;
    background-color: var(--button-color);
    color:white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:5px 10px;

  }
  .dlg-close {
    width: 25px;
    height:25px;
    background-color: transparent;    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);    
    font-size: 22px;
    color: white;
    border-radius: 50%;
    padding: 0;
    transition-duration: 200ms;
    vertical-align: middle;
    border:none;
  }
  .dlg-close:hover {
    transform: rotate(48deg);
    cursor: pointer;
    
  }


  .dlg-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    margin: auto;
    width: 100%;
    padding: 10px 20px;
  }

  .closebox {
    background-color: var(--tertiary-color);
  }

/* LABELS */
.poster-subtitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: whitesmoke;        
  padding:5px 15px;
  border-radius: 999px;
  text-align: center;
}
*[tooltip] {
  position: relative;
  
}
*[tooltip]:hover::after {
  content: attr(tooltip);
  position: absolute;
  background: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  margin-top: 10px;
  margin-left: 10px;
  z-index: 10;
}
.small-label {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  color: grey;
  margin-bottom: 5px;
  text-align: left;
}
.dark-text {
  color:var(--button-color);
}
.activity-indicator {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.icon-label {
  display: flex;
  align-items: center;
  overflow: hidden;
  gap:5px;
  background-color: var(--light-green);
  border-radius: 10px;
  font-size: inherit;
  font-weight: 600;
  border:none;
  color: var(--button-color);
  padding-inline: 1rem;
  
  span {flex-grow:0; flex-shrink:1; text-align: left;letter-spacing: 0.8;};
  svg {fill:var(--button-color); flex-shrink: 0;}
}
button.icon-label:hover, a.icon-label:hover {
  cursor: pointer;
  opacity: 0.7;
}
.last-login {
  font-size: 0.8em;
  color: grey;
  letter-spacing: 0.8;
  text-align: left;
    position: absolute;
  bottom: 1px;
  right:1px;
  background-color: transparent;
  padding-inline: 5px;
}
/* TEXT */
.wiki-text {
    max-width: 60ch;
    margin-inline:auto;
    p {  
      text-align: justify;    
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline:auto;
      unicode-bidi: isolate;
      line-height: 1.5;
    }
}
.wiki-text.text-left {
  margin-inline: 0;
  p {
    text-align: left;
  }
}
.profile_header {
  text-transform: uppercase;
  color: var(--button-color);
  margin-block: 5px;
  font-weight: 600;
  width: 100%;
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-small {
  font-size:14px;
}
.text-14 {
  font-size:14px;
}
.text-12 {
  font-size:12px;
}
.text-10 {
  font-size:10px;
}

/* WIDGETS */
    /* PROGRESS CIRCLE */
    .progress-wrapper {      
      text-align:center;
      height: 100%;
      position: relative;
      .progress-ring {
        width:80px;
        height:80px;
      }

      .progress-ring circle {
        fill:none;
        stroke-width:7;
        stroke-linecap:round;
      }

      .bg {
        stroke:#e0e6e8;
      }

      .progress {
        stroke:var(--button-color);
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
        transform:rotate(-90deg);
        transform-origin:50% 50%;
        transition: stroke-dashoffset 1s ease;
      }

      .progress-text {
        font-weight:bold;
        font-size:20px;
        margin-top:-60px;
      }
      .poster-subtitle {
        position: absolute;
        bottom: 0;
        font-size: 10px;
        padding: 2px;
        width:100%;
        background-color: rgba(177, 198, 198, 0.174);
      }

    }
    /* Progress bar */
    .course-progress-card {
      background-color: var(--button-color);
      border-radius: 10px;
      padding:15px;
      color:white;
            font-size: 14px;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      width: 100%;
      gap:15px;
      margin-top:10px;
      opacity: 0.9;
      .progress {
        background: #eeeeee3f;
        border-radius: 8px;
        height: 8px;
        width:80%;
        overflow: hidden;
      }

      .progress-bar {
        background: #ffffff;
        height: 100%;
        
      }
      .title {
        color:rgba(255, 255, 255, 0.807);
        font-size: 11px;
      }
    }
  .course-progress-card.light-theme {
    background-color: var(--light-green);
    color: var(--button-color);
    .progress {
      background: #b5bac193;
    }
    .progress-bar {
      background: var(--button-color);
    }
    .title {
      color:var(--button-color);
    }
  }

/* Details *//* Summary */
details {
  transition-duration: 100ms;
  .details-toggle {
    transition-duration: 200ms;
    transform: rotate(0deg);
  }
  .details-content {
    transition-duration: 300ms;
    opacity: 0.3;
  }
}
details[open] {
  .details-toggle {
    transform: rotate(90deg);
  }
  .details-content {
    opacity: 0.9;
  }
}
/* TABLES */
.table {  
  
  font-size: 0.8em;
  background-color: #ffffff;
  padding: 2px;
  border-radius: 5px;
  border-collapse: collapse;    
  margin: auto;
  margin-block: 10px;
  max-width: 100%;
  
  border: solid 1px rgba(128, 128, 128, 0.493);

  .profile_picture {
    width: 50px;
  }
  @media screen and (max-width:800px) {
    
    overflow:scroll;
    font-size: 0.6em;
  }
}

.table.tbl-lg {
  font-size: 0.9em;
  padding: 10px;
  @media screen and (max-width:800px) {
    font-size: 0.8em;
  }
}

.table th, .table td {
  padding:0.2rem;    
  text-align: left;    
}

.table th {
  padding-left: 5px;
  background-color: var(--theme-color);
  color: white;
}

.table td {
  padding-left: 10px;
}

.table .end-column {
  border-right: solid 1px rgba(128, 128, 128, 0.493);
  padding-right: 5px;
}


.table tr:nth-of-type(2n) {
  background: hsla(0, 0%, 33%, 0.034);

}

.table caption {
  text-align: center;
  caption-side: bottom;  
}

.cpd-table {
  font-size: 12px;
  max-width: 800px;
  border-radius: 15px;
  overflow: hidden;
  border: none;
  margin-block: 20px;
}

.fixed-column {
  position: sticky;
  left: 0;
  z-index: 1; 
  background-color: white; 
  box-shadow: 1px  0px 0.5px rgba(0, 0, 0, 0.3);
}

 /*FORMS*/
 .form-group {  
  margin-bottom: 15px;
  width:100%;
   
  
  table {
    background-color: white;
    padding: 10px;
    margin:auto;
    border-radius: 10px;
  }

  tr {
    border-bottom: solid 2px grey;
    padding: 2px;
    gap:2px;
  }

  td {
    padding: none;
    margin-inline: none ;
  }

  .profile_picture {
    width: 70px;
    height: 80px;
    border-radius: 10%;
  }

}

.form-group.responsive {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size:clamp(8px,1vw,12px);
  gap:10px;

  .table_container {
    width: 100%;
    overflow-x: scroll;
    padding-left: clamp(10px, 2vw, 65px);
    padding-right: clamp(10px, 1vw, 20px);
  }
}

.form-group.edit-sessions {
  max-width:95%; 
  
}

.form-group.desktop {
  max-width:100%;
  padding-left:40px;
  

  .profile_picture {
    width: 80px;
  }



  td.date-group {
    background-color: rgb(215, 215, 215);
    font-size: 20px;
    text-align: left;
    padding: 10px;
}
td.date-group.monday {
  border-top: white solid 50px;
  background-color: rgb(241, 193, 193);

}
td.date-group.tuesday {
  background-color: rgb(193, 241, 193);
}
td.date-group.wednesday {
  background-color: rgb(193, 193, 241);
}
td.date-group.thursday {
  background-color: rgb(241, 241, 193);
}
td.date-group.friday {
  background-color: rgb(241, 193, 241);
}
}

.form-text.text-muted {
  font-size: 0.8em;
  color: grey;
  letter-spacing: 0.8;
}

.profile-page .form-group {
  display:grid;
  grid-template-columns: 1f;
}

.form-group-label {
  font-size:0.9em;
  text-align: center;
}

.form-control {
  padding: 2px;
  border-radius: 5px;
  border: solid 1px black;
}

.form-control.frm-sm {
  width:120px;
  margin-bottom: 2px;
  font-size: 10px;
  max-height: 20px;
  overflow-y: scroll;
}

.form-control.frm-m {
  width:200px;
}

.form-control.frm-lg {
  width:200px;
  font-size: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
}

.form-control.frm-time {
  width:80px;
  font-size: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  

}

.form-control.frm-date {
  width:200px;
  font-size: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: -1px;

}

.form-control.frm-number {
  width:60px;
  font-size: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.custom-checkbox-list {
  text-align: left;
  width:300px;
  font-size: 1.2em;
}

.custom-checkbox-list [type="checkbox"]{
  width: 20px;
}

.custom-checkbox-list label{
  position:relative;
  padding-left: 30px;
  cursor: pointer;
  display: inline-block;
  color: #972c2c;
}
  .invite-card {    
    background: var(--icued-bg);
    border: 1px solid var(--icued-border);
    border-radius: var(--icued-radius);
    box-shadow: var(--icued-shadow);
    overflow: hidden;
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .invite-card__header {
    background: var(--bottom-bar-color);
    color: #fff;
    padding: 1rem 1.25rem;
    font-weight: 600;
    text-align: left;
  }

  .invite-card__body {
    padding: 1.25rem;
  }

  .form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }

  .invite-card label {
    display: block;
    font-size: .875rem;
    margin-bottom: 0.25rem;
    color: #374151;
    text-align: left;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 100%;
    appearance: none;
    border: 1px solid #b5bac193;
    border-radius: 0.5rem;
    padding: .5rem .75rem;
    font-size: .95rem;
  }

  .delivery-row {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
  }

  .delivery-option {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    font-size: .9rem;
  }
  .delivery-option input {
    accent-color: var(--icued-primary);
  }

  .invite-card__actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .btn.invite {
    background: var(--bottom-bar-color);
    color: #fff;
  }
  .btn.invite:hover {
    background: var(--icued-primary-light);
  }
  .btn.cancel {
    background: #e5e7eb;
  }
  input[required]::after, select[required]::after, textarea[required]::after, .required_field::after {
    content: "*";
    color: red;
  }

  .form-column {
    max-height:100vh;
    overflow-y: auto;
    justify-content: space-between;
    background-color: rgb(231, 231, 231);
    padding:10px;
    border-radius: 10px;

    > div {
        width:48%;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 5px;       

    }
    > div:has(textarea) {
    width: 100%;
    }
    > div:has(input[type='time']) {
        width: 15ch;
    }
    > div:has(input[type='date']) {
        width: 20ch;
    }
        > div:has(input[type='number']) {
        width: 20ch;
    }
        > div:has(input[type='color']) {
        width: 20ch;
    }
        > div:has(input[type='checkbox']) {
        width: 15ch;
    }
  }
  .form-column.single-column {
    > div {
        width:100%;
    }
  }

    .form-column label {
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    color:var(--button-color);
  }
.form-column textarea {
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    padding:5px;
            border:1px rgb(218, 217, 217) solid;
        border-radius: 10px;
  }
.form-column input[type='time'], input[type='date'], input[type='color'], input[type='number'] {
 display:flex;
     text-align: left;
    font-size: inherit;
    font-family: inherit;
    padding:5px;
            border:1px rgb(218, 217, 217) solid;
        border-radius: 5px;
}
.form-column input[type='color'] {
    width: 100%;
    height: 100px;
}
.form-column select {
    appearance: none;
    max-width:100%;
        font-size: inherit;
    font-family: inherit;
      box-shadow: inset 1px 1px 3px #cccccc;
  border-radius: 5px;
  padding:5px;
    option {
        appearance: none;
        max-width: 50ch;
    }
}
.form-group img {
    max-width: 80%;
    height: 100px;
}

.registration-forms {
  display:flex;
  margin:auto;
  width: 100%;
  max-width: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:10px;
  li {
    list-style-type: none;
    margin-block: 10px;
  }
  button {
    margin:auto;
    margin-block: 10px;
    padding: 10px;
    border-radius: 5px;
  }
  input {
    margin:auto;
    padding: 10px;
    border-radius: 5px;
  }
  p {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
  }
  label {
    text-align: left;
    width: 100%;
    margin-bottom: 5px;
  }
}

/* POSITIONS *//*POSITIONS*/
.fixed {
  position:absolute;
}
.fixed.top-right {
  top:5px;
  right:5px;
}
.fixed.bottom-right {
  bottom:5px;
  right:5px;
}

/*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*/
.home-main {
  display: grid;
  height: 90%;    
  grid-template-rows: auto auto;
  max-width: 800px;
  width:100%;
  margin: auto;
}

.home-navigation {
    margin:20px auto;
    display:grid;    
    gap:15px;
    padding-inline:20px;
    width: 100%;
    /* Desktop — 4 tiles */
    @media (min-width: 1100px) {      
        grid-template-columns: repeat(4, 1fr);
        img {width:60%;}
        .home-nav-card {
          height:270px; 
                   
          .sub-label {min-height: 50px;}
        }      
    }
    /* Tablet — 2 tiles */
    @media (min-width: 600px) and (max-width: 1099px) {      
        grid-template-columns: repeat(2, 1fr);
        .home-nav-card {
          height:200px;
        }       
    }

    /* Mobile — 1 tile */
    @media (max-width: 599px) {      
        grid-template-columns: 1fr;
        .home-nav-card {
          height:130px;
          .illustration {
            justify-content: end;
            align-items: start;
            img {height: 70%;}
          }
          
        }       
    }
  }
  .home-logbook {    
      background:linear-gradient(140deg,#8fb2c0,#6f96a6);
  }
  .home-courses {     
      background:linear-gradient(140deg,#8cab88,#6f8f6c);
  }

  .home-workplace {     
      background:linear-gradient(140deg,#e2c68a,#d2ab63);
  }
  .home-roster {     
      background:linear-gradient(140deg,#d36a6a,#c25454);
  }

  .home-nav-card  {
    position: relative;    
    color: #f7f2f2;    
    border-radius: 15px;
    width: 100%;
    border:none;
    display:flex;
    flex-direction: column;
    justify-content: end;
    text-align: left;
    padding: 15px;
     gap:5px;    
    overflow: hidden;
    transition:all .1s ease;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.08),
        0 8px 20px rgba(0,0,0,0.06);
    
    .illustration{
        height:100%;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        min-height: 0;
        opacity: 0.8;

        img {
          height:50%;
          min-height: 60px;
          
          
          object-fit:contain;
        }
    }
    .label{
          font-size:22px;
          height:30px;
          font-weight:600;
          color:white;
          z-index: 10;
      }
    .sub-label{
          font-size:14px;
          min-height: 30px;
          font-weight:500;
          color:white;
          z-index: 10;
          padding-left:1px;
          opacity: 0.8;
      }
     .meta{
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:30px 20px;
        background:linear-gradient(transparent,rgba(0,0,0,0.25));
    }
      
  }
  .home-navigation> a {flex-shrink: 0;}
  .home-nav-card:hover{
    transform:translateY(-1px) scale(1.01);
    box-shadow:
        0 6px 14px rgba(0,0,0,0.14),
        0 10px 26px rgba(0,0,0,0.12);
}

  .home-navigation  button:hover {
    cursor: pointer;
  }


.home-messages {
  display:flex;
  flex-direction: column;
  gap: 0px;
  justify-content: flex-start;
  overflow-y:hidden;
  padding: 20px;
  transition-duration: 800ms;
  
  @media screen and (max-width: 400px) {
    width: 100%;
    padding: 0px;
    padding-bottom: 20px;
    
  }

}

.home-message {
  background-color: white;  
  border-radius: 10px;
  box-shadow: 1px 1px 1px rgba(128, 128, 128, 0.662);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 5px;
  transition-duration: 800ms;
  overflow: hidden;
  margin-block: 8px;

  hr {
    height: 1px;
    border: none;
    width: 80%;
    margin-inline: auto;
    margin-block: 5px;
    background-color: rgba(192, 204, 214, 0.32);
  }

  @media screen and (max-width: 400px) {
    width: 100%;
    border-radius:0px;
  }
}

.home-message-header {
  width: 100%;
  display: flex;
  justify-content: start;
  padding: 5px;
  gap: 10px;
  text-align: left;
}

.home-message-close-button {
  background-color: transparent;
  border: none;
  position: absolute;
  top:5px;
  right: 5px;
  font-size: 1.5em;
  color: rgb(54, 54, 54);
  rotate: 45deg;
}

.home-message-close-button:hover {
  cursor: pointer;
}

.home-message-img-small {  
  height: 45px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(128, 128, 128, 0.5);
}

.home-message-image {
  background-color: rgb(226, 225, 225);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-message .img_small {
  height: 55px;
  aspect-ratio: 1/1;
  
  object-fit:scale-down;
  

}
.img_large_background {
    filter: blur(2px);
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.2;
}

.home-message .img_large {
  width:100%;
  max-width:250px;
  height: auto;
  object-fit: cover;
  z-index: 10;


}

.home-message-title {
  font-size: 1em;
  font-weight: 600;
  color: rgb(0, 0, 0);
}

.home-message-subtitle {
  font-size: 0.7em;
  font-weight: 500;
  color: rgb(112, 111, 111);
}

.home-message-content {
  max-width: 55ch;
  text-align: left;
  margin-inline: 15px;
  font-size: 0.9em;
  line-height: 1.5;
}

.home-message-action {
  display: flex;
  width: 100%;
  justify-content: end;
  align-items: center;
  gap:20px;
  padding:10px;
} 

/*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*/
  .course-details {
    display: flex;
    justify-content: space-between;
    align-items: center;    
    gap:4px;
    padding: 10px 25px;     
    margin: 0px auto;
    
    background-color: rgb(242, 241, 241);
    line-height: 1.2;
    width: 100%;    
    position: sticky;
    top: var(--navheight);
    z-index: 90;
    backdrop-filter: blur(10px);
    border-bottom: 0.5px solid grey;
    color: var(--button-color);

    @media screen and (max-width:800px) {
      font-size: 10px;
    }
  }

  .course-details.navigate {    
    justify-content: start;
    .course-navigation {
      border-radius:999px;
      padding-block:5px;
      padding-inline: 15px; 
      text-align: left;
        @media screen and (max-width:800px) {
      font-size: 12px;
      padding-inline: 5px;
    }  
    }

    .previous-page {
      background-color: var(--light-green);
    }

    .previous-page:hover {
      background-color: #5f5f5f3a;

    }

    .current-page {
      font-weight: 600;
      padding-left:2px;
      
    }

  }

.all_courses_container {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 380px;
  gap:15px;
  padding: 15px;
  height: 65vh;
  overflow-y: auto;
  overscroll-behavior-block: contain;
  background-color: whitesmoke;
  border-radius: 15px;
  border: solid 1px rgba(0, 0, 0, 0.623); 
  border-style: inset; 
  @media screen and (max-width: 800px) {
    grid-auto-rows: 57vh;
    gap:5px;
  }

}
.page-link {
    display: flex;
    justify-content:space-evenly;
    align-items: center;    
    gap:4px;
    padding: 5px;
    padding-inline: 10px;
    z-index: 90;
    margin: 0px auto;
    
    background-color: white;
    line-height: 1.2;
    width: 100%;    
    position: sticky;
    top: var(--navheight);
    flex-wrap: wrap;
    .btn-word{font-size: 12px;}
    }
.course-page {    
    display: grid;   
    padding:10px;
    gap:clamp(5px,1vw,15px);  
    height: 100%;
    grid-template-columns: 200px 1.5fr 1fr;
  }
  @keyframes switchSlideRight {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
    @keyframes switchSlideLeft {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }
  .course-switch-container{
    width:200px;
    margin: auto;
  }
  .course-switch{
    background-color: grey;
    
    display: flex;
    padding:2px;
    border-radius: 5px;      
    position: relative;  



  }
      .switch-toggle{
      width:50%;
      height: 30px;
      border-radius: 5px;
      background-color: aliceblue;
      animation-duration: 200ms;

      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
/* LEFT position */
.course-switch.all-courses .switch-toggle {
  animation-name: switchSlideRight;
  transform: translateX(0);
}

/* RIGHT position */
.course-switch.my-courses .switch-toggle {
  animation-name: switchSlideLeft;
  transform: translateX(100%);
}
    .course-switch-options {
      justify-content: space-between;
      text-transform: uppercase;
      font-weight: 600;
      color:grey;
      font-size: 12px;
    }
 .course-page-header {
      h2 {width:100%;margin-bottom: 5px;color:var(--button-color);text-transform: uppercase;font-size: 16px;font-weight: 650;}

 }
  .course-page-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 10px;
    padding:  clamp(5px,1vw,20px) ;
    padding-top: 0px;
    gap:15px;    
    h3,h4 {width:100%;margin-bottom: 5px;color:var(--button-color);text-transform: uppercase;font-size: 14px;font-weight: 600;}
    h4 {font-size: 12px;text-align: left;margin-top:5px;}
  }
  #courses-admin{
    align-items: center;
    background-color: #aaa9a927;

  }

    .poster-background.overlay {
      background-image: linear-gradient(to top right, var(--button-color) 60%,rgba(0, 0, 0, 0) 50%);
      z-index: 1;
      transition-duration: 500ms;
    }
    .session-card-poster:hover    .poster-background.overlay{
      transform: translateX(-80%);
        }
    .course-menu {
      margin-top: 0px;
      list-style-position: outside;
      border-radius: 5px;
      padding-right: 15px;
      height: auto;
      li {
        
        border-radius: 5px;
        max-width: 25ch;        
        color: var(--button-color);
        font-weight: 600;
        text-align: left;
        a, button {
          color: inherit;
          text-decoration: none;
          font-size: 12px;
          text-align: left;
          width: 100%;
          justify-content: left;
        }
      }
      .btn {text-align: left;}

    }
    @media screen and (max-width:550px) {
        .course-page {
          display: flex;
          flex-direction: column;          
          margin: auto;
          padding: 10px;
          gap:10px;  
          height: 100%;          
        }
        #old-courses { 
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          
          column-gap: 0;
          .course-directing-header {
            font-size:12px;
          }
          > div {width:49%;}
        }
        .course-page-container {
          gap:8px;
        }
        .course-card.rolling-course {
          margin-bottom: 2px;
        }
        .rolling-course .course-row-content .button-group {
          justify-content: space-between;
        }
        .course-menu {
          height: 150px;
          overflow-y: auto;
background-color: #aaa9a927;
        }
        
    }

/*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*/
.roster-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
  padding: 15px;
  
  color: white;
  margin: auto;
  max-width: 500px;
  
  .btn {
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-block: 5px;
    padding-inline: 5px;
    border-radius: 5px;
  } 

  button:hover {
    cursor: pointer;
  }
  .date-picker-wrapper {
    position: relative;
    
    border-radius: 8px;
  }

  input[type="date"] {
    background-color: transparent;
    padding-block: 0px;
    padding-inline: 0px;
    font-size: 16px;
    font-weight: 590;
    color: var(--button-color);
    border:none;
    letter-spacing: 0.9;
    max-width: 12ch;
  }
  input[type="date"]:hover {
    cursor: pointer;
  }
  input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  margin-left: 0;
fill: var(--bottom-bar-color);
}
  input[type="date"]::-webkit-datetime-edit {
  cursor: pointer;
  max-width:10ch;
  

}
  svg {
    fill: var(--button-color);
  }
}



.date-change-group {
  display: flex;
  justify-content:space-between;
  align-items: center;
  width:300px;
  max-width:calc(100% - 70px); 
  padding-inline: 15px;
  border-radius: 250px;
  background-color: var(--light-green);
  box-shadow: 0px 0px 2px 1px rgba(85, 91, 94, 0.2);
}

.date-change-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 5px;

  svg {
    fill:gray;
    height: 20px;
    width: 20px;
    min-width: 0;
  }
}
.date-change-arrow.outer {
  flex: 0 1 20px; /* basis can shrink */
  overflow: hidden;
}
.date-change-arrow.outer svg {
  width: 100%;
  height: auto;
}

.date-change-arrow:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.269);
}

#roster-tabs {
  display: flex;
  align-items: start;
  justify-content:stretch;
  
  max-width: 500px;
  margin: auto;
  
  position: sticky;
  z-index: 0;
  background-color: rgb(222, 222, 222);
  padding-top:5px;
  padding-inline: 5px;
      border-top-right-radius: 5px;
    border-top-left-radius: 5px;

  button {
    padding: 15px;
    padding-left: 5px;
    padding-right: 20px;
    background-color: #dbe5e3;
    border: none;
    font-size: 14px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: rgb(222, 222, 222);
    color: var(--button-color);
    opacity: 0.7;
    
    z-index: 1;
    flex-grow: 1;
    svg {
      fill: var(--button-color);
    }

    svg.icon-outlined {
      display:block;
    }
    svg.icon-solid {
      display:none;
    }
  }
  button:hover {
    cursor: pointer;
  }
  button.active {
    background-color: var(--light-green);
    opacity: 1;
    border: none;
    z-index: 2;

    svg.icon-outlined {
      display:none;
    }
    svg.icon-solid {
      display:block;
    }
  }
}

.roster-tab-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  transition: all 300ms ease-in-out;
  

  .icon-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @media screen and (max-width: 450px) {
    .icon-text.first-to-go {
      display: none;
    }
  }

  @media screen and (max-width: 385px) {
    .icon-text {
      display: none;
    }
  }

  .text-on-hover {
    transform: scaleX(0); /* Collapsed state */
    transform-origin: right; /* Animate from left to right */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing content */
    transition: transform 300ms ease-in-out; /* Smooth animation */
    span {
      display:none;
    }
  }
}

.roster-tab-icon:hover .text-on-hover {
  transform: scaleX(1); /* Fully expanded */
  span {
    display: flex;
    align-items: start;
    justify-content: start;
  }
}

/* COFFEE */
.coffee-icon {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 0 2px 2px rgba(85, 91, 94, 0.326);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;

  img {
    height: 100%;
    object-fit:contain;
  }
}

.coffee-icon:hover {
  cursor: pointer;
  transform: scale(1.1);
}

  .coffee-icon-fixed {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(10%, 0%);
    z-index: 100;
  }

.coffee-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background-color: rgba(128, 128, 128, 0.24);
  margin: auto;
  border-radius: 10px;
  width: 95%;
  max-width: 400px;
}

/*Attendance*//*Attendance*//*Attendance*/
.button-icon {
  display: flex;  
  align-items: center;
  justify-content: center;
  padding: 5px;
  padding-inline:5px;
  transition: all 300ms ease-in-out;
  background-color: #ffffff;
  border-radius: 10px; 
  background-repeat: no-repeat;
  background-position: 3px center;
  border:1px solid #000000;
  gap:2px;
  text-align: center;


}
.button-icon:hover {
  cursor: pointer;  
  padding-inline:15px;
}

.button-icon.dynamic-text {
  width:34px;
  .dynamic-text-content {
    transform:scaleX(0);
  }
}

.button-icon.dynamic-text:hover  {
  width:auto;
  .dynamic-text-content {
    transform:scaleX(1);
  }
}

.button-icon.no-text {
  background-color: transparent;
  background-position: center;
  border:none;
}

.button-icon-spacer {
  width:24px;
  aspect-ratio: 1/1;
}

.attendance-online {
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23b58db5"><path d="m437-403 212.77-211.77L607-657.54l-170 170-85-85-42.15 42.16L437-403ZM55.39-150.77v-60h849.22v60H55.39Zm116.92-100q-30.31 0-51.31-21-21-21-21-51.31v-415.38q0-30.31 21-51.31 21-21 51.31-21h615.38q30.31 0 51.31 21 21 21 21 51.31v415.38q0 30.31-21 51.31-21 21-51.31 21H172.31Z"/></svg>');
/* background-attachment: fixed | scroll; */
/* background-size: auto | cover | contain | 500px 250px; */
background-position: 5px center;
background-repeat: no-repeat;
/* background-origin: border-box | padding-box | content-box; */
/* background-clip: border-box | padding-box | content-box; */
/* background-blend-mode: multiply | screen | overlay; */
}

.attendance-in-person {
  background-image:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"  fill="%2300b38a"><path d="m423.23-309.85 268.92-268.92L650-620.92 423.23-394.15l-114-114L267.08-466l156.15 156.15ZM480.07-100q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Z"/></svg>');

}

.attendance-maybe {
  background-image:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"  fill="%23f2ac42"><path d="M479.56-255.39q17.13 0 28.94-11.82 11.81-11.83 11.81-28.97 0-17.13-11.83-28.94-11.83-11.8-28.96-11.8-17.13 0-28.94 11.83-11.81 11.83-11.81 28.96 0 17.13 11.83 28.94 11.83 11.8 28.96 11.8Zm-28.33-143.23h56.31q.77-29.53 8.65-47.19 7.89-17.65 38.27-46.8 26.39-26.39 40.42-48.74 14.04-22.34 14.04-52.77 0-51.65-37.11-80.69-37.12-29.03-87.81-29.03-50.08 0-82.88 26.73-32.81 26.73-46.81 62.96l51.38 20.61q7.31-19.92 25-38.81 17.69-18.88 52.54-18.88 35.46 0 52.42 19.42 16.97 19.43 16.97 42.73 0 20.39-11.62 37.31-11.61 16.92-29.61 32.69-39.39 35.54-49.77 56.7-10.39 21.15-10.39 63.76ZM480.07-100q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Z"/></svg>');
  background-repeat: no-repeat;
}

.attendance-no {
  background-image:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23ea324c"><path d="m336-293.85 144-144 144 144L666.15-336l-144-144 144-144L624-666.15l-144 144-144-144L293.85-624l144 144-144 144L336-293.85ZM480.07-100q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Z"/></svg>');
  background-repeat: no-repeat;
}

.add-person {
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="%23434343"><path d="M713-442v-84h-84v-52h84v-84h52v84h84v52h-84v84h-52Zm-329-50.31q-51.75 0-87.87-36.12Q260-564.56 260-616.31q0-51.75 36.13-87.87 36.12-36.13 87.87-36.13 51.75 0 87.87 36.13Q508-668.06 508-616.31q0 51.75-36.13 87.88-36.12 36.12-87.87 36.12ZM116-219.69v-68.93q0-21.16 10.96-39.31 10.96-18.15 30.66-29.61 52.3-30.07 109.65-46.11 57.35-16.04 116.73-16.04t116.73 16.04q57.35 16.04 109.65 46.11 19.7 11.46 30.66 29.61T652-288.62v68.93H116Z"/></svg>')
}

.confirm-attendance {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%23eeeeee"><path d="M695-470.23 590.23-575 627-611.77l68 68 153-152L885.15-660 695-470.23Zm-311-22.08q-51.92 0-87.96-36.04Q260-564.38 260-616.31q0-51.92 36.04-87.96 36.04-36.04 87.96-36.04 51.92 0 87.96 36.04Q508-668.23 508-616.31q0 51.93-36.04 87.96-36.04 36.04-87.96 36.04ZM116-219.69v-68.93q0-21.38 10.96-39.42 10.96-18.04 30.66-29.5 52.3-30.07 109.65-46.11 57.35-16.04 116.73-16.04t116.73 16.04q57.35 16.04 109.65 46.11 19.7 11.46 30.66 29.5T652-288.62v68.93H116Z"/></svg>');
  border: none;
  background-color: #00b38a;
  color: white;
  padding-block: 0px;
  padding-inline:5px;
  margin:3px;
  font-size: 10px;

}

.download-item {
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23eeeeee"><path d="M720-134.23 865.77-280 824-321.77l-74 74V-429h-60v181.23l-74-74L574.23-280 720-134.23ZM570-10v-60h300v60H570ZM242.31-170q-29.54 0-50.92-21.39Q170-212.77 170-242.31v-555.38q0-29.54 21.39-50.92Q212.77-870 242.31-870H520l230 230v123.31h-60V-610H490v-200H242.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v555.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h240v60h-240ZM230-230v-580 580Z"/></svg>');
  background-color: transparent;
  color: white;
  border:none;
}

.add-item {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="%23264E5B"><path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>');
}

.edit-item {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="%2354808C"><path d="M264-96q-29.7 0-50.85-21.15Q192-138.3 192-168v-624q0-29.7 21.15-50.85Q234.3-864 264-864h312l192 192v179q-21 11-38 28l-34 34-192 191v144H264Zm312 0v-113l210-209q7.26-7.41 16.13-10.71Q811-432 819.76-432q9.55 0 18.31 3.5Q846.83-425 854-418l44 45q6.59 7.26 10.29 16.13Q912-348 912-339.24t-3.29 17.92q-3.3 9.15-10.71 16.32L689-96H576Zm243-197 45-46-45-45-45 46 45 45ZM528-624h168L528-792l168 168-168-168v168Z"/></svg>');
}

.request-review {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23F19E39"><path d="m298-262-56-56 121-122H80v-80h283L242-642l56-56 218 218-218 218Zm222-18v-80h360v80H520Zm0-320v-80h360v80H520Zm120 160v-80h240v80H640Z"/></svg>');
  svg {fill:var(--button-color)}
}

.svg-badge {
  width: 25px;
  height: 25px;
  background-position: center;
  background-repeat: no-repeat;
}

.svg-complete {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%2337b33f"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>');
  width: 16px;
  height: 16px;
}

.svg-pending {
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%23F19E39"><path d="M288-420q25 0 42.5-17.5T348-480q0-25-17.5-42.5T288-540q-25 0-42.5 17.5T228-480q0 25 17.5 42.5T288-420Zm192 0q25 0 42.5-17.5T540-480q0-25-17.5-42.5T480-540q-25 0-42.5 17.5T420-480q0 25 17.5 42.5T480-420Zm192 0q25 0 42.5-17.5T732-480q0-25-17.5-42.5T672-540q-25 0-42.5 17.5T612-480q0 25 17.5 42.5T672-420ZM480.28-96Q401-96 331-126t-122.5-82.5Q156-261 126-330.96t-30-149.5Q96-560 126-629.5q30-69.5 82.5-122T330.96-834q69.96-30 149.5-30t149.04 30q69.5 30 122 82.5T834-629.28q30 69.73 30 149Q864-401 834-331t-82.5 122.5Q699-156 629.28-126q-69.73 30-149 30Z"/></svg>');
  width: 16px;
  height: 16px;
}

.svg-ticked {
  width: 15px;
  height: 15px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 -960 960 960" width="15px" fill="%2337b33f"><path d="M389-280.85 209.62-459.23 246.38-497 389-354.38 713.62-678l36.76 36.77L389-280.85Z"/></svg>');
  position:absolute;
  bottom:0;
  right:0;
  translate: 50% 20%;
}


.roster_container {
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  background-color: var(--light-green);
  max-width: 500px;
  margin: auto;
  text-indent: 10px;
  position: relative;
  z-index: 1;
  
  
  

  b {
    text-align: left;
    color: var(--icu-green);
  }

  .table {
    width: 100%;
    font-size: 16px;
    border: none;
    
    margin-bottom: 20px;

    tr {
      display: grid;
      grid-template-columns: 65px auto 85px;
      padding: 10px;
      gap: 10px;
      background: white;
      border-bottom: 1px solid #e8e8e8;
      align-items: center;
      
      
    }



    td {
      padding-left: 1px;
      height: 100%;
      min-width: 0;

    }

    .coffee-icon {
      width: 25px;
      background-color: transparent;
      box-shadow: none;
    }

    .staff_info {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: end;
      justify-content: right;
      text-align: right;
      
    }
    .profile_picture_container {
      position: relative;
      .profile_picture {
        width:60px;
      }
      .shift-icon {
        position: absolute;
        bottom:0;
        right:0;
        background-color: white;
        border-radius: 5px;
        translate: 25% 15%;
       

      }

    }

  }
        .shift_details {
        text-align: left;
      }
      .staff_profile_image_container {
        width: 30px;
        height: 30px;
        border-radius: 50%;        
        font-weight: 600;
        font-size: 14px;
        color:rgba(255, 255, 255, 0.795);
      }
}

.roster_container.unit_rosters {
  width:100%;
  max-width:800px;
  overflow-x:scroll;
  .roster-table {
    width:100%;
    font-size: 10px;
    overflow:scroll;
    

    .today {
      font-weight: 700;
    }



    td {
      min-width:50px;
      border:none;
    }

    .first-column {
      width: 100px;
    }

    .roster-row.S {
      color:rgb(183, 119, 2);
    }
    .roster.M {
      td {
        border-top:50px;
      }
    }

  }
}

#roster-today {  
  b {
    text-align: left;
    color: var(--icu-green);
  }
}

#roster-tonight {  
  b {
    text-align: left;
    color: rgb(14, 37, 105);
  }
}

#roster-education {  
  table {
    background-color: transparent;
  }
  tr {
    border:none;
    background-color: white;
    grid-template-columns: 65px auto 145px;
  }
  tr.session_details_container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background-color: white;
    text-align: left;
    justify-content: start;
    align-items: start;
    border-bottom: solid 20px #ededed;
  }
}

#roster-personal {
  background-color: #ececec;
  .calendar {
    width:100%;
    display:grid;
    gap: 0px;
    grid-template-columns: repeat(7, 1fr);   
    margin:auto;
    background-color: #cbcbcb;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 1px 1px 1px 1px #b8b8b88a ;
    
    }

  .day {
    max-width: calc((100vw/7) - 1px) ;
    height: 100px;
    background-color: #ffffff;
    display:flex;
    flex-direction: column;
    gap: 2px;
    justify-content: start;
    align-items: start;
    border:#cbcbcb 1px solid;

    .shift {
      background-color: #f00;
      color:white;
      width: 100%;
      height: 20px;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      padding: 2px;
      text-indent: 0;
      border-radius: 3px;
    }

    .education {
      font-weight: 400;
      font-size: 10px;
    }

  }
  .extra {
    background-color: transparent;
  }
  .today {
    font-weight: 700;
  }
  .header {
    background-color: var(--bottom-bar-color);
    color: white;
    font-weight: 700;
    height:30px;
    width: 100%;
  }
}

.coffee-people {
  background:white;
  border-radius: 5px;
  padding: 5px;
  
  text-align: left;
  font-size: 12px;
  transition-duration: 300ms;
  text-indent: 0;

  ul {
    list-style-type: none;
    padding-inline: 0;
  }
}

#coffee-list {
  list-style: none;
  padding-inline: 5px;
  text-align: left;
  padding-bottom:5px;
  font-family:'Courier New', Courier, monospace;
  font-size:14px;
  margin-inline: 5px;
  color:#000000e0;

  
  ul {
    padding-inline: 2px;
    font-size:11px;
    margin:2px; 
    animation-duration: 300ms;
  }
  li {
    padding-inline: 2px;
    margin:2px;
    animation-duration: 300ms;
  }


}

.coffee-list {
  animation-duration: 300ms;
  background-color: #fdf8c8ff ;
  box-shadow: 1px 1px 1px 1px #d8d8d88a ; 
    text-indent: 0;
  min-height: 150px;
  border-radius: 1px;
  
}

.verticalLines {
  width: 2px;
  float: left;
  height: 100%;
  
  margin-inline: 1ch;
  border-left: 1px solid red;
  border-right: 1px solid red;
  opacity: 0.4;
}


/* DESIGN */
.br-0 {border-radius: 0px;}
    .br-5 {border-radius: 5px;} 
    .br-10 {border-radius: 10px;}
    .br-15 {border-radius: 15px;}
    .br-20 {border-radius: 20px;}

    .pad-0 {padding: 0px;}
    .pad-5 {
      padding: 5px;
    }
    .pad-10 {
      padding: 10px;
    }
        .pad-15 {
      padding: 15px;
    }
        .pad-20 {
      padding: 20px;
    }
    
    .pad-5-15 {
      padding: 5px 15px;
    }
    .pad-1-5 {
      padding: 1px 5px;
    }
        .gap-0 {
      gap: 0px;
    }
        .gap-5 {
      gap: 5px;
    }
    .gap-10 {
      gap: 10px;
    }
    .gap-15 {
      gap: 15px;
    }
    .gap-20 {
      gap: 20px;
    }
    .w-15 {
      width: 15px;
    }
    .w-25 {
      width: 25px;
    }
    .w-50 {
      width: 50px;
    }
    .w-100 {
      width: 100px;
    }
    .w-150 {
      width: 150px;
    }
      .w-200 {
      width: 200px;
    }
        .w-250 {
      width: 250px;
    }
            .w-300 {
      width: 300px;
    }
    .square {
      aspect-ratio: 1/1;
    }