p {
    color: rgba(var(--off-black), 1);
}

.activity-container {
    width: 100%;
    height: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 0 auto;
}

.activity-block {
    margin: 0.8% 0.5% 0.8% 0.5%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    border-radius: 1vmin;
    align-items: flex-start;
    align-content: flex-start;
    user-select: none;
    z-index: 1;
}

.activity-content__container {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.activity-block__tag {
    position: relative;
    display: block;
    width: 100%;
    line-height: 100%;
    flex: none;
}

.style-background-color--light-gray {
    background-color: rgba(var(--metal-gray-light));
}

.style-background-color--medium-gray {
    background-color: rgba(var(--metal-gray-medium));
}

.style-background-color--salmon {
    background-color: rgba(var(--salmon));
}

.style-background-color--gold {
    background-color: rgba(var(--gold));
}

.style-background-color--teal {
    background-color: rgba(var(--teal));
}

.style-background-color--blue {
    background-color: rgba(var(--blue));
}

.style-background-color--brown {
    background-color: rgba(var(--brown));
}

.style-background-color--brown-light {
    background-color: rgba(var(--brown-light));
}


.style-font--patterns__cryptogram {
    font-family: 'Patterns';
    position: relative;
    display: block;
    margin-bottom: -20%;
}  

.style-font--patterns__key {
    font-family: 'Patterns';
}  

.style-font--patterns__paragraph {
    font-family: 'Patterns';
    letter-spacing: 5px;
    line-height: 200%;
}  

.style-font--default__tag {
    font-family: 'Primer Print Bold';
}  

.style-font--default__label {
    font-family: 'Primer Print Bold';
}  

.style-font--default__cryptogram {
    font-family: 'Primer Print Bold';
}  

.style-font--symbols__tag {
    font-family: 'Curses';
}  

.style-font--default__fraction {
    font-family: 'Primer Print Bold';
    text-align: center;
}

.style-font--indent__default {
    text-indent: 4%;
}

.style-font--symbols__title {
    font-family: 'Curses';
    margin-bottom: 1%;
}  

.style-font--symbols__cryptogram {
    font-family: 'Curses';
    position: relative;
    display: block;
    margin-bottom: -20%;
}  

.style-font--symbols__paragraph {
    font-family: 'Curses';
}  

.style-font--symbols {
    font-family: 'Curses';
}  

.style-background-size--cover {
    background-size: cover;
}

.style-background-size--contain {
    background-size: contain;
}

.style-background-repeat--no-repeat {
    background-repeat: no-repeat;
}

.machine-highlight--hide {
    opacity: 0;
}

.machine-highlight--show {
    opacity: 1;
    background-color: rgba(var(--off-black), 1);
    color: rgba(var(--gold), 1);
    border-radius: 10%;
    padding: 0% 1%;
    margin: 0% 0.5%;
    text-transform: uppercase;
}

.style-font--default__title {
    font-family: 'Primer Print Bold';
    color: rgba(var(--off-black), 1);
}

.style-font--default__subtitle {
    font-family: 'Primer Print Bold';
    color: rgba(var(--off-black), 1);
    margin-bottom: 5%;
}

.style-font--default__paragraph {
    font-family: 'Primer Print Bold';
    color: rgba(var(--off-black), 1);
}

.style-padding--half {
    padding: 0.9%;
}

.style-padding--default {
    padding: 1.8%;
}

.style-padding--double {
    padding: 3.6%;
}

.style-tag--default {
}

.style-tag--default--no-bottom {
}

.style-justify-content--space-between {
    justify-content: space-between;
}

.style-justify-content--center {
    justify-content: center;
}

.style-align-items--center {
    align-items: center;
}

.style-align-items--stretch {
    align-items: stretch;
}

.style-align-content--center {
    align-content: center;
}

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

.style-align--right {
    text-align: right;
}

.style-text--align--center {
    text-align: center !important;
    display: block;
}

.style-text--align--justify {
    text-align: center !important;
    display: block;
}


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

.style-width--auto {
    width: auto;
}

.style-width--percent-10 {
    width: 10%;
}

.style-width--percent-12 {
    width: 12%;
}

.style-width--percent-13 {
    width: 13%;
}

.style-width--percent-15 {
    width: 15%;
}

.style-width--percent-18 {
    width: 18%;
}

.style-width--percent-20 {
    width: 20%;
}

.style-width--percent-22 {
    width: 22%;
}

.style-width--percent-24 {
    width: 24%;
}

.style-width--percent-25 {
    width: 25%;
}

.style-width--percent-28 {
    width: 28%;
}

.style-width--percent-30 {
    width: 30%;
}

.style-width--percent-32 {
    width: 32%;
}

.style-width--percent-35 {
    width: 35%;
}

.style-width--percent-40 {
    width: 40%;
}

.style-width--percent-43 {
    width: 43%;
}

.style-width--percent-45 {
    width: 45%;
}

.style-width--percent-50 {
    width: 50%;
}

.style-width--percent-55 {
    width: 55%;
}

.style-width--percent-60 {
    width: 60%;
}

.style-width--percent-65 {
    width: 65%;
}

.style-width--percent-70 {
    width: 70%;
}

.style-width--percent-75 {
    width: 75%;
}

.style-width--percent-80 {
    width: 80%;
}

.style-width--percent-84 {
    width: 84%;
}

.style-width--percent-85 {
    width: 85%;
}

.style-width--percent-88 {
    width: 88%;
}

.style-width--percent-90 {
    width: 90%;
}

.style-width--sort-3 {
    width: 20%;
}

.style-width--column-3 {
    width: 23%;
}

.style-width--sort-2 {
    width: 28%;
}

.style-width--column-2 {
    width: 31.5%;
}

.style-width--sort-1 {
    width: 48%;
}

.style-width--column-1 {
    width: 50%;
}

.style-width--full {
    width: 100%;
}

.style-height--full {
    height: 100%;
}

.style-height--auto {
    height: auto;
}

.style-width--puzzle {
    width: 24.8%;
}

.style-height--puzzle {
    height: 24.8%;
}

.drag-and-drop {
    position: absolute;
    touch-action: none;
    cursor: default;
    cursor: url("../assets/interface/cursor/pointer-1x.png"), auto !important;
    cursor: -webkit-image-set(
        url("../assets/interface/cursor/pointer-1x.png") 1x,
        url("../assets/interface/cursor/pointer-2x.png") 2x
    ), auto !important;
}

.activity-content__figure {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.activity-content__figure-shape {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    border-radius: 0.25vmin;
    box-sizing: border-box;
}

.activity-content__figure__row {
    width: 100%;
    display: flex;
    justify-content: center;
}

.activity-content__figure__label {
    margin: 2% 3%;
}

.activity-content__figure__label--top,
.activity-content__figure__label--bottom {
    width: 100%;
    text-align: center;
}

.activity-content__figure__row__cell {
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: center center;
}

.style-height--percent-20 {
    height: 20%;
}

.style-height--percent-25 {
    height: 25%;
}

.style-height--percent-30 {
    height: 30%;
}

.style-height--percent-35 {
    height: 35%;
}

.style-height--percent-38 {
    height: 38;
}

.style-height--percent-50 {
    height: 50%;
}

.style-text--italic {
    font-style: italic;
}

.style-text--underline {
    text-decoration: underline;
}

.style-text--gold {
    color: rgba(var(--gold), 1);
}

.style-text--salmon {
    color: rgba(var(--salmon), 1);
}

.style-text--blue {
    color: rgba(var(--blue), 1);
}

.style-text--symbol {
    font-family: 'Curses';
}

.style-text--patterns {
    font-family: 'Patterns';
    letter-spacing: 5px;
}

.style-text--symbol--candy {
    font-family: 'Curses';
    border-style: solid;
    border-color: rgba(var(--off-black), 1);
    border-radius: 100vmin;
    display: block;
    text-align: center;
    padding-top: 2%;
}

.style-text--symbol--candy--salmon {
    background-color: rgba(var(--salmon), 1);
    box-shadow: 0vmin 0.3vmin 0vmin 0vmin rgba(var(--off-black), 1),
    inset 0vmin 0vmin 0vmin 0.25vmin rgba(var(--salmon-light), 1);
    text-shadow: 0 0.2vmin 0.1vmin rgba(var(--salmon-light));
}  

.style-text--symbol--candy--gold {
    background-color: rgba(var(--gold), 1);
    box-shadow: 0vmin 0.3vmin 0vmin 0vmin rgba(var(--off-black), 1),
    inset 0vmin 0vmin 0vmin 0.25vmin rgba(var(--off-white), 1);
    text-shadow: 0 0.2vmin 0.1vmin rgba(var(--off-white));
}

.style-text--symbol--candy--teal {
    background-color: rgba(var(--teal), 1);
    box-shadow: 0vmin 0.3vmin 0vmin 0vmin rgba(var(--off-black), 1),
    inset 0vmin 0vmin 0vmin 0.25vmin rgba(var(--teal-light), 1);
    text-shadow: 0 0.2vmin 0.1vmin rgba(var(--teal-light));
}  

.style-text--symbol--candy--blue {
    background-color: rgba(var(--blue), 1);
    box-shadow: 0vmin 0.3vmin 0vmin 0vmin rgba(var(--off-black), 1),
    inset 0vmin 0vmin 0vmin 0.25vmin rgba(var(--blue-light), 1);
    text-shadow: 0 0.2vmin 0.1vmin rgba(var(--blue-light));
}  

.style-text--symbol--candy--purple {
    background-color: rgba(var(--purple), 1);
    box-shadow: 0vmin 0.3vmin 0vmin 0vmin rgba(var(--off-black), 1),
    inset 0vmin 0vmin 0vmin 0.25vmin rgba(var(--purple-light), 1);
    text-shadow: 0 0.2vmin 0.1vmin rgba(var(--purple-light));
}  

.style-text--block {
    border-radius: 0.5vmin;
    padding: 2% 3%;
}

.style-text--block--white-black {
    color: rgba(var(--off-white , 1));
    background-color: rgba(var(--off-black , 1));
}

.style-material--metal {
    border-style: solid;
    border-color: rgba(var(--off-black), 1);
    box-shadow: 0vmin 0.6vmin 0vmin 0vmin rgba(var(--off-black), 1);
    background-color: rgba(var(--metal-gray-light));
    box-sizing: border-box;
}

.style-material--paper {
    border-style: solid;
    border-color: rgba(var(--off-black), 1);
    box-shadow: 0vmin 0.3vmin 0vmin 0vmin rgba(var(--off-black), 1);
    background-color: rgba(var(--off-white));
    box-sizing: border-box;
}

.style-border--thin {
    border-style: solid;
    border-color: rgba(var(--off-black), 1);
}

.style-border--default {
    border-style: solid;
    border-color: rgba(var(--off-black , 1));
}

.style-border-width--none {
    border: none;
}

.style-border-width--default {
    border-style: solid;
    border-color: rgba(var(--off-black), 1);
}

.style-border-width--thin {
    border-style: solid;
    border-color: rgba(var(--off-black), 1);
}

.activity-content__number-line {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
}

.activity-content__number-line__tick-container {
    height: 100%;
    width: 84%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    left: 8%;
    top: 27.5%;
}

.activity-content__number-line__tick {
    border-style: solid;
    border-color: rgba(var(--off-black , 1));
    background-color: rgba(var(--off-black , 1));
    border-radius: 1vmin;
    height: 40%;
}

.activity-content__number-line__tick__label {
    height: 50%;
    text-align: center;
    margin-top: 5%;
}

.activity-content__number-line__tick-item {
   display: flex;
   flex-direction: column;
   height: 100%;
   align-items: center;
   width: 10%;
   position: relative;
}

.activity-content__number-line__dot {
    position: absolute;
    border-style: solid;
    background-color: rgba(var(--gold , 1));
    border-color: rgba(var(--off-black , 1));
    border-radius: 2vmin;  
    top: 7%; 
    box-sizing: border-box;
}

.activity-content__number-line__arrow {
    width: 2%;
    height: auto;
}

.activity-content__number-line__line {
    border-style: solid;
    border-color: rgba(var(--off-black , 1));
    background-color: rgba(var(--off-black , 1));
    width: 90%;
}

.activity-content__number-line__arrow--left {
    background-image: url(../assets/activity/math/number-line/triangle.svg);
    transform: rotate(180deg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: -1%;
}

.activity-content__number-line__arrow--right {
    background-image: url(../assets/activity/math/number-line/triangle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -1%;
}

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

.activity-content__fraction__container {
    display: flex;
    flex-direction: column;
}

.activity-content__fraction__line {
    border-style: solid;
    border-color: rgba(var(--off-black , 1));
    border-radius: 1vmin;
    width: 130%;
    left: -25%;
    position: relative;
    background-color: rgba(var(--off-black , 1));
}

.activity-content__cryptogram-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border-style: solid;
    border-color: rgba(var(--off-black , 1));
    border-radius: 1vmin;
}

.activity-content__cryptogram__table-row {
    width: 100%;
    height: 50%;
}

.activity-content__cryptogram__table-cell {
    text-align: center;
    padding: 1.4% 1% 0.9% 1%;
}


.activity-content__coordinate-plane {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
}

.activity-content__plane {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.activity-content__key {
    width: auto;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    margin-top: 8%;
}

.activity-content__key__item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
    width: 105%;
    margin: 2.5% 0% 2.5% 14%;
}

.activity-content__key__item__image {
    border-radius: 100vmin;
    border-style: solid;
    border-color: rgba(var(--off-black), 1);
    box-sizing: border-box;
    display: block;
    margin-right: 5%;
}

.activity-content__key__item__text {
    display: block;
}

.activity-content__coordinate-plane__dot {
    position: absolute;
    border-style: solid;
    border-color: rgba(var(--off-black , 1));
    border-radius: 2vmin;  
    box-sizing: border-box;
}

.style-flex-grow--one {
    flex-grow: 1;
    max-height: 100%;
}

.style-font--br-split__default {
    margin-bottom: 1.2%;
}

.style-text--opacity--0 {
    opacity: 0;
}

.activity-sort__column__container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    top: 0;
    pointer-events: none;
    justify-content: center;
    align-items: flex-start;
    z-index: 0;
}

.activity-sort__column {
    height: 100%;
    box-sizing: border-box;
    margin: 0 1%;
    opacity: 1;
    text-align: center;
    z-index: 0;
}

.activity-sort__column__text {
    font-family: 'Primer Print Bold';
    color: rgba(var(--off-black));
    padding: 2% 6%;
    border-radius: 1vmin;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    position: relative;
    top: 8%;
}

.activity-sort__column__text--default {
    background-color: rgba(var(--metal-gray-medium));
}

.activity-sort__column__text--pink-light {
    background-color: rgba(var(--pink-light));
}

.activity-content__image {
    width: 100%;
}

.activity-block__tag {
    pointer-events: none;
}

.style-width--puzzle-text {
    width: 58%;
}