.svelte-qyg5hr {
     box-sizing: border-box
   }
  .spopover-title.svelte-qyg5hr{
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
  }
  .spopover.svelte-qyg5hr{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060; 
    padding: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    white-space: normal;
  }
  .spopover-content.svelte-qyg5hr{
    padding: 9px 14px;
  }
  .pop-backdrop.svelte-qyg5hr{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background:rgba(0,0,0,0.01)
  }


.duo-toolbar.svelte-1caxla8{
  display:flex;
  justify-items: stretch;
  margin:0 -8px;
}
.duo-toolbar.svelte-1caxla8 > *{
  flex:1;
  margin:0 5px;
}



  .svelte-1fthriu{
    box-sizing: border-box;
  }

.salert.svelte-1fthriu{
  padding:12px 15px;
  position:relative;
  color:var(--alert-color,#444);
  margin:10px 0px;
  border-radius:5px;
  isolation:isolate;
  transition:max-height 0.5s,opacity 0.5s,padding 0.5s,margin-bottom 0.5s,transform 0.5s;
}
.salert.svelte-1fthriu:first-child{
  margin-top:0!important
}
.salert.svelte-1fthriu:last-child{
  margin-bottom:0!important
}



@supports(background-color:color-mix(in srgb, var(--alert-color) 20%, white)){

  .salert.info.svelte-1fthriu{
    --alert-color:var(--alert-info,#d9edf7);
  }
  .salert.warning.svelte-1fthriu{
    --alert-color:var(--alert-warning,#ffe69c);
  }
  .salert.success.svelte-1fthriu{
    --alert-color:var(--alert-success,#ccf8e4);
  }
  .salert.danger.svelte-1fthriu{
    --alert-color:var(--alert-danger,#ffd9dd);
  }
  .salert.dark.svelte-1fthriu{
    --alert-color:var(--alert-dark,#ced4da);
  }
  .salert.svelte-1fthriu{
    background:var(--alert-color);
    color:color-mix(in lch, var(--alert-color) 0%, lch(40 40 none));
    border:1px solid color-mix(in lch, var(--alert-color) 0%, lch(85 20 none));
  }
}


.salert.svelte-1fthriu h1,.salert.svelte-1fthriu h2,.salert.svelte-1fthriu h3,.salert.svelte-1fthriu h4,.salert.svelte-1fthriu h5,.salert.svelte-1fthriu h6,.salert.svelte-1fthriu p{
  margin:0 0 10px 0;
}

  .close.svelte-1fthriu{
    background:transparent;
    border:0px;
    font-size:24px;
    font-weight:bold;
    position:absolute;
    right:0px;
    top:0px;
    padding:4px 10px;
    cursor:pointer;
    opacity:0.5
  }
  .close.svelte-1fthriu:hover{
    opacity:1;
  }
  .hiding.svelte-1fthriu{
    overflow:hidden;
    max-height:0!important;
    opacity:0;
    padding:0 15px;
    margin-bottom:0;
    transform-origin: top;
    transform: scale(1,0)
  }



/* OLD CSS BELOW - can be removed when color-mix is better supported */
@supports not (background-color:color-mix(in srgb, var(--alert-color) 20%, white)){
  .salert.info.svelte-1fthriu{
    --alert-color:#055160 
  }
  .salert.warning.svelte-1fthriu{
    --alert-color:#664d03
  }
  .salert.success.svelte-1fthriu{
    --alert-color:#0f5132
  }
  .salert.danger.svelte-1fthriu{
    --alert-color:#842029
  }
  .salert.dark.svelte-1fthriu{
    --alert-color:#141619
  }

  .salert.svelte-1fthriu:after{
    content:'';
    position:absolute;
    inset:0;
    background:var(--alert-color,#444);
    border-radius:inherit;
    filter:brightness(240%) saturate(2) opacity(0.25);
    z-index:-1;
  }
  .salert.svelte-1fthriu:before{
    content:'';
    position:absolute;
    inset:0;
    border:1px solid var(--alert-color,#444);
    border-radius:inherit;
    filter:brightness(200%) saturate(2) opacity(0.2);
    z-index:-1;
    background:white;
  }
}




  .slider.svelte-724qlf{
    position:absolute;
    width:100%;
    height:4px;
    overflow-x: hidden;
  }

  .line.svelte-724qlf{
    position:absolute;
    opacity: 0.4;
    background:rgba(0,0,0,0.2);
    width:150%;
    height:4px;
  }

  .subline.svelte-724qlf{
    position:absolute;
    background:#4a8df8;
    height:3px; 
  }
  .inc.svelte-724qlf{
    animation: svelte-724qlf-increase 2s infinite;
  }
  .dec.svelte-724qlf{
    animation: svelte-724qlf-decrease 2s 0.5s infinite;
  }

  @keyframes svelte-724qlf-increase {
    from { left: -5%; width: 5%; }
    to { left: 130%; width: 100%;}
  }
  @keyframes svelte-724qlf-decrease {
    from { left: -80%; width: 80%; }
    to { left: 110%; width: 10%;}
  }



  .icon.svelte-1hrfbt1{
    display:inline-flex;
    place-content: center;
    width:1em;
    vertical-align: text-bottom;
  }
  svg.svelte-1hrfbt1{
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    overflow: hidden;
  }


  .panel.svelte-2cgltk{
    display: block;
    margin: 0 0 10px 0;
    border-radius: 5px;
    position: relative;
    background: #fff;
    box-shadow: var(--white-shadow);
  }

  .padded.svelte-2cgltk{
    padding: 15px 10px;
  }

  .content.svelte-2cgltk{
    height:calc( 100% - 50px);
  }

  h4.svelte-2cgltk,.panel-heading{
    background: linear-gradient(to top, #279ef4 80%, #57b4f6);
    padding: 15px;
    margin:0;
    color: #fff;
    box-shadow: var(--blue-shadow);
    font-size: 18px;
    border-radius: 5px 5px 0 0;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
  }

  @media print{
    .panel.svelte-2cgltk{
      box-shadow: none;
    }

    h4.svelte-2cgltk{
      box-shadow: none;
      background:white;
      color:#333;
      font-size:25px;
    }
  }



  .breadcrumb.svelte-6y7wo5 {
    background: #fff;
    box-shadow: var(--white-shadow-inset);
    padding: 8px 15px;
    margin: 0 0 20px 0;
    list-style: none;
    border-radius: 5px;
  }
  .breadcrumb.svelte-6y7wo5 > li:where(.svelte-6y7wo5) {
    display: inline-block;
  }

  .breadcrumb.svelte-6y7wo5 > li:where(.svelte-6y7wo5) + li:where(.svelte-6y7wo5):before {
    content: '/\00a0';
    padding: 0 5px;
    color: #ccc;
  }
  div[slot="menu"].svelte-6y7wo5{
    max-height:400px;
    overflow:auto;
  }
  div[slot="menu"].svelte-6y7wo5 button:where(.svelte-6y7wo5){
    cursor: pointer;
  }


  .toolwrap.svelte-1okb5pl{
    position:relative;
    display:inline-block;
  }

  .tooltip.svelte-1okb5pl{
    display:inline-block;
    opacity:0;
    pointer-events: none;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    z-index: 1070;
    display: block;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.428571429;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
  }
  .toolwrap.svelte-1okb5pl:hover .tooltip:where(.svelte-1okb5pl){
    transform: translate(-50%, 0);
    opacity:1;
  }

  .tooltip.svelte-1okb5pl .tooltip-inner:where(.svelte-1okb5pl){
    border-radius:5px;
    box-shadow:0 2px 10px rgba(0,0,0,0.5);
    display:block;
    min-width: 100px;
    padding: 3px 8px;
    color: #444;
    text-align: center;
    background-color: #fff;
    white-space: pre-wrap;
  }

  .tooltip-arrow.svelte-1okb5pl {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  .tooltip.svelte-1okb5pl.bottom{
    left:50%;
    transform: translate(-50%, 30%);
    margin-top: 3px;
    padding: 5px 0;
  }

  .tooltip.svelte-1okb5pl.bottom .tooltip-arrow:where(.svelte-1okb5pl) {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #fff;
  }

  .tooltip.svelte-1okb5pl.top{
    left:50%;
    bottom:100%;
    transform: translate(-50%, 30%);
    margin-top: 3px;
    padding: 5px 0;
  }

  .tooltip.svelte-1okb5pl.top .tooltip-arrow:where(.svelte-1okb5pl) {
    top: auto;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0px 5px;
    border-top-color: #fff;
  }

  .tooltip.svelte-1okb5pl.right{
    left:calc(100% + 10px);
    bottom:auto;
    top:0;
    transform: translate(50%, -50%);
    margin-top: 0px;
    padding: 5px 0;
  }

  .tooltip.svelte-1okb5pl.right .tooltip-arrow:where(.svelte-1okb5pl) {
    top: calc( 50% + 5px );
    bottom: auto;
    left: 0%;
    margin-left: -5px;
    border-width: 5px 5px 5px 0px;
    border-right-color: #fff;
  }

  .toolwrap.svelte-1okb5pl:hover .tooltip:where(.svelte-1okb5pl).right{
    transform: translate(0%, -50%);
    opacity:1;
  }



.classbar.svelte-1te6zkf{
  display:grid;
  grid-template-columns: auto 80px  1fr 30px;
  margin:5px -5px;
  color:white;
  gap:1px;
}
.count.svelte-1te6zkf{
  border-radius: 5px 0 0 5px;
}
.count.svelte-1te6zkf,.type.svelte-1te6zkf{
  background:var(--colour);
  padding: 3px 5px;
}

.graphouter.svelte-1te6zkf{
  box-shadow: var(--white-shadow-inset);
  border-radius: 0 5px 5px 0;
  padding: 0;
}
.graphbar.svelte-1te6zkf{
  border-radius: 0 5px 5px 0;
  text-align: right;
  padding: 3px 5px;
  background:var(--colour);
}


.arrow.svelte-1te6zkf a:where(.svelte-1te6zkf){
  display:block;
  padding: 3px 5px;
  font-weight:bolder;
  margin-left:3px;
}

.arrow.svelte-1te6zkf a:where(.svelte-1te6zkf):hover{
  box-shadow: var(--white-shadow-inset);
  border-radius: 5px;
}




  .classcard.svelte-1b256x8 {
    all:unset;
    box-shadow: var(--white-shadow-sm);
    border-radius: 6px;
    padding: 20px;
    position: relative;
    height: 300px;
    background: #fff;
    cursor: pointer;
    transition: 0.3s all;
    display:grid;
    grid-template-areas:"title badges" "bars bars" "footer footer";
    grid-template-rows: 60px 1fr auto;
    transition: 0.3s transform;
  }

  .classcard.svelte-1b256x8:hover {
    transform: scale(1.03, 1.03);
    z-index:2;
  }

  .classcard.svelte-1b256x8:focus-visible{
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  .title.svelte-1b256x8{
    grid-area: title;
  }
  .badges.svelte-1b256x8{
    grid-area: badges;
    justify-self: end;
  }
  .bars.svelte-1b256x8{
    grid-area: bars;
  }

  .classcard.svelte-1b256x8 .toolwrap{
    flex:1;
  }

  .mastered.svelte-1b256x8{
    color:#008000
  }

  .acquired.svelte-1b256x8{
    color:#ffa500;
  }

  h5.svelte-1b256x8,h3.svelte-1b256x8{
    margin: 0;
    padding: 0;
    color: var(--dark-blue);
    font-family: 'Muli', sans-serif;
    font-weight:normal;
    line-height: 1.1;
  }

  h3.svelte-1b256x8{font-size: 24px;}
  h5.svelte-1b256x8{font-size: 14px;}

  .classfooter.svelte-1b256x8{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-area:footer;
  }

  .classfooter.svelte-1b256x8 .statboxes:where(.svelte-1b256x8){
    display:flex;
    grid-column: 1/-1;
  }

  .classfooter.svelte-1b256x8 p:where(.svelte-1b256x8){
    margin: 2px 0;
    font-size: 12px;
    color: var(--dark-blue);
    opacity: 0.8;
  }

  .classfooter.svelte-1b256x8 p:where(.svelte-1b256x8):nth-child(2){
    text-align:right;
  }

  .statbox.svelte-1b256x8 {
    flex:1;
    min-width: 0;
    text-align: center;
    font-size: 18px;
    padding: 0;
  }

  .statbox.svelte-1b256x8 .icon:where(.svelte-1b256x8) {
    border-radius: 6px 6px 0 0;
    height: 30px;
    border: 1px solid var(--colour,hsl(0, 0%, 27%));
    margin: 0 2px;
    color:var(--colour,#444);
    background:white;
  }

  .statboxes.svelte-1b256x8 > div:nth-child(1) { --colour:#fec600; }
  .statboxes.svelte-1b256x8 > div:nth-child(2) { --colour:#8ea604; }
  .statboxes.svelte-1b256x8 > div:nth-child(3) { --colour:#d76a03; }
  .statboxes.svelte-1b256x8 > div:nth-child(4) { --colour:#bf3100; }
  .statboxes.svelte-1b256x8 > div:nth-child(5) { --colour:#1be7ff; }
  .statboxes.svelte-1b256x8 > div:nth-child(6) { --colour:#6eeb83; }

  .statbox.svelte-1b256x8 .val:where(.svelte-1b256x8) {
    background: var(--colour,#ccc);
    color: #fff;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    margin: 0 2px;
    -webkit-box-shadow: var(--btn-shadow);
    box-shadow: var(--btn-shadow);
  }





  h3.svelte-1pwo4uc{
    text-align: center;
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--blue-dark);
    margin: 20px 0 30px 0;
  }

  .gridwrap.svelte-1pwo4uc{
    height:400px;
  }
  .tabs.svelte-1pwo4uc{
    margin-bottom:15px;
  }

  .info-button.svelte-1pwo4uc{
    all:unset;
    position:absolute;
    top:7px;
    right:40px;
    color:rgba(0,0,0,0.3);
    font-size:18px;
  }


  .classmodal.svelte-17cfck3 .form-row {
    align-items:flex-start;
  }
  .classmodal.svelte-17cfck3 .form-row .slabel{
    padding-top:4px;
  }

  .toolbar.svelte-17cfck3{
    display:flex;
    --s-button-margins:0;
    --s-formrow-margins:0;
    padding:5px 0;
    justify-content: space-between;
  }
  
  .tools.svelte-17cfck3{
    padding:10px 0;
    margin:10px 0;
    border-top:1px solid #eee;
  }

  .btn-group.svelte-17cfck3{
    display:flex;
    --s-border-radius:0;
  }
  .btn-group.svelte-17cfck3 button:first-child{
    --s-border-radius: 5px 0 0 5px;
  }
  .btn-group.svelte-17cfck3 button:last-child{
    --s-border-radius: 0 5px 5px 0;
  }



  .tools.svelte-ni49wl{
    padding:10px 0;
    margin:10px 0;
    border-top:1px solid #eee;
  }
  .classlist.svelte-ni49wl{
    width:100%;
  }
  .classlist.svelte-ni49wl tr:where(.svelte-ni49wl){
    text-align: left;
  }
  .namecol.svelte-ni49wl{
    width:70%;
  }


  .tools.svelte-1j2qj2o{
    padding:10px 0;
    margin:10px 0;
    border-top:1px solid #eee;
  }

  .modal-inner.svelte-1j2qj2o{
    height:400px;
  }


  .toolbar.svelte-13rwzqi{
    display:flex;
    gap:5px;
    --s-button-margins:0;
    flex-wrap:wrap;
  }

  /* maybe worth make below global */
  .btn-group.svelte-13rwzqi{
    display:flex;
    gap:0px;
  }

  .btn-group.svelte-13rwzqi{
    --s-border-radius: 0;
  }

  .btn-group.svelte-13rwzqi *:first-child {
    --s-border-radius: 5px 0 0 5px;
  }

  .btn-group.svelte-13rwzqi *:last-child{
    --s-border-radius: 0px 5px 5px 0;
  }

  .classcards.svelte-13rwzqi{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin:10px 0;
  }

  .cell.svelte-13rwzqi{
    border-right:1px solid rgba(0,0,0,0.05)
  }
  


  progress.svelte-1upbstg{
    background-color: var(--white-shadow-inset);
    accent-color:blue;
    border: 0;
    height: 5px;
    border-radius: 2px;
    margin:1px;
    display:block;
    max-width:100%;
  }

  progress.svelte-1upbstg::-webkit-progress-bar {
    background-color:#fafafa;
    border-radius: 2px;
    box-shadow: var(--white-shadow-inset);
  }
  progress.svelte-1upbstg::-webkit-progress-value {
    border-radius: 2px;
  }
  progress.above.svelte-1upbstg::-webkit-progress-value {
    background-color:#5cb85c;
  }
  progress.below.svelte-1upbstg::-webkit-progress-value {
    background-color:#d9534f
  }
  progress.average.svelte-1upbstg::-webkit-progress-value {
    background-color:#3fa9f5;
  }
  /* progress::-moz-progress-bar {
  } */
  .feedback.svelte-1upbstg{
    color:#ccc;
    padding:0 1px;
    font-size:14px;
  }
  .feedback.unread.svelte-1upbstg{
    color:var(--mworange);
  }

  .marks.svelte-1upbstg{
    font-size:12px;
    display:flex;
  }

  /* Firefox alt */
  progress.above.svelte-1upbstg::-moz-progress-bar {
    background-color:#5cb85c;
  }
  progress.below.svelte-1upbstg::-moz-progress-bar {
    background-color:#d9534f
  }
  progress.average.svelte-1upbstg::-moz-progress-bar {
    background-color:#3fa9f5;
  }


  table.svelte-d5kl0r{
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    table-layout: fixed;
  }
  thead.svelte-d5kl0r th:where(.svelte-d5kl0r){
    background-color: #e5f5ff;
    padding: 5px 8px;
    line-height: 1.428571429;
    vertical-align: center;
    text-align: left;
  }
  tbody.svelte-d5kl0r td:where(.svelte-d5kl0r){
    padding: 0px 8px;
    line-height: 1.428571429;
    vertical-align: center;
    border-top: 1px solid #ddd;
    height:45px;
  }

  tbody.svelte-d5kl0r tr:where(.svelte-d5kl0r){
    border-color: white;
    cursor: pointer;
  }

  tbody.svelte-d5kl0r tr:where(.svelte-d5kl0r):hover{
    background-color: #f9f9f9;
  }

  [slot="tip"].svelte-d5kl0r{
    white-space: nowrap;
  }

  .tabs.svelte-d5kl0r {
    list-style: none;
    display: flex;
    gap:2px;
    border-bottom: 1px solid rgba(9, 148, 255, 0.2);
    justify-content: flex-start;
    padding:0;
  }

  .tabs.svelte-d5kl0r li:where(.svelte-d5kl0r){
    margin: -1px;
  }

  .tabs.svelte-d5kl0r li:where(.svelte-d5kl0r) a:where(.svelte-d5kl0r){
    cursor: pointer; 
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    position: relative;
    display: block;
    padding: 10px 15px;
  }
  .tabs.svelte-d5kl0r li:where(.svelte-d5kl0r) > a:where(.svelte-d5kl0r):hover{
    text-decoration: none;
    background: rgba(9, 148, 255, 0.1);
  }

  .tabs.svelte-d5kl0r li.active:where(.svelte-d5kl0r) a:where(.svelte-d5kl0r){
    background-color: #fff;
    color: #808080;
    background-color: #fff;
    border: 1px solid rgba(9, 148, 255, 0.2);
    border-bottom-color: transparent;
    cursor: default;
  }

  .toolbar.svelte-d5kl0r{
    display:flex;
    justify-content: flex-end;
    gap:2px;
    --s-button-margins:0;
    margin-top:-55px;
    margin-left:200px;
    flex-wrap:wrap;
  }

  .interventions.svelte-d5kl0r {
    display:grid;
    margin-top: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
  }

  .interventions_toolbar.svelte-d5kl0r {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    margin: 10px 0 0 0;
    --s-button-margins:0;
    --s-formrow-margins:0;
  }
  .interventioncard.svelte-d5kl0r {
    all:unset;
    box-shadow: var(--white-shadow-sm);
    border-radius: 6px;
    padding: 20px;
    position: relative;
    background: #fff;
    cursor: pointer;
    transition: 0.3s all;
    display:grid;
    grid-template-rows: auto auto auto auto 1fr;
    transition: 0.3s transform;
    max-width:340px;
    height:100%;
    box-sizing: border-box;
  }
  .interventioncard.svelte-d5kl0r h3:where(.svelte-d5kl0r) {
    margin:0;
    font-size: 16px;
  }
  .interventioncard.svelte-d5kl0r h5:where(.svelte-d5kl0r) {
    margin:10px 0 5px 0;
    font-size: 14px;
  }
  .interventioncard.svelte-d5kl0r dl:where(.svelte-d5kl0r) {
    display:grid; 
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    font-size:12px;
  }
  .interventioncard.svelte-d5kl0r dd:where(.svelte-d5kl0r){
    margin:0;
  }
  .interventioncard.svelte-d5kl0r dt:where(.svelte-d5kl0r){
    font-weight:600;
  }

  .interventioncard.svelte-d5kl0r .students:where(.svelte-d5kl0r) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    width:100%;
    padding: 2px 5px;
    margin: 0 -5px 0 -5px;
  }
  .interventioncard.svelte-d5kl0r .student:where(.svelte-d5kl0r) { /* student button */
    all:unset;
    cursor: pointer;
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    border-radius:4px;
    padding: 2px 5px;
    margin: 0 -5px 0 -5px;
    align-items: center;
  }
  .interventioncard.svelte-d5kl0r .student:where(.svelte-d5kl0r):hover {
    box-shadow:0 0 0 4px #fff, 0 0 0 6px #eee;
  }
 
  .student_marks.svelte-d5kl0r .markbar{
    display:grid;
    grid-template-rows:auto 1fr;
    grid-template-columns: 50px 1fr;
    gap:0 5px;
  }
  .student_marks.svelte-d5kl0r .markbar .marks{
    grid-row:span 2;
    align-items: center;
  }

  .student_marks.svelte-d5kl0r .markbar progress{
    width:100%;
  }

.tabrow.svelte-d5kl0r{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  max-width:100%;
}
.tabrow.svelte-d5kl0r .key:where(.svelte-d5kl0r){
  display:flex;
  gap:15px;
  font-size:12px;
  justify-self: end;
  padding-bottom:10px;
  border-bottom: 1px solid rgba(9, 148, 255, 0.2);
  margin-bottom:12px;
}

.key.svelte-d5kl0r .square:where(.svelte-d5kl0r){
  position:relative;
  padding-left:20px;
}
.key.svelte-d5kl0r .square:where(.svelte-d5kl0r):before{
  content:"";
  position:absolute;
  left:0px;
  top:4px;
  height:10px;
  width:12px;
  background:var(--keycolour,#ccc);
}

.key.svelte-d5kl0r .below:where(.svelte-d5kl0r){--keycolour:#d9534f}
.key.svelte-d5kl0r .average:where(.svelte-d5kl0r){--keycolour:#3fa9f5}
.key.svelte-d5kl0r .above:where(.svelte-d5kl0r){--keycolour:#5cb85c}

 .assignmentRag.svelte-d5kl0r{
    all:unset;
    color:#3fa9f5;
    cursor:pointer;
    padding:2px 4px;
    border-radius:4px;
    transition:color 0.3s,background-color 0.3s;
  }
  .assignmentRag.svelte-d5kl0r:hover{
    background:#3fa9f5;
    color:white;
  }
/* mobile */
@media(max-width: 800px){
  .toolbar.svelte-d5kl0r{
    margin-top:0;
    margin-left:0;
    display:grid;
    grid-template-columns: 1fr 1fr;
  }
  .toolbar.svelte-d5kl0r .dropdown > span > button{
    width:100%
  }
  .hide-sm.svelte-d5kl0r{
    display:none;
  }
  .tabrow.svelte-d5kl0r{
    display:grid;
    grid-template-columns: 1fr;
    align-items: end;
  }
  .tabs.svelte-d5kl0r{
    flex-direction: column;
  }

  .tabs.svelte-d5kl0r li.active:where(.svelte-d5kl0r) a:where(.svelte-d5kl0r){
    border: 1px solid rgba(9, 148, 255, 0.2);
  }
}




.modal-body.svelte-15jhtjj{
  display:grid;
  gap:20px;
  grid-template-columns: 300px 400px;
}

h4.svelte-15jhtjj{
  margin-block: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  color: inherit;
}
p.svelte-15jhtjj{
  margin: 0 0 10px;
}

table.table.svelte-15jhtjj{
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
  border-spacing: 0;
}
table.table.svelte-15jhtjj th:where(.svelte-15jhtjj){
  border-top: 0;
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
  padding: 8px;
  line-height: 1.428571429;
  text-align: left;
}

table.table.svelte-15jhtjj td:where(.svelte-15jhtjj){
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

.table-striped.svelte-15jhtjj > tbody:where(.svelte-15jhtjj) > tr:where(.svelte-15jhtjj):nth-of-type(odd){
  background-color: #f9f9f9;
}


.badgeicon.svelte-15jhtjj{
  border:0px;
  cursor: pointer;
  position: relative;
  text-align: center;
  border-radius: 5px;
  margin: 5px;
  padding: 15px 20px;
  color: white;
  text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 170px;
  gap: 10px;
  transition:transform 0.3s;
}

.badgeicon.svelte-15jhtjj:before{
  color: white;
  content: "";
  font-size: 2rem;
  display: inline-block;
  width: 5em;
  height: 5em;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-position: center;
  background: white;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
}

.badgeicon.svelte-15jhtjj:after{
  content: '';
  position: absolute;
  border-radius: 3px;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
}

.badgeicon.svelte-15jhtjj:hover{
  transform:scale(1.05,1.05);
  z-index:2;
}

.badgeicon.svelte-15jhtjj.school:before{
  -webkit-mask-image: var(--trophy);
  mask-image: var(--trophy);
}
.badgeicon.svelte-15jhtjj.year:before{
  -webkit-mask-image: var(--medal);
  mask-image: var(--medal);
}
.badgeicon.svelte-15jhtjj.class:before{
  -webkit-mask-image: var(--certificate);
  mask-image: var(--certificate);
}

.badgeicon.svelte-15jhtjj.challengeicon:before{
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
}

.badgeicon.svelte-15jhtjj.gold{
  background-color:var(--gold);
}
.badgeicon.svelte-15jhtjj.silver{
  background-color:var(--silver);
} 

.badgeicon.svelte-15jhtjj.bronze{
  background-color:var(--bronze);
}

.badgeicon.svelte-15jhtjj.award.large{
  cursor:default;
}
.badgeicon.svelte-15jhtjj.award.large:hover{
  transform:none;
}

.badgeicon.svelte-15jhtjj.award.large:before{
  height:12em;
  width:8em;
}

.clipbutton.svelte-15jhtjj{
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  background-color: var(--blue);
  transition:background-color 0.3s;
}
.clipbutton.svelte-15jhtjj:hover{
  text-decoration: none;
  background-color:var(--blue-dark);
}



  .filter.svelte-1b9pcuy{
    position:absolute;
    top:3px;
    right:5px;
    width:150px;
  }

  canvas.svelte-1b9pcuy{
    position:fixed;
    inset:0;
    width: 100vw;
    height: 100vh;
    pointer-events:none;
    z-index:2001;
  }

  .awards.svelte-1b9pcuy{
    display:flex;
    flex-wrap: wrap;
    gap:10px;
  }

  .awards.svelte-1b9pcuy .award,.newbadges.svelte-1b9pcuy .award{
    cursor:pointer;
    position:relative;
    text-align:center;
    border-radius:5px;
    margin:5px;
    padding:10px;
    color:white;
    text-shadow: 0px 1px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
    transition:transform 0.3s;
    border:0px;
    max-width:150px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    max-height: 100px;
    gap:5px;
  }

  .awards.svelte-1b9pcuy .award:hover{
    transform:scale(1.1,1.1);
    z-index:2;
  }

  .awards.svelte-1b9pcuy .award:before,.newbadges.svelte-1b9pcuy .award:before{
    color:white;
    content:"";
    font-size: 1.8rem;
    display:inline-block;
    width:4em;
    height:4em;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position:center;
    mask-repeat: no-repeat;
    mask-position:center;
    background:white;
  }

  .awards.svelte-1b9pcuy .award:after,.newbadges.svelte-1b9pcuy .award:after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right:2px;
    height: 50%;
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.2));
    border-radius:3px;
  }

  .awards.svelte-1b9pcuy .award .count{
    position:absolute;
    background:var(--blue-light);
    top:-10px;
    right:-10px;
    width:28px;
    height:28px;
    line-height:24px;
    border-radius:200px;
    z-index:2;
    border:2px solid white;
    box-shadow:0 0 4px rgba(0,0,0,0.5);
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .newbadges.svelte-1b9pcuy{
    /* pointer-events:none; */
    z-index:2000;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    max-width:400px;
    max-height:400px;
    margin:auto;
    font-size:18px;
  }

  .newbadges.svelte-1b9pcuy button:where(.svelte-1b9pcuy){
    all:unset;
    position:absolute;
    top:10px;
    right:15px;
    z-index:100;
    filter:drop-shadow(0px 0px 4px #00000088);
  }

  .newbadges.svelte-1b9pcuy .award{
    position:absolute;
    top:0;
    width:100%;
    min-height:300px;
    max-width:100%;
    opacity:0;
    transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    transform:scale(0);
    padding:50px 30px 10px 30px;
  }

  .newbadges.svelte-1b9pcuy .award .congrats{
    font-size:21px;
    font-weight:800;
    color:white;
    position:absolute;
    top:15px;
    left:0;
    right:0;
    text-align:center;
    filter:drop-shadow(0px 0px 4px #00000088);
    z-index:10;
  }

  .newbadges.svelte-1b9pcuy .award.active{
    opacity:1;
    transform:scale(1);
  }

  .awards.svelte-1b9pcuy .school:before,.newbadges.svelte-1b9pcuy .school:before{
    -webkit-mask-image: var(--trophy);
    mask-image: var(--trophy);
  }
  .awards.svelte-1b9pcuy .year:before,.newbadges.svelte-1b9pcuy .year:before{
    -webkit-mask-image: var(--medal);
    mask-image: var(--medal);
  }
  .awards.svelte-1b9pcuy .class:before,.newbadges.svelte-1b9pcuy .class:before{
    -webkit-mask-image: var(--certificate);
    mask-image: var(--certificate);
  }

  .awards.svelte-1b9pcuy .challengeicon:before,.newbadges.svelte-1b9pcuy .challengeicon:before{
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
  }

  .awards.svelte-1b9pcuy .gold,.newbadges.svelte-1b9pcuy .gold{
    background-color:var(--gold);
  }
  .awards.svelte-1b9pcuy .silver,.newbadges.svelte-1b9pcuy .silver{
    background-color:var(--silver);
  } 

  .awards.svelte-1b9pcuy .bronze,.newbadges.svelte-1b9pcuy .bronze{
    background-color:var(--bronze);
  }
  
  .awards.svelte-1b9pcuy .award.large,.newbadges.svelte-1b9pcuy .award.large{
    cursor:default;
  }
  .awards.svelte-1b9pcuy .award.large:hover,.newbadges.svelte-1b9pcuy .award.large:hover{
    transform:none;
  }

  .awards.svelte-1b9pcuy .award.large:before,.newbadges.svelte-1b9pcuy .award.large:before{
    height:12em;
    width:8em;
  }

  .newBagde.svelte-1b9pcuy{
    position:absolute;
    top:-4px;
    left:-6px;
    width:52px;
    height:50px;
    overflow:hidden;
  }
  .newBagde.svelte-1b9pcuy:before{
    position:absolute;
    content:"NEW";
    background:limegreen;
    border:2px solid hsl(120 61% 70% / 1);
    top:5px;
    left:-18px;
    padding:3px 20px 1px;
    font-size:11px;
    letter-spacing:1px;
    z-index:1;
    transform:rotateZ(-45deg);
    box-shadow:0 1px 4px rgba(0,0,0,0.5)
  }
  .newBagde.svelte-1b9pcuy:after{
    position:absolute;
    content:"";
    background:darkgreen;
    top:10px;
    height:20px;
    width:80px;
    left:-15px;
    padding:4px 20px 2px;
    font-size:11px;
    letter-spacing:1px;
    z-index:-1;
    transform:rotateZ(-45deg)
  }


  table.svelte-1e0edlq{
    border-collapse: collapse;
    width:100%;
    --s-success:#5cb85c;
    --s-info:#3fa9f5;
  }
  thead.svelte-1e0edlq{
    background-color: #e5f5ff;
  }
  th.svelte-1e0edlq,td.svelte-1e0edlq{
    text-align: left;
    padding:10px;
    vertical-align: top;
    position: relative;
  }
  tbody.svelte-1e0edlq tr:where(.svelte-1e0edlq){
    border-bottom:1px solid #ddd;
  }

  tbody.svelte-1e0edlq tr:where(.svelte-1e0edlq):last-child{
    border-bottom: none;
  }

  tbody.svelte-1e0edlq tr:where(.svelte-1e0edlq):hover{
    background-color: #f5f5f5;
  }

  .meta.svelte-1e0edlq{
    display:flex;
    justify-content: space-between;
  }

  .circle.svelte-1e0edlq{
    display:inline-block;
    width:15px;
    height:15px;
    border-radius:50%;
  }




  
h3.svelte-1a4s0i7{
  font-weight: normal;
  font-size:1.5em;
  padding:0;
  margin:0 0 15px 0;
}

.studentmarks.svelte-1a4s0i7{
  padding:0 15px;
  display:grid;
  gap:20px;
  grid-template-areas: 
    "awards awards"
    "col1 col2";
}

.awards_grid.svelte-1a4s0i7{
  grid-area:awards;
}

.col1.svelte-1a4s0i7{
  grid-area:col1;
}
.col2.svelte-1a4s0i7{
  grid-area:col2;
}

.studentmarks.svelte-1a4s0i7 .awards{
  gap:0px;
  margin:0 -5px;
}

.studentmarks.svelte-1a4s0i7 .awards .award{
  max-width:100px;
  max-height:100px;
  font-size:0.8em;
}
.studentmarks.svelte-1a4s0i7 .awards .award:before{
  width:2em;
}

.tools.svelte-1a4s0i7{
  position:absolute;
  top:68px;
  right:14px;
  display:flex;
  gap:5px;
  --s-button-margins:0;

}
.tools.svelte-1a4s0i7 button,.tools.svelte-1a4s0i7 a{
  font-size:12px;
  padding:4px 8px;
  display: flex;
  align-items: center;
  gap:2px;
  height:auto;
}



  .tabs.svelte-vl9kax{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:end;
    margin:10px;
    --border-color:rgba(9,148,255,0.2);
    min-height:50px;
    box-shadow:inset 0 -1px 0 0 var(--border-color)
  }

  @supports selector(::-webkit-scrollbar) {
    ul.svelte-vl9kax::-webkit-scrollbar {
      width: 1px;
      height: 8px;
      background-color:rgba(9,148,255,0.2);
      border-radius:4px;
    }
    ul.svelte-vl9kax::-webkit-scrollbar-thumb {
      background-color:rgba(9,148,255,0.4);
      border-radius:4px;
    }
  }
  
  ul.svelte-vl9kax{
    display:flex;
    height:100%;
    list-style:none;
    padding:0;
    margin:0;
    max-width:100%;
    overflow-x:auto;
    overflow-y: hidden;
    align-items:end;
  }
  li.svelte-vl9kax{
    margin:10px 0 0 0;
    padding:0;
    position:relative;
  }
  li.svelte-vl9kax a:where(.svelte-vl9kax){
    display:block;
    padding:10px 15px;
    text-decoration:none;
    border:1px solid transparent;
  
  }

  li.active.svelte-vl9kax a:where(.svelte-vl9kax){
    border-color:var(--border-color);
    border-radius: 5px 5px 0 0;
    background-color: white;
    border-bottom:0px;
  }

  li.active.svelte-vl9kax{
    box-shadow:0px 2px 0 0 white;
  }

  .number.svelte-vl9kax{
    display: inline-block;
    padding: 0 5px;
  }

  .practice-correct.svelte-vl9kax{
    color:#5cb85c;
    display:inline-flex;
    gap:2px;
    font-size:12px;
  }

  .warning.svelte-vl9kax{
    background: #fec600;
    color: white;
    border-radius: 3px;
  }

  .success.svelte-vl9kax{
    background: #5cb85c;
    color: white;
    border-radius: 3px;
  }

  .hidden.svelte-vl9kax{
    color:red;
    position:absolute;
    top:1px;
    right:6px;
    font-weight:bold;
  }

  .feedback.svelte-vl9kax{
    position:absolute;
    top:0px;
    right:2px;
    color:#ccc;
    font-size:11px;
  }
  .feedback.unread.svelte-vl9kax{
    color:var(--mworange);
  }
  





  .overlay.svelte-1k3k9n8{
    position:absolute;
    inset:0;
    width:100%;
    pointer-events: none;
  }
  .label.svelte-1k3k9n8{
    position:absolute;
    z-index:3;
    inset:0;
    width:100%;
    color:black;
  }
  .label.svelte-1k3k9n8 :is(h1,h2,h3,h4,h5,h6,p){
    margin:0; 
    color:black;
    font-family:arial;
    letter-spacing: -0.015em;
  }
  .label.svelte-1k3k9n8 h1 {font-size:2em }
  .label.svelte-1k3k9n8 h2 {font-size:1.8em }
  .label.svelte-1k3k9n8 h3 {font-size:1.5em }
  .label.svelte-1k3k9n8 p {font-size:1em}
  .overlay.svelte-1k3k9n8 .label:where(.svelte-1k3k9n8) .preview{
    padding:0;
  }


  .freeform.svelte-1k3k9n8{
    position:absolute;
  }
  .freeform.svelte-1k3k9n8 .textarea:where(.svelte-1k3k9n8){
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    pointer-events: all;
    border:1px solid #3fa9f5;
    background:white;
    position:absolute;
    inset:0;
    padding:6px 8px;
    font-size: clamp(11px, 1vw + 5px, 19px);
    border-radius:4px;
    box-shadow: inset 2px 2px 5px rgba(9, 148, 255, 0.25);
    resize: none;
  }
  .freeform.svelte-1k3k9n8 .textarea:where(.svelte-1k3k9n8):focus{
    outline: 1px solid #3fa9f5;
  }
  .correct.svelte-1k3k9n8 .textarea:where(.svelte-1k3k9n8){
    background:rgba(92,184,92,0.2);
    border:2px solid #5cb85c
  }
  .showanswers.svelte-1k3k9n8{
    color:red;
  }

  .freeform.svelte-1k3k9n8 .textarea:where(.svelte-1k3k9n8)::placeholder {
    font-family: inherit;
    opacity: 0.5;
  }

  .picker.svelte-1k3k9n8 button{
    pointer-events: all;
    display:grid;
    height:20px;
    width:20px;
    margin: 0;
    place-content: center;
    border: none;
    background: #888;
    color: #fff;
    position:absolute;
    top:10px;
    right:10px;
    border-radius: 3px;
    line-height:20px;
    z-index:10;
  }
  .picker.svelte-1k3k9n8 button .d-icon{
    top:0px;
  }
  .pop-content.svelte-1k3k9n8 h3:where(.svelte-1k3k9n8){
    margin:0;
    padding:3px 0 10px 0;
  }
  .pop-content.svelte-1k3k9n8 .buttons:where(.svelte-1k3k9n8){
    --s-button-margins:0;
    display:grid;
    grid-template-columns: repeat(5,auto);
    gap:5px;
    font-size:21px;
  }
  .pin.svelte-1k3k9n8{
    all:unset;
    font-size:21px;
    position:absolute;
    top:2px;
    right:2px;
    cursor:pointer;
    padding:3px 5px;
    border-radius:3px;
    transition:background 0.2s;
  }
  .pin.svelte-1k3k9n8:hover{
    background:rgba(0,0,0,0.1)
  }



  .handle.svelte-pk0jq5{
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.2);
    transform:translate(-50%,-50%);
    cursor: pointer;
    border:0px;
    border-radius: 1000px;
    z-index:101;
  }


    .pivot.svelte-u4mc89{
      position:absolute;
      top:0;
      left:0;
      outline:1px solid red;
    }
    .ruler.svelte-u4mc89 .svgwrap:where(.svelte-u4mc89){
      position:relative;
      width:100%;
      overflow:hidden;
      height:120px;
    }
    .ruler.svelte-u4mc89 svg:where(.svelte-u4mc89){
      position:absolute;
      top:0;
    }
    .ruler.svelte-u4mc89 {
      position:absolute;
      transform-origin:top left;
      cursor:move;
      background:rgba(0,0,0,0.1);
      box-shadow:0 0 5px rgba(0,0,0,0.7);
      z-index:2;
    }
    .ruler.svelte-u4mc89 .handle:where(.svelte-u4mc89){
      background:#FDC641;
      position: absolute;
      right:0;
      top:0;
      bottom:0;
      width:20px;
      display:grid;
      place-items:center;
      cursor:pointer;
      color:white;
    }

    .ruler.svelte-u4mc89 .handle.resize:where(.svelte-u4mc89){
      right:22px;
      top:0px;
      bottom:0;
      width:25px;
      cursor:pointer;
    }

    .ruler.svelte-u4mc89 .pencil:where(.svelte-u4mc89){
      background:#135CA6;
      height:21px;
      width:10px;
      position: absolute;
      left:0px;
      margin-left:-5px;
      top:-30px;
      cursor:pointer;
    }
    .ruler.svelte-u4mc89 .pencil:where(.svelte-u4mc89):after{
      content:" ";
      border:10px solid #135CA6;
      border-width:10px 5px 5px;
      border-color:#135CA6 transparent transparent;
      position: absolute;
      left:0;
      top:20px;
    }
  


  .compass.svelte-ix7e99{
    border-radius:15px 0 0 15px;
    height:30px;
    position:absolute;
    transform-origin:15px center;
    cursor:move;
    background:rgba(210,210,210,0.8);
    box-shadow:0 0 5px rgba(0,0,0,0.7);
    display:flex;
    align-items: center;
  }

  .compass.svelte-ix7e99 .radius:where(.svelte-ix7e99){
    color:#444;    
    position:absolute;
    top:-20px;
    left:20px;
  }

  .compass.svelte-ix7e99 .center:where(.svelte-ix7e99) {
    color:#444;
    width:30px;
    display:grid;
    place-items:center;
  }

  .compass.svelte-ix7e99 .pencil:where(.svelte-ix7e99){
    background:#135CA6;
    height:20px;
    width:21px;
    position: absolute;
    right:0;
    top:5px;
    cursor:pointer;
  }
  .compass.svelte-ix7e99 .pencil:where(.svelte-ix7e99):after{
    content:" ";
    border:10px solid #135CA6;
    border-width:10px 10px 10px 20px;
    border-color: transparent transparent transparent #135CA6;
    position: absolute;
    left:20px;
    top:0px;
  }
  .compass.svelte-ix7e99 .handle:where(.svelte-ix7e99){
    position:absolute;
    right:62px;
    top:0;
    bottom:0;
    background:#FDC641;
    width:30px;
    cursor:pointer;
    color:white;
    font-size:20px;
    line-height:30px;
    text-align:center;
  }

  .compass.svelte-ix7e99 .rotate:where(.svelte-ix7e99){
    right:30px;
  }


  .protractor.svelte-1pr6dsn{
    position:absolute;
    display:block;
    box-sizing: border-box;
    z-index:2;
    transform-origin:left bottom;
  }
  .protractor.svelte-1pr6dsn .pivot:where(.svelte-1pr6dsn){
    position:absolute;
    bottom:0px;
    left:0px;
  }

  .protractor.svelte-1pr6dsn .circle:where(.svelte-1pr6dsn){
    width:200%;
    position:absolute;
    bottom:-6.5%;
    margin-bottom:-10%;
    left:-100%;
    border-radius: 5000px 5000px 0 0;
    transform-origin:center 160px;
    transform:rotate(0deg);
    cursor:move;
    background:rgba(255,255,255,0.2);
  }
  .protractor.svelte-1pr6dsn .handle:where(.svelte-1pr6dsn),.protractor.svelte-1pr6dsn .handle3:where(.svelte-1pr6dsn){
    background:#FDC641;
    position: absolute;
    right:auto;
    bottom:-14px;
    width:20px;
    height:18px;
    cursor:pointer;
    color:white;
    font-size:12px;
    padding:0px 5px;
    display:grid;
    place-items:center;
  }
  .protractor.svelte-1pr6dsn .handle3:where(.svelte-1pr6dsn){
    right:0px;
    left:auto;
  }
  .protractor.svelte-1pr6dsn .handle.blue:where(.svelte-1pr6dsn){
    top:-15px;
    right:0px;
    width:105%;
    height:30px;
    border-radius:15px 0 0 15px;
    background:rgba(0,0,0,0.05);
    margin-top:0;
  }
  .protractor.svelte-1pr6dsn .measure:where(.svelte-1pr6dsn){
    position:absolute;
    height:1px;
    width:100%;
    bottom:-2px;
    left:0;
    transform-origin:left;
    background:black;
  }

  .protractor.svelte-1pr6dsn .lock:where(.svelte-1pr6dsn){
    position:absolute;
    left:50%;
    margin-left:-15px;
    width:30px;
    bottom:-20px;
    line-height:30px;
    text-align:center;
    border-radius:50%;
    color:#999;
    cursor:pointer;
    z-index:5;
  }


.paper.svelte-1q34q2j {
  width: 300px;
  height: 300px;
  background: rgba(0,0,0,0.1);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  position: absolute;
  top: 20px;
  left: 20px;
  cursor: move;
  transform-origin: center center;
}

.pivot.svelte-1q34q2j{
  position: absolute;
  width: 0px;
  height: 0px;
  top: 50%;
  left: 50%;
}

.paper.svelte-1q34q2j .center:where(.svelte-1q34q2j) {
  position: absolute;
  translate:-50% -50%;
  width:30px;
  height:30px;
  display: grid;
  place-items: center;
}
.paper.svelte-1q34q2j .rotatehandle:where(.svelte-1q34q2j),
.paper.svelte-1q34q2j .fliph:where(.svelte-1q34q2j),
.paper.svelte-1q34q2j .flipv:where(.svelte-1q34q2j) {
  border:0px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: #fdc641;
  color: #fff;
  cursor: pointer;
  display:grid;
  place-items:center;
}
.paper.svelte-1q34q2j .fliph:where(.svelte-1q34q2j) {
  pointer-events: all;
  z-index: 100;
  top: 0;
  right: auto;
  left: -10px;
  bottom: auto;
  padding: 2px;
  height: 20px;
  cursor: pointer;
}
.paper.svelte-1q34q2j .flipv:where(.svelte-1q34q2j) {
  z-index: 100;
  pointer-events: all;
  left: 0;
  right: auto;
  top: -10px;
  bottom: auto;
  padding: 2px;
  height: 20px;
  cursor: pointer;
  transform: rotate(90deg);
}
.paper.svelte-1q34q2j .vcross:where(.svelte-1q34q2j) {
  pointer-events: none;
  position: absolute;
  width: 0;
  top: 0;
  bottom: 0;
  left: 150px;
  height: 300px;
  border-left: 1px solid rgba(0,0,0,0.1);
}
.paper.svelte-1q34q2j .hcross:where(.svelte-1q34q2j) {
  pointer-events: none;
  position: absolute;
  height: 0;
  left: 0;
  right: 0;
  top: 150px;
  width: 300px;
  border-top: 1px solid rgba(0,0,0,0.1);
}


  .drawing-overlay.svelte-1824kbk{
    position: absolute;
    inset:0;
    overflow:hidden;
    pointer-events: none;
  }
  .drawing-overlay.svelte-1824kbk *{
    pointer-events: all;
  }
  .drawing-overlay.svelte-1824kbk canvas:where(.svelte-1824kbk){
    pointer-events:none;
  }

  .drawing-overlay.svelte-1824kbk .active{
    z-index:100;
    opacity:1;
    transition:opacity 0.5s;
  }

  .drawing-overlay.svelte-1824kbk .ruler:not(.active),
  .drawing-overlay.svelte-1824kbk .compass:not(.active),
  .drawing-overlay.svelte-1824kbk .protractor:not(.active),
  .drawing-overlay.svelte-1824kbk .paper:not(.active){
    opacity:0.5;
  }




  .mathsinput.svelte-117xdtf{
    position: relative;
    flex:1;
    align-self: end;
  }

  .form-control.mathquill-editable.svelte-117xdtf {
    padding: 10px 5px;
    min-height: 35px; 
    font-size: 21px;
    border-radius: 5px;
    border: 1px solid rgba(9,148,255,0.2);
    background:white;
    width:100%;
    outline:0;
    box-shadow:inset 1px 1px 5px rgba(9, 148, 255, 0.5);
  }

  .form-control.mathquill-editable.hasprefix.svelte-117xdtf{
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0;
    margin-left:-2px;
  }

  .suffix.svelte-117xdtf,.prefix.svelte-117xdtf{
    border: 1px solid rgba(9,148,255,0.2);
    background:white;
    align-self: stretch;
    padding: 5px;
    display: flex;
    align-items: center;
    font-size:21px;
    color:black;
  }
  .prefix.svelte-117xdtf{
    border-radius: 5px 0 0 5px;

  }
  .suffix.svelte-117xdtf{
    border-radius: 0 5px 5px 0;
  }
  .picker.svelte-117xdtf button{
    display:grid;
    height:20px;
    width:20px;
    margin: 0;
    place-content: center;
    border: none;
    background: #888;
    color: #fff;
    position:absolute;
    top:calc(50% - 10px);
    right:10px;
    border-radius: 3px;
    line-height:20px;
  }
  .picker.svelte-117xdtf button .d-icon{
    top:0px;
  }
  .pop-content.svelte-117xdtf{
    padding:0;
    margin:-5px -10px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size:21px;
    gap:2px;
  }

  .pop-content.svelte-117xdtf button:where(.svelte-117xdtf){
    font-family: symbola, "Times New Roman", serif;
    padding: 5px 10px;
    border: none;
    background: #f4f4f4;
    font-size:inherit;
  }
  .pop-content.svelte-117xdtf button:where(.svelte-117xdtf):hover{
    background: #eee;
  }




  .drawingtools.svelte-1pwmhsk{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    --s-button-margins:0px;
    padding:5px;
    gap:2px;
  }

  svg.svelte-1pwmhsk{
    height:1em;
    transform: scale(1.5);
  }

  sup.svelte-1pwmhsk{
    font-size: 10px;
    transform: translate(-7px,-5px);
    display: inline-block;
  }

  .drawingtools.svelte-1pwmhsk .toolwrap{
    width:100%;
    height: 100%;
    padding: 10px 0;
  }

  .elements.svelte-1pwmhsk{
    padding:5px;
    --s-button-margins:0px;
  }

  .drawingtools.svelte-1pwmhsk button.sbtn.lg{
    height: 100%;
    padding: 0;
  }

  .elements.svelte-1pwmhsk table:where(.svelte-1pwmhsk){
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .elements.svelte-1pwmhsk th:where(.svelte-1pwmhsk), .elements.svelte-1pwmhsk td:where(.svelte-1pwmhsk) {
    padding:4px 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  .elements.svelte-1pwmhsk tbody:where(.svelte-1pwmhsk){
    background:white;
  }

  .elements.svelte-1pwmhsk tbody:where(.svelte-1pwmhsk) tr:where(.svelte-1pwmhsk):hover{
    background:var(--blue);
    color:white;
  }




  .answers.svelte-1j9q07w{
    position:sticky; /* for tall questions, keeps tools on screen #613 */
    top:0
  }
  .prefix.svelte-1j9q07w{
    min-width:60px;
    text-align:right;
    padding:0 10px;
    white-space: nowrap;
    font-weight:bold;
  }
  .multiple.svelte-1j9q07w{
    display:flex;
    gap:10px;
  }
  .answerrow.svelte-1j9q07w{
    --s-button-margins:0;
    padding:15px;
    border-bottom:2px solid white;
    max-width:100%;
    transition:background 0.3s;
  }

  .answerrow.correct.svelte-1j9q07w{
    background:#94D094;
  }

  .answerwidth.svelte-1j9q07w{
    display:flex;
    align-items: center;
  }

  .answers.svelte-1j9q07w .form-row{
    width:100%;
    --s-formrow-margins:0;
  }

  .answers.svelte-1j9q07w .form-row input{
    flex:1;
    min-width:100px;
  }
  .answers.svelte-1j9q07w .form-row [slot=prefix],.answers.svelte-1j9q07w .form-row [slot=suffix]{
    background:white;
  }
  /* (unused) .answers span.suffix,.answers span.prefix{
    border:1px solid rgba(9,148,255,0.2);
  }*/

  .toolbar.svelte-1j9q07w{
    display:flex;
    justify-content:flex-end;
    padding:10px;
  }

  .showanswers.svelte-1j9q07w .form-control, .showanswers.svelte-1j9q07w .form-row.form-row > input.form-input{
    color:red;
  }

  .symbolpicker.svelte-1j9q07w{
    position:relative;
  }
  .symbolpicker.svelte-1j9q07w h4:where(.svelte-1j9q07w){
    margin:0;
    color:white;
    background: linear-gradient(to top, #279ef4 80%, #57b4f6);
    padding:10px 15px;
    margin:0;
    color: #fff;
    box-shadow: var(--blue-shadow);
    font-size: 16px;
    border-radius: 5px 5px 0 0;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
  }

  .symbolpicker.svelte-1j9q07w .pin:where(.svelte-1j9q07w){
    all:unset;
    font-size:21px;
    position:absolute;
    top:2px;
    right:10px;
    cursor:pointer;
    padding:3px 5px;
    border-radius:3px;
    transition:background 0.2s;
    color:white;
  }

  .symbolpicker.svelte-1j9q07w .buttons:where(.svelte-1j9q07w){
    padding:15px;
    --s-button-margins:0;
    display:grid;
    grid-template-columns: repeat(5,auto);
    gap:5px;
    font-size:21px;
  }

  .multi-notice.svelte-1j9q07w{
    margin:7px 0 0 0;
    text-align: center;
  }


  .calc.svelte-q4d7aw{
    position:relative;
    font-size:45px;
    color:#0a76c4;
    line-height:40px;
    padding:2px 0 5px 5px;
  }
  .sub.svelte-q4d7aw{
    position:absolute;
    top:35px;
    right:-5px;
    background:white;
    font-size:22px;
    line-height: 18px;
    border-radius:20px;
    border:1px solid white;
  }
  .notallowed.svelte-q4d7aw{
    color:red;
  }
  .allowed.svelte-q4d7aw{
    color:#00dd00;
  }




  .trophy.svelte-zpz16u{
    position:relative;
    font-size:45px;
    color:#0a76c4;
    line-height:40px;
  }
  .star.svelte-zpz16u{
    position:absolute;
    top:6px;
    left:14px;
    font-size:16px;
    line-height: 14px;
    color:#ffc107;
  }
  .label.svelte-zpz16u{
    line-height:12px;
    font-size:12px;
    text-align:center;
  }


  .badge.svelte-q4ipwn{
    --badgecolour: #0a0;
  }


/* .congratspopup {
    --badgecolour: #0a0;
    --fullscale: scale(1);
    position: fixed;
    top: 10%;
    left: 50%;
    width: 220px;
    padding: 0 0px 20px 0px;
    margin-left: -110px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    animation: zoomin 4s ease forwards;
}
  .congratspopup h4 {
    color: var(--badgecolour);
    text-align: center;
    font-weight: bold;
}
  .congratspopup button {
    display: block;
    margin: 20px auto;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
}
  .congratspopup .message {
    display: block;
    margin: 0px auto;
    background: var(--badgecolour);
    padding: 10px;
    color: #fff;
    width: 190px;
    text-align: center;
    border-radius: 5px;
    opacity: 0;
    animation: tada 1s ease-in 1.2s forwards;
} */
  .checkmark__circle.svelte-q4ipwn {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--badgecolour);
    fill: none;
    animation: svelte-q4ipwn-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
  .checkmark.svelte-q4ipwn {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: block;
    stroke-width: 4;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 20px auto;
    box-shadow: inset 0px 0px 0px var(--badgecolour);
    animation: svelte-q4ipwn-fill 0.4s ease-in-out 0.4s forwards, svelte-q4ipwn-scale 0.3s ease-in-out 0.9s both;
}
  .checkmark__check.svelte-q4ipwn {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: svelte-q4ipwn-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
  
  @keyframes svelte-q4ipwn-zoomin {
    0% { transform: scale(0);}
    10%, 90% {transform: var(--fullscale);}
    100% {transform: scale(0);}
  }

  @keyframes svelte-q4ipwn-stroke {
    100% {
      stroke-dashoffset: 0;
  }
}
  
  @keyframes svelte-q4ipwn-scale {
    0%, 100% {
      transform: none;
  }
    50% {
      transform: scale3d(1.1, 1.1, 1);
  }
}
  
  @keyframes svelte-q4ipwn-fill {
    100% {
      box-shadow: inset 0px 0px 0px 70px var(--badgecolour);
  }
}
  
  @keyframes svelte-q4ipwn-tada {
    0% {
      opacity: 0;
      transform: scale3d(1, 1, 1);
  }
    10%, 20% {
      opacity: 1;
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
    30%, 50%, 70%, 90% {
      transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 3deg);
  }
    40%, 60%, 80% {
      transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -3deg);
  }
    100% {
      transform: scale3d(1, 1, 1);
      opacity: 1;
  }
}


.gradetable.svelte-2o11wa {
  position: relative;
  height: 22px;
  margin-bottom: 20px;
}
.gradetable.svelte-2o11wa table:where(.svelte-2o11wa) {
  position: absolute;
  z-index:1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  table-layout: fixed;
  font-size:12px;
  line-height:20px;
  border-collapse: collapse;
  border:0;
}
.gradetable.svelte-2o11wa td:where(.svelte-2o11wa) {
  text-align: center;
  border: 1px solid #ccc;
  color: rgba(255,255,255,0.4);
  position: relative;
  border-width:0px 0px 0px 1px;
}
.gradetable.svelte-2o11wa .grademarks:where(.svelte-2o11wa) {
  position: absolute;
  bottom: -18px;
  padding: 5px 0 0 0;
  left: -1px;
  right: 0;
  border-left: 1px dotted #ccc;
  font-size: 11px;
  color: #444;
  text-align: center;
  z-index: 10;
}
.gradetable.svelte-2o11wa .sprogress {
  position:absolute;
  inset:1px 1px 3px 1px;
  background-color: #ddd;
  height: 18px;
}
.gradetable.svelte-2o11wa .sprogress .sbar {
  height: 18px;
}

.gradetable.svelte-2o11wa .bold:where(.svelte-2o11wa) {
  color: #fff;
  text-shadow: 0 0px 2px rgba(0,0,0,0.2);
}



  .video.svelte-1h6kd8j{
    background:#1a1a1a;
    aspect-ratio: 4 / 3;
    color:white;
    display:grid;
    grid-template-areas: "all";
    grid-template-rows: 1fr;
    border-radius: 0 0 5px 5px;
    overflow:hidden;
    position:relative;
    isolation: isolate;
  }

  .logo.svelte-1h6kd8j{
    grid-area: all;
    align-self: center;
    justify-self: center;
    text-align: center;
    padding-top:10%;
    background:transparent;
    border:0;
    color:inherit;
    cursor:pointer;
    width:100%;
    height: auto;
  }

  video.svelte-1h6kd8j{
    width:100%;
    height: auto;
    border-radius: 0 0 5px 5px;
    grid-area: all;
    align-self: center;
    justify-self: center;
  }

  img.logo.svelte-1h6kd8j{
    position:absolute;
    top:-20%;
    right:0;
    left:0;
    z-index:-1;
  }

  iframe.svelte-1h6kd8j{
    width:100%;
    height: 100%;
    border-radius: 0 0 5px 5px;
    grid-area: all;
    align-self: center;
    justify-self: center;
  }

  h3.svelte-1h6kd8j{
    font-size:clamp(14px,2vw + 10px,42px);
  }
  p.svelte-1h6kd8j{
    font-size:clamp(12px,1vw + 10px,21px);
  }

  small.svelte-1h6kd8j{
    font-size: 65%;
    font-weight: normal;
    line-height: 1;
    color: #777;
  }





  pre.svelte-1cdnac9{
    white-space: pre-wrap;
    font-family: inherit;
  }

  .overview.svelte-1cdnac9{
    padding:0 15px 15px 15px;
  }

  .progress_overview.svelte-1cdnac9{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .progress_overview.svelte-1cdnac9 > *{
    flex:1;
  }

  h3.svelte-1cdnac9,h4.svelte-1cdnac9{
    font-family:'Muli',sans-serif;
    font-size:24px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  h4.svelte-1cdnac9{
    font-size: 18px;
  }

  .vidlist.svelte-1cdnac9{
    list-style-type: none;
    padding:0;
    margin:0;
    border:1px solid #ddd;
    border-radius:10px;
  }
  .clipid.svelte-1cdnac9{
    display:inline-block;
    min-width:80px;
  }
  .vidlist.svelte-1cdnac9 li:where(.svelte-1cdnac9){
    display:flex;
    justify-content: space-between;
    border-bottom:1px solid #ddd;
    padding:8px 15px;
    flex-wrap:wrap;
  }
  .vidlist.svelte-1cdnac9 li:where(.svelte-1cdnac9) .buttons:where(.svelte-1cdnac9){
    display:flex;
    flex-wrap:wrap;
  }


  .vidlist.svelte-1cdnac9 li:where(.svelte-1cdnac9):last-child{
    border-bottom:none;
  }


  .question.svelte-1cdnac9 {
    display:grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
    "progressarea answercol" 
    "questioncontent answercol";
  }

  .progressarea.svelte-1cdnac9{
    grid-area:progressarea;
    min-height:40px;
    padding:15px;
    display:grid;
    gap:10px;
    grid-template-columns: 1fr auto;
    grid-template-areas:"progress icons";
  }
  .progressarea.svelte-1cdnac9 .progress:where(.svelte-1cdnac9){
    grid-area:progress;
    display:flex;
    gap:10px;
  }
  .progressarea.svelte-1cdnac9 .progress:where(.svelte-1cdnac9) > *{
    flex:1;
  }

  .icons.svelte-1cdnac9{
    grid-area:icons;
    display:flex;
    gap:15px;
  }
  .questioncontent.svelte-1cdnac9{
    grid-area:questioncontent;
    position:relative;
    overflow:hidden;
  }

  .questioncontent.svelte-1cdnac9 img:where(.svelte-1cdnac9){
    display:block;
    max-width:100%;
    height:auto;
  }

  .answercol.svelte-1cdnac9{
    grid-area:answercol;
    background:rgba(39,158,244,0.1);
    display:flex;
    flex-direction: column;
    position:relative;
  }

  .answercol.svelte-1cdnac9 .blockheader:where(.svelte-1cdnac9){
    background: linear-gradient(to top,#279ef4 80%,#57b4f6);
    color: #fff;
    box-shadow: var(--blue-shadow);
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px 5px 0 0;
    margin:0;
    display:flex;
  }
  .answercol.svelte-1cdnac9 .icons:where(.svelte-1cdnac9){
    position:absolute;
    bottom:10px;
    left:10px;
    scale:0.9;
  }

  .answercol.svelte-1cdnac9 .blockheader:where(.svelte-1cdnac9) > :where(.svelte-1cdnac9){
    padding: 15px;
    flex:999999;
  }
  .answercol.svelte-1cdnac9 .blockheader:where(.svelte-1cdnac9) .attempts:where(.svelte-1cdnac9){
    flex:auto;
    background: rgba(0,0,0,0.2);
  }
  .answercol.svelte-1cdnac9 .blockheader:where(.svelte-1cdnac9) .showanswers:where(.svelte-1cdnac9){
    all:unset;
    flex:auto;
    background-color: #d9534f;
    box-shadow: var(--btn-shadow);
    border-radius: 0 5px 0 0;
    font-size:inherit;
    color:inherit;
    padding:15px;
    cursor:pointer;
    transition: background-color 0.3s;
  }

  .answercol.svelte-1cdnac9 .blockheader:where(.svelte-1cdnac9) .showanswers:where(.svelte-1cdnac9):hover{
    background-color: #c9302c;
  }

  .answercol.svelte-1cdnac9 .teachertools:where(.svelte-1cdnac9){
    display:flex;
    justify-content:flex-end;
    padding:10px 5px;
  }
  
  .timeinfo.svelte-1cdnac9{
    background-color:var(--dark-blue);
    color:white;
    display:flex;
    justify-content:space-between;
    padding:10px 15px;
  }
  
  .congratsbadge.svelte-1cdnac9{
    grid-area:questioncontent;
    padding:50px 0;
  }

  .question.svelte-1cdnac9:has(.congratsbadge:where(.svelte-1cdnac9)){
    grid-template-columns: 1fr;
    grid-template-areas:
    "progressarea" 
    "questioncontent";
  }

  .tools.svelte-1cdnac9 {
    display:flex;
    gap:10px;
    --s-button-margins:0;
    padding:15px;
    flex-wrap:wrap;
  }

  .marks.svelte-1cdnac9{
    background:var(--blue);
    color:white;
    position:absolute;
    top:66px;
    right:11px;
    font-size:12px;
    display:grid;
    place-content: center;
    height:34px;
    padding:0 10px;
    border-radius:0 5px 5px 0;
  }

  .blurblock.svelte-1cdnac9{
    position: fixed;
    inset:0;
    backdrop-filter: blur(10px);
    background-color:rgba(0,0,0,0.8);
    display:grid;
    place-content: center center;
    z-index:100;
    color:white;
  }
  .blurblock.svelte-1cdnac9 > h2:where(.svelte-1cdnac9){
    text-align:center;
    font-size:clamp(21px,8vw,50px);
    margin:0;
  }
  .blurblock.svelte-1cdnac9 > p:where(.svelte-1cdnac9){
    text-align:center;
    font-size:clamp(16px,2vw,21px);
    margin:10px 0 0 0;
  }

  @media (max-width: 768px) {
    .question.svelte-1cdnac9 {
      grid-template-columns: 1fr;
      grid-template-areas:
      "progressarea"
      "questioncontent"
      "answercol";
    }
  }


  .multiselect.svelte-1qxc5es .dropdown{
    display:block;
  }
  .multiselect.svelte-1qxc5es .dropdown-menu{
    width:auto;
    left:5px;
    right:5px;
    max-height:200px;
    overflow:auto;
  }
  .tick.svelte-1qxc5es{
    visibility: hidden;
    display:inline-block;
  }
  .tick.visible.svelte-1qxc5es{
    visibility: visible;
  }

  .tags.svelte-1qxc5es{
    --s-button-margins:0;
    display:flex;
    gap:4px;
    flex-wrap: wrap;
  }
  .placeholder.svelte-1qxc5es{
    line-height:26px;
    padding:0 5px;
    font-weight: normal;
    color:#777;
  }

  .form-control.svelte-1qxc5es{
    border-radius: 5px;
    border: 1px solid rgba(9, 148, 255, 0.2);
    box-shadow: inset 1px 1px 5px rgb(9 148 255 / 50%);
    padding:3px 20px 0px 3px;
    height:auto;
    min-height:30px;
    background:white url("data:image/svg+xml;utf8,<svg fill='currentColor' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z' fill='grey' /><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 50%
  }

  .disabled.svelte-1qxc5es{
    pointer-events: none;
    opacity:0.7;
  }
  .hiddeninput.svelte-1qxc5es{
    position:absolute;
    opacity:0
  }





  .picker.svelte-1u4pf6a button{
    pointer-events: all;
    display:grid;
    height:20px;
    width:20px;
    margin: 0;
    place-content: center;
    border: none;
    background: #888;
    color: #fff;
    position:absolute;
    top:10px;
    right:10px;
    border-radius: 3px;
    line-height:20px;
    z-index:10;
  }
  .picker.svelte-1u4pf6a button .d-icon{
    top:0px;
  }
  .pop-content.svelte-1u4pf6a h3:where(.svelte-1u4pf6a){
    margin:0;
    padding:3px 0 10px 0;
  }
  .pop-content.svelte-1u4pf6a .buttons:where(.svelte-1u4pf6a){
    --s-button-margins:0;
    display:grid;
    grid-template-columns: repeat(5,auto);
    gap:5px;
    font-size:21px;
  }



  .panel.svelte-gqfv7b{
    background:#a0d4fa;
    padding:15px;
  }
  .addmessage.svelte-gqfv7b{
    display:grid;
    grid-template-columns:220px 1fr;
    grid-template-areas: 
      "name message"
      "- toolbar";
  }
  .name.svelte-gqfv7b{
    grid-area: name;
    padding:10px;
  }
  .when.svelte-gqfv7b{
    color:white;
    --s-button-margins:0;
  }
  .message.svelte-gqfv7b{
    grid-area: message;
    padding: 5px;
    margin: 5px 10px;
    -webkit-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
    background: #e9f5fe;
    border: 5px solid #d0eafd;
    color: #085993;
    position: relative;
  }
  .message.svelte-gqfv7b textarea:where(.svelte-gqfv7b){
    font-family: inherit;
    font-size: inherit;
    background: #fff;
    resize: none;
    width:calc(100% - 10px );
    margin:-5px -5px -10px -5px;
    padding:10px;
    border:0px;
    border-radius:2px;
  }
  .message.svelte-gqfv7b pre:where(.svelte-gqfv7b){
    font-family: inherit;
    padding:5px;
    margin:0;
  }
  .toolbar.svelte-gqfv7b{
    --s-formrow-margins:0;
    --s-labelwidth:0;
    grid-area: toolbar;
    padding:10px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;

  }
  .toolbar.svelte-gqfv7b > :first-child{
    --s-labelwidth:80px;
    flex:1;
  }

  @media (max-width: 840px) {
    .addmessage.svelte-gqfv7b{
      grid-template-columns:1fr;
      grid-template-areas: 
        "name"
        "message"
        "toolbar";
    }
    .toolbar.svelte-gqfv7b {
      display:block;
    }
    .toolbar.svelte-gqfv7b > *{
      justify-content: end;
    }
  }




  .containerwrap.svelte-1k0p0os{
    container: wrapper / inline-size;
  }

  .wrap.svelte-1k0p0os {
    display: grid;
    grid-template-areas: "full";
    pointer-events: none;
  }

  .wrap.svelte-1k0p0os > *{
    min-width: 0;
    grid-area: full;
    align-self:center;
    justify-self:center;
  }

  .wrap.svelte-1k0p0os .circle {
    display:flex;
    align-items: center;
    justify-content: center;
    background: #fec600;
    border-radius: 50%;
    margin-top:5px;
    text-align: center;
    width: 15cqmin;
    font-size: 8cqmin;
    aspect-ratio: 1;
    color:white;

  }
 
  h3.svelte-1k0p0os {
    color: #59a5de;
    text-align: center;
    font-size: 6cqmin;
    font-weight: normal;
  }

  .count.svelte-1k0p0os {
    opacity: 0;
    background: #59a5de;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    transition: 0.5s opacity;
    border: 2px solid #fff;
    width: 15cqmin;
    line-height: 15cqmin;
    font-size: 6cqmin;
    align-self:center;
    justify-self:center;
    margin-top:5px;
    margin-left:40%;
    grid-area: full;
    z-index:10;
  }

  .count.show.svelte-1k0p0os {
    opacity: 1;
  }



  


  .charts.svelte-w6hd3d{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-gap:10px;
  }
  .searchbar.svelte-w6hd3d{
    background-color: #e7f5ff;
    display:flex;
    flex-wrap:wrap;
    padding:0 10px 10px 10px;
  }
  .searchbar.svelte-w6hd3d > *{
    flex:1;
    min-width:200px;
  }
  .searchbar.svelte-w6hd3d .form-row .form-row{
    margin:0
  }

  .table-responsive.svelte-w6hd3d{
    overflow-x: auto;
    min-height: .01%;
  }

  @media screen and (max-width: 767px) {
    .charts.svelte-w6hd3d{
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-gap:10px;
      max-width: calc(100vw - 40px);
    }

    .table-responsive.svelte-w6hd3d {
      width: calc(100vw - 40px);
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #ddd;
    }

    .table-responsive.svelte-w6hd3d > .table:where(.svelte-w6hd3d) {
      margin-bottom: 0;
      width: 100%;
      max-width: 100%;
      white-space: nowrap;
    }

  }

  .table.svelte-w6hd3d{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .table.svelte-w6hd3d thead:where(.svelte-w6hd3d){
    background: #3fa9f5;
    color: #fff;
  }

  .table.svelte-w6hd3d th:where(.svelte-w6hd3d),.table.svelte-w6hd3d td:where(.svelte-w6hd3d){
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
    text-align:left;
  }


  .question_link.svelte-w6hd3d:hover{
    text-decoration:none;
    filter:brightness(1.1);
  }

  .iconCircle.svelte-w6hd3d{
    display:flex;
    align-items: center;
    justify-content: center;
    background: #fec600;
    border-radius: 50%;
    text-align: center;
    aspect-ratio: 1;
    color:white;
    width: max-content;
    padding:5px;
  }



  
.searchbar.svelte-1m6w5kv{
  padding:15px 0;
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr 1fr 200px 200px 1fr auto;
  min-width:0;
}

@media (max-width: 1024px){
  .searchbar.svelte-1m6w5kv{
    --s-labelwidth: 100px;
    grid-template-columns: 1fr;
  }
}

@media print{
  .searchbar.svelte-1m6w5kv{
    display:none;
  }
}



  .number.svelte-14lj0c{
    font-size: calc(2vw + 10px);
    text-align: center;
    font-weight:500;
    padding:10px;
  }
 
  .subtitle.svelte-14lj0c{
    text-align: center;
  }
  .subtitle.svelte-14lj0c ::slotted(*){
    font-weight:500;
    font-size: clamp(12px,1vw + 10px,21px)!important;
  }





  .main-chart.svelte-1adz4t0 > div{
    padding:15px 0 0 0;
    height:400px;
  }

  .stats.svelte-1adz4t0{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    min-width:0;
    padding-top:40px;
  }
  .stats.svelte-1adz4t0 button:where(.svelte-1adz4t0){
    flex:1;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    min-height: calc(7vw + 60px);
    padding: 20px 0px 40px 0px;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    border-radius: 5px;
    text-align: center;
    color: #fff;
    border:0px;
    background:var(--colour);
    border:1px solid var(--colour);
  }
  @media (max-width: 1024px){
    .stats.svelte-1adz4t0{
      grid-template-columns:repeat(2,1fr);
    }
  }

  @media print{
    .stats.svelte-1adz4t0{
      display:flex;
    }

    .main-chart.svelte-1adz4t0 > div{
      padding:15px 0 0 0;
      height:250px;
      width:100%;
    }

    .main-chart.svelte-1adz4t0 canvas {
      min-height: 100%;
      max-width: 100%;
      max-height: 100%;
      height: auto!important;
      width: auto!important;
    }

    .stats.svelte-1adz4t0 button:where(.svelte-1adz4t0){
      padding:0 0 0.5cm 0;
    }
    .stats.svelte-1adz4t0 button:where(.svelte-1adz4t0) .number{
      color:var(--colour);
    }
  }


  .chartwrap.svelte-1aorme0{
    padding:15px 0;
  }
  .chartwrap.svelte-1aorme0 >div{
    height:300px;
  }
  .filter.svelte-1aorme0{
    position:absolute;
    top:3px;
    right:3px;
  }

  @media print{
    .chartwrap.svelte-1aorme0 >div{
      height:auto;
    }
 
    .chartwrap.svelte-1aorme0 canvas {
      min-height: 100%;
      max-width: 100%;
      max-height: 100%;
      height: auto!important;
      width: auto!important;
    }
  }


  .chartwrap.svelte-1l24gib{
    padding:15px 0;
  }
  .chartwrap.svelte-1l24gib >div{
    height:300px;
  }

  .filter.svelte-1l24gib{
    position:absolute;
    top:3px;
    right:3px;
  }

  @media print{
    .chartwrap.svelte-1l24gib >div{
      height:auto;
    }
 
    .chartwrap.svelte-1l24gib canvas {
      min-height: 100%;
      max-width: 100%;
      max-height: 100%;
      height: auto!important;
      width: auto!important;
    }
    .footer{
      display:none;
    }
  }


  .studentlist.svelte-rwk2rw{
    display:grid;
    grid-template-rows: auto 1fr;
    --duo-border:0px;
    height:600px;
  }
  .toolbar.svelte-rwk2rw{
    display:flex;
    --s-button-margins:0;
    padding:10px;
    gap:10px;
  }



    .chartwrap.svelte-uqer6i {
      display: grid;
      grid-template-areas:"chart" "key";
      grid-template-rows: 430px 200px;
    }

    .chart.svelte-uqer6i{
      grid-area: chart;
      padding:15px;
      align-self: center;
      position: relative;
      overflow:hidden;
    }

    .chart.svelte-uqer6i >div{
      height:380px;
    }
    .key-label.svelte-uqer6i .value:where(.svelte-uqer6i){
      display:none;
    }

    @media print{
      .chartwrap.svelte-uqer6i {
        max-width:100%;
        grid-template-areas:"chart key";
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        page-break-after: always ;
      }
      .chart.svelte-uqer6i{
        height:10cm;
        width:10cm;
        margin: 0 auto;
      }
      .chart.svelte-uqer6i >div{
        height:10cm;
      }

      .chart.svelte-uqer6i canvas {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto!important;
        width: auto!important;
      }

      .key-label.svelte-uqer6i .value:where(.svelte-uqer6i){
        display:inline;
      }
    }

    .chart-key.svelte-uqer6i {
      display: flex;
      flex-direction: column;
      gap:10px;
      grid-area: key;
      align-self: center;
      justify-self: center;
      padding: 15px;  
    }
    .key-item.svelte-uqer6i{
      display: flex;
      align-items: center;
      gap:5px;
    }
    .key-color.svelte-uqer6i{
      width: 0px;
      height: 0px;
    }

  

  /* top set of charts */
  .schoolcharts.svelte-1fhn6zi{
    display:grid;
    grid-template-columns: 3fr 350px;
    gap: 10px;
  }
  @media (max-width: 960px) {
    .schoolcharts.svelte-1fhn6zi {
      grid-template-columns: 1fr;
    }
  }


  .subpanel.svelte-1fhn6zi{
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    position:relative;
    max-width: calc(100vw - 50px);
    overflow:hidden;
  }

  .subpanel.svelte-1fhn6zi h4:where(.svelte-1fhn6zi){
    margin:0;
    color: #333;
    background-color: #f5f5f5;
    padding: 15px 15px;
    border-bottom: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
  }

  .subpanel.blue.svelte-1fhn6zi h4:where(.svelte-1fhn6zi){
    background:var(--blue);
    color:white;
    padding:20px 15px;
    transition:opacity 0.3s;
  }

  .subpanel.disabled.svelte-1fhn6zi{
    opacity:0.5;
    pointer-events: none;
  }

  .loading.svelte-1fhn6zi{
    background:rgba(0 0 0 / 0.5);
    color:white;
    padding:20px;
    text-align:center;
    border-radius:5px;
    position: fixed;
    top:40%;
    margin:0 auto;
    left:50%;
    transform:translate(-50%,-50%);
  }



@media print{
  .subpanel.svelte-1fhn6zi{
    box-shadow: none;
  }

  .subpanel.blue.svelte-1fhn6zi{
    display:none;
  }

  .subpanel.svelte-1fhn6zi h4:where(.svelte-1fhn6zi){
    margin:0;
    color: #333;
    background-color: transparent;
    border:0px;
    padding: 5px 15px;
  }  
}



  /** THEME CSS!! **/
  .form-row.form-row > input.form-input,.form-row.form-row > select.form-input,.form-row > textarea{
    border: 1px solid rgba(9, 148, 255, 0.2);
    box-shadow:inset 1px 1px 5px rgba(9, 148, 255, 0.5);
  }
  .form-row .slabel{
    font-weight:bold;
  }

  .sbtn.sbtn{
    transition: .3s transform;
    box-shadow: var(--btn-shadow);
  }
  .sbtn.sbtn:hover{
    transform: scale(1.05, 1.05);
    box-shadow: var(--btn-shadow);
  }


  .sbtn.default{
    border-color: rgba(0, 0, 0, 0.06) #ddd #ddd rgba(0, 0, 0, 0.06);
  }

  hr{
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  div.portal div.backdrop.backdrop{
    background: rgba(0,0,0,0.05);
  }

  .portal .backdrop .smodal{
    border-radius: 6px;
    border: 0;
    box-shadow: var(--white-shadow);
  }

  .progress .sprogress{
    box-shadow: var(--white-shadow-inset);
    background:transparent;
  }
  .progress .sprogress .sbar{
    line-height:20px;
    height:20px;
  }

  /* simple buttons - as used for learderboards & active challenges */
  button.simple, a.simple{
    background:#fff;
    color:#3fa9f5;
    border:2px solid var(--blue-light);
    text-shadow:none;
    margin-bottom:15px;
    width:100%;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
    cursor:pointer;
  }


  .padding.svelte-sqs0iq{
    padding:10px;
  }
  .form-horizontal.svelte-sqs0iq .form-row :has(select[disabled]) label{
    opacity:0.5;
  }

  .hidden.svelte-sqs0iq{
    display:none;
  }
  .padding.padding.padding.svelte-sqs0iq .form-horizontal:where(.svelte-sqs0iq) .download:where(.svelte-sqs0iq) a:where(.svelte-sqs0iq){
    border:0px;
    transform: translate(0, -1px);
    transition:all 0.2s;
  }
  .padding.padding.padding.svelte-sqs0iq .form-horizontal:where(.svelte-sqs0iq) .download:where(.svelte-sqs0iq) a:where(.svelte-sqs0iq):hover{
    color:var(--dark-blue);
    transform: translate(0, 2px);
  }



  .toolbar.svelte-du1pjp{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    --s-labelwidth:auto;
    padding:10px 15px;
    gap:15px;
  }

  .toolbar.svelte-du1pjp .form-horizontal,.toolbar.svelte-du1pjp .padding{
    display:contents;
  }

  .grid.svelte-du1pjp{
    height:calc(100vh - 330px);
    border:1px solid #eee;
    min-height:400px;
    overflow:auto;
  }

  .grid.svelte-du1pjp .header{
    width:0;
  }

  .grid-inner.svelte-du1pjp{
    height:calc(100vh - 330px);
    min-height:400px;
  }

  .download.svelte-du1pjp{
    position:absolute;
    top:55px;
    right:10px;
  }


  .toolbar.svelte-rpq3hh{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    --s-labelwidth:auto;
    padding:10px 15px;
    gap:15px;
  }

  .toolbar.svelte-rpq3hh .form-horizontal,.toolbar.svelte-rpq3hh .padding{
    display:contents;
  }

  .grid.svelte-rpq3hh{
    height:calc(100vh - 330px);
    border:1px solid #eee;
    min-height:400px;
    overflow-x:auto;
    overflow-y:hidden;
  }

  .grid.svelte-rpq3hh .header{
    width:0;
  }

  .grid-inner.svelte-rpq3hh{
    height:calc(100vh - 330px);
    min-height:400px;
  }

  .cell.svelte-rpq3hh{
    display:grid;
    align-items: center;
    border-right:1px solid #eee;
  }

  .cell.marks.svelte-rpq3hh {
    display:grid;
    grid-template-areas:"perc marks" "date date";
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    gap:5px;
  }
  .cell.svelte-rpq3hh .perc:where(.svelte-rpq3hh){
    grid-area: perc;
  }
  .cell.svelte-rpq3hh .marks:where(.svelte-rpq3hh){
    grid-area: marks;
    text-align:right;
  }
  .cell.svelte-rpq3hh .date:where(.svelte-rpq3hh){
    grid-area: date;
    text-align:center;
  }

  .download.svelte-rpq3hh{
    position:absolute;
    top:55px;
    right:10px;
  }


  .tabs.svelte-12wiqa8 {
    list-style: none;
    display: flex;
    gap:2px;
    border-bottom: 1px solid rgba(9, 148, 255, 0.2);
    justify-content: flex-start;
    margin:0px;
  }

  .tabs.svelte-12wiqa8 li:where(.svelte-12wiqa8){
    margin-bottom: -1px;
  }

  .tabs.svelte-12wiqa8 li:where(.svelte-12wiqa8) a:where(.svelte-12wiqa8){
    cursor: pointer; 
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    position: relative;
    display: block;
    padding: 10px 15px;
  }
  .tabs.svelte-12wiqa8 li:where(.svelte-12wiqa8) a:where(.svelte-12wiqa8):hover{
    text-decoration: none;
    background: rgba(9, 148, 255, 0.1);
  }

  .tabs.svelte-12wiqa8 li.active:where(.svelte-12wiqa8) a:where(.svelte-12wiqa8){
    background-color: #fff;
    color: #808080;
    background-color: #fff;
    border: 1px solid rgba(9, 148, 255, 0.2);
    border-bottom-color: transparent;
    cursor: default;
  }

  @media print{
  .tabs.svelte-12wiqa8{
    display:none;
  }
}





  .assignedwork.svelte-12j7hel{
    display:grid;
    grid-template-rows: auto 1fr;
    min-height:440px;
    gap:5px;
  }
  .tools.svelte-12j7hel{
    display:flex;
    gap:20px 50px;
    min-height:40px;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .buttons.svelte-12j7hel{
    --s-button-margins:0;
  }

  .progressbars.svelte-12j7hel{
    display:flex;
    flex:1;
    gap:10px;
    padding-bottom:4px;
  }
  .progress.svelte-12j7hel{
    font-size:11px;
    flex:2;
  }
  .tools.svelte-12j7hel [slot=menu]:where(.svelte-12j7hel){
    min-width:230px;
  }
  .tools.svelte-12j7hel [slot=menu]:where(.svelte-12j7hel) button:where(.svelte-12j7hel){
    display:inline-flex;
    justify-content: space-between;
  }
  .tools.svelte-12j7hel [slot=menu]:where(.svelte-12j7hel) button:where(.svelte-12j7hel) .d-icon{
    font-size:12px;
  }
  .grid.svelte-12j7hel{
    margin:10px -10px 0 -10px;
    --duo-background:transparent;
    --duo-oddrow:rgba(184, 223, 251, 0.2);
  }
  .grid.svelte-12j7hel p:where(.svelte-12j7hel){
    padding:15px;
  }
  .grid.svelte-12j7hel .headerrow .header{
    padding:10px 7px;
    font-size:14px;
    font-weight:normal;
  }





.didyouknow.svelte-f8rkh3 {
  flex: 1 1 400px;
}
@media (min-width: 1217px) {
  .didyouknow.svelte-f8rkh3 {
    max-width: 470px;
  }
}
.didyouknow.svelte-f8rkh3 {
  height: calc(100% - 10px);
}

.didyouknow.svelte-f8rkh3 .scrollarea:where(.svelte-f8rkh3) {
  margin: 0 auto;
  overflow: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none; /* hide scrollbar for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
}
.didyouknow.svelte-f8rkh3 .scrollarea:where(.svelte-f8rkh3)::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
.didyouknow.svelte-f8rkh3 .pages:where(.svelte-f8rkh3) {
  display: flex;
  flex-direction: row;
  width: 301%;
}
.didyouknow.svelte-f8rkh3 .page:where(.svelte-f8rkh3) {
  border: 1px solid #fff;
  width: calc(100% - 40px);
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 370px;
  overflow: auto;
  scroll-snap-align: start;
  scrollbar-color: #279ef4;
  scrollbar-width: thin;
}
.didyouknow.svelte-f8rkh3 .page:where(.svelte-f8rkh3)::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}
.didyouknow.svelte-f8rkh3 .page:where(.svelte-f8rkh3)::-webkit-scrollbar-track {
  background-color: #efefef;
}
.didyouknow.svelte-f8rkh3 .page:where(.svelte-f8rkh3)::-webkit-scrollbar-thumb {
  background-color: #279ef4;
  border-radius: 3px;
}

.didyouknow.svelte-f8rkh3 .pager:where(.svelte-f8rkh3) {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.didyouknow.svelte-f8rkh3 .pager:where(.svelte-f8rkh3) .dot:where(.svelte-f8rkh3) {
  all:unset;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: var(--btn-shadow);
}
.didyouknow.svelte-f8rkh3 .pager:where(.svelte-f8rkh3) .dot:where(.svelte-f8rkh3):hover, .didyouknow.svelte-f8rkh3 .pager:where(.svelte-f8rkh3) .dot:where(.svelte-f8rkh3):focus {
  transform: scale(1.2) translateY(-3px);
}
.didyouknow.svelte-f8rkh3 .pager:where(.svelte-f8rkh3) .dot.active:where(.svelte-f8rkh3) {
  background: #3fa9f5;
}
.didyouknow.svelte-f8rkh3 svg:where(.svelte-f8rkh3) .ring:where(.svelte-f8rkh3) {
  opacity: 0.2;
  stroke-width: 10;
  fill: transparent;
}
.didyouknow.svelte-f8rkh3 svg:where(.svelte-f8rkh3) .segment:where(.svelte-f8rkh3) {
  opacity: 0.6;
  transform-origin: center;
  stroke-dasharray: 0, 100;
  stroke-dashoffset: 25;
  animation: svelte-f8rkh3-donut 5s linear forwards;
}

@keyframes svelte-f8rkh3-donut {
  to {
    stroke-dasharray: 100, 0;
  }
}




  h3.svelte-39ap1{
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
    color: var(--blue-dark);
    margin: 30px 0 40px 0;
  }


  /* animation stuff below for list */
    
  .icon.svelte-39ap1.class::before{mask-image: var(--certificate); }
  .icon.svelte-39ap1.year::before{ mask-image: var(--medal);}
  .icon.svelte-39ap1.school::before{  mask-image: var(--trophy); }

  .leaders.svelte-39ap1{
    list-style:none;
    margin:0;
    padding:0;
  }

  .leaders.svelte-39ap1 li:where(.svelte-39ap1){
    opacity:0;
    display:flex;
    padding:5px 10px;
    background:#eee;
    margin:4px 0;
    display:flex;
    color:white;
    transform-origin: bottom;
  }

  .leaders.svelte-39ap1 .name:where(.svelte-39ap1){
    flex:1;
    font-size:2rem;
    line-height:3em;
    padding-left:1em;
  }

  .leaders.svelte-39ap1 .score:where(.svelte-39ap1){
    opacity:0;
    font-size:3rem;
    line-height:2em;
    padding-right:10px;
  }
  .leaders.svelte-39ap1 .pos:where(.svelte-39ap1){
    opacity:0;
  }

  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(1){
    background:var(--gold);
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(2){
    background:var(--silver);
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(3){
    background:var(--bronze);
  }
  .leaders.svelte-39ap1 .others:where(.svelte-39ap1){
    background:#eee; 
    animation: svelte-39ap1-dropin 1s forwards 4.5s ;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):last-child{
    background: var(--blue-dark);
    position:relative;
    overflow:hidden;
  }
  /* shine */
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):last-child:after{
    opacity:0;
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(45deg,
      transparent 0px, 
      transparent 100px, 
      white 150px, 
      transparent 160px, 
      transparent 1000px);
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1) .pos:where(.svelte-39ap1){
    padding:0 16px;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):last-child .score:where(.svelte-39ap1),.leaders.svelte-39ap1 li:where(.svelte-39ap1):last-child .name:where(.svelte-39ap1),.leaders.svelte-39ap1 li:where(.svelte-39ap1):last-child .pos:where(.svelte-39ap1){
    font-size:2rem;
    line-height:2em;
  }

  .icon.svelte-39ap1:before{
    color:white;
    content:"";
    font-size: 1.4rem;
    display:inline-block;
    width:5em;
    height:5em;
    background-color:white;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(1){
    animation: svelte-39ap1-dropin .3s cubic-bezier(0.51,-0.4, 0.27, 1.55) forwards 3s;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(2){
    animation: svelte-39ap1-dropin .3s cubic-bezier(0.51,-0.4, 0.27, 1.55)forwards 2s ;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(3){
    animation: svelte-39ap1-dropin .3s cubic-bezier(0.51,-0.4, 0.27, 1.55) forwards 1s ;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(1) .score:where(.svelte-39ap1){
    animation: svelte-39ap1-fadein .3s forwards 3.7s;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(2) .score:where(.svelte-39ap1){
    animation: svelte-39ap1-fadein .3s forwards 2.7s ;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):nth-child(3) .score:where(.svelte-39ap1){
    animation: svelte-39ap1-fadein .3s forwards 1.7s ;
  }
  .leaders.svelte-39ap1 .you:where(.svelte-39ap1) {
    animation: svelte-39ap1-dropin 1s forwards 4.5s ;
  }
  .leaders.svelte-39ap1 .you:where(.svelte-39ap1) .pos:where(.svelte-39ap1){
    opacity:0;
    animation: svelte-39ap1-fadein .3s forwards 5.5s ;
  }
  .leaders.svelte-39ap1 .you:where(.svelte-39ap1) .score:where(.svelte-39ap1){
    animation: svelte-39ap1-fadein .3s forwards 6s ;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):last-child:after{
    animation: svelte-39ap1-swipe 2s forwards 5s ;
  }
  .leaders.svelte-39ap1 li:where(.svelte-39ap1):last-child{
    animation: svelte-39ap1-fadein .3s forwards 5s, svelte-39ap1-wiggle 2s forwards 7s;
  }

  .info.svelte-39ap1{
    position:absolute;
    top:10px;
    right:45px;
  }

  .info.svelte-39ap1 button{
    all:unset;
    color:#ababab;
  }
  .info.svelte-39ap1 button:hover{
    color:#6d6d6d;
  }
  @keyframes svelte-39ap1-dropin{
    0%   { opacity: 0;transform:translate(0, -200%) scale(1.1,5);}
    100% { opacity: 1; }
  }

  @keyframes svelte-39ap1-fadein{
    0%   { opacity: 0;transform:scale(0.5,0.5); }
    80%   { opacity: 0.8;transform:scale(1.2,1.2); }
    100% { opacity: 1; }
  }

  @keyframes svelte-39ap1-swipe{
    0%   { opacity: 0; transform:translate(-100%, 0);}
    10%   { opacity: 0.7; transform:translate(-80%, 0);}
    90%   { opacity: 0.7; transform:translate(80%, 0);}
    100% { opacity: 0; transform:translate(100%,0);}
  }

  @keyframes svelte-39ap1-wiggle {
    0% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    90% { transform: rotate(3deg); }
    93% { transform: rotate(-5deg); }
    96% { transform: rotate(5deg); }
    99% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
  }



.leaderboards.svelte-4rbsi0{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex-direction:row;
  gap:15px;
  padding:5px 10px;
}

.class.svelte-4rbsi0::before{mask-image: var(--certificate); }
.year.svelte-4rbsi0::before{ mask-image: var(--medal);}
.school.svelte-4rbsi0::before{  mask-image: var(--trophy); }

.award.simple.svelte-4rbsi0:before{
  height:3em;
  background:#3fa9f5;
}
.award.simple.svelte-4rbsi0:after{
  background:none;
}

.award.svelte-4rbsi0:before{
  color:white;
  content:"";
  font-size: 1.5rem;
  display:block;
  width:4em;
  height:4em;
  margin:0 auto 10px auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position:center;
  mask-repeat: no-repeat;
  mask-position:center;
  background:#3fa9f5;
}

.award.svelte-4rbsi0:after{
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right:2px;
  height: 50%;
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.2));
  border-radius:3px;
}

.award.svelte-4rbsi0:hover{
  transform:scale(1.1,1.1);
  z-index:2;
}




.challenge.svelte-umyma7{
  display:grid;
  grid-template-columns: 130px 3fr;
  gap:20px;
  padding-block: 15px;
  border-bottom: 1px solid #eee;
}

.challenge.svelte-umyma7:last-of-type{
  border-bottom: none;
}

h4.svelte-umyma7{
  margin-block: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  color: inherit;
}
p.svelte-umyma7{
  margin: 0 0 10px;
}

.challenge-icon.svelte-umyma7{
  border:0px;
  display:block;
  cursor: pointer;
  position: relative;
  text-align: center;
  border-radius: 5px;
  margin: 5px;
  padding: 15px 20px;
  color: white;
  text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100px;
  gap: 5px;
  transition:transform 0.3s;
  margin: 12px;
}

.challenge-icon.svelte-umyma7:before{
  color: white;
  content: "";
  font-size: 1.5rem;
  display: inline-block;
  width: 3em;
  height: 3em;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-position: center;
  background: white;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
}

.challenge-icon.svelte-umyma7:after{
  content: '';
  position: absolute;
  border-radius: 3px;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
}

.challenge-icon.svelte-umyma7:hover{
  transform:scale(1.05,1.05);
  z-index:2;
}

.clipbutton.svelte-umyma7{
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  background-color: var(--blue);
  transition:background-color 0.3s;
}
.clipbutton.svelte-umyma7:hover{
  text-decoration: none;
  background-color:var(--blue-dark);
}






.challenge.svelte-zcaw1q{
  --s-button-margins: 0;
  display:grid;
  grid-template-columns: 200px 3fr;
  gap:20px;
  padding-block: 15px;
  border-bottom: 1px solid #eee;
}

.challenge.svelte-zcaw1q:last-of-type{
  border-bottom: none;
}

h4.svelte-zcaw1q{
  margin-block: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  color: inherit;
}
p.svelte-zcaw1q{
  margin: 0 0 10px;
}

.challenge-icon.svelte-zcaw1q{
  width:90%;
  border:0px;
  display:block;
  cursor: pointer;
  position: relative;
  text-align: center;
  border-radius: 5px;
  margin: 0 5px;
  padding: 15px 20px;
  color: white;
  text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 170px;
  gap: 10px;
  transition:transform 0.3s;
  margin: 12px;
}

.challenge-icon.svelte-zcaw1q:before{
  color: white;
  content: "";
  font-size: 2rem;
  display: inline-block;
  width: 5em;
  height: 5em;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-position: center;
  background: white;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
}

.challenge-icon.svelte-zcaw1q:after{
  content: '';
  position: absolute;
  border-radius: 3px;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
}

.challenge-icon.svelte-zcaw1q:hover{
  transform:scale(1.05,1.05);
  z-index:2;
}

.clipbutton.svelte-zcaw1q{
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  background-color: var(--blue);
  transition:background-color 0.3s;
}
.clipbutton.svelte-zcaw1q:hover{
  text-decoration: none;
  background-color:var(--blue-dark);
}





  .challenges.svelte-8ladxm{
    padding-top:5px;
    display:flex;
    gap:10px;
    flex-direction:row;
    flex-wrap: wrap;
  }

  .simple.svelte-8ladxm{
    max-width:150px;
    width:max-content;
    height:112px;
    display:grid;
    gap:5px;
    grid-template-rows: 1fr auto auto;
  }

  progress.svelte-8ladxm{
    max-width: 95%;
    height:5px;
    -webkit-appearance: none;
  }
  progress.svelte-8ladxm::-webkit-progress-value{
    background-color: var(--blue);
    border-radius: 2px;
  }
  progress.svelte-8ladxm::-webkit-progress-bar {
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  }

  .add.svelte-8ladxm{
    width:100px;
    position: relative;
    --icon:url('data:image/svg+xml;utf8,<svg width="100%" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m95.898 37.801h-33.598v-33.699c0-1.6992-1.3984-3.1016-3.1016-3.1016h-18.398c-1.6992 0-3.1016 1.3984-3.1016 3.1016v33.699h-33.598c-1.6992 0-3.1016 1.3984-3.1016 3.1016v18.398c0 1.6992 1.3984 3.1016 3.1016 3.1016h33.699v33.699c0 1.6992 1.3984 3.1016 3.1016 3.1016h18.398c1.6992 0 3.1016-1.3984 3.1016-3.1016l-0.003906-33.801h33.699c1.6992 0 3.1016-1.3984 3.1016-3.1016v-18.398c-0.19922-1.6992-1.5977-3-3.3008-3z" fill-rule="evenodd"/></svg>')
  }

  .simple.svelte-8ladxm::before{
    content:"";
    display:block;
    height: 100%;
    color:white;
    font-size: 0.9rem;
    width:4em;
    margin:0 auto 10px auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position:center;
    mask-repeat: no-repeat;
    mask-position:center;
    background:#3fa9f5;
    mask-image: var(--icon); 
  }

  .availableCount.svelte-8ladxm {
    position:absolute;
    background:var(--blue-light);
    top:-10px;
    right:-10px;
    height:28px;
    width:28px;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius:200px;
    z-index:2;
    border:2px solid white;
    box-shadow:0 0 4px rgba(0,0,0,0.5);
    color:white;
    }


    .myworkpanel.svelte-6irk6g{
      display:grid;
      grid-template-columns:2fr 2fr 470px;
      grid-template-rows: auto auto auto;
      grid-template-areas:
        "work work know" 
        "leader challenges challenges " 
        "awards awards awards";
      gap:0 10px;
      margin-bottom:10px;
      /* max-height:calc(100vh - 100px); */
      min-height:500px;
    }

    .myworkpanel.svelte-6irk6g > *:nth-child(1){
      grid-area:work;
    }

    .myworkpanel.svelte-6irk6g > *:nth-child(2){
      grid-area:know;
    }

    .myworkpanel.svelte-6irk6g > *:nth-child(3){
      grid-area:leader;
    }

    .myworkpanel.svelte-6irk6g > *:nth-child(4){
      grid-area:challenges;
    }

    .myworkpanel.svelte-6irk6g > *:nth-child(5){
      grid-area:awards;
    }

    @media (max-width: 1220px){
      .myworkpanel.svelte-6irk6g{
        grid-template-columns:1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:"work" "know" "leader" "challenges" "awards";
        max-height:initial
      }
    }


    .browsepanel.svelte-1gdxa8p{
      display:grid;
      grid-template-columns:auto 1fr;
      grid-template-rows:auto 1fr;
      grid-template-areas:"video search" "video list";
      gap:0 10px;
      margin-bottom:10px;
      max-height:calc(100vh - 100px);
      min-height:500px;
    }
    
    .videoblock.svelte-1gdxa8p{
      width:max(600px, calc((100vh - 150px) * 1.333333));
      max-width:70vw;
      position:relative;
      grid-area:video;
      margin:0;
    }

    .videoblock.svelte-1gdxa8p .tools:where(.svelte-1gdxa8p){
      display:flex;
      position:absolute;
      gap:5px;
      top:3px;
      right:5px;
    }

    @media (max-width:640px){
      .videoblock.svelte-1gdxa8p .tools:where(.svelte-1gdxa8p){
        display:flex;
        position:static;
        --s-button-margins:0;
        gap:2px;
        padding:4px 4px 6px 4px;
      }
      .videoblock.svelte-1gdxa8p .tools:where(.svelte-1gdxa8p) > * {
        flex:1
      }

    }
      
    @media (max-width: 1220px){
      .videoblock.svelte-1gdxa8p{
        width:auto;
        max-width:initial;
      }

     .browsepanel.svelte-1gdxa8p{
        grid-template-columns:1fr 1fr;
        grid-template-rows: 400px auto;
        grid-template-areas:"search list" "video video";
        max-height:initial
      }
    }

    @media (max-width: 767px){
      .browsepanel.svelte-1gdxa8p{
        grid-template-columns:1fr;
        grid-template-rows: minmax(400px,auto) 400px auto;
        grid-template-areas:"search" "list" "video";
      }
    }




  .feedbackpanel.svelte-kzr6hc .grid{
    height:calc(100vh - 250px);
    min-height:300px;
  }
  .unread.svelte-kzr6hc{
    background:#5ce25c;
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:500px;
  }

  .toolbar.svelte-kzr6hc{
    padding:10px;
    display: flex;
    gap:4px;
    --s-button-margins:0;
    --s-formrow-margins:0;
  }


  .userform.svelte-2em97q{
    --s-labelwidth:180px;
  }
  .formcols.svelte-2em97q{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
  }
  .formcols.svelte-2em97q > :where(.svelte-2em97q){
    flex:1 0 300px;
  }
  h4.svelte-2em97q{
    font-family: 'Muli',sans-serif;
    font-size:18px;
    font-weight: 500;
    margin:10px;
  }

  .classes.svelte-2em97q{
    --s-labelwidth:0px;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
    gap:0px;
  }

  .types.svelte-2em97q{
    --s-labelwidth:20px;
    --s-formrow-margins:0;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
  }

  .toolbar.svelte-2em97q{
    display:flex;
    justify-content:flex-end;
  }
  
  .userform.svelte-2em97q [autocomplete="new-password"]{ 
    -webkit-text-security: disc; /* technique to use input type=text but stop the browser offering to save the password */
  }



  .model-body.svelte-1u8tjmo{
    display:grid;
    grid-template-areas:
      "info info info"
      "adding updating classes"
      "table table table";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    grid-gap:0px 10px;
  }

  .grid.svelte-1u8tjmo{
    grid-area:table;
    min-height:400px;
    margin-top:10px;
  }





  h4.svelte-1mwlbuc{
    font-size: 18px;
    margin-block: 10px;
    font-weight:500;
  }
  .inner.svelte-1mwlbuc{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:10px;
  }

  .passtype.svelte-1mwlbuc{
    padding: 20px;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  }

  .list.svelte-1mwlbuc{
    display:grid;
    grid-template-rows: auto 1fr;
    height:630px;
  }

  .list.svelte-1mwlbuc ul:where(.svelte-1mwlbuc){
    border: 1px solid #e4e4e4;
    list-style:none;
    padding:0;
    overflow-y: auto;
    max-height:100%;
    margin:0;
  }

  .list.svelte-1mwlbuc li:where(.svelte-1mwlbuc){
    padding:5px 10px;
    border-bottom: 1px solid #e4e4e4;
  }




  .userspanel.svelte-438zfg{
    display:grid;
    grid-template-rows: auto auto 1fr;
    height:calc(100vh - 195px);
  }
  .alertarea.svelte-438zfg{
    padding:10px 10px 0 10px;
  }
  .toolbar.svelte-438zfg{
    padding:10px;
    display: flex;
    gap:4px;
    --s-button-margins:0;
    --s-formrow-margins:0;
    flex-wrap:wrap;
  }


  p.pre.svelte-khf5jt{
    white-space: pre;
  }


  .subscriptiondetails.svelte-1ais5te .salert{
    padding-bottom:0;
  }


  .accountpanel.svelte-w0hr3c{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    box-lines:multiple;
  }
  .accountpanel.svelte-w0hr3c > * {
    flex:1 1 400px;
  }


  .extravideo.svelte-v9pc50{
    padding-top:5px;
  }
  iframe.svelte-v9pc50{
    order: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .embed-responsive.svelte-v9pc50{
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
  }

  .embed-responsive-16by9.svelte-v9pc50{
    padding-bottom: 56.25%;
  }
  .smodal:has(.extravideo){
    width:90%;
  }
  @media (min-width:768px){
    .smodal:has(.extravideo){
      width:600px;
    }
  }
  @media (min-width:992px){
    .smodal:has(.extravideo){
      width:955px;
    }
  }


  .extras.svelte-16a22lc{
    display:flex;
    flex-direction:row;
  }
  .menu.svelte-16a22lc{
    flex:1;
  }
  .content.svelte-16a22lc{
    flex:3;
  }

  .extras .nav-pills{
    list-style:none;
    display:flex;
    gap:2px;
    flex-direction: column;
    padding:15px 15px 0 15px;
  }
  .extras .nav-pills a{
    display:block;
    padding:10px 15px;
    border-radius:5px;
  }
  .extras .nav-pills a:hover{
    background: rgba(9, 148, 255, 0.1);
    text-decoration: none;
  }

  .extras .nav-pills .active a{
    background: #3fa9f5;
    color:white;
  }

  .extras .iconlink{
    position: relative;
    padding: 15px 0 15px 35px;
    font-family: 'Muli', sans-serif;
    font-size: 18px;
    display:inline-block;
  }

  .extras .iconlink:after{
    position: absolute;
    top: 5px;
    left: 0;
    font-size: 31px;
    padding-bottom: 10px;
    content:"";
    width:1em;
    height:1em;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-position: center;
    background: currentColor;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
  }

  .extras .iconlink.fa-file-pdf-o{
    --icon:var(--pdf)
  }

  .extras .iconlink.fa-file-excel-o{
    --icon:var(--excel)
  }

  .extras .table{
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .extras *.table.blue{
    border: 1px solid #6fbff8;
  }
  .extras .table.blue thead {
    background: rgba(63, 169, 245, 0.2);
  }
  .extras .table > thead:first-child > tr:first-child > td{
    border-top: 0;
  }
  .extras .table > thead > tr > td{
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
  }
  .extras .table.blue tbody td{
    border-top: 1px solid #d0eafd;
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
  }



  .message-panel.svelte-1jeqq3p{
    height:300px;
    overflow:auto;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
    padding:10px;
    margin-top:15px;
  }
  .message-panel.svelte-1jeqq3p .preview{
    padding:0;
  }
  .smodal:has(.messagesmodal){
    width:90%;
  }
  .unread.svelte-1jeqq3p{
    font-weight:bold;
  }
  .smodal:has(.messagesmodal) .grid{
    height:200px;
  }
  @media (min-width:768px){
    .smodal:has(.messagesmodal){
      width:600px;
    }
  }


  .messagesinfo.svelte-qouqc4{
    margin-bottom:10px;
  }
  .messagesinfo.svelte-qouqc4 .salert{
    display:flex;
    width:100%;
    justify-content:space-between;
    align-content:center;
  }
  .messagesinfo.svelte-qouqc4 p:where(.svelte-qouqc4){
    margin:0;
    padding:0;
    flex-grow:1;
    align-self:center;
  }
  .messagesinfo.svelte-qouqc4 .sbtn{
    margin:0;
  }


  
  .panel-inner.svelte-1ogz4d7{
    display:grid;
    grid-template-rows:auto auto 1fr;
    height:100%;
  }

  .toolbar.svelte-1ogz4d7{
    padding:10px;
    display: flex;
    gap:4px;
    --s-button-margins:0;
    --s-formrow-margins:0;
    flex-wrap:wrap;
  }  
  .searchbar.svelte-1ogz4d7{
    --s-formrow-margins:0;
    padding:0 10px 10px 10px;
  }

  .linkcircles.svelte-1ogz4d7{
    background:rgba(254, 198, 0,1);
    width:10px;
    height:10px;
    display:inline-block;
    border-radius: 100px;
    filter: drop-shadow(5px 0px 0px rgba(254,198,0,0.5))
  }

  


  
  .panel-inner.svelte-1fha38n{
    display:grid;
    grid-template-rows:auto auto 1fr;
    height:100%;
  }

  .toolbar.svelte-1fha38n{
    padding:10px;
    display: flex;
    gap:2px;
    --s-button-margins:0;
    --s-formrow-margins:0;
    flex-wrap:wrap;
  }  
  .searchbar.svelte-1fha38n{
    --s-formrow-margins:0;
    padding:0 10px 10px 10px;
  }

  


  .tools.svelte-kf09y4{
    display:flex;
    gap:5px;
    padding:10px;
    --s-button-margins:0;
  }

  .tabs.svelte-kf09y4 {
    list-style: none;
    display: flex;
    gap:2px;
    border:0px;
    justify-content: flex-start;
    margin:0px 5px 0 5px;
    padding:5px 0px 0 5px;
    overflow-x:auto;
    overflow-y:clip;
    position:relative;
  }

  @supports selector(::-webkit-scrollbar) {
    .tabs.svelte-kf09y4::-webkit-scrollbar {
      width: 1px;
      height: 8px;
      background-color:rgba(9,148,255,0.2);
      border-radius:4px;
    }
    .tabs.svelte-kf09y4::-webkit-scrollbar-thumb {
      background-color:rgba(9,148,255,0.4);
      border-radius:4px;
    }
  }

  .tabs.svelte-kf09y4:after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    border-bottom: 1px solid rgba(9, 148, 255, 0.2);
  }


  .tabs.svelte-kf09y4 li:where(.svelte-kf09y4) a:where(.svelte-kf09y4){
    cursor: pointer; 
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    position: relative;
    display: block;
    padding: 10px 15px;
  }
  .tabs.svelte-kf09y4 li:where(.svelte-kf09y4) a:where(.svelte-kf09y4):hover{
    text-decoration: none;
    background: rgba(9, 148, 255, 0.1);
  }

  .tabs.svelte-kf09y4 li.active:where(.svelte-kf09y4) a:where(.svelte-kf09y4){
    background-color: #fff;
    color: #808080;
    background-color: #fff;
    border: 1px solid rgba(9, 148, 255, 0.2);
    border-bottom-color: transparent;
    cursor: default;
    z-index:2;
  }

  .info.svelte-kf09y4{
    display:flex;
    gap:5px;
    background:var(--duo-gridhead);
    padding:8px 10px;
    justify-content:space-around;
  }

  .image.svelte-kf09y4{
    padding:0 10px;
  }

  .tabs.svelte-kf09y4 li.selected:where(.svelte-kf09y4) a:where(.svelte-kf09y4){
    color:var(--mworange);
  }



  .inner.svelte-1p2jx9q{
    display:grid;
    grid-template-columns: 1.25fr 1.75fr 1.5fr;
    grid-template-rows: 1fr auto auto;
    grid-template-areas: 
      "search list details" 
      "choose choose details"
      "debug debug debug";
    gap:0px 10px;
    --s-labelwidth:100px;
  }

  .details.svelte-1p2jx9q{
    display:grid;
    grid-template-rows: auto 1fr auto;
    gap:10px;
    height:100%;
  }

  .form.svelte-1p2jx9q{
    padding:10px;
  }

  .tools.svelte-1p2jx9q{
    --s-button-margins:0;
    display:flex;
    gap:5px;
    padding:10px;
    justify-content: end;
  }
  


  .datetime.svelte-1ijsaiq{
    display:grid;
    grid-template-columns: 1fr 60px 60px;
    margin:4px 4px;
    gap:1px;
  }
  .datetime.svelte-1ijsaiq .form-row{
    margin:0 1px;
  }



  .modal-inner.svelte-40r5al{
    display:flex;
    flex:1;
    gap:30px;
  }
  .modal-inner.svelte-40r5al > :where(.svelte-40r5al){
    flex:2;
    order:1
  }

  .modal-inner.svelte-40r5al .exam-wrapper:where(.svelte-40r5al) dl:where(.svelte-40r5al){
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px;
    font-size:15px;
  }
  .modal-inner.svelte-40r5al .exam-wrapper:where(.svelte-40r5al) dt:where(.svelte-40r5al){
    font-weight: bold;
    text-align:right;
  }

  .modal-inner.svelte-40r5al .exam-wrapper:where(.svelte-40r5al) dd:where(.svelte-40r5al){
    margin:0;
  }
  .assignementGrid.svelte-40r5al{
    display:grid;
    grid-template-columns: 180px auto 2fr;
    grid-template-areas:"label links fields";
    --s-labelwidth:0px;
    font-weight:bold;
  }
  .labels.svelte-40r5al{
    grid-area: label;
  }
  .labels.svelte-40r5al div:where(.svelte-40r5al){
    text-align:right; 
    line-height:33px;
    margin:5px;
  }
  .labels.svelte-40r5al .textarea:where(.svelte-40r5al){
    height:75px;
  }
  .links.svelte-40r5al > div:where(.svelte-40r5al){
    --s-button-margins:5px 0 0 0px;
    height:37.9px;
    grid-area: links;
  }

  .links.svelte-40r5al .textarea:where(.svelte-40r5al){
    height:80px;
  }
  
  .fields.svelte-40r5al{
    display:flex;
    overflow:auto;
    grid-area: fields;
  }
  .fields.svelte-40r5al > form:where(.svelte-40r5al){
    min-width:300px;
    flex:1 0 0px;
  }
  .assignementGrid.svelte-40r5al .fields:where(.svelte-40r5al) .form-input{
    --s-border-radius:5px;
    border: 1px solid rgba(9,148,255,0.2);
    padding: 0.5em 1em;
    box-shadow: inset 1px 1px 5px rgb(9 148 255 / 50%);
    color: #0a76c4;
  }
  .assignementGrid.svelte-40r5al .fields:where(.svelte-40r5al) .datetime .form-row{
    --s-formrow-margins:0px;
  }
  [slot=toolbar].svelte-40r5al{
    display:flex;
    gap:5px;
    --s-button-margins:0;
  }

  .btn-xs.svelte-40r5al{
    font-size:12px;
  }
  .btn-link.svelte-40r5al{
    all:unset;
    font-weight:normal;
    color:rgb(9 148 255);
    cursor:pointer;
    margin-left:15px;
  }
  .btn-link.svelte-40r5al:hover{
    text-decoration:underline;
  }




  .assignmentmanagerpanel.svelte-m0km9o{
    display:grid;
    grid-template-columns:repeat( auto-fit, minmax(min(500px,100%), 1fr) );
    gap:10px;
    height:calc(100vh - 140px);
  }
  .assignmentmanagerpanel.svelte-m0km9o .panel{
    flex:1;
    flex-grow:1;
  }

  .previewtools.svelte-m0km9o{
    display:flex;
    position: absolute;
    top:5px;
    right:5px;
  }


  .tabs.svelte-trb97o{
    display:grid;
    grid-template-columns:auto 1fr;
    margin:10px;
    --border-color:rgba(9,148,255,0.2);
    min-height:50px;
    align-items: baseline;
  }
  .tabs.svelte-trb97o > div:where(.svelte-trb97o){
    border-bottom:1px solid var(--border-color);
    padding:10px 15px;
  }
  
  ul.svelte-trb97o{
    display:flex;
    height:100%;
    list-style:none;
    padding:0;
    margin:0;
    max-width:100%;
    overflow-x:auto;
    overflow-y: hidden;
    align-items:end;
    padding-bottom:3px;
    margin-bottom:-8px;
    border-bottom:2px solid white;
  }

  @supports selector(::-webkit-scrollbar) {
    ul.svelte-trb97o::-webkit-scrollbar {
      width: 1px;
      height: 8px;
      background-color:rgba(9,148,255,0.2);
      border-radius:4px;
    }
    ul.svelte-trb97o::-webkit-scrollbar-thumb {
      background-color:rgba(9,148,255,0.4);
      border-radius:4px;
    }
  }


  li.svelte-trb97o{
    margin:8px 0 0 0;
    padding:0;
  }
  li.svelte-trb97o a:where(.svelte-trb97o){
    display:block;
    padding:10px 15px;
    text-decoration:none;
    border:1px solid white;
    border-bottom:1px solid var(--border-color);
  }

  li.active.svelte-trb97o a:where(.svelte-trb97o){
    border-color:var(--border-color);
    border-radius: 5px 5px 0 0;
    background-color: white;
    border-bottom-color:white;
  }

  .number.svelte-trb97o{
    display: inline-block;
    padding: 0 5px;
  }

  .practice-correct.svelte-trb97o{
    color:#5cb85c;
    display:inline-flex;
    gap:2px;
    font-size:12px;
  }
  .success.svelte-trb97o{
    background: #5cb85c;
    color: white;
    border-radius: 3px;
  }
  
 /* Mobile */
 @media (max-width: 960px) {
    .tabs.svelte-trb97o{
      grid-template-columns:minmax(0,1fr);
      min-height:auto;
    }
    .tabs.svelte-trb97o > div:where(.svelte-trb97o){
      border-bottom:0px;
      padding:15px 15px 0px 15px;
    }
    ul.svelte-trb97o{
      margin:0 5px;
    }

  }






.questionpanel.svelte-1okm3bb{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "question question question" 
    "video search list";
  gap:0 10px;
  margin-bottom:10px;
  min-height:500px;
}
.question.svelte-1okm3bb{
  grid-area:question;
  height:100%;
}

.question.svelte-1okm3bb .inner:where(.svelte-1okm3bb){
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
  "questiontabs questiontabs" 
  "progressarea answercol" 
  "questioncontent answercol";
}

.questiontabs.svelte-1okm3bb{
  grid-area: questiontabs;
  display:flex;
  gap:10px;
  max-width:100%;
}

.questiontabs.svelte-1okm3bb > *{
  min-width:0;
  flex:1 1 300px;
}

.progressarea.svelte-1okm3bb{
  grid-area:progressarea;
  min-height:40px;
  padding:0 15px 15px 15px;
  display:grid;
  align-items: center;
  gap:10px;
  grid-template-columns:1fr auto;
}

.progressarea.svelte-1okm3bb .icons:where(.svelte-1okm3bb){
  display:flex;
  gap:15px;
}

.questioncontent.svelte-1okm3bb{
  grid-area:questioncontent;
  position:relative;
  overflow:hidden;
}

.questioncontent.svelte-1okm3bb img:where(.svelte-1okm3bb){
  display:block;
  max-width:100%;
  height:auto;
}

.answercol.svelte-1okm3bb{
  grid-area:answercol;
  background:rgba(39,158,244,0.1);
}

.videoblock.svelte-1okm3bb{
  grid-area:video;
  width:max(600px, calc((100vh - 150px) * 1.333333));
  max-width:40vw;
}

.videoblock.svelte-1okm3bb .tools:where(.svelte-1okm3bb){
  display:flex;
  position:absolute;
  gap:5px;
  top:3px;
  right:5px;
}

@media(max-width:1220px){
  .questionpanel.svelte-1okm3bb{
    display:block;
    max-height: initial;
  }

  .videoblock.svelte-1okm3bb{
    width:auto;
    max-width:initial;
  }
}
/* Mobile */
@media (max-width: 768px) {
    .question.svelte-1okm3bb .inner:where(.svelte-1okm3bb) {
      grid-template-columns: 1fr;
      grid-template-rows:auto auto 1fr auto;
      grid-template-areas:
      "questiontabs" 
      "progressarea" 
      "questioncontent "
      "answercol";
    }
    .questiontabs.svelte-1okm3bb{
      flex-direction:column;
    }
    .question.svelte-1okm3bb .questiontabs:where(.svelte-1okm3bb) > *{
      flex:1 1 auto;
      margin:0px;
    }
    .hide-sm.svelte-1okm3bb{
      display:none;
    }
  }

  .paneltools.svelte-1okm3bb{
    position:absolute;
    top:8px;
    right:8px;
    display:flex;
    gap:5px;
    --s-button-margins:0;
  }



.infopanels.svelte-1seg0tg{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap:10px;
}
h2.svelte-1seg0tg{
  margin-top:0;
}

.infopanels.svelte-1seg0tg .tools:where(.svelte-1seg0tg) {
  position: absolute;
  top:10px;
  right:10px;
  --s-button-margins:0;
  --s-primary:#0a76c4
}




.congratspopup.svelte-s1dfnz {
  --badgecolour: #0a0;
  --fullscale: scale(1);
  position: fixed;
  top: 10%;
  left: 50%;
  width: 220px;
  padding: 0 0px 20px 0px;
  margin-left: -110px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  z-index: 1000;
  animation: svelte-s1dfnz-zoomin 4s ease forwards;
}
.congratspopup.svelte-s1dfnz h4:where(.svelte-s1dfnz) {
  color: var(--badgecolour);
  text-align: center;
  font-weight: bold;
}
.congratspopup.svelte-s1dfnz .message:where(.svelte-s1dfnz) {
  display: block;
  margin: 0px auto;
  background: var(--badgecolour);
  padding: 10px;
  color: #fff;
  width: 190px;
  text-align: center;
  border-radius: 5px;
  opacity: 0;
  animation: svelte-s1dfnz-tada 1s ease-in 1.2s forwards;
}
.checkmark__circle.svelte-s1dfnz {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: var(--badgecolour);
  fill: none;
  animation: svelte-s1dfnz-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark.svelte-s1dfnz {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 20px auto;
  box-shadow: inset 0px 0px 0px var(--badgecolour);
  animation: svelte-s1dfnz-fill 0.4s ease-in-out 0.4s forwards, svelte-s1dfnz-scale 0.3s ease-in-out 0.9s both;
}
.checkmark__check.svelte-s1dfnz {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: svelte-s1dfnz-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.confetti.svelte-s1dfnz{
  background:rgba(0,0,0,0);
  position:fixed;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  pointer-events: none;
}

@keyframes svelte-s1dfnz-zoomin {
  0% {
    transform: scale(0);
  }
  10%, 90% {
    transform: var(--fullscale);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes svelte-s1dfnz-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes svelte-s1dfnz-scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes svelte-s1dfnz-fill {
  100% {
    box-shadow: inset 0px 0px 0px 70px var(--badgecolour);
  }
}
@keyframes svelte-s1dfnz-tada {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    opacity: 1;
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.5, 1.5, 1.5) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}


  .message-icon.svelte-1kdbdki {
    display: block;
    float: left;
    position: relative;
    width: 25px;
    margin-top: -8px;
  }
  .message-icon.svelte-1kdbdki .icon {
    transform: rotateY(180deg) scale(2);
  }
  .message-icon.svelte-1kdbdki .badge:where(.svelte-1kdbdki) {
    display: inline-block;
    position: absolute;
    top: -3px;
    left: -50%;
    background: #fec600;
    color: #2ca0f4;
    border-radius:10px;
    min-width:10px;
    padding:2px 7px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
  }


    h3.svelte-1lrfks8{
      font-size: 24px;
      font-weight: 500;
      line-height: 1.1;
      color: inherit;
    }
    .panel.svelte-1lrfks8{
      padding:0px 15px 15px 15px;
    }
    .formcols.svelte-1lrfks8{
      display:grid;
      grid-template-columns: 4fr 3fr;
      gap:10%;
    }
  
    .table.svelte-1lrfks8{
      width: 100%;
      max-width: 100%;
      margin-bottom: 20px;
      border-collapse: collapse;
      border-spacing: 0;
    }
    .table.svelte-1lrfks8 th:where(.svelte-1lrfks8),.table.svelte-1lrfks8 td:where(.svelte-1lrfks8){
      text-align:left;
      border-top: 0;
      vertical-align: bottom;
      border-bottom: 1px solid #ddd;
      padding: 8px;
      line-height: 1.428571429;
    }
    .table.svelte-1lrfks8 th:where(.svelte-1lrfks8){
      border-bottom: 2px solid #ddd;
    }
    
    .table-striped.svelte-1lrfks8 > tbody:where(.svelte-1lrfks8) > tr:where(.svelte-1lrfks8):nth-of-type(odd) {
      background-color: #f9f9f9;
    }
  
    .table.svelte-1lrfks8 label:where(.svelte-1lrfks8){
      display:block;
    }
  
    .badge.svelte-1lrfks8{
      background-color: #5cb85c;
      display: inline;
      padding: .2em .6em .3em;
      font-size: 75%;
      font-weight: bold;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: .25em;
    }
  
  

  .panel-heading.svelte-1u32zkt{
    margin:-15px -15px 15px -15px;
    box-shadow: var(--blue-shadow);
    background:#0a76c4;
    position: relative;
    z-index:2;
  }

  .tools.svelte-1u32zkt{
    display:flex;
    justify-content:flex-end;
    margin-top:20px;
  }

  .social-logins.svelte-1u32zkt{
    font-size:12px;
    color:var(--dark-blue);
    text-align: center;
  }

  .social-logins.svelte-1u32zkt .icon:where(.svelte-1u32zkt) {
    font-size: 40px;
    padding: 5px;
    display: grid;
    place-items: center;
  }

  .social-icons.svelte-1u32zkt{
    display:flex;
    margin:10px auto;
    width:max-content;
  }

  .social-icons.svelte-1u32zkt a:where(.svelte-1u32zkt){
    text-decoration: none;
    color:var(--dark-blue);
    text-align: center;
    transition: .5s background-color;
    padding: 10px;
    background-color: rgba(9, 148, 255, 0);
    border-radius: 5px;
  }
  .social-icons.svelte-1u32zkt a:where(.svelte-1u32zkt):hover{
    background: rgba(9, 148, 255, 0.1);
  }

  .icon.svelte-1u32zkt svg:where(.svelte-1u32zkt) {
    height: 1em;
    width: 1em;
  }

  .modal-title.svelte-1u32zkt{
    line-height: 1.428571429;
    font-size: 21px;
    font-family: 'Muli', sans-serif;
  }

  .forgot.svelte-1u32zkt{
    display:flex;
    flex-wrap:wrap;
  }
  .forgot.svelte-1u32zkt::before{
    content:"";
    width:100px;
  }
  .forgot.svelte-1u32zkt a:where(.svelte-1u32zkt){
    flex:1 1 431px;
    padding-left:5px;
  }



  :root{
    --white-shadow: 25px 25px 50px rgba(9, 148, 255, 0.25), -10px -10px 30px rgba(9, 148, 255, 0.1), inset -2px -2px 5px rgba(9, 148, 255, 0.5);
    --blue-shadow: inset 3px 3px 10px rgba(255, 255, 255, 0.2), inset -5px -2px 10px rgba(0, 0, 100, 0.2);
    --white-shadow-sm: 5px 5px 20px rgba(9, 148, 255, 0.25), -5px -5px 15px rgba(9, 148, 255, 0.1), inset -2px -2px 5px rgba(9, 148, 255, 0.5);
    --white-shadow-inset: inset 2px 2px 10px rgba(9, 148, 255, 0.2);
    --btn-shadow: 5px 5px 5px rgba(9, 148, 255, 0.25), -1px -1px 3px rgba(9, 148, 255, 0.1), inset -2px -2px 3px rgba(0, 0, 0, 0.2);
    --dark-blue: #164c80;
    accent-color: #3fa9f5;
    --mworange:#fec600;
    --gold: #F3CB33;
    --silver: #aaaabb;
    --bronze: #aa7700;
    --blue:rgb(63, 169, 245);
    --blue-light: #5AA7F1;
    --blue-dark: #1F58A4;
    --trophy: url('data:image/svg+xml;utf8,<svg width="100%" viewBox="0 0 125 136" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><path d="M120.366 10.649h-16.625V3.946c0-2.838-1.085-3.946-3.858-3.946H23.682c-2.773 0-3.864 1.108-3.864 3.946v6.709l-16.109-.006C1.045 10.649 0 11.716 0 14.437v.317c.85 21.972 15.059 40.578 36.588 48.447 4.639 7.007 10.317 13.164 17.212 18.226-.861 13.24-5.431 22.465-12.665 31.066-.557.657-.58 1.185.528 1.185h40.239c1.108 0 1.08-.528.528-1.185-7.233-8.602-11.803-17.826-12.664-31.066 6.82-4.996 12.446-11.083 17.056-17.99 21.895-7.723 36.398-26.489 37.259-48.683v-.317c-.005-2.721-1.05-3.788-3.714-3.788h-.001zM8.175 19.316c-.063-.428.052-.78.66-.78h11.827c1.814 11.757 4.834 22.887 9.403 32.868-11.901-7.201-19.892-18.73-21.891-32.088h.001zm107.725 0c-2.038 13.616-10.306 25.332-22.585 32.497 4.673-10.08 7.744-21.362 9.587-33.278h12.338c.608 0 .723.352.66.78v.001zM92.671 117.619H30.886c-2.56 0-3.863 1.331-3.863 3.947v9.599c0 2.615 1.303 3.946 3.863 3.946h61.785c2.56 0 3.864-1.331 3.864-3.946v-9.599c0-2.616-1.304-3.947-3.864-3.947z"/></g></svg>');
    --medal: url('data:image/svg+xml;utf8,<svg width="100%" viewBox="0 0 132 141" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><path d="M65.893 66.743c-20.429 0-37.048 16.612-37.048 37.055 0 20.422 16.619 37.049 37.048 37.049 20.429 0 37.048-16.62 37.048-37.049 0-20.442-16.619-37.055-37.048-37.055zm0 66.77c-16.392 0-29.724-13.331-29.724-29.724 0-16.4 13.331-29.737 29.724-29.737s29.724 13.331 29.724 29.737c0 16.385-13.331 29.724-29.724 29.724z"/><path d="M65.893 79.956l-7.2 14.606-16.114 2.336 11.661 11.361-2.754 16.048 14.407-7.581 14.408 7.581-2.754-16.048 11.66-11.361-16.114-2.336-7.2-14.606zM50.54 64.552C41.01 42.469 25.745 7.069 23.716 2.381L0 23.741l31.211 56.122a42.286 42.286 0 0119.331-15.309l-.002-.002zM100.575 79.861l31.211-56.122L108.07 2.38c-2.036 4.687-17.301 40.087-26.824 62.171a42.287 42.287 0 0119.331 15.308l-.002.002zM92.724 23.739L102.576 0H29.212l9.852 23.739h53.66z"/></g></svg>');
    --certificate: url('data:image/svg+xml;utf8,<svg width="100%" viewBox="0 0 118 116" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><path d="M90.6 77.956c0 8.428-12.642 8.428-12.642 0s12.642-8.428 12.642 0"/><path d="M103.452 71.736l-5.341-2.581v.005a2.12 2.12 0 01-1.175-1.612l-.811-5.878-5.847 1.037.005.006a2.106 2.106 0 01-1.896-.617l-4.108-4.277-4.114 4.277a2.106 2.106 0 01-1.896.617l-5.847-1.038-.811 5.878.005-.005a2.122 2.122 0 01-1.174 1.612l-5.336 2.576 2.797 5.225a2.115 2.115 0 010 1.991l-2.797 5.225 5.341 2.581v-.005a2.122 2.122 0 011.174 1.612l.812 5.878 5.846-1.037-.005-.006a2.103 2.103 0 011.891.617l4.114 4.277 4.114-4.277a2.105 2.105 0 011.896-.617l5.847 1.038.811-5.878-.006.005c.1-.701.538-1.301 1.175-1.612l5.336-2.576-2.797-5.225a2.115 2.115 0 010-1.991l2.797-5.225zM84.278 88.491a10.535 10.535 0 01-9.734-6.505 10.537 10.537 0 0113.764-13.763 10.534 10.534 0 016.505 9.734c-.005 5.815-4.72 10.529-10.535 10.535v-.001zM97.552 98.773l-6.905-1.222-2.465 2.565 15.518 15.676.695-3.519v.006a2.119 2.119 0 011.654-1.66l3.482-.695-11.067-11.198v-.006c-.295.09-.606.106-.911.053h-.001zM71.004 98.773a1.998 1.998 0 01-.916-.052l-11.067 11.198 3.482.695-.006.006a2.096 2.096 0 011.654 1.654l.696 3.518 15.518-15.675-2.455-2.566-6.906 1.222z"/><path d="M.001 80.064h62.528l1.127-2.107-1.127-2.107H6.321a2.107 2.107 0 01-2.107-2.107V6.321c0-1.164.943-2.107 2.107-2.107h105.347c.558 0 1.095.221 1.491.616.395.395.616.932.616 1.491v67.422c0 .558-.221 1.095-.616 1.491a2.112 2.112 0 01-1.491.616h-5.642l-1.127 2.107 1.127 2.107h11.963V0H0l.001 80.064z"/><path d="M61.297 68.897l6.305-3.039.953-6.927a2.127 2.127 0 01.843-1.417 2.108 2.108 0 011.607-.374l6.895 1.223 4.846-5.047v.006a2.171 2.171 0 013.039 0l4.846 5.046 6.921-1.228a2.105 2.105 0 012.455 1.786l.953 6.927 6.3 3.044a2.06 2.06 0 01.985 2.739h1.317V8.428H8.429v63.208h51.884a2.019 2.019 0 01-.074-1.575 2.05 2.05 0 011.059-1.164h-.001zM42.139 12.642h33.712v4.213H42.139v-4.213zm-8.427 8.427h50.566v4.214H33.712v-4.214zM16.856 33.711h86.384v4.214H16.856v-4.214zm8.428 29.497h-8.428v-4.214h8.428v4.214zm21.069 0H29.498v-4.214h16.855v4.214zM16.856 50.566v-4.213h86.384v4.213H16.856z"/></g></svg>');
    --pdf: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 512"><path d="M64 464l48 0 0 48-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 304l-48 0 0-144-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z"/></svg>');
    --excel: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 448L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm90.9 233.3c-8.1-10.5-23.2-12.3-33.7-4.2s-12.3 23.2-4.2 33.7L161.6 320l-44.5 57.3c-8.1 10.5-6.3 25.5 4.2 33.7s25.5 6.3 33.7-4.2L192 359.1l37.1 47.6c8.1 10.5 23.2 12.3 33.7 4.2s12.3-23.2 4.2-33.7L222.4 320l44.5-57.3c8.1-10.5 6.3-25.5-4.2-33.7s-25.5-6.3-33.7 4.2L192 280.9l-37.1-47.6z"/></svg>');
    --duo-gridhead:linear-gradient(to top, rgba(63, 169, 245, 0.3), rgba(63, 169, 245, 0.1));
    --duo-border:0px;
    --duo-oddrow: rgba(184, 223, 251, 0.2);

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;

    --duo-background:transparent;
  }

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

  .dropdown-menu{
    --duo-background:white;
    max-height:300px;
    overflow:auto;
  }

  .app.svelte-1ywx71v .grid .gridrow.active{
    background: var(--mworange);
    color:black;
  }



  a{
    text-decoration: none;
    color: #3fa9f5;
  }

  a:hover{
    text-decoration: underline;
  }

  body,html{
    padding: 0;
    margin:0;
    color: var(--dark-blue);
  }
  h1,h2,h3,h4{
    font-family: 'Muli',sans-serif;
    font-weight: 500;
    line-height: 1.1;
  }
  h1{ font-size: 36px; }
  /* :global(h2){ font-size: 18px; }
  :global(h3){ font-size: 18px; } */
  h4{ font-size: 18px; }

  .pre{
    white-space: pre-wrap;
  }

  .extras .videoplay{
    background-color: #3fa9f5;
    border-color: #30a2f4;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 5px;
    user-select: none;
    position: relative;
    padding-right: 40px;
    border-radius: 0 16px 16px 0;
    box-shadow: var(--btn-shadow);
    color: #fff;
    transition: transform 0.3s, background-color 0.3s;
  }
  .extras .videoplay:before{
    font-family: FontAwesome;
    position: absolute;
    top:3px;
    right: 4px;
    font-size: 25px;
    content:"";
    height:1em;
    width:1em;
    background-repeat:no-repeat;
    background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" class="svelte-1jxbcut"><path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z" fill="white"></path></svg>')
  }
  .extras .videoplay:hover{
    transform: scale(1.05, 1.05);
    background-color: #229cf3;
    border-color: #0f93f2;
    text-decoration: none;
  }

  .app.svelte-1ywx71v{
    margin: 8px 8px 0px 8px;
    gap:10px;
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-rows:auto auto minmax(auto, 1fr) auto;
    color: var(--dark-blue);
    min-height:calc(100dvh - 8px);
  }

  header.svelte-1ywx71v{
    background:var(--blue);
    grid-area: header;
    border-radius:5px;
    box-shadow: var(--btn-shadow);
    display:flex;
    justify-content: space-between;
    align-items: stretch
  }
  .loadbar.svelte-1ywx71v{
    grid-area:header;
    z-index:5;
    align-self: end;
    padding:0 10px;
    position:relative;
  }
  .loadbar_inner.svelte-1ywx71v{
    position:absolute;
    inset:4px 2px 2px 2px;
    height:4px;
  }
  main.svelte-1ywx71v{
    grid-area: main;
    min-width: 0; /* fix for overflow */
    position:relative;
  }
  footer.svelte-1ywx71v{
    grid-area: footer;
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0px 10px;
  }

  footer.svelte-1ywx71v a:where(.svelte-1ywx71v){
    color:var(--dark-blue);
    opacity:0.7;
    text-decoration:none;
    font-size:12px;
  }

  footer.svelte-1ywx71v a:where(.svelte-1ywx71v):hover{
    text-decoration: underline;
  }

  .logo.svelte-1ywx71v{
    height:72px;
    display:block;
    padding:10px 15px;
  }
  .logo.svelte-1ywx71v img:where(.svelte-1ywx71v){
    height:100%;
  }

  nav.svelte-1ywx71v{
    display:contents;
  }

  nav.svelte-1ywx71v menu:where(.svelte-1ywx71v){
    all:revert;
    display:flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    margin:0;
    padding:0;
  }
  nav.svelte-1ywx71v menu:where(.svelte-1ywx71v) li:where(.svelte-1ywx71v){
    display:block;
  }
  
  nav.svelte-1ywx71v menu:where(.svelte-1ywx71v) a:where(.svelte-1ywx71v){
    color:white;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0px 15px;
    height:100%;
    text-decoration:none;
  }

  nav.svelte-1ywx71v menu:where(.svelte-1ywx71v) li.active:where(.svelte-1ywx71v) a:where(.svelte-1ywx71v){
    background:rgba(0,0,0,0.1);
    color:var(--gold);
  }

  .opener.svelte-1ywx71v{
    display:none
  }
  
  /* Mobile */
  @media (max-width: 960px) {
    nav.svelte-1ywx71v{
      background:var(--blue);
      display:block;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      transform: translate(100%);
      transition:transform 0.3s;
      z-index:100;
    }
    button.opener.svelte-1ywx71v:focus ~ nav:where(.svelte-1ywx71v),button.opener.svelte-1ywx71v:hover ~ nav:where(.svelte-1ywx71v){
      transform: translate(0);
    }

    nav.svelte-1ywx71v menu:where(.svelte-1ywx71v){
      flex-direction: column;
      width:300px;
    }
    nav.svelte-1ywx71v menu:where(.svelte-1ywx71v) a:where(.svelte-1ywx71v){
      justify-content: flex-start;
      height:40px;
    }
    .opener.svelte-1ywx71v{
      all:unset;
      display:block;
      color:white;
      padding:0px 20px 10px 20px;
      font-size:40px;
    }

    .hide-sm{
      display:none;
    }
  }

  /* Theme stuff */
  .portal .form-row.form-row > input.form-input,
  .portal .form-row.form-row > select.form-input,
  .portal .form-row > textarea.form-input.form-input,
  .app.svelte-1ywx71v .form-row.form-row > input.form-input,
  .app.svelte-1ywx71v .form-row.form-row > select.form-input,
  .app.svelte-1ywx71v .form-row > textarea.form-input.form-input{
    border: 1px solid rgba(9, 148, 255, 0.2);
    box-shadow:inset 1px 1px 5px rgba(9, 148, 255, 0.5);
  }
  .app.svelte-1ywx71v .form-row .slabel{
    font-weight:bold;
  }

  .app.svelte-1ywx71v .sbtn.sbtn.sbtn{
    transition: .3s transform;
    box-shadow: var(--btn-shadow);
  }
  .app.svelte-1ywx71v  .sbtn.sbtn:hover{
    transform: scale(1.05, 1.05);
    box-shadow: var(--btn-shadow);
    z-index:3;
  }

  .app.svelte-1ywx71v  .sbtn.sbtn:focus-visible{  /* focus-visible polyfill */  
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  .app.svelte-1ywx71v  .sbtn.default{
    border-color: rgba(0, 0, 0, 0.06) #ddd #ddd rgba(0, 0, 0, 0.06);
  }

  .app.svelte-1ywx71v hr{
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  div.portal div.backdrop.backdrop{
    background: rgba(0,0,0,0.05);
  }

  .app.svelte-1ywx71v .portal .backdrop .smodal{
    border-radius: 6px;
    border: 0;
    box-shadow: var(--white-shadow);
  }

  .app.svelte-1ywx71v .progress .sprogress{
    box-shadow: var(--white-shadow-inset);
    background:transparent;
  }
  .app.svelte-1ywx71v .progress .sprogress .sbar{
    line-height:20px;
    height:20px;
  }

  /* simple buttons - as used for learderboards & active challenges */
  .app.svelte-1ywx71v button.simple, .app.svelte-1ywx71v a.simple{
    background:#fff;
    color:#3fa9f5;
    border:2px solid var(--blue-light);
    text-shadow:none;
    margin-bottom:15px;
    width:100%;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
    cursor:pointer;
  }

  /* modal headings */
  .portal .backdrop .smodal .heading{
    background: #0a76c4;
    border-radius: 5px 5px 0 0;
    box-shadow: var(--blue-shadow);
    color: #fff;
    border: 0;
  }

  .app.svelte-1ywx71v .portal .backdrop .smodal .close{
    font-weight: bold;
    line-height: 1.5;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .3;
    transition:opacity 0.3s;
  }

  .app.svelte-1ywx71v .portal .backdrop .smodal .close:hover{
    opacity: 0.5;
    text-shadow: 0 1px 3px #fff;
  }


  nav.tabs{
    display: flex;
    margin: 30px 0px;
    border-bottom: 3px solid #eee;
    justify-content: space-around;
    gap: 15px;
    padding: 0 30px;
  }

  nav.tabs button{
    all:unset;
    display: inline-block;
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #888;
    padding-bottom: 10px;
    margin-bottom: -3px;
    cursor: pointer;
  }

  nav.tabs button:hover{
    color: var(--blue-dark);
  }

  nav.tabs button.active{
    border-bottom: 3px solid var(--blue-light);
    color: var(--blue-dark);
  }
  .app.svelte-1ywx71v .inputsuffix, .app.svelte-1ywx71v .inputprefix{
    position:absolute;
    top:0;
    bottom:0;
    display:flex;
    align-items:center;
    padding:5px;
    color:black;
    white-space: nowrap;
    font-size:19px;
  }
  .app.svelte-1ywx71v .inputprefix{
    left:0;
    transform:translate(-100%,0);
    font-size:clamp(11px,1vw + 5px,18px);
  }
  .app.svelte-1ywx71v .inputsuffix{
    left:100%;
    font-size:clamp(11px,1vw + 5px,18px);
  }

  nav.svelte-1ywx71v menu:where(.svelte-1ywx71v) li:where(.svelte-1ywx71v) .dropdown{
    height:100%;
  }

  nav.svelte-1ywx71v menu:where(.svelte-1ywx71v) li:where(.svelte-1ywx71v) .dropdown a{
    gap:0 5px;
  }

  nav.svelte-1ywx71v menu:where(.svelte-1ywx71v) li:where(.svelte-1ywx71v) .dropdown-menu li a{
    color:var(--dark-blue);
    text-align:left;
    display:block;
    padding:5px 15px;
  }
  /* feedback bage */
  .badge.svelte-1ywx71v{
    display:inline-block;
    background:var(--mworange);
    color:white;
    padding:3px 5px;
    margin:0 5px;
    border-radius:3px;
    line-height:1;
    font-size:0.8em;
  }

  .panel-tools.svelte-1ywx71v{
    position:absolute;
    top:5px;
    right:5px;
  }
  @media(max-width:640px){
    .panel-tools.svelte-1ywx71v{
      position:static;
      display:flex;
    }
    .panel-tools.svelte-1ywx71v > *{
      flex:1;
    }
  }

  .checkboxLabel{
    cursor: pointer;
  }

  @media print{
    .app.svelte-1ywx71v{
      margin:0;
    }
    header.svelte-1ywx71v{
      display:none;
    }
    footer.svelte-1ywx71v{
      display:none;
    }
  }

  @media (max-width:640px){
    .hidden-sm{
      display:none;
    }
    .legal.svelte-1ywx71v{
      display:flex;
      flex-direction: row;
      gap:10px;
    }
  }
  @media (min-width:640px){
    .hidden-lg{
      display:none;
    }
  }



  :root{
    box-sizing: border-box;
  }
  .totalline.svelte-ytxqzb{
    background:#eee;
  }
  .table.svelte-ytxqzb > thead:where(.svelte-ytxqzb) > tr:where(.svelte-ytxqzb) > th:where(.svelte-ytxqzb), .table.svelte-ytxqzb > tbody:where(.svelte-ytxqzb) > tr:where(.svelte-ytxqzb) > td:where(.svelte-ytxqzb), .table.svelte-ytxqzb > tfoot:where(.svelte-ytxqzb) > tr:where(.svelte-ytxqzb) > td:where(.svelte-ytxqzb) {
    padding: 8px;
    vertical-align: top;
  }

  .table.svelte-ytxqzb > tbody:where(.svelte-ytxqzb) > tr:where(.svelte-ytxqzb) > td:where(.svelte-ytxqzb), .table.svelte-ytxqzb > tfoot:where(.svelte-ytxqzb) > tr:where(.svelte-ytxqzb) > td:where(.svelte-ytxqzb) {
    border-top: 1px solid #ddd; 
  }

  .table.svelte-ytxqzb > thead:where(.svelte-ytxqzb) > tr:where(.svelte-ytxqzb) > th:where(.svelte-ytxqzb) {
      vertical-align: bottom;
      border-bottom: 2px solid #ddd;
  }

  th.svelte-ytxqzb{
    text-align: left;
  }
  .form-control.svelte-ytxqzb{
    display: block;
    padding: 0.2rem 0.75rem;
    line-height: 1.25;
    font-size: 1rem;
    background-color: #fff;
    background-image: none;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: var(--d-border-radius,4px);
    box-sizing: inherit;
    width: calc(100% - 1.5em);
  }

  table.table.svelte-ytxqzb > tbody:where(.svelte-ytxqzb) > tr:where(.svelte-ytxqzb) > td:where(.svelte-ytxqzb){
    vertical-align: middle;
  }
  button.remove.svelte-ytxqzb{
    border:0;
    padding:10px;
    background:transparent;
    color:#777;
    cursor:pointer;
  }
  button.remove.svelte-ytxqzb:hover{
    color:black;
  }

  .table.svelte-ytxqzb{
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
  }

  .table-striped.svelte-ytxqzb > tbody:where(.svelte-ytxqzb) > tr:where(.svelte-ytxqzb):nth-of-type(odd) {
    background-color: #f9f9f9;
  }

  .nowrap.svelte-ytxqzb{
    white-space: nowrap;
  }

  /*mobile*/
  @media(max-width:900px){
    .hidden-sm.svelte-ytxqzb{
      display:none;
    }
    .table.svelte-ytxqzb{
      font-size:12px;
    }
    .table.svelte-ytxqzb .form-control:where(.svelte-ytxqzb){
      font-size:12px;
      padding:0.2em 0.75em;
    }
  }




  .toolbar.svelte-5rvvpo{
    text-align:right;
  }
  .gridcols.svelte-5rvvpo{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(400px,100%), 1fr));
  }
  .comments.svelte-5rvvpo{
    display:grid;
    gap:5px;
  }

  form.svelte-5rvvpo,.comment.svelte-5rvvpo{
    padding:10px;
    margin-top:10px;
    padding:10px;
    border-radius:8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
  }

  form.svelte-5rvvpo{
    margin-bottom:20px;
  }

  .comment.svelte-5rvvpo{
    display:grid;
    gap:2px;
    position: relative;
    grid-template-areas: 
      "content content"
      "when author";
  }
  .content.svelte-5rvvpo{
    grid-area: content;
    border-radius:4px;
    padding:10px;
    white-space: pre-wrap;
    background:#fff;
  }
  .author.svelte-5rvvpo{
    padding:0px 10px;
    grid-area: author;
    text-align:right;
    font-size:12px;
  }
  .when.svelte-5rvvpo{
    padding:0px 10px;
    grid-area: when;
    font-size:12px;
  }
  .tools.svelte-5rvvpo{
    --s-button-margins:0px;
    text-align:right;
  }

  .edittxt.svelte-5rvvpo{
    width:calc(100% + 30px);
    margin:-15px;
    border:0px;
    padding:15px;
  }



.archive.svelte-112g8wj{
  margin-bottom:10px;
}
details.svelte-112g8wj {
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 5px;
  background: #fff;
  margin-top: 5px;
}
details.svelte-112g8wj summary:where(.svelte-112g8wj) {
  position: relative;
  outline: none;
  font-size: 16px;
  background: #fff;
  padding: 10px;
  margin: -10px;
  margin-bottom: -10px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--d-primary);
  transition: background-color 0.5s, margin-bottom 0.5s;
  list-style: none;
}
details.svelte-112g8wj summary:where(.svelte-112g8wj)::-webkit-details-marker {
  display: none;
}
details.svelte-112g8wj summary:where(.svelte-112g8wj):before {
  display: block;
  content: " ";
  border: 5px solid transparent;
  border-top-color: currentColor;
  width: 0;
  height: 0;
  position: absolute;
  top: 17px;
  right: 15px;
  transform-origin: 5px 3px;
  transition: transform 0.3s;
  transform: rotate(-90deg);
}
details[open].svelte-112g8wj summary:where(.svelte-112g8wj) {
  margin-bottom: 10px;
  border-radius: 5px 5px 0 0;
  background: var(--d-primary);
  color: #fff;
  z-index: 2;
}
details[open].svelte-112g8wj summary:where(.svelte-112g8wj):before {
  transform: rotate(0deg);
}
details[open].svelte-112g8wj summary:where(.svelte-112g8wj) ~ :where(.svelte-112g8wj) {
  animation: sweep 0.5s ease-in-out;
}

.yearlist.svelte-112g8wj{
  list-style:none;
  margin:0 -10px;
  padding:0;
}
.yearlist.svelte-112g8wj a:where(.svelte-112g8wj){
  display:block;
  color:var(--d-primary);
  padding:5px 10px;
}
.yearlist.svelte-112g8wj a:where(.svelte-112g8wj):hover{
  text-decoration: none;
  background:#eee;
}
li.active.svelte-112g8wj{
  font-weight:600;
}




  div.form-input.tags.svelte-fpd2ux{
    padding:2px;
    display:flex;
    flex-wrap: wrap;
    gap:2px;
  }
  .inputwrap.svelte-fpd2ux{
    flex:1;
    min-width:50px;
  }
  .tags-input.svelte-fpd2ux{
    display:block;
    width:100%;
    height:100%;
    font-size:14px;
    margin:0;
    line-height:20px;
    border:0px;
  }
  div.form-input.svelte-fpd2ux .sbtn{
    margin:2px;
  }
  .tags-input.svelte-fpd2ux::-webkit-calendar-picker-indicator {
    display: none!important
  }
  .tags-input.svelte-fpd2ux:focus{
    outline:0px;
  }
  .tags.svelte-fpd2ux .remove:where(.svelte-fpd2ux){
    background:transparent;
    border:0px;
    margin:-5px -8px -5px 0px;
    transition:transform 0.2;
    color:inherit;
  }
  .tags.svelte-fpd2ux .remove:where(.svelte-fpd2ux):hover{
    transform: scale(1.5,1.5);
  }
  .tags.svelte-fpd2ux .remove:where(.svelte-fpd2ux):active,.tags.svelte-fpd2ux .remove:where(.svelte-fpd2ux):focus{
    outline:none;
    box-shadow: none;
  }
  



  .tags.svelte-199fblh{
    margin-bottom:10px;
  }
  .tagwrap.svelte-199fblh{
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 5px;
    background: #fff;
    margin-top: 5px;
  }





  .times.svelte-1lv4zsn{
    flex:1;
    display:flex;
    flex-direction: column;
    min-height:180px;
  }
  .timeslot.svelte-1lv4zsn {
    flex:1;
    display:flex;
    flex-direction: row;
    position:relative;
  }
  .time.svelte-1lv4zsn{
    width:50px;
    position:relative;
  }
  .label.svelte-1lv4zsn{
    position:absolute;
    top:-50%;
  }
  .line.svelte-1lv4zsn{
    flex:1;
    border-top:1px solid #eee;
  }
  .chosen.svelte-1lv4zsn{
    border-right:4px solid var(--d-primary);
  }
  .usage.svelte-1lv4zsn{
    background-image:repeating-linear-gradient(-45deg, #eee, #eee 7px, #fff 7px, #fff 14px);
    background-repeat:no-repeat;
    height:100%;
  }


.toolbar.svelte-19zg9mj{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  gap:15px;
}




  .wrapper.svelte-47e8q2{
    padding:10px;
    border:1px solid #eee;
    margin:0;
  }
  .content.svelte-47e8q2{
    display:flex;
    flex-wrap: wrap;
    gap:10px;
  }
  .calcol.svelte-47e8q2{
    border:1px solid #eee;
    padding:5px 10px;
  }
  h4.svelte-47e8q2{
    background:#f5f5f5;
    border-bottom:1px solid #eee;
    margin:-10px -10px 10px -10px;
    padding:10px 15px;
  }
  .availcol.svelte-47e8q2{
    flex:1;
    flex-basis:300px;
    display:flex;
    flex-direction: column;
    padding:10px;
  }
  h5.svelte-47e8q2{
    margin:0;
    padding:0px 0 15px 0;
    font-size:1em;
  }
  .bookingcol.svelte-47e8q2{
    padding:10px;
    flex:1;
    flex-basis:300px;
  }

  .mybookings.svelte-47e8q2{
    width:100%;
    max-width:100%;
    border-collapse: collapse;
  }
  .mybookings.svelte-47e8q2 thead:where(.svelte-47e8q2) td:where(.svelte-47e8q2):first-child{
    width:10%;
  }
  .mybookings.svelte-47e8q2 thead:where(.svelte-47e8q2) tr:where(.svelte-47e8q2){
    border-bottom:1px solid #ddd;
    font-weight: bold;
  }
  .mybookings.svelte-47e8q2 tbody:where(.svelte-47e8q2) tr:where(.svelte-47e8q2):nth-child(odd){
    background:#f9f9f9
  }
  




  .sbtn.svelte-d623es{
    border:1px solid #ccc;
    position: relative;
    box-sizing: border-box;
    padding:6px 12px;
    background:#fff;
    font-size: 14px;
    text-decoration: none;
    color:#333;
    white-space: nowrap;
    display: inline-block;
    margin:var(--s-button-margins,4px);
    text-align: center;
    cursor: pointer;
    line-height:1.25;
    border-radius:var(--s-border-radius,4px);
    box-shadow:0 0 0px rgba(0,0,0,0.5),0 0px 0px rgba(0,0,0,0.1);
    transition:box-shadow 0.2s;
    line-height:20px;
    height:34px;
    vertical-align: middle;
  }

  /* .sbtn    :global(svg){ height:15px; margin:0 2px; display:inline-block;vertical-align: middle;}

  .sbtn.xs :global(svg){ height:10px;width:10px;}
  .sbtn.sm :global(svg){ height:12px;width:12px;}
  .sbtn.lg :global(svg){ height:21px;width:21px;} */

  .sbtn.svelte-d623es:disabled{
    opacity:0.5;
    cursor:not-allowed;
  }
  .sbtn.svelte-d623es:disabled:hover{
    box-shadow:0 0 2px rgba(0,0,0,0.1),0 0px 0px rgba(0,0,0,0.1);
  }
  .sbtn.svelte-d623es:hover{box-shadow:0 0 4px rgba(0,0,0,0.5),0 0px 0px rgba(0,0,0,0.2);} 
  .sbtn.svelte-d623es:focus{outline:0px;box-shadow:0 0 3px rgba(0,0,0,0.5)}
  .sbtn.svelte-d623es:active{ outline:0px; box-shadow:inset 0 4px 4px rgba(0,0,0,0.2);} 
  .xs.svelte-d623es{font-size:10px; padding:2px 7px;height:21px;line-height:12px;}
  .sm.svelte-d623es{font-size:12px; padding:0px 10px;height:26px;line-height:16px;}
  .lg.svelte-d623es{font-size:21px; padding:10px 20px;height:52px;line-height:30px;}
  .block.svelte-d623es{display:block;width:100%;}

  .primary.svelte-d623es,.info.svelte-d623es,.success.svelte-d623es,.warning.svelte-d623es,.danger.svelte-d623es,.dark.svelte-d623es{
    color:white;
    box-shadow:0 0 2px rgba(0,0,0,0.1),0 0px 0px rgba(0,0,0,0.1);
  }   
 
  .primary.svelte-d623es{border-color:#2299ee;background-color:#2299ee; background-color:var(--s-primary,#2299ee);border-color:var(--s-primary,#2299ee)}
  .info.svelte-d623es{border-color:#17a2b8;background-color:#17a2b8; background-color:var(--s-info,#17a2b8);border-color:var(--s-info,#17a2b8);}
  .success.svelte-d623es{border-color:#28a745;background-color:#28a745; background-color:var(--s-success,#28a745);border-color:var(--s-success,#28a745);}
  .warning.svelte-d623es{border-color:#ffc107;background-color:#ffc107; background-color:var(--s-warning,#ffc107);border-color:var(--s-warning,#ffc107);}
  .danger.svelte-d623es{border-color:#dc3545;background-color:#dc3545; background-color:var(--s-danger,#dc3545);border-color:var(--s-danger,#dc3545);}
  .dark.svelte-d623es{border-color:#343a40;background-color:#343a40; background-color:var(--s-dark,#343a40);border-color:var(--s-dark,#343a40);}



  .buy.svelte-qa1ynh{
    display:flex;
    width:180px;
    margin:5px;
  }
  input.svelte-qa1ynh,button.svelte-qa1ynh{
    padding:8px 10px;
    font-size:14px;
    border:1px solid var(--s-primary,#444);
  }
  input.svelte-qa1ynh{
    width:50px;
    border-radius:5px 0 0 5px;
    text-align: center;
  }
  button.svelte-qa1ynh{
    flex:100;
    background:#2299ee;
    background:var(--s-primary,#444);
    color:white;
    border-radius:0 5px 5px 0;
  }
  button.svelte-qa1ynh:hover{
    box-shadow: inset 0 0 100px rgba(0,0,0,0.1)
  }



  .svelte-cspwm2 {
     box-sizing: border-box
   }
  .wrapper.svelte-cspwm2 {
    display: inline-block;
  }
  .toolbar.svelte-cspwm2{
    display:flex;
    width:100%;
  }
  .toolbar.svelte-cspwm2 > :where(.svelte-cspwm2){
    margin:0px;
  }
  .month.svelte-cspwm2{
    text-align-last: right;
  }
  button.svelte-cspwm2{
    font-size:14px;
    padding:6px 9px;
    border:0px;
    background:white;
  }
  .toolbar.svelte-cspwm2 > button:where(.svelte-cspwm2){
    width:0px;
    padding:6px 9px;
    width:15%;
  }
  select.svelte-cspwm2{
    -webkit-appearance: none;
    appearance: none;
    font-size:14px;
    padding:6px 5px;
    border:0px;
    background:white;
    width:35%;
  }
  table.svelte-cspwm2{
    table-layout: fixed;
    border-collapse: collapse;
    margin:5px;
    font-size:14px;
  }
  td.svelte-cspwm2,th.svelte-cspwm2{
    font-size:14px;
    padding:0;
    text-align:center;
  }
  td.svelte-cspwm2 button:where(.svelte-cspwm2){
    display:block;
    width:100%;
    border:0px;
    border-radius:3px;
    
  }
  td.svelte-cspwm2 button.today:where(.svelte-cspwm2){
    background-color: color-mix(in srgb, var(--s-primary,#2299ee) 15%, var(--duo-background,white))
  }
  td.svelte-cspwm2 button.active:where(.svelte-cspwm2){
    background:#2299ee;
    background:var(--s-primary,#2299ee);
    color:white;
  }




   /** Below can be overridden per site  **/
  :root{
    --chart-colour1:#FF1616;
    --chart-colour2:#FF914D;
    --chart-colour3:#FFDE59;
    --chart-colour4:#7ED957;
    --chart-colour5:#5271FF;
    --chart-colour6:#8C52FF;
    --chart-colour7:#7F00FF;
    --chart-opacity:44;
  }



  .steps.svelte-1txbbbh{
    --s-border-radius: 0px;
    --s-button-margins: 0px;
  }
  .steps.svelte-1txbbbh > button{
    flex:1;
    width: 100%;
    margin-right:-1px;
  }
  /* desktop */
  @media(min-width:900px){
    .steps.svelte-1txbbbh{
      display: flex;
      width: 100%;
      margin-right:1px;
    }
  }
  /* mobile */
  @media(max-width: 600px){
    .addresses.svelte-1txbbbh{
      --s-labelwidth:0px;
    }
  }

  .addresses.svelte-1txbbbh{
    display:grid;
    margin:5px;
    grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
    gap:20px;
  }




.cookie-banner.svelte-1uk6o7x{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(0,0,0,0.8);
  padding:25px;
  color:white;
  display:flex;
  flex-wrap:wrap;
  font-size:14px;
  gap:15px;
  font-weight:400;
  z-index:1059;
}
.message.svelte-1uk6o7x{
  flex:1 1 400px;
}

.message.svelte-1uk6o7x::slotted{
  color:white;
  font-weight:400;
}
.options.svelte-1uk6o7x{
  display:flex;
  gap:5px;
  align-items: center;
  justify-content: center
}
.modal-body.svelte-1uk6o7x{
  padding:20px;
}

button.svelte-1uk6o7x{
  background:black;
  border:1px solid white;
  padding:0.5em 1em;
  display:flex;
  color:white;
}

.infopanel.svelte-1uk6o7x{
  max-height:50px;
  overflow:hidden;
  font-size:14px;
  transition:max-height 0.3s;
}

.infopanel.active.svelte-1uk6o7x{
  max-height:800px;
}

.infopanel.svelte-1uk6o7x .infotitle:where(.svelte-1uk6o7x){
  all:unset;
  width:90%;
  display:block;
  background:#eee;
  padding:5px 30px;
  border-radius:5px;
  position: relative;
  cursor:pointer;
}

.infopanel.svelte-1uk6o7x .infotitle:where(.svelte-1uk6o7x) h4:where(.svelte-1uk6o7x){
  font-size:16px;
  padding:0;
  margin:0.5rem 0 0.5rem 0;
}

.infopanel.svelte-1uk6o7x .infotitle:where(.svelte-1uk6o7x):before{
  content:"";
  position: absolute;
  top: calc(50% - 10px);
  left: 5px;
  height:20px;
  width:20px;
  background-image:url('data:image/svg+xml;utf8,<svg width="100%" height="100%" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path style="fill:%23444" d="m66.156 50l-2.2188-2.5938-24-28-6.0938 5.1875 21.781 25.406-21.781 25.406 6.0938 5.1875 24-28z"/></svg>');
  transition:transform 0.3s;
}

.infopanel.active.svelte-1uk6o7x .infotitle:where(.svelte-1uk6o7x):before{
  transform: rotate(90deg);
}

.infopanel.svelte-1uk6o7x h4:is(span,label){
  font-size:12px;
  text-align:right;
}

.infotools.svelte-1uk6o7x{
  position: absolute;
  right:20px;
  top:0px;
  display:flex;
  gap:10px;
  align-items: center;
  height:45px;

}
.infotools.svelte-1uk6o7x > :where(.svelte-1uk6o7x){
  margin:0;
}

.panelinner.svelte-1uk6o7x{
  padding:10px;
}

thead.svelte-1uk6o7x{
  background:#777;
  color:white;
}

.checkbox.svelte-1uk6o7x{
  display:flex;
}
.checkbox.svelte-1uk6o7x input[type=checkbox]:where(.svelte-1uk6o7x){
  position: relative;
    width: 44px;
    height: 24px;
    margin: 0;
    background: #d0d5d2;
    -webkit-appearance: none;
    border-radius: 50px;
    cursor: pointer;
    outline: 0;
    border: none;
    top: 0;
}
.checkbox.svelte-1uk6o7x input[type=checkbox]:where(.svelte-1uk6o7x):before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin: 0;
}

.checkbox.svelte-1uk6o7x input[type=checkbox]:where(.svelte-1uk6o7x):checked{
  background:var(--s-success,#28a745);
}

.checkbox.svelte-1uk6o7x input[type=checkbox]:where(.svelte-1uk6o7x):checked:before{
  transform: translateX(20px);
}




  .svelte-k13m19 {
    white-space: normal;
    -webkit-user-modify:read-only;
  }
  .dropdown.svelte-k13m19{
    display:inline-block;
    position:relative;
  }

  .dropdown-menu.svelte-k13m19{
    display:block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background:var(--duo-background,white);
    border: 1px solid rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    background-clip: padding-box;
  }

  .dropdown-menu.right.svelte-k13m19{
    right:0;
    left:auto;
  }

  .dropdown-menu.top.svelte-k13m19{
    top:auto;
    bottom:100%;
  }

  duo-dropdown [slot="menu"] a,
  .dropdown-menu [slot="menu"] a,
  .dropdown-menu [slot="menu"] button{
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: currentColor;
    white-space: nowrap;
    background:var(--duo-background,white);
    width:100%;
    text-align:left;
    border:0px;
    font-size:14px;
    text-decoration: none;
  }
  duo-dropdown [slot="menu"] a:hover,
  .dropdown-menu [slot="menu"] a:hover,
  .dropdown-menu [slot="menu"] button:hover{
    text-decoration: none;
    color: currentColor;
    background-color: color-mix(in srgb, var(--s-primary,#2299ee) 15%, var(--duo-background,white))
  }
  .pop-backdrop.svelte-k13m19{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background:rgba(0,0,0,0.01);
    z-index:9;
  }





duo-card:not(:defined) {
  visibility: hidden;
}



  duo-icon{
    display:inline-block;
    line-height:1em;
  }
  .icon.svelte-k9w96m{
    height:1em;
    width:1em;
    display: inline-flex;
    align-self: center;
    position:relative;
    top:0.15em;
    -webkit-font-smoothing:antialiased;
    fill:currentcolor;
  }
  .icon.svelte-k9w96m svg{
    width:1em;
    height:1em;
  }
  .no-icon.svelte-k9w96m,.error.svelte-k9w96m{
    background:#eee;
    height: 1.1em;
    width:1.1em;
    line-height:1em;
    border:1px solid #ccc;
    border-radius:10000px;
    font-size:1em;
    flex:1;
    text-align:center;
    position:relative;
    top:-0.1em;
  }
  .loading.svelte-k9w96m{
    flex:1;
    height: 1.1em;
    width:1.1em;
    border:1px solid #ccc;
  }




  .menu.svelte-517jul{
    position:relative;
  }
  .overlay.svelte-517jul{
    position: absolute;
    inset:0;
    background-image: linear-gradient(45deg, #00000002 25%, #00000009 25%, #00000009 50%, #00000002 50%, #00000002 75%, #00000009 75%, #00000009 100%);
    background-size: 56.57px 56.57px;
  }




  .editarea.svelte-1rtih5n{
    box-shadow:0 0 0 1px rgba(255,255,255,0.5),0 0 0 1px rgba(0,0,0,0.5);
    padding:0px 10px;
    color:rgba(0,0,0,0.3);
    text-shadow:0px 0px 1px white;
  }




  .flipcard.svelte-45ifkp{
    perspective:500px;
    transform-origin: center;
    display:inline-block;
    --speed:0.5s;
    height:100%;
  }

  .cardwrap.svelte-45ifkp{
    transition:transform var(--speed);
    display:grid;
    transform-style: preserve-3d;
    height:100%;
  }
    
  .flipx.svelte-45ifkp{
    transform: rotateY(180deg);
  }
  
  .flipy.svelte-45ifkp{
    transform: rotateX(180deg);
  }
  
  .flipy.flipx.svelte-45ifkp{
    transform: rotate3d(-45,-45,0,180deg)
  }
      
  .front.svelte-45ifkp,.back.svelte-45ifkp{
    background: white;
    backface-visibility:hidden;
    height:100%;
  }

  .front.svelte-45ifkp{
    transform:rotateY(0deg);
    grid-column:1 / 2;
    grid-row:1 / 2;
    position: relative;
    height:100%;
  }
  
  .back.svelte-45ifkp{
    transform:rotate3d(0,1,0,180deg);
    transition-delay: calc(var(--speed) / 4);
    position: absolute;
    inset:0;
    overflow:hidden;
  }
  /* below makes card get bigger if neccessary on back */
  .flipy.svelte-45ifkp .back:where(.svelte-45ifkp),.flipx.svelte-45ifkp .back:where(.svelte-45ifkp){
    overflow:visible;
    position: static;
    grid-column:1 / 2;
    grid-row:1 / 2;
  }

  .flipy.svelte-45ifkp .back:where(.svelte-45ifkp){
    transform:rotate3d(1,0,0,180deg);
  }

  .flipy.flipx.svelte-45ifkp .back:where(.svelte-45ifkp){
    transform: rotate3d(-1,-1,0,180deg);
  }



  .pagination.svelte-1fu0qh{
    --s-primary:var(--d-primary,#ff3e00);
    margin-top:10px;
  }

  .events.svelte-1fu0qh{
    display:grid;
    grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
    gap:10px;
    container-type: inline-size;
  }

  .picker.svelte-1fu0qh{
    border:1px solid #ccc;
    border-radius:5px;
    display:grid;
    grid-template-rows: 1fr auto;
  }
  .picker.svelte-1fu0qh h2:where(.svelte-1fu0qh){
    padding:15px;
    margin:auto;
    font-size:3em;
    font-weight:normal;
    color:var(--s-primary,var(--d-primary,#ff3e00));
  }

  .info.svelte-1fu0qh{
    text-align:left;
    width:100%;
    border:1px solid var(--s-primary,var(--d-primary,#ff3e00));
    padding:10px 15px 20px 15px;
    min-height:100%;
    background:var(--s-primary,var(--d-primary,#ff3e00));
    border-radius:5px;
    cursor:pointer;
    transition:scale 0.3s;
    color:white;
    display:flex;
    flex-direction: column;
    justify-content: center;
  }
  .info.svelte-1fu0qh p:where(.svelte-1fu0qh){
    margin:0 0 5px 0;
  }

  .event.svelte-1fu0qh{
    text-align:left;
    appearance: none;
    width:100%;
    background:white;
    text-decoration: none;
    color:inherit;
    box-sizing: border-box;
    display:grid;
    padding:10px 15px;
    min-height:100%;
    border:1px solid #ccc;
    gap:10px;
    grid-template-rows:80px 1fr;
    border-radius:5px;
    cursor:pointer;
    transition:scale 0.3s;
    grid-template-areas: 
      "title"
      "date"
      "description";
  }

  .event.svelte-1fu0qh:hover,.info.svelte-1fu0qh:hover{
    scale:0.95;
  }

  .title.svelte-1fu0qh{
    align-self: center;
    margin:0;
    padding:0;
    color:var(--s-primary,var(--d-primary,#ff3e00));
    grid-area: title;
    font-size:1.5em;
    text-wrap: balance;
  }

  .date.svelte-1fu0qh{
    grid-area: date;
  }

  .day.svelte-1fu0qh{
    font-size:4.5em;
    line-height:0.9em;
  }
  .day.svelte-1fu0qh sup:where(.svelte-1fu0qh){
    font-size:0.4em;
    line-height:1em;
    position: relative;
    top: -0.5em;
  }
  .month.svelte-1fu0qh{
    font-size:2.5em;
    font-weight: normal;
  }
  .year.svelte-1fu0qh{
    font-size:1.5em;
  }
  .description.svelte-1fu0qh{
    grid-area: description;
    font-size:0.9em;
  }
  .info.svelte-1fu0qh ul:where(.svelte-1fu0qh){
    list-style:none;
    padding:0;
    margin:0;
  }
  .info.svelte-1fu0qh ul:where(.svelte-1fu0qh),.info.svelte-1fu0qh li:where(.svelte-1fu0qh){
    font-size:0.8rem;
  }
  h4.svelte-1fu0qh{
    margin:0px 0 0 0;
    font-size:1.5em;
  }
  .dates.svelte-1fu0qh{
    margin-top:5px;
  }


  @container (width< 400px) {
    .picker.svelte-1fu0qh h2:where(.svelte-1fu0qh){
      margin:0;
      font-size:2em;
    }
    .event.svelte-1fu0qh {
      padding-top:10px;
      gap:5px;
      grid-template-rows:1fr min-content;
      grid-template-columns:80px 1fr;
      grid-template-areas: 
      "date title"
      "date description";
    }
    .date.svelte-1fu0qh{
      display:grid;
      font-size:6px;
      place-content:center start;
    }
    .description.svelte-1fu0qh{
      margin:0;
    }
    .info.svelte-1fu0qh{
      padding:10px 15px 10px 15px;
    }
  }



  






  .autocomplete.svelte-1c8p4jn{
    width:100%;
    position:relative
  }
  .optionlist.svelte-1c8p4jn{
    position:absolute;
    left:0;
    right:0;
    top:35px;
    background:white;
    box-shadow:0 1px 5px rgba(0,0,0,0.3);
    z-index:1001;
    max-height:200px;
    overflow:auto;
    overscroll-behavior: contain;
  }
  .optionlist.svelte-1c8p4jn > div:where(.svelte-1c8p4jn){
    padding:7px 10px;
    cursor:pointer;
  }
  .optionlist.svelte-1c8p4jn > div.active:where(.svelte-1c8p4jn){
    background:#eee;
  }


  .alertwrap.svelte-eekf4q{
    margin:5px 0;
  }
  .alertwrap.svelte-eekf4q .salert{
    padding:0;
    --s-formrow-margins:5px;
  }


  .form-row.vertical.svelte-1gdqdka{
    display:flex;
    flex-wrap: wrap;
  }
  
  .form-row.svelte-1gdqdka{
    display:flex;
    margin:var(--s-formrow-margins,5px);
    box-sizing: border-box;
    align-items:flex-start;
    align-items: center;
  }

  .checkrow.svelte-1gdqdka{
    align-items:center;
  }

  .form-row.svelte-1gdqdka :has(.stars){
    align-self: center
  }

  .form-row.svelte-1gdqdka :where(.svelte-1gdqdka) {
    box-sizing: border-box;
  }

  .form-row.svelte-1gdqdka label:where(.svelte-1gdqdka){
    text-align:right;
    line-height:1.8em;
    padding:0 8px 0 0;
  }

  .form-row.vertical.svelte-1gdqdka label:where(.svelte-1gdqdka){
    text-align:left;
    margin:0;
    padding:0 0 0 0;
  }

  .form-row.svelte-1gdqdka .form-input{
    flex:3;
    padding:5px 8px;
    font-size:14px;
    box-sizing: border-box;
  }
  .slotwrap.svelte-1gdqdka{
    flex:3;
  }

  .form-row.svelte-1gdqdka .checkboxLabel:where(.svelte-1gdqdka){
    padding:0;
    margin:2px 3px;
    text-align:left;
  }
  .form-row.svelte-1gdqdka [slot="suffix"] .sbtn{
    border-radius:0 var(--s-border-radius,4px) var(--s-border-radius,4px) 0;
    margin:0;
  }
  
  .form-row.hasSuffix.svelte-1gdqdka [slot="suffix"] > :not(button),
  .form-row.hasPrefix.svelte-1gdqdka [slot="prefix"] > :not(button){
    display:flex;
    padding: 6px 12px; 
    border: 1px solid #ccc;
    height:34px;
    align-items: center;
    box-sizing: border-box;
  }

  .form-row.hasSuffix.svelte-1gdqdka [slot="suffix"] > div.dropdown{
    padding:0; 
    border:0;
  }

  .form-row.hasSuffix.svelte-1gdqdka [slot="suffix"] > :not(button){
    border-radius:0 var(--s-border-radius,4px) var(--s-border-radius,4px) 0;
  }
  .form-row.hasPrefix.svelte-1gdqdka [slot="prefix"] > :not(button){
    border-radius:var(--s-border-radius,4px) 0 0 var(--s-border-radius,4px);
  }

  .form-row.svelte-1gdqdka [slot="prefix"] .sbtn{
    border-radius:var(--s-border-radius,4px) 0 0 var(--s-border-radius,4px);
    margin:0;
  }

  .form-row.svelte-1gdqdka input.form-input,
  .form-row.svelte-1gdqdka select.form-input,
  .form-row.svelte-1gdqdka textarea.form-input,
  .form-row.svelte-1gdqdka div.form-input{
    font-weight:normal;
    border-radius:var(--s-border-radius,4px);
    display: block;
    width: 100%;
    font-size: 14px;
    font-family:inherit;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    margin: 0;
    height:34px;
    padding: 4px 8px 5px 8px;
  }
  /* add own dropdown arrow */
  .form-row.svelte-1gdqdka select.form-input{
    background: white url("data:image/svg+xml;utf8,<svg fill='currentColor' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z' fill='grey' /><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 50%;
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    padding: 4px 25px 5px 8px;
  }

  .form-row.svelte-1gdqdka input.form-input[disabled],
  .form-row.svelte-1gdqdka select.form-input[disabled],
  .form-row.svelte-1gdqdka textarea.form-input[disabled],
  .form-row.svelte-1gdqdka div.form-input[disabled]{
    color:#999;
    background-color:rgba(0,0,0,0.03);
    cursor:not-allowed;
  }

  .form-row.svelte-1gdqdka .form-input-static{
    display:block;
    padding: 0 8px;
  }

  .form-row.svelte-1gdqdka textarea.form-input,
  .form-row.svelte-1gdqdka div.form-input{
    height:auto;
  }

  .form-row.hasSuffix.svelte-1gdqdka input.form-input{
    border-radius:var(--s-border-radius,4px) 0 0 var(--s-border-radius,4px);
    border-right:0px;
  }

  .form-row.hasPrefix.svelte-1gdqdka input.form-input{
    border-radius:0 var(--s-border-radius,4px) var(--s-border-radius,4px) 0;
    border-left:0px;
  }

  .form-row.hasPrefix.hasSuffix.svelte-1gdqdka input.form-input{
    border-radius:0;
    border-left:0px;
    border-right:0px;
  }

  .form-row.svelte-1gdqdka input[type=range]{
    flex:3;
    display:block;
  }

  .form-row.svelte-1gdqdka input[type=color]{
    padding:0;
    height:35px;
    width:40px;
    flex:none;
  }

  .form-row.svelte-1gdqdka input[type="checkbox"],.form-row.svelte-1gdqdka input[type="radio"]{
    width:auto;
    border:0;
    margin: 0px 5px 0 5px;
    display:inline-block;
  }

  .checkboxLabel.svelte-1gdqdka{
    padding: 0;
    margin: 3px 0;
    text-align: left;
  }

  .note.svelte-1gdqdka{
    font-size:0.8em;
    margin-left:var(--s-labelwidth);
    padding:0 0 8px 0;
  }


  /* Mobile, put lable on line above */
  @media only screen and (max-width: 600px) {
    .form-row.svelte-1gdqdka:not(.checkrow){
      flex-wrap: wrap;
      justify-content: space-between;
    }
  
    .form-row.svelte-1gdqdka .slabel:where(.svelte-1gdqdka){
      text-align:left;
      margin:0;
      width:100%!important;
      padding:1px 2px;
    }

    .note.svelte-1gdqdka{
      margin-left:5px;
    }

    .note.svelte-1gdqdka a{
      color:inherit;
    }
  }
  



  @media(min-width:800px){
    .search.svelte-yhback{
      width:200px;
      position:absolute;
      top:0px;
      right:0;
    }
  }
  h5.svelte-yhback{
    cursor:pointer;
    font-weight:bold;
  }
  h5.svelte-yhback:hover{
    text-decoration:underline;
  }



  .sbreadcrumb.svelte-1d7i6i9{
    padding:0;
    margin:0;
    background:white;
    border:2px solid #eee;
    margin-bottom:20px;
    list-style:none;
  }
  .sbreadcrumb.svelte-1d7i6i9 li:where(.svelte-1d7i6i9){
    margin:0;
    display:inline-block;
  }

  .sbreadcrumb.svelte-1d7i6i9 button:where(.svelte-1d7i6i9){
    border:0px;
    padding:6px 12px;
    font-size:16px;
    line-height:1.5;
    cursor:pointer;
    color:#555;
    background:transparent;
  }

  .sbreadcrumb.svelte-1d7i6i9 > li:where(.svelte-1d7i6i9) + li:where(.svelte-1d7i6i9):before{
    content: '/\00a0';
    padding: 0 5px;
    color: #ccc;
  }

  .forum.svelte-1d7i6i9{
    position:relative;
  }

  .forum.svelte-1d7i6i9 .edit{
    position:absolute;
    bottom:2px;
    right:5px;
  }
  .forum.svelte-1d7i6i9 .edit button{
    margin:0
  }
  .forum.svelte-1d7i6i9 img[alt=icon]{
    float:left;
    max-width:100px;
    margin:0 10px 10px 0;
  }
  .forum.svelte-1d7i6i9 .preview{
    overflow:hidden; /* prevent float on icon cause overlap */
  }
  .post.svelte-1d7i6i9{
    border:2px solid #eee;
    background:white;
    padding:10px 15px;
    margin:10px 0;
    transition:0.5s border;
    position: relative;
  }

  .clickinto.svelte-1d7i6i9{
    cursor:pointer;
  }

  .post.svelte-1d7i6i9:hover{
    border:2px solid #aaa;
  }

  .post.svelte-1d7i6i9:hover .details:where(.svelte-1d7i6i9){
    background:#ddd;
  }
  .details.svelte-1d7i6i9,.toolbar.svelte-1d7i6i9{
    background:#eee;
    padding:5px 15px;
    margin:10px -15px -10px -15px;
    font-size:12px;
    transition:0.5s background;
    
  }
  .toolbar.svelte-1d7i6i9{
    text-align:right;
  }
  .unpublished.svelte-1d7i6i9{
    position:absolute;
    top:5px;
    right:5px;
    pointer-events: none;
    padding:3px 8px;
    font-size:12px;
    border:1px solid #ddd;
    border-radius: 3px;
  }
  .spinner.svelte-1d7i6i9{
    border:4px solid #444;
    border-color:rgba(0,0,0,0.5) rgba(0,0,0,0.3) rgba(0,0,0,0.2) rgba(0,0,0,0.1);
    border-radius:50%;
    width:18px;
    height:18px;
    display:inline-block;
    animation:svelte-1d7i6i9-spin 1s infinite linear;
    margin-bottom:-4px;
  }
  @keyframes svelte-1d7i6i9-spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }



  button.svelte-15le1me{
    cursor: pointer;
  }
  .editing.svelte-15le1me{
    display:block;
    position:absolute;
    inset:0;
    outline:1px solid #22aae3;
    z-index:2;
    pointer-events:none;
  }
  .label.svelte-15le1me{
    position:absolute;
    top:0;
    right:0;
    background-color: #22aae3;
    color:white;
    font-size:11px;
    padding:2px 4px;
    z-index:2;
    pointer-events:none;
  }
  .gallery.svelte-15le1me{
    display:contents;
  }

  .gallery-backdrop.svelte-15le1me{
    position: fixed;
    inset:0px;
    background:rgba(0,0,0,0);
    transition:0.4s background-color;
    overflow-x:scroll;
    overflow-y:hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none; /* hide scrollbar for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
  }

  .show.gallery-backdrop.svelte-15le1me{
    background:rgba(0,0,0,0.9);
  }

  .gallery-backdrop.svelte-15le1me::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }

  .slider.svelte-15le1me{
    display:flex;
    height:80vh;
    width:auto;
  }

  .gallery-panel.svelte-15le1me{
    flex:1 0 100vw;
    height:100vh;
    display:grid;
    place-items: center;
    scroll-snap-align: start;
  }

  .gallery-panel.svelte-15le1me figure,.gallery-panel.svelte-15le1me img{
    display:grid;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    transform:scale(0.3);
    opacity:0;
    transition:0.2s opacity, 0.3s transform;
  }

  .show.svelte-15le1me .gallery-panel:where(.svelte-15le1me) figure,.show.svelte-15le1me .gallery-panel:where(.svelte-15le1me) img{
    transform:scale(1);
    opacity:1;
  }

  .gallery-panel.svelte-15le1me figure > *{
    grid-column:1 / 2;
    grid-row:1 / 2;
  }
    
  .gallery-panel.svelte-15le1me img{
    max-height:90vh;
    max-width:90vw;
    object-fit: contain;
  }

  .gallery-pager.svelte-15le1me{
    position: fixed;
    inset:auto 0 15px 0;
    display:flex;
    justify-content: center;
    gap:5px;   
  }

  .gallery-pager.svelte-15le1me button:where(.svelte-15le1me){
    all:unset;
    width:10px;
    height:10px;
    background:white;
    opacity:0.3;
    cursor: pointer;
  }

  .gallery-pager.svelte-15le1me button:where(.svelte-15le1me):hover{
    opacity:0.6;
  }

  .gallery-pager.svelte-15le1me button.active:where(.svelte-15le1me){
    opacity:1;
  }

  .close.svelte-15le1me{
    border:0;
    background:transparent;
    position: fixed;
    top:0px;
    right:0px;
    display:grid;
    place-items: center;
    width:50px;
    height:50px;
    font-size:21px;
    color:white;
    z-index:5;
    transition:0.3s background-color;
  }

  .close.svelte-15le1me:hover{
    background: rgba(0,0,0,0.5);
  }

  .gallery-controls.svelte-15le1me{
    z-index:10;
  }

  .gallery-controls.svelte-15le1me .next:where(.svelte-15le1me), .gallery-controls.svelte-15le1me .prev:where(.svelte-15le1me){
    all:unset;
    position: fixed;
    display: block;
    inset:50% 0 auto auto;
    height:50px;
    width:50px;
    background: rgba(0,0,0,0);
    transition:0.3s background-color;
    z-index:10;
  }
  .gallery-controls.svelte-15le1me .next:where(.svelte-15le1me):hover, .gallery-controls.svelte-15le1me .prev:where(.svelte-15le1me):hover{
    background: rgba(0,0,0,0.5);
    color: #fff;
  }

  .gallery-controls.svelte-15le1me .next:where(.svelte-15le1me):before, .gallery-controls.svelte-15le1me .prev:where(.svelte-15le1me):before{
    content:'';
    position: absolute;
    top: calc(50% - 15px);
    left: 10px;
    height:30px;
    width:30px;
    background-image:url('data:image/svg+xml;utf8,<svg width="100%" height="100%" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="m66.156 50l-2.2188-2.5938-24-28-6.0938 5.1875 21.781 25.406-21.781 25.406 6.0938 5.1875 24-28z"/></svg>')

  }
  .gallery-controls.svelte-15le1me .prev:where(.svelte-15le1me){
    right: auto;
    left: 0;
    transform:scaleX(-1)
  }








.map.svelte-1mac6yd {
  width: 100%;
  height: 100%;
  min-height:100px;
}
/* below hack to fix tripple icons in shadow mode - taken from https://stackoverflow.com/questions/53849251/google-maps-api-showing-fullscreen-and-zoom-icons-3-times-in-each-button/54761069 */ 
.gm-control-active > img {
    box-sizing: content-box;
    display: none;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

.gm-control-active > img:nth-child(1) {
    display:block;
}

.gm-control-active:hover > img:nth-child(1),
.gm-control-active:active > img:nth-child(1) {
    display:none;
}

.gm-control-active:hover > img:nth-child(2),
.gm-control-active:active > img:nth-child(3) {
    display:block;
}



  .d-icon.svelte-8mwtv4{
    height:1em;
    display: inline-flex;
    align-self: center;
    position:relative;
    top:0.15em;
    -webkit-font-smoothing:antialiased;
  }
  .d-icon.svelte-8mwtv4 svg{
    height:100%;
    shape-rendering: geometricPrecision;
  }



  .formdate .form-row .form-control{
    border-radius:4px 0 0 4px;
    border-right-width: 0px;
  }


	.virtual-viewport.svelte-1ru5i85 {
		position: relative;
		overflow-y: auto;
		-webkit-overflow-scrolling:touch;
		display: block;
		min-height:20px;
	}

	.virtual-contents.svelte-1ru5i85, .virtual-row.svelte-1ru5i85 {
		display: block;
	}
	/* removed so we could show re-order bar better */
	/* virtual-row {
		overflow: hidden;
	} */


  .svelte-xow58 {
    box-sizing: border-box;
  }
  .grid.svelte-xow58{
    height:100%;
    min-height:100px;
    display:flex;
    flex-direction: column;
    border:var(--duo-border,1px solid #ccc);
  }
  .rows.svelte-xow58{
    flex:1;
    height:calc(100% - 70px);
    cursor:pointer;
    position:relative;
    overflow:hidden;
  }
  .headerrow.svelte-xow58,.gridrow.svelte-xow58,.virtual-row .gridrow [slot="row"]{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    position:relative;
  }
  .virtual-row .gridrow [slot="row"]{
    flex:1  
  }
  .headerrow.svelte-xow58,.gridfooter.svelte-xow58{
    border:var(--duo-border,1px solid #ccc);
    border-width:0 0 1px 0;
    background:var(--duo-gridhead,linear-gradient(to bottom, #fff 0, #eee 100%));
  }
  .gridfooter.svelte-xow58{
    border-width:1px 0 0 0;
    padding:7px;
    font-size:0.9em; 
    height:30px;
  }
  .header.svelte-xow58{
    padding:7px;
    font-size:0.9em;
    font-weight: bold;
    cursor:pointer;
  }
  .gridrow.svelte-xow58 .cell{
    padding:7px;
    font-size:0.9em;
    overflow:hidden;
    white-space: nowrap;
    width: 0; /** fixes column expansion bug **/
  }
  /* :global([slot="row"]){
    display:contents;
  } */
  .gridrow.svelte-xow58{
    background:var(--duo-background,white);
  }
  .gridrow.odd.svelte-xow58{
    background:var(--duo-oddrow,#f3f3f3);
  }
  .gridrow.active.svelte-xow58{
    background-color:var(--s-primary,#2299ee); 
    color:white;
  }
  .arrow.flip.svelte-xow58{
   transform:rotate(180deg) scaleX(-1);
   display:inline-block;
  }

  .dragover_top.svelte-xow58,.dragover_bottom.svelte-xow58{
    background-color:rgba(0,0,0,0); 
    position:absolute;
    left:0;
    right:0;
    height:15px;
    z-index:100;
  }
  .dragover_top.svelte-xow58{
    top:-2px;
  }
  .dragover_bottom.svelte-xow58{
    bottom:-2px;
  }
  .dragover_top.svelte-xow58.hover{
    border-top:4px solid #22aae3; 
  }
  .dragover_bottom.svelte-xow58.hover{
    border-bottom:4px solid #22aae3; 
  }


  label.svelte-olyqff{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(0,0,0,0.001);
    cursor:pointer;
  } 
  input[type=file].svelte-olyqff{
    opacity:0;
    position:absolute;
    top:0
  }


  .uploadinput.svelte-1xdv9e1{
    position:fixed;
    top: -100px; /* hidden off screen */
  }
  .uploadbutton.svelte-1xdv9e1{
    border:1px solid #ccc;
    position: relative;
    box-sizing: border-box;
    background:#fff;
    text-decoration: none;
    color:#333;
    white-space: nowrap;
    display: inline-block;
    margin:var(--s-button-margins,4px);
    text-align: center;
    cursor: pointer;
    border-radius:var(--s-border-radius,4px);
    box-shadow:0 0 0px rgba(0,0,0,0.5),0 0px 0px rgba(0,0,0,0.1);
    transition:box-shadow 0.2s;
    vertical-align: middle;
    font-size:12px; 
    padding:0px 10px;
    height:26px;
    line-height:16px;
  }
  .uploadbutton.svelte-1xdv9e1:hover{
    box-shadow:0 0 2px rgba(0,0,0,0.1),0 0px 0px rgba(0,0,0,0.1);
    cursor:pointer;
  }
  .uploadbutton.svelte-1xdv9e1 .d-icon{ top:0.4em;} /* not sure why this is neccessary ?*/
  .markdowninput.svelte-1xdv9e1{
    width:100%;
    border:1px solid #ddd;
  }
  .stabs.svelte-1xdv9e1 {
    text-align:left;
    background:#eee;
    padding:10px 10px 0 10px;
    border-bottom:1px solid #ccc;
    position:relative;
  }
  .stabs.svelte-1xdv9e1 button:where(.svelte-1xdv9e1){
    position: relative;
    box-sizing: border-box;
    padding:7px 12px;
    background:#fff;
    border:0px;
    font-size: 14px;
    text-decoration: none;
    color:black;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    line-height:1.25;
    border-radius:var(--s-border-radius,4px) var(--s-border-radius,4px) 0 0;
    line-height:18px;
    border:1px solid #ccc;
    color:rgba(0,0,0,0.7);
    margin-bottom:-1px;
  }
  .stabs.svelte-1xdv9e1 button.active:where(.svelte-1xdv9e1){
    color:black;
    border:1px solid #ccc;
    border-bottom:1px solid white;
    
  }
  .stabs.svelte-1xdv9e1 button:where(.svelte-1xdv9e1):active,.stabs.svelte-1xdv9e1 button:where(.svelte-1xdv9e1):focus{
    outline:0px;
    color:black;
    border:2px solid #ccc;
    border-bottom:1px solid white;
  }
  .inputarea.svelte-1xdv9e1,.preview.svelte-1xdv9e1{
    padding:10px;
  }
  .inputarea.svelte-1xdv9e1 textarea:where(.svelte-1xdv9e1),.cusortrack.svelte-1xdv9e1{
    font-weight:normal;
    border:0px;
    font-size:14px;
    resize: none;
    width:100%;
  }
  .inputarea.svelte-1xdv9e1 textarea:where(.svelte-1xdv9e1):focus{
    outline:0px;
  }
  .stoolbar.svelte-1xdv9e1{
    position: absolute;
    top:10px;
    right:10px;
    --s-button-margins:0px;
  }
  .preview.svelte-1xdv9e1 img{
    max-width:100%;
  }
  .preview.svelte-1xdv9e1 .video{
    width:100%;
    padding-top:56.25%;
    position:relative;
  }
  .preview.svelte-1xdv9e1 .video iframe{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    border:0;
  }
  .preview.svelte-1xdv9e1 > :first-child{
    margin-top:0;
  }
  .cusortrack.svelte-1xdv9e1{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:2px;
    overflow-wrap:break-word;
    white-space:pre-wrap;
    z-index:2;
    line-height:normal;
    font:400 11px system-ui;
    font-size:14px;
    pointer-events: none;
    opacity:0.01;
  }
  .cusortrack.svelte-1xdv9e1 .cursor:where(.svelte-1xdv9e1){
    outline:1px solid black;
  }

  .emojilist.svelte-1xdv9e1{
    position:absolute;
    top:0;
    left:0;
    border:1px solid #eee;
    padding:1px;
    background:white;
    z-index:3;
    border-radius:2px;
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
  }
  .emojilist.svelte-1xdv9e1 > div:where(.svelte-1xdv9e1){
    padding:5px 8px;
    cursor:pointer; 
  }
  .emojilist.svelte-1xdv9e1 > .active:where(.svelte-1xdv9e1){
    background:#eee;
  }




  .toolbar.svelte-2bqwqf{
    border-top:1px solid #eee;
    padding-top:10px;
    margin-top:20px;
  }
  .forgotlink.svelte-2bqwqf{
    display:inline-block;
    padding:10px;
  }



  :host{
    display:block;
  }
  .smodal.svelte-1gib9mj{
    display:block;
    position:static;
    background:white;
    z-index:1000;
    padding:15px;
    border-radius:var(--s-border-radius,4px);
    box-shadow:0 3px 10px rgba(0,0,0,0.5);
    transition:transform 0.5s;
    transform:scale3d(1,1,1);
    height: auto;
    max-width:100%;
    min-width:300px;
    align-self: flex-start;
  }

  .backdrop.svelte-1gib9mj{
    position:fixed;
    background-color:rgba(0,0,0,0.4);
    padding:20px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    transition:background-color 0.5s;
    z-index:999;
    display:flex;
    align-content:start;
    overflow:auto;
    align-items: start;
    justify-content: center;
  }

  .heading.svelte-1gib9mj h3:where(.svelte-1gib9mj){
    margin:3px 0;
    font-size:21px;
    font-weight:normal;
  }
  .heading.svelte-1gib9mj{
    border-radius:var(--s-border-radius,4px) var(--s-border-radius,4px) 0 0;
    padding:10px 15px 10px 15px;;
    margin:-15px;
    margin-bottom:10px;
    border-bottom:1px solid rgba(0,0,0,0.1);
  }
  .close.svelte-1gib9mj{
    background:transparent;
    border:0px;
    font-size:24px;
    font-weight:bold;
    position:absolute;
    right:0px;
    top:0px;
    padding:7px 15px;
    cursor:pointer;
    opacity:0.5
  }
  .close.svelte-1gib9mj:hover{
    opacity:1;
  }
  .modaltoolbar.svelte-1gib9mj{
    border-top:1px solid #eee;
    padding:10px 10px 0px 10px;
    margin:20px -15px 0 -15px;
  }
  .modaltoolbar.svelte-1gib9mj:blank{
    display:none;
  }



  .spagination.svelte-1hokmn0{
    overflow:hidden;/* fix float */
  }
  .spagination.svelte-1hokmn0 .sbtn{
    margin:0;
    border-radius: var(--s-border-radius,0px);
    border-right-width:0;
    display:block;
    float:left;
  }

  .spagination.svelte-1hokmn0 .sbtn:first-child{
    border-radius: var(--s-border-radius,4px) 0 0 var(--s-border-radius,4px);
  }
  .spagination.svelte-1hokmn0 .sbtn:last-child{
    border-radius: 0 var(--s-border-radius,4px) var(--s-border-radius,4px) 0;
    border-right-width:1px;
  }





  .popup.svelte-zilu77{
    padding:6px 10px;
    border:1px dotted #444;
    background:rgba(255,255,255,0.5);
    color:#444;
    transition: 0.2s all;
    cursor:pointer;
    display:inline-block;
  }
  .popup.svelte-zilu77:hover{
    background:#eee;
  }

  .popup.svelte-zilu77 button:where(.svelte-zilu77){
    margin:-7px -10px -7px 5px;
    display:inline-block;
    cursor:pointer;
    height:100%;
    border:0px;
    height:30px;
    width:30px;
    background:#ddd;
  }
  .popup.svelte-zilu77 button:where(.svelte-zilu77):hover{
    background:#ccc;
  }


  .backdrop.svelte-zilu77{  
    position:fixed;
    background-color:rgba(0,0,0,0.3);
    top:0;
    left:0;
    right:0;
    bottom:0;
    transition:background-color 0.5s;
    z-index:999;
    display:grid;
    overflow:auto;
    place-items:center;
    opacity:1;
    transition: 0.3s opacity;
  }

  .backdrop.hide.svelte-zilu77{
    opacity: 0;
  }

  .dialog.svelte-zilu77{
    max-width:80%;
    min-width:min(90%,300px);
    margin:0 auto;
    border:0;
    box-shadow:0 2px 5px rgba(0,0,0,0.5);
    padding:25px;
    position:relative;
    background:white;
  }

  .dialog.svelte-zilu77 {
    animation: svelte-zilu77-show 0.3s ease normal;
  }

  @keyframes svelte-zilu77-show{
    from {
      transform: scale(0.3,0.3);
      opacity:0;
    }
    to {
      transform: scale(1,1);
      opacity:1;

    }
  }

  .hide.svelte-zilu77 .dialog:where(.svelte-zilu77) {
    animation: svelte-zilu77-hide 0.3s ease normal;
  }
  @keyframes svelte-zilu77-hide{
    to {
      transform: scale(0.1,0.1);
      opacity:0;
      box-shadow:0 2px 5px rgba(0,0,0,0.5),0 0 0 100vw rgba(0, 0, 0, 0);
    }
  }

  .close.svelte-zilu77{
    position:absolute;
    top:0;
    right:0;
    background:transparent;
    border:0;
    color:#999;
    opacity:0.8;
    padding:8px 14px;
    font-size:21px;
    z-index:10;
    cursor: pointer;
  }
  .close.svelte-zilu77:hover{
    opacity:1;
  }





  .portal{
    z-index:2000;
    position: fixed;
    padding:none;
  }



  .sprogress.svelte-efozyn{
    min-height:10px;
    background:rgba(0,0,0,0.03);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    border-radius:4px;
    border-radius:var(--s-border-radius,4px);
  }

  .sbar.svelte-efozyn{
    border-radius:4px;
    border-radius:var(--s-border-radius,4px);
    transition:0.5s width;
    font-size:11px;
    line-height:18px;
    height:18px;
    text-align:center;
  }

  .primary.svelte-efozyn,.info.svelte-efozyn,.success.svelte-efozyn,.warning.svelte-efozyn,.danger.svelte-efozyn,.dark.svelte-efozyn{
    color:white;
    box-shadow:0 0 2px rgba(0,0,0,0.1),0 0px 0px rgba(0,0,0,0.1);
  }   
  .primary.svelte-efozyn{background-color:#2299ee; background-color:var(--s-primary,#2299ee)}
  .info.svelte-efozyn{background-color:#17a2b8; background-color:var(--s-info,#17a2b8)}
  .success.svelte-efozyn{background-color:#28a745; background-color:var(--s-success,#28a745)}
  .warning.svelte-efozyn{background-color:#ffc107; background-color:var(--s-warning,#ffc107)}
  .danger.svelte-efozyn{background-color:#dc3545; background-color:var(--s-danger,#dc3545)}
  .dark.svelte-efozyn{background-color:#343a40; background-color:var(--s-dark,#343a40)}



  .strengthrow.svelte-yvtec3{
    margin:0 5px 0 170px;
    --s-button-margins:0px;
  }

  @media only screen and (max-width: 600px) {
    .strengthrow.svelte-yvtec3{
     margin:0 5px 0 5px;
    }
  }





  duo-slideshow > .duoslide{ /* direct descendant of this tag */
    display: block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 0;
    transition: 0.5s transform,  0.5s opacity;
    transition-delay: 0.5s;
  }
  duo-slideshow > .duoslide.active{
    opacity: 1;
    position: relative;
    margin-top:0;
    z-index: 1;
    transition-delay: 0s;
  }

  .timer.svelte-10360tc{
    position:absolute;
    bottom:0;
    left:0;
    height:5px;
    width:100%;
    background:white;
    opacity:0.3;
    transform-origin: top left;
    animation:4s linear 1 svelte-10360tc-fill;
    z-index:10;
  }

  @keyframes svelte-10360tc-fill{
    0%{
      transform:scaleX(0);
    }
    100%{
      transform:scaleX(1);
    }
  }

  .duo-slideshow.svelte-10360tc{
    position: relative;
    display:block;
  }
  .controls.svelte-10360tc{
    z-index:10;
  }

  .controls.svelte-10360tc .next:where(.svelte-10360tc),
  .controls.svelte-10360tc .prev:where(.svelte-10360tc){
    all:unset;
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    transition: 0.5s all;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0);
    padding: 18% 20px;
    font-size: 30px;
    line-height: 100%;
    z-index: 2;
    cursor:pointer
  }
  .controls.svelte-10360tc .next:where(.svelte-10360tc):hover,
  .controls.svelte-10360tc .prev:where(.svelte-10360tc):hover{
    background: rgba(0,0,0,0.5);
    color: #fff;
  }
  .controls.svelte-10360tc .next:where(.svelte-10360tc):before,
  .controls.svelte-10360tc .prev:where(.svelte-10360tc):before{
    content:'';
    position: absolute;
    top: calc(50% - 20px);
    left: 10px;
    height:30px;
    width:30px;
    background-image:url('data:image/svg+xml;utf8,<svg width="100%" height="100%" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="m66.156 50l-2.2188-2.5938-24-28-6.0938 5.1875 21.781 25.406-21.781 25.406 6.0938 5.1875 24-28z"/></svg>')

  }
  .controls.svelte-10360tc .prev:where(.svelte-10360tc){
    right: auto;
    left: 0;
    transform:scaleX(-1)
  }

  .controls.svelte-10360tc .pager:where(.svelte-10360tc){
    position: absolute;
    z-index: 2;
    bottom: 20px;
    left: 0;
    right: 0;
    height: 20px;
    display: flex;
    justify-content: center;
  }
  .controls.svelte-10360tc .pager:where(.svelte-10360tc) button:where(.svelte-10360tc){
    all:unset;
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border: 1px solid #fff;
    display: inline-block;
    margin: 5px;
    cursor:pointer;
    border-radius: 50%;
  }
  .controls.svelte-10360tc button.active:where(.svelte-10360tc){
    background: #fff;
  }

  .controls.svelte-10360tc button[disabled]:where(.svelte-10360tc){
    cursor:not-allowed;
  }





  .dspin.svelte-pubq6 {
    animation:svelte-pubq6-dspin 1s linear infinite;
    transform-origin: 50% 50%;
  }
  @keyframes svelte-pubq6-dspin { 100% { transform:rotate(360deg); } }




  /* Hides webcomponent until it's loaded*/
  duo-tabs:not(:defined) {
    display:none
  }
  .tabbuttons.svelte-u5syxs button:where(.svelte-u5syxs){
    background:#eee;
    font-size:14px;
    border:1px solid #eee;
    border-bottom:1px solid #ccc;
    padding:8px 12px;
    margin:0 2px -1px 0;
  }
  .tabpanel.svelte-u5syxs{
    border:1px solid #ccc;
    padding:15px;
  }
  .tabbuttons.svelte-u5syxs button.active:where(.svelte-u5syxs){
    background:white;
    border:1px solid #ccc;
    border-bottom:1px solid white;
   
  }
  .tabbuttons.svelte-u5syxs button:where(.svelte-u5syxs):focus{
    outline:0;
    border-top:1px solid #888;
  }





  body.size2{
    font-size:18px; 
  }
  body.size3{
    font-size:21px; 
  }



  .chart.svelte-8atcib {
    display:inline-grid;
  }
  .chart.svelte-8atcib > :where(.svelte-8atcib) {
    grid-column:1 / 2;
    grid-row:1 / 2;
    align-self:center;
    justify-self: center;
  }

  .ring.svelte-8atcib {
    opacity: 0.5;
    stroke-width:3;
    fill:transparent;
  }

  .segment.svelte-8atcib {
    opacity: 1;
    transform-origin: center;
    stroke-dasharray: 0, 100;
    stroke-dashoffset:25;
    animation: svelte-8atcib-donut var(--duration,3s) linear forwards;
  }

  @keyframes svelte-8atcib-donut {
    to {
      stroke-dasharray: 100, 0;
    }
  }


  .toaster.svelte-xc0tms{
    z-index:10002;
    position: fixed;
    top: 5px;
    right:10px;
  }
  .slice.svelte-xc0tms{
    width:250px;
    padding:15px 20px;
    border-radius:4px;
    box-shadow:0 2px 10px rgba(0,0,0,0.3);
    margin:5px 0;
    position:relative;
  }
  .cancel.svelte-xc0tms{
    position:absolute;
    top:5px;
    right:5px;
    background:transparent;
    border:0;
    color:white;
    width:34px;
    height:34px;
    cursor:pointer;
    transition: transform 0.3s;
  }
  .cancel.svelte-xc0tms:hover{
    transform:scale(1.3);
  }
  .slice.svelte-xc0tms h3:where(.svelte-xc0tms){
    margin:0 0 10px 0;
    color:white;
  }
  /* backgrounds set twice, first for IE11 */
  .slice.primary.svelte-xc0tms,.slice.info.svelte-xc0tms,.slice.success.svelte-xc0tms,.slice.warning.svelte-xc0tms,.slice.danger.svelte-xc0tms,.slice.dark.svelte-xc0tms { color:white; fill:white;}
  .slice.primary.svelte-xc0tms {background-color:hsla(var(--themehue), 50%, 35%, 1)}
  .slice.info.svelte-xc0tms {background-color:#17a2b8;background-color:var(--s-info,#17a2b8)}
  .slice.success.svelte-xc0tms {background-color:#28a745;background-color:var(--s-success,#28a745)}
  .slice.warning.svelte-xc0tms {background-color:#ffc107;background-color:var(--s-warning,#ffc107)}
  .slice.danger.svelte-xc0tms {background-color:#dc3545;background-color:var(--s-danger,#dc3545)}
  .slice.dark.svelte-xc0tms {background-color:#343a40;background-color:var(--s-dark,#343a40)}




  .wrapper.svelte-1s1od2b{
    position:relative;
  }

  .tweets.svelte-1s1od2b{
    height:200px;
    display:flex;  
    overflow-x:hidden;
    flex-direction:row;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  .tweets.svelte-1s1od2b::-webkit-scrollbar { 
    display: none; 
  }
  .tweet.svelte-1s1od2b{
    flex: 0 0 auto;
    scroll-snap-align: center;
    width:100%;
    z-index:1;
  } 
  .tweet.svelte-1s1od2b p:where(.svelte-1s1od2b){
    text-align:center;
    max-width:250px;
    margin:10% auto 0 auto;
  }
  .twittericon.svelte-1s1od2b{
    position:absolute;
    top:-20%;
    left:25%;
    opacity:0.1;
    z-index:0;
    pointer-events: none;
    font-size:250px;
    color:#00adee;
  }
  .pager.svelte-1s1od2b button:where(.svelte-1s1od2b){
    background:white;
    display:inline-block;
    border:1px solid #00adee;
    width:10px;
    height:10px;
    padding:0;
    border-radius:50%;
    margin:0 5px
  }

  .pager.svelte-1s1od2b button.active:where(.svelte-1s1od2b){
    background:#00adee;
  }





  .userdetails-toolbar.svelte-1pfkk7p{
    display:flex;
    justify-content:flex-end;
    margin:5px 0;
  }