:root {
    --main-background: #17296a;
    --secondary-background: #24388d;

    --accent-background: #3f7efb;
    --accent-border: #879efc;
    --accent-shadow: #2a3e9a;

    --panel-background: #23348c;
    --panel-border: #4578cd;
    --panel-text-color: #233499;

    /* BUTTONS */
    --button-danger-bg:  #c21232;
    --button-danger-border: #de576e;
    --button-danger-shadow: #881d1d;

    --button-success-bg: #3bb304;
    --button-success-border: #74d649;
    --button-success-shadow: #1e6c10;

    --button-info-bg: #3f7efb;
    --button-info-border: #7f9afc;
    --button-info-shadow: #2a3e9a;

    --button-primary-bg: #7f3efe;
    --button-primary-border: #bb87fe;
    --button-primary-shadow: #622597;

    --fancy-radio-bg: #6943e3;
    --fancy-radio-border: #ab8ee4;
    --fancy-radio-shadow: #3e2891;

    --pill-border: #859dfc;

    --toggle-unchecked: #f34529;
    --toggle-circle: #fff;

    --text-white: #fff;
}

body.page-live-index {
    background: var(--main-background);
}

.page-live-index .slim-footer { display: none; }


.header__close {
    display: none;
}

.header__breadcrumbs a:first-child { display: none; }
.header__breadcrumbs { pointer-events: none; }
.game-page .header__breadcrumbs a { color: #fff!important; }

.wrapper, .container, .live-title {
    font-family: "Source Sans Pro";
}

.page-live-index .wrapper {
    background: var(--main-background);
    min-height: calc(100vh - 50px);
    padding-top: 40px;
}

.loading {
  visibility: hidden!important;
}

.panel {
    background: var(--panel-background);
    border: 3px solid var(--panel-border);
}

.panel-title {
    box-shadow: 0 3px var(--panel-border), 2px 3px var(--panel-border), -2px 3px var(--panel-border);
}

/* RESET  */
* {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

label {
    cursor: pointer;
}

hr { margin: 0; width: 80% }

/* UTILS  */
.px-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.py-10 { padding-top: 10px; padding-bottom: 10px; }

.mt-15 { margin-top: 15px; }

.mt-20 { margin-top: 20px; }

.mt-40 { margin-top: 40px }

.mb-15 { margin-bottom: 15px }

.mb-30 { margin-bottom: 30px }

.mb-40 { margin-bottom: 40px }

.mb-5 { margin-bottom: 5px }

.font-size-30 { font-size: 30px!important; }

.font-size-22 { font-size: 22px!important; }

.brd-accent {
    border: 3px solid var(--accent-border);
}

.brd-success {
    border: 3px solid var(--button-success-border);
}

.brd1 {
    border: 3px solid var(--fancy-radio-border)!important;
}

.brd1-left {
    border-left: 3px solid var(--button-primary-border)!important;
}

.brd1-right {
    border-right: 3px solid var(--button-primary-border)!important;
}

.brd-radius-5 { border-radius: 5px; }
.brd-radius-8 { border-radius: 8px; }

.box-shadow-1 {
    box-shadow: 0 10px var(--fancy-radio-shadow);
}

.bg-blue {
    background: var(--secondary-background);
}

.bg-danger {
    background: var(--button-danger-bg);
}

.bg-main {
    background: var(--main-background);
}

.bg-success {
    background: var(--button-success-bg);
}

.bg-panel {
    background: var(--panel-background);
}

.brd-panel {
    border: 2px solid var(--panel-border);
}

.bg-purple {
    background: var(--fancy-radio-bg);
}

.bg-accent {
    background:  var(--accent-background);
}

.bg-white {
    background: var(--text-white);
}

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

.color-white {
    color:  var(--text-white);
}

.color-error { color: #e91e63 }

.errors p {
    font-weight: bold;
    color: #e91e63;
}

.errors p:not(:empty):before {
    content: '!';
    color: #e91e63;
    display: inline-block;
    height: 20px;
    width: 25px;
    border-radius: 40%;
    background: #fff;
    text-align: center;
    font-weight: bold;
    margin-right: 5px;
}

.inline-block {
    display: inline-block;
}

.hide {
    display: none;
}

.w-100\% { width: 100%; }

.w-50\% { width: 50%; }

.w-45\% { width: 45%; }

.w-80\% { width: 80%; }


/* FLEX HELPERS */
.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-gap-40 { gap: 40px }
.flex-gap-10 { gap: 10px }

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

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

.justify-end {
    justify-content: flex-end;
}

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

.justify-space-around {
    justify-content: space-around;
}

.align-self-center {
    align-self: center;
}

/* TITLE  */
.live-title {
    border-radius: 0 0 20px 20px;
    width: calc(100% - 60px);
    box-shadow: 0 5px var(--accent-shadow);
    position: relative;
    padding: 10px 15px;
}

.live-title h3 {
    font-size: 25px;
    font-weight: 600;
}

.live-title a {
    font-size: 20px;
}

.live-close-button {
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 5px;
    right: 5px;
    line-height: 1em;
}

/* CODEBOX  */
.code-box {
    font-family: "Passion One";
    letter-spacing: 5px;
    line-height: 1em;
    padding: 10px 50px;
    font-size: 100px;
    border-radius: 8px;
    margin-bottom: 40px;
}

/* ROUND TIMER */
.round-timer {
    background: #fff;
    border-radius: 100px;
    font-size: 30px;
    font-family: "Passion One";
    font-weight: 400;
    text-align: center;
    line-height: 1em;
    width: 120px;
    padding: 3px;
}

/* FANCY RADIO  */
#play-live label.fancy-radio {
    display: inline-block;
    text-align: center;
    height: auto;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
}

#play-live .fancy-radio input[type=radio] {
    display: none
}

#play-live .fancy-radio > div {
    background: var(--fancy-radio-bg);
    border: 3px solid var(--fancy-radio-border);
    box-shadow: 0 15px var(--fancy-radio-shadow);
    color: var(--text-white);
    cursor: pointer;
    font-weight: 600;
    padding: 10px 20px;
    text-transform: uppercase;
    transition: transform 50ms ease-out;
    margin-bottom:  10px;
}

#play-live .fancy-radio > div span {
    margin-top: 3px;
}

#play-live .fancy-radio input[type=radio]:active + div,
#play-live .fancy-radio input[type=radio]:checked + div {
    filter: hue-rotate(10deg);
    box-shadow: 0 13px var(--fancy-radio-shadow);
    transform: translateY(2px);
}

#play-live .fancy-radio--icon > div {
    border-radius: 55px;
    font-size: 30px;
    font-weight: 600;
    padding: 20px;
    width: 250px;
}

#play-live .fancy-radio--icon .icon {
    font-size: 60px;
}

#play-live .fancy-radio--thumbnail > div span {
    font-size: calc(1.1vw);
    line-height: 1.3em;
}

#play-live .fancy-radio--thumbnail > div {
    padding: 20px;
    border-radius: 8px;
    width: calc(100vw / 8);
    height: calc(100vw / 6);
    min-height: 175px;
    min-width: 140px;
}

#play-live .fancy-radio--thumbnail .thumbnail {
    width: 100%;
    padding-top: 120%;
    background: var(--text-white);
    border-radius: 5px;
    border: 2px solid var(--fancy-radio-border);
}

/* BUTTON  */
.button {
    background: var(--button-primary-bg);
    border: 3px solid var(--button-primary-border);
    box-shadow: 0 5px var(--button-primary-shadow);
    color: var(--text-white);
    cursor: pointer;
    padding: 10px 20px;
    text-transform: uppercase;
    border-radius: 25px;
    font-size: 25px;
    transition: transform 50ms ease-out;
    font-weight: 600;
    min-width: 160px;
}

.button--big {
    padding: 15px;
    font-size: 28px;
}

.button--small {
    padding: 5px 20px;
    font-size: 20px;
    min-width: auto;
}

.button--info {
    background: var(--button-info-bg);
    border: 3px solid var(--button-info-border);
    box-shadow: 0 5px var(--button-info-shadow);
    border-radius: 15px;
    font-size: 20px;
}

.button--success {
    background: var(--button-success-bg);
    border: 3px solid var(--button-success-border);
    box-shadow: 0 5px var(--button-success-shadow);
}

.button--danger {
    background: var(--button-danger-bg);
    border: 3px solid var(--button-danger-border);
    box-shadow: 0 5px var(--button-danger-shadow);
}

.button:hover {
    filter: hue-rotate(10deg);
}

.button:active {
    filter: hue-rotate(10deg);
    transform: translateY(2px);
}

/* PILL CONTAINER  */
.pill {
    background: var(--text-white);
    border-radius: 100px;
    border: 3px solid var(--pill-border);
    height: 45px;
    color: #17296a;
    display: flex;
    font-size: 20px;
    align-items: center;
    position: relative;
}

.pill-title {
    background: var(--text-white);
    border-radius: 100px;
    border: 3px solid var(--pill-border);
    color: #17296a;
    display: flex;
    padding: 10px 20px;
    align-items: center;
    position: relative;
    font-size: 30px;
    font-weight: 600;
}

.l-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 50px 50px 50px;
}


/* TOOGLE */
input[type=checkbox].toggle {
    display: inline-block;
    -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
    width: 48px;
    min-width: auto;
    height: 24px;
    border: 2px solid var(--toggle-unchecked);
    background-color: var(--toggle-unchecked);
    position: relative;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
    outline: none;
    cursor: pointer;
    margin: 0;
}

input[type=checkbox]:checked.toggle {
    background-color: var(--button-primary-bg);
    border: 2px solid var(--button-primary-border);
}

input[type=checkbox].toggle:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--toggle-circle);
    top: 0px;
    left: 0px;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
}

input[type='checkbox']:checked.toggle:after {
  left: 24px;
  background: var(--text-white);
}

/* SELECT  */
#play-live select {
    display: block;
    border-radius: 100px;
    border: none;
    padding-right: 0;
    background: var(--text-white);
    appearance: none;
    width: 100%;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    padding: 0 15px;
    height: 35px;
}

#play-live select + .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-border);
}

/* PLAYER LIST  */
.player-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    grid-gap: 5px 20px;
    padding: 15px;
    color: var(--panel-text-color);
    height: calc(100vh - 280px);
    counter-reset: connected-players 0;
    overflow-y: scroll;
}

.player-list > div {
    counter-increment: connected-players;
}
.player-list > div:before {
    content: counter(connected-players) ".";
    margin-right: 10px;
}


.fancy-scroll::-webkit-scrollbar {
  width: 10px;  /* for vertical scrollbars */
  height: 6px; /* for horizontal scrollbars */
}

.fancy-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}
.fancy-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .8);
  border: none;
  -webkit-border-radius: 5px;
          border-radius: 5px;
}

.fancy-scroll {
    overflow: auto;
}

/* RIBBON  */
.ribbon {
    --ribbon-color: var(--button-success-bg);
    --ribbon-border: var(--button-success-border);
    --ribbon-shadow: var(--button-success-shadow);
    --ribbon-height: 60px;
    --ribbon-width: 100%;
    --ribbon-shadow-size: 20px;
    --ribbon-end-width: 80px;
    --ribbon-border-width: 3px;
}

.ribbon[data-result=lost] {
    --ribbon-color: var(--button-danger-bg);
    --ribbon-border: var(--button-danger-border);
    --ribbon-shadow: var(--button-danger-shadow);
}

.ribbon[data-result=win] {
    --ribbon-color: var(--button-success-bg);
    --ribbon-border: var(--button-success-border);
    --ribbon-shadow: var(--button-success-shadow);
}

.ribbon[data-result=tie] {
    --ribbon-color: var(--button-primary-bg);
    --ribbon-border: var(--button-primary-border);
    --ribbon-shadow: var(--button-primary-shadow);
}

.ribbon--title {
    display: none;
}

.ribbon[data-result=lost] .lost,
.ribbon[data-result=won] .won,
.ribbon[data-result=tie] .tie {
    display: flex;
}

.ribbon {
    position: absolute;
    width: var(--ribbon-width);
    height: var(--ribbon-height);
    top: calc(var(--ribbon-height) * -0.5);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4));
}

.ribbon > span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--ribbon-color);
  border: 3px solid var(--ribbon-border);
  align-items: center;
  justify-content: center;
  border-radius: 5px 5px 0 0;
  z-index: 100;
}

.ribbon i {
  position: absolute;
}

.ribbon-shadow {
  bottom: calc(var(--ribbon-shadow-size) * -1 + 5px);
  border: var(--ribbon-shadow-size) solid transparent;
  z-index: 50;
}

.ribbon-shadow--right {
  right: calc(var(--ribbon-shadow-size) * -1);
  border-right-color: transparent;
  border-left-color: var(--ribbon-shadow);
}

.ribbon-border.ribbon-shadow--right {
    border-left-color: var(--ribbon-border);
    transform: translate(0px, 5px);
    z-index: 40;
}

.ribbon-shadow--left {
  left: calc(var(--ribbon-shadow-size) * -1);
  border-left-color: transparent;
  border-right-color: var(--ribbon-shadow);
}

.ribbon-border.ribbon-shadow--left {
    border-right-color: var(--ribbon-border);
    transform: translate(0px, 5px);
    z-index: 40;
}

.ribbon-end {
    position: absolute;
    width: var(--ribbon-end-width);
    height: var(--ribbon-height);
    bottom: calc(var(--ribbon-shadow-size) * -1);
}

.ribbon-end:after,
.ribbon-end:before {
    content: '';
    position: absolute;
    width: 100%;
    border: calc(var(--ribbon-height) / 2) solid var(--ribbon-border);
}

.ribbon-end:before {
    right: 0;
}

.ribbon-end:after {
    width: calc(var(--ribbon-end-width) - var(--ribbon-border-width) * 4);
    border-color: var(--ribbon-color);
    border-width: calc(var(--ribbon-height) / 2 - var(--ribbon-border-width));
    top: var(--ribbon-border-width);
}

.ribbon-end--left:after {
    right: var(--ribbon-border-width);
}

.ribbon-end--left:after,
.ribbon-end--left:before {
    border-left-color: transparent;
}

.ribbon-end--left {
    left: calc(var(--ribbon-shadow-size) - var(--ribbon-end-width) + var(--ribbon-border-width));
}

.ribbon-end--right:after {
    left: var(--ribbon-border-width);
}

.ribbon-end--right:after,
.ribbon-end--right:before {
    border-right-color: transparent;
}

.ribbon-end--right {
    right: calc(var(--ribbon-shadow-size) - var(--ribbon-end-width) + var(--ribbon-border-width));
}

/* MATCH RESULT */
.match-result {
    position: relative;
    height: 240px;
    width: 400px;
    padding-top: 40px
}

.match-score span:last-child {
    text-transform: uppercase;
}

.match-score--won {
    color: var(--button-success-bg);
}

.match-score--lost {
    color: #aaa;
}

.match-score--tie {
    color: var(--button-info-bg);
}

/* MATCH LIST */
.match-list {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    align-content: flex-start;
    justify-content: space-between;
    gap: 15px;
    border-radius: 10px;
    padding: 20px 30px;
    height: calc(100vh - 380px);
    overflow-y: scroll;
    counter-reset: matches 0;
}

.match {
    min-width: 200px;
    flex-grow: 1;
    counter-increment: matches;
}

.match > div {
    min-width: 200px;
}

.match--number {
    background: var(--accent-background);
    border:  3px solid var(--accent-border);
    color: var(--text-white);
    text-align: center;
    border-radius: 8px;
    margin-bottom: 5px;
    line-height: 1em;
    padding: 3px;
}

.match--number:before {
    content: counter(matches);
}

.match--players {
    background: var(--text-white);
    border: 3px solid var(--accent-border);
    display: flex;
    gap: 5px;
    flex-direction: column;
    padding: 10px;
    color: var(--panel-text-color);
    border-radius: 8px;
}

.match--players.match--single > div {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0;
}

.match--players > div {
    display: flex;
    gap: 10px;
}

.match--player-name {
    text-overflow: ellipsis;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    width: 100px;
}

.match--single .match--player-name {
    align-self: center;
}

.match--player-score {
    background: #e4e4e4;
    border-radius: 4px;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.leaderboard {
    width: 100%;
    max-width: 800px;
    min-height: 450px;
    max-height: 500px;
    color: var(--panel-text-color);
}

/* MODAL */
.fullsize-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    z-index: 1000;
    background: var(--main-background);
}

/* WAITING ROOM */
.waiting-room {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    z-index:  100;
    display: flex;
    flex-direction: column;
}

.waiting-room h2 {
    background: var(--text-white);
    text-align: center;
}

.waiting-room iframe {
    flex-grow: 1;
    background: var(--text-white);
}

/* SUMMARY */
.summary--item:nth-child(2) {
    background: #8d6efc;
}

/* GAME SELECTOR */
.game-selector {
    gap: 20px;
    transition: transform .5s ease-out;
}

.game-selector--wrapper {
    position: relative;
    width: calc(100% - 100px);
}

button.triangle {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OC4wMzkiIGhlaWdodD0iNTQuODE3IiB2aWV3Qm94PSIwIDAgNDUuMDM3IDUxLjM5Ij48cGF0aCBkPSJtMjc1LjgxMyAzMDcuMzcgMzUuMTAyIDE5LjQzOGMxLjgxNyAxLjAwNiAyLjEzOCAzLjY3OC4zMiA0LjY4NWwtMzQuMjE2IDE4Ljk3NGMtMS44MTcgMS4wMDctNi4zODggNC42ODMtNi4zOTkgMi42MDVsLS4wNzYtMTQuODdjLS4wMTItMi4wNzctLjE1NS0xNy42NjctLjEzLTE5LjcyM2wuMTQyLTEyLjMxMWMuMDI0LTIuMDc4IDMuNDQuMTk1IDUuMjU3IDEuMjAxeiIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM2ZDYxZTM7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOiNhYjhlZTQ7c3Ryb2tlLXdpZHRoOjQuMDAwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNjguOTEgLTMwMy44MSkiLz48L3N2Zz4=);
    height: 25px;
    width: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -100000px;
    border: none;
    filter: drop-shadow(0 4px var(--fancy-radio-shadow));
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: -40px;
}

button.triangle:active {
    transform: translateY(2px);
}

button.triangle.left {
    filter: drop-shadow(0 -4px var(--fancy-radio-shadow));
    transform: rotate(180deg);
    left: unset;
    left: -40px;
}

button.triangle.left:active {
    transform: rotate(180deg) translateY(-2px);
}

@media (min-width: 1365px) {
    .container {
    }
}

/* NUMBER INPUT */
.number-input {
    position: relative;
}

.number-input input {
    font-size: 20px;
    height: 35px;
    border: none;
    width: 100%;
    border-radius: 5px;
}

.number-input [disabled] {
    background: #e6e6e6;
    color: #545454;
}

.number-input button[disabled] {
    border: 2px solid #d3d3d3!important;
}

.number-input button {
    position: absolute;
    border-radius: 3px;
    padding: 5px;
    right: -4px;
    font-size: 11px;
    cursor: pointer;
}
.number-input button.up {
    top: -9px;
    transform: rotate(180deg);
}
.number-input button.down {
    bottom: -9px;
}


/* GAMES THUMBNAILS  */
#play-live .fancy-radio--thumbnail .thumbnail {
    background-size: cover;
}

#play-live .thumbnail.battleship {
    background-image: url(/images-r/live/game/battleship@4b3205f056.png);
}

#play-live .thumbnail.kaboom {
    background-image: url(/images-r/live/game/kaboom.png);
}

#play-live .thumbnail.connect4 {
    background-image: url(/images-r/live/game/connect4.png);
}

#play-live .thumbnail.tug {
    background-image: url(/images-r/live/game/tug.png);
}

#play-live .thumbnail.empanada {
    background-image: url(/images-r/live/game/empanada.png);
}

#play-live .thumbnail.tank {
    background-image: url(/images-r/live/game/tank.png);
}

#play-live .thumbnail.tictactoe {
    background-image: url(/images-r/live/game/tictactoe.png);
}

#play-live .thumbnail.rice {
    background-image: url(/images-r/live/game/rice.png);
}

#play-live .thumbnail.homework {
    background-image: url(/images-r/live/game/homework@4b3205f056.png);
}


/* INSTRUCTIONS */
.instructions-thumbnail {
    background-size: cover;
}

.instructions-thumbnail.battleship {
    background-image: url(/images-r/live/game/instructions/battleship.png);
}

.instructions-thumbnail.kaboom {
    background-image: url(/images-r/live/game/instructions/kaboom.png);
}


.instructions-thumbnail.connect4 {
    background-image: url(/images-r/live/game/instructions/connect4.png);
}

.instructions-thumbnail.tug {
    background-image: url(/images-r/live/game/instructions/tug.png);
}

.instructions-thumbnail.empanadagobbler {
    background-image: url(/images-r/live/game/instructions/empanadagobbler.png);
}

.instructions-thumbnail.tank {
    background-image: url(/images-r/live/game/instructions/tank.png);
}

.instructions-thumbnail.tictactoe {
    background-image: url(/images-r/live/game/instructions/tictactoe.png);
}

.instructions-thumbnail.riceandbeans {
    background-image: url(/images-r/live/game/instructions/riceandbeans.png);
}

.instructions-thumbnail.homework {
    background-image: url(/images-r/live/game/instructions/homework@4b3205f056.png);
}

/* SORT DIRECTION */
.sort-dir--up .icon {
    transform: rotate(180deg);
}