html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    ol, ul {
        list-style-type: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    * {
        box-sizing: border-box;
    }
    html {
        font-family: "Nunito Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings: "wdth" 100, "YTLC" 500;
        line-height: 1.2;
    }
    .text-body {
        font-weight: 300;
        line-height: 1.2;
    }
    .text-body b, .text-body strong {
        font-weight: 700;
    }
    .text-body i, .text-body em {
        font-style: italic;
    }

    /* sitely/sparkle breakpoints */
    @media (max-width: 20000px) {
        html { font-size: 22px; transition: font-size 0.5s; }
        #content-main { transition: width 0.5s; width: 80%; margin: 0 auto; }

        .center-lt-2000 { text-align: center; }

        .hide-gt-1920 { display: none; }
        .hide-lt-1920 { display: block; }

        .hide-gt-1200 { display: none; }
        .hide-lt-1200 { display: block; }

        .hide-gt-960 { display: none; }
        .hide-lt-960 { display: block; }

        .hide-gt-768 { display: none; }
        .hide-lt-768 { display: block; }

        .hide-gt-480 { display: none; }
        .hide-lt-480 { display: block; }
    }
    @media (max-width: 1920px) {
        html { font-size: 19px; transition: font-size 0.5s; }
        #content-main {  width: 90%; }
        .hide-gt-1920 { display: block; }
        .hide-lt-1920 { display: none !important; }
    }
    @media (max-width: 1200px) {
        html { font-size: 18px; }
        .hide-gt-1200 { display: block; }
        .hide-lt-1200 { display: none !important; }
    }
    @media (max-width: 960px) {
        html { font-size: 16px; }
        #content-main { width: 98%; }
        .hide-gt-960 { display: block; }
        .hide-lt-960 { display: none !important; }
    }
    @media (max-width: 768px) {
        html { font-size: 18px; transition: font-size 0.5s; }
        .center-lt-768 { text-align: center !important; justify-content: center !important;}
        .hide-gt-768 { display: block; }
        .hide-lt-768 { display: none !important; }
    }
    @media (max-width: 480px) {
        .hide-gt-480 { display: block; }
        .hide-lt-480 { display: none !important; }
    }
    @media (max-width: 320px) {
        .hide-gt-320 { display: block; }
        .hide-gt-320 { display: none !important;; }
    }
    @media print { .no-print { display: none !important; } }

    .hidden {
        display: none !important;
    }
    .strike {
        text-decoration: line-through;           
    }

    .shadow {
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .shadow-none, .shadow-none img {
        box-shadow: none !important;
    }

    body {
        padding: 0;
        margin: 0;
        background-color: #f2f2f2;
        line-height: 1.2;
    }

    .strip {
        display: flex;
        margin: 0 auto;
        padding: 0;
        background-color: white;
    }

    .spinner{
        width: 40px;
        height: 40px;
        background-color: #0363ae;
        opacity: 0.5;

        margin: 100px auto;
        -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
        animation: sk-rotateplane 1.2s infinite ease-in-out;
    }

    .bg-snow { background-color: #ffffff !important; }
    .bg-orange { background-color: #f3911e !important; }
    .bg-flamingo { background-color: #ee623a !important; }
    .bg-persian-green { background-color: #029f92 !important; }
    .bg-seagreen { background-color: #00b3aa !important; }
    .bg-orange { background-color: #f47a37 !important; }
    .bg-tangerine { background-color: #fdbc11 !important; }
    .bg-lightblue { background-color: #00a6e1 !important; }
    .bg-red {background-color: #db4e0c !important;}
    .bg-gold {background-color: #ffcf54 !important;}
    .bg-yellow {background-color: #ffef74 !important;}
    .bg-zephyr-green {background-color: #7cb191 !important;}
    .bg-blue {background-color: #1e599c !important;}
    .bg-aqua {background-color: #bcdadd !important;}
    .bg-purple {background-color: #975d77 !important;}
    .bg-gray {background-color: #d5d5d5 !important;}
    .bg-carrot {background-color: #F3911E !important;}
    .bg-half-baked { background-color: #83CBCF !important; }
    .bg-fadered { background-color: #d38869 !important; }
    .bg-fadeyellow { background-color: #e8dab7 !important; }
    .bg-fadegreen { background-color: #a0c2ae !important; }
    .bg-fadepurple { background-color: #ac8898 !important; }
    .bg-fadeorange { background-color: #F6BD5F !important; }  /* e9ce84 */
    .bg-fadeblue { background-color: #80b1d3 !important; }
    .bg-coal { background-color: #000000 !important; }
    .bg-logoblue { background-color: #1e599c !important; }
    .bg-logoyellow { background-color: #f5c21e !important; }
    .bg-logopurple { background-color: #425d8c !important; }
    .bg-rust { background-color: #bf5700 !important; }
    .bg-maroon { background-color: #500000 !important; }
    .bg-arsenic { background-color: #424242 !important; }
    .bg-logoyolk { background-color: #ffc700 !important; }
    .bg-yolk { background-color: #ffc700 !important; }
    .bg-xyellow { background-color: #f6c218 !important; }
    .bg-whiterock { background-color: #eee8dc !important; }
    .bg-cello { background-color:  #203864 !important; }
    .bg-ziggurat { background-color:  #b4dcdb !important; }
    .bg-bayleaf { background-color:  #7cb191 !important; }
    .bg-strikemaster { background-color:  #975d77 !important; }
    .bg-buttercup { background-color:  #f49e15 !important; }
    .bg-tiamaria { background-color:  #d74b0c !important; }
    .bg-azure { background-color:  #385E9D !important; }
    .bg-coal { background-color:  #000000 !important; }

    .bg-ziggurat-grad {
        background: #b4dcdb;
        background: linear-gradient(white, #b4dcdb 100%);
    }
    .bg-yolk-grad {
        background: #ffc700;
        background: linear-gradient(white, #ffc700 100%);
    }
    .bg-azure-grad {
        background: #385E9D;
        background: linear-gradient(white, #385E9D 100%);
    }
    .bg-bayleaf-grad {
        background: #7cb191;
        background: linear-gradient(white, #7cb191 100%);
    }
    
    .bg-orange-grad {
        background: rgb(230,124,0);
        background: linear-gradient(90deg, rgba(230,124,0,1) 0%, rgba(246,187,53,1) 100%);
    }
    .bg-orangered-grad {
        background: rgb(238,98,58);
        background: linear-gradient(90deg, rgba(238,98,58,1) 0%, rgba(233,144,60,1) 100%);
    }
    .bg-seagreen-grad {
        background: rgb(0,133,112);
        background: linear-gradient(90deg, rgba(0,133,112,1) 0%, rgba(6,178,168,1) 100%);
    }
    .bg-blue-grad {
        background: rgb(0,79,148);
        background: linear-gradient(90deg, rgba(0,79,148,1) 0%, rgba(50,115,220,1) 100%);
    }
    .bg-mint-grad {
        background: rgb(139,211,213);
        background: linear-gradient(90deg, rgba(139,211,213,1) 0%, rgba(176,226,226,1) 100%);
    }
    .bg-calm-grad {
        background: rgb(134,190,157);
        background: linear-gradient(90deg, rgba(114,162,133,1) 0%, rgba(134,190,157,1) 100%);
    }

    .bg-wave-6 {
        background-image: url(https://assets.school-connect.net/sc42/sc42-wave-6.svg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: bottom center; 
    }
    .bg-wave-7a{
        background-image: url(https://assets.school-connect.net/sc42/clap.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: bottom center; 
    }

    .open-sans-sc {
        font-family: "Open Sans", sans-serif;
        font-optical-sizing: auto;
        font-variation-settings: "wdth" 87.5;
    }

    /* DRAWER / SLIDE OUT */
    .drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 70vw;
        background-color: white;
        border-left: 0.063em solid silver;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s ease, width 0.3s ease;
        padding: 1rem;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .drawer-85-wide {
        width: 85vw;
    }
    .drawer-70-wide {
        width: 70vw;
    }
    .drawer-45-wide {
        width: 45vw;
    }
        
    .drawer-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background-color: black;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .drawer-open .drawer-mask {
        opacity: 0.7;
        visibility: visible;
    }
    .drawer-open .drawer {
        transform: translateX(0);
    }

    .font-nunito { font-family: "Nunito Sans", sans-serif !important; }
    .font-jost { font-family: "Jost", sans-serif !important; }

    /* old style 15 units = 1rem */
    .font-60 {font-size: 2rem !important; }
    .font-45 {font-size: 3rem !important; }
    .font-30 {font-size: 2rem !important; }
    .font-24 {font-size: 1.6rem !important; }
    .font-22 {font-size: 1.47rem !important; }
    .font-20 {font-size: 1.33rem !important; }
    .font-18 {font-size: 1.2rem !important; }
    .font-15 {font-size: 1.0rem !important}
    .font-10 {font-size: 0.7rem !important; }
    .font-0 {font-size: 0 !important; }

    .fontsize-20 {font-size: 2.0rem !important; }
    .fontsize-19 {font-size: 1.9rem !important; }
    .fontsize-18 {font-size: 1.8rem !important; }
    .fontsize-17 {font-size: 1.7rem !important; }
    .fontsize-16 {font-size: 1.6rem !important; }
    .fontsize-15 {font-size: 1.5rem !important; }
    .fontsize-14 {font-size: 1.4rem !important; }
    .fontsize-13 {font-size: 1.3rem !important; }
    .fontsize-12 {font-size: 1.2rem !important; }
    .fontsize-11 {font-size: 1.1rem !important; }
    .fontsize-10 {font-size: 1.0rem !important; }
    .fontsize-9 {font-size: 0.9rem !important; }
    .fontsize-8 {font-size: 0.8rem !important; }
    .fontsize-7 {font-size: 0.7rem !important; }
    .fontsize-6 {font-size: 0.6rem !important; }
    .fontsize-5 {font-size: 0.5rem !important; }
    .fontsize-4 {font-size: 0.4rem !important; }
    .fontsize-3{font-size: 0.3rem !important; }
    .fontsize-2 {font-size: 0.2rem !important; }
    .fontsize-1 {font-size: 0.1rem !important; }
    .fontsize-0 {font-size: 0rem !important; }

    .font-gold { color: #ffcf54 !important; }
    .font-blue { color: #1e599c !important; }
    .font-aqua { color: #bcdadd !important; }
    .font-yellow { color: #ffef74 !important; }
    .font-red { color: #db4e0c !important; }
    .font-green { color: #7cb191 !important; }
    .font-purple { color: #975d77 !important; }
    .font-peach { color: #d46d4f !important; }      
    .font-coal {  color: #000000 !important; }
    .font-white { color: #ffffff !important; }
    .font-dust { color:rgba(0, 0, 0, 0.2) !important; }
    .font-silver { color: gray !important; }
    .font-snow { color: #ffffff !important; }
    .font-rust { color: #bf5700 !important; }
    .font-arsenic { color: #424242 !important; }
    .font-logopurple { color: #425d8c !important; }
    .font-whiterock { color: #eee8dc !important; }
    .font-cello { color:  #203864 !important; }
    .font-ziggurat { color:  #b4dcdb !important; }
    .font-bayleaf { color:  #7cb191 !important; }
    .font-strikemaster { color:  #975d77 !important; }
    .font-buttercup { color:  #f49e15 !important; }
    .font-tiamaria { color:  #d74b0c !important; }
    .font-azure { color:  #385E9D !important; }
    .font-coal { color:  #000000 !important; }
    .font-logoyolk { color: #ffc700 !important; }
    .font-yolk { color: #ffc700 !important; }

    .font-hairline { font-weight: 100 !important; }
    .font-thin { font-weight: 200 !important; }
    .font-light { font-weight: 300 !important; }
    .font-regular { font-weight: 400 !important; }
    .font-medium { font-weight: 500 !important; }
    .font-semibold { font-weight: 600 !important; }
    .font-bold { font-weight: 700 !important; }
    .font-heavy { font-weight: 800 !important; }
    .font-black { font-weight: 900 !important; }

    .font-underline { text-decoration: underline !important; }
    .font-italic { font-style: italic !important; }

    .lineheight-10 { line-height: 1.0 !important;}
    .lineheight-11 { line-height: 1.1 !important;}
    .lineheight-12 { line-height: 1.2 !important;}

    .border-gold { border-color: #ffcf54 !important; }
    .border-blue { border-color: #1e599c !important; }
    .border-aqua { border-color: #bcdadd !important; }
    .border-yellow { border-color: #ffef74 !important; }
    .border-red { border-color: #db4e0c !important; }
    .border-green { border-color: #7cb191 !important; }
    .border-purple { border-color: #975d77 !important; }
    .border-peach { border-color: #d46d4f !important; }      
    .border-coal {  border-color: #000000 !important; }
    .border-white { border-color: #ffffff !important; }
    .border-dust { border-color:rgba(0, 0, 0, 0.2) !important; }
    .border-silver { border-color: gray !important; }
    .border-snow { border-color: #ffffff !important; }
    .border-rust { border-color: #bf5700 !important; }
    .border-arsenic { border-color: #424242 !important; }
    .border-logopurple { border-color: #425d8c !important; }
    .border-whiterock { border-color: #eee8dc !important; }
    .border-cello { border-color:  #203864 !important; }
    .border-ziggurat { border-color:  #b4dcdb !important; }
    .border-bayleaf { border-color:  #7cb191 !important; }
    .border-strikemaster { border-color:  #975d77 !important; }
    .border-buttercup { border-color:  #f49e15 !important; }
    .border-tiamaria { border-color:  #d74b0c !important; }
    .border-azure { border-color:  #385E9D !important; }
    .border-coal { border-color:  #000000 !important; }
    .border-logoyolk { border-color: #ffc700 !important; }

    .rounded-1 { border-radius: 0.1rem !important; }
    .rounded-2 { border-radius: 0.2rem !important; }
    .rounded-3 { border-radius: 0.3rem !important; }
    .rounded-4 { border-radius: 0.4rem !important; }
    .rounded-5 { border-radius: 0.5rem !important; }
    .rounded-6 { border-radius: 0.6rem !important; }
    .rounded-7 { border-radius: 0.7rem !important; }
    .rounded-8 { border-radius: 0.8rem !important; }
    .rounded-9 { border-radius: 0.9rem !important; }
    .rounded-10 { border-radius: 1.0rem !important; }
    .round-5 { border-radius: 0.5rem !important; }

    .gap-0 { gap: 0rem !important; }
    .gap-1 { gap: 0.1rem !important; }
    .gap-2 { gap: 0.2rem !important; }
    .gap-3 { gap: 0.3rem !important; }
    .gap-4 { gap: 0.4rem !important; }
    .gap-5 { gap: 0.5rem !important; }
    .gap-6 { gap: 0.6rem !important; }
    .gap-7 { gap: 0.7rem !important; }
    .gap-8 { gap: 0.8rem !important; }
    .gap-9 { gap: 0.9rem !important; }
    .gap-10 { gap: 1.0rem !important; }
    
    /* margin all sides */
    .margin-0  { margin: 0 !important; }
    .margin-1  { margin: 0.1rem !important; }
    .margin-2  { margin: 0.2rem !important; }
    .margin-3  { margin: 0.3rem !important; }
    .margin-4  { margin: 0.4rem !important; }
    .margin-5  { margin: 0.5rem !important; }
    .margin-6  { margin: 0.6rem !important; }
    .margin-7  { margin: 0.7rem !important; }
    .margin-8  { margin: 0.8rem !important; }
    .margin-9  { margin: 0.9rem !important; }
    .margin-10 { margin: 1.0rem !important; }
    .margin-11 { margin: 1.1rem !important; }
    .margin-12 { margin: 1.2rem !important; }
    .margin-13 { margin: 1.3rem !important; }
    .margin-14 { margin: 1.4rem !important; }
    .margin-15 { margin: 1.5rem !important; }
    .margin-16 { margin: 1.6rem !important; }
    .margin-17 { margin: 1.7rem !important; }
    .margin-18 { margin: 1.8rem !important; }
    .margin-19 { margin: 1.9rem !important; }
    .margin-20 { margin: 2.0rem !important; }
    .margin-21 { margin: 2.1rem !important; }
    .margin-22 { margin: 2.2rem !important; }
    .margin-23 { margin: 2.3rem !important; }
    .margin-24 { margin: 2.4rem !important; }
    .margin-25 { margin: 2.5rem !important; }
    .margin-26 { margin: 2.6rem !important; }
    .margin-27 { margin: 2.7rem !important; }
    .margin-28 { margin: 2.8rem !important; }
    .margin-29 { margin: 2.9rem !important; }
    .margin-30 { margin: 3.0rem !important; }

    /* margin top */
    .margint-0  { margin-top: 0 !important; }
    .margint-1  { margin-top: 0.1rem !important; }
    .margint-2  { margin-top: 0.2rem !important; }
    .margint-3  { margin-top: 0.3rem !important; }
    .margint-4  { margin-top: 0.4rem !important; }
    .margint-5  { margin-top: 0.5rem !important; }
    .margint-6  { margin-top: 0.6rem !important; }
    .margint-7  { margin-top: 0.7rem !important; }
    .margint-8  { margin-top: 0.8rem !important; }
    .margint-9  { margin-top: 0.9rem !important; }
    .margint-10 { margin-top: 1.0rem !important; }
    .margint-11 { margin-top: 1.1rem !important; }
    .margint-12 { margin-top: 1.2rem !important; }
    .margint-13 { margin-top: 1.3rem !important; }
    .margint-14 { margin-top: 1.4rem !important; }
    .margint-15 { margin-top: 1.5rem !important; }
    .margint-16 { margin-top: 1.6rem !important; }
    .margint-17 { margin-top: 1.7rem !important; }
    .margint-18 { margin-top: 1.8rem !important; }
    .margint-19 { margin-top: 1.9rem !important; }
    .margint-20 { margin-top: 2.0rem !important; }
    .margint-21 { margin-top: 2.1rem !important; }
    .margint-22 { margin-top: 2.2rem !important; }
    .margint-23 { margin-top: 2.3rem !important; }
    .margint-24 { margin-top: 2.4rem !important; }
    .margint-25 { margin-top: 2.5rem !important; }
    .margint-26 { margin-top: 2.6rem !important; }
    .margint-27 { margin-top: 2.7rem !important; }
    .margint-28 { margin-top: 2.8rem !important; }
    .margint-29 { margin-top: 2.9rem !important; }
    .margint-30 { margin-top: 3.0rem !important; }

    /* margin bottom */
    .marginb-0  { margin-bottom: 0 !important; }
    .marginb-1  { margin-bottom: 0.1rem !important; }
    .marginb-2  { margin-bottom: 0.2rem !important; }
    .marginb-3  { margin-bottom: 0.3rem !important; }
    .marginb-4  { margin-bottom: 0.4rem !important; }
    .marginb-5  { margin-bottom: 0.5rem !important; }
    .marginb-6  { margin-bottom: 0.6rem !important; }
    .marginb-7  { margin-bottom: 0.7rem !important; }
    .marginb-8  { margin-bottom: 0.8rem !important; }
    .marginb-9  { margin-bottom: 0.9rem !important; }
    .marginb-10 { margin-bottom: 1.0rem !important; }
    .marginb-11 { margin-bottom: 1.1rem !important; }
    .marginb-12 { margin-bottom: 1.2rem !important; }
    .marginb-13 { margin-bottom: 1.3rem !important; }
    .marginb-14 { margin-bottom: 1.4rem !important; }
    .marginb-15 { margin-bottom: 1.5rem !important; }
    .marginb-16 { margin-bottom: 1.6rem !important; }
    .marginb-17 { margin-bottom: 1.7rem !important; }
    .marginb-18 { margin-bottom: 1.8rem !important; }
    .marginb-19 { margin-bottom: 1.9rem !important; }
    .marginb-20 { margin-bottom: 2.0rem !important; }
    .marginb-21 { margin-bottom: 2.1rem !important; }
    .marginb-22 { margin-bottom: 2.2rem !important; }
    .marginb-23 { margin-bottom: 2.3rem !important; }
    .marginb-24 { margin-bottom: 2.4rem !important; }
    .marginb-25 { margin-bottom: 2.5rem !important; }
    .marginb-26 { margin-bottom: 2.6rem !important; }
    .marginb-27 { margin-bottom: 2.7rem !important; }
    .marginb-28 { margin-bottom: 2.8rem !important; }
    .marginb-29 { margin-bottom: 2.9rem !important; }
    .marginb-30 { margin-bottom: 3.0rem !important; }

    /* margin horizontal */
    .marginh-0  { margin-left: 0 !important; margin-right: 0 !important; }
    .marginh-1  { margin-left: 0.1rem !important; margin-right: 0.1rem !important; }
    .marginh-2  { margin-left: 0.2rem !important; margin-right: 0.2rem !important; }
    .marginh-3  { margin-left: 0.3rem !important; margin-right: 0.3rem !important; }
    .marginh-4  { margin-left: 0.4rem !important; margin-right: 0.4rem !important; }
    .marginh-5  { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
    .marginh-6  { margin-left: 0.6rem !important; margin-right: 0.6rem !important; }
    .marginh-7  { margin-left: 0.7rem !important; margin-right: 0.7rem !important; }
    .marginh-8  { margin-left: 0.8rem !important; margin-right: 0.8rem !important; }
    .marginh-9  { margin-left: 0.9rem !important; margin-right: 0.9rem !important; }
    .marginh-10 { margin-left: 1.0rem !important; margin-right: 1.0rem !important; }
    .marginh-11 { margin-left: 1.1rem !important; margin-right: 1.1rem !important; }
    .marginh-12 { margin-left: 1.2rem !important; margin-right: 1.2rem !important; }
    .marginh-13 { margin-left: 1.3rem !important; margin-right: 1.3rem !important; }
    .marginh-14 { margin-left: 1.4rem !important; margin-right: 1.4rem !important; }
    .marginh-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
    .marginh-16 { margin-left: 1.6rem !important; margin-right: 1.6rem !important; }
    .marginh-17 { margin-left: 1.7rem !important; margin-right: 1.7rem !important; }
    .marginh-18 { margin-left: 1.8rem !important; margin-right: 1.8rem !important; }
    .marginh-19 { margin-left: 1.9rem !important; margin-right: 1.9rem !important; }
    .marginh-20 { margin-left: 2.0rem !important; margin-right: 2.0rem !important; }
    .marginh-21 { margin-left: 2.1rem !important; margin-right: 2.1rem !important; }
    .marginh-22 { margin-left: 2.2rem !important; margin-right: 2.2rem !important; }
    .marginh-23 { margin-left: 2.3rem !important; margin-right: 2.3rem !important; }
    .marginh-24 { margin-left: 2.4rem !important; margin-right: 2.4rem !important; }
    .marginh-25 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }
    .marginh-26 { margin-left: 2.6rem !important; margin-right: 2.6rem !important; }
    .marginh-27 { margin-left: 2.7rem !important; margin-right: 2.7rem !important; }
    .marginh-28 { margin-left: 2.8rem !important; margin-right: 2.8rem !important; }
    .marginh-29 { margin-left: 2.9rem !important; margin-right: 2.9rem !important; }
    .marginh-30 { margin-left: 3.0rem !important; margin-right: 3.0rem !important; }

    /* margin vertical */
    .marginv-0  { margin-top: 0 !important; margin-bottom: 0 !important; }
    .marginv-1  { margin-top: 0.1rem !important; margin-bottom: 0.1rem !important; }
    .marginv-2  { margin-top: 0.2rem !important; margin-bottom: 0.2rem !important; }
    .marginv-3  { margin-top: 0.3rem !important; margin-bottom: 0.3rem !important; }
    .marginv-4  { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; }
    .marginv-5  { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
    .marginv-6  { margin-top: 0.6rem !important; margin-bottom: 0.6rem !important; }
    .marginv-7  { margin-top: 0.7rem !important; margin-bottom: 0.7rem !important; }
    .marginv-8  { margin-top: 0.8rem !important; margin-bottom: 0.8rem !important; }
    .marginv-9  { margin-top: 0.9rem !important; margin-bottom: 0.9rem !important; }
    .marginv-10 { margin-top: 1.0rem !important; margin-bottom: 1.0rem !important; }
    .marginv-11 { margin-top: 1.1rem !important; margin-bottom: 1.1rem !important; }
    .marginv-12 { margin-top: 1.2rem !important; margin-bottom: 1.2rem !important; }
    .marginv-13 { margin-top: 1.3rem !important; margin-bottom: 1.3rem !important; }
    .marginv-14 { margin-top: 1.4rem !important; margin-bottom: 1.4rem !important; }
    .marginv-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .marginv-16 { margin-top: 1.6rem !important; margin-bottom: 1.6rem !important; }
    .marginv-17 { margin-top: 1.7rem !important; margin-bottom: 1.7rem !important; }
    .marginv-18 { margin-top: 1.8rem !important; margin-bottom: 1.8rem !important; }
    .marginv-19 { margin-top: 1.9rem !important; margin-bottom: 1.9rem !important; }
    .marginv-20 { margin-top: 2.0rem !important; margin-bottom: 2.0rem !important; }
    .marginv-21 { margin-top: 2.1rem !important; margin-bottom: 2.1rem !important; }
    .marginv-22 { margin-top: 2.2rem !important; margin-bottom: 2.2rem !important; }
    .marginv-23 { margin-top: 2.3rem !important; margin-bottom: 2.3rem !important; }
    .marginv-24 { margin-top: 2.4rem !important; margin-bottom: 2.4rem !important; }
    .marginv-25 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
    .marginv-26 { margin-top: 2.6rem !important; margin-bottom: 2.6rem !important; }
    .marginv-27 { margin-top: 2.7rem !important; margin-bottom: 2.7rem !important; }
    .marginv-28 { margin-top: 2.8rem !important; margin-bottom: 2.8rem !important; }
    .marginv-29 { margin-top: 2.9rem !important; margin-bottom: 2.9rem !important; }
    .marginv-30 { margin-top: 3.0rem !important; margin-bottom: 3.0rem !important; }

    /* padding all sides */
    .pad-0 { padding: 0 !important; }
    .pad-1 { padding: 0.1rem !important; }
    .pad-2 { padding: 0.2rem !important; }
    .pad-3 { padding: 0.3rem !important; }
    .pad-4 { padding: 0.4rem !important; }
    .pad-5 { padding: 0.5rem !important; }
    .pad-6 { padding: 0.6rem !important; }
    .pad-7 { padding: 0.7rem !important; }
    .pad-8 { padding: 0.8rem !important; }
    .pad-9 { padding: 0.9rem !important; }
    .pad-10 { padding: 1.0rem !important; }
    .pad-11 { padding: 1.1rem !important; }
    .pad-12 { padding: 1.2rem !important; }
    .pad-13 { padding: 1.3rem !important; }
    .pad-14 { padding: 1.4rem !important; }
    .pad-15 { padding: 1.5rem !important; }
    .pad-16 { padding: 1.6rem !important; }
    .pad-17 { padding: 1.7rem !important; }
    .pad-18 { padding: 1.8rem !important; }
    .pad-19 { padding: 1.9rem !important; }
    .pad-20 { padding: 2.0rem !important; }
    .pad-21 { padding: 2.1rem !important; }
    .pad-22 { padding: 2.2rem !important; }
    .pad-23 { padding: 2.3rem !important; }
    .pad-24 { padding: 2.4rem !important; }
    .pad-25 { padding: 2.5rem !important; }
    .pad-26 { padding: 2.6rem !important; }
    .pad-27 { padding: 2.7rem !important; }
    .pad-28 { padding: 2.8rem !important; }
    .pad-29 { padding: 2.9rem !important; }
    .pad-30 { padding: 3.0rem !important; }

    /* padding-horizontal */
    .padh-0 {  padding-left: 0 !important; padding-right: 0 !important; }
    .padh-1 {  padding-left: 0.1rem !important; padding-right: 0.1rem !important; }
    .padh-2 {  padding-left: 0.2rem !important; padding-right: 0.2rem !important; }
    .padh-3 {  padding-left: 0.3rem !important; padding-right: 0.3rem !important; }
    .padh-4 {  padding-left: 0.4rem !important; padding-right: 0.4rem !important; }
    .padh-5 {  padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .padh-6 {  padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
    .padh-7 {  padding-left: 0.7rem !important; padding-right: 0.7rem !important; }
    .padh-8 {  padding-left: 0.8rem !important; padding-right: 0.8rem !important; }
    .padh-9 {  padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
    .padh-10 { padding-left: 1.0rem !important; padding-right: 1.0rem !important; }
    .padh-11 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
    .padh-12 { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
    .padh-13 { padding-left: 1.3rem !important; padding-right: 1.3rem !important; }
    .padh-14 { padding-left: 1.4rem !important; padding-right: 1.4rem !important; }
    .padh-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .padh-16 { padding-left: 1.6rem !important; padding-right: 1.6rem !important; }
    .padh-17 { padding-left: 1.7rem !important; padding-right: 1.7rem !important; }
    .padh-18 { padding-left: 1.8rem !important; padding-right: 1.8rem !important; }
    .padh-19 { padding-left: 1.9rem !important; padding-right: 1.9rem !important; }
    .padh-20 { padding-left: 2.0rem !important; padding-right: 2.0rem !important; }
    .padh-21 { padding-left: 2.1rem !important; padding-right: 2.1rem !important; }
    .padh-22 { padding-left: 2.2rem !important; padding-right: 2.2rem !important; }
    .padh-23 { padding-left: 2.3rem !important; padding-right: 2.3rem !important; }
    .padh-24 { padding-left: 2.4rem !important; padding-right: 2.4rem !important; }
    .padh-25 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
    .padh-26 { padding-left: 2.6rem !important; padding-right: 2.6rem !important; }
    .padh-27 { padding-left: 2.7rem !important; padding-right: 2.7rem !important; }
    .padh-28 { padding-left: 2.8rem !important; padding-right: 2.8rem !important; }
    .padh-29 { padding-left: 2.9rem !important; padding-right: 2.9rem !important; }
    .padh-30 { padding-left: 3.0rem !important; padding-right: 3.0rem !important; }

    /* padding-vertical */
    .padv-0 {  padding-top: 0 !important; padding-bottom: 0 !important; }
    .padv-1 {  padding-top: 0.1rem !important; padding-bottom: 0.1rem !important; }
    .padv-2 {  padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
    .padv-3 {  padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
    .padv-4 {  padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
    .padv-5 {  padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .padv-6 {  padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
    .padv-7 {  padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
    .padv-8 {  padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; }
    .padv-9 {  padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }
    .padv-10 { padding-top: 1.0rem !important; padding-bottom: 1.0rem !important; }
    .padv-11 { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }
    .padv-12 { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
    .padv-13 { padding-top: 1.3rem !important; padding-bottom: 1.3rem !important; }
    .padv-14 { padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; }
    .padv-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .padv-16 { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }
    .padv-17 { padding-top: 1.7rem !important; padding-bottom: 1.7rem !important; }
    .padv-18 { padding-top: 1.8rem !important; padding-bottom: 1.8rem !important; }
    .padv-19 { padding-top: 1.9rem !important; padding-bottom: 1.9rem !important; }
    .padv-20 { padding-top: 2.0rem !important; padding-bottom: 2.0rem !important; }
    .padv-21 { padding-top: 2.1rem !important; padding-bottom: 2.1rem !important; }
    .padv-22 { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
    .padv-23 { padding-top: 2.3rem !important; padding-bottom: 2.3rem !important; }
    .padv-24 { padding-top: 2.4rem !important; padding-bottom: 2.4rem !important; }
    .padv-25 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .padv-26 { padding-top: 2.6rem !important; padding-bottom: 2.6rem !important; }
    .padv-27 { padding-top: 2.7rem !important; padding-bottom: 2.7rem !important; }
    .padv-28 { padding-top: 2.8rem !important; padding-bottom: 2.8rem !important; }
    .padv-29 { padding-top: 2.9rem !important; padding-bottom: 2.9rem !important; }
    .padv-30 { padding-top: 3.0rem !important; padding-bottom: 3.0rem !important; }

    /* padding bottom */
    .padb-5 { padding-bottom: 0.5rem !important; }
    .padb-6 { padding-bottom: 0.6rem !important; }
    .padb-7 { padding-bottom: 0.7rem !important; }
    .padb-8 { padding-bottom: 0.8rem !important; }
    .padb-9 { padding-bottom: 0.9rem !important; }
    .padb-10 { padding-bottom: 1.0rem !important; }

    /* padding top */
    .padt-5 { padding-top: 0.5rem !important; }
    .padt-6 { padding-top: 0.6rem !important; }
    .padt-7 { padding-top: 0.7rem !important; }
    .padt-8 { padding-top: 0.8rem !important; }
    .padt-9 { padding-top: 0.9rem !important; }
    .padt-10 { padding-top: 1.0rem !important; }

    /* text alignment */
    .text-left { text-align: left !important; }
    .text-center { text-align: center !important; }
    .text-right { text-align: right !important; }

    .justify-left { justify-content: start !important; align-items: start !important; }
    .justify-right { justify-content: end !important; align-items: end !important; }
    .justify-center, .justify-center p { justify-content: center !important; align-items: center !important; }

    /* display */
    .display-block { display: block !important; }
    .display-grid { display: grid !important; }
    .display-flex { display: flex !important; }
    .display-none { display: none !important; }

    /* forced width */
    .width-100 { width: 100% !important; }
    .width-90 { width: 90% !important; }
    .width-80 { width: 80% !important; }
    .width-70 { width: 70% !important; }
    .width-60 { width: 60% !important; }
    .width-50 { width: 50% !important; }

    /* forced heights */
    .height-20 { height: 2rem;}
    .min-height-150 { min-height: 15rem; }

    .rotate90 {
        transform: rotate(90deg);
        transition: transform 0.5s ease;
    }

    /* hover effects */
    .cursor-pointer:hover { cursor: pointer; }
    .scale-103:hover { transform: scale(1.03); }
    .scale-105:hover { transform: scale(1.05); }
    .saturate-200:hover { saturate(200%); }        

    #editor {
        border: 1px solid silver;
    }

    .card-white {
        background-color: white;
        padding: 1rem !important;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        border-radius: 0.5rem;
    }

    /* blok styles */
    .blok {
        flex: 1 1 100%;
    }

    /* bloktext styles */
    .bloktext {
        xwidth: 100%;
    }
    .bloktext h1 { font-size: 2rem; margin-bottom: 0.5rem; }
    .bloktext h2 { font-size: 1.5rem; margin-bottom: 0.5rem;  }
    .bloktext h3 { font-size: 1.17rem; margin-bottom: 0.5rem;  }
    .bloktext h4 { font-size: 1.0rem; margin-bottom: 0.5rem;  }
    .bloktext h5 { font-size: 0.83rem; margin-bottom: 0.5rem;  }
    .bloktext p {
        margin: 0 0 0.5rem 0;
    }
    .bloktext > *:last-child {
        margin-bottom: 0;
    }
    .bloktext a, .bloktext a:link, .bloktext a:visited {
        text-decoration-color: silver;
        color: black;
    }
    .bloktext a:hover {
        text-decoration: underline;
    }
    .bloktext code {
        font-family: 'JetBrains Mono', Menlo, 'Courier New', Courier, monospace;
        font-size: 1rem;
        line-height: 1.4;
    }
    .bloktext blockquote {
        margin-left: 1.5rem;
        border-left: 0.5rem solid #737373;
        border-radius: 0.5rem;
        padding: 1rem;
        background-color:#F5F5F4;
        margin-bottom: 0.5rem;
    }
    .bloktext ul, .bloktext ol {
        display: block;
        margin: 0 0 0.5rem 0.5rem;
        padding: 0 0 0.25rem 1.5rem;
    }
    .bloktext ul li {
        display: list-item;
        margin-bottom: 0.25rem;
    }
    .bloktext ol li {
        display: list-item;
        list-style-type: decimal;
        margin-bottom: 0.25rem;
    }
    .bloktext .liststyle-none li {
        list-style-type: none;
    }

    /* customized checkbox list */
    .checkbox-list ul {
        list-style: none; /* remove default bullets */
        padding: 0;
        margin: 0;
    }

    .checkbox-list ul li {
        position: relative;
        padding-left: 1.5rem; /* space for the image */
        margin-bottom: 0.5rem;
    }

    .checkbox-list ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0; /* adjust vertical alignment */
        width: 1.1rem;
        height: 1.1rem;
        background-image: url("http://assets.school-connect.net/sc42/green-check.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center left;
    }

    /* shared blok styles - blok button, button-with-icons */
    a.button:link, a.button a:visited, a.button a:active, a.button a:hover {
        text-decoration: none;
    }
    .button-3xs { height: 1.3rem; font-size: 0.6rem;    }
    .button-2xs { height: 1.3rem; font-size: 0.8rem;    }
    .button-xs { height: 1.5rem; font-size: 0.9rem;    }
    .button-sm { height: 1.7rem; font-size: 1.0rem;    }
    .button-md { height: 1.9rem; font-size: 1.1rem;    }
    .button-lg { height: 2.1rem; font-size: 1.2rem;    }
    .button-xl { height: 2.3rem; font-size: 1.3rem;    }
    .button-2xl { height: 2.4rem; font-size: 1.4rem;    }
    .button-3xl { height: 2.5rem; font-size: 1.6rem;    }
    .button-pill { 
        border-radius: 999px !important;
        padding-left: 1rem;
        padding-right: 1rem;    
    }
    button.button-blue { 
        background-color: #1e599c !important; 
        color: white !important;
        border: 1px solid #1e599c !important;
    }
    .button-blue:hover {
        background-color: white !important;
        color: #1e599c !important;
        cursor: pointer;
    }
    button.button-azure { 
        background-color: #385E9D !important; 
        color: white !important;
        border: 1px solid #385E9D !important;
    }
    .button-azure:hover {
        background-color: white !important;
        color: #385E9D !important;
        cursor: pointer;
    }
    button.button-yolk { 
        background-color: #ffc700 !important; 
        color: black !important;
        border: 1px solid #ffc700 !important;
    }
    .button-yolk:hover {
        background-color: white !important;
        color: black !important;
        cursor: pointer;
    }
    button.button-white-gray { 
        color: black !important; 
        background-color: white !important;
        border: 1px solid #566573 !important;
    }
    .button-white-gray:hover {
        color: white !important;
        background-color: #566573 !important;
        cursor: pointer;
    }
    button.button-white-blue { 
        color: #1e599c !important; 
        background-color: white !important;
        border: 1px solid #1e599c !important;
    }
    .button-white-blue:hover {
        color: white !important;
        background-color: #1e599c !important;
        cursor: pointer;
    }
    .button-red { background-color: red; color: white;    }
    .button-red:hover { color: red; background-color: white; cursor: pointer;    }

    #extras {
        position: fixed;
        bottom: 20px;
        right: 20px;
        height: 25px;
    }
    #extras a {
        background-color: #05a6e1;
        opacity: 0.8;
        color: white;
        padding: 5px 10px;
        border-radius: 16px;
        text-decoration: none;
        font-weight: 300;
        font-size: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        transition: background-color 0.3s ease;
        margin-left: 10px;
    }
    #extras a:hover {
        background-color: #0056b3;
    }