/* boxes.css */

.context-box {
    background-color: var(--primary-color-light);
    box-shadow: var(--shadow);
    border-radius: var(--button-padding);
    padding: var(--content-padding) 0px;
    position: absolute;
    min-width: 100px;
}

.context-box .context-box-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.context-box .context-box-input {
    cursor: pointer;
    padding: var(--button-padding);
}

.context-box .context-box-input:hover {
    background-color: var(--primary-color);
}

.context-box .context-box-button {
    cursor: pointer;
    padding: var(--button-padding);
}

.context-box .context-box-button:hover {
    background-color: var(--primary-color);
}

/*  Drag Box    */

.drag-box {
    user-select: none;
    position: relative;
    width: 100%;
    height: 100%;
}

.drag-content {
    background-color: var(--primary-color-light);
    padding: var(--content-padding);
}

.drag-box[drag] .drag-content:hover {
    border: 1px dashed black;
    padding: calc( var(--content-padding) - 1px);
}

.drag-item {
    background-color: var(--primary-color-light);
    box-shadow: var(--shadow);
    display: inline-block;
    cursor: grab;
    margin: var(--content-padding);
    padding: var(--content-padding);
    position: relative;
}

.drag-item[drag] {
    pointer-events: none;
    position: absolute;
    cursor: grabbing;
    z-index: 1;
}

/*  Link Box    */

.link-box {
    user-select: none;
    position: relative;
    width: 100%;
    height: 100%;
}

.link-content {
    background-color: var(--primary-color-light);
    padding: var(--content-padding);
}

.link-item {
    background-color: var(--primary-color-light);
    box-shadow: var(--shadow);
    cursor: grab;
    margin: var(--content-padding);
    padding: var(--content-padding);
}

.link-item[drag] {
    pointer-events: none;
}

.expand-box .expand-box-header .expand-box-icon .icon {
    transition: 0.4s transform;
}

.expand-box:not(.expand-box-open) .expand-box-header .expand-box-icon .icon {
    transform: rotate( 0deg);
}

.expand-box.expand-box-open .expand-box-header .expand-box-icon .icon {
    transform: rotate( 90deg);
}

.expand-box:not([only="height"]) .expand-box-content {
    display: none;
}
.expand-box[only="height"] .expand-box-content {
    display: block !important;
    height: 0px;
    overflow: hidden;
}

/* form.css */

.radiobox-label {
    cursor: pointer;
}

.radiobox {
    color: var(--secondary-color);
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'GrowIcons';
    font-weight: 900;
    text-align: center;
    min-width: 32px;
}

.radiobox:hover {
    color: rgba(110, 167, 50, 0.7);
    cursor: pointer;
}

.radiobox::before {
    display: block;
    content: '\00E0';
    text-align: center;
    transform: scale(1.6);
}

.radiobox.checked::before {
    display: block;
    content: '\00E1';
}

.radiobox.locked {
    cursor: inherit !important;
    color: inherit !important;
}

.checkbox-label {
    cursor: pointer;
}

.checkbox {
    color: var(--secondary-color);
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'GrowIcons';
    font-weight: 900;
    text-align: center;
    min-width: 32px;
}

.checkbox:hover {
    color: rgba(110, 167, 50, 0.7);
    cursor: pointer;
}

.checkbox-master:hover {
    color: rgba(148, 77, 191, 0.7);
    cursor: pointer;
}

.checkbox::before {
    display: block;
    content: '\00E0';
    text-align: center;
    transform: scale(1.6);
}

.checkbox.checked::before {
    display: block;
    content: '\00E1';
    /* content: '\00A9'; */
}

.checkbox.locked {
    cursor: inherit !important;
    color: inherit !important;
}

.checkbox-label:not(.checked) .checked:not(.checkbox):not(.ignore) {
    display: none !important;
}

.checkbox-label.checked .not-checked:not(.checkbox):not(.ignore) {
    display: none !important;
}

.finish-test {
    border: 1px solid #7317a0;
    border-radius: calc( var(--font-size) / 8);
    padding: calc( var(--font-size) / 4) calc( var(--font-size) / 2);
    font-size: calc( var(--font-size) / 2);
}

.return-test {
    border: 1px solid #7317a0;
    border-radius: calc( var(--font-size) / 8);
    padding: calc( var(--font-size) / 4) calc( var(--font-size) / 2);
    font-size: calc( var(--font-size) / 2);
}

.blur {
    -webkit-filter: blur( 4px);
    filter: blur( 4px);
}

/* html.css */

/*  Select    */

.button-select {
    color: rgb(110, 167, 50);
    border: 1px solid rgb(110, 167, 50);
    border-radius: 5px;
    padding: 5px 10px;
    display: inline-block;
    cursor: pointer;
    text-transform: none;
    position: relative;
    min-width: 200px;
}

.select {
    color: rgb(110, 167, 50);
    border: 1px solid rgb(110, 167, 50);
    border-radius: 5px;
    padding: 5px 10px;
    display: inline-block;
    cursor: pointer;
    text-transform: none;
    position: relative;
    min-width: 135px;
}

.select>.icon {
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%) !important;
}

.select:not(.select-open)>.icon::before {
    content: '\005C';
}

.select.select-open>.icon::before {
    content: '\005E';
}

.select[noicon]>.icon {
    display: none !important;
}

.select .option[disabled] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.select:not([noicon]) .option[disabled] {
    padding-right: 20px;
}

.select-controller .quick-box-content {
    min-width: 270px !important;
    width: auto !important;
    max-width: 300px !important;
}

.select .select-options {
    display: none;
}

.select-options {
    width: 100%;
    min-width: 180px;
    max-height: 360px;
    position: relative;
    overflow-y: auto;
}

.select-options .select-options-content {
    padding: 5px;
}

.select-options .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

.select-options .option {}

.select-options .option {
    background: rgb(239, 239, 239);
    color: black;
    transition: 0.2s opacity;
}

.select-options .option[selected] {
    background: rgb(50, 110, 167);
    color: white;
}

.select-options .option:hover {
    opacity: 0.5;
}

.quick-box {
    font-size: 14px;
    position: fixed;
    z-index: 1000;
}

.quick-box .quick-box-content {
    display: block;
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    box-shadow: 0px 0px 10px darkgray;
    border-radius: 5px;
    overflow: hidden;
    min-width: 200px;
    max-height: 90vh;
}

.category-hidden {
    display: none !important;
}

.competence-hidden {
    display: none !important;
}

.accordion .accordion-box {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.accordion .accordion-box .accordion-box-header {
    cursor: pointer;
}

.accordion .accordion-box .accordion-box-content {
    display: none;
}

.accordion .accordion-box .accordion-box-icon {
    border-radius: 4px;
    border: 2px solid var(--green);
    text-align: center;
    position: relative;
    width: calc(var(--font-line-height) - 4px);
    height: calc(var(--font-line-height) - 4px);
    transition: 0.4s background-color, 0.4s border, 0.4s color;
}

.accordion .accordion-box .accordion-box-icon .icon {
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.accordion .accordion-box:not(.active) .accordion-box-icon {
    color: var(--green);
}

.accordion .accordion-box:not(.active) .accordion-box-icon .icon::before {
    content: '\0055';
}

.accordion .accordion-box.active .accordion-box-icon {
    background-color: var(--green);
    color: white;
}

.accordion .accordion-box.active .accordion-box-icon .icon::before {
    content: '\0056';
}

/* icons.css */



/* labels.css */

.label {
    display: flex !important;
    align-items: center;
    width: 100%;
}

.label-content {
    flex-grow: 1;
    width: 0%;
}

.label-icon {
    min-width: 45px;
}

.column {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.column-content {
    flex-grow: 1;
    height: 0%;
}

.column-180 {
    width: 180px;
}

.column-225 {
    width: 225px;
}

.column-270 {
    width: 270px;
}

.column-360 {
    width: 360px;
}

.column-450 {
    width: 450px;
}

.separator {
    padding: var(--base-padding) 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.25);
}

.separator-2 {
    padding: calc(var(--base-padding) * 2) 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.25);
}

.highlight {
    color: rgb(110, 167, 50);
}

/* messages.css */

.content-red
{
    color: red;
}

.content-green
{
    color: green;
}

.tab-box .tab:not(.active) {
    display: none;
}

/* popup.css */

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
  

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* reset.css */

/*
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i&display=swap' );
*/

* {
    box-sizing: border-box;
    border: none;
    background: none;
    color: inherit;
    text-decoration: inherit;
    font-weight: inherit;
    font-size: inherit;
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    font-family: inherit;
    margin: 0;
    padding: 0;
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) var(--background-color);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    opacity: 0.75;
}

html {
    font-family: 'Century Gothic';
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: rgb(191, 191, 191);
    font-weight: 300;
}

img {
    max-width: 100%;
}

b {
    font-weight: bold;
}

u {
    text-decoration: underline;
}

strike {
    text-decoration: line-through;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

/* style.css */

:root {
    --color-article: rgb(116, 104, 98);
    --color-ranking: rgb(249, 181, 14);
    --color-statistic: rgb(134, 105, 110);
    --color-course: #6EA732;
    --color-course-gray: #a1a7af;
    --color-workshop: rgb(220, 175, 194);
    --color-video: rgb(134, 105, 110);
    --color-click-meeting: #637b84;

    --green: rgb(110, 167, 50);
    --red: crimson;
    --blue: rgb(50, 110, 167);
    --gold: rgb(249, 181, 14);
    --silver: rgb(157, 157, 157);
    --bronze: rgb(181, 119, 78);

    --waiting-status: #775e63;
    --during-status: #c58647;
    --done-status: #6d9c31;
    --invited-status: #775e63;
    --joined-status: #6d9c31;
    --rejected-status:rgb(167, 50, 110);

    --font-weight-light: 300;
    --font-weight: 400;
    --font-weight-bold: 500;
    /*  Font    Sizes   */
    --sub-note-font-size: 10px;
    --note-font-size: 11px;
    --sup-note-font-size: 12px;
    --sub-paragraph-font-size: 14px;
    --paragraph-font-size: 15px;
    --sup-paragraph-font-size: 16px;
    --sub-title-font-size: 18px;
    --title-font-size: 19px;
    --sup-title-font-size: 20px;
    --sub-header-font-size: 22px;
    --header-font-size: 23px;
    --sup-header-font-size: 24px;
    --sub-big-font-size: 26px;
    --big-font-size: 27px;
    --sup-big-font-size: 28px;
    --sub-huge-font-size: 30px;
    --huge-font-size: 31px;
    --sup-huge-font-size: 32px;

    --sub-giant-font-size: 44px;
    --giant-font-size: 54px;
    --sup-giant-font-size: 64px;

    /*  Line    Heights */
    --sub-note-line-height: calc(var(--sub-note-font-size) + 5px);
    --note-line-height: calc(var(--note-font-size) + 5px);
    --sup-note-line-height: calc(var(--sup-note-font-size) + 5px);
    --sub-paragraph-line-height: calc(var(--sub-paragraph-font-size) + 5px);
    --paragraph-line-height: calc(var(--paragraph-font-size) + 5px);
    --sup-paragraph-line-height: calc(var(--sup-paragraph-font-size) + 5px);
    --sub-title-line-height: calc(var(--sub-title-font-size) + 5px);
    --title-line-height: calc(var(--title-font-size) + 5px);
    --sup-title-line-height: calc(var(--sup-title-font-size) + 5px);
    --sub-header-line-height: calc(var(--sub-header-font-size) + 5px);
    --header-line-height: calc(var(--header-font-size) + 5px);
    --sup-header-line-height: calc(var(--sup-header-font-size) + 5px);
    --sub-big-line-height: calc(var(--sub-big-font-size) + 5px);
    --big-line-height: calc(var(--big-font-size) + 5px);
    --sup-big-line-height: calc(var(--sup-big-font-size) + 5px);
    --sub-huge-line-height: calc(var(--sub-huge-font-size) + 5px);
    --huge-line-height: calc(var(--huge-font-size) + 5px);
    --sup-huge-line-height: calc(var(--sup-huge-font-size) + 5px);

    --sub-giant-line-height: calc(var(--sub-giant-font-size) + 5px);
    --giant-line-height: calc(var(--giant-font-size) + 5px);
    --sup-giant-line-height: calc(var(--sup-giant-font-size) + 5px);

    /*  Old */
    --offset-padding: 8pt;
    --content-padding: 6pt;
    --button-padding: 4pt;
    --primary-color: rgb(255, 255, 255);
    --primary-color-light: rgb(255, 255, 255);
    --primary-color-dark: rgb(223, 223, 223);
    --secondary-color: rgb(0, 121, 173);
    --secondary-color-light: rgb(0, 144, 206);
    --secondary-color-dark: rgb(0, 97, 139);
    --third-color: rgb(31, 31, 31);
    --third-color-light: rgb(63, 63, 63);
    --third-color-dark: rgb(0, 0, 0);
    --shadow: 5px 10px 15px var(--third-color-light);
    --shadow-light: 2px 4px 6px var(--third-color-light);
    --base-padding: 12px;
    --half-padding: 6px;
    --quarter-padding: 3px;
}

body[device="Desktop"][device-size="Small"] {
    --sub-note-font-size: 6px !important;
    --note-font-size: 7px !important;
    --sup-note-font-size: 8px !important;
    --sub-paragraph-font-size: 10px !important;
    --paragraph-font-size: 11px !important;
    --sup-paragraph-font-size: 12px !important;
    --sub-title-font-size: 14px !important;
    --title-font-size: 15px !important;
    --sup-title-font-size: 16px !important;
    --sub-header-font-size: 18px !important;
    --header-font-size: 19px !important;
    --sup-header-font-size: 20px !important;
    --sub-big-font-size: 22px !important;
    --big-font-size: 23px !important;
    --sup-big-font-size: 24px !important;
    --sub-huge-font-size: 26px !important;
    --huge-font-size: 27px !important;
    --sup-huge-font-size: 28px !important;

    --sub-giant-font-size: 32px !important;
    --giant-font-size: 40px !important;
    --sup-giant-font-size: 50px !important;

    --base-padding: 8px !important;
    --half-padding: 4px !important;
    --quarter-padding: 2px !important;
}

body[mobile="true"] {
    --sub-note-font-size: 5px !important;
    --note-font-size: 6px !important;
    --sup-note-font-size: 7px !important;
    --sub-paragraph-font-size: 8px !important;
    --paragraph-font-size: 9px !important;
    --sup-paragraph-font-size: 10px !important;
    --sub-title-font-size: 12px !important;
    --title-font-size: 13px !important;
    --sup-title-font-size: 14px !important;
    --sub-header-font-size: 16px !important;
    --header-font-size: 17px !important;
    --sup-header-font-size: 18px !important;
    --sub-big-font-size: 20px !important;
    --big-font-size: 21px !important;
    --sup-big-font-size: 22px !important;
    --sub-huge-font-size: 24px !important;
    --huge-font-size: 25px !important;
    --sup-huge-font-size: 26px !important;

    --sub-giant-font-size: 32px !important;
    --giant-font-size: 38px !important;
    --sup-giant-font-size: 48px !important;

    --base-padding: 8px !important;
    --half-padding: 4px !important;
    --quarter-padding: 2px !important;
}

.sub-giant {
    --font-size: var(--sub-giant-font-size) !important;
    --font-line-height: var(--sub-giant-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sup-giant {
    --font-size: var(--sup-giant-font-size) !important;
    --font-line-height: var(--sup-giant-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.giant {
    --font-size: var(--giant-font-size) !important;
    --font-line-height: var(--giant-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sub-giant {
    --font-size: calc(var(--giant-font-size) * 0.75) !important;
    --font-line-height: calc(var(--giant-line-height) * 0.75) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sup-huge {
    --font-size: var(--sup-huge-font-size) !important;
    --font-line-height: var(--sup-huge-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.huge {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sub-huge {
    --font-size: var(--sub-huge-font-size) !important;
    --font-line-height: var(--sub-huge-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sup-big {
    --font-size: var(--sup-big-font-size) !important;
    --font-line-height: var(--sup-big-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.big {
    --font-size: var(--big-font-size) !important;
    --font-line-height: var(--big-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sub-big {
    --font-size: var(--sub-big-font-size) !important;
    --font-line-height: var(--sub-big-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sup-header {
    --font-size: var(--sup-header-font-size) !important;
    --font-line-height: var(--sup-header-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.header {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sub-header {
    --font-size: var(--sub-header-font-size) !important;
    --font-line-height: var(--sub-header-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sup-title {
    --font-size: var(--sup-title-font-size) !important;
    --font-line-height: var(--sup-title-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.title {
    --font-size: var(--title-font-size) !important;
    --font-line-height: var(--title-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sub-title {
    --font-size: var(--sub-title-font-size) !important;
    --font-line-height: var(--sub-title-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sup-paragraph {
    --font-size: var(--sup-paragraph-font-size) !important;
    --font-line-height: var(--sup-paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.paragraph {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sub-paragraph {
    --font-size: var(--sub-paragraph-font-size) !important;
    --font-line-height: var(--sub-paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sup-note {
    --font-size: var(--sup-note-font-size) !important;
    --font-line-height: var(--sup-note-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.note {
    --font-size: var(--note-font-size) !important;
    --font-line-height: var(--note-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

.sub-note {
    --font-size: var(--sub-note-font-size) !important;
    --font-line-height: var(--sub-note-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

img {
    width: 100%;
    max-width: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

b,
strong,
.text-bold {
    font-weight: bold;
}

.underline {
    border-bottom: 1px solid rgb(63, 63, 63);
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0px;
    left: 0px;
    z-index: 10;
}

.sticky-left {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0px;
    z-index: 10;
}

.sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
    left: 0px;
    z-index: 10;
}

.top {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.top-left {
    position: absolute;
    top: 0px;
    left: 0px;
}

.top-center {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.top-right {
    position: absolute;
    top: 0px;
    right: 0px;
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.middle-left {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}

.middle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.middle-right {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
}

.bottom {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-left {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.bottom-center {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-right {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.border-radius {
    border-radius: var(--base-padding) !important;
}

.border-radius-left {
    border-radius: var(--base-padding) 0px 0px var(--base-padding) !important;
}

.border-round {
    border-radius: 100px !important;
}

.no-border {
    border: none !important;
}

.no-padding {
    padding: 0px !important;
}

.base-padding {
    padding: var(--base-padding) !important;
}

.base-padding-2 {
    padding: calc(var(--base-padding) * 2) !important;
}

.base-padding-3 {
    padding: calc(var(--base-padding) * 3) !important;
}

.base-padding-1-0 {
    padding: var(--base-padding) 0px !important;
}

.base-padding-0-1 {
    padding: 0 var(--base-padding) !important;
}

.base-padding-2-0 {
    padding: calc(var(--base-padding) * 2) 0px !important;
}

.base-padding-0-2 {
    padding: 0px calc(var(--base-padding) * 2) !important;
}

.base-padding-2-1 {
    padding: calc(var(--base-padding) * 2) var(--base-padding) !important;
}

.base-padding-1-2 {
    padding: var(--base-padding) calc(var(--base-padding) * 2) !important;
}

.half-padding {
    padding: var(--half-padding) !important;
}

.half-padding-1-0 {
    padding: var(--half-padding) 0px !important;
}

.half-padding-0-1 {
    padding: 0px var(--half-padding) !important;
}

.half-padding-2-0 {
    padding: var(--half-padding) 0px !important;
}

.half-padding-0-2 {
    padding: 0px var(--half-padding) !important;
}

.half-padding-2-1 {
    padding: calc(var(--half-padding) * 2) var(--half-padding) !important;
}

.half-padding-1-2 {
    padding: var(--half-padding) calc(var(--half-padding) * 2) !important;
}

.quarter-padding {
    padding: var(--quarter-padding) !important;
}

.quarter-padding-1-0 {
    padding: var(--quarter-padding) 0px !important;
}

.quarter-padding-0-1 {
    padding: 0px var(--quarter-padding) !important;
}

.quarter-padding-2-0 {
    padding: var(--quarter-padding) 0px !important;
}

.quarter-padding-0-2 {
    padding: 0px var(--quarter-padding) !important;
}

.quarter-padding-2-1 {
    padding: calc(var(--quarter-padding) * 2) var(--quarter-padding) !important;
}

.quarter-padding-1-2 {
    padding: var(--quarter-padding) calc(var(--quarter-padding) * 2) !important;
}

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

.text-center {
    text-align: center !important;
}

.text-cut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row {
    display: flex;
}

.row .row-main {
    flex-grow: 1;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.html-line {
    pointer-events: none;
}

.tool-bar {
    width: var(--header-size);
}

.tool {
    border: 2px solid transparent;
    cursor: pointer;
    line-height: calc(var(--header-size) - 4px);
    width: var(--header-size);
    height: var(--header-size);
}

.tool:hover {
    border-radius: var(--content-padding);
    border: 2px solid var(--primary-color);
}

.scroll {
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
    max-height: 100%;
}

.scroll-y {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    max-height: 100%;
}

.overflow-y {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    max-height: 100%;
}

.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
}

.fill-height {
    height: 100%;
}

.fill-width {
    width: 100%;
}

.fill-both {
    width: 100%;
    height: 100%;
}

.fill-absolute {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.flex {
    flex: 1;
}

.loading-spin {
    animation-name: loadingSpin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.overflow-visible {
    overflow: visible;
}

.hidden {
    display: none !important;
}

.hidden-search,
.hidden-group,
.hidden-role,
.hidden-type,
.hidden-status,
.hidden-presence,
.hidden-grade,
.hidden-category {
    display: none !important;
}

@keyframes loadingSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.nowrap {
    white-space: nowrap;
}

.test {
    color: rgb(90, 17, 119);
}

.button-border {
    border: 1px solid rgb(110, 167, 50);
    border-radius: 5px;
    padding: 5px 10px;
}

.loading-text::after {
    background-color: rgb(110, 167, 50);
    display: block;
    content: '';

    height: 4px;

    position: relative;

    animation-name: LoadingTextAnimation;
    animation-duration: 2s;
    animation-timing-function: ;
    animation-iteration-count: infinite;
}

.pl-2 {
    padding-left: 2px;
}

.pl-4 {
    padding-left: 4px;
}

.pl-8 {
    padding-left: 8px;
}

.pl-12 {
    padding-left: 12px;
}

.pl-16 {
    padding-left: 16px;
}

.pl-24 {
    padding-left: 24px;
}

.pl-32 {
    padding-left: 32px;
}

.pr-2 {
    padding-right: 2px;
}

.pr-4 {
    padding-right: 4px;
}

.pr-8 {
    padding-right: 8px;
}

.pr-12 {
    padding-right: 12px;
}

.pr-16 {
    padding-right: 16px;
}

.pr-24 {
    padding-right: 24px;
}

.pr-32 {
    padding-right: 32px;
}

.pt-2 {
    padding-top: 2px;
}

.pt-4 {
    padding-top: 4px;
}

.pt-8 {
    padding-top: 8px;
}

.pt-12 {
    padding-top: 12px;
}

.pt-16 {
    padding-top: 16px;
}

.pt-24 {
    padding-top: 24px;
}

.pt-32 {
    padding-top: 32px;
}

.pb-2 {
    padding-bottom: 2px;
}

.pb-4 {
    padding-bottom: 4px;
}

.pb-8 {
    padding-bottom: 8px;
}

.pb-12 {
    padding-bottom: 12px;
}

.pb-16 {
    padding-bottom: 16px;
}

.pb-24 {
    padding-bottom: 24px;
}

.pb-32 {
    padding-bottom: 32px;
}

.ml-2 {
    margin-left: 2px;
}

.ml-4 {
    margin-left: 4px;
}

.ml-8 {
    margin-left: 8px;
}

.ml-12 {
    margin-left: 12px;
}

.ml-16 {
    margin-left: 16px;
}

.ml-24 {
    margin-left: 24px;
}

.ml-32 {
    margin-left: 32px;
}

.mr-2 {
    margin-right: 2px;
}

.mr-4 {
    margin-right: 4px;
}

.mr-8 {
    margin-right: 8px;
}

.mr-12 {
    margin-right: 12px;
}

.mr-16 {
    margin-right: 16px;
}

.mr-24 {
    margin-right: 24px;
}

.mr-32 {
    margin-right: 32px;
}

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

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

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

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

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

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

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

.mb-2 {
    margin-bottom: 2px;
}

.mb-4 {
    margin-bottom: 4px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

@keyframes LoadingTextAnimation {
    0% {
        left: 0%;
        width: 0%;
    }

    25% {
        left: 0%;
        width: 0%;
    }

    50% {
        left: 0%;
        width: 100%;
    }

    75% {
        left: 100%;
        width: 0%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}

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

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

/* tables.css */


.multitable {
    display: flex;
}

    .tr {
        display: flex;
    }

    .tr-sticky-top {
        background-color: white;
        position: sticky;
        left: 0px;
        top: 0px;
    }

    .tr-sticky-bottom {
        background-color: white;
        position: sticky;
        bottom: 0px;
    }

/* tooltip.css */

.tooltip {
    display: block;

    pointer-events: none;

    background: rgb( 255, 255, 255 );
    color: rgb(0, 0, 0);

    border: 1px solid lightgray;
    border-radius: 5px;

    font-size: 12px;

    font-weight: 400;

    position: fixed;

    padding: 5px;

    min-width: 0px;
    width: auto;
    max-width: 50vw;

    min-height: 0px;
    height: auto;
    max-height: 50vw;

    overflow: hidden;

    z-index: 99999;
}

/* InfoBox/InfoBox.css */

.info-box {
    pointer-events: none;
    z-index: 1001;
}

.info-box .info-box-content {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);

    border-radius: var(--base-padding);
    box-shadow: 0px var(--half-padding) var(--base-padding) rgba(0, 0, 0, 0.25);
    
    width: 450px;
    height: 75px;

    overflow: hidden;
}

@media (max-width: 1460px) {
    .info-box .info-box-content {
        width: 360px;
        height: 75px;
    }
}

.info-box .info-box-content .info-box-icon-controller {
    background-color: #d1914a;
    color: rgb(255, 255, 255);
}

.info-box[type="success"] .info-box-content .info-box-icon-controller {
    background-color: rgb(110, 167, 50);
    color: rgb(255, 255, 255);
}

.info-box[type="error"] .info-box-content .info-box-icon-controller {
    background-color: #dc143c;
    color: rgb(255, 255, 255);
}

/* InfoBox/InfoBox.mobile.css */

body[mobile="true"] .info-box {
    left: 50%;
    top: 30px !important;
    transform: translateX(-50%);
    max-width: 450px;
    width: 100%;
}

body[mobile="true"] .info-box .info-box-content {
    width: 100%;
}

body[mobile="true"] .info-box .info-box-content .header {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

body[mobile="true"] .info-box .info-box-content .title {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

body[mobile="true"] .info-box .info-box-content .paragraph {
    --font-size: var(--title-font-size) !important;
    --font-line-height: var(--title-line-height) !important;
}

/* ModalBox/ModalBox.css */

.modal-box-wide.modal-box .modal-box-wide-content {
    position: relative;
    margin: 0px auto;
    width: 100%;
    height: 100%;
    max-width: 1080px !important;
    max-height: 90vh;
    overflow-y: auto;
}

/* ModalBox/ModalBoxWide.css */

.modal-box-wide {
    background-color: rgb(0, 0, 0, 0.5);
    display: flex;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
}

.modal-box-wide .modal-box-wide-content {
    position: relative;
    margin: 0px auto;
    width: 100%;
    max-width: 1920px;
}

.modal-box-wide .modal-box-wide-content .modal-box-wide-main {
    width: 100%;
    height: 100%;
}

.modal-box-wide .modal-box-wide-content .modal-box-wide-main .modal-box-wide-main-content {
    width: 100%;
    height: 100%;
}

/* Site/Site.css */

body[mobile="true"][orientation="landscape"] .landscape-100vh {
    margin: 0px auto !important;
    width: 100vh !important;
    max-width: 100vh !important;
}

body[device-type="Mobile"][orientation="portrait"] [hide="mobile,portrait"] {
    display: none !important;
}

body[device-type="Mobile"][orientation="landscape"] [hide="mobile,landscape"] {
    display: none !important;
}

body[device-type="Smartphone"][orientation="portrait"] [hide="smartphone,portrait"] {
    display: none !important;
}

body[device-type="Smartphone"][orientation="landscape"] [hide="smartphone,landscape"] {
    display: none !important;
}

body[device-type="Tablet"][orientation="portrait"] [hide="tablet,portrait"] {
    display: none !important;
}

body[device-type="Tablet"][orientation="landscape"] [hide="tablet,landscape"] {
    display: none !important;
}

body[device-type="Smartphone"][orientation="landscape"] .landscape-locker {
    background-color: black;
    background-image: url('https://grow-edu.pl/Resources/Advertisement/BlackBoard.jpg' );
    color: white;
    background-size: cover;
    background-position: center;
    font-family: 'Segoe Print';
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

body:not([device-type="Smartphone"][orientation="landscape"]) .landscape-locker {
    display: none !important;
}

/* LangSwitch/LangSwitch.css */

.lang-switch {
    --size: var(--font-line-height);
    --gap: 8px;
    --items: 4;
    cursor: pointer;
    position: relative;
    width: var(--size);
    height: var(--size);
}

.lang-switch .lang-switch-current {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 100px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: var(--size);
    height: var(--size);
    overflow: hidden;
}

.lang-switch[value="pl_PL"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/Poland.jpg' ); }
.lang-switch[value="en_EN"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/UK.jpg' ); }
.lang-switch[value="sl_SL"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/Slovenia.jpg' ); }
.lang-switch[value="no_NO"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/Norway.jpg' ); }
.lang-switch[value="es_ES"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/Spain.jpg' ); }

.lang-switch .lang-switch-options .lang-switch-option[value="pl_PL"] { --background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/Poland.jpg' ); }
.lang-switch .lang-switch-options .lang-switch-option[value="en_EN"] { --background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/UK.jpg' ); }
.lang-switch .lang-switch-options .lang-switch-option[value="sl_SL"] { --background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/Slovenia.jpg' ); }
.lang-switch .lang-switch-options .lang-switch-option[value="no_NO"] { --background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/Norway.jpg' ); }
.lang-switch .lang-switch-options .lang-switch-option[value="es_ES"] { --background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/Spain.jpg' ); }

.lang-switch.normal[value="pl_PL"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Lang/PolandNormal.png' ); }
.lang-switch.normal[value="en_EN"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Lang/UKNormal.png' ); }
.lang-switch.normal[value="sl_SL"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Lang/SloveniaNormal.png' ); }
.lang-switch.normal[value="no_NO"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Lang/NorwayNormal.png' ); }
.lang-switch.normal[value="es_ES"] .lang-switch-current { background-image: url('https://grow-edu.pl/Resources/Lang/SpainNormal.png' ); }

.lang-switch.normal .lang-switch-options .lang-switch-option[value="pl_PL"] { --background-image: url('https://grow-edu.pl/Resources/Lang/PolandNormal.png' ); }
.lang-switch.normal .lang-switch-options .lang-switch-option[value="en_EN"] { --background-image: url('https://grow-edu.pl/Resources/Lang/UKNormal.png' ); }
.lang-switch.normal .lang-switch-options .lang-switch-option[value="sl_SL"] { --background-image: url('https://grow-edu.pl/Resources/Lang/SloveniaNormal.png' ); }
.lang-switch.normal .lang-switch-options .lang-switch-option[value="no_NO"] { --background-image: url('https://grow-edu.pl/Resources/Lang/NorwayNormal.png' ); }
.lang-switch.normal .lang-switch-options .lang-switch-option[value="es_ES"] { --background-image: url('https://grow-edu.pl/Resources/Lang/SpainNormal.png' ); }

.lang-switch .lang-switch-options {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    position: absolute;
    opacity: 1;
    height: calc( var(--size) * var(--items) + var(--gap) * ( var(--items) - 1 ) );
    left: 0px;
    top: calc(100% + var(--gap));
    width: var(--size);
    transition: 0.4s height, 0.4s opacity;
    overflow: hidden;
}

.lang-switch:not(.active) .lang-switch-options {
    opacity: 0;
    height: 0px;
}

.lang-switch .lang-switch-options .lang-switch-option {
    flex-shrink: 0;
    background-color: #7f7f7f;
    border-radius: 100px;
    position: relative;
    width: var(--size);
    height: var(--size);
    overflow: hidden;
}

.lang-switch .lang-switch-options .lang-switch-option::after {
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.lang-switch .lang-switch-options .lang-switch-option.disabled {
    opacity: 1 !important;
}

.lang-switch .lang-switch-options .lang-switch-option.disabled::after {
    opacity: 0.25 !important;
}

/* Grow.css */

:root {
    --width: 100%;
    --height: 100%;
}

html {
    position: fixed;
    left: 0px;
    top: 0px;
    width: var(--width);
    height: var(--height);
    overflow: hidden;
}

body {
    position: fixed;
    left: 0px;
    top: 0px;
    width: var(--width);
    height: var(--height);
    overflow: hidden;
}

input::placeholder {
    color: inherit !important;
    opacity: 0.5 !important;
}

b, strong {
    font-weight: bold;
}

/* style.css */

html {
    font-size: var(--paragraph-font-size);
    line-height: var(--paragraph-line-height);
}

body {}

.text-uppercase {
    text-transform: uppercase;
}

.text-overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.text-overflow-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-overflow-3 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text-overflow-4 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.text-overflow-5 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.text-overflow-6 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.padding-3 {
    padding: 3px;
}

.padding-4 {
    padding: 4px;
}

.padding-6 {
    padding: 6px;
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-10-20 {
    padding: 10px 20px;
}

.padding-20-10 {
    padding: 20px 10px;
}

.padding-20 {
    padding: 30px;
}

.padding-30 {
    padding: 30px;
}

.padding-horizontal {
    padding: 0px 10px;
}

.home-courses {
    width: 100%;
    /*height: 100%;*/
}

.home-courses-3-2 {
    width: 100%;
    height: calc(100% / 3 * 2);
    border-bottom: 1px solid rgb(168, 168, 169);
}

.home-courses-3-1 {
    width: 100%;
    height: calc(100% / 3);
}

.column-1 {
    width: 100%;
}

.column-2 {
    width: calc(100% / 2);
}

.column-3 {
    width: calc(100% / 3);
}

.column-3-2 {
    width: calc(100% / 3 * 2);
}

.column-3-1-8 {
    width: calc(100% / 3 * 1.8);
}

.column-4 {
    width: calc(100% / 4);
}

.column-4-2 {
    width: calc(100% / 4 * 2);
}

.column-4-3 {
    width: calc(100% / 4 * 3);
}

.column-5 {
    width: calc(100% / 5);
}

.column-5-2 {
    width: calc(100% / 5 * 2);
}

.column-5-3 {
    width: calc(100% / 5 * 3);
}

.column-5-4 {
    width: calc(100% / 5 * 4);
}

.column-6 {
    width: calc(100% / 6);
}

.column-6-2 {
    width: calc(100% / 6 * 2);
}

.column-6-3 {
    width: calc(100% / 6 * 2);
}

.column-6-4 {
    width: calc(100% / 6 * 4);
}

.column-6-5 {
    width: calc(100% / 6 * 5);
}

.column-7 {
    width: calc(100% / 7);
}

.column-7-2 {
    width: calc(100% / 7 * 2);
}

.column-7-3 {
    width: calc(100% / 7 * 3);
}

.column-7-4 {
    width: calc(100% / 7 * 4);
}

.column-7-5 {
    width: calc(100% / 7 * 5);
}

.column-7-6 {
    width: calc(100% / 7 * 6);
}

.column-8 {
    width: calc(100% / 8);
}

.column-8-2 {
    width: calc(100% / 8 * 2);
}

.column-8-3 {
    width: calc(100% / 8 * 3);
}

.column-8-4 {
    width: calc(100% / 8 * 4);
}

.column-8-5 {
    width: calc(100% / 8 * 5);
}

.column-8-6 {
    width: calc(100% / 8 * 6);
}

.column-8-7 {
    width: calc(100% / 8 * 7);
}

.column-9 {
    width: calc(100% / 9);
}

.column-9-2 {
    width: calc(100% / 9 * 2);
}

.column-9-3 {
    width: calc(100% / 9 * 3);
}

.column-9-4 {
    width: calc(100% / 9 * 4);
}

.column-9-5 {
    width: calc(100% / 9 * 5);
}

.column-9-6 {
    width: calc(100% / 9 * 6);
}

.column-9-7 {
    width: calc(100% / 9 * 7);
}

.column-9-8 {
    width: calc(100% / 9 * 8);
}

.column-10 {
    width: calc(100% / 10);
}

.column-10-2 {
    width: calc(100% / 10 * 2);
}

.column-10-3 {
    width: calc(100% / 10 * 3);
}

.column-10-4 {
    width: calc(100% / 10 * 4);
}

.column-10-5 {
    width: calc(100% / 10 * 5);
}

.column-10-6 {
    width: calc(100% / 10 * 6);
}

.column-10-7 {
    width: calc(100% / 10 * 7);
}

.column-10-8 {
    width: calc(100% / 10 * 8);
}

.column-10-9 {
    width: calc(100% / 10 * 9);
}

.gap-4 span~span {
    margin-left: 4px;
}

/* css/form.css */

input {
    display: inline-block;
    outline: none !important;
    color: var(--third-color);
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-size);
    padding: var(--button-padding);
}

textarea {
    display: inline-block;
    outline: none !important;
    color: var(--third-color);
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-size);
    padding: var(--button-padding);
    resize: none !important;
}

select {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--primary-color-light);
    font-size: var(--paragraph-size);
    line-height: var(--title-size);
    padding: var(--button-padding);
}

.button-navigation {
    cursor: pointer;
    display: block;
    position: relative;
    transition: 0.2s opacity;
}

.button-navigation:hover {
    opacity: 0.5;
}

.button-navigation.active .button-navigation-content {
    transition: 0.4s background-color, 0.4s box-shadow, 0.4s color;
}

.button-navigation.active .button-navigation-content {
    background-color: rgb(110, 167, 50);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.125);
    color: white;
}

.button {
    cursor: pointer;
    display: inline-block;
    text-align: left;
    min-width: 32px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button-border {
    border: 1px solid rgb(111, 180, 0);
}

.button:hover {
    opacity: 0.5;
}

.button.button-half-color {
    opacity: 0.5;
}

.button.button-half-color:hover {
    opacity: 0.25;
}

.course-detail {
    border-bottom: 1px solid rgb(220, 146, 119);
}

.input {
    display: inline-block;
    background-color: var(--primary-color);
    border-radius: 1000px;
    border: none;
    vertical-align: top;
    line-height: var(--paragraph-size);
    padding: var(--button-padding);
    min-width: calc( var(--button-padding) * 2 + var(--paragraph-size));
    max-width: calc( 100% - var(--button-padding) * 2);
}

.form-output {
    font-size: var(--paragraph-size);
    line-height: var(--title-size);
    padding: var(--button-padding);
}

.form-input {}

.border-arrow {
    --border-width: 20px;
    margin-bottom: 10px;
    line-height: 0px;
    width: 100%;
    padding: 10px var(--border-width);
    background-image: url(https://resources.growbp.pl/border/TopLeft.png), url(https://resources.growbp.pl/border/BottomLeft.png), url(https://resources.growbp.pl/border/TopRight.png), url(https://resources.growbp.pl/border/BottomRight.png), url(https://resources.growbp.pl/border/Top.png), url(https://resources.growbp.pl/border/Bottom.png), url(https://resources.growbp.pl/border/Left.png), url(https://resources.growbp.pl/border/Right.png);
    background-position: left top, left bottom, right top, right bottom, calc( var(--border-width) - 2px) top, calc( var(--border-width) - 2px) bottom, left calc( var(--border-width) - 2px), right calc( var(--border-width) - 2px);
    background-size: var(--border-width) var(--border-width), var(--border-width) var(--border-width), var(--border-width) var(--border-width), var(--border-width) var(--border-width), calc( 100% - ( var(--border-width) * 2) + 4px) var(--border-width), calc( 100% - ( var(--border-width) * 2) + 4px) var(--border-width), var(--border-width) calc( 100% - ( var(--border-width) * 2) + 4px), var(--border-width) calc( 100% - ( var(--border-width) * 2) + 4px);
    background-repeat: no-repeat;
}

.login-input {
    border-left: 1px solid rgb(129, 129, 129);
    border-bottom: none;
    background-color: rgb(254, 254, 254) !important;
    /*color: white !important;*/
    box-shadow: 0px 0px 1000px rgb(254, 254, 254) inset;
}

i.login-icon {
    font-size: 25px;
    color: rgb(129, 129, 129);
}

.logo-grow-learn img {
    box-shadow: none;
    width: 80%;
    padding-bottom: 5%;
}

.logo-grow-learn {
    width: 100%;
}

.button-login {
    background-color: rgb(254, 254, 254);
    color: rgb(111, 180, 0);
    text-shadow: none;
    text-decoration: none;
    text-transform: inherit;
    border: 2px solid rgb(111, 180, 0);
    border-radius: 10px;
    font-size: 16px;
    padding: 16px 26px;
    margin: 0;
}

.button-login:hover {
    background-color: rgb(254, 254, 254);
    color: rgba(111, 180, 0, 0.7);
    border: 2px solid rgba(111, 180, 0, 0.7);
}

.remember {
    font-size: 16px;
    padding: 16px 8px;
    color: rgb(129, 129, 129);
}

/* css/login.css */

.login-page {

}

.login-page-content {
    background-color: rgb(255, 255, 255);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.form-login {
    position: absolute;
    top: 10%;
    right: 10%;
    left: 60%;
}

@media screen and (max-width: 1080px) {

    .form-login {
        left: 10%;
        top: 10%;
        right: 10%;
    }
    
}

/* css/site.css */

:root {
    --navigation-padding: var(--content-padding);
    --navigation-line-height: var(--header-size);
    --navigation-height: calc(var(--navigation-padding) * 2 + var(--navigation-line-height));
}

#content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: 0.4s width;
    z-index: 0;
}

#content-extend {
    width: 100%;
    height: 100%;
}

.background {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.login-column {
    /*background-color: rgb(255, 255, 255);*/
    position: absolute;
    right: 0px;
    top: 0px;
    max-width: 720px;
    height: 100%;
}

.avatar-home-horizontal {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(110, 167, 50);
    margin: 0 auto;
    color: white;
    font-size: 12px;
    text-align: center;
}

.avatar-home {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(110, 167, 50);
    margin: 0 auto;
    font-size: 50px;
    line-height: 100px;
    color: white;
    margin-top: 5%;
}

.menu-left-item {
    margin: 8px 0 8px 18px;
    text-align: left;
    color: rgb(168, 168, 169);
}

p.menu-left-item i {
    /* margin-right: 10px; */
}

.notification-button-display-list {
    color: rgb(168, 168, 169);
}

.notification-button-display-list>.shows-items {
    background-color: rgb(255, 236, 64);
    color: rgb(0, 0, 0);
    border-radius: 100%;
    font-size: 10px;
    margin: 0 auto;
    text-align: center;
    width: 16px;
    height: 16px;
}

.menu-personal-show-notification>.shows-items {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgb(255, 236, 64);
    margin: 0 auto;
    font-size: 10px;
    color: rgb(0, 0, 0);
    position: absolute;
    top: 10px;
    text-align: center;
    left: 22px;
}

.personal-item {
    position: relative;
    bottom: 20%;
}

.icon.icon-bell {
    cursor: pointer;
}

.show-notification {
    position: absolute;
    top: -66px;
    left: 47px;
    width: 400px;
    min-height: 150px;
    font-size: 12px;
    border: 1px solid rgb(179, 179, 179);
    background: white;
    display: none;
}

.show-notification::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 82px;
    transform: translateY(-30%);
    border-width: 7px;
    border-style: solid;
    border-color: transparent;
    border-right: 15px solid rgb(179, 179, 179);
}

.item-notification {
    margin: 8px;
    padding: 8px;
    background: rgb(236, 236, 236);
    color: black;
}

.item-title {
    text-transform: uppercase;
    font-weight: bold;
    float: left;
}

.item-content {
    padding: 5px 0;
    font-size: 10px;
    text-align: justify;
}

.navigation-footer {
    color: rgb(168, 168, 169);
}

.bulb img {
    max-width: 135px;
}

.icon-times-all {
    position: relative;
    left: 45%;
    top: 4px;
}

.icon-times-item {
    position: absolute;
    font-size: 10px;
    right: 18px;
}

.notification-menu-personal:not(:hover) .personal-notification {
    display: none;
}

.notification-menu-personal {
    position: relative;
    display: inline-block;
}

.personal-notification {
    --arrow-size: 10px;
    border: 1px solid rgb(179, 179, 179);
    background: rgb(255, 255, 255);
    right: 0px;
    color: rgb(168, 168, 169);
    display: inline-block;
    position: absolute;
    padding: 10px;
    width: 400px;
    top: calc(100% + var(--arrow-size) + 5px);
}

.personal-notification::before {
    content: '';
    border-width: var(--arrow-size);
    border-style: solid;
    border-color: transparent;
    border-bottom: var(--arrow-size) solid rgb(179, 179, 179);
    position: absolute;
    right: 11px;
    bottom: 100%;
}

.personal-item-notification {
    margin: 8px;
    padding: 8px;
    background: rgb(236, 236, 236);
    color: black;
}

.menu-horizontal {
    z-index: 1;
}

.menu-horizontal .avatar {
    width: 16px;
    height: 16px;
}

.user-session-timer {
    width: 450px;
    height: 250px;
    position: relative;
    text-align: center;
    padding: 0px;
}

.user-session-text-style {
    width: 50%;
    height: auto;
    margin: 0 auto;
    padding-top: 80px;
    position: relative;
}

.position1 {
    left: 27.69%;
    top: 17.11%;
    width: 19.42%;
    height: 24.22%;
}

.position2 {
    left: 47.12%;
    top: 17.11%;
    width: 19.42%;
    height: 24.22%;
}

.position3 {
    left: 66.54%;
    top: 17.11%;
    width: 19.42%;
    height: 24.22%;
}

.position4 {
    left: 0%;
    top: 41.33%;
    width: 19.42%;
    height: 24.22%;
}

.position5 {
    left: 47.12%;
    top: 41.55%;
    width: 19.42%;
    height: 24.22%;
}

.position6 {
    left: 61.15%;
    top: 58.59%;
    width: 19.42%;
    height: 24.22%;
}

.position7 {
    left: 80.58%;
    top: 34.37%;
    width: 19.42%;
    height: 24.22%;
}

.position8 {
    left: 27.69%;
    top: 41.55%;
    width: 19.42%;
    height: 24.22%;
}

.position9 {
    left: 13.91%;
    top: 58.59%;
    width: 19.42%;
    height: 24.22%;
}

.position10 {
    left: 0%;
    top: 76.30%;
    width: 19.42%;
    height: 24.22%;
}

.position11 {
    left: 27.69%;
    top: 76.30%;
    width: 19.42%;
    height: 24.22%;
}

.position12 {
    left: 13.91%;
    top: 0%;
    width: 19.42%;
    height: 24.22%;
}

.position13 {
    left: 80.58%;
    top: 0%;
    width: 19.42%;
    height: 24.22%;
}

/* Login/Login.page.mobile.tablet.css */

body[device="Smartphone"] .login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-header .login-button-page {
    font-size: 20px;
    margin: 8px 0px;
} 

body[device="Tablet"] .login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-header .login-button-page {
    font-size: 24px;
}

body[device="Tablet"][orientation="portrait"] .login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-header .login-button-page {
    font-size: 24px;
    margin: 16px 0px;
} 

/* Login/LoginPage.css */

.login-page-header {
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    position: relative;
    z-index: 1;
}

.login-page-header-content {
    /* margin: auto;
    max-width: 1920px; */
}

.login-page-main {
    position: relative;
    z-index: 0;
}

.login-page-main-content {
    font-family: 'Tekton Pro';
    /* margin: auto;
    max-width: 1920px; */
}

.login-form {
    background-color: rgb(255, 255, 255);
    color: rgb(127, 127, 127);
    box-shadow: 0px 0px 15px lightgray;
    border-radius: 0px 0px var(--base-padding) var(--base-padding);
    display: none;
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translateY(-100%);
    width: 450px;
    overflow: hidden;
    transition: 0.2s transform;
}

.login-form.active {
    transform: translateY(0%);
}

.login-form .login-form-header {}

.login-form .login-form-button-login {
    border: 1px solid rgb(110, 167, 50);
    color: rgb(110, 167, 50);
    cursor: pointer;
    width: 140px;
    height: 50px;
    transition: 0.2s background-color;
}

.login-form .login-form-button-login:hover {
    background-color: rgb(110, 167, 50);
    color: rgb(255, 255, 255);
}

.login-form .login-form-footer {
    background-color: rgb(239, 239, 239);
    color: white;
    display: block;
    transition: 0.2s background-color;
}

.login-form .login-form-footer:hover {
    background-color: rgb(255, 255, 255);
}

.login-form .login-form-logo {
    background-image: url('https://grow-edu.pl/Resources/Advertisement/grow.edu.png' );
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    width: 150px;
    height: 50px;
}

.login-form .login-form-footer-logo {
    background-image: url('https://resources.growbp.pl/logos/grow.talk.png' );
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    width: 150px;
    height: 50px;
}

.login-form .login-form-input-border {
    background-image: url(https://resources.growbp.pl/border/TopLeft-thin.png), url(https://resources.growbp.pl/border/BottomLeft-thin.png), url(https://resources.growbp.pl/border/TopRight-thin.png), url(https://resources.growbp.pl/border/BottomRight-thin.png), url(https://resources.growbp.pl/border/Top-thin.png), url(https://resources.growbp.pl/border/Bottom-thin.png), url(https://resources.growbp.pl/border/Left-thin-small.png), url(https://resources.growbp.pl/border/Right-thin-small.png);
    background-position: left top, left bottom, right top, right bottom, calc(20px - 2px) top, calc(20px - 2px) bottom, left calc(20px - 2px), right calc(20px - 2px);
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, calc(100% - (20px * 2) + 2px) 20px, calc(100% - (20px * 2) + 2px) 20px, 20px calc(100% - (20px * 1) + -18px), 20px calc(100% - (20px * 2) + 2px);
    background-repeat: no-repeat;
    border: 0 !important;
    padding: 3px;
}

.login-form .login-form-input-border .login-form-input-controller {
    display: flex;
    align-items: center;
    height: 36px;
}

.login-form .login-form-input-border .login-form-input-controller .login-form-input-icon {
    border-right: 1px solid rgb(127, 127, 127);
    text-align: center;
    width: 50px;
    text-transform: lowercase;
}

.login-form .login-form-input-border .login-form-input-controller .login-form-input {
    filter: grayscale(100%) brightness(110%);
    background-clip: content-box;
    -webkit-background-clip: content-box;
    flex-grow: 1;
    height: 36px;
    width: 0%;
}

.form-login input {
    filter: grayscale(100%) brightness(110%);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    transition: background-color 5000s 0s !important;
}

body[mobile="true"] .grow-talk-login {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Login/LoginPageMobile.css */

.login-page-mobile .login-page-mobile-sidebar {
    background-color: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur(8px);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: 0.4s opacity;
}

.login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-content {
    background-color: black;
    background-image: url('https://grow-edu.pl/Resources/BlackBoard.jpg' );
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: 0.4s transform;
}

body[device="Tablet"] .login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-content {
    max-width: 450px;
}

.login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-content .login-page-mobile-sidebar-spacer {
    flex-grow: 1;
    height: 0%;
}

.login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-content .login-page-mobile-sidebar-separator {
    background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/line.png' );
    background-size: 100% 100%;
    background-position: center;
    margin: var(--base-padding) auto;
    width: 90%;
    height: 8px;
    min-height: 8px;
}

.login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-content .login-page-mobile-sidebar-header {
    margin: var(--base-padding) 0px;
    width: 100%;
}

.login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-content .login-page-mobile-sidebar-main {
    margin: var(--base-padding) 0px;
    width: 100%;
}

.login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-content .login-page-mobile-sidebar-footer {
    margin: var(--base-padding) 0px;
    width: 100%;
}

.login-page-mobile:not(.active-sidebar) .login-page-mobile-sidebar {
    opacity: 0 !important;
    pointer-events: none !important;
}

.login-page-mobile:not(.active-sidebar) .login-page-mobile-sidebar .login-page-mobile-sidebar-content {
    transform: translateX(100%);
}

.login-page-mobile.active-sidebar .login-page-mobile-button-menu .icon::before {
    content: '\0022';
}

.login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-button-form {
    display: none;
}

.login-page-mobile .login-page-mobile-sidebar form[name="Login"] .form-content input {
    color: white !important;
}

@media (max-height: 700px) {

    .login-page-mobile .login-page-mobile-sidebar form[name="Login"] {
        display: flex;
        align-items: flex-end;
        justify-content: stretch;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        transition: 0.4s opacity;
    }

    .login-page-mobile .login-page-mobile-sidebar form[name="Login"] .form-content {
        background-color: white;
        background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/white-paper-background.jpg' );
        background-size: cover;
        background-position: center;
        border: 4px solid #f7df00;
        border-bottom: 0px !important;
        border-radius: 16px 16px 0px 0px;
        width: 100%;
        height: 304px;
        transition: 0.4s transform;
    }

    .login-page-mobile .login-page-mobile-sidebar form[name="Login"] .form-content input {
        color: #7f7f7f !important;
    }

    .login-page-mobile .login-page-mobile-sidebar form[name="Login"] .form-content button {
        background-color: white;
        background-image: url('https://grow-edu.pl/Resources/Advertisement/Other/backgound-button.jpg' );
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        font-family: 'Segoe Print' !important;
        -moz-border-top-colors: #7f7f7f;
        --itemFontSize: 12px;
        --itemHeight: 45px;
        --itemBorderWidth: 2px !important;
        --itemInnerHeight: calc( var(--itemHeight) - var(--itemBorderWidth) * 2 );
        --itemPadding: calc( ( var(--itemInnerHeight) - var(--itemLineHeight) ) / 2 );
        --borderColor: #f7df00 !important;
        --color: black !important;
        width: 155px;
    }

    .login-page-mobile .login-page-mobile-sidebar:not([form="true"]) form[name="Login"] {
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .login-page-mobile .login-page-mobile-sidebar:not([form="true"]) form[name="Login"] .form-content {
        transform: translateY(100%) !important;
    }

    .login-page-mobile .login-page-mobile-sidebar .login-page-mobile-sidebar-button-form {
        display: block !important;
    }

}

/* Login/LoginPageContent/Style.css */

@charset "UTF-8";

@font-face {
  src: url("https://resources.growbp.pl/fonts/Tekton%20Pro/TektonPro-Bold.otf");
  font-family: "Tekton Pro";
  font-weight: 400;
  font-style: normal;
}

@font-face {
  src: url("https://resources.growbp.pl/fonts/Tekton%20Pro/TektonPro-BoldCond.otf");
  src-font-family: "Tekton Pro";
  font-weight: 100;
  font-style: normal;
}

@font-face {
  src: url("https://resources.growbp.pl/fonts/Tekton%20Pro/TektonPro-BoldExt.otf");
  src-font-family: "Tekton Pro";
  font-weight: bold;
  font-style: normal;
}

@font-face {
  src: url("https://resources.growbp.pl/fonts/Tekton%20Pro/TektonPro-BoldObl.otf");
  src-font-family: "Tekton Pro";
  font-weight: 400;
  font-style: italic, oblique;
}

@font-face {
  src: url('https://resources.growbp.pl/fonts/Century%20Gothic/GOTHIC.TTF' );
  font-family: 'Century Gothic';
}

@font-face {
  src: url('https://resources.growbp.pl/fonts/Segoe%20Print/segoepr.ttf' );
  font-family: 'Segoe Print';
}

@font-face {
  src: url('https://resources.growbp.pl/fonts/Elementarz/Elementarz2.ttf' );
  font-family: 'ElementarzDwa';
}

.login-page-header-content .languages {
  display: flex;
  margin-left: 12px;
}

/* default html */

.login-page-main-content,
.login-page-main-content * {
  line-height: 1.25;
  /* font-family: 'Century Gothic'; */
}

.login-page-main-content .welcome h1 {
  font-size: clamp(24px, 2.6vw, 48px) !important;
  font-family: 'Century Gothic' !important;
  font-weight: 400 !important;
}

.login-page-main-content h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.login-page-main-content .h2-home {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.login-page-main-content .h3-home {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.login-page-main-content h4 {
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.login-page-main-content .page {}

/*  old   */

/* .main-item h1{
  font-size: 20px;
} */

.login-page-main-content {
  position: relative;
  overflow: hidden;
  font-family: 'Century Gothic';
}

.login-page-main-content .accessibility {
  position: fixed;
  width: 3rem;
  height: 3rem;
  top: 10%;
  left: 15px;
  z-index: 100;
  cursor: pointer;
}

.login-page-main-content .buttons-wrapper {
  height: 80%;
  top: 10%;
  right: 15px;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  z-index: 99;
}

.login-page-main-content .demo, .register {
  transition: .3s;
  cursor: pointer;
}

.login-page-main-content .register-image {
  background: url('https://resources.growbp.pl/grow.edu/svg/registry-icon.svg' );
  background-repeat: no-repeat;
  background-position: center;
  width: 50px;
  height: 50px;
  transition: 0.4s transform, 0.4s background-color;
  animation: 1.3s scale 5.8s;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.login-page-main-content .demo-image {
  position: relative;
  /* background: url('https://resources.growbp.pl/grow.edu/demo-version.png' ); */
  background: url(https://resources.growbp.pl/grow.edu/svg/user-demo-icon.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain !important;
  width: 80px;
  height: auto;
  transition: 0.4s transform, background 0s;
}

.login-page-main-content .demo-cloud {
  content: 'przetestuj teraz';
  display: flex;
  background: url(https://resources.growbp.pl/grow.edu/svg/cloud-demo-version.svg) center/100% 100% no-repeat;
  padding: 25px 15px;
  transform: translate(25%, -105%);
  /* transform: translateY(-50%); */
  order: -1;
  color: #f1f76f;
  text-align: center;
  justify-content: center;
  align-items: center;
  transition: .3s;
}

.login-page-main-content .register-image, .login-page-main-content .demo-image {
  background-size: contain;
}

.login-page-main-content .mailform-image {
  background: url('https://resources.growbp.pl/grow.edu/svg/mail.svg' );
  background-repeat: no-repeat;
  background-position: center;
  width: 60px;
  height: 50px;
  transition: 0.4s transform, background 0s;
}

.login-page-main-content .demo:hover, .register:hover, .bar:hover {
  transform: scale(1.1);
}

.login-page-main-content .demo {
  position: absolute;
  top: 66%;
  display: flex;
  z-index: 100;
  margin-bottom: 100px;
  animation: 1.3s scale 7.1s;
}

.login-page-main-content .register {
  z-index: 100;
  margin-bottom: 100px;
}

.login-page .buttons {
  display: flex;
  align-items: center;
}

.login-page .buttons span {
  cursor: pointer;
}

.login-page .buttons img {
  width: 1.5rem !important;
  margin: 0 5px;
  object-fit: contain;
  transition: .3s;
  cursor: pointer;
}

.login-page .british {
  filter: grayscale(1) opacity(50%);
}

.login-page .british:hover {
  filter: grayscale(0) opacity(100%);
}

.login-page-main-content .sections {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.login-page-main-content .sections::-webkit-scrollbar {
  display: none;
}

.sections section {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
}

.login-page-main-content .welcome {
  /* display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end; */
  align-items: flex-start;
}

.login-page-main-content .welcome .section-wrapper {
  display: flex;
  transition: scale .3s;
}

.login-page-main-content .welcome .wrapper-text {
  display: flex;
  align-items: flex-start;
  flex-flow: column nowrap;
  justify-content: center;
  width: 50%;
  margin-left: 5%;
  color: white;
}

.login-page-main-content .welcome .wrapper-text h1 {
  font-size: 48px;
  margin: 0;
  opacity: 0;
  animation: wrapper-h1 1s forwards 1s;
}

.login-page-main-content .welcome .wrapper-text .h2-home {
  color: white;
  font-size: 22px;
  margin: 30px 0;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: justify;
  font-family: 'Century Gothic' !important;
  opacity: 0;
  animation: wrapper-h1 1s forwards 1s;
  width: 80%;
}

@keyframes wrapper-h1 {
  form {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.home-sections .wrapper-text, .image {
  z-index: 1;
}

.home-sections .slide .wrapper-text {
  display: flex;
  align-items: flex-start;
  flex-flow: column nowrap;
  justify-content: center;
  flex: 1;
  width: 100%;
  height: 100%;
  margin-left: 5%;
  color: white;
}

.home-sections .wrapper-slide-flex {
  display: none;
  top: 30%;
  right: 0%;
  height: 70%;
  width: 100%;
  z-index: 5;
}

.home-sections .wrapper-slide-flex.active {
  display: block !important;
}

.home-sections .slide .wrapper-text h1 {
  display: none;
}

.home-sections .slide .wrapper-text .h2-home {
  color: white;
  font-size: clamp(10px, 1.5em, 36px);
  margin: 30px 0;
  font-weight: 400;
  line-height: 1.8;
  text-align: left;
  font-family: 'Segoe Print';
}

.login-page-main-content .wrapper-text button {
  outline: none;
  border: none;
  background: none;
  padding: 12px 16px;
  border-radius: 15px;
  font-size: 24px;
  margin-top: 20px;
  border: solid 2px white;
  color: #f7df00;
  font-family: 'Century Gothic' !important;
  cursor: pointer;
  transition: .3s;
}

.login-page-main-content .wrapper-text button:hover {
  background: white;
  color: black;
}

.login-page-main-content .wrapper-notes {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding-bottom: 20px;
  z-index: 100;
  width: 90%;
}

.login-page-main-content .wrapper-notes img {
  height: 2.5rem;
  width: auto;
}

.login-page-main-content .wrapper-notes .note-name {
  color: #86696e;
  text-align: left;
  flex: 1;
  font-size: var(--sup-header-font-size);
  padding-right: 5px;
}

.login-page-main-content .note hr {
  display: block !important;
  height: 30% !important;
  width: 1px !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.2) !important;
  margin: 20px !important;
}

hr {
  display: block;
  height: 30%;
  width: 1px;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  margin: 20px;
}

.login-page-main-content .note {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30px 20px 0 35px;
  width: 390px;
  flex: 1;
  height: 210px;
  font-family: 'Segoe Print' !important;
  font-size: clamp(4px, 1vw, 16px);
  transition: .3s;
  background-image: url('https://grow-edu.pl/Resources/Advertisement/stickynotes.png' );
  cursor: pointer;
  filter: brightness(90%);
}

.login-page-main-content .note:hover {
  transform: translateY(-3%);
  filter: brightness(100%);
}

.login-page-main-content .note:nth-child(1) {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.login-page-main-content .note:nth-child(2) {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.login-page-main-content .note:nth-child(3) {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.login-page-main-content .note:nth-child(4) {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.login-page-main-content .note.active {
  transform: rotate(5deg);
  filter: brightness(100%);
}

.login-page-main-content .benefits * {
  /* display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  overflow: hidden; */
}

.login-page-main-content .benefits .wrapper-text, .benefits .image {
  width: 100%;
  margin: 0;
  flex: none;
}

.login-page-main-content .image img {
  /* height: 80%;
  width: 80%; */
  object-fit: contain;
}

.login-page-main-content .slider-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.home-sections .benefits .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  z-index: 2;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: .3s;
  transform-origin: center center;
  z-index: 10;
}

.home-sections .benefits .arrow:hover {
  transform: translateY(-50%) scale(1.1);
}

.home-sections .benefits .arrow-left {
  left: 15px;
}

.home-sections .benefits .arrow-left:hover {
  filter: drop-shadow(4px 4px 4px black);
}

.home-sections .benefits .arrow-right {
  right: 15px;
}

.home-sections .benefits .arrow-right:hover {
  filter: drop-shadow(-4px 4px 4px black);
}

.home-sections .benefits .slide:not(.active) {
  display: none;
}

.login-page-main-content .dots {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  bottom: 5%;
  z-index: 9;
}

.login-page-main-content .dot {
  position: relative;
  margin: 20px;
  width: 15px;
  height: 15px;
  border: 1px solid white;
  border-radius: 50%;
  cursor: pointer;
  transition: .3s;
  z-index: 9;
}

.login-page-main-content .dot.active {
  background: white;
}

/* .login-page-main-content .process {
  display: flex;
  justify-content: center;
  align-items: center;
} */
.login-page-main-content .process .section-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.login-page-main-content .wrapper-process {
  width: 90%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}

.login-page-main-content .wrapper-process .image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sections-arrows {
  position: fixed;
  left: 5px;
  bottom: 0;
  width: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 60px;
}

.sections-arrows .arrow {
  width: 40px;
  height: 40px;
  background: url(https://grow-edu.pl/Resources/Advertisement/arrow-left-chalk.png) no-repeat;
  background-size: contain;
  background-position: center;
  transition: .3s;
  cursor: pointer;
}

.sections-arrows .arrow-up {
  transform: rotate(90deg);
}

.sections-arrows .arrow-bottom {
  transform: rotate(-90deg);
}

.sections-arrows .arrow-up:hover {
  transform: scale(1.15)rotate(90deg);
}

.sections-arrows .arrow-bottom:hover {
  transform: scale(1.15) rotate(-90deg);
}

.login-page-main-content .wrapper-process .image *:not(.title) {
  opacity: 0;
}

.wrapper-process .image * {
  position: absolute;
  line-height: 1.4 !important;
  transition: .5s;
}

.wrapper-process .title {
  position: absolute;
  width: 100%;
  height: auto;
  width: 100%;
  text-align: center;
  top: 33px;
  font-family: 'ElementarzDwa';
  font-style: normal;
  /* font-weight: bold; */
  font-size: 46px !important;
  line-height: 60px;

  color: #FFFFFF;
}

.login-page-content .wrapper-process .text-1 {
  position: absolute;
  width: 340px;
  height: 147px;
  left: 0px;
  top: 420px;

  font-family: 'Segoe Print';
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  line-height: 49px;
  text-align: center;

  color: #f1f76f;
}

.login-page-content .wrapper-process .text-2 {
  position: absolute;
  width: 274px;
  height: 108px;
  left: 330px;
  top: 171px;

  font-family: Segoe Print;
  font-style: normal;
  font-weight: bold;
  font-size: var(--sup-title-font-size);
  line-height: 170%;
  /* or 36px */

  text-align: center;

  color: #85D9FE;
}

.login-page-content .wrapper-process .text-3 {
  position: absolute;
  width: 346px;
  height: 108px;
  left: 676px;
  top: 131px;

  font-family: Segoe Print;
  font-style: normal;
  font-weight: bold;
  font-size: var(--sup-title-font-size);
  line-height: 170%;
  /* or 36px */

  text-align: center;

  color: #85D9FE;
}

.login-page-content .wrapper-process .text-4 {
  position: absolute;
  width: 326px;
  height: 72px;
  left: 1145px;
  top: 236px;

  font-family: Segoe Print;
  font-style: normal;
  font-weight: bold;
  font-size: var(--sup-title-font-size);
  line-height: 170%;
  /* or 36px */
  color: #85D9FE;
}

.login-page-content .wrapper-process .text-5 {
  position: absolute;
  width: 397px;
  height: 108px;
  left: 933px;
  top: 505px;

  font-family: Segoe Print;
  font-style: normal;
  font-weight: bold;
  font-size: var(--sup-title-font-size);
  line-height: 170%;
  /* or 36px */

  text-align: center;

  color: #85D9FE;
}

.login-page-content .wrapper-process .arrow-1 {
  width: 106.8px;
  height: 140px;
  background: url(https://resources.growbp.pl/grow.edu/svg/Process/Arrow-one.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 223px;
  top: 254px;
}

.login-page-content .wrapper-process .arrow-2 {
  width: 79.99px;
  height: 32.12px;
  background: url(https://resources.growbp.pl/grow.edu/svg/Process/Arrow-two.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 604px;
  top: 175px;
}

.login-page-content .wrapper-process .arrow-3 {
  width: 125px;
  height: 51.13px;
  background: url(https://resources.growbp.pl/grow.edu/svg/Process/Arrow-three.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 1007px;
  top: 166px;
}

.login-page-content .wrapper-process .arrow-4 {
  width: 38px;
  height: 128.12px;
  background: url(https://resources.growbp.pl/grow.edu/svg/Process/Arrow-four.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 1183px;
  top: 356px;
}

.login-page-content .wrapper-process .circle {
  transition: .9s;
}

.login-page-content .wrapper-process .circle:nth-child(even) {
  animation-direction: reverse;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-special {
  from {
    transform: rotate(9.82deg);
  }

  to {
    transform: rotate(369.82deg);
  }
}

.login-page-content .wrapper-process .circle-1 {
  width: 231px;
  height: 230.94px;
  background: url('https://grow-edu.pl/Resources/Advertisement/CogYellow.png') no-repeat;
  background-size: 100%;
  position: absolute;
  left: 351px;
  top: 354px;
}

.login-page-content .wrapper-process .circle-1 img {
  width: 69.95px !important;
  height: 69.16px !important;
  position: absolute;
  left: 432px;
  top: 421px;
}

.login-page-content .wrapper-process .circle-2 {
  width: 155.01px;
  height: 155.12px;
  background: url(https://resources.growbp.pl/grow.edu/svg/Process/CogBorder.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 554px;
  top: 279px;
}

.login-page-content .wrapper-process .circle-2 img {
  width: 57.27px !important;
  height: 58px !important;
  position: absolute;
  left: 603px;
  top: 327px;
}

.login-page-content .wrapper-process .circle-3 {
  width: 165.04px;
  height: 165.16px;
  background: url(https://resources.growbp.pl/grow.edu/svg/Process/CogBorder.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 696.18px;
  top: 330.13px;

  transform: rotate(9.82deg);
}

.login-page-content .wrapper-process .circle-3 img {
  width: 39.27px !important;
  height: 67.01px !important;
  position: absolute;
  left: 759px;
  top: 394px;

  transform: rotate(-9.82deg);
  animation: rotate-special 5s linear infinite;
}

.login-page-content .wrapper-process .circle-4 {
  width: 128.02px !important;
  height: 128px !important;
  background: url(https://resources.growbp.pl/grow.edu/svg/Process/CogWhite.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 840px;
  top: 419px;
}

.login-page-content .wrapper-process .circle-4 img {
  width: 52px !important;
  height: 28.65px !important;
  position: absolute;
  left: 878px;
  top: 467px;
  animation-direction: reverse;
}

.login-page-content .wrapper-process .circle-5 {
  width: 155.99px;
  height: 156px;
  background: url('https://grow-edu.pl/Resources/Advertisement/CogBlue.png') no-repeat;
  background-size: 100%;
  position: absolute;
  left: 878px;
  top: 273px;
}

.login-page-content .wrapper-process .circle-5 img {
  width: 67.17px !important;
}

.login-page-content .wrapper-process .img {
  transition: .9s;
}

.img-1 {
  width: 69.95px;
  height: 69.16px;
  position: absolute;
  left: 432px;
  top: 434px;
}

.img-2 {
  width: 57.27px;
  height: 58px;
  position: absolute;
  left: 603px;
  top: 327px;
}

.img-3 {
  width: 39.27px;
  height: 67.01px;
  position: absolute;
  left: 762px;
  top: 388px;
}

.img-4 {
  width: 52px;
  height: 28.65px;
  position: absolute;
  left: 878px;
  top: 467px;
}

.img-5 {
  width: 67.17px;
  height: 70px;
  position: absolute;
  left: 922px;
  top: 313px;
}

.login-page-content .wrapper-process img {
  /* width: 14px; */
}

.login-page-main-content .elements {
  position: absolute;
  width: 100%;
  height: 100%;
}

.login-page-main-content .elements h1 {
  position: absolute;
  font-size: 36px;
  color: white;
  left: 0%;
  top: 15%;
  font-family: 'Segoe Print' !important;
}

.login-page-main-content .element {
  cursor: pointer;
  transform-origin: left bottom;
  transition: .3s;
  filter: drop-shadow(0 0 8px black) grayscale(100%);
}

.login-page-main-content .element img {
  width: 100%;
}

.login-page-main-content .element.active {
  transform: scale(1.1) translate(-1.5%);
  filter: drop-shadow(0 0 8px black);
}

.login-page-main-content .element.active path:not(:first-child) {
  transition: .3s;
  fill: #6EA732;
}

.login-page-main-content .wrapper-wrapper {
  position: relative;
  width: 35%;
}

.login-page-main-content .wrapper-slider {
  position: relative;
  display: flex;
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 10px;
  background-image: url('tło-box.png' );
  background-size: 100% 100%;
  padding-bottom: 25px;
}

.login-page-main-content .wrapper-slider::-webkit-scrollbar {
  display: none;
}

.login-page-main-content .wrapper-flex {
  position: relative;
  top: 0;
  left: 0;
  display: inline-flex;
  min-width: 100%;
  scroll-snap-align: start;
  opacity: 0;
  transition: .3s;
}

.login-page-main-content .wrapper-flex-active {
  opacity: 1;
}

.login-page-main-content .wrapper-slide {
  padding: 50px 50px;
}

.login-page-main-content .wrapper-slide h1 {
  padding: 20px 0 40px 0;
  font-size: 36px;
}

.login-page-main-content .wrapper-slide p {
  font-size: 24px;
}

.login-page-main-content .wrapper-flex-active {
  z-index: 1;
}

.login-page-main-content .contact {
  position: fixed;
  bottom: 0;
  right: 6%;
  width: 400px;
  height: auto;
  max-height: 0px;
  z-index: 1000;
  overflow: hidden;
  border-top: 0px solid #f7df00;
  border-left: 0px solid #f7df00;
  border-right: 0px solid #f7df00;
  border-radius: 10px 10px 0 0;
  transition: .3s;
}

.login-page-main-content .contact.active {
  border-top: 4px solid #f7df00;
  border-left: 4px solid #f7df00;
  border-right: 4px solid #f7df00;
}

.login-page-main-content .bar {
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--sup-note-font-size);
  text-align: center;
  color: white;
  margin-left: auto;
  transition: .3s;
  animation: 1.3s scale 8.4s;
  width: 5%;
  height: 60px;
  margin-bottom: 60px;
  z-index: 100;
}

.bar img {
  width: 90px;
}

.login-page-main-content .contact form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 16px 16px 16px 16px;
  background: url(https://grow-edu.pl/Resources/Advertisement/Other/white-paper-background.jpg) no-repeat;
  background-size: 100% 100%;
  transition: .3s;
  /* box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.5); */
  height: 100%;
}

.login-page-main-content .contact span {
  color: rgba(0, 0, 0, 1);
  text-align: justify;
}

.login-page-main-content .contact input {
  margin-top: 4px;
}

.login-page-main-content .contact input, .contact textarea {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.login-page-main-content .contact textarea {
  background: transparent;
  height: 60px;
}

.login-page-main-content .contact input {
  background: transparent;
  border-bottom: 1px solid 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px transparent;
  border-left: 1px transparent;
  border-top: 1px transparent;
  border-radius: 0 !important;
}

.login-page-main-content .contact span {
  text-align: center;
}

.login-page-main-content .contact input, .contact button, .contact span {
  box-sizing: border-box;
  width: 100%;
  font-family: 'Century Gothic' !important;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 8px;
  outline: none;
}

.login-page-main-content .contact textarea {
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  font-family: 'Century Gothic' !important;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 8px;
  outline: none;
}

.login-page-main-content .contact textarea {
  resize: none;
}

.login-page-main-content .contact .send {
  display: flex;
}

.login-page-main-content .contact button {
  border: none;
  outline: none;
  background: #f0f0f0;
  border-radius: 5px;
  padding: 6px 16px;
}

.login-page-main-content .light-bulb {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column;
  right: 0;
  top: 0;
  width: 40%;
  height: 80%;
  z-index: 99;
}

.login-page-main-content .light-bulb .bulb {
  flex: 1;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(5px 5px 5px black);
  padding-bottom: 50px;
  transform: translateY(-100%);
  transition: 1.6s 3.8s;
}

.login-page-main-content .light-bulb .motto-content {
  position: relative;
  transform-origin: left center;
  overflow: hidden;
}

.login-page-main-content .light-bulb .motto-wrapper {
  position: relative;
  max-width: 0;
  transition: max-width 1.8s 1.6s;
  transform-origin: left center;
  overflow: hidden;
  margin-right: auto;
}

.login-page-main-content .light-bulb .motto-wrapper img {
  height: 5px;
  max-width: 0;
  min-width: 0;
  transition: max-width .5s 3s, min-width .5s 3s;
}

.login-page-main-content .light-bulb .motto {
  position: relative;
  display: block;
  font-size: 36px !important;
  font-family: 'Segoe Print' !important;
  line-height: 1.5;
  white-space: nowrap;
  transition: .3s;
  color: white;
  text-align: center;
  margin: 0;
}

.login-page-main-content .benefits .slider {
  position: relative;
  display: flex;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  z-index: 5;
  scrollbar-width: none;
}

.section-wrapper {
  width: 100%;
  overflow: hidden;
  position: sticky;
  left: 0;
  top: 0;
}

.sections section:not(:first-child) .section-wrapper {
  opacity: 0;
}

.login-page-main-content .slider {
  position: relative;
  display: flex;
  width: 80%;
  margin: 0 auto;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  z-index: 5;
  scrollbar-width: none;
}

.login-page-main-content .slider::-webkit-scrollbar {
  display: none;
}

.login-page-main-content .slide-main {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  height: 100%;
  min-width: 100%;
  margin: auto;
  z-index: 2;
  scroll-snap-align: center;
}

.login-page-main-content .slide-main .image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  max-height: 80%;
}

.login-page-main-content .slide-main .image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.login-page-main-content .back {
  position: absolute;
  outline: none;
  background: transparent;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  cursor: pointer;
  border: 1px solid #f7df00;
  color: white;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: .3s;
}

.login-page-main-content .slide-main-flex {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column nowrap;
  width: 100%;
  height: 80%;
  margin: 0 auto;
  z-index: 4;
  transition: .3s;
}

.login-page-main-content .floor-above {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  width: 90%;
  z-index: 1;
}

.login-page-main-content .bookcase {
  width: 10%;
  transform: translateY(-50px);
}

.login-page-main-content .woman {
  height: 100%;
  width: 50%;
}

.login-page-main-content .woman img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.login-page-main-content .floor {
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 105%;
  height: 20%;
  z-index: -1;
}

.login-page-main-content .floor img {
  width: 100%;
  object-fit: contain;
  transform: scaleX(-1);
}

.login-page-main-content .main-list {
  position: relative;
  bottom: 30px;
  width: 40%;
  height: 70%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: column nowrap;
  padding-bottom: 60px;
  padding-left: 45px;
  padding-right: 15px;
}

.login-page-main-content .main-item {
  width: 100%;
  /* font-size: 20px; */
  position: relative;
  z-index: 1;
  cursor: pointer;
  font-weight: 100;
  padding: 20px 0;
  color: #f1f76f;
  font-family: 'Segoe Print' !important;
  transition: .3s;
  pointer-events: none;
}

.login-page-main-content .main-item h1 {
  display: inline-flex;
  transition: .3s;
  margin: 0;
  opacity: 0;
  transform-origin: center;
  font-size: clamp(24px, 1.5vw, 30px);
  font-weight: 400;
  pointer-events: none;
}

@keyframes main-item {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.login-page-main-content .main-item.active {
  color: hsla(198, 98%, 76%, 1);
}

.login-page-main-content .activeSlider {
  z-index: 5;
}

.login-page-main-content .slide {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  height: 100%;
  width: 100%;
  margin: auto;
  z-index: 2;
  scroll-snap-align: center;
  /* transition: .3s; */
  padding: 15px 22px;
  /* border-radius: 20px; */

  /* border: 5px solid hsla(198, 98%, 76%, 1); */
  /* box-shadow: 0px 4px 8px 0 rgba(0,0,0,1); */
  background: url('https://grow-edu.pl/Resources/Advertisement/Other/chalk-blue.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(2px 4px 6px black);
}

.slide-close {
  position: absolute;
  right: 3%;
  top: 5%;
  padding: 1px;
  font-size: 20px;
  color: #f1f76f;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 6;
}

.home-sections .benefits .slide-button {
  cursor: pointer;
}

.home-sections .benefits .slide-button.selected {
  color: #86DAFE;
}

.login-page-main-content .slide-flex {
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
  z-index: 4; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
  width: 100%;
  height: 100%;
  /* background: url(https://grow-edu.pl/Resources/Advertisement/BlackBoard.jpg) no-repeat;
  background-size: 180%;
  background-position: 87% 74%; */
  height: 100%;
  /* border-radius: 21px; */
  width: 100%;
}

.login-page-main-content .slide-flex .wrapper-text {
  position: relative;
  height: 100%;
  order: 1;
  padding: 20px 45px;
  /* background: url('https://grow-edu.pl/Resources/Advertisement/BlackBoard.jpg') no-repeat;
  background-position: right; */
  border-radius: 21px;
  overflow-y: hidden;
  scrollbar-width: none;
}

.login-page-main-content .demo-form {
  /* position: absolute; */
  position: fixed;
  /* top: 0; */
  right: 6%;
  width: 400px;
  z-index: 100;
  overflow: hidden;
  max-height: 0px;
  border: 4px solid transparent;
  border-top: none;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: .3s;
}

.login-page-main-content .demo-form.active {
  border: 4px solid #f7df00;
  border-top: none;
}

.login-page-main-content .demo-form form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 16px;
  background: url(https://grow-edu.pl/Resources/Advertisement/Other/white-paper-background.jpg) no-repeat;
  background-size: 100% 100%;
  transition: .3s;
}

.login-page-main-content .demo-form span {
  color: rgba(0, 0, 0, 0.5);
  text-align: justify;
}

.login-page-main-content .demo-form input {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  margin-top: 4px;
}

.login-page-main-content .demo-form span {
  box-sizing: border-box;
  width: 100%;
  font-family: 'Century Gothic' !important;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 4px;
  text-align: center;
}

.login-page-main-content .demo-form input, .demo-form button {
  box-sizing: border-box;
  width: 100%;
  font-family: 'Century Gothic' !important;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 4px;
}

.login-page-main-content .demo-form .email {
  font-size: 14px;
  padding: 10px;
  outline: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px transparent;
  border-left: 1px transparent;
  border-top: 1px transparent;
  border-radius: 0 !important;
  background: transparent;
}

.login-page-main-content .demo-form button {
  border: none;
  outline: none;
  background: #f0f0f0;
  border-radius: 5px;
  padding: 6px 16px;
  margin-top: 10px;
}

.login-page-main-content .demo-form .regulations-link {
  font-size: 12px;
  margin: 0;
  padding: 0px;
  padding-top: 16px;
}

.login-page-main-content .demo-form .regulations-link a {
  color: rgb(110, 167, 50);
}

.login-page-main-content .contact .send {
  padding-bottom: 8px;
}

.login-page-main-content .contact .send button, .demo-form .send button {
  border: 2px solid #f7df00;
  border-radius: 10px;
  background: transparent;
  margin-top: 20px;
  font-family: 'Segoe Print' !important;
  padding: 5px 10px;
  color: black;
  margin: 0 auto;
  height: 40px;
  width: 155px;
  background: url('https://grow-edu.pl/Resources/backgound-button.png');
  background-position: center;
  background-size: 112%;
  background-repeat: no-repeat;
  cursor: pointer;
}

.section-webinar .content {
  position: relative;
  width: 100%;
  height: 100%;
}

.section-webinar .images {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-webinar .computer {
  width: 30%;
  height: auto;
}

.section-webinar .hand {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 50%;
  height: 100%;
}

.section-webinar .hand img {
  width: 50%;
  height: 100%;
  object-fit: contain;
}

body.contrast {
  filter: invert(1);
}

body.grayscale {
  filter: grayscale(1);
}

body.grayscale.contrast {
  filter: grayscale(1) invert(1);
}

body.hyperlinks a {
  text-decoration: underline !important;
  text-decoration-color: #326EA7 !important;
  color: #326EA7 !important;
}

body.hyperlinks [href] {
  text-decoration: underline !important;
  text-decoration-color: #326EA7 !important;
  color: #326EA7 !important;
}

body .uwy.userway_p7 .uai {
  top: 13% !important;
}


.login-page-content .sections-panel {
  background: url(https://grow-edu.pl/Resources/Advertisement/Management/background-plan.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


.login-page-content .section-panel .content {
  background: url(https://grow-edu.pl/Resources/Advertisement/Management/chalk-table.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 45%;
  padding-top: calc(40% / 4 * 3);
  position: absolute;
  left: 6%;
  top: 5%;
}

.login-page-content .section-panel .content .video-view {
  width: 92%;
}


/* @media screen and (max-width: 1470px) */

@media screen and (min-width: 2000px) {
  .sections-arrows .arrow {
    width: 60px;
    height: 60px;
  }

  .login-page-main-content .register-image {
    background: url(https://resources.growbp.pl/grow.edu/svg/registry-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 80px;
    height: 80px;
    transition: 0.4s transform, 0.4s background-color;
    animation: 1.3s scale 5.8s;
  }

  body .uwy .uai {
    width: 60px;
    height: 60px;
    max-height: 60px;
    max-width: 60px;
  }

  .login-page-main-content .demo-image {
    padding: 60px 20px;
  }

  .login-page .buttons img {
    width: 2.5rem !important;
  }

  .login-page-main-content .note {
    height: 300px;
    font-size: clamp(8px, 1vw, 18px) !important;
  }

  .login-page-main-content .wrapper-notes img {
    height: 4.5rem;
  }
}

@media only screen and (max-width: 1470px) and (min-width: 1400px) {
  .login-page-main-content .light-bulb .motto {
    font-size: 28px;
  }

  .login-page-main-content .note {
    height: 170px;
    font-size: clamp(4px, 1vw, 16px);
  }

  .login-page-main-content .main-item {
    /* font-size: 18px; */
  }

  .login-page-main-content .main-item h1 {
    /* font-size: 25px; */
  }

  .login-page-content .wrapper-process .text-1 {
    /* font-size: 26px; */
  }

  .login-page-content .wrapper-process .text-2 {
    /* font-size: 18px; */
  }

  .login-page-content .wrapper-process .text-3 {
    /* font-size: 18px; */
  }

  .login-page-content .wrapper-process .text-4 {
    /* font-size: 18px; */
    /* width: 318px; */
    left: 1050px;
  }

  .login-page-content .wrapper-process .text-5 {
    /* font-size: 18px; */
    /* left: 1115px; */
  }

  .wrapper-process .title {
    font-weight: 400;
    font-size: 43px !important;
  }

  .login-page-main-content .light-bulb .motto-wrapper {
    min-height: 12%;
  }

  .login-page-main-content .light-bulb .motto {
    font-size: 32px !important;
  }
}

@media screen and (max-width: 1400px) {
  .login-page-main-content .light-bulb .motto {
    font-size: 32px !important;
  }

  .login-page-main-content .light-bulb .motto-wrapper {
    min-height: 12%;
  }

  .Packet {
    min-height: 160px;
  }

  .wrapper-process .title {
    width: 1375px;
    left: 0px;
  }

  .login-page-content .wrapper-process .text-5 {
    left: 1010px;
  }

  .login-page-main-content .wrapper-process {
    width: 100%;
  }

  .login-page-main-content .buttons-wrapper {
    height: 75%;
  }

  .login-page-main-content .buttons-wrapper {
    top: 13%;
  }

  .login-page-main-content .welcome h1 {
    font-size: clamp(24px, 2.6vw, 48px) !important;
  }

  .login-page-main-content h1 {
    font-size: 3em;
  }

  .login-page-main-content .welcome .wrapper-text .h2-home {
    font-size: 18px;
    line-height: 1;
  }

  .login-page-main-content .light-bulb .motto-wrapper {
    min-height: 16%;
  }

  .login-page-main-content .light-bulb .motto {
    font-size: 28px !important;
  }

  .login-page-main-content .main-item h1 {
    font-size: 22px;
  }

  .login-page-main-content .main-item {
    padding: 10px 0;
  }

  .login-page-main-content .light-bulb .bulb {
    transform: scale(1.5) !important;
  }

  .login-page-main-content .floor {
    height: 10%;
  }

  .login-page-main-content .bookcase {
    transform: translateY(0);
  }

  .login-page-main-content .woman {
    transform: scale(1.3);
  }

  body .uwy.userway_p7 .uai {
    top: 13% !important;
  }

  .login-page-main-content .main-list {
    bottom: 0px;
  }

  .login-page-main-content .note {
    height: 140px;
    font-size: clamp(4px, 1vw, 16px);
  }

  .sections-arrows {
    margin-bottom: 35px;
  }

  .login-page-main-content .bar {
    margin-bottom: 35px;
  }

  .login-page-main-content .slide .wrapper-text .h2-home {
    color: white;
    font-size: clamp(14px, 1em, 22px);
    margin: 30px 0;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
    font-family: 'Segoe Print';
  }
}

@media screen and (max-width: 700px) {
  .login-page-header {
    display: none;
  }

  .login-page-main-content {
    display: none !important;
  }
}

/*# sourceMappingURL=style.css.map */

/* Login/LoginPageContent/RegisterForm/Style.css */

.login-page a,
.login-page button {
    cursor: pointer;
}

.login-page a:hover {
    opacity: 0.5;
}

.company-form-input {
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid white;
    color: #F8D293;
    font-weight: 300;
    font-size: var(--sub-paragraph-font-size);
    line-height: 15px;
    padding: 10px 20px;
    width: 100%;
}

.company-form-input-label {
    border-bottom: 1px solid white;
}

.company-form-input-label input {
    border: 1px solid transparent;
    color: #F8D293;
    font-weight: 300;
    font-size: var(--sub-paragraph-font-size);
    line-height: 15px;
    padding: 10px;
    flex-grow: 1;
    width: 0%;
}

.FormSteps,
.FormSteps * {
    line-height: 1.5 !important;
    font-family: 'Century Gothic';
}

h3,
form,
p {
    margin: 0
}

.FormRegister {
    display: flex;
    flex-direction: column;
    position: relative;
    /* width: calc(100%/2); */
    width: 100%;
    background: transparent;
    align-items: center;
}

.FormRegisterStepTwo {
    display: none;
    width: calc(100%/2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-20%, 10%);
}

.FormRegisterStepThree {
    display: none;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 5%);
}

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

.flex-label {
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
}

.whole {
    border-radius: 100%;
    background: white;
    border: 1px solid #9D9E9E;
    color: #9D9E9E;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    cursor: pointer;
    font-size: var(--sub-huge-font-size);
}

.StepTitle.active {
    background: transparent;
    border-bottom: 2px solid #F8D293;
    color: #F8D293;
    cursor: default;
}

.StepTitle {
    font-size: var(--sup-paragraph-font-size);
    width: 160px;
    color: white;
    font-family: 'Segoe Print';
    cursor: pointer;
}

.StepFormmainContent {
    padding-top: 14px;
    height: 0%;
    flex-grow: 1;
    overflow-y: auto;
    display: none;
}

.FirstStep,
.SecondStep,
.ThirdStep {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.StepFormmainContent .h2-home {
    font-size: var(--sub-title-font-size);
    color: rgb(110 167 50);
    font-weight: 100;
}

.login-page ul {
    list-style: none;
}

.login-page ul li {
    color: white;
    margin-left: -5px;
    line-height: 1;
    display: flex;
    align-items: center;
    height: 37px;
}

.login-page-main-content ul.more li::before {
    content: "";
    line-height: 1;
    z-index: 1;
    height: 13px;
    width: 41px;
    background: url(https://resources.growbp.pl/grow.edu/dot2.png);
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    line-height: 1;
}

.login-page-main-content li::before {
    content: "";
    line-height: 1;
    z-index: 1;
    height: 13px;
    width: 41px;
    background: url(https://resources.growbp.pl/grow.edu/dot.png);
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.login-page-main-content li span::before {
    content: " ";
    position: relative;
    margin-left: 10px;
    top: 36px;
    color: white;
    z-index: 0;
}

.h3-home {
    font-weight: 400;
    color: #F8D293;
    font-size: 24px;
    line-height: 1.35;
}

.HeadForm .h2-home {
    text-align: center;
    color: gray;
    font-weight: 400;
}

.h2-home {
    font-size: 24px;
    color: white;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    text-align: right;
}

.LogoGROW-EDU {
    text-align: center;
}

.LogoGROW-EDU img {
    width: 150px;
    padding: 8px;
}

.FormRegisterStepThree .CompanyCity {
    padding: 8px;
    width: 50%;
}

.FormRegisterStepThree .CompanyZip {
    width: 50%;
    padding: 8px;
}

.FormRegisterStepThree .CompanyTaxID,
.FormRegisterStepThree .CompanyRegon,
.FormRegisterStepThree .CompanyName,
.FormRegisterStepThree .CompanyAddress,
.FormRegisterStepThree .CompanyZip,
.FormRegisterStepThree .CompanyCity {
    color: #F1F9EA;
}

.FormRegisterStepThree .CompanyTaxID span,
.FormRegisterStepThree .CompanyRegon span,
.FormRegisterStepThree .CompanyName span,
.FormRegisterStepThree .CompanyAddress span,
.FormRegisterStepThree .CompanyZip span,
.FormRegisterStepThree .CompanyCity span {
    font-weight: bold;
    color: #F8D293;
}

.login-page-main-content .CompanyCity {
    padding: 16px;
    width: 60%;
}

.login-page-main-content .CompanyZip {
    width: 40%;
    padding: 16px;
}

.CompanyName input {
    /* border-radius: 5px; */
    width: 100%;
    font-size: var(--sub-paragraph-font-size);
    line-height: 15px;
    padding: 10px 20px;
    outline: none;
    background: transparent;
    color: #F8D293;
}

.required {
    font-size: var(--sub-paragraph-font-size);
    color: #ccc;
}

.SubmitButton input {
    border-radius: 10px;
    height: 45px;
    width: 100%;
    border: 1px solid rgb(110, 167, 50);
    background: white;
    color: rgb(110, 167, 50);
    font-size: var(--sub-paragraph-font-size);
    outline: none;
    cursor: pointer;
    padding: 8px;
}

.Address {
    display: flex;
}

.CheckRegulations {
    display: flex;
    font-size: 12px;
    text-align: justify;
    color: white;
}

.CheckRegulations:not(:last-child) {
    margin-bottom: 5px;
}

.CheckRegulations a {
    color: #F1F76F;
}

.FormRegisterStepThree .OpctionColor {
    font-size: inherit;
}

.OpctionColor {
    color: white;
    opacity: 0.5
}

.padding-2 {
    padding: 2px;
}

.padding-4 {
    padding: 4px;
}

.padding-8 {
    padding: 8px;
}

.padding-16 {
    padding: 16px;
}

.padding-16-row {
    padding: 0 16px;
}

.padding-24 {
    padding: 24px;
}

.padding-36 {
    padding: 36px;
}

.padding-2-8 {
    padding: 2px 8px;
}

.padding-4-8 {
    padding: 4px 8px;
}

.padding-8-0 {
    padding: 8px 0px;
}

.padding-0-8 {
    padding: 0 8px;
}

.padding-0-16 {
    padding: 0px 16px;
}

.padding-0-24 {
    padding: 0 24px;
}

.padding-0-36 {
    padding: 0 36px;
}

.padding-0-36-0-8 {
    padding: 0 36px 0 8px;
}

.padding-8-16 {
    padding: 8px 16px;
}

.padding-16-8 {
    padding: 16px 8px;
}

.padding-18-8 {
    padding: 18px 8px;
}

.padding-24-0 {
    padding: 24px 0;
}

.padding-24-8 {
    padding: 24px 8px;
}

.padding-36-0 {
    padding: 36px 0;
}

.padding-36-16 {
    padding: 36px 16px;
}

.arrow-left {
    cursor: pointer;
}

.display-flex {
    display: flex;
}

.ChoisePacketZero {
    width: 100%;
    /* height: 235px; */
    /* border-radius: 5px; */
    /* border: 1px transparent; */
    overflow: auto;
    display: flex;
    margin: 0;
}

.ChoisePacket {
    width: 100%;
    /* height: 235px; */
    /* border-radius: 5px; */
    /* border: 1px transparent; */
    overflow: visible;
    display: flex;
    margin: 0;
    background-image: url('https://grow-edu.pl/Resources/Advertisement/stickynotes.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ChoisePacket.Bestseller {
    background-image: url('https://grow-edu.pl/Resources/Advertisement/stickynotes_bestseller-pl.png');
}

.Packet {
    width: 100%;
    min-height: 180px;
    background-position: center !important;
    flex-grow: 1;
    text-align: center;
    /* background: #9D9E9E; */
    /* background-color: #e5e5e563; */
    color: #666;
    font-size: 28px;
    padding: 56px 0 0 0;
    /* padding: 85px 0 0 0; */
    /* border-radius: 10px 10px 0 0; */
}

.Packet.active {
    background: rgb(110, 167, 50);
    color: white;
}

.Whole4Choice {
    border-radius: 100%;
    width: 200px;
    overflow: auto;
}

.LimitAccounts {
    background: #9D9E9E;
    color: white;
    padding: 5px;
    font-size: var(--sub-paragraph-font-size);
    line-height: 1;
    cursor: pointer;
}

.LimitAccounts span {
    font-weight: bold;
    padding: 5px;
    line-height: 0.5;
}

.ChoisePacketTitle {
    font-size: 16px;
    color: white;
    height: auto;
    max-height: 1440px;
    position: relative;
}

.accessibility {
    position: fixed;
    width: 50px;
    height: 50px;
    top: 10%;
    left: 15px;
    z-index: 100;
    cursor: pointer;
}

.home-button {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 100;
    cursor: pointer;
}

.home-button .icon {
    font-size: 35px;
    color: #b1eec5;
    object-fit: contain;
}

.left-line {
    position: absolute;
    top: 0;
    left: 15px;
    height: 100%;
    width: 5px;
    background: url('https://grow-edu.pl/Resources/Advertisement/Other/line2.png') no-repeat;
    background-size: 100% 100%;
}

.login-page .border-left {
    border-image: url(https://resources.growbp.pl/grow.edu/white-border.png) 30 round;
    border-style: solid;
    border-width: 0 0 0 5px;
}

.login-page .ThirdColumn .border-left,
.login-page .ForthColumn .border-left {
    position: relative;
    border-image: url(https://resources.growbp.pl/grow.edu/besteller-border.png) 30 round;
    border-style: solid;
    border-width: 0 0 0 8px;
    overflow-y: scroll;
    scrollbar-width: none;
    max-height: 450px;
    z-index: 1;
}

.login-page .FormRegister .border-left {
    position: relative;
    border-image: url(https://resources.growbp.pl/grow.edu/white-border.png) 30 round;
    border-style: solid;
    border-width: 0;
    overflow-y: scroll;
    scrollbar-width: none;
    max-height: 450px;
    z-index: 1;
}

.login-page .border-bottom:not(:last-child) {
    border-image: url(https://resources.growbp.pl/grow.edu/white-border.png) 30 round;
    border-style: solid;
    border-width: 0 0 3px 0;
}

.ZeroColumn {
    /* width: 275px;  */
    width: calc(100%/5);
}

.WholeAccounts,
.SummarySalary {
    width: 100%;
    flex-grow: 1;
    margin: 0 auto;
}

.FirstRow,
.SecondRow {
    display: flex;
    height: 100px;
}

.TwentyAccounts {
    transform: rotateZ(270deg);
    justify-content: end;
    align-items: flex-end;
}

.FiftyAccounts {
    transform: rotateZ(0deg);
    justify-content: end;
    align-items: flex-end;
}

.HundredAccounts {
    transform: rotateZ(0deg);
    justify-content: flex-end;
    align-items: baseline;
}

.OneHundredAndFiftyAccounts {
    transform: rotateZ(90deg);
    justify-content: flex-start;
    align-items: flex-end;
}

.FirstRow div,
.SecondRow div {
    display: flex;
    width: 100px;
}

.LimitAccounts.active {
    background: rgb(110, 167, 50);
    box-shadow: 0 0 25px grey;
    z-index: 9;
}

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

.Cost {
    font-size: 28px;
    color: black;
    /* color: #666666; */
}

.CostWord {
    font-size: 20px;
    color: black;
    /* color: #666666; */
    padding: 0 0 0 4px;
}

.PaymentPerDay {
    top: 2px;
    right: 14px;
    font-size: 12px;
    color: rgb(110, 167, 50);
}

.PaymentPerYear {
    color: #666;
    font-size: var(--sub-paragraph-font-size);
    text-align: center;
    display: none;
}

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

.ButtonChoice button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: #f1f76f;
    color: #4D4D4D;
    font-size: var(--sub-paragraph-font-size);
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px transparent;
    font-weight: 100;
    font-family: 'Century Gothic';
    text-transform: lowercase;
    cursor: pointer;
}

.ButtonChoice button:disabled {
    background: transparent;
    color: transparent;
    font-size: var(--sub-paragraph-font-size);
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px transparent;
    font-weight: 100;
    font-family: 'Century Gothic';
    text-transform: lowercase;
    cursor: pointer;
}

.Arrow img {
    width: 25px;
    filter: grayscale(1);
}

.Arrow button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.NavigationForm {
    width: 100%;
}

hr.absolute {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    border-bottom: 0;
    top: 18px;
    right: 60px;
    width: 80%;
    z-index: 0;
}

.TreeDots::before {
    content: ". . .";
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: white;
    margin: 0;
}

.FormSteps {
    width: 50%;
}

.AllColumns {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}

.Columns {
    /* width: 275px; */
    width: calc(100%/5);
    height: 100%;
}

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

;

.ScrollChoice {
    /* height: 10px; */
    width: calc(100%/4);
    /* background: rgba(0,0,0,0.1); */
    border: 1px solid#f8d293;
    cursor: pointer;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.accordion {
    width: 100%;
}

.accordion .accordion-box {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.ScrollChoice.active {
    color: black;
    background: #f8d293;
}

/* .border-right{  border-right: 1px solid rgb(129, 129, 129) !important; } */

.login-page-mobile form span {
    padding: 0 8px;
    font-size: 16px;
}

.ChoisePlan {
    color: grey;
}

.FinalPacket,
.FinalCost {
    color: #F8D293;
}

.FinalCost {
    font-weight: bold;
}

.login-page-content .SubmitButton button {
    padding: 10px 20px;
    color: white;
    margin: 0 auto;
    border-image: url(https://resources.growbp.pl/grow.edu/border-color.png) 50 round;
    border-width: 5px 5px;
    border-style: solid;
    height: 60px;
    font-size: 20px;
    width: 160px;
}

.TiteArrow {
    font-size: 16px;
    color: white
}

.period {
    width: calc(100%/3);
}

.ChoiseBillingPeriod {
    width: calc(100%/1);
    border-radius: 10px;
    border: 1px solid #f8d293;
    color: white;
    overflow: auto;
    cursor: pointer;
    font-size: 12px;
}

.ChoiseBillingPeriod .active {
    background-color: #f8d293;
    color: black;
}

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

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

.ChoiseUpTo {
    font-size: 16px;
    align-items: center;
    color: white;
    font-weight: 300;
    display: flex;
    justify-content: center;
    width: 100%;
}

.ChoiseUpToBox {
    width: 100%;
}

.flex-center-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

.align-items-start {
    align-items: flex-start;
}

.wholeCheck {
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border: 1px solid #B1EEC5;
    border-radius: 100%;
}

.wholeCheck.active {
    background: #B1EEC5;
    border: 1px transparent;
}

.no-border {
    border: 0 !important;
}

.accordion .accordion-box .accordion-box-header {
    cursor: pointer;
}

.label {
    display: flex !important;
    align-items: center;
    width: 100%;
}

.login-page .accordion .accordion-box .accordion-box-header .icon::before {
    content: '\0055';
    color: #f8d293;
}

.login-page i.icon::before {
    display: inline-block;
}

.FormRegisterStepTwo .icon.icon-home::before {
    content: '\0025';
    color: #F8D293;
}

.FormRegisterStepTwo .icon.icon-human::before {
    content: '\0072';
    color: #F8D293;
}

.FormRegisterStepThree .icon.icon-home::before {
    content: '\0025';
}

.FormRegisterStepThree .icon.icon-human::before {
    content: '\0072';
}

/* .base-padding {
		padding: 12px !important;
} */

.login-page-main-content .accordion .paragraph,
.login-page-main-content .accordion .header {
    color: #f8d293;
}

/* .label-content {
		flex-grow: 1;
		width: 0%;
} */

/* .fill-absolute {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
} */

/* 
.fill-both {
		width: 100%;
		height: 100%;
}

.fill-width {
		width: 100%;
} */

.hide {
    display: none;
}

.GoToHide {
    width: 100%;
    flex-grow: 1;
    height: 0%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 25px;
    scrollbar-width: none;
    z-index: 0;
}

.GoToHide::-webkit-scrollbar {
    display: none;
}

.ChoisePacketTitle::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
}

.login-page ::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    border-radius: 2px;
}

.login-page ::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 2px;
}

.login-page ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
}

.IconSummary {
    font-size: 40px;
    color: #F8D293;
}

.SummaryPlan {
    /* background: rgba(0,0,0,0.1); */
    /* border-radius: 10px; */
    min-width: calc(100%/2);
}

.SummaryPlan:not(.FinalPacket) {
    font-size: 16px;
    color: #F1F9EA;
}

.SummaryPlan .h3-home {
    font-size: 24px;
    color: #F8D293;
}

.version,
.limits,
.period-time,
.cost-without-tax,
.discount,
.vat-tax,
.to-pay {
    width: 100%;
}

hr {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    width: 100%;
    height: 0px;
}

.BorderBackground {
    width: 90%;
    padding: 16px;
    border-image: url(https://resources.growbp.pl/grow.edu/white-border.png) 50 round;
    border-width: 10px 20px;
    border-style: solid;
    height: 0%;
    flex-grow: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 2%;
    font-family: 'Century Gothic' !important;
}

.AccountsLimits {
    width: 100%;
    background: transparent;
    border: 1px solid #f8d293;
    border-radius: 10px;
    overflow: auto;
}

.ScrollChoice {
    width: 100%;
    padding: 4x;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}

.individual-padding {
    /* padding: 57px 0 27px 0; */
    padding: 20px 0 27px 0;
}

.height-cell {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-reset {
    right: 15px;
    bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    padding: 8px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s;
    opacity: 0;
    pointer-events: none;
}

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

/* .button-reset:hover {
	background: rgba(241, 247, 111,.3);
	color: black;
	border-color: transparent;
} */

.register-form .wrong,
.CompanyAddress input.wrong,
.CompanyCity input.wrong,
.CompanyTaxID input.wrong,
.CompanyRegon input.wrong,
.CompanyUser input.wrong,
.CompanyUserEmail input.wrong {
    border: 1px solid rgba(200, 0, 0, .9) !important;
    animation: wrongVal 1.5s forwards !important;
    animation-timing-function: !important;
}

@keyframes wrongVal {
    0% {
        background: rgba(250, 0, 0, .2);
    }

    20% {
        background: rgba(200, 0, 0, .0);
    }

    40% {
        background: rgba(250, 0, 0, .2);
    }

    60% {
        background: rgba(200, 0, 0, 0);
    }

    80% {}

    100% {
        background: rgba(250, 0, 0, .2);
    }
}

.login-page-main-content .checkbox {
    color: #F8D293;
}

.border-transparent {
    transition: .3s;
    border: 1px solid transparent;
}

.padding-2-8.active {
    background: rgba(250, 0, 0, .2);
    border: 1px solid rgba(200, 0, 0, .9);
}

@media (min-width: 1980px) {
    .BorderBackground .register-form-summary .transformY {
        transform: translateY(75%) !important;
    }

    .BorderBackground .login-page-content .SubmitButton button {
        font-size: 34px;
        width: auto;
        height: auto;
        padding: 16px 26px;
    }

    .BorderBackground .required {
        font-size: var(--title-font-size);
    }

    .BorderBackground {
        width: 2000px;
        min-height: 1000px;
        flex-grow: unset;
    }

    .BorderBackground .FormRegisterStepTwo .h3-home {
        font-size: 30px !important;
    }

    .BorderBackground .FormRegisterStepThree .absolute {
        left: -3%;
    }

    .BorderBackground .Arrow img {
        width: 40px !important;
    }

    .BorderBackground .ArrowsRight.display-flex.absolute {
        width: 190% !important;
    }

    .BorderBackground button.TiteArrow.padding-8-0.absolute {
        top: unset !important;
        left: unset !important;
    }

    .BorderBackground .button-reset.absolute {
        width: 90px;
        height: 90px;
    }

    .BorderBackground .login-page-main-content .h3-home {
        font-size: 1.5em;
    }

    .BorderBackground .fontSize div[style] {
        width: 150px !important;
    }

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

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

    .BorderBackground .IconSummary {
        margin-top: .9em;
    }

    .BorderBackground .CheckRegulations {
        font-size: var(--sub-title-font-size);
    }

    .BorderBackground i.icon {
        transform-origin: top center;
        margin-right: 15px;
    }

    .BorderBackground i.icon::before {
        font-size: 40px;
    }

    .BorderBackground .accordion i.icon::before {
        font-size: 24px;
    }

    .BorderBackground .accordion i.icon {
        margin-right: 0px;
    }

    .BorderBackground .ChoisePacketTitle .border-left.absolute {
        width: 700px !important;
        max-height: 650px !important;
    }

    .BorderBackground .data-StepTwo {
        width: 550px !important;
    }

    .BorderBackground .data-StepTwo i.icon::before {
        font-size: 32px !important;
    }

    .BorderBackground .column-360 i.icon::before {
        font-size: 32px !important;
    }

    .BorderBackground i.login-icon {
        font-size: 35px;
    }

    .BorderBackground input {
        font-size: 26px !important;
    }

    .FormSteps .display-flex {
        justify-content: space-between;
    }

    .FormSteps .label-flex {
        width: auto;
        font-size: 30px;
    }

    .StepTitle {
        width: auto;
        font-size: 30px;
        white-space: nowrap;
    }

    .BorderBackground .IChoose {
        position: absolute !important;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .BorderBackground .CostWord {
        font-size: 28px;
    }

    .BorderBackground .Cost {
        font-size: 30px;
    }

    .BorderBackground .SummarySalary {
        flex-grow: unset;
    }

    .BorderBackground .Packet {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 250px;
        position: relative;
        font-size: 36px;
        padding: 56px 0;
    }

    .BorderBackground .ButtonChoice button {
        font-size: 24px;
        padding: 16px 26px;
    }

    .BorderBackground .ChoisePacketTitle {
        font-size: 22px;
    }

    .BorderBackground .ScrollChoice {
        font-size: 22px;
    }

    .BorderBackground .ChoiseUpTo {
        font-size: 24px;
    }

    .BorderBackground .ChoiseBillingPeriod {
        font-size: 22px;
    }

    .BorderBackground .ScrollChoice {
        font-size: 22px;
    }

    .BorderBackground .home-button .icon {
        font-size: 60px;
    }
}

@media (max-width: 1480px) {
    .FormRegister .border-left {
        max-height: 350px !important;
        width: 350px !important;
    }

    .CheckRegulations:not(:last-child) {
        margin-bottom: 0px;
    }

    .login-page-main-content .checkbox::before {
        transform: scale(1.4);
    }

    .FormRegisterStepThree {
        transform: translate(-50%, 2%);
    }
}

@media (max-width: 1400px) {
    .Packet {
        padding: 35px 0 0 0;
    }

    .Packet .padding-24 {
        padding: 30px 24px;
    }

    .IconSummary i.icon::before {
        font-size: 26px;
    }

    .BorderBackground .Arrow img {
        width: 18px;
    }

    .BorderBackground .TiteArrow {
        font-size: 12px;
    }

    .FormRegisterStepTwo i.login-icon {
        font-size: 20px !important;
    }

    .FormRegisterStepTwo .padding-8-16 {
        padding: 4px 16px !important;
    }

    .individual-padding {
        padding: 14px 0 14px 0;
    }

    .FormRegisterStepTwo {
        display: none;
        width: calc(100%/2);
        position: absolute;
        top: 50%;
        left: 50%;
        /* transform: translate(-20%, 0%); */
    }

    .FormRegisterStepTwo .padding-36 {
        padding: 8px;
    }

    .FormRegisterStepTwo .padding-36-16 {
        padding: 16px 8px;
    }

    /* .Arrow img {
				width: 25px;
		} */
    /* .TiteArrow {
				display: none;
		} */
    .FormRegisterStepThree {
        width: 100%;
        transform: translate(-50%, 0%);
    }

    .FormRegisterStepThree .padding-16 {
        padding: 0 16px;
    }

    .FormRegisterStepThree .padding-8 {
        padding: 2px 8px;
    }

    .ChoisePacketTitle {
        font-size: 12px;
        min-height: 250px;
    }
}

@media screen and (max-height: 700px) {
    .BorderBackground form span {
        font-size: var(--sub-paragraph-font-size);
    }

    .login-page-main-content .BorderBackground .h3-home {
        margin: 0;
    }

    .BorderBackground .register-form-summary .display-flex.flex-column .display-flex:last-child {
        transform: translate(0%) !important;
    }

    .BorderBackground .column-360 i.login-icon {
        font-size: 20px !important;
    }

    .FormRegister .border-lef {
        max-height: 220px !important;
    }
}

/* Template/Site.css */

/*
    Site navigation
*/
#site-navigation {
    --site-navigation-height: calc(var(--base-padding) * 4 + var(--sub-title-line-height));
    height: var(--site-navigation-height);
    width: 100%;
    z-index: 1;
    transition: 0.25s border-radius, 0.25s padding, 0.25s left, 0.25s top;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#site-navigation .site-navigation-button {
    font-weight: 500;
    text-transform: uppercase;
}

#site-navigation .site-navigation-button[href] {
    cursor: pointer;
}

#site-navigation #site-navigation-content {
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    color: rgb(31, 31, 31);
    height: var(--site-navigation-height);
    overflow: hidden;
    transition: 0.4s height, 0.4s box-shadow;
}

#site-navigation .site-navigation-header {
    height: var(--site-navigation-height);
    white-space: nowrap;
}

#site-navigation .site-navigation-footer {
    height: 300px;
}

#site-navigation .site-navigation-footer.mobile {
    height: unset;
    height: 0px;
    transition: .3s;
    overflow: visible;
}

#site-navigation.active .site-navigation-footer.mobile {
    height: 60px;
}

#site-navigation.active #site-navigation-content {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    height: calc(var(--site-navigation-height) + 300px);
}

#site-navigation.active.mobile #site-navigation-content {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    height: calc(var(--site-navigation-height) + 60px);
}

.site-navigation-button-toggle {
    cursor: pointer;
}

#site-navigation.active .site-navigation-button-toggle i::before {
    content: '\0056';
}

#site-navigation .avatar {
    width: calc(var(--font-line-height) + var(--base-padding) * 2) !important;
    height: calc(var(--font-line-height) + var(--base-padding) * 2) !important;
}

/*
    Site panel
*/

#site-panel {
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 0px;
    overflow: hidden;
    transition: 0.25s width;
    z-index: 2;
}

#site-panel.active {
    width: 450px;
}

#site-panel #site-panel-content {
    width: 450px;
}

.site-panel-button-toggle {
    cursor: pointer;
}

.site-logo {
    background-image: url('https://resources.growbp.pl/logos/grow.edu.png');
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

#site-panel .site-panel-toggle-content:not(.active) .site-panel-settings-content {
    display: none !important;
}

#site-panel .site-panel-toggle-content.active .site-panel-main-content {
    display: none !important;
}

.site-panel-button-toggle-content.active i.icon::before {
    content: '\00B7';
    color: rgb(218, 165, 32);
}

.site-panel-button-toggle-content.active i.icon::after {
    content: '';
}

.flags {}

.flags .flags-wrapper .button {
    pointer-events: none;
}

.flags .flags-wrapper--hidden {
    position: absolute;
    background: hsl(0, 0%, 98%);
    max-height: 0px;
    overflow: hidden;
    transition: .3s
}

.flags.active .icon-chevron-down::before {
    content: '\0056';
}

.accordion.form-change--password.active .icon-chevron-down::before {
    content: '\0056';
}

/* Template/Site.mobile.css */

@keyframes mobile-opacity-display {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

:root {
    --mobile-padding-v: 12px;
    --mobile-padding-h: 16px;
    --margin-default: 36px;
    --mobile-height: 60px;
    --purple: #944DBF;
    --purple--strong: #A7326E;
    --orange: #FF8C00;
    --orange--light: #DAA520;
    --orange--other: #D1914B;
    --grey: #cccccc;
    --grey--light: #d6d6d6;
    --grey--light--alpha: hsl(0, 0%, 84%, .42);
    --grey--dark: #A1A8B0;
    --brown--light--af: #E9DCCD;
    --brown--light: #C7B79D;
    --brown: #86696E;
    --brown--dark: #746862;
    --gold: #FFCE5B;
    --pinky: #B6A5AB;
    --blue: #326EA7
}

:root .green {
    color: var(--green)
}

:root .purple {
    color: var(--purple)
}

:root .orange {
    color: var(--orange)
}

:root .brown {
    color: var(--brown)
}

:root .gold {
    color: var(--color-workshop)
}

:root .white {
    color: #fff
}

:root .black {
    color: #000
}

:root .white--alpha {
    color: rgba(255, 255, 255, 0.75)
}

:root .black--alpha {
    color: rgba(0, 0, 0, 0.75)
}

.course-minimized-home-preview .course-view-image img {
    display: block
}

.course-minimized-home-preview .progress {
    width: 100%;
    background-color: var(--user-status-color);
}

.course-minimized-home-preview .progress--bar {
    position: relative;
    height: 15px;
    background: var(--grey--light)
}

.course-minimized-home-preview .progress--threshold {
    position: absolute;
    top: 0;
    height: 100%;
    width: 3px;
    left: 80%;
    background: var(--orange--light)
}

.course-minimized-home-preview .progress--view {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--green);
    height: 100%;
    width: 35%
}

.course-minimized-home-preview .course-footer {
    background: white
}

.course-minimized-home-preview .course-info {
    display: flex;
    justify-content: space-between;
    font-size: var(--sub-title-font-size);
    padding: var(--mobile-padding-h) 8px
}

.help-desk--btn {
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25)
}

.help-desk--btn .help-desk-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden
}

.help-desk--btn .help-desk-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: var(--orange--other);
    width: 100%;
    height: 100%
}

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

.help-desk--btn .help-desk-icon i {
    position: absolute;
    transform: translateY(3px) scale(1.6);
    -webkit-transform: translateY(3px) scale(1.6);
    transform-origin: center center;
    -webkit-transform-origin: center center;
    font-size: calc(var(--sup-huge-font-size) + 5px);
    color: white
}

.help-desk-popup {
    position: absolute;
    bottom: 0%;
    left: 0;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    padding: var(--mobile-padding-v);
    padding-top: var(--mobile-padding-h);
    border: 6px solid var(--orange--other);
    border-bottom: none;
    width: 100%;
    background: white;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    transition: .3s;
    -webkit-transition: .3s
}

.help-desk-popup .help-desk-message-wrapper {
    width: 100%
}

.help-desk-popup .help-desk--message {
    width: 100%;
    font-size: var(--sup-title-font-size)
}

.help-desk-popup .help-desk--message:placeholder {
    color: rgba(0, 0, 0, 0.75)
}

.help-desk-popup .help-desk-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.help-desk-popup .help-desk-buttons i {
    color: white;
    transform: translateY(3px) scale(1.6);
    -webkit-transform: translateY(3px) scale(1.6);
    line-height: 0;
    font-size: var(--sup-big-font-size)
}

.help-desk-popup .help-desk-buttons .attachment i {
    transform: translateY(3px) scaleX(-1.6) scaleY(1.6);
    -webkit-transform: translateY(3px) scaleX(-1.6) scaleY(1.6)
}

.help-desk-popup .help-desk-buttons .send--btn {
    padding: var(--mobile-padding-v) var(--margin-default);
    border: 3px solid var(--orange--other);
    color: rgba(0, 0, 0, 0.75);
    font-size: var(--sup-big-font-size);
    border-radius: 12px
}

.help-desk-popup .help-desk-buttons .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--brown--light);
    width: 60px;
    height: 60px
}

.help-desk-popup .help-desk-popup--close {
    position: absolute;
    right: 16px;
    top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--grey--dark)
}

.help-desk-popup .help-desk-popup--close i {
    font-size: var(--sub-title-font-size);
    transform: translateY(2px) scale(1.6);
    -webkit-transform: translateY(2px) scale(1.6);
    line-height: 0;
    color: white
}

.help-desk-popup.active {
    transform: translateY(0%);
    -webkit-transform: translateY(0%)
}

nav#menu {
    --padding: var(--mobile-padding-v) var(--mobile-padding-h);
    --height: 60px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 9;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: .3s height;
    -webkit-transition: .3s height
}

nav#menu .menu-wrapper {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding)
}

nav#menu .menu-wrapper .logo {
    height: 100%;
    width: auto
}

nav#menu .menu-wrapper .logo img {
    object-fit: contain;
    object-position: center center;
    height: 100%
}

nav#menu .hamburger {
    min-width: calc(60px - (2 * var(--mobile-padding-v)));
    height: 100%
}

nav#menu .hamburger-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

nav#menu .hamburger-span {
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    border-radius: 1px;
    background: rgba(0, 0, 0, 0.75);
    left: 0px;
    transition: 300ms;
    -webkit-transition: 300ms;
    transform-origin: left center;
    -webkit-transform-origin: left center
}

nav#menu .hamburger--top {
    top: 33%;
    left: 0px;
    transition: .3s;
    -webkit-transition: .3s
}

nav#menu .hamburger--bottom {
    bottom: 33%;
    left: 0px;
    transition: .3s;
    -webkit-transition: .3s
}

nav#menu .accessibility-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: calc(60px - (2* var(--mobile-padding-v)));
    z-index: 9
}

nav#menu .accessibility-wrapper .accessibility-icon {
    width: auto;
    height: 100%;
    padding: 8px;
    background: var(--blue);
    fill: white;
    border-radius: 10px
}

nav#menu .accessibility-wrapper-options {
    position: absolute;
    left: 0;
    top: 100%;
    background: white;
    height: auto;
    white-space: nowrap;
    max-height: 0px;
    overflow: hidden;
    transition: .3s;
    -webkit-transition: .3s;
    transform: translate(-8px, 8px)
}

nav#menu .accessibility-options {
    padding: 8px
}

nav#menu .option {
    display: flex;
    align-items: center;
    padding: 10px 4px;
    font-size: var(--sub-title-font-size)
}

nav#menu .option.active {
    fill: var(--blue);
    color: var(--blue)
}

nav#menu .accessibility-title {
    font-size: var(--sup-header-font-size);
    font-weight: bold;
    padding: 16px 0;
    color: var(--blue)
}

nav#menu .option i {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    margin-right: 8px
}

nav#menu .option img, nav#menu .option svg {
    width: 100%;
    height: 100%;
    pointer-events: none
}

#body[mobile=true] {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer
}

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

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

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

.jcsb {
    justify-content: space-between
}

.jcse {
    justify-content: space-evenly
}

.jcsa {
    justify-content: space-around
}

.jcfs {
    justify-content: flex-start
}

.jcfe {
    justify-content: flex-end
}

.jcc {
    justify-content: center
}

.jsfs {
    justify-self: flex-start
}

.jsfe {
    justify-self: flex-end
}

.jsc {
    justify-self: center
}

.jsb {
    justify-self: baseline
}

.aisb {
    align-items: space-between
}

.aise {
    align-items: space-evenly
}

.aisa {
    align-items: space-around
}

.aifs {
    align-items: flex-start
}

.aife {
    align-items: flex-end
}

.aib {
    align-items: baseline
}

.aic {
    align-items: center
}

.asfs {
    align-self: flex-start
}

.asfe {
    align-self: flex-end
}

.asc {
    align-self: center
}

.asb {
    align-self: baseline
}

.fill {
    flex-grow: 1
}

.ttlc {
    text-transform: lowercase
}

.ttuc {
    text-transform: uppercase
}

.ttc {
    text-transform: capitalize
}

#site-content-mobile {
    flex-grow: 1;
    position: relative;
    z-index: 0;
    height: 0%
}

#site-content-mobile .see-more {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    font-size: var(--sup-header-font-size);
    line-height: var(--sup-header-line-height)
}

#site-content-mobile .see-more--btn {
    padding: 8px var(--mobile-padding-v);
    transform: translateX(calc(var(--mobile-padding-v) / 2));
    -webkit-transform: translateX(calc(var(--mobile-padding-v) / 2))
}

#site-content-mobile .see-more.fill {
    flex-grow: 1
}

#site-content-mobile .see-more.left {
    justify-content: flex-start
}

#site-content-mobile .see-more i {
    padding: 0;
    margin: 0
}

#site-content-mobile .mobile-section-bg {
    position: absolute;
    width: 100%;
    z-index: -1
}

#site-content-mobile .mobile-section-bg.courses-bg {
    bottom: 0;
    left: 0;
    height: 54.5%;
    background: var(--grey--dark)
}

#site-content-mobile .mobile-section {
    position: relative;
}

#site-content-mobile .mobile-section.courses {
    height: auto !important;
}

#site-content-mobile .mobile-section.footer {
    min-height: 540px;
    height: auto;
    padding: unset
}

#site-content-mobile .mobile-section.footer .base-padding.text-bold.giant {
    padding: 0 !important
}

#site-content-mobile .mobile-section.footer .base-padding.title {
    margin-top: 3px;
    padding: 0 !important
}

#site-content-mobile .mobile-section.footer .image-slider-dot {
    margin: 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: .3s;
    -webkit-transition: .3s
}

#site-content-mobile .mobile-section.footer .image-slider-main {
    touch-action: pan-x;
    touch-action: manipulation
}

#site-content-mobile .mobile-section.footer .image-slider-button.active .image-slider-dot {
    background: #fff
}

#site-content-mobile .mobile-section.footer .image-slider-button {
    padding: 0 !important
}

#site-content-mobile .mobile-section.courses .image-slider-footer-content {
    padding-top: var(--margin-default)
}

#site-content-mobile .mobile-section.footer .image-slider-footer-content {
    padding-top: var(--margin-default)
}

#site-content-mobile .mobile-section.footer .home-statistics-page-counter {
    padding: var(--margin-default) 0
}

#site-content-mobile .mobile-section.footer .image-slider-element .text-bold.giant span {
    font-size: var(--sup-header-font-size) !important
}

#site-content-mobile .mobile-section.slider .dots {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: var(--margin-default)
}

#site-content-mobile .mobile-section.slider .dot {
    opacity: 0.5;
    transition: 0.4s opacity;
}

#site-content-mobile .mobile-section.slider .dot.active {
    opacity: 1;
}

body[device="Smartphone"] #site-content-mobile .mobile-section.slider .dot {
    --font-size: var(--note-font-size) !important;
    --font-line-height: var(--note-line-height) !important;
}

#site-content-mobile .mobile-section.padding-v {
    padding: var(--mobile-padding-v)
}

#site-content-mobile .mobile-section.mobile-column {
    display: flex;
    flex-direction: column
}

#site-content-mobile .mobile-section.workshop {
    background: #fff;
    display: flex;
    flex-direction: column;
}

#site-content-mobile .mobile-section.videos {
    background: var(--brown--light)
}

#site-content-mobile .mobile-section.your-numbers {
    background: var(--pinky)
}

#site-content-mobile .mobile-section .orange--light {
    color: var(--orange--light)
}

#site-content-mobile .mobile-section .course--play i {
    font-size: var(--giant-font-size);
    transform: scale(1.6) translateY(5px);
    -webkit-transform: scale(1.6) translateY(5px)
}

#site-content-mobile .mobile-section .header--title {
    margin: 0px;
    font-size: var(--giant-font-size);
}

#site-content-mobile .mobile-section .header--description {
    margin-top: 3px;
    font-size: var(--sub-title-font-size);
    color: rgba(0, 0, 0, 0.75)
}

#site-content-mobile .mobile-section .header--description.light {
    color: rgba(255, 255, 255, 0.75)
}

#site-content-mobile .mobile-section .header--right {
    text-align: right
}

#site-content-mobile .courses-preview {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100px
}

#site-content-mobile .courses-preview-wrapper {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    height: 100%;
    touch-action: pan-x;
    touch-action: manipulation;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}

#site-content-mobile .courses-preview-wrapper>* {
    scroll-snap-align: start;
}

#site-content-mobile .courses-preview-wrapper::-webkit-scrollbar {
    height: 3px
}

#site-content-mobile .courses-preview .course-card {
    width: calc(50% - 5px);
    border: 3px solid white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    height: 100%;
    flex-shrink: 0
}

#site-content-mobile .courses-preview .course-card img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    display: block
}

#site-content-mobile .courses-preview .course-card:not(:last-child) {
    margin-right: 10px
}

#site-content-mobile .video-view-offset {
    overflow: hidden
}

#site-content-mobile .video-view-offset .videos-view {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--margin-default)
}

#site-content-mobile .video-view-offset .videos-view-wrapper {
    position: relative;
    border: 3px solid var(--brown--light--af);
    flex-grow: 1
}

#site-content-mobile .video-view-offset .videos-view .videos-wrapper {
    position: relative;
    width: 100%;
    touch-action: pan-x;
    touch-action: manipulation
}

#site-content-mobile .video-view-offset .videos-view .videos-wrapper .video {
    display: none;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: fill;
    object-position: center
}

#site-content-mobile .video-view-offset .videos-view .videos-wrapper .video.active {
    display: block;
    opacity: 1
}

#site-content-mobile .workshop-view {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

#site-content-mobile .mobile-section.workshop .rectangle {
    display: flex;
    flex-direction: column;
    transition: .3s;
    -webkit-transition: .3s;
    padding-top: calc(100% / 4 * 3);
}

#site-content-mobile .mobile-section.workshop .rectangle-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-grow: 1;
    height: 10%;
    touch-action: pan-x;
    touch-action: manipulation;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#site-content-mobile .mobile-section.workshop .rectangle-wrapper .box {
    position: relative;
    width: calc(50% - 2.5%);
    height: 100%;
    border-radius: 8px
}

#site-content-mobile .mobile-section.workshop .rectangle-wrapper .box.category {
    background: url("https://resources.growbp.pl/grow.edu/OnlyCoach.png") top center/cover no-repeat
}

#site-content-mobile .mobile-section.workshop .rectangle-wrapper .box.type {
    background: url("https://resources.growbp.pl/grow.edu/People.png") top center/cover no-repeat
}

#site-content-mobile .mobile-section.workshop .rectangle-wrapper .box .box-wrapper {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: calc(100% - 16px);
    padding: 8px;
    background: white;
    border-radius: 8px;
    font-size: var(--sup-paragraph-font-size);
    text-align: center
}

#site-content-mobile .mobile-section.workshop .rectangle-wrapper .box .box-wrapper i {
    line-height: 0;
    padding-left: 0
}

#site-content-mobile .workshop-view .workshop--title {
    font-size: var(--sub-header-font-size);
    margin-top: var(--mobile-padding-h);
    color: black;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: normal
}

#site-content-mobile .news-view-wrapper {
    position: relative;
    height: 250px;
    max-width: 540px;
    margin: auto;
    margin-top: 32px;
}

#site-content-mobile .news-view .rectangle {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 3px solid var(--brown--dark);
    overflow: hidden;
    opacity: 0;
    touch-action: pan-x;
    touch-action: manipulation;
    pointer-events: none;
    animation: .3s mobile-opacity-display forwards
}

#site-content-mobile .news-view .rectangle:not(.active) {
    display: none;
    animation: .3s mobile-opacity-display-hide forwards
}

#site-content-mobile .news-view .rectangle.active {
    pointer-events: all
}

#site-content-mobile .news-view .rectangle .news--info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--sub-title-font-size);
    line-height: var(--sub-title-line-height);
    padding: 8px
}

#site-content-mobile .news-view .rectangle .news--info i {
    font-size: var(--title-font-size);
    line-height: 0
}

#site-content-mobile .news-view .rectangle .news--title {
    height: calc(var(--font-line-height) * 2);
    max-height: 100%
}

#site-content-mobile .news-view .rectangle .news--description {
    flex-grow: 1;
    font-size: var(--sub-title-font-size);
    line-height: normal;
    padding: var(--mobile-padding-v) 0;
    overflow: hidden;
    text-overflow: ellipsis
}

#site-content-mobile .news-view .rectangle--column {
    display: flex;
    flex-direction: column
}

#site-content-mobile .news-view .rectangle-wrapper {
    padding: 8px
}

#site-content-mobile .news-view .rectangle-wrapper.description {
    flex-grow: 1;
    background: white
}

#site-content-mobile .news-view .rectangle-wrapper {
    overflow: hidden;
    background: var(--brown--light--af)
}

#site-content-mobile .ranking-cup {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 150px;
    z-index: -1
}

#site-content-mobile .mobile-section-block {
    display: flex;
    flex-direction: column;
}

#site-content-mobile .mobile-section-block.statistics {
    background: var(--pinky)
}

#site-content-mobile .mobile-section-block.footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--margin-default);
    background: var(--grey--light);
    flex-grow: 1;
    text-align: center
}

#site-content-mobile .mobile-section-block.footer .mobile-section-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

#site-content-mobile .mobile-section-block.footer .mobile-section-wrapper.column {
    display: flex;
    flex-direction: column
}

#site-content-mobile .mobile-section-block.footer .company-data {
    font-size: var(--sup-title-font-size)
}

#site-content-mobile .mobile-section-block.footer .grow-copyright {
    font-size: var(--sup-title-font-size)
}

#site-content-mobile .mobile-section-block.footer .regulations .title {
    display: flex;
    font-size: var(--sub-title-font-size)
}

#site-content-mobile .mobile-section-block.footer .regulations--btn {
    color: rgba(0, 0, 0, 0.75);
    margin-top: 4px
}

#site-content-mobile .mobile-section-block.footer .regulations span {
    margin-left: 3px
}

#site-content-mobile .mobile-section-block.footer .regulations i {
    font-size: var(--sub-huge-font-size)
}

#site-content-mobile .mobile-section-block .your-numbers-view {
    position: relative;
    margin-top: var(--margin-default);
    flex-grow: 1
}

#site-content-mobile .mobile-section-block .your-numbers-view img {
    display: block;
    width: 100%;
    height: 100%
}

#site-content-mobile .mobile-section-block .your-numbers-view .your-numbers-wrapper {
    opacity: 0;
    height: 100%;
    width: 100%
}

#site-content-mobile .mobile-section-block .your-numbers-view .your-numbers-wrapper.active {
    opacity: 1
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle {
    position: relative;
    height: 100%;
    width: 100%;
    border: 3px solid white
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle-text .text, #site-content-mobile .mobile-section-block .your-numbers-view .rectangle-text .number {
    line-height: normal;
    display: inline;
    text-align: center
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle-text .text {
    font-size: var(--sup-big-font-size)
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle-text .number {
    font-weight: bold;
    font-size: var(--giant-font-size)
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle.dark-teal {
    color: #264a4f
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle.dark-blue {
    color: #01395e
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle.teal {
    color: teal
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle.green {
    color: inherit
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle.green .number {
    color: var(--green)
}

#site-content-mobile .mobile-section-block .your-numbers-view .rectangle-bg {
    height: auto;
    width: 100%
}

#site-panel-mobile {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    transition: .3s;
    -webkit-transition: .3s;
    z-index: 10
}

#site-panel-mobile .help-desk-thread-content {
    border-radius: 12px
}

#site-panel-mobile .help-desk-thread-minimized-mobile .help-desk-thread-border {
    border-left-width: 10px
}

#site-panel-mobile.active {
    right: 0%
}

#site-panel-mobile.active .site-panel-bg {
    transition: .15s .3s;
    -webkit-transition: .15s .3s;
    opacity: 1;
    pointer-events: all
}

#site-panel-mobile .site-panel {
    display: flex;
    height: 100%
}

#site-panel-mobile .site-panel-bg {
    flex-grow: 1;
    height: 100%;
    opacity: 0;
    transition: 0s;
    -webkit-transition: 0s;
    background: rgba(0, 0, 0, 0.85);
    pointer-events: none
}

#site-panel-mobile .site-panel-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 85%;
    max-width: 400px;
    background: white
}

#site-panel-mobile .site-panel-wrapper[view=helpdesk][help-desk-thread] .site-panel-wrapper--bottom {
    display: none
}

#site-panel-mobile .site-panel-wrapper--top {
    padding-bottom: var(--margin-default);
    background: var(--grey--light--alpha);
    transition: .3s;
    -webkit-transition: .3s
}

#site-panel-mobile .site-panel-wrapper .block-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--margin-default)
}

#site-panel-mobile .site-panel-wrapper .block-options .panel--close {
    position: relative;
    padding: var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper .profile {
    display: flex;
    padding: 0 var(--mobile-padding-v)
}

#site-panel-mobile .site-panel-wrapper .profile-information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: var(--mobile-padding-h);
    line-height: normal;
    transition: .3s;
    -webkit-transition: .3s;
    min-height: 70px
}

#site-panel-mobile .site-panel-wrapper .profile-information .profile--hide {
    flex-grow: 1;
    overflow: hidden;
    transition: .3s opacity .3s, flex-grow .15s;
    -webkit-transition: .3s opacity .3s, flex-grow .15s
}

#site-panel-mobile .site-panel-wrapper .profile-information .username, #site-panel-mobile .site-panel-wrapper .profile-information .role, #site-panel-mobile .site-panel-wrapper .profile-information .email {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transition: .3s;
    -webkit-transition: .3s
}

#site-panel-mobile .site-panel-wrapper .profile-information .username {
    font-size: var(--sup-header-font-size);
    color: black;
    flex-grow: 0
}

#site-panel-mobile .site-panel-wrapper .profile-information .email, #site-panel-mobile .site-panel-wrapper .profile-information .role {
    font-size: var(--sub-title-font-size);
    color: rgba(0, 0, 0, 0.75);
    margin-top: 6px
}

#site-panel-mobile .site-panel-wrapper .profile .profile-image {
    overflow: hidden;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    min-width: 70px;
    max-width: 70px;
    min-height: 70px;
    max-height: 70px;
    transition: .3s;
    -webkit-transition: .3s
}

#site-panel-mobile .site-panel-wrapper .profile .profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

#site-panel-mobile .site-panel-wrapper .profile.active .profile-image {
    width: 45px;
    height: 45px;
    min-width: 45px;
    max-width: 45px;
    min-height: 45px;
    max-height: 45px
}

#site-panel-mobile .site-panel-wrapper .profile.active .profile-information {
    min-height: 0px
}

#site-panel-mobile .site-panel-wrapper .profile.active .profile-information .username {
    flex-grow: 1
}

#site-panel-mobile .site-panel-wrapper .profile.active .profile--hide {
    height: 0px;
    flex-grow: 0;
    opacity: 0;
    transition: .1s opacity, flex-grow .3s;
    -webkit-transition: .1s opacity, flex-grow .3s
}

#site-panel-mobile .site-panel-wrapper .regulations {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper .regulations i {
    font-size: var(--sub-header-font-size);
    color: var(--green);
    margin-left: 3px;
    line-height: 0
}

#site-panel-mobile .site-panel-wrapper .language {
    height: 20px;
    position: relative;
    padding: 0 4px
}

#site-panel-mobile .site-panel-wrapper .language--current {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

#site-panel-mobile .site-panel-wrapper .language i {
    right: 0;
    position: absolute;
    font-size: var(--sub-paragraph-font-siz);
    line-height: 0;
    margin-left: 3px;
    transform: translate(100%, 3px) scale(1.6);
    -webkit-transform: translate(100%, 3px) scale(1.6)
}

#site-panel-mobile .site-panel-wrapper .language.active i::before {
    content: '\0056'
}

#site-panel-mobile .site-panel-wrapper .language img {
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: center
}

#site-panel-mobile .site-panel-wrapper .language-wrapper {
    position: absolute;
    left: 50%;
    bottom: -15px;
    min-width: 100%;
    transform: translate(-50%, 100%);
    transition: .3s;
    -webkit-transition: .3s;
    pointer-events: none;
    max-height: 0px;
    overflow: hidden;
    background: #eeeeee;
    z-index: 5
}

#site-panel-mobile .site-panel-wrapper .language-wrapper .flag {
    display: flex;
    flex-direction: column;
    padding: 8px;
    height: 100%;
    width: 100%
}

#site-panel-mobile .site-panel-wrapper .language-wrapper .flag img {
    max-height: 20px
}

#site-panel-mobile .site-panel-wrapper .language-wrapper .name {
    text-transform: uppercase;
    text-align: center
}

#site-panel-mobile .site-panel-wrapper .language.active .language-wrapper {
    pointer-events: all
}

#site-panel-mobile .site-panel-wrapper--nav {
    position: relative
}

#site-panel-mobile .site-panel-wrapper--nav .nav--line {
    position: absolute;
    bottom: 17px;
    left: 0;
    opacity: 0;
    width: 80px;
    height: 2px;
    border-radius: 25px;
    background: var(--purple--strong);
    transition: .3s;
    -webkit-transition: .3s
}

#site-panel-mobile .site-panel-wrapper--nav .nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper--nav .nav-wrapper.active+.nav--line {
    opacity: 1
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    transform: translate(0%, -20px);
    -webkit-transform: translate(0%, -20px);
    width: 0%;
    flex-grow: 1;
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item .circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: white;
    padding: 8px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    border-radius: 50%
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item .circle .notifications--count {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    font-size: var(--sub-paragraph-font-size);
    background: var(--purple--strong);
    opacity: 0;
    border-radius: 50px
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item .circle .notifications--count::before {
    display: inline;
    content: attr(counts);
    color: white
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item .circle.active .notifications--count {
    opacity: 1
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item.active .nav-item--name {
    color: var(--purple--strong)
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item--name {
    margin-top: 6px;
    color: rgba(0, 0, 0, 0.75)
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item i {
    line-height: 0;
    font-size: var(--sup-header-font-size);
    transform: translateY(3px) scale(1.6);
    -webkit-transform: translateY(3px) scale(1.6)
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item.notifications i {
    color: var(--orange--light)
}

#site-panel-mobile .site-panel-wrapper--nav .nav-item.events i {
    color: var(--blue)
}

#site-panel-mobile .site-panel-wrapper-content {
    position: relative;
    flex-grow: 1;
    width: 100%
}

#site-panel-mobile .site-panel-wrapper-content .content-block {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

#site-panel-mobile .site-panel-wrapper-content .content-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1
}

#site-panel-mobile .site-panel-wrapper-content .content-wrapper.helpdesk .help-desk-thread>.help-desk-thread-content {
    border: none
}

#site-panel-mobile .site-panel-wrapper-content .content-wrapper:not(.active) {
    opacity: 0;
    z-index: 0;
    display: none;
    pointer-events: none
}

#site-panel-mobile .site-panel-wrapper-content .content-wrapper .padding-v {
    padding: 0 var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper-content hr {
    display: block;
    border: none;
    width: 100%;
    height: 1px;
    margin: var(--mobile-padding-h) 0;
    background: var(--grey--light--alpha)
}

#site-panel-mobile .site-panel-wrapper--bottom {
    position: relative;
    height: 50px;
    width: 100%
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom-wrapper {
    height: 100%;
    width: 100%;
    pointer-events: all;
    z-index: 1
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom-wrapper:not(.active) {
    display: none;
    opacity: 0;
    z-index: 0;
    pointer-events: none
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--brown);
    color: white;
    overflow: hidden
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn i {
    font-size: var(--sub-huge-font-size);
    line-height: normal;
    transform: translateY(6px) scale(1.6);
    -webkit-transform: translateY(6px) scale(1.6)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn span {
    font-size: var(--sup-header-font-size);
    line-height: normal;
    margin-left: 8px
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.back {
    background: var(--grey--light--alpha);
    color: black
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send--btn {
    background: white
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send {
    position: relative;
    color: rgba(0, 0, 0, 0.75)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .answer-send-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--brown--light);
    height: 100%;
    width: 100%
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer {
    position: absolute;
    max-height: 0px;
    background: white;
    overflow: hidden;
    width: 100%;
    bottom: 100%;
    left: 0;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transition: .3s;
    -webkit-transition: .3s;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--mobile-padding-h);
    border: 6px solid var(--brown--light);
    border-bottom: none
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-answer--close {
    position: absolute;
    top: 0px;
    right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    width: 32px;
    height: 32px;
    align-self: flex-end
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-answer--close i {
    font-size: var(--sub-title-font-size)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: var(--mobile-padding-h) 0;
    margin-top: var(--margin-default)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-buttons .button {
    display: flex;
    flex-direction: column;
    align-items: center
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-buttons .button i {
    font-size: var(--sub-big-font-size);
    line-height: 90%
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-buttons .button i.icon-link {
    color: var(--blue)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-buttons .line {
    height: auto;
    width: 1px;
    background: rgba(0, 0, 0, 0.25)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .popup-buttons p {
    font-size: var(--sup-paragraph-font-size);
    margin-top: 6px
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .message-wrapper {
    position: relative;
    width: 100%
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .message-wrapper .attachment--btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--grey--light--alpha);
    border-radius: 4px
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .message-wrapper .attachment--btn i {
    color: rgba(0, 0, 0, 0.75);
    font-size: var(--sub-big-font-size);
    transform: translateY(3px) scale(1.6);
    -webkit-transform: translateY(3px) scale(1.6)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer .message {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--grey--light--alpha);
    border-radius: 8px;
    font-size: var(--sup-title-font-size);
    appearance: none;
    -webkit-appearance: none
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer-send .popup-answer:placegolder {
    color: rgba(0, 0, 0, 0.75)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer {
    position: relative;
    color: rgba(0, 0, 0, 0.75)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer .answer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--brown--light);
    width: 100%;
    height: 100%
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer .answer-wrapper span {
    margin-left: 0px;
    margin-right: var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer .answer-wrapper i {
    font-size: var(--sup-header-font-size)
}

#site-panel-mobile .site-panel-wrapper--bottom .bottom--btn.answer.active .answer-wrapper i::before {
    content: '\0055'
}

#site-panel-mobile .site-panel-wrapper .subpages {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

#site-panel-mobile .site-panel-wrapper .subpages hr {
    margin: 8px 0
}

#site-panel-mobile .site-panel-wrapper .subpages-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

#site-panel-mobile .site-panel-wrapper .subpages-circle .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: white;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1)
}

#site-panel-mobile .site-panel-wrapper .subpages-circle .circle.users {
    color: var(--purple--strong)
}

#site-panel-mobile .site-panel-wrapper .subpages-circle p {
    margin-top: 6px;
    color: rgba(0, 0, 0, 0.75);
    line-height: normal
}

#site-panel-mobile .site-panel-wrapper .subpages-circle i {
    line-height: 0;
    font-size: var(--sup-big-font-size)
}

#site-panel-mobile .site-panel-wrapper .subpages-other {
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 16px !important
}

#site-panel-mobile .site-panel-wrapper .subpages-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    height: 0%;
    max-height: 300px
}

#site-panel-mobile .site-panel-wrapper .subpages-link {
    padding: 8px 0
}

#site-panel-mobile .site-panel-wrapper .subpages-link .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%
}

#site-panel-mobile .site-panel-wrapper .subpages-link span {
    font-size: var(--sub-header-font-size);
    margin-left: var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper .subpages-link i {
    font-size: var(--sub-big-font-size);
    line-height: 0;
    transform: translateY(4px) scale(1.6);
    -webkit-transform: translateY(4px) scale(1.6)
}

#site-panel-mobile .site-panel-wrapper .notifications .notification-minimized .notification-content .notification-border {
    border-left-width: 10px !important
}

#site-panel-mobile .site-panel-wrapper .notifications .notification-minimized .notification-content {
    border-radius: 8px !important
}

#site-panel-mobile .site-panel-wrapper .notifications .notification-date.sup-note {
    font-size: var(--sup-paragraph-font-size) !important;
    margin-top: 3px
}

#site-panel-mobile .site-panel-wrapper .notifications .notification-icon.title {
    font-size: var(--header-font-size) !important
}

#site-panel-mobile .site-panel-wrapper .notifications .notification-list-header i {
    font-size: var(--sup-paragraph-font-size) !important
}

#site-panel-mobile .site-panel-wrapper .notifications--data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper .notifications--data .data {
    font-size: var(--sub-header-font-size)
}

#site-panel-mobile .site-panel-wrapper .notifications--data i {
    line-height: 0;
    font-size: var(--sup-title-font-size);
    padding: 8px
}

#site-panel-mobile .site-panel-wrapper .notifications-wrapper:not(:first-child) {
    margin-top: var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper-content .events {
    height: 100%
}

#site-panel-mobile .site-panel-wrapper-content .events-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column
}

#site-panel-mobile .site-panel-wrapper-content .events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--margin-default)
}

#site-panel-mobile .site-panel-wrapper-content .events-header .events--btn {
    flex-grow: 1;
    transition: .3s;
    -webkit-transition: .3s;
    text-align: center;
    font-size: var(--sub-header-font-size);
    padding: 8px var(--mobile-padding-v)
}

#site-panel-mobile .site-panel-wrapper-content .events-header .events--btn.active {
    background: var(--grey--light--alpha);
    pointer-events: none
}

#site-panel-mobile .site-panel-wrapper-content .events-header .events--btn:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px
}

#site-panel-mobile .site-panel-wrapper-content .events-header .events--btn:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px
}

#site-panel-mobile .site-panel-wrapper-content .events span.lack {
    font-size: var(--sub-title-font-size);
    font-style: italic;
    color: rgba(0, 0, 0, 0.75)
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header {
    position: relative;
    margin-bottom: var(--mobile-padding-v)
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion, #site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion-item {
    font-size: var(--sub-header-font-size);
    padding: var(--mobile-padding-v) 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion.active {
    transition: .2s .1s;
    -webkit-transition: .2s .1s
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion.active i::before {
    content: '\0056'
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion-wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    overflow: hidden;
    max-height: 0px;
    transition: .3s;
    -webkit-transition: .3s;
    pointer-events: none;
    z-index: 5
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion.active+.accordion-wrapper {
    pointer-events: all
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion-item {
    border-top: 1px solid var(--grey--light);
    background: white
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion-item.active {
    pointer-events: none;
    color: #D1914B
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion-item.active .title {
    color: #D1914B
}

#site-panel-mobile .site-panel-wrapper-content .events .content-header .accordion-item i {
    visibility: hidden
}

#site-panel-mobile .site-panel-wrapper-content .events-content-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1
}

#site-panel-mobile .site-panel-wrapper-content .events-content {
    box-shadow: none !important;
    display: none;
    flex-direction: column;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    pointer-events: none
}

#site-panel-mobile .site-panel-wrapper-content .events-content.active {
    display: flex;
    opacity: 1;
    pointer-events: all
}

#site-panel-mobile .site-panel-wrapper-content .events-content.reminds {
    overflow: hidden
}

#site-panel-mobile .site-panel-wrapper-content .events-content.reminds .content-header .title {
    flex-grow: 1;
    font-size: var(--sub-header-font-size) !important;
    line-height: normal !important;
    color: black
}

#site-panel-mobile .site-panel-wrapper-content .events-content.reminds .content-header .number {
    margin-right: var(--margin-default)
}

#site-panel-mobile .site-panel-wrapper-content .events .reminds-content {
    position: relative;
    flex-grow: 1;
    overflow-y: auto
}

#site-panel-mobile .site-panel-wrapper-content .events .reminds-content .reminds-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    overflow-y: auto
}

#site-panel-mobile .site-panel-wrapper-content .events .reminds-content .reminds-wrapper.active {
    pointer-events: all;
    opacity: 1
}

#site-panel-mobile .site-panel-wrapper .helpdesk--content .helpdesk-wrapper {
    display: none;
    flex-direction: column
}

#site-panel-mobile .site-panel-wrapper .helpdesk--content .helpdesk-wrapper.active {
    display: flex
}

#site-panel-mobile .site-panel-wrapper .helpdesk--content .helpdesk-wrapper .back {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: var(--sup-paragraph-font-size)
}

#site-panel-mobile .site-panel-wrapper .helpdesk--content .helpdesk-wrapper .back i {
    line-height: 0;
    margin-right: var(--mobile-padding-v)
}

#site-panel-mobile .site-panel-wrapper .helpdesk--content .helpdesk-wrapper.current .helpdesk-content {
    padding-top: var(--margin-default)
}

#site-panel-mobile .site-panel-wrapper .settings--content {
    height: 100%
}

#site-panel-mobile .site-panel-wrapper .settings--content .settings-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow-y: auto
}

#site-panel-mobile .site-panel-wrapper .settings--content .form {
    margin-top: var(--margin-default)
}

#site-panel-mobile .site-panel-wrapper .settings--content .profile-image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 180px;
    min-height: 120px;
    max-height: 180px;
    overflow: hidden
}

#site-panel-mobile .site-panel-wrapper .settings--content .input--pwd, #site-panel-mobile .site-panel-wrapper .settings--content .button--submit {
    padding: 8px var(--mobile-padding-v);
    border-width: 1px;
    border-style: solid;
    font-size: var(--sup-title-font-size);
    width: 100%;
    appearance: none;
    -webkit-appearance: none
}

#site-panel-mobile .site-panel-wrapper .settings--content .input--pwd {
    border-color: var(--grey--light--alpha);
    color: black
}

#site-panel-mobile .site-panel-wrapper .settings--content .input--pwd:placeholder {
    color: rgba(0, 0, 0, 0.75)
}

#site-panel-mobile .site-panel-wrapper .settings--content .input--pwd:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-bottom: var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper .settings--content .input--pwd:nth-child(3) {
    border-top: none
}

#site-panel-mobile .site-panel-wrapper .settings--content .input--pwd:nth-of-type(1) {
    border-radius: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-bottom: var(--mobile-padding-h)
}

#site-panel-mobile .site-panel-wrapper .settings--content .input--pwd:nth-of-type(2) {
    border-radius: 0px
}

#site-panel-mobile .site-panel-wrapper .settings--content .input--pwd:nth-of-type(3) {
    border-top: none;
    border-radius: 0px
}

#site-panel-mobile .site-panel-wrapper .settings--content .button--submit {
    border-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: var(--green);
    border-color: var(--green);
    color: white
}

#site-panel-mobile .site-panel-wrapper .settings--content .title {
    color: black;
    font-size: var(--sub-header-font-size) !important;
    line-height: normal !important;
    text-transform: uppercase;
    margin-bottom: var(--mobile-padding-h);
    font-weight: bold
}

mobile-card {
    display: block
}

mobile-card .card {
    display: flex;
    border: 1px solid var(--grey--light);
    border-radius: 8px;
    overflow: hidden;
    background: white
}

mobile-card .card.workshop .border-left {
    background: var(--color-workshop)
}

mobile-card .card.news .border-left {
    background: var(--brown)
}

mobile-card .card.purple .border-left {
    background: var(--purple--strong)
}

mobile-card .card.green .border-left {
    background: var(--green)
}

mobile-card .card.information {
    flex-direction: column;
    padding: var(--mobile-padding-h);
    border: none
}

mobile-card .card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--mobile-padding-v)
}

mobile-card .card-icon i {
    line-height: 0;
    font-size: var(--sub-header-font-size);
    padding: 0
}

mobile-card .card .border-left {
    height: auto;
    min-width: 10px
}

mobile-card .card .information {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 8px;
    flex-grow: 1;
    overflow: hidden
}

mobile-card .card .information-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

mobile-card .card .data, mobile-card .card .deadline {
    display: flex;
    margin-top: 3px
}

mobile-card .card .data span, mobile-card .card .deadline span {
    color: rgba(0, 0, 0, 0.75);
    white-space: pre-wrap
}

mobile-card .card .data, mobile-card .card .deadline {
    font-size: var(--sup-paragraph-font-size) !important
}

mobile-card .card .title, mobile-card .card .data, mobile-card .card .deadline {
    line-height: normal !important
}

mobile-card .card .title {
    font-size: var(--sub-title-font-size) !important;
    color: black
}

mobile-card .card .trash {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 8px;
    font-size: var(--sub-title-font-size)
}

mobile-card .card .trash i {
    padding: 0
}

mobile-card .card .card-img {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 8px;
    margin-right: 0;
    min-width: 18px
}

mobile-card .card .card-img img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%
}

mobile-card[type=notification] .title {
    font-size: var(--sup-paragraph-font-size)
}

mobile-card[type=helpdesk] .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

mobile-card[type=helpdesk] .title .user {
    word-break: break-word;
    white-space: pre-wrap;
    font-size: var(--sub-title-font-size);
    color: black
}

mobile-card[type=helpdesk] .title .category {
    font-size: var(--sub-paragraph-font-size);
    color: rgba(0, 0, 0, 0.75);
    text-align: right
}

mobile-card[type=helpdesk] .description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px
}

mobile-card[type=helpdesk] .description .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-grow: 1
}

mobile-card[type=helpdesk] .attachment {
    display: flex;
    align-items: center;
    font-size: var(--sup-paragraph-font-size);
    color: rgba(0, 0, 0, 0.75)
}

mobile-card[type=helpdesk] .attachment .number {
    margin-left: 1px
}

mobile-card[type=helpdesk] .attachment i {
    line-height: 0
}

mobile-card[type=helpdesk] .data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--sub-paragraph-font-size);
    color: rgba(0, 0, 0, 0.75)
}

mobile-card[type=helpdesk] .data .period {
    width: unset
}

mobile-card[type=helpdeskAnswer] {
    overflow: visible
}

mobile-card[type=helpdeskAnswer] .information-wrapper {
    overflow: visible
}

mobile-card[type=helpdeskAnswer] .title {
    display: flex;
    justify-content: space-between;
    align-items: center
}

mobile-card[type=helpdeskAnswer] .title .user {
    word-break: break-word;
    white-space: pre-wrap;
    font-size: var(--sub-title-font-size);
    color: black
}

mobile-card[type=helpdeskAnswer] .title .category {
    font-size: var(--sub-paragraph-font-size);
    color: rgba(0, 0, 0, 0.75)
}

mobile-card[type=helpdeskAnswer] .description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px
}

mobile-card[type=helpdeskAnswer] .description .text {
    white-space: pre-wrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-grow: 1
}

mobile-card[type=helpdeskAnswer] .data {
    display: flex;
    justify-content: space-between;
    align-items: center
}

mobile-card[type=helpdeskAnswer] .attachment {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 30px;
    height: 30px;
    background: #c4c4c4;
    border-radius: 50%
}

mobile-card[type=helpdeskAnswer] .attachment i {
    line-height: 0;
    font-size: var(--sup-title-font-size);
    color: white;
    transform: translateY(3px) scale(1.6);
    -webkit-transform: translateY(3px) scale(1.6)
}

mobile-card[type=helpdeskAnswer] .attachment .number {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 21px;
    height: 21px;
    right: -4px;
    bottom: -4px;
    background: var(--purple--strong);
    border-radius: 50%;
    color: white
}

mobile-card[type=helpdeskInformation] {
    border-top: 1px solid rgba(0, 0, 0, 0.25)
}

mobile-card[type=helpdeskInformation] .data, mobile-card[type=helpdeskInformation] .description {
    font-size: var(--sub-title-font-size) !important;
    text-align: center;
    margin: auto
}

mobile-card[type=helpdeskInformation] .data {
    color: rgba(0, 0, 0, 0.75);
    padding-bottom: var(--mobile-padding-h)
}

.course-mobile-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.85);
    padding: var(--mobile-padding-h)
}

.course-mobile-popup .title {
    font-size: var(--sup-header-font-size) !important;
    line-height: normal !important
}

.course-mobile-popup.news .popup-wrapper {
    background: white
}

.course-mobile-popup.news .header {
    background: var(--brown--dark)
}

.course-mobile-popup.news .header i {
    line-height: 0;
    font-size: var(--sup-paragraph-font-size)
}

.course-mobile-popup.news .title {
    color: white !important;
    margin-bottom: var(--mobile-padding-h)
}

.course-mobile-popup.news .data-wrapper, .course-mobile-popup.news .category-wrapper {
    font-size: var(--sub-paragraph-font-size)
}

.course-mobile-popup.news .data-wrapper {
    color: rgba(255, 255, 255, 0.75)
}

.course-mobile-popup.news .category-wrapper {
    color: var(--green)
}

.course-mobile-popup.news .information {
    display: flex
}

.course-mobile-popup.news .information-wrapper {
    display: flex;
    justify-content: center;
    align-items: center
}

.course-mobile-popup.news .information-wrapper span {
    margin-left: 6px
}

.course-mobile-popup.news .category-wrapper {
    margin-left: var(--mobile-padding-v)
}

.course-mobile-popup.news .content {
    padding: var(--mobile-padding-h);
    padding-top: var(--margin-default);
    font-size: var(--sup-title-font-size);
    color: rgba(0, 0, 0, 0.75)
}

.course-mobile-popup.course .popup-wrapper {
    display: flex;
    flex-direction: column;
    background: linear-gradient(209.03deg, #A5ACB6 17.85%, #89929F 56.11%)
}

.course-mobile-popup.course .popup-wrapper .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white !important;
    padding-bottom: var(--mobile-padding-h);
    border-bottom: 1px solid rgba(0, 0, 0, 0.75)
}

.course-mobile-popup.course .popup-wrapper .information {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--mobile-padding-h)
}

.course-mobile-popup.course .popup-wrapper .information span, .course-mobile-popup.course .popup-wrapper .information i {
    color: white
}

.course-mobile-popup.course .popup-wrapper .information span {
    margin-left: 3px;
    font-size: var(--sub-title-font-siz)
}

.course-mobile-popup.course .popup-wrapper .information i {
    font-size: var(--sup-title-font-size);
    line-height: 0
}

.course-mobile-popup.course .popup-wrapper .information .category-wrapper i {
    font-size: var(--sub-header-font-size)
}

.course-mobile-popup.course .popup-wrapper .information-wrapper {
    display: flex;
    align-items: center
}

.course-mobile-popup.course .popup-wrapper .information .row {
    display: flex;
    align-items: center
}

.course-mobile-popup.course .popup-wrapper .information .row:not(:first-child) {
    margin-left: 6px
}

.course-mobile-popup.course .popup-wrapper .content {
    flex-grow: 1;
    padding: 0 var(--mobile-padding-v);
    margin: var(--mobile-padding-v) 0;
    overflow-y: auto;
    font-size: var(--sub-title-font-size);
    color: white
}

.course-mobile-popup.course .popup-wrapper .content .content-list {
    overflow-y: scroll
}

.course-mobile-popup.course .popup-wrapper .content h3 {
    display: flex;
    color: white;
    opacity: .5;
    font-size: var(--sup-title-font-size);
    margin-bottom: var(--mobile-padding-h)
}

.course-mobile-popup.course .popup-wrapper .content h4 {
    font-size: var(--sub-title-font-size);
    margin-bottom: 5px
}

.course-mobile-popup.course .popup-wrapper .content .competences-wrapper {
    margin-bottom: 8px
}

.course-mobile-popup.course .popup-wrapper .content p.description {
    font-size: var(--sup-paragraph-font-size);
    opacity: .5
}

.course-mobile-popup.course .popup-wrapper .content .number {
    margin-right: 5px
}

.course-mobile-popup.course .popup-wrapper .content i {
    margin-right: 5px
}

.course-mobile-popup.course .popup-wrapper .content .program li {
    list-style: none;
    font-size: var(--sub-title-font-siz)
}

.course-mobile-popup.course .popup-wrapper .content .program li:not(:first-child) {
    margin-top: var(--mobile-padding-h)
}

.course-mobile-popup.course .popup-wrapper .content-wrapper {
    display: none;
    height: 100%
}

.course-mobile-popup.course .popup-wrapper .content-wrapper.active {
    display: flex;
    flex-direction: column
}

.course-mobile-popup.course .popup-wrapper .data-wrapper {
    display: flex;
    align-items: center;
    color: white;
    margin: 0 var(--mobile-padding-v);
    margin-top: var(--mobile-padding-v)
}

.course-mobile-popup.course .popup-wrapper .data-wrapper .data {
    padding: 6px 8px;
    background: var(--orange--light);
    border-radius: 8px
}

.course-mobile-popup.course .popup-wrapper .data-wrapper span, .course-mobile-popup.course .popup-wrapper .data-wrapper i {
    font-size: var(--sub-title-font-size)
}

.course-mobile-popup.course .popup-wrapper .data-wrapper span {
    margin-left: 6px
}

.course-mobile-popup.course .popup-wrapper .data-wrapper i {
    line-height: 0
}

.course-mobile-popup.course .popup-wrapper .play--btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--purple);
    font-size: var(--sup-huge-font-size);
    width: 40px;
    height: 40px;
    line-height: 0
}

.course-mobile-popup.course .popup-wrapper .play--btn i {
    transform: translateY(3px) scale(1.6);
    -webkit-transform: translateY(3px) scale(1.6)
}

.course-mobile-popup.course .popup-wrapper .course-navigation {
    display: flex
}

.course-mobile-popup.course .popup-wrapper .course-navigation .btn--navigation {
    max-width: calc(100% / 3);
    flex-grow: 1;
    padding: var(--mobile-padding-v);
    text-align: center;
    background: #575F6Bff;
    font-size: var(--sub-title-font-size);
    color: white;
    transition: .3s;
    -webkit-transition: .3s
}

.course-mobile-popup.course .popup-wrapper .course-navigation .btn--navigation.active {
    background: #575F6B00
}

.course-mobile-popup .popup-wrapper {
    height: 70%;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-top: var(--margin-default)
}

.course-mobile-popup .popup-wrapper.helpdesk {
    height: 80%
}

.course-mobile-popup .header {
    width: 100%;
    padding: var(--mobile-padding-h) var(--mobile-padding-v)
}

.course-mobile-popup .back {
    color: white;
    font-size: var(--sup-paragraph-font-size)
}

.course-mobile-popup .back i {
    font-size: var(--sub-header-font-size);
    transform: translateY(3px) scale(1.6);
    -webkit-transform: translateY(3px) scale(1.6);
    margin-right: 3px
}

.course-mobile-popup .arrows {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--margin-default)
}

.course-mobile-popup .arrows .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25)
}

.course-mobile-popup .arrows .arrow i {
    font-size: var(--sup-huge-font-size);
    line-height: 0;
    transform: translateY(3px) scale(1.6);
    -webkit-transform: translateY(3px) scale(1.6)
}

mobile-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.85);
    padding: var(--mobile-padding-h)
}

mobile-popup.helpdesk {
    padding-bottom: 4px
}

mobile-popup.helpdesk .back {
    padding-top: var(--mobile-padding-h);
    padding-left: var(--mobile-padding-h)
}

mobile-popup.helpdesk .choosen {
    font-size: var(--sub-header-font-size);
    transition: .3s;
    -webkit-transition: .3s
}

mobile-popup.helpdesk .header {
    margin-bottom: var(--mobile-padding-v);
    padding: 0
}

mobile-popup.helpdesk .header h3 {
    color: white;
    font-size: var(--sub-header-font-size)
}

mobile-popup.helpdesk .choosen--delete {
    opacity: 0;
    pointer-events: none
}

mobile-popup.helpdesk .gallery {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr;
    overflow-y: auto;
    height: 100%;
    scroll-width: none;
    flex-grow: 1
}

mobile-popup.helpdesk .gallery::-webkit-scrollbar {
    display: none
}

mobile-popup.helpdesk .gallery.more {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(auto-fill, 100px)
}

mobile-popup.helpdesk .gallery img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: brightness(1);
    transition: filter .3s;
    -webkit-transition: filter .3s
}

mobile-popup.helpdesk .image {
    position: relative
}

mobile-popup.helpdesk .image .check {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    -webkit-transition: .3s;
    border-radius: 50%;
    background: var(--green);
    border: 1px solid white;
    width: 26px;
    height: 26px
}

mobile-popup.helpdesk .image .check i {
    line-height: 0;
    font-size: var(--sup-paragraph-font-size);
    color: white;
    transform: scale(1.6) translateY(1px);
    -webkit-transform: scale(1.6) translateY(1px)
}

mobile-popup.helpdesk .image.active img {
    filter: brightness(0.65)
}

mobile-popup.helpdesk .image.active .check {
    opacity: 1
}

mobile-popup.helpdesk .bottom--helpdesk.active .circle {
    background: var(--green)
}

mobile-popup.helpdesk .bottom--helpdesk.active .choosen--delete {
    opacity: 1;
    pointer-events: all
}

mobile-popup.helpdesk .bottom--helpdesk.active #helpdesk--images {
    pointer-events: all
}

mobile-popup.helpdesk .bottom--helpdesk #helpdesk--images {
    pointer-events: none
}

mobile-popup.helpdesk .circle {
    background: var(--grey);
    transition: .3s;
    -webkit-transition: .3s
}

mobile-popup.helpdesk .circle i {
    color: white
}

mobile-popup.helpdesk .popup-wrapper {
    flex-grow: 1;
    padding: 0 var(--mobile-padding-h);
    margin-bottom: 40px
}

@media screen and (min-height: 700px) {
    #site-panel-mobile .site-panel-wrapper .subpages {
        justify-content: space-evenly
    }

    #site-panel-mobile .site-panel-wrapper .subpages-wrapper {
        max-height: unset;
        justify-content: space-around
    }

    #site-panel-mobile .mobile-section .course-view {
        margin: 0
    }

    #site-panel-mobile .course-view-controller {
        height: 0;
        flex-grow: 1
    }
}

@media screen and (max-height: 720px) {
    #site-panel-mobile .site-panel-wrapper .subpages-link {
        padding: 6px 0px
    }

    #site-panel-mobile .site-panel-wrapper .settings--content .profile-image {
        width: 120px
    }
}

@media only screen and (max-width: 375px) {
    :root {
        --margin-default: 24px
    }

    #site-panel-mobile .mobile-section .course-view-image img {
        max-height: 140px;
        object-fit: cover;
        object-position: bottom center
    }

    #site-panel-mobile .site-panel-wrapper .profile .profile-image {
        overflow: hidden;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        min-width: 50px;
        max-width: 50px;
        min-height: 50px;
        max-height: 50px
    }

    #site-panel-mobile .site-panel-wrapper .profile.active .profile-image {
        width: 35px;
        height: 35px;
        min-width: 35px;
        max-width: 35px;
        min-height: 35px;
        max-height: 35px
    }
}

@media only screen and (max-width: 375px) and (max-height: 634px) {
    #site-panel-mobile .site-panel-wrapper .subpages-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: space-between;
        align-items: center;
        max-height: unset
    }

    #site-panel-mobile .site-panel-wrapper .subpages-link {
        flex-direction: column;
        align-items: center
    }

    #site-panel-mobile .site-panel-wrapper .subpages-link .circle {
        width: 50px;
        height: 50px;
        padding: 15px;
        background: white;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1)
    }

    #site-panel-mobile .site-panel-wrapper .subpages-link span {
        font-size: var(--sup-paragraph-font-size);
        margin-left: 0;
        margin-top: 4px;
        white-space: nowrap
    }

    #site-panel-mobile .site-panel-wrapper .subpages-link i {
        font-size: var(--sub-big-font-size);
        line-height: 0;
        transform: translateY(4px) scale(1.6);
        -webkit-transform: translateY(4px) scale(1.6)
    }
}

body[mobile="true"][orientation="landscape"] #site-panel-mobile .site-panel-wrapper-content .subpages-other {
    display: none !important;
}

body[mobile="true"][orientation="landscape"] #site-panel-mobile .site-panel-wrapper .block-options {
    margin-bottom: 0px !important;
}

body[mobile="true"][orientation="landscape"] #site-panel-mobile .site-panel-wrapper .profile .profile-image {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
}

body[mobile="true"][orientation="landscape"] #site-panel-mobile .site-panel-wrapper .profile .profile--hide {
    height: 0px !important;
    min-height: 0px !important;
    max-height: 0px !important;
}

body[mobile="true"][orientation="landscape"] #site-panel-mobile .site-panel-wrapper .profile .profile-information {
    min-height: 0px !important;
}

body[mobile="true"][orientation="landscape"] #site-panel-mobile .site-panel-wrapper .profile .profile-information .username {
    flex-grow: 1;
}

/* Template/Template.css */

html {
    width: 100%;
    height: 100%;

    overflow: hidden;
}

body {
    background-color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#site {
    background-color: white;
    /* background-image: url('https://resources.growbp.pl/grow.edu/Bulb.png');
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat; */
}

#site-content {
    flex-grow: 1;
    position: relative;
    z-index: 0;
    height: 0%;
}

.switch-bar {
    background-color: rgb(239, 239, 239);
    color: rgb(0, 0, 0);
    border-radius: var(--base-padding);
    display: flex;
    position: relative;
}

.switch-bar-button {
    cursor: pointer;
    flex-grow: 1;
    width: 0%;
    position: relative;
    z-index: 1;
}

.switch-bar::before {
    content: '';
    display: block;
    background-color: rgb(223, 223, 223);
    border-radius: var(--base-padding);
    position: absolute;
    left: calc(100% * (var(--current) / var(--elements)));
    top: 0px;
    width: calc(100% / var(--elements));
    height: 100%;
    z-index: 0;
    transition: 0.25s left;
}

.switch-bar-main:not(.active) {
    display: none !important;
}

.notification-count-controller {
    border-radius: 100%;
    background-color: rgb(110, 167, 50);
    color: white;
    width: 24px;
    height: 24px;
}

.help-desk-thread-count-controller {
    border-radius: 100%;
    background-color: rgb(167, 50, 110);
    color: white;
    width: 24px;
    height: 24px;
}

.after-colon::after {
    content: ":";
}

.after-slash::after {
    content: "/";
}

.mobile-preview-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mobile-preview-sidebar .content {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
}

.mobile-preview-sidebar[view="article"] .content {
    display: flex;
    flex-direction: column;
    padding: unset;
    flex-shrink: 0;
    width: 100%;
}

.mobile-preview-sidebar:not(.active) .arrow {
    opacity: 0;
}

.mobile-preview-sidebar .navigator button,
.mobile-preview-sidebar .navigator .navigator-button {
    padding: calc(var(--base-padding) * 2) 0px;
    text-align: center;
}

.mobile-subpage .tile {
    padding: 8px;
}

/* tablet portrait */
@media (min-width: 600px) and (min-height: 500px) {

    #body[orientation="portrait"] .bottom-bar .sidebar-down .rail {
        padding: 8px 24px !important;
    }

    #body[orientation="portrait"] .bottom-bar[view="workshop"] .sidebar-down .rail {
        padding: 24px 24px !important;
    }

    #body[orientation="portrait"] .bottom-bar[view="article"] .mobile-popup.news .popup-wrapper .margin-left {
        margin-left: 4px;
    }

    #body[orientation="portrait"] .bottom-bar .sidebar-down .sub-title {
        font-size: var(--header-font-size) !important;
        line-height: var(--header-line-height) !important;
    }

    #body[orientation="portrait"] .mobile-preview-sidebar .competences-list p {
        font-size: var(--header-font-size) !important;
        line-height: var(--header-line-height) !important;
    }

    #body[orientation="portrait"] .mobile-preview-sidebar .competences-list li .counter {
        font-size: var(--sup-header-font-size) !important;
        line-height: var(--sup-header-line-height) !important;
    }

    #body[orientation="portrait"] .bottom-bar .sidebar-down .sup-title {
        font-size: var(--sup-header-font-size) !important;
        line-height: var(--sup-header-line-height) !important;
    }

    #body[orientation="portrait"] .bottom-bar .sidebar-down .rail .course--title {
        font-size: var(--sub-huge-font-size) !important;
        line-height: var(--sub-huge-line-height) !important;
    }

    #body[orientation="portrait"] .bottom-bar[view="video"] .sidebar-down .rail {
        padding: 0px !important;
    }

    #body[orientation="portrait"] .bottom-bar[view="video"] .sidebar-down .video--title {
        font-size: var(--sub-huge-font-size) !important;
        line-height: var(--sub-huge-line-height) !important;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers {
        justify-content: center;
        align-items: center;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers {
        align-self: center;
        justify-self: center;
        justify-content: center;
        align-items: center;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .bottom-bar-content {
        justify-content: center;
        align-items: center;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .bottom-bar-content .buttons {
        display: none;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper:not(.active) {
        display: flex;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper.courses {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper .rail {
        font-size: var(--sub-giant-font-size);
        line-height: var(--sub-giant-line-height);
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper.tests .rail {
        order: 1;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper.tests .dots {
        display: none;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper .dots {
        position: static;
        padding: 16px 0px;
        flex-shrink: 0;
        background: var(--brown);
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper .dot {
        width: 14px;
        height: 14px;
        background: hsla(0, 0%, 100%, .5);
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper .dot.active {
        background: white;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--wrapper .dot:not(:last-child) {
        margin-right: 32px;

    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers--slide {
        height: auto;
    }

    #body[orientation="portrait"] .bottom-bar.your-numbers .your-numbers .courses .bg {
        background: url(https://resources.growbp.pl/Stock/laptop.png) 22% bottom/auto 90% no-repeat;
    }

}

/* Template/Template.mobile.css */

body[mobile="true"] #site-mobile {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body[mobile="true"] #menu {
    position: -webkit-sticky;
    position: sticky;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 0px;
    overflow: visible;
    z-index: 1;
}

body[mobile="true"] #menu #menu-content {
    background-color: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    height: 60px;
    overflow: hidden;
    will-change: height;
    transition: 0.5s height;
}

body[mobile="true"] #site-content-mobile {
    width: 100%;
    height: 100%;
    overflow: initial;
    z-index: 0;
}

@media screen and (orientation: landscape) {
    body[mobile="true"][scrolled="true"] #menu #menu-content {
        height: 0px;
    }
}

.transition-stop {
    transition: 0s !important;
    -webkit-transition: 0s !important;
}

/*Scrolled*/

/* Template/site.mobile.tablet.css */



/* Components/Components.css */

:root {
    --itemHeight: 55px;
    --itemBorderRadius: 4px;
    --itemBorderWidth: 1px;
    --itemFontSize: 16px;
    
    --itemLineHeight: calc(var(--itemFontSize) * 1.5);
    --itemInnerHeight: calc( var(--itemHeight) - var(--itemBorderWidth) * 2 );
    --itemPadding: calc( ( var(--itemInnerHeight) - var(--itemLineHeight) ) / 2 );
}

.max-180 {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 180px;
}

.max-225 {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 225px;
}

.max-270 {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 270px;
}

.max-360 {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 360px;
}

.max-450 {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 450px;
}

.max-540 {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 540px;
}

.max-630 {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 630px;
}

.note-component {
    font-size: 12px;
    line-height: 1.5;
}

.paragraph-component {
    font-size: 16px;
    line-height: 1.5;
}

.title-component {
    font-size: 24px;
    line-height: 1.5;
}

.header-component {
    font-size: 36px;
    line-height: 1.5;
}

.button-component {
    --fillColor: #A1A8B0;
    --borderColor: #D6D6D6;
    --color: #000000;

    --itemInnerHeight: calc( var(--itemHeight) - var(--itemBorderWidth) * 2 );

    border: var(--itemBorderWidth) solid var(--borderColor);
    border-radius: var(--itemBorderRadius);
    color: var(--color);
    cursor: pointer;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-transform: lowercase;
    font-size: var(--itemFontSize);
    line-height: var(--itemInnerHeight);
    height: var(--itemHeight);
    width: 100%;
    transition: 0.4s opacity;
}
.button-component.filled {
    background-color: var(--fillColor);
    border: var(--itemBorderWidth) solid var(--fillColor);
    color: white;
}
.button-component.rounded {
    border-radius: var(--itemHeight);
}
.button-component.outlined {
    /* outline: 5px solid var(--borderColor); */
    box-shadow: 0 0 0 5px var(--borderColor);
}

.button-group-component {
    --fillColor: #A1A8B0;
    --borderColor: #D6D6D6;
    --color: #000000;
    border: var(--itemBorderWidth) solid var(--borderColor);
    border-radius: var(--itemBorderRadius);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: var(--itemHeight);
}
.button-group-component .button-component {
    border: initial;
    border-radius: initial;
    height: 100% !important;
}
.button-group-component .button-component:not(:last-child) {
    border-right: var(--itemBorderWidth) solid var(--borderColor);
}

.switch-button-component {
    --itemHeight: 55px;
    --itemBorderRadius: 4px;
    --itemBorderWidth: 1px;
    --itemFontSize: 16px;
    --itemInnerHeight: calc( var(--itemHeight) - var(--itemBorderWidth) * 2 );
    --itemLineHeight: calc(var(--itemFontSize) * 1.5);
    --itemPadding: calc( ( var(--itemInnerHeight) - var(--itemLineHeight) ) / 2 );

    --fillColor: #A1A8B0;
    --borderColor: #D6D6D6;
    --color: #000000;
    display: flex;
    flex-direction: row;
    height: var(--itemHeight);
}
.switch-button-component.flat {
    --itemHeight: 30px;
}

.switch-button-component .switch-button-item-component {
    color: var(--color);
    cursor: pointer;
    text-align: center;
    vertical-align: center;
    font-size: var(--itemFontSize);
    line-height: var(--itemLineHeight);
    padding: var(--itemPadding);
    height: 100%;
    flex-grow: 1;
    width: 0%;
    transition: 0.4s opacity;
}
.switch-button-component .switch-button-item-component {
    border: var(--itemBorderWidth) solid var(--borderColor);
}
.switch-button-component .switch-button-item-component:not(:last-child) {
    border-right: initial;
}
.switch-button-component .switch-button-item-component:first-child {
    border-radius: var(--itemBorderRadius) 0px 0px var(--itemBorderRadius);
}
.switch-button-component .switch-button-item-component:last-child {
    border-radius: 0px var(--itemBorderRadius) var(--itemBorderRadius) 0px;
}
.switch-button-component .switch-button-item-component[active="true"] {
    background-color: var(--fillColor);
    color: white;
}

.switch-button-component.splitted {
    border: initial;
    border-radius: initial;
    gap: var(--itemPadding);
}
.switch-button-component.splitted .switch-button-item-component {
    border: var(--itemBorderWidth) solid var(--fillColor);
    border-radius: var(--itemBorderRadius);
    height: var(--itemHeight);
}

.switch-button-component.arrowed {
    overflow: visible;
}

.switch-button-component.arrowed .switch-button-item-component[active="true"] {
    position: relative;
}
.switch-button-component.arrowed .switch-button-item-component[active="true"]::before {
    content: '';
    display: block;
    border-width: 5px 10px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: var(--fillColor);
    left: 50%;
    bottom: 100%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 10;
}

.input-component::placeholder {
    color: inherit;
    opacity: 0.5;
}
.input-component {
    --fillColor: #A1A8B0;
    --borderColor: #D6D6D6;
    --color: #000000;
    border: var(--itemBorderWidth) solid var(--borderColor);
    border-radius: var(--itemBorderRadius);
    color: var(--color);
    display: block;
    vertical-align: center;
    font-size: var(--itemFontSize);
    line-height: var(--itemLineHeight);
    padding: var(--itemPadding);
    height: var(--itemHeight);
    width: 100%;
}
.input-component.filled {
    background-color: var(--fillColor);
    border: var(--itemBorderWidth) solid var(--fillColor);
    color: white;
}

.textarea-component::placeholder {
    color: inherit;
    opacity: 0.5;
}
.textarea-component {
    --fillColor: #A1A8B0;
    --borderColor: #D6D6D6;
    --color: #000000;
    --height: 3;
    border: var(--itemBorderWidth) solid var(--borderColor);
    border-radius: var(--itemBorderRadius);
    color: var(--color);
    cursor: pointer;
    display: block;
    vertical-align: center;
    font-size: var(--itemFontSize);
    line-height: var(--itemLineHeight);
    padding: var(--itemPadding);
    height: calc(var(--itemLineHeight) * var(--height) + var(--itemPadding) * 2 + var(--itemBorderWidth) * 2);
    width: 100%;
    resize: none;
}
.textarea-component[auto="true"] {
    height: auto !important;
}
.textarea-component.filled {
    background-color: var(--fillColor);
    border: var(--itemBorderWidth) solid var(--fillColor);
    color: white;
}

/* DataTemplates/Templates/HomeArticlePreview.css */

/* No CSS */

/* DataTemplates/Templates/HomeCoursePreview.css */

/* No CSS */

/* DataTemplates/Templates/HomePreviewGeneral.css */

 .popup-wrapper {
    height: 100%;
    overflow: hidden;
 }

 .popup-wrapper.white {
    color: white;
 }

 .popup-wrapper .play--btn {
   color: var(--purple);
   font-size: var(--giant-font-size);
 }

 .popup-wrapper .title.white {
    color: white;
 }

 .popup-wrapper .btn--navigation {
    transition: .3s;
    max-width: 50%;
    text-align: center;
    padding: 12px 0;
    font-size: var(--sub-title-font-size);
 }

 .popup-wrapper .content {
    margin: 8px 0;
    padding: 0 16px;
    overflow: hidden;
 }

 .popup-wrapper .content-wrapper {
    display: none;
    flex-direction: column;
    height: 100%;
    padding-top: 3px;
    overflow-y: auto;
 }

 .popup-wrapper .content-wrapper.active {
    display: flex;
 }

 .popup-wrapper .content-wrapper .h3-home {
    color: hsla(0, 0%, 100%, .5);
    font-size: var(--sup-title-font-size);
 }

 .popup-wrapper .content-wrapper h4 {
    color: hsla(0, 0%, 100%, 1);
 }

 .popup-wrapper .content-wrapper ul {
    margin-top: 12px;
    padding-top: 3px;
    flex-grow: 1;
 }

 .popup-wrapper .content-wrapper li .number {
    margin-right: 3px;
    color: white;
 }

 .popup-wrapper .content-wrapper.description {
    font-size: var(--sub-title-font-size);
 }

 .popup-wrapper i {
    line-height: 0;
 }

 .popup-wrapper ul {
    padding-left: 24px;
 }

 .popup-wrapper .margin-left {
    margin-left: 8px;
 }

 .popup-wrapper .icon-bigger i {
    font-size: var(--sub-header-font-size);
 }

 .popup-wrapper .icon-default i {
    font-size: var(--sup-title-font-size);
 }

 .popup-wrapper .icon-smaller i {
    font-size: var(--title-font-size);
 }

 .popup-wrapper .block {
    padding: 0 16px;
    padding-bottom: 16px;
 }

/* DataTemplates/Templates/HomeWorkshopPreview.css */

/* No CSS */

/* DeviceInfo/DeviceInfo.css */



/* DeviceInfo/FontSize.css */

:root {
    --font-9: 9px;
    --font-12: 12px;
    --font-15: 15px;
    --font-18: 18px;
    --font-21: 21px;
    --font-24: 24px;
    --font-27: 27px;
    --font-30: 30px;
    --font-33: 33px;
    --font-36: 36px;
    --font-54: 54px;
    --font-72: 72px;
}

.font-9 {
    font-size: var(--font-9);
    line-height: 1.25;
}

.font-12 {
    font-size: var(--font-12);
    line-height: 1.25;
}

.font-15 {
    font-size: var(--font-15);
    line-height: 1.25;
}

.font-18 {
    font-size: var(--font-18);
    line-height: 1.25;
}

.font-21 {
    font-size: var(--font-21);
    line-height: 1.25;
}

.font-24 {
    font-size: var(--font-24);
    line-height: 1.25;
}

.font-27 {
    font-size: var(--font-27);
    line-height: 1.25;
}

.font-30 {
    font-size: var(--font-30);
    line-height: 1.25;
}

.font-33 {
    font-size: var(--font-33);
    line-height: 1.25;
}

.font-36 {
    font-size: var(--font-36);
    line-height: 1.25;
}

.font-54 {
    font-size: var(--font-54);
    line-height: 1.25;
}

.font-72 {
    font-size: var(--font-72);
    line-height: 1.25;
}

/* DeviceInfo/Padding.css */

:root {}

/* padding 0 */

.padding-0 {
    padding: 0px;
}

.padding-0-5 {
    padding: 0px 5px;
}

.padding-0-10 {
    padding: 0px 10px;
}

.padding-0-10 {
    padding: 0px 10px;
}

.padding-0-15 {
    padding: 0px 15px;
}

.padding-0-20 {
    padding: 0px 20px;
}

.padding-0-25 {
    padding: 0px 25px;
}

.padding-0-30 {
    padding: 0px 30px;
}

/* padding 5 */

.padding-5 {
    padding: 5px;
}

.padding-5-0 {
    padding: 5px 0px;
}

.padding-5-10 {
    padding: 5px 10px;
}

.padding-5-15 {
    padding: 5px 15px;
}

.padding-5-20 {
    padding: 5px 20px;
}

.padding-5-25 {
    padding: 5px 25px;
}

.padding-5-30 {
    padding: 5px 30px;
}

/* padding 10 */

.padding-10 {
    padding: 10px;
}

.padding-10-0 {
    padding: 10px 0px;
}

.padding-10-5 {
    padding: 10px 5px;
}

.padding-10-15 {
    padding: 10px 15px;
}

.padding-10-20 {
    padding: 10px 20px;
}

.padding-10-25 {
    padding: 10px 25px;
}

.padding-10-30 {
    padding: 10px 30px;
}

/* padding 15 */

.padding-15 {
    padding: 15px;
}

.padding-15-0 {
    padding: 15px 0px;
}

.padding-15-5 {
    padding: 15px 5px;
}

.padding-15-10 {
    padding: 15px 10px;
}

.padding-15-20 {
    padding: 15px 20px;
}

.padding-15-25 {
    padding: 15px 25px;
}

.padding-15-30 {
    padding: 15px 30px;
}

/* padding 20 */

.padding-20 {
    padding: 20px;
}

.padding-20-0 {
    padding: 20px 0px;
}

.padding-20-5 {
    padding: 20px 5px;
}

.padding-20-10 {
    padding: 20px 10px;
}

.padding-20-15 {
    padding: 20px 15px;
}

.padding-20-25 {
    padding: 20px 25px;
}

.padding-20-30 {
    padding: 20px 30px;
}

/* padding 25 */

.padding-25 {
    padding: 25px;
}

.padding-25-0 {
    padding: 25px 0px;
}

.padding-25-5 {
    padding: 25px 5px;
}

.padding-25-10 {
    padding: 25px 10px;
}

.padding-25-15 {
    padding: 25px 15px;
}

.padding-25-20 {
    padding: 25px 20px;
}

.padding-25-30 {
    padding: 25px 30px;
}

/* padding 30 */

.padding-30 {
    padding: 30px;
}

.padding-30-0 {
    padding: 30px 0px;
}

.padding-30-5 {
    padding: 30px 5px;
}

.padding-30-10 {
    padding: 30px 10px;
}

.padding-30-15 {
    padding: 30px 15px;
}

.padding-30-20 {
    padding: 30px 20px;
}

.padding-30-25 {
    padding: 30px 25px;
}

/* FilterView/FilterView.css */

.filter-view-mobile {
    background-color: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur(8px);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
    z-index: 100;
}

.filter-view-mobile:not(.active) {
    opacity: 0;
}

.filter-view-mobile .filter-view-mobile-box {
    --x: 0%;
    --y: 0%;
    --s: 1;
    background-color: #f4f4f4;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 80%;
    max-height: 720px;
    overflow: hidden;
    transform: translateX( var(--x) ) translateY( var(--y) ) scale( var(--s) );
    transition: 0.4s;
}

.filter-view-mobile:not(.active) .filter-view-mobile-box {
    --y: 100%;
}

.filter-view-mobile .filter-view-mobile-box .filter-view-header {
    border-width: 4px;
    border-style: solid;
    border-color: #f4f4f4;
    background-color: #f4f4f4;
    color: #d1914a;
}

.filter-view-mobile:not([page="Home"]) .filter-view-mobile-box .filter-view-header .filter-view-header-home {
    display: none !important;
}

.filter-view-mobile[page="Home"] .filter-view-mobile-box .filter-view-header .filter-view-header-page {
    display: none !important;
}

.filter-view-mobile .filter-view-mobile-box .filter-view-content {
    border-width: 0px 4px 0px 4px;
    border-style: solid;
    border-color: white;
    flex-grow: 1;
    width: 100%;
    height: 0%;
    overflow-y: auto;
}

.filter-view-mobile .filter-view-mobile-box .filter-view-content .filter-view-page:not(.active) {
    display: none !important;
}

.filter-view-mobile .filter-view-mobile-box .filter-view-footer {
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: white;
}

.filter-view-mobile .filter-view-mobile-box .filter-view-footer .filter-view-button-submit {
    --fillColor: #d1914a;
}

[filter-hidden]:not([filter-hidden=""]) {
    display: none !important;
}

.filter-view-mobile .filter-view-button .name {
    text-transform: uppercase;
}

.filter-view-mobile .filter-view-button[value]:not([value=""]) .value {
    color: #d1914a;
}

.filter-view-mobile .filter-view-page .filter-view-page-header .name {
    text-transform: uppercase;
}

.filter-view-mobile .filter-view-page .filter-view-page-header[value]:not([value=""]) .value {
    color: #d1914a;
}

.filter-view-mobile .filter-view-button[name="Order"] {
    background-color: #e9dccd;
    color: #86696e;
}

.filter-view-mobile .filter-view-button:not([name="Order"]) {
    border-bottom: 1px solid #ccc;
}

.filter-view-mobile .filter-view-item {
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}

.filter-view-mobile .filter-view-item[radio="true"] {
    color: #d1914a;
}

.filter-view-mobile .filter-view-item .radiobox {
    color: #d1914a;
    transition: 0.25s opacity;
}

.filter-view-mobile .filter-view-item .radiobox:not(.checked) {
    opacity: 0 !important;
}

/* FilterView/FilterView.tablet.css */

body[device="Tablet"][orientation="portrait"] .filter-view-mobile .filter-view-mobile-box {
    --x: -50%;
    --y: -50%;
    border-radius: calc(var(--base-padding) * 2);
    left: 50%;
    top: 50%;
    max-width: 450px;
}

body[device="Tablet"][orientation="portrait"] .filter-view-mobile:not(.active) .filter-view-mobile-box {
    --x: -50%;
    --y: -50%;
    --s: 0;
}

body[device="Tablet"][orientation="landscape"] .filter-view-mobile .filter-view-mobile-box {
    --x: 0%;
    --y: 0%;
    left: auto;
    right: 0%;
    top: 0%;
    max-width: 450px;
    max-height: 100%;
    height: 100%;
}

body[device="Tablet"][orientation="landscape"] .filter-view-mobile:not(.active) .filter-view-mobile-box {
    --x: 100%;
}

/* ImagePopup/ImagePopup.css */

.image-popup {
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur(8px);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.image-popup img {
    --x: 0px;
    --y: 0px;
    --s: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) translateX(var(--x)) translateY(var(--y)) scale(var(--s));
    width: initial !important;
    height: initial !important;
    max-width: initial !important;
    max-height: initial !important;
}

/* Layout/BottomBar/BottomBar.css */

.bottom-bar {
  --color: black;
  --border-color: var(--green);
  --background-color: white;

  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur( 8px );
  backdrop-filter: blur(8px);
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 100;
  -webkit-transition: 0.4s opacity;
  transition: 0.4s opacity;
}

.bottom-bar:not(.active) {
  opacity: 0;
}

.bottom-bar .bottom-bar-header .arrow {
  color: var(--border-color) !important;
  pointer-events: all;
  font-size: calc(var(--giant-font-size) * 1.1 - 6px);
  transition: 0.3s;
}

.bottom-bar .accordion .accordion-box.active .accordion-box-icon {
  background-color: var(--border-color);
  border: 2px solid var(--border-color);
}

.bottom-bar .accordion .accordion-box:not(.active) .accordion-box-icon {
  color: var(--border-color);
  border: 2px solid var(--border-color);
}

.bottom-bar .bottom-bar-placeholder {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

.bottom-bar .bottom-bar-content {
  --background-color: var(--border-color);
  
  --x: 0px;
  --y: 0px;
  --s: 1;

  border-style: solid !important;
  background-color: var(--background-color) !important;
  border-color: var(--border-color) !important;
  color: var(--color) !important;

  left: 0px;
  top: 0px;
  height: 80%;
  width: 100%;

  overflow: hidden;

  -webkit-transform: translateX(var(--x)) translateY(var(--y)) scale(var(--s));
  -webkit-transition: 0.4s transform;
  transform: translateX(var(--x)) translateY(var(--y)) scale(var(--s));
  transition: 0.4s;
}

.bottom-bar .bottom-bar-placeholder:not(.active) {
  display: none;
}

.bottom-bar:not([items]) .bottom-bar-header, .bottom-bar[items=""] .bottom-bar-header {
  display: none !important;
}

/* Layout/BottomBar/BottomBar.smartphone.css */

/* Smartphone */

body[device="Smartphone"] .bottom-bar {
    justify-content: flex-end;
    align-items: stretch;
}

body[device="Smartphone"] .bottom-bar .bottom-bar-content {
    max-height: 630px;
    max-width: 100%;
}

/* Portrait */

body[device="Smartphone"][orientation="portrait"] .bottom-bar {}

body[device="Smartphone"][orientation="portrait"] .bottom-bar .bottom-bar-content {
    border-radius: calc(var(--base-padding) * 2) calc(var(--base-padding) * 2) 0px 0px !important;
    border-width: 4px 4px 0px 4px !important;
}

body[device="Smartphone"][orientation="portrait"] .bottom-bar:not(.active) .bottom-bar-content {
    --y: 100%;
}

/* Landscape */

body[device="Smartphone"][orientation="landscape"] .bottom-bar {}

body[device="Smartphone"][orientation="landscape"] .bottom-bar .bottom-bar-content {
    border-radius: 0px !important;
    border-width: 0px 0px 0px 4px !important;
}

body[device="Smartphone"][orientation="landscape"] .bottom-bar:not(.active) .bottom-bar-content {
    --x: 100%;
}

/* Layout/BottomBar/BottomBar.tablet.css */

/* Tablet */

body[device="Tablet"] .bottom-bar {
    align-items: center;
    justify-content: center;
}

body[device="Tablet"] .bottom-bar .bottom-bar-content {
    background-color: white !important;
}

/* Portrait */

body[device="Tablet"][orientation="portrait"] .bottom-bar .bottom-bar-content {
    border-radius: calc(var(--base-padding) * 2) !important;
    border-width: 4px !important;
    border-color: white !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    max-height: 720px;
    max-width: min(480px, calc(100% - 32px));
}

body[device="Tablet"][orientation="portrait"] .bottom-bar:not(.active) .bottom-bar-content {
    --s: 0;
    --y: 0%;
}

/* Landscape */

body[device="Tablet"][orientation="landscape"] .bottom-bar {
    align-items: flex-end;
}

body[device="Tablet"][orientation="landscape"] .bottom-bar .bottom-bar-content {
    max-height: 100%;
    height: 100%;
    max-width: 480px;
}

body[device="Tablet"][orientation="landscape"] .bottom-bar .bottom-bar-content {
    border-radius: 0px !important;
    border-width: 4px !important;
    border-color: white !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

body[device="Tablet"][orientation="landscape"] .bottom-bar:not(.active) .bottom-bar-content {
    --x: 100%;
}

/* Layout/MobileDisplay/Mobiledisplay.css */

@keyframes mobile-display-show {
    from {
        background: rgba(255, 255, 255, 0)
    }

    to {
        background: rgba(255, 255, 255, 0.85)
    }
}

@keyframes mobile-display-close {
    from {
        background: rgba(255, 255, 255, 0.85)
    }

    to {
        background: rgba(255, 255, 255, 0)
    }
}

@keyframes mobile-display-show-landscape {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes mobile-display-close-landscape {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes mobile-display-slide-up {
    from {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0%)
    }
}

@keyframes mobile-display-slide-down {
    from {
        transform: translateY(0%)
    }

    to {
        transform: translateY(100%)
    }
}

mobile-display {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    transition: .3s;
    z-index: 14
}

mobile-display.active {
    animation: mobile-display-show .25s forwards
}

mobile-display.active .mobile-content {
    animation: mobile-display-slide-up .4s .20s forwards
}

mobile-display:not(.active) {
    animation: mobile-display-close .2s .6s forwards
}

mobile-display:not(.active) .mobile-content {
    animation: mobile-display-slide-down .6s forwards
}

mobile-display.clear {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important
}

mobile-display.clear .mobile-content {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important
}

mobile-display .mobile-content {
    width: 100%;
    transform: translateY(100%)
}

#body[orientation="landscape"] mobile-display.active {
    animation: mobile-display-show .25s forwards
}

#body[orientation="landscape"] mobile-display.active .mobile-content {
    animation: mobile-display-show-landscape .4s .20s forwards
}

#body[orientation="landscape"] mobile-display:not(.active) {
    animation: mobile-display-close .2s .4s forwards
}

#body[orientation="landscape"] mobile-display:not(.active) .mobile-content {
    animation: mobile-display-close-landscape .4s forwards
}

#body[orientation="landscape"] mobile-display .mobile-content {
    transform: translateY(0%);
    opacity: 0
}

mobile-display.filter button {
    padding: 12px
}

mobile-display.filter .content-switch button.active {
    pointer-events: none;
    font-weight: bold
}

mobile-display.filter .content-switch .line-hoz {
    width: 2px;
    background: #D1914B
}

mobile-display.filter li {
    list-style: none
}

mobile-display.filter .rail {
    font-size: var(--sup-header-font-size);
    line-height: var(--sup-header-line-height);
    color: #D1914B;
    background: #efefef;
    width: 100%;
}

mobile-display.filter .content {
    display: flex;
    flex-direction: column;
    height: 100%
}

mobile-display.filter .li-button, mobile-display.filter ul.sub li {
    font-size: var(--big-font-size);
    line-height: var(--big-line-height);
    position: relative;
    padding: 12px 12px
}

mobile-display.filter .li-button.underline-general, mobile-display.filter .sub li {
    position: relative
}

mobile-display.filter .li-button.underline-general::after, mobile-display.filter .sub li::after {
    position: absolute;
    content: "";
    display: block;
    width: calc(100% - 16px);
    height: 1px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.1)
}

mobile-display.filter .li-button.active {
    color: #D1914B
}

mobile-display.filter .content:not(.active) {
    display: none
}

mobile-display.filter .mobile-content {
    background-color: white;
    border: 4px solid #D1914B;
    border-radius: calc(var(--base-padding) * 2);
    overflow: hidden;
}

body[device="Smartphone"] mobile-display.filter .mobile-content {
    border-bottom: 0px !important;
    border-radius: calc(var(--base-padding) * 2) calc(var(--base-padding) * 2) 0px 0px !important;
}

body[device="Tablet"] mobile-display.filter .mobile-content {
    border-width: 4px !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    border-color: white !important;
}

body[mobile="true"][orientation="landscape"] mobile-display.filter .mobile-content {
    border-radius: 0px !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25) !important;
}

mobile-display.filter .filter-list {
    height: 0%;
    flex-grow: 1
}

mobile-display.filter .filter-list .filter--subtitle {
    font-size: var(--sub-title-font-size);
    line-height: var(--sub-title-line-height);
    color: #D1914B
}

mobile-display.filter .filter-list .li-button {
    position: sticky;
    top: 0;
    background: white
}

mobile-display.filter .filter-list .li-button.active {
    background: #efefef;
    color: black;
    z-index: 10;
}

mobile-display.filter .filter-list .li-button.active::after {
    display: none
}

mobile-display.filter .filter-list .li-button.active i.icon::before {
    content: '\0056'
}

mobile-display.filter .filter-list .li-button.active .filter--subtitle {
    display: none
}

mobile-display.filter ul.sub {
    max-height: 0px;
    overflow: hidden
}

mobile-display.filter ul.sub li {
    transition: .25s
}

mobile-display.filter ul.sub li.active {
    color: #D1914B
}

mobile-display.filter .filter-button {
    padding: 16px;
    color: white
}

mobile-display.filter .filter-button .filter {
    font-size: var(--sup-header-font-size);
    line-height: var(--sup-header-line-height);
    position: relative;
    padding: 16px 32px;
    background: #D1914B;
    border-radius: 12px;
    margin: auto;
    width: 75%;
    max-width: 320px
}

mobile-display.filter .filter-button .filter .filter-remove {
    font-size: var(--big-font-size);
    line-height: var(--big-line-height);
    position: absolute;
    right: -5%;
    top: 50%;
    transform: translate(100%, -50%);
    color: #D1914B;
    padding: 8px
}

mobile-display.filter .sort-list {
    height: 100%
}

mobile-display.filter .sort-list li:not(.active) span.icon {
    opacity: 0
}

mobile-display.filter .sort-list li span.icon {
    transition: .25s
}

#body[orientation="landscape"] mobile-display.filter {
    justify-content: center;
    align-items: center
}

@media all and (min-width: 500px) and (min-height: 500px) {
    #body[orientation="portrait"] mobile-display {
        justify-content: center;
        align-items: center
    }

    #body[orientation="portrait"] mobile-display.active {
        animation: mobile-display-show .25s forwards
    }

    #body[orientation="portrait"] mobile-display.active .mobile-content {
        animation: mobile-display-show-landscape .4s .20s forwards
    }

    #body[orientation="portrait"] mobile-display:not(.active) {
        animation: mobile-display-close .2s .4s forwards
    }

    #body[orientation="portrait"] mobile-display:not(.active) .mobile-content {
        animation: mobile-display-close-landscape .4s forwards
    }
}

body[device="Smartphone"] mobile-display .mobile-content {
    width: 100%;
    height: 80%;
}

body[device="Tablet"] mobile-display .mobile-content {
    width: 100%;
    height: 100%;
    max-height: 720px;
    max-width: min(480px, calc(100% - 32px));
    transform: translateY(0%);
    opacity: 0;
}

#body[mobile="true"][orientation="landscape"] mobile-display {
    align-items: flex-end;
}

#body[mobile="true"][orientation="landscape"] mobile-display .mobile-content {
    height: 100%;
    max-height: 100%;
}

@media all and (min-width: 500px) and (min-height: 500px) {
    #body[orientation="landscape"] mobile-display.active {
        animation: mobile-display-show .25s forwards
    }

    #body[orientation="landscape"] mobile-display.active .mobile-content {
        animation: mobile-display-show-landscape .4s .20s forwards
    }

    #body[orientation="landscape"] mobile-display:not(.active) {
        animation: mobile-display-close .2s .4s forwards
    }

    #body[orientation="landscape"] mobile-display:not(.active) .mobile-content {
        animation: mobile-display-close-landscape .4s forwards
    }

    #body[orientation="landscape"] mobile-display .mobile-content {
        transform: translateY(0%);
        opacity: 0
    }
}

/* Layout/PopupMiddle/PopupMiddle.css */

.popup-middle {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.popup-middle .popup-middle-content {
    background-color: white;
    border-radius: var(--base-padding);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* Layout/Scroll/Scroll.css */

.scroll-view {
  --color: var(--green);
  padding-top: 60px;
  transition: 0.5s padding-top;
}

body[orientation="landscape"][scrolled="true"] .scroll-view {
  padding-top: 0px !important;
}

.scroll-view .scroll-view-header {
  position: -webkit-sticky;
  position: sticky;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 0px;
  z-index: 1;
}

.scroll-view .scroll-view-header .scroll-view-header-content {}

.scroll-view .scroll-view-bar--bg {
  transition: 0.25s box-shadow;
}

.scroll-view[bar="hidden"] .scroll-view-bar--bg {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
}

.scroll-view .scroll-view-header .scroll-view-header-content .scroll-view-button-sort {
  pointer-events: all;
}

.scroll-view .scroll-view-header .scroll-view-bar--bg {
  background: white;
}

.scroll-view .scroll-view-header .scroll-view-header-content .scroll-view-title {
  color: var(--color);
  font-size: calc(var(--giant-font-size) + 5px);
  line-height: 1.25;
  transition: 0.25s font-size;
}

.scroll-view[header="collapse"] .scroll-view-header .scroll-view-header-content .scroll-view-title {
  font-size: calc(var(--giant-font-size));
}

.scroll-view .scroll-view-header .scroll-view-header-content .scroll-view-sub-title {
  font-size: var(--title-font-size);
  line-height: 1.25;
  will-change: height;
  max-height: calc(var(--title-font-size) * 1.25);
  will-change: max-height, opacity;
  transition: 0.25s max-height, 0.25s opacity;
  overflow: hidden;
}

.scroll-view .scroll-view-header .scroll-view-bar {
  background-color: white;
  height: 56px;
  overflow: hidden;
  will-change: transform;
  transition: 0.25s transform;
  z-index: 1;
  pointer-events: all;
}

.scroll-view[bar="hidden"] .scroll-view-header .scroll-view-bar {
  transform: translateY(-100%);
  pointer-events: none;
}

.scroll-view[sub-title="hidden"] .scroll-view-header .scroll-view-header-content .scroll-view-sub-title {
  opacity: 0;
  max-height: 0px;
}

body[orientation="landscape"] .scroll-view .scroll-view-header .scroll-view-header-content .scroll-view-sub-title {
  opacity: 0 !important;
  max-height: 0px !important;
}

.scroll-view .scroll-view-content {
  position: relative;
  padding: calc(var(--base-padding) * 2) calc(var(--base-padding) * 4);
  padding-top: 170px;
  height: 100%;
  z-index: 0;
  transition: 0.4s padding-top;
}

body[orientation="portrait"] .scroll-view[view="List"] .scroll-view-content {
  padding: calc(var(--base-padding) * 2);
  padding-top: 170px;
}

body:not([mobile="true"][orientation="portrait"]) .mobile-portrait {
  display: none !important;
}

body:not([mobile="true"][orientation="landscape"]) .mobile-landscape {
  display: none !important;
}

body:not([mobile="true"][device="Smartphone"]) .smartphone-only {
  display: none !important;
}

body:not([mobile="true"][device="Tablet"]) .tablet-only {
  display: none !important;
}

body .scroll-view[view="Grid"] .scroll-view-content,
body[orientation="landscape"] .scroll-view .scroll-view-content {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: min-content;
}

body[orientation="landscape"] .scroll-view {}

body[orientation="landscape"] .scroll-view .scroll-view-header .scroll-view-bar {
  display: none !important;
}

body[orientation="landscape"] .scroll-view .scroll-view-content {
  padding-top: 80px !important;
}

.scroll-view .scroll-view-toggle-display.bt-group .bt {
  width: calc(var(--font-line-height) + var(--base-padding) * 2);
  color: inherit !important;
}

.scroll-view .scroll-view-toggle-display.bt-group .bt.active {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

@media (max-width: 440px) {

  .scroll-view .scroll-view-header .scroll-view-bar .scroll-view-toggle-display .icon-grid::before {
    content: '\00E0';
  }

}

/* Layout/SliderView/SliderView.css */

.slider-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.slider-view .slider-view-content {
    display: flex;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    height: 0%;
}

.slider-view .slider-view-content .slider-view-item {
    width: 100%;
    min-width: 100%;
    height: 100%;
}

.slider-view .slider-view-navigation {
    align-items: center;
    display: flex;
    overflow-x: auto;
}

.slider-view .slider-view-navigation .slider-view-button {
    text-align: center;
    flex-grow: 1;
    padding: 20px;
    width: 0%;
    transition: 0.2s opacity;
}

.slider-view .slider-view-navigation .slider-view-button:not(.active) {
    opacity: 0.5;
}

.slider-view .slider-view-navigation .slider-view-button .slider-view-button-circle {
    background-color: black;
    border-radius: 100%;
    display: inline-block;
    width: 10px;
    height: 10px;
}

/* Layout/TabLayout/TabLayout.css */

.tab-layout {
    width: 100%;
    height: 100%;
}

.tab-layout .tab-layout-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.tab-layout .tab-layout-content .tab-layout-header {
    width: 100%;
}

.tab-layout .tab-layout-content .tab-layout-main {
    flex-grow: 1;
    width: 100%;
    height: 0%;
    overflow: hidden;
}

.tab-layout .tab-layout-content .tab-layout-footer {
    width: 100%;
}

.tab-layout .tab-layout-content .tab-layout-header .tab-layout-header-content {
    width: 100%;
}

.tab-layout .tab-layout-content .tab-layout-main .tab-layout-main-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tab-layout .tab-layout-content .tab-layout-footer .tab-layout-footer-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 55px;
}

.tab-layout .tab-layout-content .tab-layout-main .tab-layout-main-content .tab-layout-view {
    width: 100%;
    height: 100%;
}

.tab-layout .tab-layout-content .tab-layout-main .tab-layout-main-content .tab-layout-view:not(.active) {
    display: none;
}

.tab-layout .tab-layout-content .tab-layout-main .tab-layout-main-content .tab-layout-view .tab-layout-view-content {
    width: 100%;
    height: 100%;
}

.tab-layout .tab-layout-content .tab-layout-footer .tab-layout-footer-content .tab-layout-view-button {
    cursor: pointer;
    flex-grow: 1;
    width: 0%;
    height: 100%;
}

.tab-layout .tab-layout-content .tab-layout-footer .tab-layout-footer-content .tab-layout-view-button .tab-layout-view-button-content {
    color: var(--color);
    text-align: center;
    width: 100%;
}

.tab-layout .tab-layout-content .tab-layout-footer .tab-layout-footer-content .tab-layout-view-button.active .tab-layout-view-button-content {
    background-color: var(--color);
    color: white;
}

/* Layout/TabLayout/Arrowed/TabLayout.arrowed.css */

.tab-layout[type="arrowed"] {

}

.tab-layout[type="arrowed"] .tab-layout-footer {
    padding: calc(var(--base-padding) * 2);
}

.tab-layout[type="arrowed"] .tab-layout-footer .tab-layout-footer-content {
    background-color: var(--color);
    border: 1px solid var(--color);
    border-radius: 4px;
}

.tab-layout[type="arrowed"] .tab-layout-main .tab-layout-view {
    padding-bottom: var(--base-padding);
}

.tab-layout[type="arrowed"] .tab-layout-footer .tab-layout-view-button .tab-layout-view-button-content {
    background-color: white;
    color: var(--color);
    text-transform: lowercase;
    position: relative;
    vertical-align: middle;
    font-size: 16px;
    line-height: 53px;
}

.tab-layout[type="arrowed"] .tab-layout-footer .tab-layout-view-button:first-child .tab-layout-view-button-content {
    border-radius: 3px 0px 0px 3px;
}

.tab-layout[type="arrowed"] .tab-layout-footer .tab-layout-view-button:last-child .tab-layout-view-button-content {
    border-radius: 0px 3px 3px 0px;
}

.tab-layout[type="arrowed"] .tab-layout-footer .tab-layout-view-button:not(:last-child) .tab-layout-view-button-content {
    border-right: 1px solid var(--color);
}

.tab-layout[type="arrowed"] .tab-layout-footer .tab-layout-view-button.active .tab-layout-view-button-content::before {
    content: '';
    border-width: 5px 10px 5px 10px;
    border-style: solid;
    border-color: rgba(255,255,255,0);
    border-bottom-color: var(--color);
    display: block;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
}

/* Layout/TabLayout/Arrowed/TabLayout.arrowed.tablet.css */

body[device="Tablet"] .tab-layout[type="arrowed"] .tab-layout-footer .tab-layout-footer-content {
    margin: auto;
    max-width: 360px;
}

/* Layout/TabbedView/TabbedView.css */

.tabbed-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.tabbed-view .tabbed-view-content {
    flex-grow: 1;
    position: relative;
    height: 0%;
}

.tabbed-view .tabbed-view-content .tabbed-view-item {
    width: 100%;
    min-width: 100%;
    height: 100%;
}

.tabbed-view .tabbed-view-content .tabbed-view-item:not(.active) {
    display: none;
}

.tabbed-view .tabbed-view-navigation {
    display: flex;
}

.tabbed-view .tabbed-view-navigation .tabbed-view-button {
    cursor: pointer;
    flex-grow: 1;
    padding: 20px;
    width: 0%;
    transition: 0.2s opacity;
}

.tabbed-view .tabbed-view-navigation .tabbed-view-button:not(.active) {
    opacity: 0.5;
}

/* Observers/Custom.css */

.sizeable-node {
    display: block;
}

fitable-node {
    --scale: 1;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

fitable-node>:first-child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(var(--scale));
    transition: 0.25s transform;
}

scaleable-text {
    display: block;
    line-height: 1.25 !important;
    overflow: hidden;
}

aspect-ratio {
    display: block !important;
}

autofill-list {
    display: block !important;
    overflow: hidden;
}

/* Overflowing/Overflowing.css */

@keyframes overflowAnimation {
  from {
      background-color: rgba(0, 0, 0, 0);
  }
  to {
      background-color: rgba(255, 255, 255, 0);
  }
}

.overflow-only {
  animation-name: overflowAnimation;
  animation-duration: 0.1s;
  transition: 0.4s opacity;
}

.overflow-only:not(.active) {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.overflowing {
    --p: var(--base-padding);
    --x: 0px;
    --y: 0px;
    --w: 100px;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: 0.25s opacity;
}

.overflowing:not(.active) {
    opacity: 0 !important;
}

.overflowing .overflowing-content {
    background-color: white;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border-radius: var(--base-padding);
    position: absolute;
    padding: var(--p);
    left: var(--x);
    top: var(--y);
    width: var(--w);
    max-height: calc(100% - var(--top));
    overflow-y: auto;
    transition: 0.25s transform;
}

.overflowing:not(.active) .overflowing-content {
    transform: translateY(-50px);
}

body[device="Smartphone"] .overflowing .overflowing-content {
    left: var(--base-padding) !important;
    right: var(--base-padding) !important;
    width: auto !important;
}

/* Responsive/Responsive.css */

.responsive-width {
    margin: 0px auto !important;
    width: 100% !important;
}

body[orientation="ladnscape"] .responsive-width {
    width: 100% !important;
    max-width: 100vh !important;
}

@media (orientation:landscape) {
    .responsive-width {
        width: 100% !important;
        max-width: 100vh !important;
    }
}

/* Scrolling/Scrolling.css */

.scrolling {
    --header: 0px;
    --headerScrolled: 0px;
    --background-color: white;
    background-color: var(--background-color);
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.scrolling .scrolling-header {
    position: -webkit-sticky;
    position: sticky;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 2;
}

.scrolling .scrolling-header .scrolling-header-content {
    background-color: rgba( 255, 255, 255, 0.9 );
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur( 8px );
    width: 100%;
    transition: 0.4s height;
    overflow: hidden;
}

.scrolling[scrolled="false"] .scrolling-header .scrolling-header-content {
    height: var(--header);
}

.scrolling[scrolled="half"] .scrolling-header .scrolling-header-content {
    height: var(--headerScrolled);
}

.scrolling[scrolled="true"] .scrolling-header .scrolling-header-content {
    height: 0px;
}

.scrolling .scrolling-content {
    position: relative;
    width: 100%;
    z-index: 1;
}

/* Sliders/HomeSlider/HomeSlider.css */

.home-slider {
    --dots-color: black;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
}

.home-slider .home-slider-content {
    position: relative;
    grid-row: 1;
    grid-column: 2;
}

.home-slider .home-slider-content .home-slider-item {
    transition: 0.4s opacity;
}

.home-slider .home-slider-content .home-slider-item:first-child {
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
}

.home-slider .home-slider-content .home-slider-item:not(:first-child) {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.home-slider .home-slider-content .home-slider-item:not(.active) {
    opacity: 0;
    pointer-events: none;
}

.home-slider .home-slider-button-prev {
    align-self: center;
    grid-row: 1;
    grid-column: 1;
}

.home-slider .home-slider-button-next {
    align-self: center;
    grid-row: 1;
    grid-column: 3;
}

.home-slider .home-slider-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 2;
    grid-column: 2;
}

.home-slider .home-slider-footer .home-slider-dot {
    cursor: pointer;
    color: var(--dots-color);
    transition: 0.4s opacity;
}

.home-slider .home-slider-footer .home-slider-dot:not(.active) {
    opacity: 0.5;
}

.home-slider[dots="false"] .home-slider-footer {
    display: none !important;
}

.home-slider[buttons="false"] .home-slider-button-prev {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

.home-slider[buttons="false"] .home-slider-button-next {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

body[device="Smartphone"] .home-slider .home-slider-footer .home-slider-dot {
    --font-size: var(--note-font-size) !important;
    --font-line-height: var(--note-line-height) !important;
}

/* Sliders/HorizontalSlider/HorizontalSlider.css */

.horizontal-slider {
    width: 100%;
    --itemWidth: min(360px, min(360px, calc(100% - var(--base-padding) * 8)));
    --sliderPadding: calc((100% - var(--itemWidth)) / 2);
}

.horizontal-slider .horizontal-slider-content {
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0px var(--sliderPadding);
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.horizontal-slider .horizontal-slider-content::-webkit-scrollbar {
    display: none !important;
}

.horizontal-slider .horizontal-slider-content .horizontal-slider-item {
    width: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.horizontal-slider .horizontal-slider-content .horizontal-slider-item .horizontal-slider-item-content {
    transform: scale(0.9);
    transition: 0.4s transform;
}

.horizontal-slider .horizontal-slider-content .horizontal-slider-item.active-half .horizontal-slider-item-content {
    transform: scale(0.95);
}

.horizontal-slider .horizontal-slider-content .horizontal-slider-item.active .horizontal-slider-item-content {
    transform: scale(1);
}

/*
.horizontal-slider .horizontal-slider-content .horizontal-slider-item .horizontal-slider-item-content {
    transform: scale(0.9);
    transition: 0.4s transform;
}

.horizontal-slider .horizontal-slider-content .horizontal-slider-item.active .horizontal-slider-item-content {
    transform: scale(1);
}
*/

.horizontal-slider .horizontal-slider-footer {
    padding: calc(var(--base-padding) * 2) 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.horizontal-slider .horizontal-slider-footer .horizontal-slider-pointer {
    color: var(--dots-color);
    opacity: 0.125;
    transition: 0.4s opacity;
}

.horizontal-slider .horizontal-slider-footer .horizontal-slider-pointer.active-half {
    opacity: 0.375;
}

.horizontal-slider .horizontal-slider-footer .horizontal-slider-pointer.active {
    opacity: 1;
}

body[device="Smartphone"] .horizontal-slider .horizontal-slider-footer .horizontal-slider-pointer {
    --font-size: var(--note-font-size) !important;
    --font-line-height: var(--note-line-height) !important;
}

/* UserSession/SessionTimeout.css */

.session-timeout {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--base-padding));
    -webkit-backdrop-filter: blur(var(--base-padding));
    position: fixed;
    z-index: 9999;
}

.session-timeout-content {
    background-color: white;
    padding: 50px;
}

/* gBar/gBar.css */

.gbar {
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition: 0.4s opacity;
}

.gbar:not(.active) {
    opacity: 0;
}

.gbar .gbar-content {
    background-color: white;
    width: 450px;
    max-width: 450px;
    height: 720px;
    max-height: 720px;
    overflow: hidden;
    transition: 0.4s max-width, 0.4s max-height, 0.4s transform;
}

body[device-type="Smartphone"] .gbar {
    align-items: flex-end;
    justify-content: stretch;
}

body[device-type="Smartphone"] .gbar .gbar-content {
    border-radius: 30px 30px 0px 0px;
}

body[device-type="Tablet"] .gbar {
    align-items: center;
    justify-content: center;
}

body[device-type="Tablet"] .gbar .gbar-content {
    border-radius: 30px;
}

/* Accessibility/Accessibility/Accessibility.css */

body.big {
    /*  Font    Sizes   */
    --sub-note-font-size: calc(10px + 5px);
    --note-font-size: calc(11px + 5px);
    --sup-note-font-size: calc(12px + 5px);
    --sub-paragraph-font-size: calc(14px + 5px);
    --paragraph-font-size: calc(15px + 5px);
    --sup-paragraph-font-size: calc(16px + 5px);
    --sub-title-font-size: calc(18px + 5px);
    --title-font-size: calc(19px + 5px);
    --sup-title-font-size: calc(20px + 5px);
    --sub-header-font-size: calc(22px + 5px);
    --header-font-size: calc(23px + 5px);
    --sup-header-font-size: calc(24px + 5px);
    --sub-big-font-size: calc(26px + 5px);
    --big-font-size: calc(27px + 5px);
    --sup-big-font-size: calc(28px + 5px);
    --sub-huge-font-size: calc(30px + 5px);
    --huge-font-size: calc(31px + 5px);
    --sup-huge-font-size: calc(32px + 5px);
    --giant-font-size: calc(54px + 5px);
    /*  Line    Heights */
    /* --sub-note-line-height: calc( var(--sub-note-font-size) + 5px);
    --note-line-height: calc( var(--note-font-size) + 5px);
    --sup-note-line-height: calc( var(--sup-note-font-size) + 5px);
    --sub-paragraph-line-height: calc( var(--sub-paragraph-font-size) + 5px);
    --paragraph-line-height: calc( var(--paragraph-font-size) + 5px);
    --sup-paragraph-line-height: calc( var(--sup-paragraph-font-size) + 5px);
    --sub-title-line-height: calc( var(--sub-title-font-size) + 5px);
    --title-line-height: calc( var(--title-font-size) + 5px);
    --sup-title-line-height: calc( var(--sup-title-font-size) + 5px);
    --sub-header-line-height: calc( var(--sub-header-font-size) + 5px);
    --header-line-height: calc( var(--header-font-size) + 5px);
    --sup-header-line-height: calc( var(--sup-header-font-size) + 5px);
    --sub-big-line-height: calc( var(--sub-big-font-size) + 5px);
    --big-line-height: calc( var(--big-font-size) + 5px);
    --sup-big-line-height: calc( var(--sup-big-font-size) + 5px);
    --sub-huge-line-height: calc( var(--sub-huge-font-size) + 5px);
    --huge-line-height: calc( var(--huge-font-size) + 5px);
    --sup-huge-line-height: calc( var(--sup-huge-font-size) + 5px);
    --giant-line-height: calc( var(--giant-font-size) + 5px); */
}

@media (max-width: 1380px) {
    body.big {
        --sub-note-font-size: calc(6px + 5px) !important;
        --note-font-size: calc(7px + 5px) !important;
        --sup-note-font-size: calc(8px + 5px) !important;
        --sub-paragraph-font-size: calc(10px + 5px) !important;
        --paragraph-font-size: calc(11px + 5px) !important;
        --sup-paragraph-font-size: calc(12px + 5px) !important;
        --sub-title-font-size: calc(14px + 5px) !important;
        --title-font-size: calc(15px + 5px) !important;
        --sup-title-font-size: calc(16px + 5px) !important;
        --sub-header-font-size: calc(18px + 5px) !important;
        --header-font-size: calc(19px + 5px) !important;
        --sup-header-font-size: calc(20px + 5px) !important;
        --sub-big-font-size: calc(22px + 5px) !important;
        --big-font-size: calc(23px + 5px) !important;
        --sup-big-font-size: calc(24px + 5px) !important;
        --sub-huge-font-size: calc(26px + 5px) !important;
        --huge-font-size: calc(27px + 5px) !important;
        --sup-huge-font-size: calc(28px + 5px) !important;

        --giant-font-size: calc(40px + 5px) !important;

        --base-padding: 8px !important;
        --half-padding: 4px !important;
        --quarter-padding: 2px !important;
    }
}

@media (max-height: 800px) {
    body.big {
        --sub-note-font-size: calc(6px + 3px) !important;
        --note-font-size: calc(7px + 3px) !important;
        --sup-note-font-size: calc(8px + 3px) !important;
        --sub-paragraph-font-size: calc(10px + 3px) !important;
        --paragraph-font-size: calc(11px + 3px) !important;
        --sup-paragraph-font-size: calc(12px + 3px) !important;
        --sub-title-font-size: calc(14px + 3px) !important;
        --title-font-size: calc(15px + 3px) !important;
        --sup-title-font-size: calc(16px + 3px) !important;
        --sub-header-font-size: calc(18px + 3px) !important;
        --header-font-size: calc(19px + 3px) !important;
        --sup-header-font-size: calc(20px + 3px) !important;
        --sub-big-font-size: calc(22px + 3px) !important;
        --big-font-size: calc(23px + 3px) !important;
        --sup-big-font-size: calc(24px + 3px) !important;
        --sub-huge-font-size: calc(26px + 3px) !important;
        --huge-font-size: calc(27px + 3px) !important;
        --sup-huge-font-size: calc(28px + 3px) !important;

        --giant-font-size: calc(40px + 3px) !important;

        --base-padding: 8px !important;
        --half-padding: 4px !important;
        --quarter-padding: 2px !important;
    }
}

@media (max-width: 1280px) {
    body.big {
        --sub-note-font-size: calc(7px + 5px);
        --note-font-size: calc(8px + 5px);
        --sup-note-font-size: calc(9px + 5px);
        --sub-paragraph-font-size: calc(11px + 5px);
        --paragraph-font-size: calc(12px + 5px);
        --sup-paragraph-font-size: calc(13px + 5px);
        --sub-title-font-size: calc(15px + 5px);
        --title-font-size: calc(16px + 5px);
        --sup-title-font-size: calc(17px + 5px);
        --sub-header-font-size: calc(19px + 5px);
        --header-font-size: calc(20px + 5px);
        --sup-header-font-size: calc(21px + 5px);
        --sub-big-font-size: calc(23px + 5px);
        --big-font-size: calc(24px + 5px);
        --sup-big-font-size: calc(25px + 5px);
        --sub-huge-font-size: calc(27px + 5px);
        --huge-font-size: calc(28px + 5px);
        --sup-huge-font-size: calc(20px + 5px);

        --giant-font-size: calc(42px + 5px);

        --base-padding: 6px;
        --half-padding: 3px;
        --quarter-padding: 1.5px;
    }
}

.desktop-accessibility {
    display: block;
    position: absolute;
    top: 10%;
    left: -200px;
    transition: 0.4s left;
}

.desktop-accessibility.active {
    left: 0px;
}

.desktop-accessibility .accessibility-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    transition: .3s;
}

.desktop-accessibility .accessibility-icon {
    width: auto;
    height: 50px;
    padding: 8px;
    background: #326EA7;
    fill: white;
    transform: translateX(100%);
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.desktop-accessibility.active .accessibility-icon {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.desktop-accessibility .accessibility-icon * {
    pointer-events: none;
}

.desktop-accessibility .accessibility-wrapper-options {
    background: white;
    white-space: nowrap;
    overflow: hidden;
    transition: .3s;
    cursor: pointer;
}

.desktop-accessibility .accessibility-options {
    padding: 8px;
}

.desktop-accessibility .accessibility-options .option {
    display: flex;
    align-items: center;
    padding: 10px 4px;
    font-size: var(--sub-paragraph-font-size);
    color: black;
}

.desktop-accessibility .accessibility-options .option.active {
    fill: #326EA7;
    color: #326EA7;
}

.desktop-accessibility .accessibility-options .accessibility-title {
    font-size: var(--sup-title-font-size);
    font-weight: bold;
    padding: 16px 0;
    color: #326EA7;
    margin: 0;
}

.desktop-accessibility .accessibility-options .option i {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    margin-right: 8px;
}

.desktop-accessibility .accessibility-options .option img, .desktop-accessibility .accessibility-options .option svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Accessibility/Accessibility/Accessibility.mobile.css */

.accessibility-button-open .accessibility-icon {
    width: 35px;
    height: auto;
    padding: 8px;
    background: #326EA7;
    fill: white;
    cursor: pointer;
    border-radius: 8px;
}

.accessibility-wrapper-mobile {
    /* background-color: rgba(255,255,255,0.85); */
    --x: 0px;
    --y: 0px;
    background-color: transparent;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.accessibility-wrapper-mobile .accessibility-wrapper-options {
    background-color: white;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    position: absolute;
    left: var(--x);
    top: var(--y);
    white-space: nowrap;
    overflow: hidden;
}

.accessibility-wrapper-mobile .accessibility-wrapper-options .accessibility-options .option {
    display: flex;
    align-items: center;
    padding: 10px 4px;
    font-size: var(--sub-paragraph-font-size);
    color: black;
}

.accessibility-wrapper-mobile .accessibility-wrapper-options .accessibility-options .option.active {
    fill: #326EA7;
    color: #326EA7;
}

.accessibility-wrapper-mobile .accessibility-wrapper-options .accessibility-title {
        font-size: var(--sup-title-font-size);
        font-weight: bold;
        padding: 16px 0;
        color: #326EA7;
        margin: 0;
}

.accessibility-wrapper-mobile .accessibility-options .option i {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    margin-right: 8px;
}

.accessibility-wrapper-mobile .accessibility-options .option img, .accessibility-wrapper-mobile .accessibility-options .option svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Account/AccountPage.css */

.account-page {}

.account-page .account-page-content {
    margin: 0px auto;
    max-width: 1920px;
}

.account-page .account-header {
    /* background-image: radial-gradient(at top left, #a5acb6, #79838c); */
    background-image: radial-gradient(at bottom left, #b6a5ab, #8c7981);
    /* background-image: radial-gradient(at top left, #b2b6a5, #868c79); */ 
    color: white;
}

.account-page .account-post:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.0625);
}

/* Attachments/Attachment.css */

.attachment-minimized-block {
    width: 135px;
}

.attachment-minimized-block .attachment-content {
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0.125);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100%;
    width: 100%;
}

.attachment-minimized-block .attachment-content .attachment-icon {
    font-size: 40px;
    line-height: 44px;
}

.attachment-minimized-grid {
    width: 135px;
}

.attachment-minimized-grid .attachment-content {
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0.125);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: calc(9 / 16 * 100%);
}

/*  Old */

.attachment-form {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100px;
    overflow: hidden;
}

.attachment-form .attachment-grid {
    background: var(--attachment-form-grid-background);
    color: var(--attachment-form-grid-color);
    border-radius: var(--attachment-form-grid-border-radius);
    border-width: var(--attachment-form-grid-border-width);
    border-style: var(--attachment-form-grid-border-style);
    border-color: var(--attachment-form-grid-border-color);
    flex-grow: 1;
    position: relative;
    width: 100%;
    height: 1%;
}

.attachment-form .attachment-drag {
    background: var(--attachment-form-grid-background-drop);
    color: var(--attachment-form-grid-color-drop);
    border-style: var(--attachment-form-grid-border-style-drop);
    border-color: var(--attachment-form-grid-border-color-drop);
    cursor: pointer;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

.attachment-form .attachment-drag .attachment-drag-content {
    text-align: center;
    font-size: var(--title-font-size);
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY( -50%);
    padding: var(--base-padding);
    width: 100%;
}

.attachment-form.attachment-form-empty .attachment-grid {
    display: none;
}

.attachment-form.attachment-form-empty .attachment-drag {
    display: block;
}

.attachment-form:not(.attachment-form-empty) .attachment-grid {
    display: block;
}

.attachment-form:not(.attachment-form-empty) .attachment-drag {
    display: none;
}

body[dragover="true"] .attachment-form .attachment-drag {
    display: block !important;
    z-index: 1;
}

.attachment-grid .attachment-minimized {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: var(--half-padding);
    min-width: 72px;
}

.attachment-grid .attachment-minimized .attachment-minimized-content {
    background: var(--attachment-form-attachment-background);
    color: var(--attachment-form-attachment-color);
    border: var(--attachment-form-attachment-border);
    border-radius: var(--attachment-form-attachment-border-radius);
    display: block;
    position: relative;
    padding: var(--base-padding);
}

/*  Attachment  Preview */

.attachments-preview {
    background-color: rgb( 239, 239, 239);
    color: rgb( 0, 0, 0);
    border-radius: var(--border-radius);
    box-shadow: var(--window-shadow);
}

.attachment-preview-minimized {
    cursor: pointer;
}

.attachment-preview-minimized .attachment-preview-minimized-content {
    background-color: rgb( 255, 255, 255);
    color: rgb( 0, 0, 0);
    border-radius: var(--border-radius);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.1);
    font-size: 90px;
    padding-top: 100%;
    width: 100%;
}

.attachment-preview-maximized {
    overflow: hidden;
}

.attachment-preview-maximized .attachment-preview-maximized-content {}

.attachment-preview-maximized .attachment-preview-maximized-content .attachment-preview-maximized-main-content {
    background-color: rgb( 255, 255, 255);
    color: rgb( 0, 0, 0);
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.1);
    overflow: hidden;
}

.attachment-preview-maximized .attachment-preview-maximized-content .attachment-preview-maximized-footer-content {
    background-color: rgb( 255, 255, 255);
    color: rgb( 0, 0, 0);
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.1);
    overflow: hidden;
}

.attachment-preview-image {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: grab;
    transform: scale( 1);
}

.attachment-preview-image[drag="true"] {
    cursor: grabbing;
}

.attachment-button-preview {
    cursor: pointer;
    transition: 0.4s background-color;
}

.attachment-button-preview:not(.attachment-minimized-grid):hover {
    background-color: rgba( 0, 0, 0, 0.0625) !important;
}

/* .attachment-minimized:not(:last-child) { border-bottom: 1px solid rgba( 0, 0, 0, 0.0625 ); } */

.attachment-button-preview:not(:hover) .attachment-button-delete {
    display: none;
}

/* Attachments/style.css */

.attachments {
    text-align: left;
}

.attachment-list {
}

.attachment.attachment-minimized {
    background-color: var(--third-color);
    color: var(--third-color-text);

    text-align: left;

    padding: var(--half-padding);
}

.attachment.attachment-minimized .attachment-left {
    display: inline-block;

    text-align: center;
    vertical-align: middle;

    width: var(--avatar-offset);
}
.attachment.attachment-minimized .attachment-center {
    display: inline-block;

    vertical-align: middle;

    padding: 0px var(--half-padding);

    width: calc( 100% - var(--avatar-offset) * 2 );
}
.attachment.attachment-minimized .attachment-right {
    display: inline-block;

    text-align: center;
    vertical-align: middle;

    width: var(--avatar-offset);
}

.attachment.attachment-minimized .attachment-icon {
    color: var(--third-color-text);

    font-size: var(--title-font-size);

    overflow: hidden;
}

.attachment.attachment-minimized .attachment-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.attachment.attachment-minimized .attachment-size {
    font-size: var(--sub-paragrap-font-size);

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.attachment.attachment-minimized .attachment-delete {
    visibility: hidden;
}
.attachment.attachment-minimized:hover .attachment-delete {
    visibility: visible;
}

.attachment.attachment-block-inline {
    display: inline-block !important;

    border-radius: var(--border-radius);

    margin: calc( var(--half-padding) / 2 );
    padding: calc( var(--half-padding) / 2 );
}
.attachment.attachment-block-inline:not(:last-child) {
    margin-right: var(--half-padding);
}

/* Attachments/FormAttachmentList/FormAttachmentList.css */

.form-attachment-list {
    display: flex;
}

.form-attachment-list .form-attachment-list-content {
    display: flex;
    flex-grow: 1;
    width: 0%;
}

.form-attachment-list .form-attachment-list-content .form-attachment-list-item {
    position: relative;
    width: 25%;
}

.form-attachment-list .form-attachment-list-content .form-attachment-list-item .form-attachment-list-item-content {
    background-color: #f4f4f4;
    border-radius: var(--base-padding);
    position: relative;
    padding-top: 100%;
}

.form-attachment-list .form-attachment-list-content .form-attachment-list-item .form-attachment-list-item-button-remove {
    border-radius: 100px;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    height: calc(var(--font-line-height));
    width: calc(var(--font-line-height));
    transform: translate(50%, -50%);
}

.form-attachment-list .form-attachment-list-input {
    position: relative;
    width: 20%;
}

.form-attachment-list .form-attachment-list-input .form-attachment-list-input-content {
    background-color: #f4f4f4;
    border-radius: 100px;
    position: relative;
    padding-top: 100%;
}

/* ColorMode/ColorMode.css */

body[color-mode="HighContrast"] {
    background-color: yellow !important;
    filter: saturate(2);
}

body[color-mode="HighContrast"] * {
    background-color: yellow !important;
    color: black !important;
}

body[color-mode="GrayScale"] {
    filter: grayscale(1);
}

.color-mode {
    background-color: white;
    position: fixed;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

/* ColorPicker/ColorPicker.css */

.color-picker {
    box-shadow: 0px var(--half-padding) var(--base-padding) rgba(0, 0, 0, 0.25);
}

.color-picker-content {
    box-shadow: 0px var(--half-padding) var(--base-padding) rgba(0, 0, 0, 0.25);
    position: relative;
    padding-top: calc( 100% / 16 * 10);
    width: 360px;
}

.color-picker-pointer {
    --color: rgba(0, 0, 0, 0.25);
    border: 2px solid var(--color);
    box-shadow: 0px 0px var(--quarter-padding) var(--color), 0px 0px var(--quarter-padding) var(--color) inset;
    border-radius: 100%;
    opacity: 0.5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}

.color-picker .button {
    box-shadow: 0px var(--half-padding) var(--base-padding) rgba(0, 0, 0, 0.25);
    border-radius: var(--base-padding);
}

.grid-color-picker-border {
    border: 1px solid #e2e4e7;
    display: block;
}

.grid-color-picker-button {
    display: block !important;
    position: relative;
    overflow: hidden;
}

.grid-color-picker-button.active {
    outline: 2px solid crimson;
    z-index: 1;
}


.color-picker-button::after {
    content: '';
    display: block;
    background-color: var(--value);
    position: absolute;
    left: var(--half-padding);
    bottom: 0px;
    width: calc(100% - var(--half-padding) * 2 );
    height: 4px;
}

/* ContextMenu/ContextMenu.css */

.context-menu {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transition: 0.4s opacity;
}

.context-menu:not(.active) {
    opacity: 0;
}

.context-menu .context-menu-content {
    background-color: white;
    box-shadow: 0px 0px var(--half-padding) rgba(0, 0, 0, 0.25);
    border-radius: 0px var(--half-padding) var(--half-padding) var(--half-padding);
    position: fixed;
    left: 0px;
    top: 0px;
    overflow: hidden;
}

.context-menu .context-menu-content .context-menu-button {
    cursor: pointer;
    transition: 0.125s opacity;
}

.context-menu:not([padding="false"]) .context-menu-button {
    padding: var(--base-padding);
}

.context-menu .context-menu-content .context-menu-button:hover {
    background-color: rgb(239, 239, 239);
    opacity: 0.75;
}

/* ContextMenu/ContextMenu.mobile.css */

body[mobile="true"] .context-menu {
    background-color: rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    padding: var(--base-padding) !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

body[mobile="true"] .context-menu .context-menu-content {
    box-shadow: none !important;
    border-radius: var(--base-padding) !important;
    position: relative !important;
    left: 0px !important;
    top: 0px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 450px !important;
}

body[mobile="true"] .context-menu .context-menu-content .context-menu-button .paragraph {
    --font-size: var(--title-font-size) !important;
    --font-line-height: var(--title-line-height) !important;
}

body[mobile="true"] .context-menu .context-menu-content .context-menu-button {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* DragAndDrop/DragAndDrop.css */

.drag-box {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.drag-box[drag="true"], .drag-box[drag="true"] * {
    cursor: grabbing !important;
}

.drag-box .drag-element:not([drag="true"]) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 0 !important;
}

.drag-box .drag-element[drag="true"] {
    position: absolute !important;
    z-index: 1 !important;
}

.drag-box .drag-element .drag-button {
    cursor: grab;
}

.drag-box .drag-element[drag="true"], .drag-box .drag-element[drag="true"] * {
    pointer-events: none !important;
}

/* DragAndDrop/DragArea.css */

.drag-area {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.drag-area[drag="true"], .drag-area[drag="true"] * {
    cursor: grabbing !important;
}

.drag-area .drag-area-element:not([drag="true"]) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 0 !important;
}

.drag-area .drag-area-element[drag="true"] {
    position: absolute !important;
    z-index: 1 !important;
}

.drag-area .drag-area-element[drag="true"] .drag-area-element-content {
    box-shadow: 0px 0px 10px black;
}

.drag-area .drag-area-element .drag-area-button {
    cursor: grab;
}

.drag-area .drag-area-element[drag="true"], .drag-area .drag-area-element[drag="true"] * {
    pointer-events: none !important;
}

/* Events/Events.css */

.events-controller {
    width: 360px !important;
    height: 80vh !important;
    transform: translateX(calc(-50% + 72px));
}

.events {
    position: relative;
}

.events-notepad {
    background-image: url( 'https://resources.growbp.pl/grow.edu/Notepad.png' );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 24px;
    width: 100%;
    z-index: 1;
}

body[device="Desktop"] .events-content {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px var(--base-padding) rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 0;
}

.events .events-page:not(.active) {
    display: none;
}

.quickbox-events {
    display: none;
}
.quick-box .events {
    display: block;
}

/* Events/Events.mobile.css */

.events-mobile .events-mobile-view-input,
.events-mobile .events-mobile-reminds-view-input {
    border: 1px solid #9fa4ac !important;
    border-radius: var(--base-padding);
}

.events-mobile .events-mobile-view-input .bt,
.events-mobile .events-mobile-reminds-view-input .bt {
    background: none !important;
    color: #9fa4ac !important;
}

.events-mobile .events-mobile-view-input .bt.active,
.events-mobile .events-mobile-reminds-view-input .bt.active {
    background: #9fa4ac !important;
    color: white !important;
}

.events-mobile:not([reminds-view="courses"]) .events-view[value="reminds"] .course {
    display: none;
}

.events-mobile:not([reminds-view="workshops"]) .events-view[value="reminds"] .workshop {
    display: none;
}

/* FileExplorer/FileExplorer.css */

.file-explorer {
    background-color: white;
}

.file-explorer .file-explorer-section-content {
    display: flex;
    flex-wrap: wrap;
}


.file-drop .file-drop-content {
    border: 2px dashed rgba(0, 0, 0, 0.0625);
    transition: 0.2s border-color, 0.2s box-shadow;
}
.file-drop.active .file-drop-content {
    border-color: rgba(110, 167, 50);
}
.file-drop.active-drop .file-drop-content {
    border-color: rgba(110, 167, 50);
    box-shadow: var(--half-padding) var(--half-padding) var(--base-padding) rgba(0, 0, 0, 0.25);
}

.file-explorer .file-drop-placeholder-icon {
    transition: 0.5s height;
    height: calc(var(--giant-line-height) + var(--base-padding) * 2);
    overflow: hidden;
}
.file-explorer.active .file-drop-content {
    transition: 0.5s padding;
}

.file-explorer.active .file-drop-placeholder-icon {
    height: 0px !important;
}

.file-explorer.active .file-drop-content {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Files/FilesPanel.css */

.files-panel-navigation .in,
.files-panel-navigation .st,
.files-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

.files-panel .progress-bar {
    --progress: 0;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px var(--half-padding) var(--base-padding) rgba(0, 0, 0, 0.125);
    border-radius: var(--base-padding);
    height: var(--base-padding);
    width: 100%;
}

.files-panel .progress-bar::before {
    display: block;
    content: '';
    border-radius: var(--base-padding);
    background-color: royalblue;
    height: var(--base-padding);
    width: calc(var(--progress) * 100%);
    transition: 1s width;
}

.files-panel .progress-bar .progress-value {
    position: absolute;
    left: calc(var(--progress) * 100%);
    bottom: 100%;
    transform: translate(-50%, -25%);
    transition: 1s left;
}

.files-panel[right-sidebar="true"] .progress-bar {
    display: none !important;
}

/* Files/File/css/style.css */



/* Files/FileBox/FileBox.css */

.file-box {
    z-index: 1000;
}

.file-box .file-box-content {
    background-color: white;
    width: 450px;
}

.file-box-upload::after {
    display: block;
    content: '';
    background-color: rgb(110, 167, 50);
    width: calc(var(--progress) * 100%);
    height: 4px;
    transition: 0.1s width;
}

/* Forms/Form.css */

.textarea-controller {
    --background-color: transparent;
    --bt-color: #dadada6c;
    --scrollbar-color: var(--bt-color);
    border: 1px solid var(--bt-color);
    padding: var(--half-padding);
}

.textarea-controller textarea {
    --font-size: var(--paragraph-font-size);
    --font-line-height: var(--paragraph-line-height);

    color: #79838c;

    font-size: var(--font-size);
    line-height: var(--font-line-height);
    transition: 0.4s font-size, 0.4s line-height;

    padding: 0px !important;

    width: 100%;

    min-height: calc(var(--font-line-height) * 3);
    height: calc(var(--font-line-height) * 3);
    max-height: calc(var(--font-line-height) * 6);
}

.in {
    --bt-color: #dadada6c;
    border-radius: var(--half-padding);
    border: 1px solid var(--bt-color);
    color: #79838c;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    padding: var(--half-padding);
    display: block;
    width: 100%;
    transition: 0.4s background-color, 0.4s color, 0.4s border-color;
}

.in:hover {
    background-color: var(--bt-color);
    color: #79838c;
}

.in:focus {
    background-color: var(--bt-color);
    color: #79838c;
}

.st {
    --bt-color: #dadada6c;
    border-radius: var(--half-padding) !important;
    border: 1px solid var(--bt-color);
    color: #79838c;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    padding: var(--half-padding);
    display: block;
    width: 100%;
    transition: 0.4s background-color, 0.4s color, 0.4s border-color;
}

.st-clear {
    --bt-color: #dadada6c;
    border-radius: var(--half-padding) !important;
    border: none;
    color: #79838c;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    padding: var(--half-padding);
    display: block;
    width: 100%;
    min-width: 0px;
    transition: 0.4s background-color, 0.4s color, 0.4s border-color;
}

.st:hover {
    background-color: var(--bt-color);
    color: #79838c;
}

.st.select-open {
    background-color: var(--bt-color);
    color: #79838c;
}

.bt:not(.bt-clear) {
    --bt-color: #dadada6c;
    border-radius: var(--half-padding) !important;
    background-color: var(--bt-color);
    border: 1px solid var(--bt-color);
    color: #79838c;
    cursor: pointer;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    text-align: center;
    padding: var(--half-padding);
    position: relative;
    display: block;
    width: 100%;
    transition: 0.4s background-color, 0.4s color, 0.4s box-shadow;
}

.bt:not(.bt-clear):hover {
    background-color: var(--bt-color);
    color: #79838c;
}

body:not([mobile="true"]) .bt:not(.bt-clear):hover {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.125);
}

.bt-group:not(.bt-clear) {
    display: flex;
}

.bt-group:not(.bt-clear) .bt:not(:first-child) {
    border-left: 0px solid transparent;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.bt-group:not(.bt-clear) .bt:not(:last-child) {
    border-right: 0px solid transparent;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.bt-group:not(.bt-clear) .bt:not(.active) {
    background-color: transparent;
    color: inherit !important;
}

.bt-group:not(.bt-clear) .bt.active {
    background-color: #dadada6c;
    color: #79838c;
}

.bt-group:not(.bt-clear) .bt {
    border: none !important;
}

body[mobile="true"] .bt-group {
    box-shadow: none !important;
}

body[mobile="true"] .bt-group .bt {
    box-shadow: none !important;
}

.tx {
    --bt-color: #dadada6c;
    border-radius: var(--half-padding) !important;
    border: 1px solid var(--bt-color);
    color: #79838c;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    padding: var(--half-padding);
    display: block;
    width: 100%;
    transition: 0.4s background-color, 0.4s color;
    resize: none;
}

.tx:hover {
    background-color: var(--bt-color);
    color: #79838c;
}

.tx:focus {
    background-color: var(--bt-color);
    color: #79838c;
}

.label-input {
    --bt-color: #dadada6c;
    border: 1px solid var(--bt-color);
    border-radius: 10px;
}

.form-placeholder {
    pointer-events: none;
    opacity: 0.25;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.form-placeholder .form-placeholder-icon {
    padding: var(--base-padding);
}

.form-placeholder .form-placeholder-content {
    border-radius: var(--base-padding);
    text-align: center;
    padding: var(--base-padding);
    width: 0%;
    flex-grow: 1;
}

[require] {
    transition: 0.25s background-color, 0.25s color;
}

[require="error"] {
    background-color: crimson !important;
    color: white !important;
}

.object-button-controller {
    display: none;
    color: rgb(110, 167, 50);
}

.object-form .object-form-button {
    color: rgb(148, 77, 191);
}

/* Forms/Input.css */

.range {
    position: relative;
    margin: 10px;
}
.range:not([orientation="vertical"]) {
    min-width: 100px;
}

.range::before {
    content: '';
    display: block;
    background-color: orange;
    position: relative;
    border-radius: 4px;
    height: 4px;
}

.range::after {
    content: '';
    display: block;
    border-radius: 100%;
    border: 4px solid white;
    background-color: orange;
    position: absolute;
    left: calc( var(--value) * 100% );
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
}

.range[orientation="vertical"] {
    width: min-content;
    height: 100px;
}

.range[orientation="vertical"]::before {
    content: '';
    display: block;
    background-color: orange;
    position: relative;
    border-radius: 4px;
    width: 4px;
    height: 100%;
}

.range[orientation="vertical"]::after {
    content: '';
    display: block;
    border-radius: 100%;
    border: 4px solid white;
    background-color: orange;
    position: absolute;
    left: 50%;
    top: calc( var(--value) * 100% );
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
}

.time-input {
    text-align: center !important;
    width: 64px !important;
}

.date-time-input .step-form-button {
    transition: 0.2s border-color;
}
.date-time-input.hightlight .step-form-button {
    border-color: rgb(110, 167, 50);
}
.date-time-input.hightlight-error .step-form-button {
    border-color: rgb(167, 50, 110);
}

/* Forms/StepForm.css */

.step-form {
    background-color: rgb(255, 255, 255);
    color: rgb(63, 63, 63);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: var(--base-padding);
    width: 100%;
}

.step-form .step-form-content {
    display: flex;
    flex-direction: column;
}
/* 
.step-form .step-form-content .form-step:not(.active) {
    display: none;
} */

.step-form .form-step-section-header {
    border-left: 2px solid rgb(80, 133, 24);
}

.step-form .form-step-section-content {
    border-left: 2px solid rgb(80, 133, 24);
}

.step-form .step-form-input {
    color: inherit !important;
}

.step-form .step-form-button {
    color: inherit !important;
    text-align: left;
}

.step-form .step-form-button[value=""] .placeholder {
    opacity: 0.5;
}

.step-form .step-form-button:hover {
    cursor: pointer;
    opacity: 0.75;
}

/* ImageSlider/ImageSlider.css */

.image-slider .image-slider-main .image-slider-main-content {
    border: 4px solid white;
    padding-top: calc(100% / 16 * 7);
}

.image-slider .image-slider-element {
    opacity: 0;
    transition: 1s opacity;
    overflow: hidden;
}

.image-slider .image-slider-element.active {
    opacity: 1;
}

.image-slider .image-slider-element:not(.active) {
    pointer-events: none;
}

.image-slider .image-slider-dot {
    background-color: white;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
.image-slider .image-slider-button {
    opacity: 0.25;
    transition: 0.4s opacity;
}

.image-slider .image-slider-button.active {
    opacity: 1;
}

/* ImageSlider/ImageSlider.mobile.css */

.image-slider {
    touch-action: auto !important;
}

/* Notifications/NotificationsPage.css */

.notifications-page {
    --background-offset: 45%;
    background-image: radial-gradient(at bottom right, limegreen var(--background-offset), royalblue var(--background-offset));
    color: white;
}

.notifications-page .notifications-page-content {
    margin: auto;
    max-width: 1080px;
}

.notification-setting-email-controller.disabled .checkbox {
    color: rgb(0, 0, 0, 0.5);
}

/* Notifications/Notification/Notification.css */

.notification-minimized {
    text-align: initial;
    position: relative;
    padding: var(--half-padding) var(--base-padding);
    transition: 0.2s opacity;
}

.notification-minimized>.notification-content {
    background-color: white;
    color: rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.notification-minimized>.notification-content>.notification-border {
    border-left: 4px solid var(--border-color);
}

.notification[href] {
    cursor: pointer;
}

.notification-minimized[read="true"] {
    opacity: 0.5;
}
.notification-minimized:hover {
    opacity: 1;
}

/* Notifications/Notification/Notification.mobile.css */

.notification-controller-mobile .sup-title,
.notification-controller-mobile .title,
.notification-controller-mobile .sub-title  {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

.notification-controller-mobile .sup-paragraph,
.notification-controller-mobile .paragraph,
.notification-controller-mobile .sub-paragraph {
    --font-size: var(--title-font-size) !important;
    --font-line-height: var(--title-line-height) !important;
}

.notification-controller-mobile .sup-note,
.notification-controller-mobile .note, 
.notification-controller-mobile .sub-note {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
}

.notification-controller-mobile .notification-list-header {
   padding: var(--base-padding);
}

.notification-controller-mobile .notification-list-header .notification-list-button-clear {
    --font-size: var(--title-font-size) !important;
    --font-line-height: var(--title-line-height) !important;
}

.notification-controller-mobile {
    overflow: hidden !important;
    height: auto !important;
    max-height: initial !important;
}

.notification-controller-mobile .notification-minimized {
    cursor: pointer;
    padding: 0px !important;
}

.notification-controller-mobile .notification-minimized .notification-icon-controller {
    padding: var(--base-padding) !important;
}

.notification-controller-mobile .notification-minimized > .notification-content {
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0px !important;
}

.notification-controller-mobile .notification-minimized .notification-border {
    padding: var(--base-padding) !important;
}

.notification-controller-mobile .notification-minimized > .notification-content .notification-content {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: calc(var(--font-line-height) * 2);
}

/* Panel/CardBox.css */

.card-box-controller {
    position: relative;
}

.card-box {
    position: absolute !important;
    left: 0px;
    top: 0px;
    width: calc(100% / var(--columns));
    transition: 0.2s left, 0.2s top, 0.2s width, 0.2s height;
}

.card-box .card-box-content {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: 0.2s box-shadow;
}

.card-box:not(.active) .card-box-content:hover {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.card-box.active {
    left: 0% !important;
    top: 0% !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

.card-box:not(.active) .card-box-button-close {
    display: none;
}

.card-box:not(.active) .card-box-opened-content {
    display: none;
}

.card-box.active .card-box-main-content {
    display: none;
}

/* Panel/Lang.css */

.lang-controller {

}

.lang-controller .lang-label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 9px;
}

.lang-controller .lang-label .lang-button {
    cursor: pointer;
    border: 1px solid #7f7f7f;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.4s filter, 0.4s box-shadow;
}

.lang-controller .lang-label .lang-button img {
    display: block !important;
    object-fit: cover;
    object-position: center;
    width: 53px;
    height: 32px;
}

.lang-controller .lang-label .lang-button:not([active="true"]) {
    filter: grayscale(1);
}

.lang-controller .lang-label .lang-button[active="true"] {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
}

.lang-controller .lang-item:not([clang="true"]) {
    display: none;
}

/* Panel/Panel.css */

.panel {
    --background-color: rgb(239, 239, 239);
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
}

/*
    Panel Navigation
*/

.panel-navigation {
    pointer-events: none;
    position: relative;
    width: calc(40px + var(--half-padding));
    height: 100%;
    z-index: 2;
}

.panel-navigation .panel-navigation-content {
    display: flex;
    flex-direction: column;
    pointer-events: none;
    width: calc(40px + var(--half-padding));
    height: 100%;
    overflow: hidden;
    transition: 0.25s width;
}
.panel-navigation .panel-navigation-content:hover {
    width: 225px;
}

.panel-navigation .panel-navigation-main {
    pointer-events: none;
    width: 250px;
    margin: auto;
    max-height: 100%;
    overflow: hidden;
}

.panel-navigation-button {
    pointer-events: all;
    display: block !important;
    width: calc(40px + var(--half-padding));
    overflow: hidden;
    transition: 0.25s width;
}
.panel-navigation-button:hover {
    width: 225px;
}

.panel-navigation-button-content {
    background-color: var(--color);
    color: white;

    border-radius: 100px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.panel-navigation .panel-navigation-button.active .panel-navigation-button-content {
}

.panel-navigation-button-icon {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
}

.panel-navigation-button-text {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 40px;
}

@media (max-width: 1380px) {
    .panel-navigation {
        width: calc(30px + var(--half-padding));
    }
    .panel-navigation .panel-navigation-content {
        width: calc(30px + var(--half-padding));
    }
    .panel-navigation-button {
        width: calc(30px + var(--half-padding));
    }
    .panel-navigation-button-icon {
        width: 30px;
        height: 30px;
    }
    .panel-navigation-button-text {
        height: 30px;
    }
}

@media (max-height: 800px) {
    .panel-navigation {
        width: calc(30px + var(--half-padding));
    }
    .panel-navigation .panel-navigation-content {
        width: calc(30px + var(--half-padding));
    }
    .panel-navigation-button {
        width: calc(30px + var(--half-padding));
    }
    .panel-navigation-button-icon {
        width: 30px;
        height: 30px;
    }
    .panel-navigation-button-text {
        height: 30px;
    }
}

/*
    Panel Main
*/

.panel-main {
    position: relative;
    z-index: 1;
}

#panel .panel-content {
    height: 100%;
}

.panel-card-box {
    position: relative;
    transition: 0.4s background-color;
}

.panel-card-box[selecting="true"] {
    background-color: rgb(223, 223, 223);
}

.panel-card-box .select-tools {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

.panel-card-box:not([selecting="true"]) .select-tools {
    display: none !important;
}

.panel-card {
    position: absolute;
    left: calc( 100% / var(--columns) * var(--left) );
    top: calc( var(--top) * var(--height) * 1px );
    width: calc( 100% / var(--columns));
    height: calc( var(--height) * 1px );
    transition: 0.125s left, 0.125s top, 0.125s height;
}

.panel-card .panel-card-content {
    background-color: rgb(255, 255, 255);
    /* border: 1px solid rgba(0, 0, 0, 0.125); */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: 0.2s box-shadow;
}

.panel-card-box[selecting="true"] .panel-card.selected .panel-card-content {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 1);
}

.panel-card:not(.active) .panel-card-content:hover {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.panel-card.active {
    left: 0% !important;
    top: 0% !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

.panel-card:not(.active) .panel-card-button-close {
    display: none;
}

.panel-card:not(.active) .panel-card-opened-content {
    display: none;
}

.panel-card.active .panel-card-main-content {
    display: none;
}

/*
    Panel Sidebar
*/

.panel .in .st {
    background-color: transparent !important;
}

.panel .panel-sidebar {
    position: relative !important;
}

.panel .panel-sidebar .panel-sidebar-content {
    position: relative !important;
    width: 100% !important;
}

.panel-sidebar-left {
    min-width: 270px;
    overflow: hidden;
}
.panel-sidebar-right {
    --background-color: rgb(247, 247, 247);
    background-color: var(--background-color);
    width: 0%;
    max-width: calc(100% - 270px);
}
[right-sidebar="true"] .panel-sidebar-right {
    width: 100%;
}

.panel-sidebar-right .panel-sidebar-right-button-hide { display: none; }
[right-sidebar="true"]  .panel-sidebar-right .panel-sidebar-right-button-hide {
    display: block;
}

@media screen and (max-width: 1366px) {
    .courses-panel .panel-sidebar-left {
        min-width: 225px;
    }

    .courses-panel .panel-sidebar-right {
        max-width: calc(100% - 225px);
    }
}


[right-sidebar="true"] .panel-sidebar-left tr {
    width: 100%;
}
[right-sidebar="true"] .panel-sidebar-left tr:not([hide="false"]) > td:nth-child(2) {
    border-width: 1px !important;
    border-radius: var(--base-padding) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 225px;
}
[right-sidebar="true"] .panel-sidebar-left tr:not([hide="false"]) > *:not(:nth-child(2)) {
    display: none !important;
}

.panel .panel-object {
    cursor: pointer;
}

.panel [right-sidebar="true"] .panel-object {
    transition: 0.2s opacity;
}
.panel [right-sidebar="true"] .panel-object:not(.selected) {
    opacity: 0.25;
}
.panel [right-sidebar="true"] .panel-object:not(.selected):hover {
    opacity: 1;
}

/* Panel/Window/Window.css */

.window {
    width: 100%;
    height: 100%;
}

/* Layouts */

.window-columns {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.window-bars {
    display: flex;
    width: 100%;
}

/* Bars */

.window-bar {
    position: relative;
    width: 270px;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.window-bar-split {
    border-left: 1px solid rgba(0, 0, 0, 0.5);
    cursor: ew-resize;
    position: relative;
    width: 0px;
    height: 100%;
    z-index: 1;
}
.window-bar-split::after {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    width: 9px;
    height: 100%;
}

.window-bar-fill {
    flex-grow: 1;
    width: 0%;
    height: 100%;
}

/* Columns */

.window-column {
    position: relative;
    width: 100%;
    height: 270px;
    overflow: hidden;
    z-index: 0;
}

.window-column-split {
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    cursor: ns-resize;
    position: relative;
    width: 100%;
    height: 0px;
    z-index: 1;
}
.window-column-split::after {
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    width: 100%;
    height: 9px;
}

.window-column-fill {
    flex-grow: 1;
    width: 100%;
    height: 0%;
}

/* Picker/style.css */

.grow-it-search-in-quickbox {
    border-radius: 100px;
}

.grow-it-chechbox-in-quickbox-permission .data-content>.label, .grow-it-chechbox-in-quickbox-role .data-content>.label {
    padding: 4px 8px;
}

.button-search-checkbox {
    justify-content: center;
}

.button-search-checkbox button {
    padding: var(--half-padding) var(--base-padding);
}

.checkbox-master {
    color: rgb(148, 77, 191);
    text-transform: none !important;
}

/*
    ClickMeeting Conference Picker
*/

.clickmeeting-conference-picker-form-controller .quick-box-content {
    border-radius: var(--half-padding) !important;
}

.clickmeeting-conference-picker-form {
    --color: #326EA7;
    overflow: hidden;
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: var(--color);
}

.clickmeeting-conference-picker-form .clickmeeting-conference-picker-form-filter-input {
    border: none !important;
    border-radius: 0px !important;
}

.clickmeeting-conference-picker-form .clickmeeting-conference-picker-form-filter-input .bt {
    background-color: rgb(231, 231, 231);
    color: rgb(0, 0, 0);
    border: none !important;
    border-radius: 0px !important;
}

.clickmeeting-conference-picker-form .clickmeeting-conference-picker-form-filter-input .bt.active {
    background-color: rgb(207, 207, 207);
    color: rgb(0, 0, 0);
}

.clickmeeting-conference-picker-form .select {
    border: initial;
    border-radius: 0px !important;
    border-bottom: 1px solid;
}

.clickmeeting-conference-picker-form .picker-label .picker-label-content {
    background-color: rgb(239, 239, 239);
    border-radius: var(--half-padding);
    cursor: pointer;
    transition: 0.125s background-color, 0.125s color, 0.125s opacity;
}

.clickmeeting-conference-picker-form .picker-label .picker-label-content:hover {
    opacity: 0.75;
}

.clickmeeting-conference-picker-form .clickmeeting-conference-picker-form-clickmeeting-conference-input {
    color: rgb(127, 127, 127);
}

.clickmeeting-conference-picker-form .checkbox-master-controller .checkbox-label {
    flex-direction: row-reverse;
}

/* Selected clickmeeting-conference  */

.clickmeeting-conference-picker-form .picker-label.active .picker-label-content {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.clickmeeting-conference-picker-form .picker-label.active .clickmeeting-conference-picker-form-clickmeeting-conference-input {
    color: white;
}

/*
    Competence Picker
*/

.competence-picker-form-controller .quick-box-content {
    border-radius: var(--half-padding) !important;
}

.competence-picker-form {
    --color: #326EA7;
    overflow: hidden;
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: var(--color);
}

.competence-picker-form .competence-picker-form-category-input {
    border-radius: var(--base-padding);
    /* border: 1px solid rgba(0, 0, 0, 0.0625); */
    border: 1px solid rgb(230, 230, 230) !important;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.competence-picker-form .competence-picker-form-category-input .bt {
    background-color: rgba(50, 110, 167, 0.1);
    color: rgb(0, 0, 0);
    border-radius: 0px !important;
    width: 50% !important;
}

.competence-picker-form .competence-picker-form-category-input .bt:nth-child(1), .competence-picker-form .competence-picker-form-category-input .bt:nth-child(3) {
    border-right: 1px solid rgb(230, 230, 230) !important;
}

.competence-picker-form .competence-picker-form-category-input .bt:nth-child(1), .competence-picker-form .competence-picker-form-category-input .bt:nth-child(2) {
    border-bottom: 1px solid rgb(230, 230, 230) !important;
}

.competence-picker-form .competence-picker-form-category-input .bt.active {
    background-color: var(--color);
    color: rgb(255, 255, 255);
    border-color: var(--color) !important;
}

.competence-picker-form .select {
    border: initial;
    border-radius: 0px !important;
    border-bottom: 1px solid;
}

.competence-picker-form .picker-label .picker-label-content {
    background-color: rgb(239, 239, 239);
    border-radius: var(--half-padding);
    cursor: pointer;
    transition: 0.125s background-color, 0.125s color, 0.125s opacity;
}

.competence-picker-form .picker-label .picker-label-content:hover {
    opacity: 0.75;
}

.competence-picker-form .competence-picker-form-competence-input {
    color: rgb(127, 127, 127);
}

.competence-picker-form .checkbox-master-controller .checkbox-label {
    flex-direction: row-reverse;
}

/* Selected competence  */

.competence-picker-form .picker-label.active .picker-label-content {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.competence-picker-form .picker-label.active .competence-picker-form-competence-input {
    color: white;
}

/*
    Course Picker
*/

.course-picker-form-controller .quick-box-content {
    border-radius: var(--half-padding) !important;
}

.course-picker-form {
    --color: #326EA7;
    overflow: hidden;
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: var(--color);
}

.course-picker-form .course-picker-form-filter-input {
    border: none !important;
    border-radius: 0px !important;
}

.course-picker-form .course-picker-form-filter-input .bt {
    background-color: rgb(231, 231, 231);
    color: rgb(0, 0, 0);
    border: none !important;
    border-radius: 0px !important;
}

.course-picker-form .course-picker-form-filter-input .bt.active {
    background-color: rgb(207, 207, 207);
    color: rgb(0, 0, 0);
}

.course-picker-form .select {
    border: initial;
    border-radius: 0px !important;
    border-bottom: 1px solid;
}

.course-picker-form .picker-label .picker-label-content {
    background-color: rgb(239, 239, 239);
    border-radius: var(--half-padding);
    cursor: pointer;
    transition: 0.125s background-color, 0.125s color, 0.125s opacity;
}

.course-picker-form .picker-label .picker-label-content:hover {
    opacity: 0.75;
}

.course-picker-form .course-picker-form-course-input {
    color: rgb(127, 127, 127);
}

.course-picker-form .checkbox-master-controller .checkbox-label {
    flex-direction: row-reverse;
}

/* Selected course  */

.course-picker-form .picker-label.active .picker-label-content {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.course-picker-form .picker-label.active .course-picker-form-course-input {
    color: white;
}

/*
    Group Picker
*/

.group-picker-form-controller .quick-box-content {
    border-radius: var(--half-padding) !important;
}

.group-picker-form {
    --color: #326EA7;
    overflow: hidden;
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: var(--color);
}

.group-picker-form .group-picker-form-filter-input {
    border: none !important;
    border-radius: 0px !important;
}

.group-picker-form .group-picker-form-filter-input .bt {
    background-color: rgba(50, 110, 167, 0.1);
    color: rgb(0, 0, 0);
    border: none !important;
    border-radius: 0px !important;
}

.group-picker-form .group-picker-form-filter-input .bt.active {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.group-picker-form .select {
    border: initial;
    border-radius: 0px !important;
    border-bottom: 1px solid;
}

.group-picker-form .picker-label .picker-label-content {
    background-color: rgb(239, 239, 239);
    border-radius: var(--half-padding);
    cursor: pointer;
    transition: 0.125s background-color, 0.125s color, 0.125s opacity;
}

.group-picker-form .picker-label .picker-label-content:hover {
    opacity: 0.75;
}

.group-picker-form .group-picker-form-group-input {
    color: rgb(127, 127, 127);
}

.group-picker-form .checkbox-master-controller .checkbox-label {
    flex-direction: row-reverse;
}

/* Selected group  */

.group-picker-form .picker-label.active .picker-label-content {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.group-picker-form .picker-label.active .group-picker-form-group-input {
    color: white;
}

/*
    User Picker
*/

.user-picker-form-controller .quick-box-content {
    border-radius: var(--half-padding) !important;
}

.user-picker-form {
    --color: #326EA7;
    overflow: hidden;
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: var(--color);
}

.user-picker-form .user-picker-form-filter-input {
    border: none !important;
    border-radius: 0px !important;
}

.user-picker-form .user-picker-form-filter-input .bt {
    background-color: rgba(50, 110, 167, 0.1);
    color: rgb(0, 0, 0);
    border: none !important;
    border-radius: 0px !important;
}

.user-picker-form .user-picker-form-filter-input .bt.active {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.user-picker-form .user-picker-form-filter-input .bt:not(:last-child) {
    border-right: 1px solid rgb(255, 255, 255) !important;
}

.user-picker-form .select {
    border: initial;
    border-radius: 0px !important;
    border-bottom: 1px solid;
}

.user-picker-form .picker-label .picker-label-content {
    background-color: rgb(239, 239, 239);
    border-radius: var(--half-padding);
    cursor: pointer;
    transition: 0.125s background-color, 0.125s color, 0.125s opacity;
}

.user-picker-form .picker-label .picker-label-content:hover {
    opacity: 0.75;
}

.user-picker-form .user-picker-form-user-input {
    color: rgb(127, 127, 127);
}

.user-picker-form .checkbox-master-controller .checkbox-label {
    flex-direction: row-reverse;
}

/* Selected user  */

.user-picker-form .picker-label.active .picker-label-content {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.user-picker-form .picker-label.active .user-picker-form-user-input {
    color: white;
}

/*
    Video Picker
*/

.video-picker-form-controller .quick-box-content {
    border-radius: var(--half-padding) !important;
}

.video-picker-form {
    --color: #326EA7;
    overflow: hidden;
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: var(--color);
}

.video-picker-form .video-picker-form-filter-input {
    border: none !important;
    border-radius: 0px !important;
}

.video-picker-form .video-picker-form-filter-input .bt {
    background-color: rgb(231, 231, 231);
    color: rgb(0, 0, 0);
    border: none !important;
    border-radius: 0px !important;
}

.video-picker-form .video-picker-form-filter-input .bt.active {
    background-color: rgb(207, 207, 207);
    color: rgb(0, 0, 0);
}

.video-picker-form .select {
    border: initial;
    border-radius: 0px !important;
    border-bottom: 1px solid;
}

.video-picker-form .picker-label .picker-label-content {
    background-color: rgb(239, 239, 239);
    border-radius: var(--half-padding);
    cursor: pointer;
    transition: 0.125s background-color, 0.125s color, 0.125s opacity;
}

.video-picker-form .picker-label .picker-label-content:hover {
    opacity: 0.75;
}

.video-picker-form .video-picker-form-video-input {
    color: rgb(127, 127, 127);
}

.video-picker-form .checkbox-master-controller .checkbox-label {
    flex-direction: row-reverse;
}

/* Selected video  */

.video-picker-form .picker-label.active .picker-label-content {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.video-picker-form .picker-label.active .video-picker-form-video-input {
    color: white;
}

/*
    Workshop Picker
*/

.workshop-picker-form-controller .quick-box-content {
    border-radius: var(--half-padding) !important;
}

.workshop-picker-form {
    --color: #326EA7;
    overflow: hidden;
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: var(--color);
}

.workshop-picker-form .workshop-picker-form-filter-input {
    border: none !important;
    border-radius: 0px !important;
}

.workshop-picker-form .workshop-picker-form-filter-input .bt {
    background-color: rgb(231, 231, 231);
    color: rgb(0, 0, 0);
    border: none !important;
    border-radius: 0px !important;
}

.workshop-picker-form .workshop-picker-form-filter-input .bt.active {
    background-color: rgb(207, 207, 207);
    color: rgb(0, 0, 0);
}

.workshop-picker-form .select {
    border: initial;
    border-radius: 0px !important;
    border-bottom: 1px solid;
}

.workshop-picker-form .picker-label .picker-label-content {
    background-color: rgb(239, 239, 239);
    border-radius: var(--half-padding);
    cursor: pointer;
    transition: 0.125s background-color, 0.125s color, 0.125s opacity;
}

.workshop-picker-form .picker-label .picker-label-content:hover {
    opacity: 0.75;
}

.workshop-picker-form .workshop-picker-form-workshop-input {
    color: rgb(127, 127, 127);
}

.workshop-picker-form .checkbox-master-controller .checkbox-label {
    flex-direction: row-reverse;
}

/* Selected workshop  */

.workshop-picker-form .picker-label.active .picker-label-content {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.workshop-picker-form .picker-label.active .workshop-picker-form-workshop-input {
    color: white;
}

@media (max-width: 1380px) {
    .user-picker-form {
        width: 360px !important;
    }
    .group-picker-form {
        width: 360px !important;
    }
    .competence-picker-form {
        width: 360px !important;
    }
    .clickmeeting-conference-picker-form {
        width: 360px !important;
    }
    .course-picker-form {
        width: 360px !important;
    }
    .video-picker-form {
        width: 360px !important;
    }
    .workshop-picker-form {
        width: 360px !important;
    }
}

@media (max-height: 800px) {
    .user-picker-form {
        height: 540px !important;
    }
    .group-picker-form {
        height: 540px !important;
    }
    .competence-picker-form {
        height: 540px !important;
    }
    .clickmeeting-conference-picker-form {
        height: 540px !important;
    }
    .course-picker-form {
        height: 540px !important;
    }
    .video-picker-form {
        height: 540px !important;
    }
    .workshop-picker-form {
        height: 540px !important;
    }
}

/* Picker/DateTimePicker/DateTimePicker.css */

.date-time-picker {
    user-select: none;
}

.date-time-picker-content .date-time-picker-main-content {
    display: flex;
    align-items: flex-start;
}

.date-time-picker .date-picker-header-content {
    display: flex;
}

.date-time-picker .cell {
    padding: 4px;
    position: relative;
}

.date-time-picker .cell .cell-content {
    background-color: transparent;
    border-radius: 4px;
    position: relative;
    width: 40px;
    height: 40px;
}

.date-time-picker .cell .cell-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.date-time-picker .time-picker-header-content {
    display: flex;
    align-items: center;
}

.date-time-picker .cell[clickable="true"] .cell-content {
    background-color: rgb(247, 247, 247);
}

.date-time-picker .cell[clickable="true"] .cell-content:hover {
    background-color: rgb(110, 167, 50) !important;
    color: rgb(255, 255, 255) !important;
    cursor: pointer;
}

/*
    Date Picker
*/

.date-picker .date-picker-row {
    display: flex;
}

.date-picker .cell[is-today="true"] .cell-content {
    outline: 2px solid rgb(110, 167, 50);
}

.date-picker .cell[is-current-month="true"] .cell-content {
    background-color: rgb(247, 247, 247);
}

.date-picker .cell[is-current-month="true"][is-week="true"] .cell-content {
    background-color: rgb(223, 223, 223);
}

.date-picker .cell[is-selected="true"] .cell-content {
    background-color: rgb(110, 167, 50) !important;
    color: rgb(255, 255, 255) !important;
}

.date-picker .cell[date] .cell-content:hover {
    background-color: rgb(110, 167, 50) !important;
    color: rgb(255, 255, 255) !important;
    cursor: pointer;
}

/*
    Time Picker
*/

.time-picker .cell[is-current="true"] .cell-content {
    outline: 2px solid rgb(110, 167, 50);
}

.time-picker .cell[is-current="false"] .cell-content {
    background-color: rgb(247, 247, 247);
}

.time-picker .cell[hour] .cell-content:hover {
    background-color: rgb(110, 167, 50) !important;
    color: rgb(255, 255, 255) !important;
    cursor: pointer;
}

.time-picker .cell[minute] .cell-content:hover {
    background-color: rgb(110, 167, 50) !important;
    color: rgb(255, 255, 255) !important;
    cursor: pointer;
}

/* Picker/GroupUser/GroupUserPickerForm.css */

/*
    User Picker
*/

.group-user-picker-form-controller .quick-box-content {
    border-radius: var(--half-padding) !important;
}

.group-user-picker-form {
    --color: #326EA7;
    overflow: hidden;
    --background-color: rgb(255, 255, 255);
    --scrollbar-color: var(--color);
}

.group-user-picker-form .group-user-picker-form-filter-input {
    border: none !important;
    border-radius: 0px !important;
}

.group-user-picker-form .group-user-picker-form-filter-input .bt {
    background-color: rgba(50, 110, 167, 0.1);
    color: rgb(0, 0, 0);
    border: none !important;
    border-radius: 0px !important;
}

.group-user-picker-form .group-user-picker-form-filter-input .bt.active {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.group-user-picker-form .group-user-picker-form-filter-input .bt:not(:last-child) {
    border-right: 1px solid rgb(255, 255, 255) !important;
}

.group-user-picker-form .select {
    border: initial;
    border-radius: 0px !important;
    border-bottom: 1px solid;
}

.group-user-picker-form .picker-label .picker-label-content {
    background-color: rgb(239, 239, 239);
    border-radius: var(--half-padding);
    cursor: pointer;
    transition: 0.125s background-color, 0.125s color, 0.125s opacity;
}

.group-user-picker-form .picker-label .picker-label-content:hover {
    opacity: 0.75;
}

.group-user-picker-form .group-user-picker-form-user-input {
    color: rgb(127, 127, 127);
}

.group-user-picker-form .checkbox-master-controller .checkbox-label {
    flex-direction: row-reverse;
}

/* Selected user  */

.group-user-picker-form .picker-label.active .picker-label-content {
    background-color: var(--color);
    color: rgb(255, 255, 255);
}

.group-user-picker-form .picker-label.active .group-user-picker-form-user-input {
    color: white;
}

.group-group-user-picker-form .picker-label .checkbox-master {
    color: white !important;
}

/* Popup/Popup.css */

.popup-background {
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur( 8px );
  backdrop-filter: blur(8px);
  --color: #d1914b;
  --textColor: white;
  opacity: 0;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1500;
}

.popup-background .header {
  --font-size: min(var(--header-font-size), 17px) !important;
  --font-line-height: min(var(--header-line-height), 23px) !important;
}

.popup-background .title {
  --font-size: min(var(--title-font-size), 15px) !important;
  --font-line-height: min(var(--title-line-height), 20px) !important;
}

.popup-box {
  --top: 30px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
  background-color: rgb(247, 247, 247);
  border: 4px solid white;
  border-radius: 8px;
  position: fixed;
  left: 50%;
  top: 0px;
  width: 100%;
  max-width: 450px;
  overflow: hidden;
  transform: translateX(-50%) translateY(var(--top));
  transition: 0.4s transform;
}

.popup-box[type="option"] {
  --color: rgb(110, 167, 50);
}

.popup-box .popup-box-header {
  border-bottom: 4px solid white;
}

.popup-box .popup-box-header .popup-box-icon {
  color: var(--color);
  background-image: url('https://grow-edu.pl/Resources/PopupAlert.png' );
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: var(--font-line-height);
  height: var(--font-line-height);
  transform: translateY(-50%);
}

.popup-box .popup-box-content {
  border-radius: 8px 8px 0px 0px;
}

.popup-box .popup-box-footer {
  display: flex;
  justify-content: space-around;
}

.popup-box .popup-button-confirm {
  background-color: var(--color);
  border: 1px solid var(--color);
  color: white;
  text-transform: lowercase;
}

.popup-background .popup-box .popup-box-header-content {
  text-align: right;
  letter-spacing: 0px !important;
}

body[mobile="true"] .popup-box .popup-box-footer .popup-button-cancel {
  border: 1px solid var(--color);
  text-transform: lowercase;
}

body[device="Tablet"] .popup-box .popup-box-footer .popup-button-confirm {
  border-radius: 0px 0px 0px 12px;
}

body[device="Tablet"] .popup-box .popup-box-footer .popup-button-cancel {
  border-radius: 0px 0px 12px 0px;
}

.popup-box .popup-button {
  background-color: var(--color);
  color: var(--textColor);
}

.popup-center {
  background-color: rgba(0, 0, 0, 0.25);
  position: fixed;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.popup-center .popup-center-content {
  background-color: white;
  border-radius: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

body[mobile="true"] .popup-background .popup-box .popup-box-header {
  --font-size: var(--header-font-size) !important;
  --font-line-height: var(--header-line-height) !important;
}

body[mobile="true"] .popup-background .popup-box .popup-box-content-controller {
  --font-size: var(--header-font-size) !important;
  --font-line-height: var(--header-line-height) !important;
}

body[mobile="true"] .popup-background .popup-box .popup-box-footer {
  --font-size: var(--header-font-size) !important;
  --font-line-height: var(--header-line-height) !important;
}

body[device="Smartphone"]:not([orientation="landscape"]) .popup-background .popup-box {
  --top: 0px;
  border-radius: 0px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body[device="Tablet"] .popup-background .popup-box {
  border-radius: calc(8px * 2) !important;
}

.popup-background:not(.active) .popup-box {
  --top: -100% !important;
}

/* Popup/Popup.mobile.css */

@media (max-width: 1080px) {
    
    .popup-center .popup-center-content {
        max-width: 90vw !important;
    }

}

/* Popup/DragWindow/Templates/DragWindow.css */

.drag-window {
    background-color: white;
    box-shadow: 0px var(--half-padding) var(--base-padding) rgba(0, 0, 0, 0.25);
    border-radius: var(--base-padding);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    min-width: 630px;
    min-height: 630px;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    z-index: 1500;
}

.drag-window .drag-window-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.drag-window .drag-window-content {
    flex-grow: 1;
    height: 0px;
}

.drag-window .drag-window-content>* {
    width: 100%;
    height: 100%;
}

.drag-window:not([drag="true"]):not([resize="true"]) .drag-window-header-content {
    cursor: grab;
}

.drag-window[drag="true"] {
    cursor: grabbing;
}

.drag-window[drag="true"] .drag-window-content, .drag-window[resize="true"] .drag-window-content {
    pointer-events: none;
}

.drag-window .drag-window-resize {
    position: absolute;
    min-width: var(--base-padding);
    min-height: var(--base-padding);
    z-index: 10;
}

.drag-window .drag-window-resize[direction="top"] {
    cursor: n-resize;
    cursor: resize;
    left: var(--base-padding);
    top: 0px;
    width: calc(100% - calc(var(--base-padding) * 2));
}

.drag-window .drag-window-resize[direction="bottom"] {
    cursor: s-resize;
    left: var(--base-padding);
    bottom: 0px;
    width: calc(100% - calc(var(--base-padding) * 2));
}

.drag-window .drag-window-resize[direction="left"] {
    cursor: w-resize;
    left: 0px;
    top: var(--base-padding);
    height: calc(100% - calc(var(--base-padding) * 2));
}

.drag-window .drag-window-resize[direction="right"] {
    cursor: e-resize;
    right: 0px;
    top: var(--base-padding);
    height: calc(100% - calc(var(--base-padding) * 2));
}

.drag-window .drag-window-resize[direction="top left"] {
    cursor: nw-resize;
    left: 0px;
    top: 0px;
}

.drag-window .drag-window-resize[direction="top right"] {
    cursor: ne-resize;
    right: 0px;
    top: 0px;
}

.drag-window .drag-window-resize[direction="bottom left"] {
    cursor: sw-resize;
    left: 0px;
    bottom: 0px;
}

.drag-window .drag-window-resize[direction="bottom right"] {
    cursor: se-resize;
    right: 0px;
    bottom: 0px;
}

/* Popup/PopupFullscreen/PopupFullscreen.css */

.popup-fullscreen-background {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.popup-fullscreen-background .popup-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.popup-fullscreen-background .popup-fullscreen .popup-fullscreen-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.popup-fullscreen-background.white .popup-fullscreen .popup-fullscreen-content {
  background-color: rgb(255,255,255);
}

/* Positions/css/position.css */



/* Reports/ReportsPage.css */

.reports-page .report-page-columns-sidebar {
    width: 0px;
    overflow: hidden;
    transition: 0.4s width;
}
.reports-page .report-page-columns-sidebar.active {
    width: 360px;
}

.reports-page .report-page-rows-sidebar {
    width: 0px;
    overflow: hidden;
    transition: 0.4s width;
}
.reports-page .report-page-rows-sidebar.active {
    width: 360px;
}

.reports-page .table tr th {
    cursor: pointer;
    background-color: rgb(247, 247, 247);
    color: rgb(0, 0, 0);
    border: 2px solid rgba(0, 0, 0, 0.0625);
}

.reports-page table tr td {
    border: 2px solid rgba(0, 0, 0, 0.0625);
}

/* Reports/ReportTemplate/ReportTemplate.css */

.report-template-input .option[disabled] .button {
    display: none !important;
}

/* Surveys/Survey/Survey.panel.css */

.survey-panel-maximized[survey="0"] .panel-card-page .bt:not(:first-child) {
    pointer-events: none;
    opacity: 0.5;
}
.survey-panel-maximized:not([survey="0"]) .form-placeholder {
    display: none;
}
.survey-panel-maximized[survey="0"] .form-item {
    display: none;
}

.survey-panel-maximized[status=""] .survey-button-form-controller { display: block !important; }
.survey-panel-maximized[status="trash"] .survey-button-trash-controller { display: block !important; }
.survey-panel-maximized[status="sketch"] .survey-button-sketch-controller { display: block !important; }
.survey-panel-maximized[status="published"] .survey-button-published-controller { display: block !important; }

.survey-panel-maximized[status=""] .survey-date-publish-button-save-controller { display: none !important; }

/* Surveys/SurveyQuestion/SurveyQuestion.css */

.survey-question .radiobox-label * {
    transition: 0.25s color;
}

.survey-question[required] .radiobox-label * {
    color: crimson;
}

.survey-question .textarea-controller {
    transition: 0.25s border-color;
}
.survey-question .textarea-controller textarea {
    transition: 0.25s color;
}

.survey-question[required] .textarea-controller {
    border-color: crimson;
}
.survey-question[required] .textarea-controller textarea {
    color: crimson;
}

/* SwitchBox/SwitchBox.css */

.switch-box .switch-box-content .switch-box-main:not(.active) {
    display: none;
}

.switch-box .switch-box-navigation {
    display: flex;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
}

.switch-box .switch-box-navigation .switch-box-button {
    cursor: pointer;
    text-align: center;
    flex-grow: 1;
    padding: var(--half-padding);
    width: 0%;
}

.switch-box .switch-box-navigation .switch-box-button:hover {
    opacity: 0.7;
}

.switch-box .switch-box-navigation .switch-box-button::after {
    content: '';
    display: inline-block;
    background-color: rgb(0, 104, 180);
    font-size: 0px !important;
    line-height: 0px !important;
    height: 2px;
    width: 0%;
    transition: 0.4s width;
}

.switch-box .switch-box-navigation .switch-box-button.active::after {
    width: 100%;
}

/*  Switch Tab Box  */

.switch-tab-box .switch-tab-box-content .switch-tab-box-main:not(.active) {
    display: none;
}

.switch-tab-box .switch-tab-box-navigation {
    display: flex;
}

.switch-tab-box .switch-tab-box-navigation .switch-tab-box-button {
    cursor: pointer;
    text-align: center;
}

.switch-tab-box .switch-tab-box-navigation .switch-tab-box-button .switch-tab-box-button-content {}

.switch-tab-box .switch-tab-box-navigation .switch-tab-box-button.active::after {
    width: 100%;
}

/* Table/TableEditable.css */

table.editable {
    width: auto !important;
    height: auto !important;
    min-width: 180px;
}

/* Table/TableSelectable.css */

table[selected-item-count=""] .select-tools,
table[selected-item-count="0"] .select-tools,
table:not([selected-item-count]) .select-tools {
    display: none;
}

table tr[selected] td:first-child {
    background-color: rgb(50, 110, 167) !important;
}
table tr[selected] td:first-child .checkbox {
    color: white !important;
}

table.group-table .select-tools,
table.course-table .select-tools,
table.quiz-table .select-tools,
table.competence-table .select-tools,
table.workshop-table .select-tools,
table.clickmeeting-conference-table .select-tools,
table.video-table .select-tools,
table.article-table .select-tools,
table.category-table .select-tools {
    display: none !important;
}

/* Table/TableSortable.css */

/*  Old */

table {
    background-color: var(--primary-color-light);
    border-collapse: collapse;
    width: 100%;
}

table tr th {
    color: rgb(170, 170, 170);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    padding: var(--base-padding);
}

table tr:not(:last-child) th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.0625);
}


table tr:not(:last-child) td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.0625);
}

table tr td {
    font-size: var(--note-size);
    padding: var(--base-padding);
}

/*  New  */

table tr th {
    cursor: pointer;
    background-color: rgb(247, 247, 247);
    color: rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.0625);
}

table tr td {
    border: 1px solid rgba(0, 0, 0, 0.0625);
}

table tr th[sort] {
    color: rgb(63, 63, 63);
    position: relative;
}

table tr th[sort]::before {
    position: absolute;
    top: 50%;
    left: 0px;

    text-transform: initial;
    font-style: normal;
    font-family: 'GrowIcons';
    line-height: 1;
    display: inline-block;
    padding: 0px 5px;
    transform: translateY(-50%) scale(1.6);
    transform-origin: 50% 56%;
}

table tr th[sort="asc"]::before {
    content: '\005C';
}

table tr th[sort="desc"]::before {
    content: '\005E';
}

/*  Soft    */

table.soft tr th {
    background-color: rgb(255, 255, 255);
    color: rgb(110, 167, 50);
    border: none;
    position: relative;
}

/* table.soft tr th:not(:first-child)::before {
    display: block;
    content: '';
    height: calc( var(--base-padding) * 2 );
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.125);
} */

table.soft tr td {
    background-color: rgb(255, 255, 255);
    border: none;
    position: relative;
    transition: 0.1s background-color;
}

table.soft tr td * {}

/* table.soft tr td:not(:first-child)::before {
    display: block;
    content: '';
    height: calc( var(--base-padding) * 2 );
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.125);
} */

table tr:hover td {
    /* background-color: var(--primary-color-dark); */
    background-color: rgb(247, 247, 247);
}

/*
    Table labels
*/

table.labels {
    background: none !important;
    border-collapse: separate;
    border-spacing: 0px var(--half-padding) !important;
}

table.labels tr:not(.sticky-top):not(.sticky-bottom) {
    position: relative;
    z-index: 0;
}

table.labels tr:first-child {
    background-color: rgb(255, 255, 255) !important;

    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
}

/* table.labels tr:first-child th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
} */

table.labels th .icon {
    opacity: 0.25;
}

table.labels th .table-button-export .icon {
    opacity: 1;
}

table.labels th {
    background-color: var(--background-color) !important;
    border: none !important;
    font-size: var(--paragraph-font-size) !important;
    line-height: var(--paragraph-line-height) !important;
    font-weight: bold !important;
    text-align: left;
    text-transform: none !important;
    padding: var(--base-padding) !important;
}

table.labels td {
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
    background-color: rgb(255, 255, 255);
    font-size: var(--paragraph-font-size) !important;
    line-height: var(--paragraph-line-height) !important;
    padding: var(--base-padding) !important;
}

table.labels td:first-child {
    border-left: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-top-left-radius: var(--base-padding) !important;
    border-bottom-left-radius: var(--base-padding) !important;
}

table.labels td:last-child {
    border-right: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-top-right-radius: var(--base-padding) !important;
    border-bottom-right-radius: var(--base-padding) !important;
}

.table-4 {
    min-width: 135px;
}

.table-4 {
    max-width: 270px;
}

.table-5 {
    min-width: 160px;
}

.table-5 {
    max-width: 320px;
}

@media (max-width: 1460px) {
    /* table.labels th {
        font-size: var(--note-font-size) !important;
        line-height: var(--note-line-height) !important;
        padding: var(--half-padding) !important;
    }

    table.labels td {
        font-size: var(--note-font-size) !important;
        line-height: var(--note-line-height) !important;
        padding: var(--half-padding) !important;
    } */

    /* .table-4 {
        width: 75px;
    }
    .table-5 {
        width: 100px;
    } */
}

/* TextEditor/TextEditor.css */

.text-editor {
    background: white;
    --bt-color: #dadada6c;
    border-radius: var(--half-padding) !important;
    border: 1px solid var(--bt-color);
}

.clear-html * {
    white-space: initial !important;
}

.clear-html p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

.clear-html ol {
    display: block;
    list-style-type: decimal;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

.clear-html ul {
    display: block;
    list-style-type: disc;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

.clear-html li {
    display: list-item;
}

.clear-html blockquote {
    border-left: 2px solid rgb(239, 239, 239);
    display: block;
    font-style: italic !important;
    padding: var(--half-padding);
}

.clear-html img {
    display: inline-block;
    vertical-align: top;
    width: auto;
    max-width: 100%;
}

.clear-html sub {
    font-size: calc(var(--font-size) * 0.625);
    position: relative;
    top: calc(-0.15 * var(--font-line-height));
}

.clear-html sup {
    font-size: calc(var(--font-size) * 0.625);
    position: relative;
    top: calc(0.15 * var(--font-line-height));
}

.clear-text sub {
    font-size: calc(var(--font-size) * 0.625);
    position: relative;
    top: calc(-0.15 * var(--font-line-height));
}

.clear-text sup {
    font-size: calc(var(--font-size) * 0.625);
    position: relative;
    top: calc(0.15 * var(--font-line-height));
}

.clear-text blockquote {
    border-left: 2px solid rgb(239, 239, 239);
    display: block;
    font-style: italic !important;
    padding: 0 var(--base-padding);
}

@media (max-width: 1200px) {
    #body[orientation="landscape"] .clear-html ol {
        padding-left: 16px;
    }
}

@media (max-width: 900px) {
    #body[orientation="portrait"] .clear-html ol {
        padding-left: 16px;
    }
}

/* Wojciech/css/courses.css */

.course-status .course-status-content-label {
    position: absolute;
    top: -31%;
    right: -31%;
    width: 103%;
    height: 100%;
    transform: translateY( -13%) translateX( 13%) rotate( 45deg);
}

.course-status .course-status-content-label .course-status-name {
    text-align: center;
    padding: calc( var(--content-padding) / 2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
    width: 200%;
}

.course-status .course-status-content-label .course-status-name[status="waiting"] {
    background: red;
    color: white;
}

.course-status .course-status-content-label .course-status-name[status="join"] {
    background: rgb(220, 146, 119);
    color: white;
}

.course-status .course-status-content-label .course-status-name[status="during"] {
    display: none;
    background: rgb(220, 146, 119);
    color: white;
}

.course-status .course-status-content-label .course-status-name[status="done"] {
    background: rgb(148, 77, 191);
    color: white;
}

.category-course-home {
    padding-top: 0;
}

/* course-status-maximized */

.course-status-maximized {
    position: absolute;
    top: 0px;
    right: 0px;
    width: calc( 100% / 3);
    padding-top: calc( 100% / 3);
    overflow: hidden;
}

.course-status-maximized .course-status-maximized-content {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 100%;
    height: 100%;
    transform: translateY( -13%) translateX( 13%) rotate( 45deg);
}

.course-status-maximized .course-status-maximized-content .course-status-maximized-name {
    text-align: center;
    padding: calc( var(--content-padding) / 2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
    width: 200%;
}

.course-status-maximized .course-status-maximized-content .course-status-maximized-name[status="waiting"] {
    background: red;
    color: white;
}

.course-status-maximized .course-status-maximized-content .course-status-maximized-name[status="join"] {
    background: rgb(220, 146, 119);
    color: white;
}

.course-status-maximized .course-status-maximized-content .course-status-maximized-name[status="during"] {
    display: none;
    background: rgb(220, 146, 119);
    color: white;
}

.course-status-maximized .course-status-maximized-content .course-status-maximized-name[status="done"] {
    background: rgb(148, 77, 191);
    color: white;
}

.category-course-home {
    padding-top: 0;
}

/* Market/style.Market.css */

.market {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.market .market-content {
    display: flex;
    background-image: url('https://grow-edu.pl/Resources/chalk-blue.png');
    background-size: 100% 100%;
    padding: 20px;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: 570px;
}

.market .market-content .market-main {
    flex-grow: 1;
    width: 0%;
    height: 100%;
}

.market .market-content .market-sidebar {
    width: 270px;
    height: 100%;
    overflow-y: auto;
}

.market .market-sidebar .market-course-thumbnail {
    cursor: pointer;
}

.market .market-sidebar .market-course-thumbnail .market-course-thumbnail-content {
    position: relative;
}

.market .market-sidebar .market-course-thumbnail .market-course-thumbnail-content::before {
    content: '';
    background-image: url('https://grow-edu.pl/Resources/border-color.png');
    background-size: 100% 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: 0.4s opacity;
}
.market .market-sidebar .market-course-thumbnail:not([selected]) .market-course-thumbnail-content::before {
    opacity: 0 !important;
}

.market .market-sidebar .market-course-thumbnail .market-course-thumbnail-content::after {
    content: '';
    background-color: rgba(110, 167, 50, 0.5);
    background-image: url('https://grow-edu.pl/Resources/SelectedCourseOverlay.png');
    background-size: 100% 100%;
    background-size: 100% 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: 0.4s opacity;
}

.market .market-sidebar .market-course-thumbnail:not([active="true"]) .market-course-thumbnail-content::after {
    opacity: 0 !important;
}

.market:not([active="true"]) .market-course-button-toggle .market-course-selected {
    display: none;
}

.market[active="true"] .market-course-button-toggle .market-course-to-select {
    display: none;
}

.market .market-course-button-toggle {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    height: 40px;
    width: 155px;
}

.market .market-button-submit {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    height: 40px;
    width: 155px;
}

.market:not([filled="true"]) .market-course-button-toggle {
    background-image: url('https://grow-edu.pl/Resources/backgound-button.png');
    border: 2px solid #f7df00;
    background-size: 100% 100%;
    color: black;
}

.market:not([filled="true"]) .market-button-submit {
    color: #f7df00;
}

.market[filled="true"] .market-course-button-toggle {
    color: #f7df00;
}

.market[filled="true"] .market-button-submit {
    background-image: url('https://grow-edu.pl/Resources/backgound-button.png');
    border: 2px solid #f7df00;
    background-size: 100% 100%;
    color: black;
}

.market[filled="true"][active="false"] .market-course-button-toggle {
    display: none !important;
}

/* ClickMeeting/ClickMeeting.css */

.clickmeeting-bar {
    position: fixed;
    right: 0px;
    bottom: 0px;
    max-width: 100%;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    transition: 0.4s opacity;
}

body[mobile="true"] .clickmeeting-bar {
    display: none;
}

.clickmeeting-bar .clickmeeting-bar-content {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);

    border: 2px solid rgba(0, 0, 0, 0.125);
    border-radius: 16px;

    max-width: 100%;
    overflow: hidden;
    transition: 0.4s border-radius, 0.2s background-color;
}

/*
    Footer
*/

.clickmeeting-bar[status="none"] .clickmeeting-bar-content {
    background-color: rgb(110, 167, 50);
    color: rgb(255, 255, 255);

    border-radius: 32px;

    min-width: 64px;
    min-height: 64px;
}

.clickmeeting-bar:not([conferences=""]):not([conferences="0"]) {
    opacity: 1;
}
.clickmeeting-bar[conferences=""],
.clickmeeting-bar[conferences="0"] {
    pointer-events: none !important;
}

.clickmeeting-bar:not([status="none"]) .clickmeeting-bar-footer {
    display: none;
}

/*
    Hidden
*/

.clickmeeting-bar[status="none"] .clickmeeting-bar-button-close {
    display: none;
}

.clickmeeting-bar[status="none"] .clickmeeting-bar-main {
    display: none !important;
}

/*
    Single
*/

.clickmeeting-bar[status="single"] .clickmeeting-bar-main .clickmeeting-conference:not(:first-child) {
    display: none;
}

/*
    All
*/

/* ClickMeeting/ClickMeeting.page.mobile.css */

.click-meeting-page-mobile .scroll-view .scroll-view-bar--bg .input--search * {
    color: white !important;
}

.click-meeting-page-mobile .scroll-view .scroll-view-bar .input--search * {
    color: white !important;
}

.click-meeting-page-mobile .scroll-view[view="Grid"] .scroll-view-content {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-auto-rows: min-content;
}

/* ClickMeeting/ClickMeetingConference/CMConference.css */

.clickmeeting-conference-slider {

}

.clickmeeting-conference-slider .clickmeeting-conference-slider-content {
    overflow: hidden;
}

.clickmeeting-conference-minimized-preview {
    --scale: 1;

    position: absolute;
    left: 0%;
    top: 50%;
    
    width: 1280px;
    height: 720px;

    transform-origin: 0% 50%;
    transform: translateY(-50%) scale(var(--scale)) translateX(-50%);
    transition: 0.4s transform, 0.4s left;
}

.clickmeeting-conference-minimized-preview .clickmeeting-conference-image {
    width: 100%;
    height: 100%;
}

.clickmeeting-conference-minimized-preview .clickmeeting-conference-content {
    background-color: white;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

.clickmeeting-conference-minimized-preview .clickmeeting-conference-main {
    background-color: white;
    pointer-events: none;
    opacity: 0;
    transition: 0.8s opacity;
}

.clickmeeting-conference-minimized-preview:nth-child(1) .clickmeeting-conference-main {
    pointer-events: all;
    opacity: 1;
}

/*
    Minimized
*/

.clickmeeting-conference-minimized {
    min-width: 360px;
    width: 360px;
    max-width: 360px;
}

/* ClickMeeting/ClickMeetingConference/CMConference.mobile.css */

/* Popup */
.bottom-bar.popup-click-meeting-conference {
    --border-color: #637b84;
}

.click-meeting-page-mobile .scroll-view .scroll-view-content .click-meeting-conference-minimized-home-preview .click-meeting-conference-name {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: calc(var(--font-line-height) * 2);
}

body[orientation="landscape"] .click-meeting-page-mobile .scroll-view .click-meeting-conference-minimized-mobile .click-meeting-conference-content-mobile,
.click-meeting-page-mobile .scroll-view[view="Grid"] .click-meeting-conference-minimized-mobile .click-meeting-conference-content-mobile {
    background-color: white;
    color: black;
    border-radius: calc(var(--base-padding) * 2);
    overflow: hidden;
}

body:not([orientation="landscape"]) .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-home-preview .click-meeting-conference-name {
    -webkit-line-clamp: 1;
    height: calc(var(--font-line-height) * 1);
}

body:not([orientation="landscape"]) .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-mobile {
    color: white;
    flex-shrink: 0;
    margin-bottom: 16px;
}

body:not([orientation="landscape"]) .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-search-controller {
    display: none !important;
}

body:not([orientation="landscape"]) .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-info {
    color: #a2a9b1;
    display: flex;
}

body:not([orientation="landscape"]) .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-content-mobile {
    border-left: 4px solid #a2a9b1 !important;
    border-radius: 0px !important;
    display: flex !important;
    flex-direction: row-reverse !important;
}

body:not([orientation="landscape"]) .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-header .clickmeeting-conference-image {
    --height: calc(var(--header-line-height) + var(--title-line-height) + var(--base-padding) * 3);
    --width: calc(var(--height) / 9 * 16);
    padding: 0px !important;
    width: var(--width);
    height: var(--height);
    border-radius: var(--base-padding);
}

body:not([orientation="landscape"]) .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-footer {
    border-bottom: none;
    position: relative;
    overflow: visible;
    flex-grow: 1;
    width: 0%;
}

body:not([orientation="landscape"]) .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-footer::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

body[orientation="landscape"] .click-meeting-page-mobile .scroll-view .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-date,
body .click-meeting-page-mobile .scroll-view[view="Grid"] .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-date {
    display: none !important;
}

body[device="Smartphone"] .click-meeting-page-mobile .scroll-view[view="List"] .scroll-view-content .click-meeting-conference-minimized-mobile .click-meeting-conference-header {
    display: none !important;
}

/* ClickMeeting/ClickMeetingConference/Panel/CMConference.panel.css */

.clickmeeting-conference-panel-maximized[clickmeeting-conference="0"] .panel-card-page .bt:not(:first-child) {
    pointer-events: none;
    opacity: 0.5;
}

.clickmeeting-conference-panel-maximized[status=""] .clickmeeting-conference-button-form-controller { display: block !important; }
.clickmeeting-conference-panel-maximized[status="active"] .clickmeeting-conference-button-active-controller { display: block !important; }
.clickmeeting-conference-panel-maximized[status="inactive"] .clickmeeting-conference-button-active-controller { display: block !important; }

/* ClickMeeting/Page/ClickMeeting.mobile.page.css */

.click-meeting-page-mobile .scroll-view {
    --color: white;
}

.webinars-mobile {
    background: linear-gradient(45deg, #607881, #637b84);
    display: flex;
    flex-direction: column;
}

.webinars-mobile.scroll-view .scroll-view-header .scroll-view-bar--bg {
    background: linear-gradient(45deg, #607881, #637b84);
}

.webinars-mobile .description::-webkit-scrollbar {
    width: 3px;
}

.webinars-mobile .description.empty {
    color: hsla(0, 0%, 0%, .25);
    font-size: 130px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden !important;
}

.webinars-mobile .description.empty .icon {
    line-height: 80%;
}

.webinars-mobile .webinar--btn {
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0px 0px 4px 2px hsl(0, 0%, 0%, .35);
    background: #f1883c;
    color: white;
}

.webinars-mobile .webinar-mobile-view {
    height: 100%;
}

.webinars-mobile .webinar-wrapper {
    height: 100%;
    border-radius: 24px;
    background: white;
    border: 4px solid white;
    overflow: hidden;
}

.webinars-mobile .webinar--title {
    font-weight: bold;
    margin-bottom: 16px;
}

.webinars-mobile .rail {
    background: #a1a8b0;
}

.webinars-mobile .scroll-view-header {
    color: white;
}

.webinars-mobile .webinar--date .row:last-child {
    padding-left: 8px;
}

.webinars-mobile .webinar--date .row span:last-child {
    padding-left: 4px;
}

/* placeholder */
.webinars-mobile .webinar-mobile-view.placeholder {
    pointer-events: none;

}

.webinars-mobile .webinar-mobile-view.placeholder .description {
    color: transparent;
    pointer-events: none;
    background: #d6d6d6;
    box-shadow: none;
}

.webinars-mobile .webinar-mobile-view.placeholder .webinar--btn {
    color: transparent;
    pointer-events: none;
    background: #d6d6d6;
    box-shadow: none;
}

.webinars-mobile .webinar-mobile-view.placeholder span {
    background: #d6d6d6;
    color: transparent;
    border-radius: 8px;
}

.webinars-mobile .webinar-mobile-view.placeholder .icon {
    color: #d6d6d6;
}

/* ClickMeeting/Page/ClickMeeting.page.mobile.css */



/* ClickMeeting/Page/ClickMeetingPage.css */

.clickmeeting-conferences-page {
    background-image: radial-gradient( at top left, rgba(38, 74, 79, 0.25), rgba(38, 74, 79, 0.75) );
    color: white;
}

.clickmeeting-conferences-page .clickmeeting-conferences-page-content {
    margin: auto;
    max-width: 1920px;
}

/* ClickMeeting/Panel/ClickMeeting.panel.css */

.click-meeting-panel-navigation .in,
.click-meeting-panel-navigation .st,
.click-meeting-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* pptx/pptx.css */

@import url( 'https://fonts.googleapis.com/css2?family=Lato&display=swap' );
@import url( 'https://fonts.googleapis.com/css2?family=Roboto&display=swap' );
@import url( 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap' );

/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2' );
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXg.woff2) format('woff2' );
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* pptx/Presentation/Templates/pptxPresentationMaximized.css */

pptx-presentation {
    --presentation-width: 720;
    --presentation-height: 540;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

pptx-presentation pptx-presentation-content {
    --presentation-scale-x: calc(var(--width) / var(--presentation-width));
    --presentation-scale-y: calc(var(--height) / var(--presentation-height));
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--presentation-width) * 1px);
    height: calc(var(--presentation-height) * 1px);
    transform: translate(-50%, -50%) scale(min(var(--presentation-scale-x), var(--presentation-scale-y)));
    overflow: hidden;
}

pptx-presentation[clickable="true"] {
    cursor: pointer;
}

pptx-presentation pptx-presentation-content::after {
    pointer-events: none !important;
    background-color: crimson;
    background-image: url('https://grow-edu.pl/Resources/cursor.png' );
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    border-radius: 4px;
    content: '';
    display: block;
    opacity: 0.5;
    position: absolute;
    right: 50px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    transition: 0.2s opacity;
}
pptx-presentation[clickable="true"]:hover pptx-presentation-content::after {
    opacity: 1;
}

pptx-presentation:not([clickable="true"]) pptx-presentation-content::after {
    opacity: 0 !important;
}

/* pptx/Shape/pptx.Shape.css */

pptx-presentation pptx-presentation-content pptx-slide pptx-slide-content pptx-shape {
    --display: block;

    --from-opacity: 0;
    
    --from-left: 0px;
    --from-top: 0px;
    --from-width: 0px;
    --from-height: 0px;

    --brightness: 1;
    --saturation: 1;
    --opacity: 1;
    --drop-shadow: none;

    --left: 0px;
    --top: 0px;
    --width: 0px;
    --height: 0px;

    --from-rotation: 0deg;

    --translateX: 0px;
    --translateY: 0px;
    --translateZ: 0px;

    --rotation: 0deg;

    --rotateX: 0deg;
    --rotateY: 0deg;
    --rotateZ: 0deg;

    --scaleX: 1;
    --scaleY: 1;
    --scaleZ: 1;

    --effectRotateZ: 0deg;

    display: var(--display);
    opacity: var(--opacity);

    filter: saturate(var(--saturation)) brightness(var(--brightness)) drop-shadow(var(--drop-shadow));

    position: absolute;

    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);

    --transformRotateZ: calc(var(--rotateZ) + var(--rotation) + var(--effectRotateZ));

    transform:
        translateX(var(--translateX))
        translateY(var(--translateY))
        translateZ(var(--translateZ))
        rotateX(var(--rotateX))
        rotateY(var(--rotateY))
        rotateZ(var(--transformRotateZ))
        scaleX(var(--scaleX))
        scaleY(var(--scaleY))
        scaleZ(var(--scaleZ));
}

pptx-presentation pptx-presentation-content pptx-slide pptx-slide-content pptx-shape pptx-shape-content {
    display: block;
    
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    width: 100%;
    height: 100%;
}

/*

pptx-presentation pptx-presentation-content pptx-slide[entry-effect-type="3954"] pptx-shape {
    opacity: var(--from-opacity);

    left: var(--from-left);
    top: var(--from-top);
    width: var(--from-width);
    height: var(--from-height);
    
    transform: translateX(var(--translateX)) translateY(var(--translateY)) translateZ(var(--translateZ)) rotateX(var(--rotateX)) rotateY(var(--rotateY)) rotateZ(var(--from-rotation)) scaleX(var(--scaleX)) scaleY(var(--scaleY)) scaleZ(var(--scaleZ));
}

pptx-presentation pptx-presentation-content pptx-slide[entry-effect-type="3954"][entry-effect="true"] pptx-shape {
    opacity: var(--opacity);

    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    
    transform: translateX(var(--translateX)) translateY(var(--translateY)) translateZ(var(--translateZ)) rotateX(var(--rotateX)) rotateY(var(--rotateY)) rotateZ(var(--rotation)) scaleX(var(--scaleX)) scaleY(var(--scaleY)) scaleZ(var(--scaleZ));
    
    transition: var(--entry-effect-duration) left, var(--entry-effect-duration) top, var(--entry-effect-duration) height, var(--entry-effect-duration) width, var(--entry-effect-duration) transform;
}
*/

/* pptx/Slide/pptx.Slide.css */

pptx-presentation pptx-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
pptx-presentation pptx-slide:not([display="true"]) {
    display: none;
}

pptx-presentation pptx-slide pptx-slide-content {
    display: block;
    outline: 1px solid #7f7f7f;
    position: relative;
    width: calc(var(--slide-width) * 1px);
    height: calc(var(--slide-height) * 1px);
    transform-style: preserve-3d;
    perspective: calc(var(--slide-height) * 1px);
    overflow: hidden;
}

/* pptx/Slide/Templates/pptx.SlideMaximized.css */

pptx-presentation pptx-presentation-content pptx-slide {
    width: 100%;
    height: 100%;
}
pptx-presentation pptx-presentation-content pptx-slide:not([display="true"]) {
    display: none;
}

pptx-presentation pptx-presentation-content pptx-slide pptx-slide-content {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    width: calc(var(--slide-width) * 1px);
    height: calc(var(--slide-height) * 1px);
    transform-style: preserve-3d;
    perspective: calc(var(--slide-height) * 1px);
    width: 100%;
    height: 100%;
}

/* pptx/Styles/pptx.Bullet.css */

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"] {
    display: list-item !important;
    margin-left: 24px;
    width: calc(100% - 24px);
}

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"][bullet-character="111"] {
    list-style-type: circle;
}

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"][bullet-character="113"]::marker {
    content: 'q';
    font-family: 'Wingdings';
}

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"][bullet-character="118"]::marker {
    content: 'v';
    font-family: 'Wingdings';
}

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"][bullet-character="167"] {
    list-style-type: square;
}

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"][bullet-character="216"]::marker {
    content: 'Ø';
    font-family: 'Wingdings';
}

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"][bullet-character="216"]::marker {
    content: 'Ø';
    font-family: 'Wingdings';
}

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"][bullet-character="252"]::marker {
    content: 'P';
    font-family: 'Wingdings2';
}

paragraph-range[has-text="true"][bullet-type="msoBulletUnnumbered"][bullet-character="8226"] {
    list-style-type: disc;
}

paragraph-range[has-text="true"][bullet-type="msoBulletNumbered"] {
    display: list-item !important;
    margin-left: 24px;
    width: calc(100% - 24px);
}

paragraph-range[has-text="true"][bullet-type="msoBulletNumbered"][bullet-character="8226"] {
    list-style-type: decimal;
}

/* pptx/Styles/pptx.Effect.css */

[effect-exit="false"]:not([effect-done="true"])[effect-type] {
    --effect: 0;
    --effectInverse: calc( 1 - var(--effect) );
    --effect-timing-duration: 1s;
    
    --effectMinusHalf: calc( var(--effect) - 0.5 );
    --effectMinusHalfAbsolute: max( var(--effectMinusHalf), calc( -1 * var(--effectMinusHalf) ) );

    --effectHalfAtTop: calc( 1 - ( var(--effectMinusHalfAbsolute) * 2 ) );

    --effect-value: 0;
}

/* msoAnimEffectAppear */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectAppear"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectFade */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFade"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectDissolve */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectDissolve"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectCheckerboard */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectCheckerboard"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectCenterRevolve */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectCenterRevolve"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectFlip */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFlip"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectWhip */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWhip"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectSwish */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSwish"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectSpiral */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSpiral"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectRiseUp */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectRiseUp"] {
    --translateY: calc(1px * var(--presentation-height) * var(--effectInverse)) !important;
}

/* msoAnimEffectArcUp */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectArcUp"]:not([effect="true"]) { display: none !important; }
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectArcUp"] {
    transform-origin: calc(50% + 50% * var(--effectInverse)) 50%;
    --translateY: calc(1px * var(--presentation-height) * var(--effectInverse)) !important;
    --scaleX: calc(1 + 1 * var(--effectInverse));
    --scaleY: calc(1 + 1 * var(--effectInverse));
    --scaleZ: calc(1 + 1 * var(--effectInverse));
}

/* msoAnimEffectCredits */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectCredits"] {
    --translateY: calc(1px * var(--presentation-height) - 2px * var(--presentation-height) * var(--effect)) !important;
}

/* msoAnimEffectFly */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"] {
    --opacity: var(--effect) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionLeft"] {
    --translateX: calc(-100% * var(--effectInverse)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionRight"] {
    --translateX: calc(100% * var(--effectInverse)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionUp"] {
    --translateY: calc(-100% * var(--effectInverse)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionDown"] {
    --translateY: calc(100% * var(--effectInverse)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionUpLeft"] {
    --translateX: calc(-100% * var(--effectInverse)) !important;
    --translateY: calc(-100% * var(--effectInverse)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionUpRight"] {
    --translateX: calc(100% * var(--effectInverse)) !important;
    --translateY: calc(-100% * var(--effectInverse)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionDownLeft"] {
    --translateX: calc(-100% * var(--effectInverse)) !important;
    --translateY: calc(100% * var(--effectInverse)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionDownRight"] {
    --translateX: calc(100% * var(--effectInverse)) !important;
    --translateY: calc(100% * var(--effectInverse)) !important;
}

/* msoAnimEffectAscend */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectAscend"] {
    --opacity: var(--effect) !important;
    --translateY: calc(100px * var(--effectInverse)) !important;
}

/* msoAnimEffectAscend */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectDescend"] {
    --opacity: var(--effect) !important;
    --translateY: calc(-100px * var(--effectInverse)) !important;
}

/* msoAnimEffectRandomBars */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectRandomBars"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectFloat */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFloat"] {
    --opacity: var(--effect) !important;
    --rotateZ: calc(-135deg * var(--effectInverse)) !important;
    transform-origin: 50% 0%;
}

/* msoAnimEffectGrowAndTurn */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectGrowAndTurn"] {
    --opacity: var(--effect) !important;
    --rotateZ: calc(90deg * var(--effectInverse)) !important;
    --scaleX: var(--effect) !important;
    --scaleY: var(--effect) !important;
    --scaleZ: var(--effect) !important;
}

/* msoAnimEffectGrowShrink */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectGrowShrink"] {
    --scaleX: calc( 1 + var(--effect) * 0.5) !important;
    --scaleY: calc( 1 + var(--effect) * 0.5) !important;
    --scaleZ: calc( 1 + var(--effect) * 0.5) !important;
}

/* msoAnimEffectSpinner */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSpinner"] {
    --opacity: var(--effect) !important;
    --rotateZ: calc(360deg * var(--effectInverse)) !important;
    --scaleX: calc(0.75 + 0.25 * var(--effect)) !important;
    --scaleY: calc(0.75 + 0.25 * var(--effect)) !important;
    --scaleZ: calc(0.75 + 0.25 * var(--effect)) !important;
}

/* msoAnimEffectZoom */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectZoom"]:not([effect="true"]) { display: none !important; }
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectZoom"] {
    --scaleX: var(--effect) !important;
    --scaleY: var(--effect) !important;
    --scaleZ: var(--effect) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectZoom"][effect-parameters-direction="msoAnimDirectionInSlightly"] {
    --scaleX: calc(0.75 + 0.25 * var(--effect)) !important;
    --scaleY: calc(0.75 + 0.25 * var(--effect)) !important;
    --scaleZ: calc(0.75 + 0.25 * var(--effect)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectZoom"][effect-parameters-direction="msoAnimDirectionOut"],
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectZoom"][effect-parameters-direction="msoAnimDirectionOutBottom"] {
    --scaleX: calc(2 - var(--effect)) !important;
    --scaleY: calc(2 - var(--effect)) !important;
    --scaleZ: calc(2 - var(--effect)) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectZoom"][effect-parameters-direction="msoAnimDirectionOutSlightly"] {
    --scaleX: calc(1.25 - 0.25 * var(--effect)) !important;
    --scaleY: calc(1.25 - 0.25 * var(--effect)) !important;
    --scaleZ: calc(1.25 - 0.25 * var(--effect)) !important;
}

/* msoAnimEffectFadedZoom */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFadedZoom"] {
    --opacity: var(--effect) !important;
    --scaleX: var(--effect) !important;
    --scaleY: var(--effect) !important;
    --scaleZ: var(--effect) !important;
}

/* msoAnimEffectExpand */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectExpand"] {
    --opacity: var(--effect) !important;
    --scaleX: calc(0.75 + 0.25 * var(--effect)) !important;
}

/* msoAnimEffectStretch */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStretch"] {
    --opacity: var(--effect) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionHorizontal"] {
    --scaleX: var(--effect) !important;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionDown"] {
    --scaleY: var(--effect) !important;
    transform-origin: 50% 100%;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionLeft"] {
    --scaleX: var(--effect) !important;
    transform-origin: 0% 50%;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionRight"] {
    --scaleX: var(--effect) !important;
    transform-origin: 100% 50%;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionUp"] {
    --scaleY: var(--effect) !important;
    transform-origin: 50% 0%;
}

/* msoAnimEffectStretchy */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStretchy"] {
    --opacity: var(--effect) !important;
    --scaleX: calc(1.25 - 0.25 * var(--effect)) !important;
}

/* msoAnimEffectFadedSwivel */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFadedSwivel"] {
    --opacity: var(--effect) !important;
    --rotateY: calc(-450deg * var(--effectInverse)) !important;
}

/* msoAnimEffectBounce */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectBounce"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectSpin */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSpin"] {
    --rotateZ: calc( 1deg * var(--effect-parameters-amount) * var(--effect) ) !important;
}

/* msoAnimEffectSplit */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSplit"] {
    --effect-split-left: calc( var(--effect) * 50% );
    --effect-split-right: calc( 100% - var(--effect) * 50% );
    -webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSplit"][effect-parameters-direction="msoAnimDirectionVerticalIn"] {
    -webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSplit"][effect-parameters-direction="msoAnimDirectionVerticalOut"] {
    -webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--effect-split-right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--effect-split-right))) );
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--effect-split-right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--effect-split-right))) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSplit"][effect-parameters-direction="msoAnimDirectionHorizontalIn"] {
    -webkit-mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
    mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectSplit"][effect-parameters-direction="msoAnimDirectionHorizontalOut"] {
    -webkit-mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--effect-split-right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--effect-split-right))) );
    mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--effect-split-right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--effect-split-right))) );
}

/* msoAnimEffectWipe */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWipe"]:not([effect="true"]) { display: none !important; }
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWipe"] {
    --direction: to top;
    -webkit-mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
    mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWipe"][effect-parameters-direction="msoAnimDirectionLeft"] {
    --direction: to right;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWipe"][effect-parameters-direction="msoAnimDirectionRight"] {
    --direction: to left;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWipe"][effect-parameters-direction="msoAnimDirectionUp"] {
    --direction: to bottom;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWipe"][effect-parameters-direction="msoAnimDirectionDown"] {
    --direction: to top;
}

/* msoAnimEffectPeek */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectPeek"]:not([effect="true"]) { display: none !important; }
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectPeek"] {
    --direction: to top;
    -webkit-mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
    mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectPeek"][effect-parameters-direction="msoAnimDirectionLeft"] {
    --direction: to right;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectPeek"][effect-parameters-direction="msoAnimDirectionRight"] {
    --direction: to left;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectPeek"][effect-parameters-direction="msoAnimDirectionUp"] {
    --direction: to bottom;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectPeek"][effect-parameters-direction="msoAnimDirectionDown"] {
    --direction: to top;
}

/* msoAnimEffectBlinds */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectBlinds"]:not([effect="true"]) { display: none !important; }
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectBlinds"] {
    --direction: to top;
    -webkit-mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
    mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectBlinds"][effect-parameters-direction="msoAnimDirectionVertical"] {
    --direction: to right;
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectBlinds"][effect-parameters-direction="msoAnimDirectionHorizontal"] {
    --direction: to bottom;
}

/* msoAnimEffectCircle */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectCircle"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectCircle"][effect-parameters-direction="msoAnimDirectionOut"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
}

/* msoAnimEffectBox */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectBox"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectBox"][effect-parameters-direction="msoAnimDirectionOut"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
}

/* msoAnimEffectPlus */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectPlus"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectPlus"][effect-parameters-direction="msoAnimDirectionOut"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
}

/* msoAnimEffectDiamond */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectDiamond"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectDiamond"][effect-parameters-direction="msoAnimDirectionOut"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
}

/* msoAnimEffectStrips */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStrips"] {
    -webkit-mask-image: radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStrips"][effect-parameters-direction="msoAnimDirectionDownLeft"] {
    -webkit-mask-image: radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStrips"][effect-parameters-direction="msoAnimDirectionDownRight"] {
    -webkit-mask-image: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStrips"][effect-parameters-direction="msoAnimDirectionTopLeft"] {
    -webkit-mask-image: radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}
[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectStrips"][effect-parameters-direction="msoAnimDirectionTopRight"] {
    -webkit-mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}

/* msoAnimEffectWheel */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWheel"] {
    -webkit-mask-image: conic-gradient(
        at center,
        rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ),
        rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% )
    );
    mask-image: conic-gradient(
        at center,
        rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ),
        rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% )
    );
}

/* msoAnimEffectWedge */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectWedge"] {
    -webkit-mask-image: conic-gradient(
        from 0deg at 50% 50%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) calc(var(--effect) * 50%),
        rgba(0, 0, 0, 0) calc(var(--effect) * 50%),
        rgba(0, 0, 0, 0) calc(100% - var(--effect) * 50%),
        rgba(0, 0, 0, 1) calc(100% - var(--effect) * 50%),
        rgba(0, 0, 0, 1) 100%
    );
    mask-image: conic-gradient(
        from 0deg at 50% 50%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) calc(var(--effect) * 50%),
        rgba(0, 0, 0, 0) calc(var(--effect) * 50%),
        rgba(0, 0, 0, 0) calc(100% - var(--effect) * 50%),
        rgba(0, 0, 0, 1) calc(100% - var(--effect) * 50%),
        rgba(0, 0, 0, 1) 100%
    );
}

/* msoAnimEffectFlashBulb */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectFlashBulb"] {
    --opacity: calc( 1 - 0.25 * var(--effectHalfAtTop) ) !important;
    --scaleX: calc( 1 + 0.1 * var(--effectHalfAtTop) ) !important;
    --scaleY: calc( 1 + 0.1 * var(--effectHalfAtTop) ) !important;
    --scaleZ: calc( 1 + 0.1 * var(--effectHalfAtTop) ) !important;
}

/* msoAnimEffectTeeter */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectTeeter"] {
    --effectRotateZ: calc(var(--effect-value) * 1deg);
}

/* msoAnimEffectDesaturate */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectDesaturate"] {
    --saturation: var(--effectInverse) !important;
}

/* msoAnimEffectDarken */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectDarken"] {
    --brightness: calc( 1 - var(--effect) * 0.5 ) !important;
}

/* msoAnimEffectLighten */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectLighten"] {
    --brightness: calc( 1 + var(--effect) * 0.5 ) !important;
}

/* msoAnimEffectTransparency */

[effect-exit="false"]:not([effect-done="true"])[effect-type="msoAnimEffectTransparency"] {
    --opacity: calc( 1 - var(--effect) * 0.5 ) !important;
}

/* pptx/Styles/pptx.EffectExit.css */

[effect-exit="true"][effect-done="true"] { display: none !important; }

[effect-exit="true"][effect-type] {
    --effect: 1;
    --effectInverse: calc( 1 - var(--effect) );
    --effect-timing-duration: 1s;
    
    --effectMinusHalf: calc( var(--effect) - 0.5 );
    --effectMinusHalfAbsolute: max( var(--effectMinusHalf), calc( -1 * var(--effectMinusHalf) ) );

    --effectHalfAtTop: calc( 1 - ( var(--effectMinusHalfAbsolute) * 2 ) );

    --effect-value: 1;
}

/* msoAnimEffectAppear */

[effect-exit="true"][effect-type="msoAnimEffectAppear"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectFade */

[effect-exit="true"][effect-type="msoAnimEffectFade"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectDissolve */

[effect-exit="true"][effect-type="msoAnimEffectDissolve"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectCheckerboard */

[effect-exit="true"][effect-type="msoAnimEffectCheckerboard"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectCenterRevolve */

[effect-exit="true"][effect-type="msoAnimEffectCenterRevolve"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectFlip */

[effect-exit="true"][effect-type="msoAnimEffectFlip"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectWhip */

[effect-exit="true"][effect-type="msoAnimEffectWhip"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectSwish */

[effect-exit="true"][effect-type="msoAnimEffectSwish"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectSpiral */

[effect-exit="true"][effect-type="msoAnimEffectSpiral"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectRiseUp */

[effect-exit="true"][effect-type="msoAnimEffectRiseUp"] {
    --translateY: calc(1px * var(--presentation-height) * var(--effectInverse)) !important;
}

/* msoAnimEffectArcUp */

[effect-exit="true"][effect-type="msoAnimEffectArcUp"]:not([effect="true"]) { display: none !important; }
[effect-exit="true"][effect-type="msoAnimEffectArcUp"] {
    transform-origin: calc(50% + 50% * var(--effectInverse)) 50%;
    --translateY: calc(1px * var(--presentation-height) * var(--effectInverse)) !important;
    --scaleX: calc(1 + 1 * var(--effectInverse));
    --scaleY: calc(1 + 1 * var(--effectInverse));
    --scaleZ: calc(1 + 1 * var(--effectInverse));
}

/* msoAnimEffectCredits */

[effect-exit="true"][effect-type="msoAnimEffectCredits"] {
    --translateY: calc(1px * var(--presentation-height) - 2px * var(--presentation-height) * var(--effect)) !important;
}

/* msoAnimEffectFly */

[effect-exit="true"][effect-type="msoAnimEffectFly"] {
    --opacity: var(--effect) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionLeft"] {
    --translateX: calc(-100% * var(--effectInverse)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionRight"] {
    --translateX: calc(100% * var(--effectInverse)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionUp"] {
    --translateY: calc(-100% * var(--effectInverse)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionDown"] {
    --translateY: calc(100% * var(--effectInverse)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionUpLeft"] {
    --translateX: calc(-100% * var(--effectInverse)) !important;
    --translateY: calc(-100% * var(--effectInverse)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionUpRight"] {
    --translateX: calc(100% * var(--effectInverse)) !important;
    --translateY: calc(-100% * var(--effectInverse)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionDownLeft"] {
    --translateX: calc(-100% * var(--effectInverse)) !important;
    --translateY: calc(100% * var(--effectInverse)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectFly"][effect-parameters-direction="msoAnimDirectionDownRight"] {
    --translateX: calc(100% * var(--effectInverse)) !important;
    --translateY: calc(100% * var(--effectInverse)) !important;
}

/* msoAnimEffectAscend */

[effect-exit="true"][effect-type="msoAnimEffectAscend"] {
    --opacity: var(--effect) !important;
    --translateY: calc(100px * var(--effectInverse)) !important;
}

/* msoAnimEffectAscend */

[effect-exit="true"][effect-type="msoAnimEffectDescend"] {
    --opacity: var(--effect) !important;
    --translateY: calc(-100px * var(--effectInverse)) !important;
}

/* msoAnimEffectRandomBars */

[effect-exit="true"][effect-type="msoAnimEffectRandomBars"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectFloat */

[effect-exit="true"][effect-type="msoAnimEffectFloat"] {
    --opacity: var(--effect) !important;
    --rotateZ: calc(-135deg * var(--effectInverse)) !important;
    transform-origin: 50% 0%;
}

/* msoAnimEffectGrowAndTurn */

[effect-exit="true"][effect-type="msoAnimEffectGrowAndTurn"] {
    --opacity: var(--effect) !important;
    --rotateZ: calc(90deg * var(--effectInverse)) !important;
    --scaleX: var(--effect) !important;
    --scaleY: var(--effect) !important;
    --scaleZ: var(--effect) !important;
}

/* msoAnimEffectGrowShrink */

[effect-exit="true"][effect-type="msoAnimEffectGrowShrink"] {
    --scaleX: calc( 1 + var(--effect) * 0.5) !important;
    --scaleY: calc( 1 + var(--effect) * 0.5) !important;
    --scaleZ: calc( 1 + var(--effect) * 0.5) !important;
}

/* msoAnimEffectSpinner */

[effect-exit="true"][effect-type="msoAnimEffectSpinner"] {
    --opacity: var(--effect) !important;
    --rotateZ: calc(360deg * var(--effectInverse)) !important;
    --scaleX: calc(0.75 + 0.25 * var(--effect)) !important;
    --scaleY: calc(0.75 + 0.25 * var(--effect)) !important;
    --scaleZ: calc(0.75 + 0.25 * var(--effect)) !important;
}

/* msoAnimEffectZoom */

[effect-exit="true"][effect-type="msoAnimEffectZoom"]:not([effect="true"]) { display: none !important; }
[effect-exit="true"][effect-type="msoAnimEffectZoom"] {
    --scaleX: var(--effect) !important;
    --scaleY: var(--effect) !important;
    --scaleZ: var(--effect) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectZoom"][effect-parameters-direction="msoAnimDirectionInSlightly"] {
    --scaleX: calc(0.75 + 0.25 * var(--effect)) !important;
    --scaleY: calc(0.75 + 0.25 * var(--effect)) !important;
    --scaleZ: calc(0.75 + 0.25 * var(--effect)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectZoom"][effect-parameters-direction="msoAnimDirectionOut"],
[effect-exit="true"][effect-type="msoAnimEffectZoom"][effect-parameters-direction="msoAnimDirectionOutBottom"] {
    --scaleX: calc(2 - var(--effect)) !important;
    --scaleY: calc(2 - var(--effect)) !important;
    --scaleZ: calc(2 - var(--effect)) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectZoom"][effect-parameters-direction="msoAnimDirectionOutSlightly"] {
    --scaleX: calc(1.25 - 0.25 * var(--effect)) !important;
    --scaleY: calc(1.25 - 0.25 * var(--effect)) !important;
    --scaleZ: calc(1.25 - 0.25 * var(--effect)) !important;
}

/* msoAnimEffectFadedZoom */

[effect-exit="true"][effect-type="msoAnimEffectFadedZoom"] {
    --opacity: var(--effect) !important;
    --scaleX: var(--effect) !important;
    --scaleY: var(--effect) !important;
    --scaleZ: var(--effect) !important;
}

/* msoAnimEffectExpand */

[effect-exit="true"][effect-type="msoAnimEffectExpand"] {
    --opacity: var(--effect) !important;
    --scaleX: calc(0.75 + 0.25 * var(--effect)) !important;
}

/* msoAnimEffectStretch */

[effect-exit="true"][effect-type="msoAnimEffectStretch"] {
    --opacity: var(--effect) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionHorizontal"] {
    --scaleX: var(--effect) !important;
}
[effect-exit="true"][effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionDown"] {
    --scaleY: var(--effect) !important;
    transform-origin: 50% 100%;
}
[effect-exit="true"][effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionLeft"] {
    --scaleX: var(--effect) !important;
    transform-origin: 0% 50%;
}
[effect-exit="true"][effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionRight"] {
    --scaleX: var(--effect) !important;
    transform-origin: 100% 50%;
}
[effect-exit="true"][effect-type="msoAnimEffectStretch"][effect-parameters-direction="msoAnimDirectionUp"] {
    --scaleY: var(--effect) !important;
    transform-origin: 50% 0%;
}

/* msoAnimEffectStretchy */

[effect-exit="true"][effect-type="msoAnimEffectStretchy"] {
    --opacity: var(--effect) !important;
    --scaleX: calc(1.25 - 0.25 * var(--effect)) !important;
}

/* msoAnimEffectFadedSwivel */

[effect-exit="true"][effect-type="msoAnimEffectFadedSwivel"] {
    --opacity: var(--effect) !important;
    --rotateY: calc(-450deg * var(--effectInverse)) !important;
}

/* msoAnimEffectBounce */

[effect-exit="true"][effect-type="msoAnimEffectBounce"] {
    --opacity: var(--effect) !important;
}

/* msoAnimEffectSpin */

[effect-exit="true"][effect-type="msoAnimEffectSpin"] {
    --rotateZ: calc( 1deg * var(--effect-parameters-amount) * var(--effect) ) !important;
}

/* msoAnimEffectSplit */

[effect-exit="true"][effect-type="msoAnimEffectSplit"] {
    --effect-split-left: calc( var(--effect) * 50% );
    --effect-split-right: calc( 100% - var(--effect) * 50% );
    -webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
}
[effect-exit="true"][effect-type="msoAnimEffectSplit"][effect-parameters-direction="msoAnimDirectionVerticalIn"] {
    -webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
}
[effect-exit="true"][effect-type="msoAnimEffectSplit"][effect-parameters-direction="msoAnimDirectionVerticalOut"] {
    -webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--effect-split-right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--effect-split-right))) );
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--effect-split-right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--effect-split-right))) );
}
[effect-exit="true"][effect-type="msoAnimEffectSplit"][effect-parameters-direction="msoAnimDirectionHorizontalIn"] {
    -webkit-mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
    mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-left), rgba( 0, 0, 0, 0 ) var(--effect-split-right), rgba( 0, 0, 0, 1 ) var(--effect-split-right) );
}
[effect-exit="true"][effect-type="msoAnimEffectSplit"][effect-parameters-direction="msoAnimDirectionHorizontalOut"] {
    -webkit-mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--effect-split-right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--effect-split-right))) );
    mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--effect-split-left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--effect-split-right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--effect-split-right))) );
}

/* msoAnimEffectWipe */

[effect-exit="true"][effect-type="msoAnimEffectWipe"]:not([effect="true"]) { display: none !important; }
[effect-exit="true"][effect-type="msoAnimEffectWipe"] {
    --direction: to top;
    -webkit-mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
    mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
}
[effect-exit="true"][effect-type="msoAnimEffectWipe"][effect-parameters-direction="msoAnimDirectionLeft"] {
    --direction: to right;
}
[effect-exit="true"][effect-type="msoAnimEffectWipe"][effect-parameters-direction="msoAnimDirectionRight"] {
    --direction: to left;
}
[effect-exit="true"][effect-type="msoAnimEffectWipe"][effect-parameters-direction="msoAnimDirectionUp"] {
    --direction: to bottom;
}
[effect-exit="true"][effect-type="msoAnimEffectWipe"][effect-parameters-direction="msoAnimDirectionDown"] {
    --direction: to top;
}

/* msoAnimEffectPeek */

[effect-exit="true"][effect-type="msoAnimEffectPeek"]:not([effect="true"]) { display: none !important; }
[effect-exit="true"][effect-type="msoAnimEffectPeek"] {
    --direction: to top;
    -webkit-mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
    mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
}
[effect-exit="true"][effect-type="msoAnimEffectPeek"][effect-parameters-direction="msoAnimDirectionLeft"] {
    --direction: to right;
}
[effect-exit="true"][effect-type="msoAnimEffectPeek"][effect-parameters-direction="msoAnimDirectionRight"] {
    --direction: to left;
}
[effect-exit="true"][effect-type="msoAnimEffectPeek"][effect-parameters-direction="msoAnimDirectionUp"] {
    --direction: to bottom;
}
[effect-exit="true"][effect-type="msoAnimEffectPeek"][effect-parameters-direction="msoAnimDirectionDown"] {
    --direction: to top;
}

/* msoAnimEffectBlinds */

[effect-exit="true"][effect-type="msoAnimEffectBlinds"]:not([effect="true"]) { display: none !important; }
[effect-exit="true"][effect-type="msoAnimEffectBlinds"] {
    --direction: to top;
    -webkit-mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
    mask-image: linear-gradient( var(--direction), rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% + 12.5% ) );
}
[effect-exit="true"][effect-type="msoAnimEffectBlinds"][effect-parameters-direction="msoAnimDirectionVertical"] {
    --direction: to right;
}
[effect-exit="true"][effect-type="msoAnimEffectBlinds"][effect-parameters-direction="msoAnimDirectionHorizontal"] {
    --direction: to bottom;
}

/* msoAnimEffectCircle */

[effect-exit="true"][effect-type="msoAnimEffectCircle"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
}
[effect-exit="true"][effect-type="msoAnimEffectCircle"][effect-parameters-direction="msoAnimDirectionOut"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
}

/* msoAnimEffectBox */

[effect-exit="true"][effect-type="msoAnimEffectBox"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
}
[effect-exit="true"][effect-type="msoAnimEffectBox"][effect-parameters-direction="msoAnimDirectionOut"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
}

/* msoAnimEffectPlus */

[effect-exit="true"][effect-type="msoAnimEffectPlus"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
}
[effect-exit="true"][effect-type="msoAnimEffectPlus"][effect-parameters-direction="msoAnimDirectionOut"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
}

/* msoAnimEffectDiamond */

[effect-exit="true"][effect-type="msoAnimEffectDiamond"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 0 ) calc( 100% - var(--effect) * 100% ), rgba( 0, 0, 0, 1 ) calc( 100% - var(--effect) * 100% ) );
}
[effect-exit="true"][effect-type="msoAnimEffectDiamond"][effect-parameters-direction="msoAnimDirectionOut"] {
    -webkit-mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% ) );
}

/* msoAnimEffectStrips */

[effect-exit="true"][effect-type="msoAnimEffectStrips"] {
    -webkit-mask-image: radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}
[effect-exit="true"][effect-type="msoAnimEffectStrips"][effect-parameters-direction="msoAnimDirectionDownLeft"] {
    -webkit-mask-image: radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}
[effect-exit="true"][effect-type="msoAnimEffectStrips"][effect-parameters-direction="msoAnimDirectionDownRight"] {
    -webkit-mask-image: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}
[effect-exit="true"][effect-type="msoAnimEffectStrips"][effect-parameters-direction="msoAnimDirectionTopLeft"] {
    -webkit-mask-image: radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}
[effect-exit="true"][effect-type="msoAnimEffectStrips"][effect-parameters-direction="msoAnimDirectionTopRight"] {
    -webkit-mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
    mask-image: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0) calc(var(--effectInverse) * 100%), rgba(0, 0, 0, 1) calc(var(--effectInverse) * 100%));
}

/* msoAnimEffectWheel */

[effect-exit="true"][effect-type="msoAnimEffectWheel"] {
    -webkit-mask-image: conic-gradient(
        at center,
        rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ),
        rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% )
    );
    mask-image: conic-gradient(
        at center,
        rgba( 0, 0, 0, 1 ) calc( var(--effect) * 100% ),
        rgba( 0, 0, 0, 0 ) calc( var(--effect) * 100% )
    );
}

/* msoAnimEffectWedge */

[effect-exit="true"][effect-type="msoAnimEffectWedge"] {
    -webkit-mask-image: conic-gradient(
        from 0deg at 50% 50%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) calc(var(--effect) * 50%),
        rgba(0, 0, 0, 0) calc(var(--effect) * 50%),
        rgba(0, 0, 0, 0) calc(100% - var(--effect) * 50%),
        rgba(0, 0, 0, 1) calc(100% - var(--effect) * 50%),
        rgba(0, 0, 0, 1) 100%
    );
    mask-image: conic-gradient(
        from 0deg at 50% 50%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) calc(var(--effect) * 50%),
        rgba(0, 0, 0, 0) calc(var(--effect) * 50%),
        rgba(0, 0, 0, 0) calc(100% - var(--effect) * 50%),
        rgba(0, 0, 0, 1) calc(100% - var(--effect) * 50%),
        rgba(0, 0, 0, 1) 100%
    );
}

/* msoAnimEffectFlashBulb */

[effect-exit="true"][effect-type="msoAnimEffectFlashBulb"] {
    --opacity: calc( 1 - 0.25 * var(--effectHalfAtTop) ) !important;
    --scaleX: calc( 1 + 0.1 * var(--effectHalfAtTop) ) !important;
    --scaleY: calc( 1 + 0.1 * var(--effectHalfAtTop) ) !important;
    --scaleZ: calc( 1 + 0.1 * var(--effectHalfAtTop) ) !important;
}

/* msoAnimEffectTeeter */

[effect-exit="true"][effect-type="msoAnimEffectTeeter"] {
    --effectRotateZ: calc(var(--effect-value) * 1deg);
}

/* msoAnimEffectDesaturate */

[effect-exit="true"][effect-type="msoAnimEffectDesaturate"] {
    --saturation: var(--effectInverse) !important;
}

/* msoAnimEffectDarken */

[effect-exit="true"][effect-type="msoAnimEffectDarken"] {
    --brightness: calc( 1 - var(--effect) * 0.5 ) !important;
}

/* msoAnimEffectLighten */

[effect-exit="true"][effect-type="msoAnimEffectLighten"] {
    --brightness: calc( 1 + var(--effect) * 0.5 ) !important;
}

/* msoAnimEffectTransparency */

[effect-exit="true"][effect-type="msoAnimEffectTransparency"] {
    --opacity: calc( 1 - var(--effect) * 0.5 ) !important;
}

/* pptx/Styles/pptx.Shadow.css */

[shadow="msoTrue"] {
    --drop-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color) !important;
}

/* pptx/Styles/pptx.TextRange.css */

root-range {
    display: block;
    position: relative;
    width: 100%;
}

paragraph-range {
    display: block;
    position: relative;
    width: 100%;
}

paragraph-range:first-child {
    padding-top: 0px !important;
}

paragraph-range:last-child {
    padding-bottom: 0px !important;
}

line-range {
    display: flex;
    line-height: inherit;
    flex-direction: row;
    align-items: baseline;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

paragraph-range[alignment="ppAlignLeft"] line-range,
paragraph-range[alignment="msoAlignLeft"] line-range {
    justify-content: flex-start;
}

paragraph-range[alignment="ppAlignCenter"] line-range,
paragraph-range[alignment="msoAlignCenter"] line-range {
    justify-content: center;
}

paragraph-range[alignment="ppAlignRight"] line-range,
paragraph-range[alignment="msoAlignRight"] line-range {
    justify-content: flex-end;
}

paragraph-range[alignment="ppAlignJustify"] line-range:not(:last-child),
paragraph-range[alignment="msoAlignJustify"] line-range:not(:last-child) {
    justify-content: space-between;
}

word-range {
    display: inline-block;
    line-height: inherit;
}

run-range {
    display: inline;
    line-height: inherit;
    white-space: pre;
    text-rendering: optimizeSpeed;
    font-feature-settings: 'kern' 0, 'liga' 0;
}

run-range[bold="msoTrue"] {
    font-weight: bold;
}

run-range[italic="msoTrue"] {
    font-style: italic;
}

run-range[underline-style="msoUnderlineSingleLine"] {
    text-decoration: underline;
}

run-range[strike="msoSingleStrike"] {
    text-decoration: line-through;
}

run-range[underline-style="msoUnderlineSingleLine"][strike="msoSingleStrike"] {
    text-decoration: underline line-through;
}

/* pptx/Styles/pptx.Transition.css */

[entry-transition-type] {
    --transition: 0;
    --transitionInverse: calc(1 - var(--transition));
}

/* ppEffectFade */

[entry-transition-type="3954"] pptx-slide[transition-index="0"] pptx-shape {
    opacity: calc(var(--from-opacity) + (var(--opacity) - var(--from-opacity)) * var(--transition)) !important;
    left: calc(var(--from-left) + (var(--left) - var(--from-left)) * var(--transition)) !important;
    top: calc(var(--from-top) + (var(--top) - var(--from-top)) * var(--transition)) !important;
    width: calc(var(--from-width) + (var(--width) - var(--from-width)) * var(--transition)) !important;
    height: calc(var(--from-height) + (var(--height) - var(--from-height)) * var(--transition)) !important;
}

/* ppEffectFade */

[entry-transition-type="ppEffectFade"] pptx-slide[transition-index="0"] {
    opacity: var(--transition);
}

/* ppEffectFadeSmoothly */

[entry-transition-type="ppEffectFadeSmoothly"] pptx-slide[transition-index="0"] {
    opacity: var(--transition);
}

/* ppEffectPush */

[entry-transition-type="ppEffectPushUp"] pptx-slide[transition-index="-1"] {
    transform: translateY(calc(var(--transition) * -100%));
}
[entry-transition-type="ppEffectPushUp"] pptx-slide[transition-index="0"] {
    transform: translateY(calc(var(--transitionInverse) * 100%));
}

[entry-transition-type="ppEffectPushDown"] pptx-slide[transition-index="-1"] {
    transform: translateY(calc(var(--transition) * 100%));
}
[entry-transition-type="ppEffectPushDown"] pptx-slide[transition-index="0"] {
    transform: translateY(calc(var(--transitionInverse) * -100%));
}

[entry-transition-type="ppEffectPushRight"] pptx-slide[transition-index="-1"] {
    transform: translateX(calc(var(--transition) * 100%));
}
[entry-transition-type="ppEffectPushRight"] pptx-slide[transition-index="0"] {
    transform: translateX(calc(var(--transitionInverse) * -100%));
}

[entry-transition-type="ppEffectPushLeft"] pptx-slide[transition-index="-1"] {
    transform: translateX(calc(var(--transition) * -100%));
}
[entry-transition-type="ppEffectPushLeft"] pptx-slide[transition-index="0"] {
    transform: translateX(calc(var(--transitionInverse) * 100%));
}

/* ppEffectWarp */

[entry-transition-type="ppEffectWarpIn"] pptx-slide[transition-index="-1"] {
    transform: scale(calc(1 + var(--transition)));
    opacity: var(--transitionInverse);
    z-index: 10;
}
[entry-transition-type="ppEffectWarpIn"] pptx-slide[transition-index="0"] {
    transform: scale(calc(0.5 + var(--transition) * 0.5));
}

[entry-transition-type="ppEffectWarpOut"] pptx-slide[transition-index="-1"] {
    transform: scale(calc(1 - var(--transition) * 0.5));
}
[entry-transition-type="ppEffectWarpOut"] pptx-slide[transition-index="0"] {
    transform: scale(calc(2 - var(--transition)));
    opacity: var(--transition);
}

[entry-transition-type="ppEffectNewsflash"] pptx-slide[transition-index="0"] {
    opacity: var(--transition);
    transform: scale(var(--transition)) rotate(calc(var(--transitionInverse) * 360deg));
}

/* ppEffectUncover */

[entry-transition-type="ppEffectUncoverUp"] pptx-slide[transition-index="-1"] {
    transform: translateY(calc(var(--transition) * -100%));
    z-index: 10;
}
[entry-transition-type="ppEffectUncoverDown"] pptx-slide[transition-index="-1"] {
    transform: translateY(calc(var(--transition) * 100%));
    z-index: 10;
}
[entry-transition-type="ppEffectUncoverRight"] pptx-slide[transition-index="-1"] {
    transform: translateX(calc(var(--transition) * 100%));
    z-index: 10;
}
[entry-transition-type="ppEffectUncoverLeft"] pptx-slide[transition-index="-1"] {
    transform: translateX(calc(var(--transition) * -100%));
    z-index: 10;
}

[entry-transition-type="ppEffectUncoverLeftDown"] pptx-slide[transition-index="-1"] {
    transform: translateX(calc(var(--transition) * -100%)) translateY(calc(var(--transition) * 100%));
    z-index: 10;
}
[entry-transition-type="ppEffectUncoverRightDown"] pptx-slide[transition-index="-1"] {
    transform: translateX(calc(var(--transition) * 100%)) translateY(calc(var(--transition) * 100%));
    z-index: 10;
}
[entry-transition-type="ppEffectUncoverLeftUp"] pptx-slide[transition-index="-1"] {
    transform: translateX(calc(var(--transition) * -100%)) translateY(calc(var(--transition) * -100%));
    z-index: 10;
}
[entry-transition-type="ppEffectUncoverRightUp"] pptx-slide[transition-index="-1"] {
    transform: translateX(calc(var(--transition) * 100%)) translateY(calc(var(--transition) * -100%));
    z-index: 10;
}

/* ppEffectCover */

[entry-transition-type="ppEffectCoverUp"] pptx-slide[transition-index="0"] {
    transform: translateY(calc(var(--transitionInverse) * 100%));
}
[entry-transition-type="ppEffectCoverDown"] pptx-slide[transition-index="0"] {
    transform: translateY(calc(var(--transitionInverse) * -100%));
}
[entry-transition-type="ppEffectCoverRight"] pptx-slide[transition-index="0"] {
    transform: translateX(calc(var(--transitionInverse) * -100%));
}
[entry-transition-type="ppEffectCoverLeft"] pptx-slide[transition-index="0"] {
    transform: translateX(calc(var(--transitionInverse) * 100%));
}

[entry-transition-type="ppEffectCoverLeftDown"] pptx-slide[transition-index="0"] {
    transform: translateX(calc(var(--transitionInverse) * 100%)) translateY(calc(var(--transitionInverse) * -100%));
}
[entry-transition-type="ppEffectCoverRightDown"] pptx-slide[transition-index="0"] {
    transform: translateX(calc(var(--transitionInverse) * -100%)) translateY(calc(var(--transitionInverse) * -100%));
}
[entry-transition-type="ppEffectCoverLeftUp"] pptx-slide[transition-index="0"] {
    transform: translateX(calc(var(--transitionInverse) * 100%)) translateY(calc(var(--transitionInverse) * 100%));
}
[entry-transition-type="ppEffectCoverRightUp"] pptx-slide[transition-index="0"] {
    transform: translateX(calc(var(--transitionInverse) * -100%)) translateY(calc(var(--transitionInverse) * 100%));
}

/* ppEffectWipe */

[entry-transition-type="ppEffectWipeLeft"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to left, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}
[entry-transition-type="ppEffectWipeRight"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}
[entry-transition-type="ppEffectWipeUp"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to top, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}
[entry-transition-type="ppEffectWipeDown"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}
[entry-transition-type="ppEffectStripsLeftDown"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to bottom left, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}
[entry-transition-type="ppEffectStripsRightDown"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to bottom right, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}
[entry-transition-type="ppEffectStripsLeftUp"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to top left, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}
[entry-transition-type="ppEffectStripsRightUp"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to top right, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}

/* ppEffectSplit */

[entry-transition-type="ppEffectSplitVerticalIn"],
[entry-transition-type="ppEffectSplitVerticalOut"],
[entry-transition-type="ppEffectSplitHorizontalOut"],
[entry-transition-type="ppEffectSplitHorizontalIn"] pptx-slide[transition-index="0"] {
    --left: calc( var(--transition) * 50% );
    --right: calc( 100% - var(--transition) * 50% );
}

[entry-transition-type="ppEffectSplitVerticalIn"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) var(--left), rgba( 0, 0, 0, 0 ) var(--left), rgba( 0, 0, 0, 0 ) var(--right), rgba( 0, 0, 0, 1 ) var(--right) );
}
[entry-transition-type="ppEffectSplitVerticalOut"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to right, rgba( 0, 0, 0, 0 ) calc(50% - var(--left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--right))) );
}
[entry-transition-type="ppEffectSplitHorizontalOut"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) calc(50% - var(--left)), rgba( 0, 0, 0, 1 ) calc(50% - var(--left)), rgba( 0, 0, 0, 1 ) calc(100% + (50% - var(--right))), rgba( 0, 0, 0, 0 ) calc(100% + (50% - var(--right))) );
}
[entry-transition-type="ppEffectSplitHorizontalIn"] pptx-slide[transition-index="0"] {
    mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ) var(--left), rgba( 0, 0, 0, 0 ) var(--left), rgba( 0, 0, 0, 0 ) var(--right), rgba( 0, 0, 0, 1 ) var(--right) );
}

/* ppEffectSplit */

[entry-transition-type="ppEffectRevealSmoothLeft"],
[entry-transition-type="ppEffectRevealBlackLeft"] pptx-slide[transition-index="0"] {
    --scale: calc( 1 + var(--transitionInverse) );
    opacity: var(--transition);
    transform: scale(var(--scale));
    transform-origin: 0% center;
}

/* ppEffectRevealSmoothRight */

[entry-transition-type="ppEffectRevealSmoothRight"],
[entry-transition-type="ppEffectRevealBlackRight"] pptx-slide[transition-index="0"] {
    --scale: calc( 1 + var(--transitionInverse) );
    opacity: var(--transition);
    transform: scale(var(--scale));
    transform-origin: 100% center;
}

/* ppEffectCircleOut */

[entry-transition-type="ppEffectCircleOut"],
[entry-transition-type="ppEffectDiamondOut"],
[entry-transition-type="ppEffectPlusOut"],
[entry-transition-type="ppEffectBoxIn"],
[entry-transition-type="ppEffectBoxOut"] pptx-slide[transition-index="0"] {
    mask-image: radial-gradient( at center, rgba( 0, 0, 0, 1 ) calc( var(--transition) * 100% ), rgba( 0, 0, 0, 0 ) calc( var(--transition) * 100% ) );
}

/* pptx/TextFrame/pptx.TextFrame.css */

text-frame {
    display: flex;
    justify-content: stretch;
    width: 100%;
    height: 100%;
}

/* Articles/ArticlesPage.css */

.home-articles-page {
    background-color: #746862;
    color: white;
}

.home-articles-page .home-articles-page-content {
    margin: auto;
    max-width: 1920px;
}

.articles-page {
    background-color: white;
    color: black;
    padding: 2.5% 0% 2.5% 5%;
}

.articles-page .articles-page-content {
    margin: auto;
    max-width: 1920px;
}

.article-page-button {
    position: relative;
}

.article-page-button.active::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    border: var(--half-padding) solid transparent;
    border-bottom: var(--half-padding) solid white;
}

.articles-page-main-content {
    background-color: rgb(116, 104, 98);
    color: white;
}

.articles-page-main-content * {
    color: white !important;
}

/* Articles/ArticlesPageMobile.css */

@media screen and (max-width: 1024px) {
    .home-articles-page {
        background-color: #746862;
        color: white;
    }

    .home-articles-page .home-articles-page-content {
        margin: auto;
        max-width: 1920px;
    }

    .articles-page {
        background-color: white;
        color: black;
        padding: 2.5% 0% 2.5% 5%;
    }

    .articles-page .articles-page-content {
        margin: auto;
        max-width: 1920px;
    }

    .article-page-button {
        position: relative;
    }

    .article-page-button.active::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: 0px;
        transform: translateX(-50%);
        border: var(--half-padding) solid transparent;
        border-bottom: var(--half-padding) solid white;
    }
}

/* Articles/ArticlesPanel.css */

.articles-panel-navigation .in,
.articles-panel-navigation .st,
.articles-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* Articles/Article/Article.css */

.article-minimized {
    --imageHeight: calc(var(--title-font-size) * 12);
    --imageWidth: calc(var(--imageHeight) / 9 * 16);

    display: block;

    margin: auto;
    max-width: 900px;

    transition: 0.4s transform;
}

.article-minimized>.article-content {
    background-color: rgb(255, 255, 255);
    color: rgb(63, 63, 63);
    box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.5);
    position: relative;
    padding-right: calc(var(--imageWidth) * 0.7 + var(--base-padding)) !important;
}

.article-minimized .article-content .article-name {
    display: block;
}

.article-minimized .article-content .article-content {
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    height: calc(var(--font-line-height) * 4);
    text-overflow: ellipsis;
    overflow: hidden;
}

.article-minimized .article-content .clear-text * {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: initial !important;
    padding: initial !important;
}

.article-text {
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    height: calc(var(--font-line-height) * 4);
    text-overflow: ellipsis;
    overflow: hidden;
}

.article-text * {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: initial !important;
    padding: initial !important;
}

.article-minimized .article-content .article-image {
    background-color: rgb(255, 255, 255);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.5);
    position: absolute;
    right: 0px;
    top: 50%;
    height: var(--imageHeight);
    width: var(--imageWidth);
    transform: translateX(30%) translateY(-50%);
}

.article-maximized {
    display: block;

    margin: auto;
    max-width: 900px;

    transition: 0.4s transform;
}

.article-maximized>.article-content {
    background-color: rgb(255, 255, 255);
    color: rgb(63, 63, 63);
    box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.5);
    position: relative;
    padding-right: calc(360px - 45px + var(--base-padding)) !important;
    min-height: 284px;
}

.article-maximized .article-content .article-name {
    display: block;
    font-size: var(--header-font-size);
    line-height: var(--header-line-height);
}

.article-maximized .article-content .article-content {
    white-space: pre-line;
    min-height: calc(var(--font-line-height) * 5);
}

.article-maximized .article-content .article-image {
    background-color: rgb(255, 255, 255);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.5);
    position: absolute;
    right: -45px;
    top: 45px;
    padding-top: calc(360px / 16 * 9);
    width: 360px;
}

.article-minimized-preview {
    min-width: calc(100% / 1.5);
    max-width: calc(100% / 1.5);
}

.article-minimized-preview.active .article-content {
    outline: 1px solid #746862;
}

.article-minimized-preview .article-image {
    padding-top: calc(100% / 16 * 9);
}

.article-maximized-preview .article-content .article-content {
    white-space: pre-line;
    min-height: calc(var(--font-line-height) * 5);
}

.article-maximized-preview * {
    background-color: transparent !important;
    color: white !important;
}

/* Articles/Article/Article.mobile.css */

/* Popup */
.bottom-bar.popup-article {
    --border-color: #746862;
}

.article-preview-controller .bottom-bar-content {}

/* Articles/Article/Article.panel.css */

.article-panel-maximized[status=""] .article-button-form-controller { display: block !important; }
.article-panel-maximized[status="trash"] .article-button-trash-controller { display: block !important; }
.article-panel-maximized[status="sketch"] .article-button-sketch-controller { display: block !important; }
.article-panel-maximized[status="published"] .article-button-published-controller { display: block !important; }

.article-panel-maximized[status=""] .article-date-publish-button-save-controller { display: none !important; }

/* Categories/CategoriesPanel.css */

.categories-panel-navigation .in,
.categories-panel-navigation .st,
.categories-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* Categories/Category/Category.panel.css */

.category-panel-maximized:not([category="0"]) .form-placeholder {
    display: none;
}
.category-panel-maximized[category="0"] .form-item {
    display: none;
}

.category-panel-maximized[status=""] .category-button-form-controller { display: block !important; }
.category-panel-maximized[status="trash"] .category-button-trash-controller { display: block !important; }
.category-panel-maximized[status="active"] .category-button-active-controller { display: block !important; }

/* Categories/Category/css/style.css */

.category-actions {
    text-align: center;
}

/* Competences/CompetencesLayout.css */

.competence-layout-controller {
    overflow: hidden;
}

.competence-layout-content {
    transform: translate(-50%, -50%) scale(var(--scale));
    transition: 0.4s transform;
}

.octagon-box {
    color: var(--border-color);
    cursor: pointer;
    transform: scale( 1 );
    transition: 0.8s transform, 0.4s filter, 0.4s color;
    z-index: 1;
}
.octagon-box.disabled {
    z-index: 0;
}

.octagon-box:hover {
    filter: drop-shadow( 0px 0px 10px rgba( 0, 0, 0, 0.5));
}

.octagon-box.active {
    color: rgb(255, 255, 255) !important;
    filter: drop-shadow( 0px 0px 10px rgba( 0, 0, 0, 0.5));
    transform: scale( 1.2 );
    z-index: 2;
}

.octagon-box .octagon-background {
    background-color: rgb(255, 255, 255);
    transition: 0.4s background-color;
}

.octagon-box.active .octagon-background {
    background-color: var(--border-color);
}

/* Competences/CompetencesPage.mobile.css */

.competences.column-content.scroll-y {
  height: 0% !important;
}

#site-content-mobile .competence-main-content {
  flex-direction: column;
}

#site-content-mobile .competence-main-content .competence-category-layout-controller {
  flex-grow: 0 !important;
  width: 100% !important;
  height: 76vw !important;
}

#site-content-mobile .competence-main-content .competence-maximized-controller {
  flex-grow: 1 !important;
  width: 100% !important;
  height: 0% !important;
}

#site-content-mobile .competence-maximized .competence-main {
  min-height: inherit !important;
  height: 100% !important;
  max-height: 180px !important;
}

#site-content-mobile .competence-mobile {
  padding-top: 60px !important;
}

#site-content-mobile .competence-mobile .competence-view-wrapper {
  flex-shrink: 0;
}

#site-content-mobile .competence-mobile .competence-view-wrapper .border-radius-media {
  border-radius: 0px 100px 100px 0px;
  overflow: hidden;
}

#site-content-mobile .competence-mobile .competence-view-wrapper~.competence-view-wrapper {
  margin-top: 16px;
}

#site-content-mobile .competence-mobile .competence--title {
  padding: 8px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

#site-content-mobile .competence-mobile .competences {
  margin-bottom: 16px;
}

#site-content-mobile .competence-mobile .competence-wrapper {
  flex-shrink: 0;
}

#site-content-mobile .competence-mobile .competence-wrapper:not(.active) {
  display: none !important;
}

#site-content-mobile .competence-mobile .competences--choose {
  padding: 8px;
  color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  min-width: 180px;
}

#site-content-mobile .competence-mobile .wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 0px;
  overflow: hidden;
  z-index: 1;
  border-radius: 8px;
  background: white;
  transition: 0.3s, box-shadow 0s;
}

#site-content-mobile .competence-mobile .wrapper.active {
  transition: 0.3s, box-shadow 0.3s;
}

#site-content-mobile .competence-mobile .wrapper.active {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.25);
}

#site-content-mobile .competence-mobile .wrapper .list {
  padding: 8px;
}

#site-content-mobile .competence-mobile .wrapper .list li.active {
  background: #326EA7;
  color: white;
  pointer-events: none;
}

#site-content-mobile .competence-mobile .wrapper .list li {
  padding: 8px;
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  list-style: none;
}

#site-content-mobile .competence-mobile .wrapper .list li~li {
  margin-top: 12px;
}

@media screen and (min-height: 860px) {
  #site-content-mobile .competence-mobile .competence-view-wrapper {
    min-height: calc(100% / 9 - (16px));
  }

  #site-content-mobile .competence-mobile .competence--title {
    padding: 16px 8px;
  }

}

/* Competences/CompetencesPanel.css */

.competences-panel-navigation .in,
.competences-panel-navigation .st,
.competences-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* Competences/Competence/Competence.css */



/* Competences/Competence/Competence.panel.css */

.competence-panel-maximized:not([competence="0"]) .form-placeholder {
    display: none;
}
.competence-panel-maximized[competence="0"] .form-item {
    display: none;
}

.competence-panel-maximized[status=""] .competence-button-form-controller { display: block !important; }
.competence-panel-maximized[status="trash"] .competence-button-trash-controller { display: block !important; }
.competence-panel-maximized[status="sketch"] .competence-button-sketch-controller { display: block !important; }
.competence-panel-maximized[status="published"] .competence-button-published-controller { display: block !important; }

/* Competences/Competence/Mobile/Competence.mobile.css */

.bottom-bar.popup-competence {
    
}

/* Competences/Competence/css/style.css */

/* .page-competences-main-content{ background: rgba(0,0,0,0.03);} */

.page-competences-main-content {
    background: rgba(255, 255, 255, 1);
}

.right-side-competences {
    width: 100%;
    height: 100%;
}

.left-side-competences {
    width: 80%;
    height: 100%;
}

.name-connected-e-learning-courses {
    padding: 5px !important;
}

/* .title-competences{ text-transform: uppercase;} */

.description-cempetence {
    text-align: justify;
    font-size: 16px;
}

.description-cempetence-start {
    text-align: left;
    justify-content: flex-end;
    align-items: flex-end;
    font-size: 18px;
}

.button:hover {
    opacity: 1 !important;
}

.competence-button-toggle {
    transition: 1.0s transform;
}

.competence-button-toggle.active {
    transform: scale(1.2);
    z-index: 1;
    filter: drop-shadow( 0px 0px 10px rgba( 0, 0, 0, 0.5));
}

/* .competence-button-hover:hover {
    transform: scale(1.05);
    z-index: 1;  
    
    /* filter: drop-shadow( 0px 0px 10px rgba( 0, 0, 0, 0.5 ) ); 
    box-shadow: 0px 0px 15px rgba( 0, 0, 0, 0.5 );
} */

.competence-button-hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    align-items: flex-end;
}

.competence-button-hover-total a {
    width: 100%;
    height: 100%;
}

.competence-button-hover-total:hover {
    transform: scale(1.05) !important;
    z-index: 1 !important;
}

.competence-button-hover, .competence-button-hover-total {
    transition: 0.4s transform;
}

.competence-button-toggle .competence-button-text {
    transition: 1.0s transform;
}

/* .competence-button-toggle.active .competence-button-text { transform: scale(calc(1 / 1.2));} */

.competences-button {
    overflow: hidden;
}

.competences-button .label-icon {
    transition: 0.4s transform;
}

.competences-button.active .label-icon {
    font-weight: bold;
    transform: scale(1.2);
}

.border-separator {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    height: 50px;
}

.button-label, .button {
    cursor: pointer !important;
}

.octagon {
    --border-style: solid;
    --border-width: 2px;
    --background: white;
    position: relative;
    width: 95%;
    height: 95%;
}

.octagon-start {
    --border-style: solid;
    --border-width: 4px;
    --background: white;
    position: relative;
    top: 0px !important;
    transform: translate(-50%, calc(-29.1% - var(--border-width)));
    width: 25%;
    padding-top: 25%;
}

.competence-button-toggle.active .octagon {
    --border-width: 3px;

}

.competence-category-main {
    /* padding-top: calc(0.25 * 70.09% + 4px) !important; */
    padding-top: calc(0.25 * 84.09% + 4px) !important;
}

.width-90 {
    width: 90%;
}

.octagon-shadow {
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.25));
}

/* .competence-button-hover .octagon-start:hover{
    --border-width: 3px;
} */

.octagon-background::before, .octagon-background::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 41.60%;
    height: calc( 100%);
    z-index: 0;
}

.octagon-background::after {
    transform: translate(-50%, -50%) rotateZ( 45deg);
}

.octagon-background>.octagon-background::before {
    transform: translate(-50%, -50%) rotateZ( 90deg);
}

.octagon-background>.octagon-background::after {
    transform: translate(-50%, -50%) rotateZ( 135deg);
}

.octagon-border::before, .octagon-border::after {
    content: '';
    display: block;
    border-top: var(--border-width) var(--border-style) var(--border-color);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 41.60%;
    height: calc( 100% - var(--border-width) * 2);
    z-index: 1;
}

.octagon-border::after {
    transform: translate(-50%, -50%) rotateZ( 45deg);
}

.octagon-border>.octagon-border::before {
    transform: translate(-50%, -50%) rotateZ( 90deg);
}

.octagon-border>.octagon-border::after {
    transform: translate(-50%, -50%) rotateZ( 135deg);
}

.octagon-start.octagon-border-top>.octagon-border {
    display: none !important;
}

.icon-size-competence {
    font-size: 40px;
}

.title-icon {
    top: 50px;
    width: 100%;
    font-size: 14px;
    line-height: initial;
}

.icon-show-box {
    top: 0px;
    width: 100%;
    height: 70%;
}

.icon-connected-competences {
    padding: 0 48px !important;
}

.octan>.middle.text-center.position-in-octave {
    top: 45% !important;
}

.page-competences-main-title {
    text-align: justify;
    font-size: 18px;
    /* font-style: italic; */
}

/* .competence-category{
    width: 20%;
    height: 116%;
} */

/* .competence-category{
    height: 50%;
} */

.octagon-start i {
    font-size: 35px !important;
}

/* .legend-competences{
    width: 25%;
} */

/* .legend-of-icon{
    border-right: 1px solid rgba(0,0,0,0.1);
} */

.competence-legend {
    width: 40%;
}

/* 
@media screen and (max-width: 1920px) {

    .description-cempetence {
        font-size: 20px;
    }

    .title-icon {
        font-size: 20px;
    }

    .competence-box > .bottom-right{
        font-size: 31px;
    }

    .page-competences-main-title {
        font-size: 21px;
    }

    .competence-category-main .text-center{
        font-size: 30px;
    }
    .competence-category-main .text-center{
        font-size: 30px;
    }

    .description-cempetence-start {
        font-size: 26px;
    }
} */

/* Courses/Courses.page.mobile.css */

body[device="Tablet"] {}

/* Portrait */

body[device="Tablet"][orientation="portrait"] {}

/* Landscape */

body[device="Tablet"][orientation="landscape"] .courses-statistics-mobile-popup {
    padding: 0px !important;
    justify-content: flex-end !important;
}


body[device="Tablet"][orientation="landscape"] .courses-statistics-mobile-popup .courses-statistics-mobile-popup-content {
    border-radius: 0px !important;
    height: 100% !important;
}

body[device="Tablet"][orientation="landscape"] .courses-statistics-mobile-popup .courses-statistics-mobile-popup-content .courses-page-statistics-controller {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body[device="Tablet"][orientation="landscape"] .courses-statistics-mobile-popup .courses-statistics-mobile-popup-content .courses-page-statistics-controller .courses-page-statistics-controller-content {
    flex-grow: 1;
    height: 0%;
}

body[device="Tablet"][orientation="landscape"] .courses-statistics-mobile-popup .courses-statistics-mobile-popup-content .courses-page-statistics-controller .courses-page-statistics-controller-content>[view] {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}

body[device="Tablet"][orientation="landscape"] .courses-statistics-mobile-popup:not(.active) .courses-statistics-mobile-popup-content {
    --x: 100%;
    --s: 1;
}

/* Courses/CoursesPage.css */

.home-courses-page {
    background-color: #dadada6c;
    background-image: url('https://resources.growbp.pl/grow.edu/HomeCourseBackgroundColor.png' );
    background-repeat: no-repeat;
    background-size: 30%;
}

.home-courses-page .home-courses-page-content {
    margin: auto;
    max-width: 1920px;
}

.home-courses-page .home-courses-page-content .course-minimized {
    position: relative !important;
    left: 0px !important;
    top: 0px !important;
}

.home-page-course-maximized-preview-controller {
    background-color: #f7eeec;
    color: black;
}

.home-page-course-maximized-preview-controller .base-padding.header.highlight {
    color: white;
}

/* Courses/CoursesPage.mobile.css */

.courses-page-mobile-controller .scroll-view {
  --color: var(--color-course);
}

.home-courses-mobile.mobile-section .image-slider .image-slider-main .image-slider-main-content {
  border: 0px !important;
  padding-top: calc(100% / 16 * 9);
}

.home-courses-mobile.mobile-section .image-slider .image-slider-main .image-slider-main-content .image-slider-element {
  border-radius: var(--base-padding);
  overflow: hidden;
}

.course-page-mobile {
}

.courses-page-mobile-controller {
  background-color: #f4f4f4 !important;
}

.courses-page-mobile-controller {
  background-color: #f4f4f4 !important;
}

.courses-page-mobile-controller .scroll-view-bar--bg {
  background-color: #f4f4f4 !important;
}

.courses-page-mobile-controller .course-minimized-home-preview .course-footer {
  background-color: transparent !important;
}

.courses-page-mobile-controller .scroll-view[bar="hidden"]+.courses-page-mobile-button-statistics {
  height: 0px;
}

.courses-statistics-mobile-popup {
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur( 8px );
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0px;
  top: 0px;
  padding: 32px;
  width: 100%;
  height: 100%;
  z-index: 100;
  transition: 0.25s opacity;
}

.courses-statistics-mobile-popup:not(.active) {
  opacity: 0;
}

.courses-statistics-mobile-popup .courses-statistics-mobile-popup-content {
  --x: 0%;
  --s: 1;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
  border: 4px solid white;
  background-color: white;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  transform: translateX(var(--x)) scale(var(--s));
  transition: 0.25s transform;
}

.courses-statistics-mobile-popup:not(.active) .courses-statistics-mobile-popup-content {
  --s: 0;
}

.courses-page-statistics-controller [view] {
  transition: 0.4s opacity;
}

.courses-page-statistics-controller:not([view="courses"]) [view="courses"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.courses-page-statistics-controller:not([view="quizzes"]) [view="quizzes"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.courses-page-statistics-controller[view="courses"] .courses-page-statistics-button-toggle::after {
  content: 'zobacz statystyki testów';
}

.courses-page-statistics-controller[view="quizzes"] .courses-page-statistics-button-toggle::after {
  content: 'zobacz statystyki kursów';
}

.courses-page-statistics-controller .courses-page-statistics-controller-content {
  /* font-family: 'Segoe Print'; */
  color: #7f7f7f;
}

.home-courses-mobile .courses-preview-wrapper {
  --columns: 2;
}

body[device="Smartphone"] .home-courses-mobile .courses-preview-wrapper {
  --columns: 1;
}

.home-courses-mobile .courses-preview-wrapper .course-minimized-home-preview {
  width: calc(calc(100% - 16px) / var(--columns));
  min-width: calc(calc(100% - 16px) / var(--columns));
}

body[device="Smartphone"] .home-courses-mobile .courses-preview-wrapper .course-minimized-home-preview {
  width: calc(100% / var(--columns));
  min-width: calc(100% / var(--columns));
}

.home-courses-mobile .courses-preview-wrapper .course-minimized-home-preview:not(:last-child) {
  margin-right: 16px !important;
}

.home-courses-mobile .courses-preview-wrapper .course-minimized-home-preview .course-name {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: calc(var(--font-line-height) * 2);
}

.home-courses-mobile .courses-preview-wrapper .course-minimized-home-preview .course-info {
  padding: 0px !important;
}

body[device="Tablet"][orientation="portrait"] .courses-page-statistics-controller .courses-page-statistics-item {
  width: 360px !important;
  height: 180px !important;
}

body[device="Tablet"][orientation="landscape"] .courses-page-statistics-controller {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

body[device="Tablet"][orientation="landscape"] .courses-page-statistics-controller .courses-page-statistics-controller-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 0%;
}

body[device="Tablet"][orientation="landscape"] .courses-page-statistics-controller .courses-page-statistics-controller-content>.base-padding {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

body[device="Tablet"][orientation="landscape"] .courses-page-statistics-controller .courses-page-statistics-controller-content>.base-padding>.base-padding {
  flex-grow: 1;
  height: 0% !important;
}

body[device="Tablet"][orientation="landscape"] .courses-page-statistics-controller .courses-page-statistics-controller-content>.base-padding>.base-padding .courses-page-statistics-item {
  height: 100% !important;
}

/* Courses/CoursesPanel.css */

.courses-panel-navigation .in,
.courses-panel-navigation .st,
.courses-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

@media screen and (max-width: 1366px) {
    .courses-panel[right-sidebar="true"] .course-search-filter-controller {
        min-width: 225px !important;
        max-width: 225px !important;
    }
}

.courses-panel[right-sidebar="true"] .course-list .panel-course-card .course-additional-content {
    display: none;
}

/* Courses/Course/Course.css */

.course[user-status] {
    --user-status-color: rgba(0, 0, 0, 0.1);
}

.course[user-status="waiting"] {
    --user-status-color: var(--waiting-status);
}

.course[user-status="during"] {
    --user-status-color: var(--during-status);
}

.course[user-status="done"] {
    --user-status-color: var(--done-status);
}

.course:not([access="true"]) .course-button-open {
    display: none !important;
}

.course .course-overlay {
    color: rgb(148, 77, 191);
}

.course .course-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: 0.4s opacity;
}

.course:hover .course-overlay {
    opacity: 1;
}

.course .course-overlay-content {
    text-align: center;
    font-size: 40px;
    padding: 10px;
    position: absolute;
    left: 15%;
    top: 25%;
    transform: translate(-50%, -50%);
    transition: 0.4s transform;
}

.course .course-overlay-content:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.course-minimized {
    display: block;
    position: relative;
    width: calc(100% / var(--columns));
}

.course-minimized .course-content {
    overflow: hidden;
    position: relative;
}

.course-minimized-preview {
    position: relative;
}

.course-minimized-preview .course-content {
    overflow: hidden;
    position: relative;
}

.course-minimized .course-content .course-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /* border: 1px solid rgba(245,245,245,0.8); */
}

.course-minimized .course-content .course-category {
    text-align: justify;
    font-size: var(--note-size);
    padding: var(--button-padding);
}

.course-minimized .course-content .course-description {
    text-align: justify;
    padding: var(--button-padding);
}

.course-minimized .course-content .course-lesson-count {
    text-align: center;
    font-size: var(--note-size);
    padding: var(--button-padding);
}

.course-minimized .course-content .course-threshold {
    text-align: center;
    font-size: var(--note-size);
    padding: var(--button-padding);
}

.course-minimized .course-content .course-progress {
    text-align: center;
    font-size: var(--note-size);
    padding: var(--button-padding);
}

.course-minimized .course-content .course-buttons {
    text-align: right;
    padding: var(--button-padding);
}

.course-minimized .course-content .course-name {
    text-align: justify;
    align-items: flex-start;
    padding: var(--content-padding);
}

/*
    Maximized
*/

.course-maximized {
    background-color: rgb(255, 255, 255);
}

.course-maximized-preview {
    --background-color: #79838c;
    --scrollbar-color: #a5acb6;
    background-color: var(--background-color);
    background-image: radial-gradient(at top left, #a5acb6, #79838c);
    color: white;
}

.course-maximized-preview .bt {
    border-color: #79838c;
}

.course-maximized-preview .bt-group .bt.active {
    background-color: #79838c;
    color: white !important;
}

.course-maximized-preview .course-section {
    padding: 30px;
    min-height: 100%;
}

.course-user-status {
    position: absolute;
    top: 0px;
    right: 0px;
    padding-top: 50%;
    width: 50%;
    overflow: hidden;
}

.course-user-status .course-user-status-content {
    background-color: var(--user-status-color);
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    transform: rotateZ(45deg) translateX(-35%) translateY(200%);
    width: 200%;
}

.course-user-status .course-user-status-content .course-user-status-name {
    position: relative;
    text-align: center;
    padding: var(--half-padding);
}

.modal-box .course-maximized-preview {
    border: 4px solid #79838c;
    border-radius: var(--base-padding);
    background: white;
    color: black;
}

.course-summary .average-quiz-time .minutes-header {
    font-size: 25px;
}

.course-summary .average-course-time .minutes-header {
    font-size: 25px;
}


/*
    Course maximized viewes
*/

.course-maximized[view="quiz"] .course-navigation,
.course-maximized[view="quiz"] .course-main,
.course-maximized[view="quiz"] .course-footer,
.course-maximized[view="quiz"] .course-button-autoplay {
    display: none !important;
}

.course-maximized[view="quiz"] .course-header {
    position: absolute;
    width: 100%;
}

.course-maximized[view="summary"] .course-button-autoplay {
    display: none !important;
}

.course-navigation.course-navigation-crop .course-lesson-name,
.course-navigation.course-navigation-crop .course-item .course-item-minimized-preview .course-item-minimized-preview-name {
    display: none !important;
}

.course-maximized[timer] .course-item-button-next {
    transition: 1s opacity;
}

.course-maximized[timer]:not([timer="0"]) .course-item-button-next {
    opacity: 0.25;
    pointer-events: none !important;
}

.course-minimized .progress-bar {
    --progress: 0;
    background-color: rgb(0, 0, 0, 0.0625);
    border-radius: var(--base-padding);
    height: var(--half-padding);
    width: 100%;
}

.course-minimized .progress-bar::before {
    display: block;
    content: '';
    border-radius: var(--base-padding);
    background-color: rgb(110, 167, 50);
    height: var(--half-padding);
    width: calc(var(--progress) * 100%);
}

.course-minimized .progress-bar .progress-value {
    position: absolute;
    left: calc(var(--progress) * 100%);
    bottom: 100%;
    transform: translate(-50%, -25%);
}

.course-minimized .progress-bar[limit]:not([limit=""])::after {
    display: block;
    content: '';
    border-right: 2px solid goldenrod;
    position: absolute;
    left: calc(var(--limit) * 100%);
    top: 50%;
    transform: translate(-50%, -50%);
    height: var(--base-padding);
}

.course-minimized[user-grade="passed"] .progress-bar::before {
    background-color: rgb(110, 167, 50);
}

.course-minimized[user-grade="failed"] .progress-bar::before {
    background-color: crimson;
}

/* Courses/Course/Mobile/Course.mobile.css */

/* Popup */
.bottom-bar.popup-course {
    --border-color: #a1a8b0;
}

.course-maximized-mobile .course-item-button-prev {
    border: 1px solid #ccc;
    color: black;
    transition: 0.4s color, 0.4s opacity;
}

.course-maximized-mobile .course-button-sidebar {
    border: 1px solid #ccc;
    color: black;
    transition: 0.4s color, 0.4s opacity;
}

.course-maximized-mobile .course-item-button-next {
    border: 1px solid #ccc;
    color: black;
    transition: 0.4s color, 0.4s opacity;
}

body[orientation="portrait"] .course-maximized-mobile .course-item-button-prev {
    border-radius: 4px 0px 0px 4px;
    font-size: 16px !important;
    line-height: 53px !important;
    height: 55px !important;
    padding: 0px !important;
    margin: calc( var(--base-padding) * 2 );
    margin-right: 0px;
}

body[orientation="portrait"] .course-maximized-mobile .course-button-sidebar:not(.in-quiz) {
    font-size: 16px !important;
    line-height: 53px !important;
    height: 55px !important;
    padding: 0px !important;
    margin: calc( var(--base-padding) * 2 ) 0px;
}

body[orientation="portrait"] .course-maximized-mobile .course-item-button-next {
    font-size: 16px !important;
    line-height: 53px !important;
    height: 55px !important;
    padding: 0px !important;
    border-radius: 0px 4px 4px 0px;
    margin: calc( var(--base-padding) * 2 );
    margin-left: 0px;
}

body[device="Tablet"][orientation="portrait"] .course-maximized-mobile .course-item-button-prev {
    margin: calc(var(--base-padding) * 2) auto;
    margin-right: 0px !important;
    width: 100%;
    max-width: 150px;
}

body[device="Tablet"][orientation="portrait"] .course-maximized-mobile .course-button-sidebar:not(.in-quiz) {
    margin: calc(var(--base-padding) * 2) 0px !important;
    width: 100%;
    max-width: 150px;
}

body[device="Tablet"][orientation="portrait"] .course-maximized-mobile .course-item-button-next {
    margin: calc(var(--base-padding) * 2) auto;
    margin-left: 0px !important;
    width: 100%;
    max-width: 150px;
}

body[orientation="portrait"] .course-maximized-mobile .course-item-button-prev.disabled {
    opacity: 1 !important;
}

body[orientation="portrait"] .course-maximized-mobile .course-item-button-prev.disabled > .icon {
    opacity: 0.1 !important;
}

body[orientation="portrait"] .course-maximized-mobile .course-button-sidebar.disabled {
    opacity: 1 !important;
}

body[orientation="portrait"] .course-maximized-mobile .course-button-sidebar.disabled > .icon {
    opacity: 0.1 !important;
}

body[orientation="portrait"] .course-maximized-mobile .course-item-button-next.disabled {
    opacity: 1 !important;
}

body[orientation="portrait"] .course-maximized-mobile .course-item-button-next.disabled > .icon {
    opacity: 0.1 !important;
}

body[orientation="landscape"] .course-maximized-mobile .course-item-button-prev.disabled {
    opacity: 0.1;
}

body[orientation="landscape"] .course-maximized-mobile .course-button-sidebar.disabled {
    opacity: 0.1;
}

body[orientation="landscape"] .course-maximized-mobile .course-item-button-next.disabled {
    opacity: 0.1;
}

body[orientation="landscape"] .course-maximized-mobile .course-item-button-prev:not(.in-quiz) {
    background-color: #ffffff !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border: none !important;
    border-radius: 0px var(--base-padding) var(--base-padding) 0px;
    margin: 0px !important;
    padding: calc(var(--base-padding) * 2) var(--base-padding) !important;
    width: calc( var(--font-line-height) + var(--base-padding) * 2 );
}

body[orientation="landscape"] .course-maximized-mobile .course-button-sidebar:not(.in-quiz) {
    align-self: flex-start !important;
    justify-self: flex-start !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    left: calc(var(--base-padding) * 2) !important;
    top: calc(var(--base-padding) * 2) !important;
    background-color: #ffffff !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border: none !important;
    border-radius: 100px !important;
    margin: 0px !important;
    padding: calc(var(--base-padding) * 2) !important;
    width: calc( var(--font-line-height) + var(--base-padding) * 4 ) !important;
    height: calc( var(--font-line-height) + var(--base-padding) * 4 ) !important;
}

body[orientation="landscape"] .course-maximized-mobile .course-item-button-next:not(.in-quiz) {
    background-color: #ffffff !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border: none !important;
    border-radius: var(--base-padding) 0px 0px var(--base-padding);
    margin: 0px !important;
    padding: calc(var(--base-padding) * 2) var(--base-padding) !important;
    width: calc( var(--font-line-height) + var(--base-padding) * 2 );
}

.mobile-course-carousel {
    overflow: hidden;
}

.mobile-course-carousel-wrapper {
    height: 100%;
    transition: 0.3s;
}

.mobile-course-carousel-item {
    float: left;
}

.course-minimized-home-preview .progress-bar {
    --progress: 0;
    background-color: rgb(0, 0, 0, 0.0625);
    border-radius: var(--base-padding);
    height: 13px;
    width: 100%;
}

.course-minimized-home-preview .progress-bar::before {
    display: block;
    content: '';
    background-color: rgb(110, 167, 50);
    height: 13px;
    width: calc(var(--progress) * 100%);
}

.course-minimized-home-preview .progress-bar .progress-value {
    position: absolute;
    left: calc(var(--progress) * 100%);
    bottom: 100%;
    transform: translate(-50%, -25%);
}

.course-minimized-home-preview .progress-bar[limit]:not([limit=""])::after {
    display: block;
    content: '';
    border-right: 3px solid goldenrod;
    position: absolute;
    left: calc(var(--limit) * 100%);
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}

.course-minimized-home-preview[user-grade="passed"] .progress-bar::before {
    background-color: rgb(110, 167, 50);
}

.course-minimized-home-preview[user-grade="failed"] .progress-bar::before {
    background-color: crimson;
}

/* do kursów */

.mobile-popup.course {
    background: linear-gradient(209.03deg, #A5ACB6 17.85%, #89929F 56.11%);
}

.mobile-popup.course .general .row:not(:first-child) {
    margin-left: 8px;
}

.mobile-popup.course .general span {
    margin-left: 3px;
}

.mobile-popup.course li {
    margin-bottom: 12px;
}

.mobile-popup.course ul {
    overflow-y: auto;
}

.mobile-popup.course .title--competences {
    margin-bottom: 3px;
    color: white;
}

.mobile-popup.course .competences p {
    color: hsla(0, 0%, 100%, .5);
}

.mobile-popup.course .information span {
    margin-left: 3px;
}

.mobile-popup.course .tabbed-view-button {
    max-width: calc(100%/3);
    background: #575F6B;
    color: hsla(0, 0%, 100%, .75);
}

.mobile-popup.course .tabbed-view-button.active {
    background: #575F6B00;
    color: hsla(0, 0%, 100%, 1);
}

.subtitle-margin {
    margin-top: 3px;
}

.margin-top {
    margin-top: 16px;
}

.margin-big-top {
    margin-top: 32px;
}

.margin-big-1-0 {
    margin: 32px 0;
}

.oxs {
    overflow-x: scroll;
}

.oys {
    overflow-y: scroll;
}

.oys-h {
    overflow-y: scroll;
}

.oys-h::-webkit-scrollbar {
    display: none;
}

.oys.overlay {
    overflow-y: overlay;
}

.oys.overlay::-webkit-scrollbar {
    width: 4px;
}

.oys.overlay::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 0%, .4);
}

.oys.overlay::-webkit-scrollbar-track {
    background: transparent;
}

.oh {
    overflow: hidden;
}

.green {
    color: var(--done-status);
}

.black-75 {
    color: hsla(0, 0%, 0%, .75);
}

.black-50 {
    color: hsla(0, 0%, 0%, .5);
}

.black-25 {
    color: hsla(0, 0%, 0%, .25);
}

.white-75 {
    color: hsla(0, 0%, 100%, .75);
}

.white-50 {
    color: hsla(0, 0%, 100%, .5);
}

.white-25 {
    color: hsla(0, 0%, 100%, .25);
}

.white {
    color: white;
}

.orange--light {
    color: #DAA520;
}

.orange--brown {
    background: #D1914B;
}

.help-desk--btn {
    display: none;
}

.bottom-courses {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 60px;
    transition: 0.3s;
    overflow: hidden;
    flex-shrink: 0;
}

.bottom-courses .bottom--btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 2px 2px hsla(0, 0%, 0%, .25);
    height: 60px;
}



:root {
    --sidebar-white: hsla(0, 0%, 100%, .65);
    --placeholder: #d6d6d6;
    --placeholder-radius: 8px;
    --placeholder-opacity: .5;
}

.e-learning-mobile {
    height: 0;
    background: #efefef;
    --height: calc(var(--giant-font-size) + var(--giant-line-height) + var(--sub-title-font-size) * 2 + var(--sub-title-line-height) * 2 + var(--base-padding) * 3);
}

.e-learning-mobile .courses {
    padding-top: var(--height) !important;
}

.e-learning-mobile .scroll-item {
    background: #efefef;
    transition: 0.3s;
}

.e-learning-mobile .scroll-sort .giant {
    transition: 0.3s;
}

.e-learning-mobile .scroll-sort.active .giant {
    font-size: var(--sup-title-font-size) !important;
    line-height: var(--sup-title-line-height) !important;
}

#site-content-mobile .tile.active {
    display: none;
}

.e-learning-mobile .scroll-wrapper {
    transition: 0.3s;
}

.e-learning-mobile .scroll-wrapper.active {
    box-shadow: 0px 3px 6px 0px hsla(0, 0%, 0%, .25);
}

.e-learning-mobile .filter-container {
    position: relative;
    transition: 0.3s;
    overflow: hidden;
}

.e-learning-mobile .course-list-content {
    display: flex;
    flex-direction: column;
}

.e-learning-mobile .course-list .course-minimized-home-preview~.course-view {
    padding-top: 32px;
}

.course-minimized-home-preview .course-view-wrapper {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.e-learning-mobile .course-list .course-minimized-home-preview .course-view-wrapper {
    box-shadow: none;
}

.course-minimized-home-preview[user-status="waiting"] .progress {
    background-color: var(--waiting-status);
}

.courses-page-mobile .course-minimized-home-preview[user-status="done"] .progress {
    background-color: var(--done-status);
}

.e-learning-mobile .course-list .course-minimized-home-preview .lack-of-description {
    display: block;
    padding: 16px 0;
    font-size: var(--sup-title-font-size);
    font-style: italic;
    color: hsla(0, 0%, 0%, .5);
}

.e-learning-mobile .course-list .course-minimized-home-preview .course-footer .course--title {
    display: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.e-learning-mobile .course-list[view="Grid"] {
    --gap: 10px;
    gap: var(--gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50% 50%;
    height: 100%;
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview {
    min-height: auto;
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview .progress-bar {
    display: none;
}

.e-learning-mobile .course-list[view="Grid"] .course-info {
    flex-direction: column;
    font-size: var(--paragraph-font-size);
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview .course-info {
    padding: 8px;
    padding-left: 0;
    padding-right: 0;
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview .course-description {
    font-size: var(--paragraph-font-size);
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview .lack-of-description {
    font-size: var(--paragraph-font-size);
    padding: 0px;
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview .course-description .description {
    --height: calc(2 * var(--sub-title-font-size) + var(--sub-title-font-size));
    max-height: var(--height);
    text-align: left;
    margin-top: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    pointer-events: none;
    font-size: var(--paragraph-font-size);
}

.e-learning-mobile .course-list[view="Grid"] .course-description {
    pointer-events: none;
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview .course-description .chevron-down {
    display: none;
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview .course-footer {
    background: transparent;
}

.e-learning-mobile .course-list[view="Grid"] .course-minimized-home-preview .course-description .description {
    margin-top: 0;
}

.e-learning-mobile .course-minimized-home-preview .course-description .description {
    --height: calc(4 * var(--sub-title-font-size));
    /* max-height: var(--height); */
    text-align: justify;
    margin-top: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.e-learning-mobile .course-minimized-home-preview .course-description.active .description {
    -webkit-line-clamp: unset;
}

.e-learning-mobile .course-minimized-home-preview .course-description .chevron-down {
    font-size: var(--sup-header-font-size);
    padding: 12px 0;
    transform: rotate(-90deg);
    color: #326EA7;
}

.e-learning-mobile .course-minimized-home-preview .course-description.active .chevron-down {
    transform: rotate(90deg);
}

.e-learning-mobile .course-view.hidden {
    display: none;
}

.e-learning-mobile .course-minimized-home-preview .progress-bar[limit]:not([limit=""])::after {
    height: 13px;
}

.courses-page-mobile .course-minimized-home-preview .progress-bar {
    background-color: rgb(0, 0, 0, .125);
    border-radius: 0px;
    height: 13px;
    width: 100%;
}

.mobile-filter {
    position: fixed;
    left: 0%;
    top: 0%;
}

.mobile-filter .filter-container {
    height: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background: white;
    overflow: hidden;
    /* max-height: 600px; */
}

.mobile-filter .element--options {
    padding: 16px;
    font-size: var(--sup-header-font-size);
}

.mobile-filter .general {
    width: 100%;
    justify-content: space-between;
    flex-direction: column;
}

.mobile-filter .general.hidden {
    display: none;
}

.mobile-filter .general:not(.active) .sub {
    pointer-events: none;
}

.mobile-filter ul .general {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--sup-header-font-size);
    list-style: none;
    text-transform: uppercase;
}

.mobile-filter ul .general .underline-general {
    position: relative;
    padding: 16px;
}

.mobile-filter ul .general .underline-general::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: hsla(0, 0%, 0%, .15);
    width: calc(100% - (12px * 2));
    height: 1px;
}

.mobile-filter ul .general.active .underline-general::after {
    display: none;
}

.mobile-filter .sub li {
    position: relative;
}

.mobile-filter .sub li::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: hsla(0, 0%, 0%, .15);
    width: calc(100% - (12px * 2));
    height: 1px;
}

.mobile-filter ul .general.active .underline-general {
    background: #efefef;
}

.mobile-filter ul .general.active span.icon {
    transform: rotateZ(180deg);
}

.mobile-filter .filter-options {
    padding: 16px;
    background: #efefef;
    color: #D1914B;
    font-size: var(--sup-header-font-size);
    box-shadow: 0px -4px 4px -4px rgba(0, 0, 0, 0.25) inset;
}

.mobile-filter .mobile-filter--clear {
    font-size: var(--sub-title-font-size);
    transition: 0.3s;
}

.mobile-filter .mobile-filter--clear:not(.active) {
    opacity: 0;
    pointer-events: none;
}

.mobile-filter .filter--run {
    width: 100%;
    max-width: 340px;
    border-radius: 12px;
    padding: 12px 0;
    font-size: var(--sup-header-font-size);
    color: white;
    background: #D1914B;
}

.mobile-filter .general.active .filter--subtitle {
    display: none;
}

.mobile-filter .filter--subtitle {
    color: #D1914B;
    font-size: var(--sup-paragraph-font-size);
}

.mobile-filter .title--wrapper {
    gap: 3px;
}

.mobile-filter ul .wrapper {
    gap: 3px;
    width: 100%;
    justify-content: space-between;
}

.mobile-filter ul .sub {
    max-height: 0;
    overflow: hidden;
    width: 100%;
}

.mobile-filter ul .sub li {
    padding: 16px;
}

.mobile-filter ul .sub li.active {
    color: #D1914B;
}

.your-numbers {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}

.your-numbers--wrapper {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    animation: 0.3s show;
}

@keyframes show {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.your-numbers--wrapper:not(.active) {
    display: none;
}

.your-numbers--wrapper.active {
    z-index: 1;
}

.your-numbers--slide:not(.active) {
    display: none;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.your-numbers--slide.active .rail span, .your-numbers--slide.active .number {
    animation: show 0.3s;
}

.your-numbers--slide {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    background: white;
    z-index: 1;
}

.your-numbers .rail {
    background: #86696E;
    color: white;
    font-size: var(--sub-huge-font-size);
    line-height: normal;
    padding: 16px 0;
    text-align: center;
    text-transform: lowercase;
    text-shadow: 0px 2px 2px hsla(0, 0%, 0%, .35);
    transition: 0.3s;
}

.your-numbers .dots {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 8px;
    z-index: 1;
}

.your-numbers .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsl(0, 0%, 100%);
}

.your-numbers .dot:not(:last-child) {
    margin-right: 8px;
}

.your-numbers .dot.active {
    background: #86696E;
}

.your-numbers .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: var(--sup-header-font-size);
    line-height: normal;
    padding: 16px 0;
    text-align: center;
    text-transform: lowercase;
    width: 100%;
    z-index: 1;
    bottom: 48px;
}

.your-numbers .buttons button:not(.active) {
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.your-numbers .buttons button {
    position: absolute;
    transition: 0.3s;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 2px 2px 0 hsla(0, 0%, 0%, .25);
}

.your-numbers .bg {
    position: relative;
    padding-top: calc(100% / 16 * 9);
}

body[device-type="Smartphone"][orientation="portrait"] .your-numbers .bg {
    padding-top: calc(100% / 4 * 3);
}

.your-numbers .courses .bg {
    background: url(https://resources.growbp.pl/Stock/laptop.png) 22% bottom/auto 88% no-repeat;
}

.your-numbers .number {
    display: inline;
    position: absolute;
    line-height: normal;
    left: 10%;
    top: 5%;
    font-size: calc(var(--giant-font-size) * 2 - 8px);
    transition: 0.3s;
}

.your-numbers .tests .number {
    left: unset;
    right: 10%;
    top: 5%;
}

.your-numbers .tests .bg {
    position: relative;
    background: url(https://resources.growbp.pl/Stock/crop-girl-studying-complicated-material_23-2147666544.jpg) center center/cover no-repeat;
}

#body[orientation="landscape"] .bottom-courses {
    height: 0px !important;
}

#body[orientation="landscape"] .your-numbers--wrapper {
    width: 50%;
}

#body[orientation="landscape"] .your-numbers--wrapper:not(.active) {
    display: flex;
}

#body[orientation="landscape"] .your-numbers .buttons {
    display: none !important;
}

#body[orientation="landscape"] .your-numbers .courses .bg {
    background: url(https://resources.growbp.pl/Stock/laptop.png) 22% bottom/auto 92% no-repeat;
    border-right: 3px solid black;
}

.mobile-sort {
    position: fixed;
    left: 0%;
    top: 0%;
}

.mobile-sort .sort--title {
    padding: 16px 0;
    font-size: var(--sub-header-font-size);
    color: hsla(0, 0%, 0%, .5);
}

.mobile-sort .sort-container {
    background: white;
    overflow: hidden;
    padding: 32px 16px;
    padding-top: 16px;
}

.mobile-sort .list {
    padding: 0;
}

.mobile-sort li {
    width: 100%;
    position: relative;
    padding: 16px 0;
    list-style: none;
    font-size: var(--sup-header-font-size);
}

.mobile-sort li::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 12px);
    background: hsla(0, 0%, 0%, .15);
}

.mobile-sort li span.icon {
    font-size: var(--title-font-size);
}

.mobile-sort li:not(.active) span.icon {
    opacity: 0;
}

.mobile-sort li.active {
    color: #D1914B;
}

.mobile-subapage .course-list[view="Grid"] {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/*  */

.scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview.placeholder .course-footer .course--title {
    padding-bottom: 0px;
    margin: 0px;
    margin-bottom: 8px;
}

.courses-page-mobile .course-minimized-home-preview.placeholder .course-info--category *, .courses-page-mobile .course-minimized-home-preview.placeholder .course-info--data * {
    visibility: hidden;
}

.courses-page-mobile .course-minimized-home-preview.placeholder .course-info--category {
    border-radius: var(--placeholder-radius);
    background: var(--placeholder);
}

.courses-page-mobile .course-minimized-home-preview.placeholder .course--title {
    border-radius: var(--placeholder-radius);
    background: var(--placeholder);
    color: transparent;
    margin: 0 8px;
}

.courses-page-mobile .course-minimized-home-preview.placeholder .progress-bar {
    background: var(--placeholder);
}

.courses-page-mobile .course-minimized-home-preview.placeholder .progress-bar::after {
    display: none;
}

.courses-page-mobile .course-minimized-home-preview.placeholder .progress-bar::before {
    display: none;
}

.courses-page-mobile .course-minimized-home-preview.placeholder .course-info--data {
    border-radius: var(--placeholder-radius);
    background: var(--placeholder);
}

.courses-page-mobile .course-minimized-home-preview.placeholder .course-image {
    opacity: var(--placeholder-opacity);
    background: url('https://resources.growbp.pl/grow.edu/labels/Workshop.jpg') center center/cover !important;
}

.courses-page-mobile .course-minimized-home-preview.placeholder .progress {
    border-color: var(--placeholder) !important;
    background: var(--placeholder);
}

.courses-page-mobile .course-minimized-home-preview.placeholder .progress--info {
    visibility: hidden;
}

.courses-page-mobile .course-minimized-home-preview.placeholder .course-info {
    color: transparent;
}

/*  */

.scroll-view[view="Grid"] .scroll-view-content .course-minimized-home-preview .course-footer .course--title {}

.scroll-view[view="Grid"] .scroll-view-content .course-minimized-home-preview {
    display: flex;
    flex-direction: column;
}

body[orientation="landscape"] .scroll-view .scroll-view-content .course-minimized-home-preview .course-info,
.scroll-view[view="Grid"] .scroll-view-content .course-minimized-home-preview .course-info {
    flex-direction: column !important;
    padding: 0 !important;
}

.scroll-view[view="Grid"] .scroll-view-content .course-minimized-home-preview .course-view-wrapper {
    box-shadow: none;
}

.scroll-view[view="Grid"] .scroll-view-content .course-minimized-home-preview .course--title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: var(--sup-paragraph-font-size) !important;
    line-height: var(--sup-paragraph-line-height) !important;
    margin: 6px 0px;
    padding: 0px;
    font-weight: bold;
    width: calc(100% - 40px);
}

/*Popup*/

.mobile-preview-sidebar[view="course"] .course-play--icon .icon {
    line-height: 0;
}

.mobile-preview-sidebar .content:not(.active) {
    display: none;
}

.mobile-preview-sidebar .navigator {
    border-top: 1px solid #f4f4f4;
    display: grid;
    padding: var(--base-padding);
    gap: var(--half-padding);
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.mobile-preview-sidebar .navigator button,
.mobile-preview-sidebar .navigator .navigator-button {
    display: block;
    border-radius: var(--base-padding);
    border: 1px solid var(--border-color);
}

.mobile-preview-sidebar .navigator button.active,
.mobile-preview-sidebar .navigator .navigator-button.active {
    background-color: var(--border-color);
    color: white;
}

body .navigator .navigator-icon {
    display: none !important;
}

.mobile-preview-sidebar .program-list {
    padding-left: 16px;
}

.mobile-preview-sidebar .program-list li {
    padding: 4px 0;
    border-bottom: 1px solid hsla(0, 0%, 0%, .1);
}

.mobile-preview-sidebar .program-list li~li {
    padding-top: 16px !important;
}

.mobile-preview-sidebar .competences-list {
    counter-reset: competences;
    height: 100%;
}

.mobile-preview-sidebar .competences-list li {
    counter-increment: competences;
    flex-shrink: 0;
}

.mobile-preview-sidebar .competences-list li~li {
    padding-top: 16px;
}

.mobile-preview-sidebar .competences-list li .counter {
    font-size: var(--sub-title-font-size);
}

.mobile-preview-sidebar .competences-list li .counter::before {
    content: counter(competences)'.';
}

.mobile-preview-sidebar .competences-list p {
    text-align: justify;
    font-size: var(--sub-title-font-size);
    padding-top: 8px;
}

@media screen and (orientation: portrait) {
    .course-maximized .course-content {
        flex-direction: column-reverse;
    }

    .course-maximized .course-content .course-resize {
        display: none !important;
    }

    .course-maximized .course-content .course-content-main-controller {
        width: 100% !important;
        height: 50% !important;
    }
}

/* tablet portrait */
@media (min-width: 500px) and (min-height: 500px) {

    #body[orientation="portrait"] .courses-page-mobile[view="Grid"] .course-view-wrapper .progress-bar {
        display: block;
    }

    #body[orientation="portrait"] .courses-page-mobile[view="Grid"] .course-minimized-home-preview .course--title {
        font-size: var(--sup-header-font-size) !important;
        line-height: var(--sup-header-line-height) !important;
        font-weight: normal;
    }

}

body[orientation="landscape"] .courses-page-mobile .scroll-view-content .course-minimized-home-preview .course-footer .course-description-controller {
    display: none !important;
}

.courses-page-mobile .course-minimized-home-preview .course-name {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: calc(var(--font-line-height) * 2);
}

body:not([orientation="landscape"]) .courses-page-mobile[view="List"] .course-minimized-home-preview .course-name {
    -webkit-line-clamp: 1;
    height: calc(var(--font-line-height) * 1);
}

body:not([orientation="landscape"]) .courses-page-mobile[view="List"] .course-minimized-home-preview .course-view-wrapper {
    border-left: 4px solid var(--user-status-color) !important;
    border-radius: 0px !important;
    flex-direction: row-reverse !important;
    box-shadow: none;
    display: flex;
    align-items: center;
}

body:not([orientation="landscape"]) .courses-page-mobile[view="List"] .scroll-view-content .course-minimized-home-preview .course-header {
    display: none !important;
}

body:not([orientation="landscape"]) .courses-page-mobile[view="List"] .scroll-view-content .course-minimized-home-preview .course-footer {
    position: relative;
    width: 0%;
    flex-grow: 1;
    overflow: visible;
}

body:not([orientation="landscape"]) .courses-page-mobile[view="List"] .scroll-view-content .course-minimized-home-preview .course-footer::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

body:not([orientation="landscape"]) .courses-page-mobile[view="List"] .scroll-view-content .course-minimized-home-preview {
    flex-shrink: 0;
    margin-bottom: 16px;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content {
    display: flex;
    flex-direction: column;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-description {
    pointer-events: none;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .course-info {
    flex-direction: column;
    line-height: 2;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .scroll-view .scroll-view-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .course-footer {
    background: transparent;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .course-info--category {
    margin-left: 8px;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .progress {
    --border-radius: 25px;
    width: auto;
    border-left: var(--border-radius) solid var(--orange);
    border-top-left-radius: calc(100px + var(--border-radius));
    border-bottom-left-radius: calc(100px + var(--border-radius));
    padding: 0px !important;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview[user-status=during] .progress {
    border-color: darkgreen;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview[user-status="waiting"] .progress {
    border-color: var(--waiting-status);
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .progress-bar {
    display: none;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-description {
    display: none !important;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview {
    height: auto;
    min-height: auto;
    padding: 0px !important;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .course-info {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0px;
    font-size: var(--paragraph-font-size);
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .course-footer {
    display: flex;
    flex-direction: column;
    padding: 0px;
    padding-left: 8px;
    overflow: hidden;
    flex-grow: 1;
    border-bottom: 1px solid hsla(0, 0%, 0%, .15);
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .course-footer .course--title {
    display: block;
    font-size: var(--sub-title-font-size);
    padding-bottom: 8px;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course--title br {
    display: none !important;
}

/* dsadasdasdasddupasa */
body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .lack-of-description {
    display: none;
}

body:not([orientation="landscape"]) .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .background.course-image {
    --height: calc(var(--header-line-height) + var(--title-line-height) + var(--base-padding) * 3);
    --width: calc(var(--height) / 9 * 16);
    padding: 0px !important;
    width: var(--width);
    height: var(--height);
    border-radius: var(--base-padding);
}

body[device="Smartphone"] .scroll-view[view="List"] .scroll-view-content .course-minimized-home-preview .background.course-image {
    display: none !important;
}

body[orientation="landscape"] .courses-page-mobile-controller .scroll-view .scroll-view-content .course-minimized-home-preview .course-category-name,
body .courses-page-mobile-controller .scroll-view[view="Grid"] .scroll-view-content .course-minimized-home-preview .course-category-name {
    display: none !important;
}

.course-maximized-preview-mobile .course-button-play-mobile {
    background-image: url( 'https://grow-edu.pl/Resources/CourseButtonPlay.png' );
    background-size: 100% 100%;
    height: calc( var(--font-line-height) + var(--base-padding) );
    width: calc( var(--font-line-height) + var(--base-padding) );
}

/* Courses/Course/Mobile/CourseMaximized.mobile.css */

.course-maximized-mobile {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.course-maximized-mobile .course-main {
    position: relative;
    width: 100%;
    height: 100%;
}

.course-maximized-mobile .course-main .course-main-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.course-maximized-mobile .course-sidebar {
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur(8px);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

.course-maximized-mobile .course-sidebar .course-sidebar-content {
    background-color: #f4f4f4;
    box-shadow: 16px 0px 32px -8px rgba(0, 0, 0, 0.5);
    position: relative;
    width: min(90%, 270px);
    height: 100%;
    transition: 0.4s transform, 0.4s width;
}

.course-maximized-mobile:not([sidebar="true"]) .course-sidebar {
    opacity: 0;
    pointer-events: none !important;
}

.course-maximized-mobile:not([sidebar="true"]) .course-sidebar .course-sidebar-content {
    transform: translateX(-100%);
}

.course-maximized-mobile .course-summary-mobile .minutes-header {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
}

/* Courses/Course/Mobile/CourseSummary.mobile.css */

.course-summary-mobile {}

body[mobile="true"][orientation="portrait"] .course-summary-mobile .course-button-close {
   --font-size: var(--huge-font-size) !important;
   --font-line-height: var(--huge-line-height) !important;
}

body[mobile="true"][orientation="landscape"] .course-summary-mobile {
    flex-direction: row;
}

body[mobile="true"][orientation="landscape"] .course-summary-mobile .course-summary-top {
    width: 50% !important;
    height: 100% !important;
}

body[mobile="true"][orientation="landscape"] .course-summary-mobile .course-summary-bottom {
    width: 50% !important;
    height: 100% !important;
}

body[mobile="true"][orientation="landscape"] .course-summary-mobile .course-summary-bottom .course-button-finish-controller {
    padding: var(--base-padding) !important;
    transform: initial !important;
    width: 100%;
    order: 5;
    display: flex;
    justify-content: center;
}

body[mobile="true"][orientation="landscape"] .course-summary-mobile .course-summary-bottom .course-button-finish-controller>div {
    width: 50%;
}

body[mobile="true"][orientation="landscape"] .course-summary-mobile .course-summary-bottom .course-button-finish-controller .course-button-finish {
    text-align: center !important;
    width: 100% !important;
}

body[mobile="true"][orientation="landscape"] .course-summary-mobile .course-summary-bulb {
    transform: translateX(-25%) !important;
}

body[device="Smartphone"] .course-summary-mobile {
    --header-font-size: 13px !important;
    --header-line-height: 18px !important;

    --huge-font-size: 21px !important;
    --huge-line-height: 26px !important;

    --giant-font-size: 27px !important;
    --giant-line-height: 36px !important;
}

body[device="Smartphone"][orientation="landscape"] .course-summary-mobile .course-summary-statistics {
    display: none !important;
}

.course-summary-mobile .course-name {
    --lines: 3;
    -webkit-line-clamp: var(--lines) !important;
}

body[device="Tablet"] .course-summary-mobile .course-summary-bottom .course-summary-bottom-content {
    padding-left: 20% !important;
}

body[device="Tablet"] .course-summary-mobile .course-summary-bottom .course-summary-bottom-content .header {
    --font-size: var(--sup-big-font-size) !important;
    --font-line-height: var(--sup-big-font-size) !important;
}

body[device="Tablet"] .course-summary-mobile .course-summary-bottom .course-summary-statistics {
    padding: 0px 5% 0px 0px !important;
}

/* Courses/Course/Panel/Course.panel.css */

.course-status[user-status] {
    --user-status-color: black;
}

.course-status[user-status="waiting"] {
    --user-status-color: var(--waiting-status);
}

.course-status[user-status="during"] {
    --user-status-color: var(--during-status);
}

.course-status[user-status="done"] {
    --user-status-color: var(--done-status);
}

.course-panel-maximized .course-user-list-filter.bt-group .bt {
    background-color: white !important;
}
.course-panel-maximized .course-user-list-filter.bt-group .bt.active {
    background-color: #efefef !important;
}

.course-panel-maximized[course="0"] .course-competence-list-content {
    display: none;
}
.course-panel-maximized:not([course="0"]) .form-placeholder {
    display: none;
}
.course-panel-maximized[course="0"] .form-item {
    display: none;
}
.course-panel-maximized[course="0"] .course-maximized-footer {
    display: none !important;
}

.course-panel-maximized[status=""] .course-button-form-controller { display: block !important; }
.course-panel-maximized[status="trash"] .course-button-trash-controller { display: block !important; }
.course-panel-maximized[status="sketch"] .course-button-sketch-controller { display: block !important; }
.course-panel-maximized[status="published"] .course-button-published-controller { display: block !important; }

.course-panel-maximized[course="0"] .panel-card-page .bt:not(:first-child) {
    pointer-events: none;
    opacity: 0.5;
}

/* Courses/Course/Templates/CourseMaximized.css */

.course-main-grid {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
}

body:not([mobile="true"]) .course-main-grid .course-button-toggle-navigation-controller {
    display: none !important;
}

/* Portrait */

body[mobile="true"][orientation="portrait"] .course-main-grid {
    grid-template-columns: auto;
    grid-template-rows: 1fr auto;
    padding: var(--base-padding);
}

body[mobile="true"][orientation="portrait"] .course-main-grid .course-main-content {
    order: 0;
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
}

body[mobile="true"][orientation="portrait"] .course-main-grid .course-item-button-prev-controller {
    order: 1;
    grid-row: 2;
    text-align: center;
}

body[mobile="true"][orientation="portrait"] .course-main-grid .course-button-toggle-navigation-controller {
    order: 2;
    grid-row: 2;
    text-align: center;
}

body[mobile="true"][orientation="portrait"] .course-main-grid .course-item-button-next-controller {
    order: 3;
    grid-row: 2;
    text-align: center;
}

body[mobile="true"][orientation="portrait"] .course-main-grid .course-item-button-prev-controller .course-item-button-prev {
    --font-size: 36px !important;
    --font-line-height: 41px !important;
    padding: calc(var(--base-padding) * 2);
}

body[mobile="true"][orientation="portrait"] .course-main-grid .course-item-button-next-controller .course-item-button-next {
    --font-size: 36px !important;
    --font-line-height: 41px !important;
    padding: calc(var(--base-padding) * 2);
}

/* Landscape */

body[mobile="true"][orientation="landscape"] .course-main-grid {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    padding: var(--base-padding);
}

body[mobile="true"][orientation="landscape"] .course-main-grid .course-button-toggle-navigation-controller {
    order: 1;
    grid-column: 3;
    grid-row: 1;
    text-align: center;
}

body[mobile="true"][orientation="landscape"] .course-main-grid .course-item-button-prev-controller {
    order: 2;
    grid-column: 1;
    grid-row: 2;
    text-align: center;
}

body[mobile="true"][orientation="landscape"] .course-main-grid .course-main-content {
    order: 3;
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

body[mobile="true"][orientation="landscape"] .course-main-grid .course-item-button-next-controller {
    order: 4;
    grid-column: 3;
    grid-row: 2;
    text-align: center;
}

/* Mobile */

body[mobile="true"] .course-maximized .course-navigation {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    width: 100% !important;
    height: 100%;
    overflow: hidden;
    transition: 0.4s opacity;
}

body[mobile="true"] .course-maximized .course-navigation .course-navigation-content {
    background-color: white;
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 100;
    width: 50%;
    height: 100%;
    transition: 0.4s transform;
}

body[mobile="true"][orientation="landscape"] .course-maximized .course-navigation .course-navigation-content {
    width: 25%;
}

body[mobile="true"] .course-maximized:not([navigation="true"]) .course-navigation {
    opacity: 0 !important;
    pointer-events: none !important;
}

body[mobile="true"] .course-maximized:not([navigation="true"]) .course-navigation .course-navigation-content {
    transform: translateX(-100%);
}

body[mobile="true"][orientation="portrait"] .course-maximized {
    padding-top: 60px !important;
}

body[mobile="true"] .course-maximized {
    overflow: hidden;
}

body[mobile="true"] .course-maximized .course-maximized-fullscreen>.course-header {
    display: none !important;
}

body[mobile="true"] .course-maximized>.course-content {
    position: relative;
}

.course-maximized:not([view="quiz"]) .course-quiz {
    display: none !important;
}

.course-maximized[view="quiz"] .course-main {
    display: none !important;
}

.course-maximized[view="pptx"] .course-main .course-main-content .presentation-maximized {
    display: none !important;
}
.course-maximized:not([view="pptx"]) .course-main .course-main-content pptx-presentation {
    display: none !important;
}

/* Courses/CourseEditor/CourseEditor.css */

.course-editor {
    overflow: hidden;
}

.course-editor[drag="true"] {
    cursor: grabbing;
}

.course-editor>.course-lesson {
    pointer-events: none !important;
    position: absolute !important;
}

.course-editor>.course-item {
    pointer-events: none !important;
    position: absolute !important;
}

.course-editor .course-lesson-list-content {
    position: relative;
    overflow: hidden;
}

.course-editor .course-lesson {
    position: relative;
    width: 100%;
}

.course-editor .course-item-list-content {
    --columns: 16;
    min-height: 72px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.course-editor .course-item-list-content .course-item {
    position: relative;
    width: calc(100% / var(--columns));
    transition: 0.25s width;
}

.course-editor .course-item-list-content .course-item-placeholder {
    width: calc(100% / var(--columns));
    transition: 0.25s width;
}

.course-editor-main {
    background-color: rgb(255, 255, 255);
}

.course-editor-main-content>.course-item-list {
    height: 100% !important;
}

.course-item-explorer .course-item-list-content .course-item {
    position: relative;
    width: calc(100% / var(--columns));
    transition: 0.25s width;
}

.course-editor:not([drag="true"]) .course-lesson:not(.locked) .course-lesson-button-drag {
    cursor: grab;
}

.course-editor:not([drag="true"]) .course-item:not(.locked) .course-item-content {
    cursor: grab;
}

/* .course-editor .course-lesson:not(.locked):hover .course-lesson-content {
    border-color: rgb(110, 167, 50) !important;
} */

.course-editor .course-lesson .course-item:not(.locked) .course-item-content:hover {
    border-color: rgb(110, 167, 50) !important;
}

.course-editor .course-editor-resize {
    cursor: ew-resize;
    position: relative;
    width: 0px;
    height: 100%;
    z-index: 100;
}

.course-editor .course-editor-resize::after {
    display: block;
    content: '';
    position: absolute;
    left: -4px;
    top: 0px;
    bottom: 0px;
    width: 8px;
    height: 100%;
}

.course-editor-course-lesson-description-input {
    color: rgb(110, 167, 50);
}

.course-editor-course-item-preview-controller {
    background-color: white;
    border: 6px solid var(--color-workshop);
    /* box-shadow: 0px 0px var(--base-padding) rgba(0, 0, 0, 0.5); */

    border-radius: var(--base-padding);

    right: var(--base-padding);
    bottom: var(--base-padding);

    width: 720px;

    z-index: 100;

    overflow: hidden;
}

.course-editor-course-item-preview-controller:not(.active) {
    display: none;
}

.course-editor-course-item-preview-controller[view="full"] {
    width: 80% !important;
    height: 80% !important;
}

.course-editor-course-item-preview-controller[view="full"] .course-editor-course-item-preview-controller-content {
    width: 100% !important;
    height: 100% !important;
}

@media (max-height: 800px) {
    .course-editor-course-item-preview-controller[view="full"] {
        height: calc(100% - var(--base-padding) * 2) !important;
    }
}

.course-editor .course-lesson[course-lesson="-1"] .course-item-list,
.course-editor .course-lesson[course-lesson="-1"] .course-item-list .course-item-list-content,
.course-editor .course-lesson[course-lesson="-1"] .course-item-list .course-item-list-content .course-item,
.course-editor .course-lesson[course-lesson="-1"] .course-item-list .course-item-list-content .course-item>div,
.course-editor .course-lesson[course-lesson="-1"] .course-item-list .course-item-list-content .course-item {
    height: 100%;
}


.course-editor .course-lesson[course-lesson="-1"] .course-item-list .course-item-list-content {
    --columns: 1 !important;
}


.course-editor .course-lesson[course-lesson="-1"] .course-item-padding {
    padding-top: 0 !important;
    height: 100%;
}

.course-editor .course-editor-sidebar {
    transition: 0.2s width;
}

.course-editor .course-editor-sidebar:not(.active) {
    width: 0px !important;
    overflow: hidden;
}

.course-editor .course-editor-sidebar-button-toggle {
    color: rgb(110, 167, 50);
}

.course-editor .course-editor-sidebar-button-toggle.active .icon::after {
    content: '\01D0';
}

@media screen and (max-height: 800px) {

    .course-editor form.course-lesson .course-lesson-content,
    .course-editor .course-lesson[course-lesson="-1"] .course-lesson-content {
        height: 144px !important;
    }

    .course-editor form.course-lesson .course-lesson-content button {
        width: 144px !important;
    }
}

.course-editor .course-lesson[course-item-count="0"] .form-placeholder {
    display: flex;
}

/* .course-editor[drag="true"][object="course-lesson"] .course-lesson .course-item-list-content {
    display: none !important;
} */
/* 
.course-editor[drag="true"][object="course-item"] .course-lesson:not([locked="true"]) .course-item-list-content {
    transition: 0.125s height;
} */
.course-editor[drag="true"][object="course-item"] .course-lesson:not([locked="true"]) .course-item-list {
    transition: 0.5s height;
}

.course-editor[drag="true"][object="course-item"] .course-lesson:not([locked="true"]) .course-item-list::before {
    content: '';
    display: block;
    border: 2px dashed rgb(110, 167, 50);
    pointer-events: none !important;
    position: absolute;
    left: var(--half-padding);
    top: var(--half-padding);
    width: calc(100% - var(--base-padding));
    height: calc(100% - var(--base-padding));
}

.course-editor[type]:not([type="quiz"]) .course-lesson[type="quiz"],
.course-editor[type] .course-lesson[type="quiz"]:not([course-item-count="0"]) {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

.course-editor[type]:not([type="quiz"]) .course-lesson[type="quiz"]::before,
.course-editor[type] .course-lesson[type="quiz"]:not([course-item-count="0"])::before {
    display: none !important;
}

.course-lesson-list[course-lesson-count="0"] .form-placeholder {
    display: flex;
}

.course-lesson-list[course-lesson-count="0"] .course-lesson-list-content {
    display: none !important;
}

/*
    Views
*/

/* .course-editor[course-lesson-description="false"] .course-lesson .course-lesson-description-controller {
    display: none !important;
}
.course-editor[course-lesson-description="false"] .course-item .course-item-settings {
    display: none !important;
} */

.course-editor[view="Course"] .course-editor-sidebar-button-toggle {
    display: none;
}

.course-editor[view="Course"] .course-editor-sidebar {
    width: 0px !important;
}

.course-editor[view="Course"] .course-lesson:not([type="quiz"]) .course-item-list-content {
    display: none !important;
}

.course-editor[view="Course"] .course-lesson .course-lesson-button-toggle {
    display: none !important;
}

.course-editor[view="Course"] .course-lesson .course-lesson-button-lock {
    display: none !important;
}

.course-editor[view="Course"] .course-lesson .course-editor-explorer-button {
    display: none !important;
}

.course-editor:not([view="Course"]) .course-lesson .course-lesson-button-drag {
    display: none !important;
}

.course-editor:not([view="Item"]) .course-lesson .course-lesson-description-controller,
.course-editor:not([view="Item"]) .course-item .course-item-settings {
    display: none !important;
}

.course-lesson[locked="true"] .course-item-list {
    pointer-events: none;
}

.course-lesson[locked="true"] .course-lesson-button-lock {
    color: rgb(110, 167, 50);
}

.course-lesson[toggled="true"] .course-lesson-button-toggle .icon::before {
    content: '\0055';
}

.course-lesson[toggled="true"] .course-lesson-button-toggle {
    color: white;
    position: relative;
}

.course-lesson[toggled="true"] .course-lesson-button-toggle::before {
    background-color: rgb(110, 167, 50);
    border-radius: 100%;
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 75%;
    padding-top: 75%;
}

.course-editor .course-editor-footer {
    border-top: 1px solid rgb(233, 233, 233);
}

.course-editor-view-input .bt {
    border: none;
}

.course-editor .course-editor-font-scale {
    --scale: clamp(0.75, var(--course-item-size), 1);
    /* --scale: var(--course-item-size); */
    font-size: calc(var(--scale) * var(--font-size)) !important;
    line-height: calc(var(--scale) * var(--line-height)) !important;
}

.course-editor[course-lesson-form-position="sticky"] .course-lesson-form-controller {
    background-color: white;
    position: -webkit-sticky;
    position: sticky;
    top: 0px !important;
    z-index: 10;
}

.course-editor .course-item[drag="true"] {
    z-index: 10;
}

.course-editor .course-editor-main-content-scroll .course-lesson-form-controller .course-lesson-content {
    transition: 0.5s height;
}

.course-editor .course-editor-main-content-scroll.active .course-lesson-form-controller .course-lesson-description-controller {
    display: none;
}

.course-editor .course-editor-main-content-scroll.active .course-lesson-form-controller .course-lesson-content {
    height: 72px !important;
}

.course-editor .course-editor-main-content-scroll.active .course-lesson-form-controller .form-placeholder .paragraph {
    display: none;
}

.course-editor .course-editor-main-content-scroll.active .course-lesson-form-controller .course-lesson.locked[type="quiz"] {
    padding: 0px !important;
}

.course-editor .course-editor-main-content-scroll.active .course-lesson-form-controller .course-lesson-form-quiz-controller {
    min-width: auto !important;
    width: auto !important;
}

.course-editor .course-editor-main-content-scroll .course-lesson-form-controller .course-lesson.locked[type="quiz"] .course-item-list {
    height: 150px !important;
    width: calc(150px / 3 * 4);
    transition: 0.5s width, 0.5s height;
}

.course-editor .course-editor-main-content-scroll.active .course-lesson-form-controller .course-lesson.locked[type="quiz"] .course-item-list {
    height: 72px !important;
    width: calc(72px / 3 * 4);
}

.course-editor .course-editor-main-content-scroll .course-lesson-form-controller .course-lesson.locked[type="quiz"] .course-item-list .course-item>.base-padding {
    padding: 0px !important;
}

.course-editor:fullscreen .course-editor-main,
.course-editor::-webkit-full-screen .course-editor-main {
    padding: 0px !important;
}

/* .course-editor:fullscreen .course-editor-sidebar {
    padding: 0px !important;
} */

/* Courses/CourseEditor/CourseItemEditor.css */

.course-editor .course-item .course-item-content {
    background-color: rgb(233, 233, 233);
    border: 1px solid rgb(214, 214, 214);
    border-radius: var(--half-padding);
    box-shadow: 0px var(--half-padding) var(--half-padding) rgba(0, 0, 0, 0.06125);
    color: rgb(198, 198, 198);
    overflow: hidden;
}

.course-editor .course-item-content {
    --width: 360;
}

.course-editor .course-item-content .course-item-content-quiz {
    left: 50%;
    top: 50%;
    width: 360px;
    height: 270px;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(calc(var(--width) / 360));
}

.course-editor .course-item-content-quiz-name {
    text-align: center;
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 30px;
    width: 230px;
    height: 230px;
    white-space: normal;
}

.course-editor-explorer .course-item .course-item-content {
    background-color: rgb(233, 233, 233);
    border: 1px solid rgb(214, 214, 214);
    border-radius: var(--half-padding);
    box-shadow: 0px var(--half-padding) var(--half-padding) rgba(0, 0, 0, 0.06125);
    color: rgb(198, 198, 198);
    overflow: hidden;
}

.course-editor-explorer .course-item-content {
    --width: 360;
}

.course-editor-explorer .course-item-content .course-item-content-quiz {
    left: 50%;
    top: 50%;
    width: 360px;
    height: 270px;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(calc(var(--width) / 360));
}

.course-editor-explorer .course-item-content-quiz-name {
    text-align: center;
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 30px;
    width: 230px;
    height: 230px;
    white-space: normal;
}

/* Courses/CourseEditor/CourseLessonEditor.css */

.course-editor .course-lesson-list .course-lesson:not(:last-child) .course-lesson-content {
    border-bottom: 1px solid rgb(233, 233, 233);
}

/* Courses/CourseEditor/CourseEditorExplorer/CourseEditorExplorer.css */

/* Course Items */
.course-editor-explorer .course-item-explorer {
    cursor: pointer;
    opacity: 0.25;
    transition: 0.125s opacity;
}
.course-editor-explorer .course-item-explorer[selected],
.course-editor-explorer .course-item-explorer:hover {
    opacity: 1;
}

.course-editor-explorer .course-item-explorer .course-item-content::before {
    content: '\00C9';
    display: block;
    color: rgb(127, 127, 127);
    font-family: 'GrowIcons';
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    position: absolute;
    bottom: 0px;
    right: 0px;
    transform: translate( -100%, -25% ) scale( 1.25 );
    z-index: 100;
}
.course-editor-explorer .course-item-explorer[selected] .course-item-content::after {
    content: '\0168';
    display: block;
    color: rgb(255, 255, 255);
    font-family: 'GrowIcons';
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    position: absolute;
    bottom: 0px;
    right: 0px;
    transform: translate( -125%, -25% ) scale( 1.125 );
    z-index: 100;
}

/* Files */
.course-editor-explorer .file-explorer-file {
    cursor: pointer;
    opacity: 0.25;
    transition: 0.125s opacity;
}
.course-editor-explorer .file-explorer-file[selected],
.course-editor-explorer .file-explorer-file:hover {
    opacity: 1;
}

.course-editor-explorer .file-explorer-file .file-explorer-file-content::before {
    content: '\00C9';
    display: block;
    color: rgb(127, 127, 127);
    font-family: 'GrowIcons';
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    position: absolute;
    bottom: 0px;
    right: 0px;
    transform: translateY( 50% ) scale( 1.25 );
    z-index: 100;
}
.course-editor-explorer .file-explorer-file[selected] .file-explorer-file-content::after {
    content: '\0168';
    display: block;
    color: rgb(255, 255, 255);
    font-family: 'GrowIcons';
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    position: absolute;
    bottom: 0px;
    right: 0px;
    transform: translate( -12.5%, 50% ) scale( 1.125 );
    z-index: 100;
}

/* Courses/CourseGroup/CourseGroup.panel.css */

form[name="CourseGroup"]:not([course-group]) .course-group-form-button {
    pointer-events: none;
    opacity: 0.5;
}

form[name="CourseGroup"][course-group] [name="Users"] {
    pointer-events: none;
    opacity: 0.5;
}

/* Courses/CourseItem/Mobile/CourseItemMaximizedMobile.css */

.course-item-maximized-mobile {}

.course-item-maximized-mobile .course-item-content {}

body .course-item-lesson-name-controller {
    height: calc(var(--font-line-height) * 3);
}

body .course-item-lesson-name-controller .course-item-lesson-name {
    -webkit-line-clamp: 3;
}

body[device="Tablet"] .course-item-lesson-name-controller {
    height: calc(var(--font-line-height) * 4);
}

body[device="Tablet"] .course-item-lesson-name-controller .course-item-lesson-name {
    -webkit-line-clamp: 4;
}

/* Courses/CourseItem/Mobile/CourseItemMinimizedMobile.css */

.course-item-minimized-mobile {
    display: flex;
    flex-direction: row;
}

.course-item-minimized-mobile .course-item-header {
    text-align: right;
    width: 30px;
}

.course-item-minimized-mobile .course-item-content {
    flex-grow: 1;
    width: 0%;
}

.course-item-minimized-mobile .course-item-content > div {
    background-color: white;
}

.course-item-minimized-mobile.course-item-selected {
    background-color: rgb(153, 183, 211);
}

/* Courses/CourseItem/Mobile/Image/CourseItemMaximizedImageMobile.css */

.course-item-maximized-image-mobile {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
}

body[device="Tablet"][orientation="portrait"] .course-item-maximized-image-mobile {
    grid-template-columns: 1fr 150px 1fr;
}

.course-item-maximized-image-mobile .course-item-image-header {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
    width: 100%;
}

.course-item-maximized-image-mobile .course-item-image-main {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 4;
}

.course-item-maximized-image-mobile .course-item-button-prev {
    text-align: center;
    grid-row: 3;
    grid-column: 1;
}

.course-item-maximized-image-mobile .course-button-sidebar {
    text-align: center;
    grid-row: 3;
    grid-column: 2;
}

.course-item-maximized-image-mobile .course-item-button-next {
    text-align: center;
    grid-row: 3;
    grid-column: 3;
}

/* Landscape */

body[orientation="landscape"] .course-item-maximized-image-mobile {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto 1fr;
}

body[orientation="landscape"] .course-item-maximized-image-mobile .course-item-image-header {
    display: none !important;
}

body[orientation="landscape"] .course-item-maximized-image-mobile .course-item-image-main {
    grid-row: 1;
    grid-column: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

body[orientation="landscape"] .course-item-maximized-image-mobile .course-item-button-prev {
    grid-column: 1;
    grid-row: 2;
}

body[orientation="landscape"] .course-item-maximized-image-mobile .course-button-sidebar {
    justify-self: flex-start;
    align-self: flex-start;
    grid-column: 1;
    grid-row: 1;
}

body[orientation="landscape"] .course-item-maximized-image-mobile .course-item-button-next {
    grid-column: 3;
    grid-row: 2;
}

/* Courses/CourseItem/Mobile/Pdf/CourseItemMaximizedPdfMobile.css */

.course-item-maximized-pdf-mobile {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
}

body[device="Tablet"][orientation="portrait"] .course-item-maximized-pdf-mobile {
    grid-template-columns: 1fr 150px 1fr;
}

.course-item-maximized-pdf-mobile .course-item-pdf-header {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
    width: 100%;
}

.course-item-maximized-pdf-mobile .course-item-pdf-main {
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 4;
}

.course-item-maximized-pdf-mobile .course-item-pdf-main .pdf-view {
    background-color: white !important;
    border: none;
    display: block;
    width: 100%;
    height: 100%;
}

.course-item-maximized-pdf-mobile .course-item-button-prev {
    text-align: center;
    grid-row: 3;
    grid-column: 1;
}

.course-item-maximized-pdf-mobile .course-button-sidebar {
    text-align: center;
    grid-row: 3;
    grid-column: 2;
}

.course-item-maximized-pdf-mobile .course-item-button-next {
    text-align: center;
    grid-row: 3;
    grid-column: 3;
}

/* Landscape */

body[orientation="landscape"] .course-item-maximized-pdf-mobile {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto 1fr;
}

body[orientation="landscape"] .course-item-maximized-pdf-mobile .course-item-pdf-header {
    display: none !important;
}

body[orientation="landscape"] .course-item-maximized-pdf-mobile .course-item-pdf-main {
    grid-row: 1;
    grid-column: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

body[orientation="landscape"] .course-item-maximized-pdf-mobile .course-item-button-prev {
    grid-column: 1;
    grid-row: 2;
}

body[orientation="landscape"] .course-item-maximized-pdf-mobile .course-button-sidebar {
    justify-self: center;
    align-self: center;
    grid-column: 1;
    grid-row: 3;
}

body[orientation="landscape"] .course-item-maximized-pdf-mobile .course-item-button-next {
    grid-column: 3;
    grid-row: 2;
}

/* Courses/CourseItem/Mobile/Slide/CourseItemMaximizedSlideMobile.css */

.course-item-maximized-slide-mobile {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
}

body[device="Tablet"][orientation="portrait"] .course-item-maximized-slide-mobile {
    grid-template-columns: 1fr 150px 1fr;
}

.course-item-maximized-slide-mobile .course-item-slide-header {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
    width: 100%;
}

.course-item-maximized-slide-mobile .course-item-slide-main {
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 4;
}

.course-item-maximized-slide-mobile .course-item-button-prev {
    text-align: center;
    grid-row: 3;
    grid-column: 1;
}

.course-item-maximized-slide-mobile .course-button-sidebar {
    text-align: center;
    grid-row: 3;
    grid-column: 2;
}

.course-item-maximized-slide-mobile .course-item-button-next {
    text-align: center;
    grid-row: 3;
    grid-column: 3;
}

/* Landscape */

body[orientation="landscape"] .course-item-maximized-slide-mobile {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto 1fr;
}

body[orientation="landscape"] .course-item-maximized-slide-mobile .course-item-slide-header {
    display: none !important;
}

body[orientation="landscape"] .course-item-maximized-slide-mobile .course-item-slide-main {
    grid-row: 1;
    grid-column: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

body[orientation="landscape"] .course-item-maximized-slide-mobile .course-item-button-prev {
    grid-column: 1;
    grid-row: 2;
}

body[orientation="landscape"] .course-item-maximized-slide-mobile .course-button-sidebar {
    justify-self: center;
    align-self: center;
    grid-column: 1;
    grid-row: 3;
}

body[orientation="landscape"] .course-item-maximized-slide-mobile .course-item-button-next {
    grid-column: 3;
    grid-row: 2;
}

/* Courses/CourseItem/Mobile/Video/CourseItemMaximizedVideoMobile.css */

.course-item-maximized-video-mobile {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
}

body[device="Tablet"][orientation="portrait"] .course-item-maximized-video-mobile {
    grid-template-columns: 1fr 150px 1fr;
}

.course-item-maximized-video-mobile .course-item-video-header {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
    width: 100%;
}

.course-item-maximized-video-mobile .course-item-video-main {
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 4;
}

.course-item-maximized-video-mobile .course-item-video-main .player {
    background-color: white !important;
}

.course-item-maximized-video-mobile .course-item-button-prev {
    text-align: center;
    grid-row: 3;
    grid-column: 1;
}

.course-item-maximized-video-mobile .course-button-sidebar {
    text-align: center;
    grid-row: 3;
    grid-column: 2;
}

.course-item-maximized-video-mobile .course-item-button-next {
    text-align: center;
    grid-row: 3;
    grid-column: 3;
}

/* Landscape */

body[orientation="landscape"] .course-item-maximized-video-mobile {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto 1fr;
}

body[orientation="landscape"] .course-item-maximized-video-mobile .course-item-video-header {
    display: none !important;
}

body[orientation="landscape"] .course-item-maximized-video-mobile .course-item-video-main {
    grid-row: 1;
    grid-column: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

body[orientation="landscape"] .course-item-maximized-video-mobile .course-item-button-prev {
    grid-column: 1;
    grid-row: 2;
}

body[orientation="landscape"] .course-item-maximized-video-mobile .course-button-sidebar {
    justify-self: center;
    align-self: center;
    grid-column: 1;
    grid-row: 3;
}

body[orientation="landscape"] .course-item-maximized-video-mobile .course-item-button-next {
    grid-column: 3;
    grid-row: 2;
}

/* Courses/CourseItem/Mobile/pptx/CourseItemMaximizedpptxMobile.css */

.course-item-maximized-pptx-mobile {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
}

body[device="Tablet"][orientation="portrait"] .course-item-maximized-pptx-mobile {
    grid-template-columns: 1fr 150px 1fr;
}

.course-item-maximized-pptx-mobile .course-item-pptx-header {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
    width: 100%;
}

.course-item-maximized-pptx-mobile .course-item-pptx-main {
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 4;
    overflow: hidden;
}

.course-item-maximized-pptx-mobile .course-item-button-prev {
    text-align: center;
    grid-row: 3;
    grid-column: 1;
}

.course-item-maximized-pptx-mobile .course-button-sidebar {
    text-align: center;
    grid-row: 3;
    grid-column: 2;
}

.course-item-maximized-pptx-mobile .course-item-button-next {
    text-align: center;
    grid-row: 3;
    grid-column: 3;
}

/* Landscape */

body[orientation="landscape"] .course-item-maximized-pptx-mobile {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto 1fr;
}

body[orientation="landscape"] .course-item-maximized-pptx-mobile .course-item-pptx-header {
    display: none !important;
}

body[orientation="landscape"] .course-item-maximized-pptx-mobile .course-item-pptx-main {
    grid-row: 1;
    grid-column: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

body[orientation="landscape"] .course-item-maximized-pptx-mobile .course-item-button-prev {
    grid-column: 1;
    grid-row: 2;
}

body[orientation="landscape"] .course-item-maximized-pptx-mobile .course-button-sidebar {
    justify-self: center;
    align-self: center;
    grid-column: 1;
    grid-row: 3;
}

body[orientation="landscape"] .course-item-maximized-pptx-mobile .course-item-button-next {
    grid-column: 3;
    grid-row: 2;
}

/* Courses/CourseItemQuestion/CourseItemQuestion.css */

.course-item-question .course-item-question-button-toggle-expand {
    transition: 0.4s transform;
}

.course-item-question.active .course-item-question-button-toggle-expand {
    transform: rotateZ(180deg);
}

/* Courses/CourseLesson/Mobile/CourseLessonMinimizedMobile.css */

.course-lesson-minimized-mobile {
    border-bottom: var(--base-padding) solid white;
}

.course-lesson-minimized-mobile .course-lesson-header {
}

.course-lesson-minimized-mobile .course-lesson-header .course-lesson-name {
}

.course-lesson-minimized-mobile .course-lesson-content {}

/* Courses/CourseUser/CourseUser.css */



/* Courses/css/Course-Realisation.css */

.Course-Begin-Work{
    padding: 10px 20px;
}

.course-view .course-view-content .course-navigation{
    box-shadow: none !important;
    
    border-right: 1px solid lightgrey;

    width: 100%;
    
    overflow: hidden;
}

.course-view .course-view-content .course-content{    
    /*border: 1px solid lightgrey;*/
}

.course-view .course-view-content .course-footer{
    background-color:rgba(168,168,169,0.3);
    color: black;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}

.course-view .course-view-content .course-footer .course-footer-right {
    text-align: center;
}

#course-coutdown-timer{
    display: inline;
}

.course-lesson-item{
    width: 70%;
    margin: 0 auto;
    line-height: 0;
    padding: 10px 0px;
}
.course-lesson-item img{
    box-shadow: none;
}

.course-lesson-active{
    border: 2px solid rgb(110,167,50);
}

.course-view .icon-arrows-alt-h{
    font-size: 14px;
}

.course-buttons {
    bottom: 20px; 
    right: 20px;
}

.course-buttons .course-button {
    line-height: 40px;
    font-size: 20px;
}

.course-buttons i{
    color:  rgb(0,163,211);
}
.course-buttons i:hover{
    color:  rgba(0,163,211,0.8);
}

/* Courses/css/Course.second.menu.css */

.CourseSecondMenu {
    color: rgb(110, 167, 50);
}

.CourseSecondmenItems {
    width: 50%;
}

.course-filter-competence {
    width: 200px;
}

.course-filter-competence-content {
    width: 200px;
}

/* Courses/css/CourseItem.css */

.course-item-button-display { cursor: pointer; }

.course-item .course-item-border {
    transition: 0.4s border-color;
}

.course-item-selected .course-item-border {
    border-color: rgb( 110, 167, 50 ) !important;
}

.button-test{
    border: 1px solid rgb(148,77,191);
    border-radius: 5px;
    padding: 4px 14px;
    font-size: 12pt;
    color: grey;
}

.course-item-question-content .radiobox{
    color:rgb(148,77,191) ;
    font-size: 117%;
 
}

.course-item-question-content .checkbox{
    color:rgb(148,77,191) ;
    font-size: 117%;
   
}

/* 
.question-test-item{
    font-size: 14pt;
    font-weight: 400;

} */

.quiz-creator-maximized
{
    width:300px;
}

/* Courses/css/answers.css */

.answers {
    text-align: center;
}

.answer-minimized { display: inline-block;
    vertical-align: top;

    padding: var(--offset-padding);

    width: 20%;
}

.answer-minimized .answer-content { background-color: var(--primary-color-light);

    padding: var(--content-padding);
}

.answer-minimized .answer-content .answer-name {
    text-align: center;

    padding: var(--content-padding);
}

.answer-minimized .answer-content .answer-description {
    text-align: justify;

    padding: var(--content-padding);
}

/* Courses/css/courseLesson.css */

.course-lesson-view {
    background: rgb( 255, 255, 255 );

    width: 100%;
    height: 100%;
}

.course-lesson-view .course-lesson-view-content {
    width: 100%;
    height: 100%;
}

.course-lesson-view .course-lesson-view-content .course-lesson-button-finish {
    cursor: pointer;

    display: inline-block;

    background-color: var(--primary-color-dark);

    position: absolute;
    top: var(--content-padding);
    right: var(--content-padding);

    padding: var(--content-padding);

    z-index: 10;
}
.course-lesson-view .course-lesson-view-content .course-lesson-button-finish:hover {
    background-color: var(--primary-color);
}

/* Courses/css/courses.css */

/* .course-d::after{
        content: '';
        display: block;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translate( 0% , 0% );
        
        border-width: 15px;
        border-color: transparent;
        border-style: solid;

        border-top: 25px solid rgb(110,167,50);
}  */

.course-button-open {
    cursor: pointer;
}

.course-arrow {
    position: relative;
    border: 2px solid rgb(110, 167, 50);
}

.course-arrow::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 100%);
    border-width: 15px;
    border-color: transparent;
    border-style: solid;
    border-top: 25px solid rgb(110, 167, 50);
}

/*  Utility */

.course-button-display-maximized {
    cursor: pointer;
}

.course-edit {
    cursor: pointer;
}

.course-button-add-lesson {
    min-width: 200px;
    max-width: 200px;
}

.course-button {
    display: inline-block;
    cursor: pointer;
    padding: 0px var(--content-padding);
}

.course-button:hover {
    color: var(--secondary-color);
}

/*  Label   */

.course-label:not(.team-page-mobile-button-display-course-maximized) {
    padding: var(--content-padding);
    width: 100%;
}

.course-label .course-label-content {
    box-shadow: 0px 0px 10px lightgrey;
    font-size: 16px;
    padding: var(--content-padding);
    position: relative;
    overflow: hidden;
}

/*  Minimized   */

.lesson.course-lesson-content {
    width: 100%;
    height: 100%;
}

/*  View  */

body:not([mobile="true"]) .course-view {
    padding: 20px;
    width: 100%;
    height: 100%;
}

.course-view .course-view-content {
    box-shadow: 0px 0px 20px lightgrey;
    width: 100%;
    height: 100%;
}

.course-view .course-view-navigation {
    border-right: 1px solid rgb(239, 239, 239);
    width: 300px;
    height: 100%;
}

.course-view .course-view-content .course-view-main {
    background: rgb(255, 255, 255);
}

.course-view .course-view-content .course-view-main-content {
    position: relative;
}

.course-maximized .course-resize {
    border-right: 1px solid rgba(0, 0, 0, 0.125);
    position: relative;
    width: 0px;
    height: 100%;
    z-index: 10;
}

.course-maximized[drag="true"] {
    cursor: col-resize !important;
}

.course-maximized[drag="true"] .course-navigation {
    cursor: col-resize !important;
}

.course-maximized[drag="true"] .course-resize {
    cursor: col-resize !important;
}

.course-maximized[drag="true"] .course-main {
    cursor: col-resize !important;
}

.course-maximized .course-resize .course-resize-content {
    cursor: col-resize;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 4px;
    height: 100%;
}

.course-view.course-autoplay .course-view-button-autoplay {
    color: orange !important;
}

.course-view.course-autoplay .course-item-button-prev, .course-view.course-autoplay .course-item-button-next {
    display: none;
}

.course-view .course-view-content .course-footer {
    background-color: var(--third-color-light);
    color: var(--primary-color);
    display: flex;
    line-height: 50px;
    position: relative;
    padding: 0px var(--content-padding);
    width: 100%;
    height: 50px;
    z-index: 10;
}

.course-view .course-view-content .course-footer .course-footer-left {
    text-align: left;
    width: calc(100% / 3);
}

.course-view .course-view-content .course-footer .course-footer-center {
    text-align: center;
    width: calc(100% / 3);
}

.course-view .course-view-content .course-footer .course-footer-right {
    text-align: right;
    width: calc(100% / 3);
}

.course-view .course-view-content .course-navigation {
    background-color: var(--primary-color-light);
    box-shadow: var(--shadow);
    display: inline-block;
    vertical-align: top;
    position: relative;
    height: 100%;
    overflow-x: hidden;
    transition: 0.4s width;
    z-index: 1;
}

.course-view.course-view-fullscreen .course-view-content .course-navigation {
    width: 0px;
}

.course-view .course-view-content .course-navigation .course-navigation-content {
    height: 100%;
    overflow: hidden;
}

.course-view .course-view-content .course-navigation .course-lesson.course-lesson-current {
    background-color: var(--primary-color-dark);
}

.course-view .course-view-content .course-content {
    background-color: var(--primary-color-light);
    display: inline-block;
    vertical-align: top;
    /*width: calc( 100% - 400px );*/
    height: 100%;
    overflow-y: auto;
    transition: 0.4s width;
}

.course-view.course-view-fullscreen .course-view-content .course-content {
    width: 100%;
}

.course-item .item-layer {
    position: absolute;
}

.item-layer .item-layer-content {
    display: block;
    width: 100%;
    height: 100%;
}

.item-layer .item-layer-content.item-layer-image {
    height: auto !important;
}

.slide {
    width: 100%;
    height: 100%;
}

.slide .slide-content {
    --scale: 1;
    position: relative;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(var(--scale));
    transition: 0.25s transform;
}

/*  Responsive  */

.course-actions {
    text-align: center;
}

.bg-orange {
    background-color: goldenrod;
    color: white;
}

.bg-red {
    background-color: crimson;
    color: white;
}

.bg-green {
    background-color: rgb(110, 167, 50);
    color: white;
}

.category-course-home {
    /*padding: 0 0 0 36px !important;*/
    color: rgb(168, 168, 169);
    height: 100%;
}

.added-course {
    display: inline;
}

.course-category-item {
    display: inline;
}

.course-maximized-basic {
    margin-top: 20px;
    padding: var(--content-padding);
    /* height: 30vh; */
}

.course-maximized-basic .course-maximized-content {
    background-color: white;
    box-shadow: 0 0 10px gray;
    position: relative;
    font-size: 11pt;
    height: 100%;
}

.course-maximized .course-maximized-content {
    background-color: white;
    box-shadow: 0 0 10px gray;
    position: relative;
    height: 100%;
}

.course-maximized h1 {
    font-size: 40px;
}

.course-maximized h2 {
    color: rgb(168, 168, 169);
    font-size: 22px;
}

.course-preview {
    padding-bottom: 0px;
    width: max-content;
    display: block;
    border: 1px solid transparent;
}

/* .course-preview a{
    width: max-content; 
    margin-right: 50px; 
    display: block;
    border: 1px solid transparent;
} */

/* .course-detail a:hover, .course-preview a:hover{
    border-bottom: 1px solid rgb(220,146,119);
} */

/* .course-detail a{
    width: max-content;  
    display: block;
    border: 1px solid transparent;
} */

.course-minimized .course-detail:hover, .course-preview:hover {
    border-bottom: 1px solid rgb(220, 146, 119);
}

.course-minimized .course-detail {
    padding-bottom: 0px;
    width: max-content;
    display: block;
    border: 1px solid transparent;
}

.menu-toggle {
    color: rgb(168, 168, 169);
    cursor: pointer;
    text-align: center;
    width: 50px;
}

.menu-toggle-items {}

.menu-toggle-items i {
    margin: 0 15px;
    color: rgb(168, 168, 169);
}

.color-grey {
    color: rgb(168, 168, 169);
}

.vertical-view {
    cursor: pointer;
}

.courses-content-list .label-content {
    padding: 0px 16px;
    /* box-shadow: 0 0 5px rgb(168,168,169); */
}

.label-item {
    text-align: center;
}

.courses-content-list {
    display: flex;
    flex-wrap: wrap;
    --columns: 5;
}

.course.label {
    padding: 5px 5px;
}

.course-view .course-main .course-main-navigation {
    width: 300px;
    overflow: hidden;
    transition: 0.4s width;
}

.course-view .course-main .course-main-navigation .course-main-navigation-resize {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 8px;
}

.course-view .course-main .course-main-navigation.course-main-navigation-collapsed {
    width: 64px;
}

.course-lesson-button-scroll {
    transition: 0.4s padding;
}

.course-view .course-main .course-main-navigation.course-main-navigation-collapsed .course-lesson-button-scroll {
    padding: 0px;
}

.vertical-line {
    border-left: 1px solid rgb(200, 200, 200);
    height: 50px;
    margin-right: 30px;
}

.course-maximized-description {
    text-align: justify;
    padding: 0 30px;
}

.filter-competence {
    color: rgb(110, 167, 50);
}

.CompetencesPower {
    color: white;
    background: rgb(110, 167, 50);
    border-radius: 50%;
    position: absolute;
    width: 15px;
    height: 15px;
    text-align: center;
    vertical-align: middle;
    top: 20px;
    left: 20px;
    font-size: 10px;
}

.search-competences {
    border: 1px solid rgb(110, 167, 50);
    border-radius: 5px;
    margin-left: 14px;
    margin-top: 10px;
    font-size: 15px;
}

.course-label .course-label-basic-content {
    box-shadow: 0px 0px 10px lightgrey;
    font-size: 9pt;
    padding: var(--content-padding);
    position: relative;
}

.show-competences-item {
    position: relative;
    display: inline-block;
    font-size: 14pt;
    padding: 0px 0px 0px 3px;
}

.color-competences-one {
    color: lightpink;
}

.color-competences-two {
    color: violet;
}

.color-competences-three {
    color: darkviolet;
}

.background-competences-one {
    background: lightpink;
}

.background-competences-two {
    background: violet;
}

.background-competences-three {
    background: darkviolet;
}

.padding-top-bottom-5 {
    padding: 5px 5px 5px 25px;
}

.bottom-course-view {
    background-color: rgb(240, 240, 240);
}

#chart-basic {
    font-size: 10px;
    padding-right: 40px;
}

#chart-basic-tests {
    font-size: 10px;
    padding-right: 40px;
    padding-bottom: 0px;
}

.excel-icon-basic {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background-color: white;
    border-radius: 3px;
    font-size: 12px;
    padding: 8px;
    transform: scale(0.76);
    bottom: 3.17px;
    right: 5px;
    text-align: center;
}

.excel-icon-basic:hover {
    cursor: pointer;
    background-color: rgb(240, 240, 240);
}

.excel-icon-basic>i {
    font-size: 11px;
}

@media all and (max-width: 1800px) {
    .sumary-test-title {
        font-size: 12px;
    }
}

/* 
@media all and (max-width: 1800px) {
    .sumary-test-title{
        font-size: 12px;
    }
} */

@media screen and (max-width: 2560px) {
    .course-maximized-main-content {
        font-size: 29px;
    }

    .title {
        font-size: 29px;
    }

    .details-title {
        font-size: 33px;
    }
}

@media screen and (max-width: 2240px) {
    .course-maximized-main-content {
        font-size: 21px;
    }

    .title {
        font-size: 21px;
    }

    .details-title {
        font-size: 24px;
    }
}

@media screen and (max-width: 1920px) {
    .course-maximized-main-content {
        font-size: 19px;
    }

    .title {
        font-size: 19px;
    }

    .details-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 1620px) {
    .course-maximized-main-content {
        font-size: 18px;
    }

    .title {
        font-size: 18px;
    }

    .details-title {
        font-size: 21px;
    }
}

@media screen and (max-width: 1440px) {
    .course-maximized-main-content {
        font-size: 16px;
    }

    .title {
        font-size: 16px;
    }

    .details-title {
        font-size: 19px;
    }
}

@media screen and (max-width: 1366px) {
    .course-maximized-main-content {
        font-size: 14px;
    }

    .title {
        font-size: 14px;
    }

    .details-title {
        font-size: 17px;
    }
}

@media screen and (max-width: 1280px) {
    .course-maximized-main-content {
        font-size: 13px;
    }

    .title {
        font-size: 13px;
    }

    .details-title {
        font-size: 16px;
    }
}

.course-item-question {}

.course-view .course-view-main-content .course-item.course-quiz-during[type="quiz"] .course-item-box {
    background: #ffffff;
}

.course-view .course-view-main-content .course-item .course-item-box {
    background: #ffffff;
}

/* Courses/css/lesson-contents.css */

#lesson-contents {
    text-align: center;
}

/*  Utility */

.lesson-content-edit {
    cursor: pointer;
}


/*  Label   */

.lesson-content-label { display: block;
    vertical-align: top;

    padding: var(--offset-padding);
}

.lesson-content-label .lesson-content-content { background-color: var(--primary-color-light);

    display: flex;

    padding: var(--content-padding);
}

.lesson-content-label .lesson-content-content .lesson-content-content {
    text-align: justify;

    flex-grow: 1;

    padding: var(--content-padding);
}

.lesson-content-label .lesson-content-content .lesson-content-type {
    text-align: center;

    padding: var(--content-padding);

    min-width: 200px;
}

/*  Minimized   */

.lesson-content-minimized { display: inline-block;
    vertical-align: top;

    padding: var(--offset-padding);

    width: 20%;
}

.lesson-content-minimized .lesson-content-content { background-color: var(--primary-color-light);

    padding: var(--content-padding);
}

.lesson-content-minimized .lesson-content-content .lesson-content-content {
    text-align: justify;

    padding: var(--content-padding);
}

.lesson-content-minimized .lesson-content-content .lesson-content-type {
    text-align: center;

    padding: var(--content-padding);
}

/*  Maximized   */

.lesson-content-maximized { display: block;
    vertical-align: top;

    padding: var(--offset-padding);
}

.lesson-content-maximized .lesson-content-content { background-color: var(--primary-color-light);

    padding: var(--content-padding);
}

.lesson-content-maximized .lesson-content-content .lesson-content-content {
    text-align: justify;

    padding: var(--content-padding);
}

.lesson-content-maximized .lesson-content-content .lesson-content-type {
    text-align: justify;

    padding: var(--content-padding);
}

/*  Editing */

.lesson-button-add-content {
    cursor: pointer;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    max-width: 200px;
}

.lesson-content-button-edit {
    cursor: pointer;

    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%, -50%);

    max-width: 200px;
}

.lesson-content-content-main {
    width: 100%;
    height: 100%;
}

/* Courses/css/lessons.css */

.lessons {
    text-align: center;
}

/*  Utility */

.lesson-edit {
    cursor: pointer;
}

.lesson-button-display-content {
    cursor: pointer;
}

/*  Label   */

.lesson-label {
    display: block;
    vertical-align: top;

    width: 100%;
}

.lesson-label .lesson-content {
    background-color: var(--primary-color-light);

    display: flex;
    align-items: center;

    padding: var(--button-padding);
}

.lesson-label .lesson-content .lesson-name {
    text-align: justify;

    padding: var(--button-padding);

    width: calc( 100% - 200px );
}

.lesson-label .lesson-content .lesson-buttons {
    text-align: right;

    padding: var(--button-padding);

    width: 200px;
}

/*  Minimized   */

.lesson-minimized { display: inline-block;
    vertical-align: top;

    padding: var(--content-padding);

    width: 20%;
}

.lesson-minimized .lesson-content { background-color: var(--primary-color-light);

    padding: var(--content-padding);
}

.lesson-minimized .lesson-content .lesson-name {
    text-align: center;

    padding: var(--content-padding);
}

.lesson-minimized .lesson-content .lesson-description {
    text-align: justify;

    padding: var(--content-padding);
}

.lesson-minimized .lesson-content .lesson-type {
    text-align: center;

    padding: var(--content-padding);
}

/*  Maximized   */

.lesson-maximized { display: block;
    vertical-align: top;

    padding: var(--content-padding);
}

.lesson-maximized .lesson-content { background-color: var(--primary-color-light);

    padding: var(--content-padding);
}

.lesson-maximized .lesson-content .lesson-name {
    text-align: justify;

    padding: var(--content-padding);
}

.lesson-maximized .lesson-content .lesson-description {
    text-align: justify;

    padding: var(--content-padding);
}

.lesson-maximized .lesson-content .lesson-type {
    text-align: justify;

    padding: var(--content-padding);
}

/*  Editor   */

.lesson-editor {
    width: 100%;
    height: 100%;
}

.lesson-editor .lesson-editor-navigation {
    background-color: var(--secondary-color-dark);
    color: var(--primary-color);

    display: block;

    position: sticky;
    top: 0px;

    padding: var(--content-padding);
}

.lesson-editor .lesson-editor-content {        
    display: inline-block;
    vertical-align: top;

    padding: var(--content-padding);
    
    width: 100%;
    height: 100%;

    overflow-y: auto;
}
.lesson-editor .lesson-editor-content .lesson-editor-content-main {        
    display: inline-block;
    vertical-align: top;

    padding: var(--content-padding);
    
    width: calc( 100% - 360px );
}
.lesson-editor .lesson-editor-content .lesson-editor-content-sidebar {        
    display: inline-block;
    vertical-align: top;

    padding: var(--content-padding);
    
    width: 360px;
}

.lesson-editor .lesson-editor-content .lesson-editor-content-sidebar .lesson-editor-image {
    display: block;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    padding-top: 75%;
    width: 100%;
}

.lesson-editor .lesson-editor-content .lesson-editor-content-sidebar * {
    display: block;

    width: 100%;
}

/*  Course  */

.course-lesson-navigation {
    
}
.course-lesson-navigation .course-lesson-navigation-content {
    border: 1px solid rgb( 239, 239, 239 );
    padding-top: calc( 100% / 16 * 9 );
}
.course-lesson-navigation.course-lesson-navigation-current .course-lesson-navigation-content {
    border: 2px solid rgb( 110, 167, 50 );
}

.course-lesson-navigation.course-lesson-waiting { color: rgba(0, 0, 0, 0.5); }
.course-lesson-navigation.course-lesson-during { color: rgb(255, 127, 0);
    cursor: pointer;
}
.course-lesson-navigation.course-lesson-done { color: rgb(0, 127, 0);
    cursor: pointer;
}
.course-lesson-navigation.course-lesson-disabled { opacity: 0.5; }

.lesson-course-content {
    position: relative;

    padding: var(--content-padding);

    width: 100%;
    height: 100%;
}

.lesson-course-content .lesson-name {
    text-align: center;

    padding: var(--content-padding);
}

.lesson-course-content .lesson-content {
    text-align: justify;

    padding: var(--content-padding);
}

.course-lesson-content .course-lesson-button-finish {
    cursor: pointer;
    position: absolute;

    border-radius: var(--content-padding);

    background-color: var(--primary-color);
    
    text-align: center;
    
    padding: var(--button-padding);

    bottom: calc( var(--content-padding) * 4 );
    right: calc( var(--content-padding) * 4 );
}

.lesson-content {
    width: 100%;
    height: 100%;
}

.lesson-actions {
    text-align: center;
}

/* Courses/css/questions.css */

.questions {
    text-align: center;
}

.question-minimized { display: inline-block;
    vertical-align: top;

    padding: var(--offset-padding);

    width: 20%;
}

.question-minimized .question-content { background-color: var(--primary-color-light);

    padding: var(--content-padding);
}

.question-minimized .question-content .question-name {
    text-align: center;

    padding: var(--content-padding);
}

.question-minimized .question-content .question-description {
    text-align: justify;

    padding: var(--content-padding);
}

/*  Label   */

.test-label {
    display: block;
    vertical-align: top;

    width: 100%;
}

.test-label .test-content {
    background-color: var(--primary-color-light);

    display: flex;
    align-items: center;

    padding: var(--button-padding);
}

.test-label .test-content .test-name {
    text-align: justify;

    padding: var(--button-padding);

    width: calc( 100% - 200px );
}

.test-label .test-content .test-buttons {
    text-align: right;

    padding: var(--button-padding);

    width: 200px;
}

/* Courses/css/tests.css */

c.tests {
    text-align: center;
}

.test-minimized {
    display: inline-block;
    vertical-align: top;
    padding: var(--offset-padding);
    width: 20%;
}

.test-minimized .test-content {
    background-color: var(--primary-color-light);
    padding: var(--content-padding);
}

.test-minimized .test-content .test-name {
    text-align: center;
    padding: var(--content-padding);
}

.test-minimized .test-content .test-description {
    text-align: justify;
    padding: var(--content-padding);
}

/*  Editor   */

.test-editor {
    width: 100%;
    height: 100%;
}

.test-editor .test-editor-navigation {
    background-color: var(--secondary-color-dark);
    color: var(--primary-color);
    display: block;
    position: sticky;
    top: 0px;
    padding: var(--content-padding);
}

.test-editor .test-editor-content {
    display: inline-block;
    vertical-align: top;
    padding: var(--content-padding);
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.test-editor .test-editor-content .test-editor-content-main {
    display: inline-block;
    vertical-align: top;
    padding: var(--content-padding);
    width: calc( 100% - 360px);
}

.test-editor .test-editor-content .test-editor-content-sidebar {
    display: inline-block;
    vertical-align: top;
    padding: var(--content-padding);
    width: 360px;
}

.test-editor .test-editor-content .test-editor-content-sidebar .test-editor-image {
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 75%;
    width: 100%;
}

.test-editor .test-editor-content .test-editor-content-sidebar * {
    display: block;
    width: 100%;
}

.test-final-values {
    color: indigo;
    padding-left: 20px;
    /* font-size: 16pt; */
    font-weight: bold;
}

.test-bulb-text {
    font-size: 40pt;
    color: grey;
    top: 10%;
    left: 19%;
    position: absolute;
}

.bulb-test-background {
    z-index: 0;
    width: 227px;
    top: 29%;
    left: 11%;
    position: absolute;
    opacity: 0.5;
}

.bulb-test-foreground {
    z-index: 7;
    opacity: 1;
}

.logo-grow-edu-tests {
    pointer-events: none !important;
    width: 15%;
    position: absolute;
    bottom: 0%;
    right: 1%;
}

.box-courses-tests {
    box-shadow: 0px 0px 10px lightgrey;
    width: 41%;
    min-height: 350px;
    background: rgb(255, 255, 255);
    padding: 10pt;
}

.course-item-question h2 {
    font-size: 18pt;
}

.font-size-12pt {
    font-size: 12pt;
}

/* Groups/GroupPanel.css */

.groups-panel-navigation .in,
.groups-panel-navigation .st,
.groups-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* Groups/Group/Group.panel.css */

.group-panel-maximized:not([group="0"]) .form-placeholder {
    display: none;
}
.group-panel-maximized[group="0"] .form-item {
    display: none;
}

.group-panel-maximized[status=""] .group-button-form-controller { display: block !important; }
.group-panel-maximized[status="trash"] .group-button-trash-controller { display: block !important; }
.group-panel-maximized[status="active"] .group-button-active-controller { display: block !important; }

/* Groups/Group/css/style.css */



/* HelpDesk/HelpDesk.css */

.help-desk {
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 0px;
    overflow: hidden;
    transition: 0.25s width;
    z-index: 2;
}
.help-desk.active {
    width: 450px;
}

.help-desk .help-desk-content {
    width: 450px;
}
.help-desk-button-toggle {
    cursor: pointer;
}

/* HelpDesk/HelpDesk.mobile.css */

.help-desk-mobile .help-desk-mobile-status-input {
    border: 1px solid #9fa4ac !important;
    border-radius: var(--base-padding);
}

.help-desk-mobile .help-desk-mobile-status-input .bt {
    background: none !important;
    color: #9fa4ac !important;
}

.help-desk-mobile .help-desk-mobile-status-input .bt.active {
    background: #9fa4ac !important;
    color: white !important;
}

.help-desk-mobile[status="active"] .help-desk-thread-minimized-mobile[status="done"] {
    display: none !important;
}

.help-desk-mobile[status="archive"] .help-desk-thread-minimized-mobile:not([status="done"]) {
    display: none !important;
}

/* HelpDesk/HelpDeskMessage/HelpDeskMessage.css */

.help-desk-thread-maximized .help-desk-message .help-desk-message-text {
    white-space: pre-line;
}

.help-desk-thread-maximized form[name="help-desk-message"] {
    background-color: rgb(161, 168, 176);
}

.help-desk-thread-maximized form[name="help-desk-message"] .textarea-controller {
    background-color: white;
    border-radius: var(--half-padding);
}

.help-desk-thread-maximized form[name="help-desk-message"] .st {
    background-color: white;
}

.help-desk-thread-maximized form[name="help-desk-message"] .bt {
    background-color: white;
}

.help-desk-thread-maximized .help-desk-message {
    border-top: 1px solid rgba(0, 0, 0, 0.0625);
}

.help-desk-thread-maximized .help-desk-message[mine="true"] {
    background-color: rgb(239, 239, 239);
}

/* HelpDesk/HelpDeskMessage/HelpDeskMessage.mobile.css */

.help-desk-thread-maximized-mobile form[name="help-desk-message"] .textarea-controller {
    border-radius: var(--half-padding);
}

/* HelpDesk/HelpDeskMessage/Mobile/HelpDeskMessageFormMobile.css */

form[name="HelpDeskMessageMobileForm"] {
    /* background-color: rgba(255,255,255,0.85); */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

form[name="HelpDeskMessageMobileForm"]:not(.active) {
    opacity: 0;
}

form[name="HelpDeskMessageMobileForm"] .help-desk-message-mobile-form-content {
    --x: 0%;
    --y: 0%;
    --s: 1;
    background: white;
    border-radius: var(--base-padding) var(--base-padding) 0px 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    transform: translateX(var(--x)) translateY(var(--y)) scale(var(--s));
    transition: 0.4s transform;
    overflow: hidden;
}

body[device="Smartphone"] form[name="HelpDeskMessageMobileForm"]:not(.active) .help-desk-message-mobile-form-content {
    --y: 100%;
}

body[device="Tablet"] form[name="HelpDeskMessageMobileForm"]:not(.active) .help-desk-message-mobile-form-content {
    --s: 0;
}

/* HelpDesk/HelpDeskMessage/Mobile/HelpDeskMessageMinimizedMobile.css */

.help-desk-message-minimized-mobile[type="log"] .help-desk-message-message {
    color: var(--green);
}

.help-desk-message-minimized-mobile[type="log"] .help-desk-message-content > .header.base-padding {
    display: none;
}

.help-desk-message-minimized-mobile[type="log"] .help-desk-message-user-name {
    display: none;
}

.help-desk-message-minimized-mobile[type="log"] .help-desk-message-message {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
}

.help-desk-message-minimized-mobile[type="log"] .help-desk-message-date {
    text-align: right;
    flex-grow: 1;
    width: 0%;
}

.help-desk-message-minimized-mobile[is-mine="true"] .help-desk-message-content {
    flex-direction: row-reverse;
}

.help-desk-message-minimized-mobile:not([type="log"]) .border-radius {
    background-color: #f4f4f4;
}

.help-desk-message-minimized-mobile .help-desk-message-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.help-desk-message-minimized-mobile[type="grow"] .help-desk-message-user-avatar {
    visibility: hidden;
}

.help-desk-message-minimized-mobile[type="grow"] .help-desk-message-user-name {
    display: none;
}

.help-desk-message-minimized-mobile[type="grow"] .help-desk-message-date {
    text-align: center;
    width: 100%;
}

/* HelpDesk/HelpDeskThread/HelpDeskThread.css */

/* .help-desk-thread-minimized:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.0625);
} */

.help-desk-thread-minimized {
    padding: var(--half-padding) var(--base-padding);
}

.help-desk-desktop .help-desk-thread>.help-desk-thread-content {
    background-color: white;
    color: rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.help-desk-desktop .help-desk-thread-minimized .help-desk-thread-border {
    border-left: 5px solid rgba(0, 0, 0, 0.0625);
}

.help-desk-desktop .help-desk-thread:not([status="done"]) .help-desk-thread-border {
    border-color: rgb(110, 167, 50);
}

.help-desk-desktop .help-desk-thread[type="grow.edu"][status="waiting"] .help-desk-thread-border {
    border-color: rgb(167, 50, 110);
}

.help-desk-desktop form[name="help-desk-thread"] {
    background-color: rgb(161, 168, 176);
}

.help-desk-desktop form[name="help-desk-thread"] .textarea-controller {
    background-color: white;
    border-radius: var(--half-padding);
}

.help-desk-desktop form[name="help-desk-thread"] .st {
    background-color: white;
}

.help-desk-desktop form[name="help-desk-thread"] .bt {
    background-color: white;
}

/* HelpDesk/HelpDeskThread/HelpDeskThread.mobile.css */

/* .help-desk-thread-minimized:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.0625);
} */

/* HelpDesk/HelpDeskThread/Mobile/HelpDeskThreadFormMobile.css */

form[name="HelpDeskThreadMobileForm"] {
    /* background-color: rgba(255,255,255,0.85); */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

form[name="HelpDeskThreadMobileForm"]:not(.active) {
    opacity: 0;
}

form[name="HelpDeskThreadMobileForm"] .help-desk-thread-mobile-form-content {
    --x: 0%;
    --y: 0%;
    --s: 1;
    background: white;
    border-radius: var(--base-padding) var(--base-padding) 0px 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    transform: translateX(var(--x)) translateY(var(--y)) scale(var(--s));
    transition: 0.4s transform;
    overflow: hidden;
}

body[device="Smartphone"] form[name="HelpDeskThreadMobileForm"]:not(.active) .help-desk-thread-mobile-form-content {
    --y: 100%;
}

body[device="Tablet"] form[name="HelpDeskThreadMobileForm"]:not(.active) .help-desk-thread-mobile-form-content {
    --s: 0;
}

/* HelpDesk/HelpDeskThread/Mobile/HelpDeskThreadMessageMobile.css */

.help-desk-thread-message-mobile .help-desk-thread-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.help-desk-thread-message-mobile[is-mine="true"] .help-desk-thread-content {
    flex-direction: row-reverse;
}

/* HelpDesk/HelpDeskThread/Mobile/HelpDeskThreadMinimizedMobile.css */

.help-desk-thread[status="waiting"] {
    --color: var(--done-status);
}

.help-desk-thread[status="done"] {
    --color: #ccc;
}

.help-desk-thread[type="grow.edu"] {
    --color: var(--waiting-status);
}

.help-desk-thread-minimized-mobile .help-desk-thread-content::before {
    content: '';
    display: block;
    border-left: 4px solid var(--color);
    align-self: stretch;
}

/* Home/Home.css */

.home-block {
    display: flex;
    width: 100%;
    height: 100%;
}

.home-block .home-block-content {
    margin: auto;
    padding: 5%;
    width: 2160px;
    height: 100%;
    max-width: 2160px;
    max-height: 1080px;
}

.home-block-auto {
    display: flex;
    width: 100%;
    min-height: max(50%, 450px);
    height: min-content;
    max-height: 100%;
}

.home-block-auto .home-block-content {
    margin: auto;
    padding: 0% 5%;
    width: 2160px;
    max-width: 2160px;
}

@media screen and (max-width: 2160px) {
    .home-block .home-block-content {
        width: 100%;
    }

    .home-block-auto .home-block-content {
        width: 100%;
    }
}

@media screen and (max-width: 1366px) {
    .home-block .home-block-content {
        padding: 2.5%;
    }

    .home-block-auto .home-block-content {
        padding: 0% 2.5%;
    }
}

.home-page-footer {
    background-color: #d6d6d6;
    color: black;
}

.home-page-footer .home-page-footer-content {
    margin: auto;
    max-width: 1920px;
}

/* .course-carousel {
    position: relative;
}

.course-carousel .course-maximized-preview {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 720px;
    height: 540px;
    transition: 0.25s left, 0.5s transform;
} */

.home .home-course-block {
    --color: rgb(110, 167, 50);
}

.home-course-list {
    display: flex;
    flex-wrap: wrap;
}

.home-course-list .course-minimized {
    width: calc(100% / var(--columns));
}

.home .home-webinar-block {
    --color: rgb(37, 154, 160);
}

.home-webinar-list {
    display: flex;
    /* flex-wrap: wrap; */
}

.home-webinar-list .webinar-minimized {
    width: calc(100% / var(--columns));
}

.home .home-workshop-block {
    --color: rgb(241, 173, 146);
}

.home-workshop-list {
    display: flex;
    flex-wrap: wrap;
}

.home-workshop-list .workshop-minimized {
    width: calc(100% / var(--columns));
}

body[mobile="true"] .home-page .home-page-content {
    padding-top: 60px;
    /* scroll-snap-type: y mandatory; */
}

.home-page .home-page-content {}

.home-page .home-page-content .home-section {
    scroll-snap-align: start;
}

.home-webinar-slider {}

.home-webinar-slider-content {
    overflow: hidden;
}

.home-workshop-slider {}

.home-workshop-slider-content {
    overflow: hidden;
}

.home-page-footer .textarea-controller,
.home-page-footer .select {
    --bt-color: #7f7f7f;
}
.home-page-footer .select.select-open,
.home-page-footer .select:hover {
    color: white !important;
}
.home-page-footer .bt {
    --bt-color: #7f7f7f;
    color: white !important;
}

/* Home/Home.mobile.css */

.mobile-home-page-content .course-minimized-home-preview .course-info {
    display: none !important;
}

.mobile-home-page-content .header--title {
    text-transform: lowercase !important;
}

#site-content-mobile .mobile-section-bg.news-bg {
    background: var(--brown--dark);
    top: 0px;
    left: 0px;
    height: calc( var(--giant-line-height) + var(--title-line-height) + var(--base-padding) * 4 + 32px + var(--header-line-height) * 2 + var(--base-padding) * 2 + 3px );
}

body[mobile="true"] .home-statistics-page-counter .home-statistics-page-counter-content .home-statistics-page-counter-content-expand .huge {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

body[mobile="true"] .home-statistics-page-counter .home-statistics-page-counter-content .home-statistics-page-counter-content-expand .giant {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

@media (max-width: 1080px) {

    .home-courses-page-mobile {
        flex-direction: column;
    }

    .home-courses-page-mobile>.label-content {
        width: 100%;
        height: 0%;
    }

    .home-statistics-page-counter .home-statistics-page-counter-content {
        flex-direction: column;
    }

    .home-statistics-page-counter .home-statistics-page-counter-content .label-content {
        flex-grow: inherit;
        width: 100%;
        height: auto;
    }

    .home-statistics-page-counter .home-statistics-page-counter-content .home-statistics-page-counter-content-expand {
        flex-grow: 1;
        height: 0%;
    }

    .home-block .home-block-content {
        margin: 0px !important;
        max-height: initial !important;
    }

    .home-mobile {
        display: flex;
        flex-direction: column;
    }

    .home-mobile-2 {
        height: 200% !important;
        max-height: initial !important;
    }

    .home-mobile .home-mobile-content {
        padding: 0px !important;
        margin: 0px !important;
        flex-grow: 1;
        width: 100%;
        height: 0%;
    }

    .home-mobile-clear {
        display: block !important;
    }

    .article-minimized>.article-content {
        padding-right: calc(50% - 15px + var(--base-padding)) !important;
    }

    .article-minimized .article-content .article-image {
        right: -12px;
        top: 50%;
        padding-top: 0;
        height: 80%;
        width: 50%;
        transform: translateY(-50%);
    }

    .ranking-user-points {
        width: 75px !important;
    }

    .home-page-footer .home-page-footer-content {
        flex-direction: column;
    }

    .home-page-footer .bottom-right {
        width: 30%;
        height: 100%;
    }

    .home-page-footer .bottom-right img {
        display: none;
    }

    .mobile-fill-width {
        width: 100%;
    }

    .mobile-height-auto {
        height: auto !important;
    }

    .mobile-white-space-normal {
        white-space: normal !important;
    }

    .home-workshops-page-content .image-slider .image-slider-main .image-slider-main-content {
        padding-top: 0;
    }

    .home-block-auto {
        height: auto;
        min-height: auto;
    }

    .mobile-position-static {
        position: static;
    }

    .mobile-transform-none {
        transform: none;
    }

    .course .course-overlay {
        opacity: 1;
    }

    .home-mobile-section {
        margin-bottom: 24px;
    }

}

/* MainMenu/MainMenu.css */

.main-menu {
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur(8px);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.4s opacity;
    z-index: 100;
}

.main-menu:not([open="true"]) {
    display: none !important;
}

.main-menu:not(.active) {
    pointer-events: none !important;
    opacity: 0 !important;
}

.main-menu .main-menu-content {
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body .main-menu .main-menu-top {
    background-color: white;
    border-bottom: 1px solid #ccc;
    color: black;
    z-index: 10;
    width: 100%;
    transition: 0.4s transform;
}

body .main-menu .main-menu-top .main-menu-top-view {
    opacity: 1;
    z-index: 10;
    transition: 0.4s opacity;
}

body .main-menu .main-menu-top .main-menu-top-view:not(:first-child) {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

body .main-menu .main-menu-middle {
    flex-grow: 1;
    width: 100%;
    height: 0%;
    overflow-y: auto;
}

body .main-menu .main-menu-bottom {
    background-color: white;
    color: black;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity, 0.4s transform;
    z-index: 100;
}

body .main-menu[bottom-view=""] .main-menu-bottom {
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(100%) !important;
}

body .main-menu .main-menu-bottom .main-menu-bottom-view {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
    pointer-events: none;
    opacity: 0;
}

body .main-menu[bottom-view="Settings"] .main-menu-bottom .main-menu-bottom-view[view="Settings"] {
    opacity: 1;
    pointer-events: all !important;
    z-index: 10;
}

body .main-menu[bottom-view="Notifications"] .main-menu-bottom .main-menu-bottom-view[view="Notifications"] {
    opacity: 1;
    pointer-events: all !important;
    z-index: 10;
}

body .main-menu[bottom-view="Events"] .main-menu-bottom .main-menu-bottom-view[view="Events"] {
    opacity: 1;
    pointer-events: all !important;
    z-index: 10;
}

body .main-menu[bottom-view="HelpDesk"] .main-menu-bottom .main-menu-bottom-view[view="HelpDesk"] {
    opacity: 1;
    pointer-events: all !important;
    z-index: 10;
}

.main-menu .main-menu-header .main-menu-header-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.main-menu .main-menu-header .main-menu-header-footer {
    display: flex;
    align-items: center;
    width: 100%;
}

.main-menu .main-menu-header .main-menu-header-footer .button:not(:last-child) {
    border-right: 1px solid #7f7f7f;
}

.main-menu .main-menu-spacer {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    height: 0%;
}

.main-menu .main-menu-content .main-menu-content-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.main-menu .main-menu-content .main-menu-view {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

.main-menu .main-menu-content .main-menu-view.active {
    z-index: 10;
}

.main-menu .main-menu-content .main-menu-view:not(.active) {
    pointer-events: none !important;
    opacity: 0 !important;
}

.main-menu .main-menu-footer {
    background-color: white;
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: 0.4s transform;
}

.main-menu .main-menu-footer .main-menu-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.main-menu .main-menu-view-button {
    color: #969ea7;
    transition: 0.25s transform, 0.25s color;
}

.main-menu .main-menu-view-button.active {
    color: var(--green); 
}

.main-menu .main-menu-view-button[menu-view="Notifications"].active {
    color: #ff8c00;
}

.main-menu .main-menu-view-button[menu-view="Events"].active {
    color: #000000;
}

.main-menu .main-menu-view-button[menu-view="HelpDesk"] .icon::before { transition: 0.25s color; }
.main-menu .main-menu-view-button[menu-view="HelpDesk"] .icon::after { transition: 0.25s color; }
.main-menu .main-menu-view-button[menu-view="HelpDesk"] .icon>div::before { transition: 0.25s color; }

.main-menu .main-menu-view-button[menu-view="HelpDesk"]:not(.active) .icon::before { color: #969ea7 !important; }
.main-menu .main-menu-view-button[menu-view="HelpDesk"]:not(.active) .icon::after { color: #969ea7 !important; }
.main-menu .main-menu-view-button[menu-view="HelpDesk"]:not(.active) .icon>div::before { color: #969ea7 !important; }

/* MainMenu/MainMenu.events.css */

.main-menu .events {
    height: 100%
}

.main-menu .events-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column
}

.main-menu .events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-menu .events-header .events-header-button {
    flex-grow: 1;
    transition: .3s;
    -webkit-transition: .3s;
    text-align: center;
    font-size: var(--sub-header-font-size);
}

.main-menu .events-mobile:not([content="reminds"]) .events-header .events-header-button[content="coming"] {
    background: var(--grey--light--alpha);
    pointer-events: none
}

.main-menu .events-mobile[content="reminds"] .events-header .events-header-button[content="reminds"] {
    background: var(--grey--light--alpha);
    pointer-events: none
}

.main-menu .events span.lack {
    font-size: var(--sub-title-font-size);
    font-style: italic;
    color: rgba(0, 0, 0, 0.75)
}

.main-menu .events .content-header {
    position: relative;
    margin-bottom: var(--mobile-padding-v)
}

.main-menu .events .content-header .accordion, .main-menu .events .content-header .accordion-item {
    font-size: var(--sub-header-font-size);
    padding: var(--mobile-padding-v) 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.main-menu .events .content-header .accordion.active {
    transition: .2s .1s;
    -webkit-transition: .2s .1s
}

.main-menu .events .content-header .accordion.active i::before {
    content: '\0056'
}

.main-menu .events .content-header .accordion-wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    overflow: hidden;
    max-height: 0px;
    transition: .3s;
    -webkit-transition: .3s;
    pointer-events: none;
    z-index: 5
}

.main-menu .events-content-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1
}

.main-menu .events-content {
    background-color: transparent !important;
    box-shadow: none !important;
    display: none;
    flex-direction: column;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    pointer-events: none
}

.main-menu .events-mobile:not([value="reminds"]) .events-view[value="reminds"] {
    display: none;
}

.main-menu .events-mobile:not([value="coming"]) .events-view[value="coming"] {
    display: none;
}

.main-menu .events-content.reminds .content-header .title {
    flex-grow: 1;
    font-size: var(--sub-header-font-size) !important;
    line-height: normal !important;
    color: black
}

.main-menu .events-content.reminds .content-header .number {
    margin-right: var(--margin-default)
}

.main-menu .events .reminds-content {
    position: relative;
    flex-grow: 1;
    overflow-y: auto
}

.main-menu .events .reminds-content .reminds-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    overflow-y: auto
}

.main-menu .events .reminds-content .reminds-wrapper.active {
    pointer-events: all;
    opacity: 1
}

/* MainMenu/MainMenu.tablet.css */

/* Portrait */

body[device="Tablet"][orientation="portrait"] .main-menu {
    display: flex;
    align-items: center;
    justify-content: center;
}

body[device="Tablet"][orientation="portrait"] .main-menu .main-menu-content {
    border-radius: var(--base-padding);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    max-width: 450px;
    max-height: 720px;
}

/* Landscape */

body[device="Tablet"][orientation="landscape"] .main-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

body[device="Tablet"][orientation="landscape"] .main-menu .main-menu-content {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    max-width: 450px;
    height: 100%;
}

/* Materials/Materials.page.mobile.css */

.materials-mobile {
  display: flex;
  flex-direction: column;
}

.materials-page-mobile .material-section-name {
  word-break: break-word;
}

.materials-mobile .material-section {
  flex-shrink: 0;
  width: 35%;
}

.materials-mobile .background {
  background: url(https://resources.growbp.pl/grow.edu/Folder.png) left center/contain no-repeat;
  width: 100%;
  height: auto;
  padding-top: calc(100% / 16 * 9);
}

.materials-mobile .scroll-grid-materials {
  flex-grow: 1;
}

.materials-mobile[view="Grid"] .scroll-grid-materials,
.materials-mobile[view="Grid"] .scroll-grid-header-materials {
  display: grid;
  grid-template-columns: minmax(60px, auto) 1fr minmax(60px, auto) minmax(120px, auto);
}

.materials-mobile:not([view="Grid"]) .scroll-grid-header-materials {
  display: grid;
  grid-template-columns: minmax(60px, auto) 1fr minmax(60px, auto) minmax(120px, auto);
  place-items: center;
}

.materials-mobile .scroll-view-content {
  display: block !important;
  flex-grow: 1;
  height: 0%;
  position: relative;
}

.materials-mobile .scroll-view-content .loading-atom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.materials-mobile .grid-header {
  text-align: center;
}

.materials-page-mobile .material-files-bottom {
  padding: 16px 8px;
  --direction: x;
}

.materials-page-mobile .material-section-mobile-button {
  flex-shrink: 0;
  width: calc(100% / 4);
}

.materials-mobile[view="Grid"] .materials-mobile-content {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.materials-mobile[view="Grid"] .material .material-icon {
  font-size: var(--sup-huge-font-size);
  padding-bottom: 12px;
}

.materials-mobile[view="Grid"] .material .name {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.materials-mobile[view="Grid"] .material {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  padding-bottom: 8px;
}

.materials-mobile[view="Grid"] .scroll-grid-materials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  grid-auto-rows: max-content;
  grid-gap: 32px 8px;
}

.materials-mobile[view="Grid"] .material .size {
  display: none !important;
}

.materials-mobile[view="Grid"] .material .date {
  display: none !important;
}

.materials-mobile[view=List] .material,
.materials-mobile[view=List] .scroll-grid-header-materials {
  padding-bottom: 4px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(40px, auto) 1fr minmax(60px, auto) minmax(120px, auto);
  place-items: center;
}

.materials-mobile[view=List] .material {
  border-bottom: 1px solid hsla(0, 0%, 0%, .15);
}

.materials-mobile[view=List] .material .material-icon {
  place-self: center start;
  font-size: var(--sub-header-font-size);
}

.materials-mobile[view=List] .material-icon {
  place-self: center start;
}

.materials-mobile[view=List] .material .name {
  place-self: center start;
}

.materials-mobile[view=List] .material .size,
.materials-mobile[view=List] .material .date {
  font-size: calc(var(--paragraph-font-size) - 1px);
}

.materials-mobile:not([view=List]) .scroll-grid-header-materials {
  display: none;
}

body[device="Smartphone"] .materials-page-mobile .material-section-mobile-button {
  width: calc(100% / 3);
}

body[device="Smartphone"][device-size="Small"] .materials-page-mobile .material-section-mobile-button {
  width: calc(100% / 2);
}

@media screen and (max-width: 400px) {
  .materials-mobile[view="Grid"] .scroll-grid-materials {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  }

  .materials-mobile[view=List] .material {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 480px) {

  .materials-mobile[view=List] .material,
  .materials-mobile[view=List] .scroll-grid-header-materials {
    padding-bottom: 4px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: minmax(40px, auto) 1fr minmax(30%, auto) minmax(120px, auto);
    place-items: center;
  }
}

@media screen and (min-height: 900px) {

  .materials-mobile[view=List] .material,
  .materials-mobile[view=List] .scroll-grid-header-materials {
    margin-bottom: 32px;
  }
}

body[orientation="landscape"] .materials-page-mobile .material-section-mobile-button {
  width: 100%;
  padding-bottom: 12px;
}

@media screen and (orientation: landscape) {
  .materials-page-mobile .material-files-bottom {
    --direction: y;
    order: -1;
    flex-direction: column !important;
    padding-top: 80px;
    width: 25%;
    flex-shrink: 0;
  }

  .materials-page-mobile {
    flex-direction: row !important;
  }

  .materials-page-mobile .material-column-change {
    height: 100%;
    flex-direction: column;
  }
}

@media (min-width: 500px) and (min-height) {
  #body[orientation="portrait"] .materials-mobile[view="Grid"] .scroll-grid-materials {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  }

  #body[orientation="portrait"] .materials-mobile[view="Grid"] .material .material-icon {
    font-size: var(--sub-giant-font-size);
    line-height: var(--sub-giant-line-height);
  }

  #body[orientation="portrait"] .materials-mobile[view="Grid"] .material .name {
    font-size: var(--sub-title-font-size);
    line-height: var(--sub-title-line-height);
  }

  #body[orientation="portrait"] .materials-mobile[view=List] .material .material-icon {
    font-size: var(sup-header-font-size);
    line-height: var(sup-header-line-height);
  }

  #body[orientation="portrait"] .materials-mobile[view=List] .material .size,
  #body[orientation="portrait"] .materials-mobile[view=List] .material .date {
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
  }

  #body[orientation="portrait"] .materials-mobile[view="List"] .material .name {
    font-size: var(--sup-title-font-size);
    line-height: var(--sup-title-line-height);
  }
}

/* Materials/MaterialsPage.css */

.materials-page {
    background-color: #ffffff;
    background-image: radial-gradient(at top left, #e9dccd, #e9dccd69);
    color: black;
}

.materials-page .materials-page-content {
    
}

/* Materials/Material/Material.css */

.material .material-button-download {
    transition: 0.4s opacity;
}

.material .material-content:not(:hover) .material-button-download {
    opacity: 0;
}

/*
    Minimized
*/

.material-minimized-list:not(:last-child) .material-content {
    border-bottom: 1px solid rgba(0, 0, 0, 0.0625);
}

.material-maximized {
    display: block;
}

.material-maximized .material-content {
    display: block;
}

.material-maximized .material-description {
    opacity: 0.5;
}

/* Materials/MeterialSection/MaterialSection.css */

.material-section-maximized .material-section-content {
    background-color: rgb(255, 255, 255);
    color: rgb(63, 63, 63);
}

.material-section-maximized .material-list-content {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 1024px) {
    .material-section-list-content.scroll-x.row::-webkit-scrollbar {
        height: 2px;
    }
    .material-section-list-content.scroll-x.row::-webkit-scrollbar-track {
        background: transparent;
    }
    .material-section-list-content.scroll-x.row::-webkit-scrollbar-thumb {
        background: black;
    }
}

/* Materials/MeterialSection/MaterialSection.panel.css */

.material-section-panel-maximized:not([material-section="0"]) .form-placeholder {
    display: none;
}
.material-section-panel-maximized[material-section="0"] .form-item {
    display: none;
}

.material-section-panel-maximized[status=""] .material-section-button-form-controller { display: block !important; }
.material-section-panel-maximized[status="trash"] .material-section-button-trash-controller { display: block !important; }
.material-section-panel-maximized[status="sketch"] .material-section-button-sketch-controller { display: block !important; }
.material-section-panel-maximized[status="published"] .material-section-button-published-controller { display: block !important; }

.material-section-panel-maximized[status=""] .material-section-date-publish-button-save-controller { display: none !important; }

/* Player/Player.css */

.player {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    --progress: 0;
    --limit: 0;
    --volume: 0.5;
    color: black;
    position: relative;
    width: 100%;
    height: 100%;
}

.player[theme="black"] {
    background-color: black;
    color: white;
}

.player video {
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

.player .player-controls {
    background-image: linear-gradient(to bottom, transparent 75%, rgb(255, 255, 255));
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

.player[theme="black"] .player-controls {
    background-image: linear-gradient(to bottom, transparent 75%, rgb(0, 0, 0));
    color: white;
}

.player:not([hover="true"]) .player-controls {
    opacity: 0;
}

.player .player-controls .player-control-toggle .icon::after {
    content: '\00BF';
}

.player[playing="true"] .player-controls .player-control-toggle .icon::after {
    content: '\0220';
}

.player .player-bar {
    background-color: #f4f4f4;
    position: relative;
    width: 100%;
    height: 8px;
}

.player .player-controls .player-buffer {
    background-color: #f4f4f4;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.player[theme="black"] .player-buffer {
    background-color: #ffffff;
}

.player .player-controls .player-buffer::before {
    display: block;
    content: '';
    background-color: rgba(110, 167, 50, 0.5);
    position: relative;
    width: calc(var(--limit) * 100%);
    height: 100%;
}

.player:not([limit="true"]) .player-controls .player-buffer {
    display: none !important;
}

.player .player-controls .player-progress {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.player .player-controls .player-progress::before {
    display: block;
    content: '';
    background-color: rgb(110, 167, 50);
    position: relative;
    width: calc(var(--progress) * 100%);
    height: 100%;
}

.player .player-controls .player-progress::after {
    display: block;
    content: '';
    background-color: rgb(110, 167, 50);
    border-radius: 16px;
    position: absolute;
    left: calc(var(--progress) * 100%);
    top: 4px;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
}

.player .player-controls .player-volume {
    background-color: #f4f4f4;
    position: relative;
    width: 100%;
    height: 8px;
}

.player[theme="black"] .player-volume {
    background-color: #ffffff;
}

.player .player-controls .player-volume::before {
    display: block;
    content: '';
    background-color: rgb(110, 167, 50);
    position: relative;
    width: calc(var(--volume) * 100%);
    height: 100%;
}

.player .player-controls .player-volume::after {
    display: block;
    content: '';
    background-color: rgb(110, 167, 50);
    border-radius: 16px;
    position: absolute;
    left: calc(var(--volume) * 100%);
    top: 4px;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
}

body[mobile="true"] .player .player-controls .player-volume-element {
    display: none !important;
}

.player .player-loading {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

.player:not([status="loading"]) .player-loading {
    opacity: 0 !important;
}

.player:not([status="controls"]) video {
    opacity: 0 !important;
}

.player:not([status="controls"]) .player-controls {
    opacity: 0 !important;
}

.player .player-error {
    background-color: black;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
}

.player:not([status="error"]) .player-error {
    opacity: 0 !important;
}

/* Presentations/Presentation/Templates/PresentationMaximized.css */

.presentation-maximized {
    position: relative;
}

.presentation-maximized .presentation-content {
    --height: 720px;
    --ratio: calc(4 / 3) !important;
    --scale: 1;
    width: calc(var(--height) * var(--ratio));
    height: var(--height);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--scale));
    transition: 0.4s transform;
}
    
.presentation-maximized .presentation-button-continue {
    transition: 0.5s opacity, 0.25s color;
    opacity: 1;
}
.presentation-maximized .presentation-button-continue:hover {
    color: rgb(110, 167, 50);
}
.presentation-maximized:not([is-waiting="true"]) .presentation-button-continue {
    pointer-events: none !important;
    opacity: 0;
}

/* Presentations/Presentation/Templates/PresentationMaximizedEditor.css */

.presentation-maximized-editor {
    position: relative;
}

.presentation-maximized-editor .presentation-content {
    --height: 720px;
    --ratio: calc(16 / 9);
    --scale: 1;
    width: calc(var(--height) * var(--ratio));
    height: var(--height);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--scale));
    transition: 0.4s transform;
}

/* Presentations/PresentationEditor/PresentationEditor.css */

.presentation-editor {
    background-color: rgb(247, 247, 247);
    color: rgb(63, 63, 63);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1;
}

.presentation-editor-header-content {
    background-color: rgb(255, 255, 255);
}

.presentation-editor-block-content {
    background-color: rgb(255, 255, 255);
}

.presentation-editor .switch-tab-box-button.active .switch-tab-box-button-content {
    background-color: rgb(255, 255, 255);
}

.presentation-editor .switch-tab-box-content {
    background-color: rgb(255, 255, 255);
}

.presentation-editor-view {
    position: relative;
}

.presentation-editor-view .presentation-editor-view-content {
    --height: 720px;
    --ratio: calc(16 / 9);
    --scale: 1 !important;
    width: calc(var(--height) * var(--ratio));
    height: var(--height);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--scale));
    transition: 0.4s transform;
}

.presentation-slide-timeline .presentation-slide-layer-timeline {
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.presentation-slide-timeline .presentation-slide-layer-timeline .presentation-slide-layer-timeline-content {
    pointer-events: none !important;
    width: 960px;
    height: 720px;
    transform-origin: 0% 0%;
    transform: scale(calc(180 / 960));
}

/* Presentations/PresentationSlide/PresentationSlide.css */

.presentation-slide.presentation-slide-minimized {
    position: relative;
}

.presentation-slide-maximized-editor {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

.presentation-slide-maximized-editor .presentation-slide-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.presentation-slide-minimized {
    --ratio: calc(4 / 3);
}

/* Tablet */
@media (min-width: 500px) and (min-height: 500px) {}

/* Presentations/PresentationSlide/Templates/PresentationSlideMaximized.css */

.presentation-slide-maximized {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.presentation-slide-maximized .presentation-slide-content {
    background-color: rgba(255, 255, 255, 0);
    --ratio: calc(3/ 4);
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Presentations/PresentationSlide/Templates/PresentationSlideMinimized.css */

.presentation-slide-minimized {
    --width: 238;

    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);

    position: relative;

    padding-top: calc(100% / var(--ratio));

    width: 100%;
    overflow: hidden;
}

.presentation-slide-minimized:not(:last-child) {
    margin-bottom: var(--base-padding);
}

.presentation-slide-minimized .presentation-slide-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) scale(calc(var(--width) / (720 * var(--ratio))));
    width: calc(720px * var(--ratio));
    height: 720px;
    overflow: hidden;
}

body[mobile="true"] .presentation-slide-minimized .presentation-slide-content {
    transform: translate(-50%, -50%) scale(calc(var(--width) / (1280 * var(--ratio)))) !important;
}

/* Presentations/PresentationSlide/Templates/PresentationSlideTimeline.css */

.presentation-slide-timeline {
    --offset-left: 0;
    --offset-top: 0;
    position: relative;
}

.presentation-slide-timeline .html-line {
    
}

/* Presentations/PresentationSlideLayer/PresentationSlideLayer.css */

.presentation-slide-layer {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0%;
    top: 0%;
}

.presentation-slide-layer .presentation-slide-layer-content {
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.presentation-slide-layer-minimized-editor {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0%;
    top: 0%;
}

.presentation-slide-layer-maximized-editor {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0%;
    top: 0%;
}

/* Presentations/PresentationSlideLayer/Templates/PresentationSlideLayerMaximized.css */

.presentation-slide-layer-maximized {
    border-color: rgba(255, 255, 255, 0);
    border-style: solid;
    border-width: 0px;
}

.presentation-slide-layer-maximized:not([type="text"]) .presentation-slide-layer-content {
    border-color: rgba(255, 255, 255, 0);
    border-style: solid;
    border-width: 0px;
    width: 100%;
    height: 100%;
}

/* Presentations/PresentationSlideLayer/Templates/PresentationSlideLayerMaximizedEditor.css */

.presentation-slide-layer-maximized-editor {
    border-color: transparent;
    border-style: solid;
    border-width: 0px;
}

.presentation-slide-layer-maximized-editor:not([type="text"]) .presentation-slide-layer-content {
    border-color: transparent;
    border-style: solid;
    border-width: 0px;
    width: 100%;
    height: 100%;
}

.presentation-slide-layer-editor-overlay {
    border: 2px solid rgba(0, 114, 180, 0.25);
    cursor: move;
    position: absolute;
    left: -8px;
    top: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    z-index: 0;
}

.presentation-slide-layer-maximized-editor[selected="selected"] .presentation-slide-layer-editor-overlay {
    border: 4px solid rgba(0, 114, 180, 0.5);
}

.presentation-slide-layer-maximized-editor:not([selected="selected"]) {
    cursor: pointer;
}

.presentation-slide-layer-maximized-editor[selected="selected"] {
    z-index: 9999 !important;
}

.presentation-slide-layer-maximized-editor:not([selected="selected"]) .presentation-slide-layer-editor-overlay {
    pointer-events: none !important;
}

.presentation-slide-layer-maximized-editor:not([selected="selected"]) .presentation-slide-layer-editor-overlay * {
    display: none;
}

.presentation-slide-layer-maximized-editor:not([selected="selected"]):hover .presentation-slide-layer-editor-overlay {
    display: block;
    pointer-events: none !important;
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize {
    background-color: rgb(0, 114, 180);
    position: absolute;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize[resize="top left"] {
    cursor: nw-resize;
    left: 0%;
    top: 0%;
    transform: translate(-75%, -75%);
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize[resize="top"] {
    cursor: ns-resize;
    left: 50%;
    top: 0%;
    transform: translate(-75%, -75%);
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize[resize="top right"] {
    cursor: ne-resize;
    right: 0%;
    top: 0%;
    transform: translate(75%, -75%);
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize[resize="left"] {
    cursor: ew-resize;
    left: 0%;
    top: 50%;
    transform: translate(-75%, -75%);
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize[resize="right"] {
    cursor: ew-resize;
    right: 0%;
    top: 50%;
    transform: translate(75%, -75%);
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize[resize="bottom left"] {
    cursor: ne-resize;
    left: 0%;
    bottom: 0%;
    transform: translate(-75%, 75%);
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize[resize="bottom"] {
    cursor: ns-resize;
    left: 50%;
    bottom: 0%;
    transform: translate(-75%, 75%);
}

.presentation-slide-layer-editor-overlay .presentation-slide-layer-editor-overlay-resize[resize="bottom right"] {
    cursor: nw-resize;
    right: 0%;
    bottom: 0%;
    transform: translate(75%, 75%);
}

/* Presentations/PresentationSlideLayer/Templates/PresentationSlideLayerMinimized.css */

.presentation-slide-layer-minimized {
    border-color: transparent;
    border-style: solid;
    border-width: 0px;
}

.presentation-slide-layer-minimized:not([type="text"]) .presentation-slide-layer-content {
    border-color: transparent;
    border-style: solid;
    border-width: 0px;
    width: 100%;
    height: 100%;
}

/* Presentations/PresentationSlideLayer/Templates/PresentationSlideLayerTimeline.css */

.presentation-slide-layer-timeline {
    position: absolute;
    left: calc((var(--left) + var(--offset-left)) * 1px);
    top: calc((var(--top) + var(--offset-top)) * 1px);
    width: 180px;
    padding-top: calc( 180px / var(--ratio) );
}

.presentation-slide-layer-timeline .presentation-slide-layer-timeline-content {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.125);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.presentation-slide-layer-timeline[move="true"] { pointer-events: none !important; }

/* Presentations/css/presentation-editor.css */

.presentation-editor .presentation-editor-presentation .presentation-editor-navigation {
    background-color: #383838;
    color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow-y: auto;
}

.presentation-editor .presentation-editor-presentation .presentation-editor-settings {
    background-color: #383838;
    color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow-y: auto;
}

.presentation-editor .presentation-editor-presentation .presentation-editor-view-content {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: calc( 100% - 600px);
    height: 100%;
}

.presentation-editor .presentation-editor-presentation .presentation-editor-view-content .presentation-editor-view {}

.slide-layer .slide-layer-controller {
    display: block;
    /*
    border: 1px solid var(--primary-color-dark);
    */
    cursor: move;
    font-size: 16px;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 100;
}

.slide-layer.slide-layer-selected {
    z-index: 100;
}

.slide-layer.slide-layer-selected .slide-layer-controller {
    border: none !important;
}

.slide-layer.slide-layer-animating .slide-layer-controller {
    display: none !important;
}

.slide-layer .slide-layer-controller .slide-layer-controller-content {
    display: none;
    border: 4px solid rgba(106, 90, 205, 0.75);
    cursor: move;
    font-size: 16px;
    position: absolute;
    left: -10px;
    top: -10px;
    right: -10px;
    bottom: -10px;
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-controller-content {
    display: block;
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize {
    background-color: rgb(124, 103, 255);
    position: absolute;
    width: 10px;
    height: 10px;
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize-left {
    cursor: e-resize;
    left: -2px;
    top: 50%;
    transform: translate(-50%, -50%);
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize-top {
    cursor: n-resize;
    left: 50%;
    top: -2px;
    transform: translate(-50%, -50%);
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize-right {
    cursor: w-resize;
    right: -2px;
    top: 50%;
    transform: translate(50%, -50%);
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize-bottom {
    cursor: s-resize;
    left: 50%;
    bottom: -2px;
    transform: translate(-50%, 50%);
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize-top-left {
    cursor: nw-resize;
    left: -2px;
    top: -2px;
    transform: translate(-50%, -50%);
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize-top-right {
    cursor: ne-resize;
    right: -2px;
    top: -2px;
    transform: translate(50%, -50%);
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize-bottom-right {
    cursor: se-resize;
    right: -2px;
    bottom: -2px;
    transform: translate(50%, 50%);
}

.slide-layer.slide-layer-selected .slide-layer-controller .slide-layer-resize-bottom-left {
    cursor: sw-resize;
    left: -2px;
    bottom: -2px;
    transform: translate(-50%, 50%);
}

.setting-box {
    border-bottom: 2px solid #222222;
}

.setting-box-header {
    cursor: pointer;
    color: #e5e5e5;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding: 4px;
}

.setting-box-content-padding {
    padding: 4px;
}

.setting-box .setting-box-icon {
    vertical-align: middle;
    line-height: calc( var(--title-size) * 2);
    font-size: calc( var(--title-size) * 0.75) !important;
}

.setting-box:not(.setting-box-expand) .setting-box-icon::before {
    content: '\f078';
}

.setting-box.setting-box-open .setting-box-icon::before {
    content: '\f077';
}

.setting-box-content {
    display: none;
}

/* Presentations/css/presentation-timeline.css */

.presentation-editor-timeline { background-color: var(--primary-color-light);

    position: relative;

    width: 100%;
    height: 100%;

    overflow: auto;
}

.presentation-editor-timeline .slide-editor-timeline { background-color: var(--primary-color);

    position: relative;

    margin: var(--offset-padding) auto;

    width: calc( 100% - var(--offset-padding) * 2 );
    height: calc( 100% - var(--offset-padding) * 2 );

    overflow: auto;
}

.presentation-editor-timeline .slide-editor-timeline .slide-layer-editor-timeline {
    background-color: var(--primary-color-dark);

    box-shadow: var(--shadow);

    position: absolute;

    min-width: 200px;
}
.presentation-editor-timeline .slide-editor-timeline .slide-layer-editor-timeline .slide-layer-name {
    cursor: grab;
}
.presentation-editor-timeline .slide-editor-timeline .slide-layer-editor-timeline[drag] .slide-layer-name {
    cursor: grabbing;
    pointer-events: none;

    z-index: 1;
}

.presentation-editor-timeline .slide-editor-timeline .slide-layer-editor-timeline .slide-layer-timeline-controller {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 10px;
}
.presentation-editor-timeline .slide-editor-timeline .slide-layer-editor-timeline .slide-layer-timeline-controller .slide-layer-timeline-controller-content {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 10px;
}

.presentation-editor-timeline .slide-editor-timeline .slide-layer-editor-timeline .slide-layer-editor-timeline-controller .slide-layer-editor-timeline-point {

    position: absolute;

    width: 16px;
    height: 16px;
    
    z-index: 10;
}
.presentation-editor-timeline .slide-editor-timeline .slide-layer-editor-timeline .slide-layer-editor-timeline-controller .slide-layer-editor-timeline-in {
    background-color: red;

    cursor: pointer;

    top: 25px;
    left: 0px;

    transform: translate( -50%, -50% );
}
.presentation-editor-timeline .slide-editor-timeline .slide-layer-editor-timeline .slide-layer-editor-timeline-controller .slide-layer-editor-timeline-out {
    top: 25px;
    right: 0px;

    transform: translate( 50%, -50% );
}

/* Presentations/css/presentation.css */

.presentations {
    text-align: center;
}

.presentation-view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.presentation-view .presentation {
    background-color: var(--primary-color-light);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50%);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.presentation-view .presentation .presentation-button {
    background-color: var(--primary-color-light);
    border-radius: 100%;
    box-shadow: var(--shadow);
    line-height: 20pt;
    font-size: 16pt;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: calc( 20pt + var(--button-padding) * 2);
    width: calc( 20pt + var(--button-padding) * 2);
}

.presentation-view .presentation .presentation-button:not([enabled]) {
    pointer-events: none;
    opacity: 0.1;
}

.presentation-view .presentation .presentation-button[enabled] {
    pointer-events: all;
    cursor: pointer;
    opacity: 1;
}

.presentation-view .presentation .presentation-button-prev-slide {
    left: var(--button-padding);
}

.presentation-view .presentation .presentation-button-next-slide {
    right: var(--button-padding);
}

.presentation-actions {
    text-align: center;
}

/* Presentations/css/slide-layer.css */

.slide-layer {
    font-size: 1em;
    line-height: 1;
    position: absolute;
    overflow: visible;
}

.slide-layer .slide-layer-content {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

.slide-layer .slide-layer-text {
    background: none;
    border: none;
    font-size: 1em;
    line-height: 1em;
    color: inherit;
    text-align: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    white-space: pre-line;
}

.slide-layer .slide-layer-image {
    background: none;
    display: block;
    text-align: inherit;
    margin: 0;
    padding: 0;
}

/* Presentations/css/slide.css */

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
}

.slide-thumbnail {
    background-color: var(--primary-color-light);
    box-shadow: var(--shadow);
    cursor: pointer;
    position: relative;
    flex-grow: 1;
    width: 100%;
}

.slide-thumbnail:not(:last-child) {
    margin-bottom: var(--content-padding);
}

/* Quiz/QuizesPanel.css */

.quizzes-panel-navigation .in,
.quizzes-panel-navigation .st,
.quizzes-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* Quiz/Quiz/Quiz.css */

.course-quiz .course-quiz-image {
    position: absolute;
    left: 0px;
    top: 15%;
    transform: translateX(-50%);
    height: 85%;
    width: auto;
}

.course-quiz .course-quiz-test-image {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 10%;
    width: auto;
}

.course-quiz .course-quiz-footer-image {
    position: absolute;
    right: calc(var(--base-padding) * 2);
    bottom: var(--base-padding);
    height: calc(7.5% - var(--base-padding) * 2);
    width: auto;
}

.course-quiz .course-quiz-content {
    position: relative;
}

.course-quiz[status="during"] .course-quiz-image {
    opacity: 0.3;
    z-index: 0;
}

.course-quiz[status="during"] .course-quiz-content {
    z-index: 1;
}

.course-quiz:not([status="during"]) .course-quiz-image {
    z-index: 1;
}

.course-quiz:not([status="during"]) .course-quiz-content {
    z-index: 0;
}

.quiz-maximized {
    position: relative;
}

.quiz-maximized .quiz-content {
    --scale: 1;
    background-color: white;
    box-shadow: 0px 0px calc(var(--base-padding) * 4) rgba(0, 0, 0, 0.25);
    border-radius: var(--base-padding);
    position: absolute;
    right: var(--base-padding);
    top: 50%;
    transform: scale(var(--scale)) translateY(-50%);
    transform-origin: 100% 0%;
    width: 960px;
    height: 720px;
    transition: 0.2s transform;
}

.quiz-button-begin {
    background-image: url('https://grow-edu.pl/Resources/CourseButtonPlay.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.quiz-maximized-mobile .quiz-button-begin {
    background-image: url('https://grow-edu.pl/Resources/CourseButtonPlay.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.quiz-maximized .checkbox,
.quiz-maximized .radiobox {
    color: #834aab;
}

.quiz-user-grade[grade="true"] {
    color: var(--green);
}

.quiz-user-grade[grade="false"] {
    color: var(--red);
}

.quiz-user-grade[grade="true"] .quiz-user-grade-name::before {
    content: 'Zaliczone';
}

.quiz-user-grade .quiz-grade-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
}

.quiz-user-grade[grade="true"] .quiz-grade-image {
    background-image: url('https://resources.growbp.pl/grow.edu/gratulation.png');
}

.quiz-user-grade[grade="false"] .quiz-grade-image {
    background-image: url('https://resources.growbp.pl/grow.edu/attention.png');
}

body[mobile="true"] .quiz-user-grade[grade="true"] .quiz-grade-image {
    background-image: url('https://grow-edu.pl/Resources/QuizPassed.png');
}

body[mobile="true"] .quiz-user-grade[grade="false"] .quiz-grade-image {
    background-image: url('https://grow-edu.pl/Resources/QuizFailed.png');
}

.quiz-user-grade[grade="false"] .quiz-user-grade-name::before {
    content: 'Niezaliczone';
}

/* Telefon */
@media (max-width: 500px) and (max-height: 1000px) {
    #body[orientation="portrait"] .course-quiz-test-image {
        display: none;
    }

    #body[orientation="portrait"] .course-quiz-image {
        display: none;
    }

    #body[orientation="portrait"] .course-quiz-footer-image {
        display: none;
    }

    #body[orientation="portrait"] .course-quiz.column-content {
        width: 100% !important;
    }

    #body[orientation="portrait"] .course-quiz.column-content .quiz-content {
        --scale: 1 !important;
        width: 95%;
        height: 95%;
        max-width: 500px;
        max-height: 850px;
        background-color: white;
        box-shadow: none;
        border-radius: 0px;
        right: unset;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #body[orientation="portrait"] .course-quiz.column-content .quiz-content .mobile-center {
        align-items: center !important;
        justify-content: center !important;
    }

    #body[orientation="portrait"] .course-quiz.column-content .quiz-content .quiz-name {
        font-size: var(--huge-font-size) !important;
        line-height: var(--huge-line-height) !important;
        height: auto !important;
        margin-bottom: 50px;
    }

    #body[orientation="portrait"] .course-quiz.column-content .quiz-content .column-5-2 .base-padding[style] {
        width: 120px !important;
        height: 120px !important;
    }

    #body[orientation="portrait"] .course-quiz.column-content .quiz-content .quiz-main-content {
        padding: 16px !important;
        background-color: white;
        box-shadow: 0px 0px calc(var(--base-padding) * 4) rgba(0, 0, 0, 0.25);
        border-radius: var(--base-padding);
        transform-origin: 100% 0%;
        transition: 0.2s transform;
        margin-bottom: 25px;

    }

    #body[orientation="portrait"] .course-quiz.column-content .quiz-content .quiz-main-content .column~.column-content {
        display: none;
    }

    #body[orientation="portrait"] .course-quiz.column-content .mobile-flex-direction {
        flex-direction: column;
        flex-grow: 1;
    }

    #body[orientation="portrait"] .course-quiz.column-content .mobile-flex-direction .mobile-flex {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    #body[orientation="portrait"] .course-quiz.column-content .mobile-flex-direction .mobile-flex .label {
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    #body[orientation="portrait"] .course-quiz.column-content .mobile-flex-direction .mobile-flex .label div {
        font-size: var(--sub-big-font-size) !important;
        line-height: var(--sub-big-line-height) !important;
        width: auto !important;
        flex-grow: unset !important;
    }

    #body[orientation="portrait"] .course-quiz.column-content .mobile-flex .label-content {
        width: auto;
    }

    #body[orientation="portrait"] .course-quiz.column-content .mobile-flex-hidden {
        display: none;
    }

    #body[orientation="portrait"] .course-quiz.column-content .quiz-question-name {
        text-align: center !important;
        width: 100% !important;
        flex-shrink: 0;
        margin-bottom: 40px;
    }

}

/* mobile landscape */
@media (max-width: 1000px) and (max-height: 500px) {

    #body[orientation="landscape"] .course-quiz .course-quiz-test-image {
        height: 13%;
    }

    #body[orientation="landscape"] .course-quiz .course-quiz-image {
        top: unset;
        bottom: 0;
        height: 80%;
    }

    #body[orientation="landscape"] .course-quiz.column-content .quiz-content {
        --scale: 1 !important;
        width: 100%;
        height: 90%;
        max-width: 800px;
        max-height: 450px;
        background-color: white;
        box-shadow: none;
        border-radius: none;
    }

    #body[orientation="landscape"] .course-quiz {
        width: 80%;
        margin-left: auto !important;
        margin-right: 25px;
    }

    #body[orientation="landscape"] .course-quiz.column-content .mobile-flex-direction .mobile-flex .label div.text-right {
        text-align: left !important;
    }

    #body[orientation="landscape"] .course-quiz.column-content .mobile-flex-direction .mobile-flex .label div.text-left {
        text-align: right !important;
    }

    #body[orientation="landscape"] .course-quiz-footer-image {
        display: none;
    }
}

/* Quiz/Quiz/Mobile/QuizMaximizedBeginMobile.css */

.quiz-maximized-begin-mobile {
    background-image: url( 'https://grow-edu.pl/Resources/BlackBoard.jpg' );
    background-size: cover;
    background-position: center;
    color: white;
    font-family: 'Tekton Pro';
}

/* Tablet */

body[device="Tablet"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content-top .header {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

body[device="Tablet"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content-top .huge {
    --font-size: var(--giant-font-size) !important;
    --font-line-height: var(--giant-line-height) !important;
}

/* Portrait */

body[orientation="portrait"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content {
    background-image: url( 'https://grow-edu.pl/Resources/BorderWhiteVertical.png' );
    background-size: 100% 100%;
    margin: calc(var(--base-padding) * 2);
}

body[orientation="portrait"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content-top {
    margin: 0px auto;
    /* max-width: 360px; */
    width: 100%;
}

body[device="Tablet"][orientation="portrait"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content {
    align-self: center;
    max-width: 540px;
    width: 100%;
}

body[device="Tablet"][orientation="portrait"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content-top .base-padding {
    padding: calc(var(--base-padding) * 2) !important;
}

/* Landscape */

body[orientation="landscape"] .quiz-maximized-begin-mobile {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 32px 1fr auto;
}

body[orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content {
    background-image: url( 'https://grow-edu.pl/Resources/BorderWhite.png' );
    background-size: 100% 100%;
    padding: calc(var(--base-padding) * 2);
    margin: var(--base-padding);
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content {
    display: flex;
    align-items: center;
    width: 100%;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-header .quiz-name-controller {
    height: calc(var(--font-line-height) * 1) !important;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-header .quiz-name-controller .quiz-name {
    white-space: nowrap !important;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-header .huge {
    --font-size: var(--giant-font-size) !important;
    --font-line-height: var(--giant-line-height) !important;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content .quiz-main-content-column {
    width: 100% !important;
    height: auto !important;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content .quiz-main-content-column .quiz-main-content-spacer {
    flex-grow: 0.5;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content .quiz-main-content-column .quiz-main-content-top {
    padding: var(--base-padding) !important;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: space-between;
}

body[orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content {
    grid-row: 2;
    grid-column: 2;
    align-self: flex-end;
    justify-self: center;
    width: 100%;
    height: 100%;
    max-width: 900px;
}

body[orientation="landscape"] .quiz-maximized-begin-mobile .quiz-main-footer {
    align-self: flex-start;
    justify-self: center;
    grid-row: 3;
    grid-column: 2;
}

body[orientation="landscape"] .quiz-maximized-begin-mobile .quiz-maximized-begin-mobile-content .quiz-main-content-column {
    flex-direction: row;
    align-items: center;
}

body[device="Smartphone"][device-size="Large"] .quiz-maximized-begin-mobile .header {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

body[device="Smartphone"][device-size="Large"] .quiz-maximized-begin-mobile .huge {
    --font-size: var(--giant-font-size) !important;
    --font-line-height: var(--giant-line-height) !important;
}

@media (max-height: 800px) {

    body[device="Smartphone"] .quiz-maximized-begin-mobile .quiz-name-controller {
        height: calc(var(--font-line-height) * 2) !important;
    }

    body[device="Smartphone"] .quiz-maximized-begin-mobile .quiz-name-controller .quiz-name {
        -webkit-line-clamp: 2 !important;
    }

}

@media (max-height: 700px) {

    body[device="Smartphone"] .quiz-maximized-begin-mobile .quiz-name-controller {
        height: calc(var(--font-line-height) * 1) !important;
    }

    body[device="Smartphone"] .quiz-maximized-begin-mobile .quiz-name-controller .quiz-name {
        -webkit-line-clamp: 1 !important;
    }

    body[device="Smartphone"] .quiz-maximized-begin-mobile .quiz-main-content-top .base-padding {
        padding: 0px var(--base-padding) !important;
    }

}

/* Quiz/Quiz/Mobile/QuizMaximizedDoneMobile.css */

.quiz-maximized-done-mobile {
    --red: #f3a2a1;
    --green: #b1eec5;
    background-image: url( 'https://grow-edu.pl/Resources/BlackBoard.jpg' );
    background-size: cover;
    background-position: center;
    color: white;
    font-family: 'Tekton Pro';
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-main-content-column {
    flex-direction: row !important;
    align-items: center !important;
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-main-content-column>div:nth-child(1) {
    order: 0;
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-main-content-column>div:nth-child(2) {
    order: 1;
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-main-content-column>div:nth-child(4) {
    order: 2;
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-main-content-column>div:nth-child(5) {
    order: 3;
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-main-content-column>div:nth-child(6) {
    order: 4;
}

body[orientation="landscape"]:not([device="Smartphone"]) .quiz-maximized-done-mobile .quiz-main-content-column>div:nth-child(3) {
    order: 5;
    flex-grow: 1;
    width: 0%;
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-button-controller>div {
    min-width: 180px;
}

.quiz-maximized-done-mobile .quiz-grade-image-controller {
    margin: 0px auto;
    width: 180px;
    height: 180px;
}

body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-grade-image-controller {
    width: 135px;
    height: 135px;
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-main-content .quiz-main-content-content {
    max-width: 630px !important;
}

body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column>div:nth-child(2) {
    padding: var(--base-padding) !important;
}

body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column>div:nth-child(2) .base-padding {
    padding: 0px var(--base-padding) !important;
}

body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column>div:nth-child(3) {
    padding: var(--base-padding) !important;
}

body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column>div:nth-child(3) .base-padding {
    padding: 0px var(--base-padding) !important;
}

/* Tablet */

body[device="Smartphone"][device-size="Large"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content .title {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

body[device="Smartphone"][device-size="Large"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content .header {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

body[device="Smartphone"][device-size="Large"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content .huge {
    --font-size: var(--giant-font-size) !important;
    --font-line-height: var(--giant-line-height) !important;
}

body[device="Tablet"] .quiz-maximized-done-mobile .title {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

body[device="Tablet"] .quiz-maximized-done-mobile .header {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

body[device="Tablet"] .quiz-maximized-done-mobile .huge {
    --font-size: var(--giant-font-size) !important;
    --font-line-height: var(--giant-line-height) !important;
}

/* Portrait */

body[orientation="portrait"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content .quiz-user-grade {
    display: flex;
    align-items: center;
    justify-content: center;
}

body[orientation="portrait"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content .quiz-user-grade .quiz-grade-image-controller {
    width: calc(var(--font-size) * 2 + var(--base-padding) * 2);
    height: calc(var(--font-size) * 2 + var(--base-padding) * 2);
}

body[device="Tablet"][orientation="portrait"] .quiz-maximized-done-mobile {
    justify-content: center;
}

body[device="Tablet"][orientation="portrait"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-top .base-padding {
    padding: calc(var(--base-padding) * 2) !important;
}

body[device="Tablet"][orientation="portrait"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-mobile-summary .quiz-mobile-summary-content .base-padding-0-1 {
    padding: var(--base-padding) calc(var(--base-padding) * 2) !important;
}

body[orientation="portrait"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content {
    background-image: url( 'https://grow-edu.pl/Resources/BorderWhiteVertical.png' );
    background-size: 100% 100%;
    margin: calc(var(--base-padding) * 2);
}

body[device="Tablet"][orientation="portrait"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content {
    align-self: center;
    max-width: 540px;
    width: 100%;
}

body[device="Tablet"][orientation="portrait"] .quiz-maximized-done-mobile .quiz-main-footer > .label {
    max-width: 540px !important;
}

body[orientation="portrait"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column > div:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
}

/* Landscape */

body[orientation="landscape"] .quiz-maximized-done-mobile {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 32px 1fr auto;
}

body[orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content {
    background-image: url( 'https://grow-edu.pl/Resources/BorderWhite.png' );
    background-size: 100% 100%;
    margin: var(--base-padding);
}

body[orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content {
    grid-row: 2;
    grid-column: 2;
    align-self: flex-end;
    justify-self: center;
    padding: calc(var(--base-padding) * 2);
    width: 100%;
    height: 100%;
    max-width: 900px;
}

body[orientation="landscape"] .quiz-maximized-done-mobile .quiz-main-footer {
    align-self: flex-start;
    justify-self: center;
    grid-row: 3;
    grid-column: 2;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-header .huge {
    --font-size: var(--giant-font-size) !important;
    --font-line-height: var(--giant-line-height) !important;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content .huge  {
    --font-size: var(--sup-giant-font-size) !important;
    --font-line-height: var(--sup-giant-line-height) !important;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-header .quiz-name-controller {
    height: calc(var(--font-line-height) * 1) !important;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-header .quiz-name-controller .quiz-name {
    white-space: nowrap !important;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column {
    display: grid !important;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column > .quiz-main-content-top {
    padding: var(--base-padding) !important;
    display: flex;
    flex-direction: row;
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 3;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column > .quiz-main-content-top > .label:nth-child(2) {
    margin-left: 16px;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column .quiz-mobile-summary {
    padding: var(--base-padding) !important;
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    height: 100%;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column .quiz-mobile-summary .quiz-mobile-summary-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column .quiz-user-grade {
    grid-row: 2;
    grid-column: 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column .quiz-user-grade .quiz-grade-image-controller {
    flex-grow: 1;
    height: 0%;
}

body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column>div:nth-child(1),
body[device="Tablet"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-main-content-column>div:nth-child(5) {
    display: none !important;
}

body[device="Smartphone"][orientation="landscape"] .quiz-maximized-done-mobile .quiz-maximized-done-mobile-content .quiz-mobile-summary {
    display: none !important;
}

body[device="Smartphone"][device-size="Large"] .quiz-maximized-done-mobile .header {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

body[device="Smartphone"][device-size="Large"] .quiz-maximized-done-mobile .huge {
    --font-size: var(--giant-font-size) !important;
    --font-line-height: var(--giant-line-height) !important;
}

@media (max-height: 800px) {

    body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-name-controller {
        height: calc(var(--font-line-height) * 2) !important;
    }

    body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-name-controller .quiz-name {
        -webkit-line-clamp: 2 !important;
    }

}

@media (max-height: 700px) {

    body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-name-controller {
        height: calc(var(--font-line-height) * 1) !important;
    }

    body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-name-controller .quiz-name {
        -webkit-line-clamp: 1 !important;
    }

    body[device="Smartphone"] .quiz-maximized-done-mobile .quiz-main-content-top .base-padding {
        padding: 0px var(--base-padding) !important;
    }

}

/* Quiz/Quiz/Mobile/QuizMaximizedDuringMobile.css */



/* Quiz/Quiz/Mobile/QuizMaximizedMobile.css */

.quiz-maximized-mobile {
    position: relative;
    width: 100%;
    height: 100%;
}

.quiz-maximized-mobile .quiz-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Quiz/Quiz/Panel/Quiz.panel.css */

.quiz-panel-maximized[quiz="0"] .panel-card-page .bt:not(:first-child) {
    pointer-events: none;
    opacity: 0.5;
}

.quiz-panel-maximized[status=""] .quiz-button-form-controller { display: block !important; }
.quiz-panel-maximized[status="active"] .quiz-button-active-controller { display: block !important; }

/* Quiz/QuizQuestion/QuizQuestion.css */

.quiz-question-list .quiz-question-list-content .quiz-question:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.0625);
}


.quiz-question-minimized[quiz-question-answer-count=""],
.quiz-question-minimized[quiz-question-answer-count="0"] {
    background-color: rgba(167, 50, 110, 0.125);
}

.quiz-question-image {
    background-position: center;
    background-size: cover;
}

.quiz-maximized-mobile .quiz-question-image {
    padding-top: calc(100% / 16 * 9);
    max-height: 50vh !important;
}

/* Quiz/QuizQuestion/QuizQuestion.panel.css */

.panel .quiz-question-maximized-panel {
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel .quiz-question-maximized-panel .quiz-question-content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: auto 1fr;
    width: 1280px;
    height: calc(1280px / 16 * 9);
}

.panel .quiz-question-maximized-panel .quiz-question-content .quiz-question-name-input-controller {
    grid-row: 1;
    grid-column: 1;
}

.panel .quiz-question-maximized-panel .quiz-question-content .quiz-question-answer-list-controller {
    grid-row: 2;
    grid-column: 1;
}

.panel .quiz-question-maximized-panel .quiz-question-content .quiz-question-image-input-controller {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column: 2;
}

/* Quiz/QuizQuestion/Mobile/QuizQuestion.mobile.css */

.quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-name-controller {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    z-index: 50;
}

/* Mobile portrait */

body[mobile="true"][orientation="portrait"] .quiz-maximized-mobile .quiz-question-maximized-mobile {}

body[mobile="true"][orientation="portrait"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-content {}

body[mobile="true"][orientation="portrait"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-content .quiz-question-header-controller {
    overflow-y: auto;
}

body[mobile="true"][orientation="portrait"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-content .quiz-question-main {
    height: auto !important;
    margin-bottom: 80px !important;
}

body[mobile="true"][orientation="portrait"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-content .quiz-question-footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 1;
}

/* Other */

body[device="Smartphone"] .quiz-question-maximized-mobile .quiz-question-name-controller {}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    padding: var(--base-padding) !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-header {
    grid-column: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    width: 100% !important;
    height: 100% !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-main {
    background-color: #f4f4f4;
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-main .quiz-question-answer-content {
    background-color: white !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-main .quiz-question-answer-set-section>.label.border-radius {
    background-color: white !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-main .quiz-question-answer-set-section .quiz-question-answer-set-section-name {
    border-color: #f4f4f4 !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-footer {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    height: 100% !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-header .quiz-question-header-content {
    width: 100% !important;
    height: 100% !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-header .quiz-question-header-content>div {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-header .quiz-question-header-content .quiz-question-image-controller {
    height: 50% !important;
    width: 100% !important;
    max-width: 100% !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-header .quiz-question-header-content .quiz-question-image-controller .quiz-question-image {
    padding: 0px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100% !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-header .quiz-question-header-content .quiz-question-name-controller {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 0% !important;
    flex-grow: 1 !important;
    overflow-y: auto;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-header .quiz-question-header-content .quiz-question-name-controller>div:first-child {
    flex-grow: 1;
    height: 0% !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header-controller .quiz-question-header .quiz-question-header-content .quiz-question-name-controller .quiz-question-name {
    display: block !important;
    width: 100% !important;
}

body[orientation="landscape"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header .quiz-question-name {
    height: 100% !important;
}

body[device="Smartphone"][device-size="Small"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header .quiz-question-image-controller {}

body[device="Smartphone"][device-size="Small"] .quiz-maximized-mobile .quiz-question-maximized-mobile .quiz-question-header .quiz-question-name-controller {}

/* Quiz/QuizQuestion/Mobile/QuizQuestionSetMobile.css */

.quiz-question-maximized-mobile .quiz-question-answers {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: 0.4s opacity;
}

.quiz-question-maximized-mobile .quiz-question-answers-content {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: white;
    color: black;
    box-shadow: -16px 0px 32px -8px rgba(0, 0, 0, 0.5);
    width: min(90%, 450px);
    height: 100%;
    transition: 0.4s transform;
}

.quiz-question-maximized-mobile:not([set]) .quiz-question-answers {
    opacity: 0;
    pointer-events: none !important;
}

.quiz-question-maximized-mobile:not([set]) .quiz-question-answers .quiz-question-answers-content {
    transform: translateX(100%);
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer {
    --top: 0px;
    position: absolute;
    top: var(--top);
    width: 100%;
    transition: 0.4s color, 0.4s opacity, 0.4s top;
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer .checkbox::before {
    color: #f4f4f4;
    transition: 0.4s color;
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer .quiz-question-answer-content {
    transition: 0.4s background-color, 0.4s color;
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer .quiz-question-answer-content .quiz-question-answer-set-section-name-controller {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px var(--base-padding) var(--base-padding);
    color: #7f7f7f;
    transition: 0.4s background-color, 0.4s border-color, 0.4s color;
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer[current="true"] {
    opacity: 1;
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer .quiz-question-answer-content {
    background-color: rgb(239, 239, 239);
    color: black;
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer[current="true"] .quiz-question-answer-content .quiz-question-answer-set-section-name-controller {
    background-color: #834aab !important;
    border-color: #834aab;
    color: white !important;
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer[current="false"][set] .quiz-question-answer-content .quiz-question-answer-set-section-name-controller {
    background-color: #f4f4f4;
    color: black;
    border-color: #834aab;
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer[current="true"] .checkbox::before {
    color: var(--green);
    content: '\00E1';
}

.quiz-question-maximized-mobile .quiz-question-answers .quiz-question-answers-content .quiz-question-answer[current="false"] {
    opacity: 1;
}

.quiz-question-maximized-mobile .quiz-question-set-list .quiz-question-answer-set-section[items]:not([items="0"]) {
    color: #834aab;
}

/* Quiz/QuizQuestionAnswer/Mobile/QuizQuestionAnswer.mobile.css */

.quiz-question-maximized-mobile .quiz-question-answer-single .radiobox {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #834aab !important;
    transition: 0.4s color, 0.4s background-color;
}

.quiz-question-maximized-mobile .quiz-question-answer-single .radiobox.checked {
    background-color: #834aab !important;
    color: white !important;
}

.quiz-question-maximized-mobile .quiz-question-answer-multiple .checkbox {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #834aab !important;
    transition: 0.4s color, 0.4s background-color;
}

.quiz-question-maximized-mobile .quiz-question-answer-multiple .checkbox.checked {
    background-color: #834aab !important;
    color: white !important;
}

body[device="Smartphone"][orientation="landscape"]:not([device-size="Large"]) .quiz-maximized-mobile {
    --base-padding: var(--half-padding) !important;
}

/* Ranking/Ranking.mobile.css */

.bottom-bar.ranking-maximized-preview-popup {
    --border-color: var(--color-ranking);
}

#site-content-mobile .ranking-view {
    width: 100%;
    margin-top: var(--margin-default);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px)
}

#site-content-mobile .ranking .row {
    --color: #D6D6D6;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

#site-content-mobile .ranking .row:not(:first-child) {
    margin-top: var(--mobile-padding-v)
}

#site-content-mobile .ranking .row-points {
    display: flex;
    align-items: center;
    min-width: 80px;
    max-width: 80px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
    color: white;
    padding: var(--mobile-padding-v);
    padding-right: 4px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px
}

#site-content-mobile .ranking .row-points-wrapper {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap
}

#site-content-mobile .ranking .row-points--name {
    font-size: var(--sub-paragraph-font-size)
}

#site-content-mobile .ranking .row-points--number {
    font-size: var(--sub-header-font-size)
}

#site-content-mobile .ranking .row-id {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 30px;
    font-size: var(--sub-title-font-size);
    color: rgba(0, 0, 0, 0.75)
}

#site-content-mobile .ranking .row-wrapper {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    border-radius: 8px;
    overflow: hidden
}

#site-content-mobile .ranking .row:nth-child(1) {
    --color: #FCB616
}

#site-content-mobile .ranking .row:nth-child(2) {
    --color: #9C9C9C
}

#site-content-mobile .ranking .row:nth-child(3) {
    --color: #9D663F
}

#site-content-mobile .ranking .row .row-points {
    background: #D6D6D6
}

#site-content-mobile .ranking .row:nth-child(1) .row-points {
    background: linear-gradient(90deg, #FCB616, #FDC64A)
}

#site-content-mobile .ranking .row:nth-child(2) .row-points {
    background: linear-gradient(90deg, #9C9C9C, #B5B5B5)
}

#site-content-mobile .ranking .row:nth-child(3) .row-points {
    background: linear-gradient(90deg, #9D663F, #BA7E54)
}

#site-content-mobile .ranking .row.active {
    position: sticky;
    bottom: 0
}

#site-content-mobile .ranking .row.active .row-wrapper .row-points {
    border: 2px solid var(--orange)
}

#site-content-mobile .ranking .row-rectangle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    border-bottom: 2px solid var(--color);
    padding: var(--mobile-padding-v)
}

#site-content-mobile .ranking .row-user {
    font-size: var(--sub-title-font-size);
    flex-grow: 1;
    margin-right: 5px;
    text-overflow: ellipsis;
    overflow: hidden
}

#site-content-mobile .ranking .row-role {
    font-size: var(--sup-paragraph-font-size);
    color: rgba(0, 0, 0, 0.75)
}

.ranking-row-mobile {
    --primary: #f4f4f4;
    --secondary: #f4f4f4;
    --third: #f4f4f4;
    --points: #000000;
    --text: #000000;
    margin-bottom: calc(var(--base-padding) * 2);
}

.ranking-row-mobile .ranking-row-index {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: #cccccc;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(var(--title-line-height) + var(--paragraph-line-height));
    height: calc(var(--title-line-height) + var(--paragraph-line-height));
}

.ranking-row-mobile .ranking-row-content {
    background-color: var(--third);
    color: var(--text);
    align-items: stretch !important;
    border: 1px solid var(--primary);
    border-right: 0px !important;
    border-radius: 1000px;
}

.ranking-row-mobile .ranking-row-content .ranking-row-points {
    background-image: linear-gradient(to top right, var(--primary), var(--secondary));
    color: var(--points);
    border-radius: 1000px 0px 0px 1000px;
}

.ranking-row-mobile:nth-of-type(1) .ranking-row-content .ranking-row-points { text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); }
.ranking-row-mobile:nth-of-type(2) .ranking-row-content .ranking-row-points { text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); }
.ranking-row-mobile:nth-of-type(3) .ranking-row-content .ranking-row-points { text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); }

.ranking-row-mobile:nth-of-type(1) {
    --primary: #f9b50e;
    --secondary: #fcd375;
    --third: #ffffff;
    --points: #ffffff;
    --text: #000000;
}

.ranking-row-mobile:nth-of-type(2) {
    --primary: #9d9d9d;
    --secondary: #bcbcbc;
    --third: #ffffff;
    --points: #ffffff;
    --text: #000000;
}

.ranking-row-mobile:nth-of-type(3) {
    --primary: #b5774e;
    --secondary: #c09879;
    --third: #ffffff;
    --points: #ffffff;
    --text: #000000;
}

.ranking-row-mobile:nth-of-type(1) .ranking-row-index {
    background-image: url( 'https://grow-edu.pl/Resources/Ranking0.png' );
}

.ranking-row-mobile:nth-of-type(2) .ranking-row-index {
    background-image: url( 'https://grow-edu.pl/Resources/Ranking1.png' );
}

.ranking-row-mobile:nth-of-type(3) .ranking-row-index {
    background-image: url( 'https://grow-edu.pl/Resources/Ranking2.png' );
}

/* Rodo/Rodo.css */

.rodo-view {
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur( 16px );
    backdrop-filter: blur(16px);
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.rodo-view .rodo-view-content {
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.5);
    background-color: white;
    width: 100%;
}

.rodo-view .rodo-view-content .rodo-view-button-details {
    cursor: pointer;
    color: #326EA7;
}

.rodo-view .rodo-view-content .rodo-view-button-accept {
    cursor: pointer;
    --borderColor: #326EA7;
    --color: #326EA7;
    transition: 0.4s background-color, 0.4s color;
}
.rodo-view .rodo-view-content .rodo-view-button-accept:hover {
    background-color: #326EA7;
    color: white;
}

.rodo-view-details {
    background-color: white;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 200;
}

.rodo-view-details .rodo-view-details-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.rodo-view-details .rodo-view-details-content .rodo-view-details-button-close {
    cursor: pointer;
    --borderColor: #8f9ba9;
    --color: #8f9ba9;
    transition: 0.4s background-color, 0.4s color;
}
.rodo-view .rodo-view-content .rodo-view-button-accept:hover {
    background-color: #8f9ba9;
    color: white;
}

.rodo-view-details .rodo-view-details-content .rodo-view-details-main {
    flex-grow: 1;
    height: 0%;
    overflow-y: auto;
}

/* Rodo/Rodo.mobile.css */

body[mobile="true"] .rodo-view .title {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

/* Statistics/Statistics.css */

.home-statistics-page-counter {
    /* background-image: radial-gradient(at top left, #a5acb6, #79838c); */
    background-image: radial-gradient(at bottom left, #b6a5ab, #8c7981);
    /* background-image: radial-gradient(at top left, #b2b6a5, #868c79); */
    color: white;
}

.home-statistics-page-counter .home-statistics-page-counter-content {
    margin: auto;
    max-width: 1920px;
}

.statistics-course-item-user[status="done"] {
    --color: blue;
}

.statistics-course-item-user[status="during"] {
    --color: orange;
    --second-color: orange;
}

.statistics-course-item-user[status="waiting"] {
    --color: var(--color-workshop);
    --second-color: var(--color-workshop);
}

.statistics-course-item-user[grade="passed"] {
    --second-color: green;
}

.statistics-course-item-user[grade="failed"] {
    --second-color: crimson;
}

.statistics-course-item-user>div {
    background-image: linear-gradient(to right, var(--color), var(--second-color)) !important;
    color: rgb(255, 255, 255);
}

.ranking-user .ranking-user-content {
    border-radius: var(--base-padding);
    color: black;
}

.ranking-user.active .ranking-user-content {
    background-color: white;
    border: 2px solid #fcb616;
    color: black;
}

.ranking-user:nth-child(1) .ranking-user-content {
    background-color: #fcb616;
    background-image: radial-gradient(at 80% 0%, #ffce5b, #fcb616);
    color: white;
}

.ranking-user:nth-child(2) .ranking-user-content {
    background-color: rgb(156, 156, 156);
    background-image: radial-gradient(at 80% 0%, rgb(207, 207, 207), rgb(156, 156, 156));
    color: white;
}

.ranking-user:nth-child(3) .ranking-user-content {
    background-color: #9d663f;
    background-image: radial-gradient(at 80% 0%, #c28e69, #9d663f);
    color: white;
}

.ranking-user.active {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
}

.statistics-panel table tr th {
    font-size: 10px;
    line-height: 1.25;
}

.statistics-panel table tr td {
    font-size: 12px;
    line-height: 1.25;
}

/* Statistics/Statistics.mobile.css */

/* Popup */
.bottom-bar.your-numbers {
    --border-color: #86696e;
}

.statistics-home-slider .home-slider-content {
    border: 4px solid white;
}

body[device="Smartphone"] .statistics-home-slider .home-slider-content .base-padding {
    padding: var(--half-padding) !important;
}

body[device="Smartphone"] .statistics-home-slider .home-slider-content .column-4-3 {
    width: 100% !important;
}

body[device="Smartphone"] .statistics-home-slider .home-slider-content .huge {
    --font-size: var(--title-font-size) !important;
    --font-line-height: var(--title-line-height) !important;
}

body[device="Smartphone"] .statistics-home-slider .home-slider-content .giant {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

/* Statistics/css/Statistics.css */

.statistics .statistics-navigation-content {
    background-color: rgb( 255, 255, 255 );
    box-shadow: 0 0 10px gray;
}

.statistics .statistics-main-content {
    background-color: rgb( 255, 255, 255 );
    box-shadow: 0 0 10px gray;
}

/* Team/TeamPage.css */

.team-page {}

.team-page .team-main-content {}

.team-page .team-header {
    /* background-image: radial-gradient(at top left, #a5acb6, #79838c); */
    background-image: radial-gradient(at bottom left, #b6a5ab, #8c7981);
    /* background-image: radial-gradient(at top left, #b2b6a5, #868c79); */
    color: white;
}

.team-page .team-post:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.0625);
}

.team-page .team-sidebar {
    transition: 0.25s width;
    overflow: hidden;
}

.team-page[expand="false"] .team-sidebar {
    width: 145px !important;
}

.team-page[expand="false"] .team-sidebar .user-details {
    display: none;
}

.team-page[expand="false"] .team-sidebar .checkbox-master-controller {
    display: none;
}

.team-page[expand="false"] .team-sidebar .half-padding {
    padding: calc(var(--half-padding) / 2) !important;
}

.team-page:not([expand="false"]) .team-sidebar-button-toggle .icon::before {
    content: '\003C';
}

.team-report:not([page="Courses"]) .team-report-data-input-controller[page="Courses"] {
    display: none;
}

.team-report:not([page="Workshops"]) .team-report-data-input-controller[page="Workshops"] {
    display: none;
}

.team-report:not([page="ClickMeetingConferences"]) .team-report-data-input-controller[page="ClickMeetingConferences"] {
    display: none;
}

.team-report:not([page="Videos"]) .team-report-data-input-controller[page="Videos"] {
    display: none;
}


.team-sidebar .checkbox-label {
    border: 1px solid transparent;
}

.team-sidebar .team-page-user-input-controller {
    position: relative;
    width: 50px;
    height: 50px;
}

.team-sidebar .checkbox-label.checked .team-page-user-input-controller .checkbox:not([user="0"])::before {
    color: white;
}

.team-sidebar .checkbox-label:not(.checked) .team-page-user-input-controller .checkbox:not([user="0"])::before {
    color: var(--color);
}

.team-sidebar .checkbox-label:not(.checked) .team-page-user-input-controller {
    border: 1px solid var(--color);
}

.team-sidebar .checkbox-label.fill:not(.checked) .team-page-user-input-controller {
    border: 1px solid transparent;
    border-right: 1px solid var(--color);
}

.team-sidebar .checkbox-label.checked .team-page-user-input-controller {
    background-color: var(--color);
}

.team-sidebar .checkbox-label.fill {
    background-color: var(--color);
    color: white;
}

.team-sidebar .checkbox-label.fill .team-page-user-input-controller {
    background-color: white;
    color: var(--color);
}

.team-sidebar .checkbox-label:not(.checked).fill {
    border: 1px solid var(--color);
}

.team-sidebar .checkbox-label.checked.fill {
    background-color: var(--color);
    color: white;
}

.team-sidebar .checkbox-label.checked.fill .team-page-user-input-controller {
    background-color: var(--color);
}

.team-sidebar .checkbox-label.checked.fill .team-page-user-input-controller .checkbox::before {
    color: white;
}

/* Team/Mobile/TeamPage.mobile.css */

.team-page-mobile {
    background-color: #f4f4f4;
    padding-top: 60px;
}

.team-page-mobile .team-page-mobile-header {
    background-color: white;
}

.team-page-mobile:not([view="grow.edu"]) .team-page-mobile-view[view="grow.edu"] {
    display: none !important;
}

.team-page-mobile:not([view="users"]) .team-page-mobile-view[view="users"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-view[view="grow.edu"] .team-page-mobile-view-footer .team-page-mobile-view-footer-button {
    cursor: pointer;
}

.team-page-mobile .team-page-mobile-view[view="grow.edu"] .team-page-mobile-view-footer .team-page-mobile-view-footer-button::after {
    content: '';
    display: block;
    background-color: rgb(127, 127, 127);
    height: 1px;
    margin: auto;
    width: 0%;
    transition: 0.25s width;
}

.team-page-mobile .team-page-mobile-view[view="grow.edu"][page="courses"] .team-page-mobile-view-footer .team-page-mobile-view-footer-button[value="courses"]::after {
    width: 100%;
}
.team-page-mobile .team-page-mobile-view[view="grow.edu"][page="workshops"] .team-page-mobile-view-footer .team-page-mobile-view-footer-button[value="workshops"]::after {
    width: 100%;
}
.team-page-mobile .team-page-mobile-view[view="grow.edu"][page="conferences"] .team-page-mobile-view-footer .team-page-mobile-view-footer-button[value="conferences"]::after {
    width: 100%;
}
.team-page-mobile .team-page-mobile-view[view="grow.edu"][page="videos"] .team-page-mobile-view-footer .team-page-mobile-view-footer-button[value="videos"]::after {
    width: 100%;
}

.team-page-mobile .team-page-mobile-view[view="grow.edu"]:not([page="courses"]) .team-page-mobile-page[page="courses"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-view[view="grow.edu"]:not([page="workshops"]) .team-page-mobile-page[page="workshops"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-view[view="grow.edu"]:not([page="videos"]) .team-page-mobile-page[page="videos"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-view[view="grow.edu"]:not([page="conferences"]) .team-page-mobile-page[page="conferences"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-user-maximized:not([user-view="courses"]) .team-page-mobile-user-view[user-view="courses"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-user-maximized:not([user-view="workshops"]) .team-page-mobile-user-view[user-view="workshops"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-user-maximized:not([user-view="videos"]) .team-page-mobile-user-view[user-view="videos"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-user-maximized:not([user-view="conferences"]) .team-page-mobile-user-view[user-view="conferences"] {
    display: none !important;
}

.team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-footer .team-page-mobile-user-maximized-footer-button .title::after {
    content: '';
    display: block;
    background-color: rgb(127, 127, 127);
    height: 1px;
    margin: auto;
    width: 0%;
    transition: 0.25s width;
}

.team-page-mobile .team-page-mobile-user-maximized[user-view="courses"] .team-page-mobile-user-maximized-footer .team-page-mobile-user-maximized-footer-button[value="courses"] .title::after {
    width: 100%;
}
.team-page-mobile .team-page-mobile-user-maximized[user-view="workshops"] .team-page-mobile-user-maximized-footer .team-page-mobile-user-maximized-footer-button[value="workshops"] .title::after {
    width: 100%;
}
.team-page-mobile .team-page-mobile-user-maximized[user-view="conferences"] .team-page-mobile-user-maximized-footer .team-page-mobile-user-maximized-footer-button[value="conferences"] .title::after {
    width: 100%;
}
.team-page-mobile .team-page-mobile-user-maximized[user-view="videos"] .team-page-mobile-user-maximized-footer .team-page-mobile-user-maximized-footer-button[value="videos"] .title::after {
    width: 100%;
}

.team-page-mobile .course.label {
    padding: 0px !important;
}

.team-page-mobile .team-page-mobile-popup {
    background-color: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
    z-index: 5;
}

.team-page-mobile:not([popup="true"]) .team-page-mobile-popup {
    opacity: 0;
    pointer-events: none !important;
}

.team-page-mobile .team-page-mobile-popup .team-page-mobile-popup-content {
    background-color: #f4f4f4;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: 0.4s transform;
}

.team-page-mobile:not([popup="true"]) .team-page-mobile-popup .team-page-mobile-popup-content {
    transform: scale(0);
}

.team-page-mobile .team-page-mobile-sidebar {
    background-color: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur( 8px );
    backdrop-filter: blur(8px);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: 0.4s opacity;
    z-index: 10;
}

.team-page-mobile:not([sidebar="true"]) .team-page-mobile-sidebar {
    opacity: 0;
    pointer-events: none !important;
}

.team-page-mobile .team-page-mobile-sidebar .team-page-mobile-sidebar-content {
    background-color: #f4f4f4;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
    position: relative;
    max-width: min(90%, 450px);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: 0.4s transform;
}

.team-page-mobile:not([sidebar="true"]) .team-page-mobile-sidebar .team-page-mobile-sidebar-content {
    transform: translateX(100%);
}

@media (max-height: 600px) {

    /*
    .team-page-mobile {
        --base-padding: 4px;
        --half-padding: 2px;
        --quarter-padding: 1px;
    }

    .team-page-mobile .giant {
        --font-size: var(--huge-font-size) !important;
        --font-line-height: var(--huge-line-height) !important;
    }

    .team-page-mobile .huge {
        --font-size: var(--header-font-size) !important;
        --font-line-height: var(--header-line-height) !important;
    }

    .team-page-mobile .header {
        --font-size: var(--title-font-size) !important;
        --font-line-height: var(--title-line-height) !important;
    }

    .team-page-mobile .title {
        --font-size: var(--paragraph-font-size) !important;
        --font-line-height: var(--paragraph-line-height) !important;
    }
    */

}

.team-page-mobile:not([user-list-view="List"]) [user-list-view="List"] {
    display: none;
}

.team-page-mobile:not([user-list-view="Hierarchy"]) [user-list-view="Hierarchy"] {
    display: none;
}

.team-page-mobile:not([user-list-view="List"]) .user-list-view-hidden {
    visibility: hidden !important;
    pointer-events: none !important;
}

.team-page-mobile form[name="WorkshopGroupUserForm"] .workshop-group-list .workshop-group .workshop-group-content {
    background-color: #f4f4f4;
    border: 1px solid #f4f4f4;
    border-radius: 4px;
    transition: 0.4s border-color;
}

.team-page-mobile form[name="WorkshopGroupUserForm"] .workshop-group-list .workshop-group[selected] .workshop-group-content {
    border: 1px solid #416fa6;
}

.team-page-mobile form[name="WorkshopGroupUserForm"] .workshop-group-list .workshop-group .workshop-group-content .workshop-group-content-right {
    transition: 0.4s background-color;
}

.team-page-mobile form[name="WorkshopGroupUserForm"] .workshop-group-list .workshop-group[selected] .workshop-group-content .workshop-group-content-right {
    background-color: #416fa6;
    color: white;
}

.team-page-mobile .team-arrow-prev {
    background-image: url('https://grow-edu.pl/Resources/Team/ArrowPrev.png' );
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: var(--font-line-height);
    height: var(--font-line-height);
}

.team-page-mobile .team-arrow-next {
    background-image: url('https://grow-edu.pl/Resources/Team/ArrowNext.png' );
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: var(--font-line-height);
    height: var(--font-line-height);
}

.team-page-mobile .team-arrow-backward {
    background-image: url('https://grow-edu.pl/Resources/Team/ArrowBackward.png' );
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: var(--font-line-height);
    height: var(--font-line-height);
}

.team-page-mobile .team-structure-button {
    background-image: url('https://grow-edu.pl/Resources/Team/StructureBlack.png' );
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: var(--font-line-height);
    height: var(--font-line-height);
}

.team-page-mobile .team-arrow-toggle {
    background-image: url('https://grow-edu.pl/Resources/Team/ArrowToggleFalse.png' );
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: var(--font-line-height);
    height: var(--font-line-height);
}

.team-page-mobile[collapse="true"] .team-arrow-toggle {
    background-image: url('https://grow-edu.pl/Resources/Team/ArrowToggleTrue.png' );
}

body[orientation="landscape"] .team-page-mobile .landscape-huge {
    --font-size: var(--huge-font-size) !important;
    --font-line-height: var(--huge-line-height) !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-header {
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-title {
    --font-size: var(--title-font-size) !important;
    --font-line-height: var(--title-line-height) !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-text-left {
    text-align: left !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-text-center {
    text-align: center !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-no-padding {
    padding: 4px !important;
}

body[orientation="landscape"] .team-page-mobile .user-course-list {
    overflow: auto !important;
}

body[orientation="landscape"] .team-page-mobile .user-course-list .course-label {
    min-width: 100% !important;
    width: fit-content !important;
}

body[orientation="landscape"] .team-page-mobile .user-workshop-list {
    overflow: auto !important;
}

body[orientation="landscape"] .team-page-mobile .user-workshop-list .workshop-label {
    min-width: 100% !important;
    width: fit-content !important;
}

body[orientation="landscape"] .team-page-mobile .user-conference-list {
    overflow: auto !important;
}

body[orientation="landscape"] .team-page-mobile .user-conference-list .conference-label {
    min-width: 100% !important;
    width: fit-content !important;
}

body[orientation="landscape"] .team-page-mobile .user-video-list {
    overflow: auto !important;
}

body[orientation="landscape"] .team-page-mobile .user-video-list .video-label {
    min-width: 100% !important;
    width: fit-content !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-fit-content {
    min-width: 100% !important;
    width: fit-content !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-separator {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    align-self: stretch;
    max-width: 1px !important;
}

body[orientation="landscape"] .team-page-mobile .landscape-label > * {
    flex-shrink: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 180px;
}

body[orientation="landscape"] .team-page-mobile .landscape-spacer {
    flex-grow: 1;
    width: 0%;
}

body[orientation="landscape"] .team-page-mobile .landscape-max-360 {
    max-width: 360px;
}

body[orientation="landscape"] .team-page-mobile .landscape-label .landscape-450 {
    width: 450px;
}

body[orientation="landscape"] .team-page-mobile .landscape-label .landscape-360 {
    width: 360px;
}

body[orientation="landscape"] .team-page-mobile .landscape-label .landscape-270 {
    width: 270px;
}

body[orientation="landscape"] .team-page-mobile .landscape-label .landscape-180 {
    width: 180px;
}

body[orientation="landscape"] .team-page-mobile .landscape-label .landscape-90 {
    width: 90px;
}

body[orientation="landscape"] .team-page-mobile .landscape-label .landscape-fill {
    flex-grow: 1;
    width: 0%;
    min-width: 90px;
}

body[orientation="landscape"] .team-page-mobile .landscape-hidden {
    display: none !important;
}

body[orientation="portrait"] .team-page-mobile .portrait-hidden {
    display: none !important;
}

body[orientation="landscape"] .team-page-mobile .user-list-content .user-label {
    width: 100% !important;
}

.team-page-mobile .user-label .user-avatar-controller {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    width: 92px;
}

body[orientation="landscape"] .team-page-mobile .user-label .user-avatar-controller {
    align-self: stretch;
    height: auto;
}

.team-page-mobile .expand-box > .expand-box-header .expand-box-button-toggle .expand-box-button-toggle-icon {
    background-color: white;
    color: var(--color);
    border-radius: 4px;
    text-align: center;
    height: var(--font-line-height);
    width: var(--font-line-height);
}

.team-page-mobile .expand-box > .expand-box-header .expand-box-button-toggle .expand-box-button-toggle-icon::before {
    --rotateY: 0deg;
    --scale: 1.6;
    text-transform: initial;
    font-style: normal;
    font-family: 'GrowIcons';
    line-height: 1;
    display: inline-block;
    padding: 0px 5px;
    transform: rotateY(var(--rotateY)) scale(var(--scale));
    transform-origin: 50% 56%;
    text-transform: none !important;
    content: '\0470';
}

.team-page-mobile .expand-box .expand-box-header .expand-box-button-toggle .avatar {
    border: 1px solid white;
}

.team-page-mobile .expand-box .expand-box-header .expand-box-button-toggle .bottom-right.note.text-center {
    border: 1px solid white;
}

.team-page-mobile .expand-box.opened > .expand-box-header .expand-box-button-toggle {
    background-color: var(--green);
    color: white;
}

.team-page-mobile .expand-box.opened > .expand-box-header .expand-box-button-toggle .expand-box-button-toggle-icon {
    background-color: white;
    color: var(--green);
}

.team-page-mobile .expand-box.opened > .expand-box-header .expand-box-button-toggle .expand-box-button-toggle-icon::before {
    content: '\0471';
}

.team-page-mobile:not([collapse="true"]) .collapse-only {
    display: none !important;
}

/* Team/Mobile/TeamPage.mobile.tablet.css */

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content {
    display: flex;
    flex-direction: row;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content .team-page-mobile-content-offset {
    border-right: 16px solid #f4f4f4;
    min-width: 360px;
    max-width: 360px;
    height: 100%;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content .team-page-mobile-popup {
    border-left: 8px solid #ffffff;
    flex-grow: 1;
    position: relative;
    width: 0%;
    height: 100%;
    opacity: 1 !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile[view="users"] .team-page-mobile-content .team-page-mobile-popup {
    border-left: 8px solid #f4f4f4 !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile[view="users"] .team-page-mobile-content-offset {
    background-color: white !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content .team-page-mobile-popup .team-page-mobile-popup-content {
    transform: initial !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content > .portrait-hidden {
    align-self: center;
    grid-row: 1;
    grid-column: 1;
    z-index: 10;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content .team-page-mobile-user-maximized-top-bar {
    grid-row: 1;
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: transparent !important;
    border-bottom: none !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content .team-page-mobile-user-maximized-main {
    padding-right: 76px !important;
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content .team-page-mobile-user-maximized-footer {
    background-color: #f4f4f4 !important;
    align-self: flex-end;
    grid-row: 2;
    grid-column: 2;
    justify-self: flex-end;
    padding: var(--base-padding) !important;
    height: 100%;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content .team-page-mobile-user-maximized-footer .team-page-mobile-user-maximized-footer-button {
    flex-grow: initial !important;
    position: relative;
    width: 60px !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content .team-page-mobile-user-maximized-footer > .label {
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content .team-page-mobile-user-maximized-footer .huge { 
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-user-maximized .team-page-mobile-user-maximized-content .team-page-mobile-user-maximized-footer .title { 
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .course-label .course-image.tablet-only {
    display: none;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .workshop-label .workshop-image.tablet-only {
    display: none;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .video-label .video-image.tablet-only {
    display: none;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .conference-label .conference-image.tablet-only {
    display: none;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content .team-page-mobile-content-offset {
    transition: 0.4s transform;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content .team-page-mobile-popup {
    min-width: calc(100% - 360px);
    /* transition: 0.4s transform, 0.4s min-width; */
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile[collapse="true"] .team-page-mobile-content .team-page-mobile-content-offset {
    transform: translateX(-360px);
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile[collapse="true"] .team-page-mobile-content .team-page-mobile-popup {
    transform: translateX(-360px);
    min-width: 100%;
}

/* Left bar */

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content-offset .team-page-mobile-header {
    padding: 0px !important;
    background-color: transparent !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content-offset .team-page-mobile-view-footer {
    background-color: transparent !important;
}

body[device="Tablet"][orientation="landscape"] .team-page-mobile .team-page-mobile-content-offset .team-page-mobile-view-footer .huge {  
    --font-size: var(--header-font-size) !important;
    --font-line-height: var(--header-line-height) !important;
}

/* Users/UsersPanel.css */

.users-panel-navigation .in,
.users-panel-navigation .st,
.users-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* Users/User/User.css */

.users {
    text-align: center;
}

/*  Form    */

.form-user {
    text-align: center;
}

/*  Minimized   */

.user-minimized {
    display: block;
    padding: var(--content-padding);
    width: 100%;
}

.user-minimized .user-content {
    background-color: var(--primary-color-light);
    box-shadow: var(--shadow);
    padding: var(--content-padding);
}

.user-minimized .user-content .user-name {
    text-align: center;
    padding: var(--content-padding);
}

/*  Maximized   */

.user-minimized .user-content .user-email {
    text-align: center;
    padding: var(--content-padding);
}

.user-maximized {
    display: inline-block;
    vertical-align: top;
    padding: var(--content-padding);
    width: 100%;
    height: 100%;
}

.user-maximized .user-content {
    background-color: var(--primary-color-light);
    padding: var(--content-padding);
}

.user-maximized .user-content .user-name {
    text-align: center;
    padding: var(--content-padding);
}

.user-maximized .user-content .user-email {
    text-align: center;
    padding: var(--content-padding);
}

.avatar-offset {
    width: 180px;
}

.avatar-offset .avatar {
    padding-top: 100%;
}

.avatar {
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

.avatar-100 .avatar {
    width: 100px;
    height: 100px;
}

.avatar-200 .avatar {
    width: 200px;
    height: 200px;
}

.avatar-300 .avatar {
    width: 300px;
    height: 300px;
}

.avatar-small .avatar {
    width: 39px !important;
    height: 39px !important;
}

.user-editor-navigation {
    padding: var(--content-padding);
}

.user-editor-page {
    padding: var(--content-padding);
}

.user-actions {
    text-align: center;
}

.dropdown-menu {
    position: relative;
    display: inline-block;
}

.user-statistics-button-generate {
    border: 1px solid black;
    padding: 5px;
    border-radius: 5px;
    margin-left: 12px;
}

.amcharts-amexport-item {
    border: 1.1px solid rgba(0, 0, 0, 0.1) !important;
    transform: scale(0.9);
    font-size: 12px;
    bottom: 1px;
    background-color: white!important;
}

.amcharts-amexport-item div:hover {
    cursor: pointer!important;
    background-color: rgb(240, 240, 240);
}

.amcharts-amexport-menu {
    color: white!important;
}

.amcharts-amexport-menu {
    cursor: pointer!important;
}

.amcharts-amexport-menu div :hover {
    cursor: pointer!important;
}

.amcharts-amexport-label.amcharts-amexport-label-level-1 {
    /* display: none; */
}

.course-maximized-basic .amcharts-amexport-bottom .amcharts-amexport-item>.amcharts-amexport-menu {
    bottom: 31px;
    left: -9px;
}

.course-maximized-basic .amcharts-amexport-menu.amcharts-amexport-menu-level-1 {
    width: 45px;
}

/* Users/User/Mobile/User.mobile.css */



/* Users/User/Panel/User.panel.css */

.user-panel-maximized[user="0"] .panel-card-page .bt:not(:first-child) {
    pointer-events: none;
    opacity: 0.5;
}
.user-panel-maximized:not([user="0"]) .form-placeholder {
    display: none;
}
.user-panel-maximized[user="0"] .form-item {
    display: none;
}

.user-panel-maximized[status=""] .user-button-form-controller { display: block !important; }
.user-panel-maximized[status="locked"] .user-button-locked-controller { display: block !important; }
.user-panel-maximized[status="active"] .user-button-active-controller { display: block !important; }
.user-panel-maximized[status="true"] .user-button-true-controller { display: block !important; }

.panel-object.user[user]:not([status="true"]) .user-button-activate { display: none !important; }
.panel-object.user[user]:not([status="active"]) .user-button-lock { display: none !important; }
.panel-object.user[user]:not([status="locked"]) .user-button-unlock { display: none !important; }

/* Videos/Videos.page.mobile.css */

.videos-page-mobile .scroll-view {
    --color: var(--brown);
}

.videos-mobile .input--search {
    border: 1px solid hsla(0, 0%, 100%, .85) !important;
}

.videos-mobile .input--search .icon {
    color: white;
}

.videos-mobile .input--search input {
    color: hsla(0, 0%, 100%, .65);
}

.videos-mobile .scroll-view-button-sort {
    color: white;
}

.videos-mobile .scroll-view-button-filter {
    color: white;
}

.videos-mobile .video-image {
    padding-top: calc(100% / 16 * 9);
    background-image: url(https://resources.growbp.pl/grow.edu/labels/Movie.jpg);
}

/* do usunięcia to powyżej */
.videos-mobile {
    background: linear-gradient(45deg, #c2b299, #c7b79d);
}

.videos-mobile .scroll-view-header .scroll-view-bar--bg {
    background: linear-gradient(45deg, #c2b299, #c7b79d);
}

.videos-mobile .video-wrapper {
    transition: .3s;
}

.videos-mobile .search {
    color: white;
}

.videos-mobile .video-page {
    transition: .2s;
}

.videos-mobile .video-page.hide {
    opacity: 0;
    pointer-events: none;
}

.videos-mobile .videos {
    overflow: hidden;
}

.videos-mobile .video--title {
    position: absolute;
    left: 0;
    bottom: 0;
    background: hsla(0, 0%, 100%, .85);
    width: 100%;
}

@supports ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {

    .videos-mobile .video--title {
        background-color: hsla(0, 0%, 100%, .5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

.videos-mobile:not([view="Grid"]) .loupe {
    display: none !important;
}

.videos-mobile[view="Grid"] .loupe {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ffd90c;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.videos-mobile[view="Grid"] .loupe .icon {
    transform: translateY(2px) scale(1.6);
}

.videos-mobile[view="Grid"] .scroll-view-content {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.videos-mobile[view="Grid"] .grid--title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: var(--sup-paragraph-font-size) !important;
    line-height: var(--sup-paragraph-line-height) !important;
    padding: 0 8px;
    margin: 2px 0;
    font-weight: bold;
    width: calc(100% - 40px);
}

.videos-mobile:not([view="Grid"]) .grid--title {
    display: none !important;
}

.videos-mobile[view="Grid"] .video-mobile-view {
    position: relative;
    border: 1px solid #B5AC99;
    overflow: hidden;
    border-radius: 12px;
    background-color: #CEC4B5;
    /* box-shadow: 4px 4px 8px 0px hsl(0deg 0% 0% / 15%); */
}

.videos-mobile[view="Grid"] .date {
    padding: 4px;
    font-size: var(--paragraph-font-size) !important;
    line-height: var(--paragraph-line-height) !important;
}

.videos-mobile .btn--play {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: calc(var(--giant-font-size) + var(--giant-font-size) / 2);
    color: white;
    transform: translate(-50%, -50%);
}

/* placeholder */
.videos-mobile .video-mobile-view.placeholder {
    pointer-events: none;
}

.videos-mobile .video-mobile-view.placeholder span {
    background: #d6d6d6;
    border-radius: 8px;
    color: transparent;
}

.videos-mobile .video-mobile-view.placeholder .icon {
    color: #d6d6d6;
}

.videos-mobile .video-mobile-view.placeholder .video--title {
    border-radius: 0px;
    color: transparent;
}

.videos-mobile .video-mobile-view.placeholder .video-image {
    background: url(https://resources.growbp.pl/grow.edu/labels/Movie.jpg) center center/ 100% 100% no-repeat !important;
    opacity: .5;
}

.videos-mobile .video-mobile-view.placeholder .btn--play {}

.videos-page-mobile .scroll-view .video-minimized-mobile .video-name {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: calc(var(--font-line-height) * 2);
}

.videos-page-mobile .scroll-view[view="List"] .video-minimized-mobile .video-name {
    -webkit-line-clamp: 1;
    height: calc(var(--font-line-height) * 1);
}

.videos-page-mobile .scroll-view[view="Grid"] {}

.videos-page-mobile .scroll-view[view="List"] .scroll-view-content {}

.home-page .mobile-section.videos .home-slider .home-slider-content {
    border: 4px solid white;
}

.home-page .mobile-section.videos .home-slider .home-slider-content .video-image::after {
    display: inline-block;
    content: '\00BF';
    font-family: 'GrowIcons';
    filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.5));
    font-size: 72px;
    line-height: 72px;
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Videos/VideosPage.css */

.home-videos-page {
    background-color: #c7b79d;
    color: white;
}

.home-videos-page .home-videos-page-content {
    
}

/* Videos/VideosPanel.css */

.videos-panel-navigation .in,
.videos-panel-navigation .st,
.videos-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* Videos/VidoesPage.mobile.css */

@media (max-width: 1080px) {

    .videos-page-main {
        flex-direction: column;
    }

    .videos-page-main .video-maximized-preview-controller {
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        flex-grow: initial !important;
        width: 100% !important;
        height: 50% !important;
    }

    .videos-page-main .video-maximized-preview-controller .video-content {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .videos-page-main .video-maximized-preview-controller .video-content>div {
        display: flex !important;
        flex-direction: column !important;
        padding: 0px !important;
        width: 100% !important;
        height: 100% !important;
    }

    .videos-page-main .video-maximized-preview-controller .video-content .video-header {
        flex-grow: 1 !important;
        height: 0% !important;
    }

    .videos-page-main .video-maximized-preview-controller .video-description {
        display: none !important;
    }

    .videos-page-main .video-list {
        min-width: initial !important;
        flex-grow: 1 !important;
        width: 100% !important;
        height: 0% !important;
    }

}

/* Videos/Video/Video.css */

.video-maximized-preview {
    background-color: rgb(255, 255, 255);
    scroll-snap-type: start;
    width: 100%;
    height: 100%;
}

.video-maximized-preview .video-section {
    padding: 30px;
    min-height: 100%;
}

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

.video-minimized .video-info {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    bottom: -100px;
    transition: 0.4s bottom;
}

.video-minimized:hover .video-info {
    bottom: 0px;
}

.video-copyright {
    --progress: 0;
}

.video-copyright::after {
    content: '';
    display: block;
    background-color: rgb(110, 167, 50);
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: calc(var(--progress) * 100%);
    height: 4px;
    transition: 0.1s width;
}

/* Videos/Video/VideoPlayer.css */

.video-player {
    --progress: 0;
}

.video-player .video-player-controls-content {
    height: 32px;
}

.video-player .button {
    transition: 0.125s background-color;
    height: 30px;
    width: 30px;
}
.video-player .button:hover {
    background-color: rgb(239, 239, 239);
}

.video-player[playing="true"] .video-player-controls-button-toggle-play .icon::after {
    content: '\0220';
}

.video-player .video-player-controls-time-input {
    position: relative;
    --value: 0;
}

.video-player .video-player-controls-time-input::before {
    content: '';
    display: block;
    background-color: rgb(239, 239, 239);
    /* transition: 0.1s width; */
    width: calc( var(--value) * 100% );
    height: 30px;
}
.video-player .video-player-controls-time-input[limit]:not([limit="0"]):not([limit="1"])::after {
    content: '';
    display: block;
    background-color: rgba(220, 20, 60, 0.5);
    position: absolute;
    /* transition: 0.1s left; */
    left: calc( var(--limit) * 100% );
    top: 0px;
    width: 1px;
    height: 30px;
}

.video-player-controls-volume-input {
    --value: 0;
}

.video-player-controls-volume-input::before {
    content: '';
    display: block;
    background-color: rgb(239, 239, 239);
    /* transition: 0.1s width; */
    width: calc( var(--value) * 100% );
    height: 100%;
    height: 30px;
}

.video-player-controls-volume-input .video-player-volume::before {
    content: attr( data-volume ) "%";
}

/* Videos/Video/Mobile/Video.mobile.css */

/* Popup */
.bottom-bar.popup-video {
    --border-color: #86696e;
}

.videos-page-mobile .scroll-view .video-minimized-mobile .video-name {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: calc(var(--font-line-height) * 2);
}

body[orientation="landscape"] .videos-page-mobile .scroll-view .video-minimized-mobile .video-content-mobile,
.videos-page-mobile .scroll-view[view="Grid"] .video-minimized-mobile .video-content-mobile {
    color: black;
    border-radius: calc(var(--base-padding) * 2);
    overflow: hidden;
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .video-minimized-mobile .video-name {
    -webkit-line-clamp: 1;
    height: calc(var(--font-line-height) * 1);
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile {
    flex-shrink: 0;
    margin-bottom: 16px;
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile .video-search-controller {
    display: none !important;
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile .video-info {
    color: #86696e;
    display: flex;
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile .video-content-mobile {
    border-left: 4px solid #86696e !important;
    border-radius: 0px !important;
    display: flex !important;
    flex-direction: row-reverse !important;
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile .video-content-mobile .video-footer {
    flex-grow: 1;
    width: 0%;
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile .video-footer {
    border-bottom: none;
    position: relative;
    overflow: visible;
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile .video-footer::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

body[orientation="landscape"] .videos-page-mobile .scroll-view .scroll-view-content .video-minimized-home-preview .video-category-name,
body .videos-page-mobile .scroll-view[view="Grid"] .scroll-view-content .video-minimized-home-preview .video-category-name {
    display: none !important;
}

body:not([orientation="landscape"]) .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile .video-header .video-image {
    --height: calc(var(--header-line-height) + var(--title-line-height) + var(--base-padding) * 3);
    --width: calc(var(--height) / 9 * 16);
    padding: 0px !important;
    width: var(--width);
    height: var(--height);
    border-radius: var(--base-padding);
}

body[device="Smartphone"] .videos-page-mobile .scroll-view[view="List"] .scroll-view-content .video-minimized-mobile .video-header {
    display: none !important;
}

/* Videos/Video/Panel/Video.panel.css */

.video-panel-maximized[video="0"] .panel-card-page .bt:not(:first-child) {
    pointer-events: none;
    opacity: 0.5;
}

.video-panel-maximized[status=""] .video-button-form-controller { display: block !important; }
.video-panel-maximized[status="trash"] .video-button-trash-controller { display: block !important; }
.video-panel-maximized[status="sketch"] .video-button-sketch-controller { display: block !important; }
.video-panel-maximized[status="published"] .video-button-published-controller { display: block !important; }

/* Workshops/WorkshopsPage.mobile.css */

.workshops-page-mobile .scroll-view {
    --color: var(--color-workshop);
}

.workshops-page-mobile {
    background-color: #f7eeec;
}

.workshops-page-mobile .scroll-view .scroll-view-header .scroll-view-bar--bg {
    background-color: #f7eeec;
}

.workshop-mobile .scroll-view-bar--bg {
    overflow: hidden;
}

.workshop-mobile .workshops {
    overflow: hidden;
}

.workshop-mobile .nw {
    flex-wrap: nowrap;
}

.workshop-mobile .loupe {
    position: absolute;
    right: 8px;
    bottom: 8px;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ffd90c;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transform: scaleX(-1);
}

.workshop-mobile .loupe .icon {
    line-height: 70%;
    transform: translateY(2px) scale(1.6);
}

.workshop-mobile .workshop-mobile-view {
    position: relative;
    height: 100%;
    flex-shrink: 0;
}

.workshop-mobile[view="Grid"] .workshop-mobile-view {
    border-radius: 12px;
    border: 1px solid #d5dadb;
    overflow: hidden;
}

.workshop-mobile[view="Grid"] .workshop--title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: var(--sup-paragraph-font-size) !important;
    line-height: var(--sup-paragraph-line-height) !important;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: bold;
    width: calc(100% - 40px);
}

.workshop-mobile .grid-column .icon {
    line-height: 0;
}

.workshop-mobile[view="Grid"] .grid-column .icon {
    padding-left: 4px;
}

.workshop-mobile[view="Grid"] .grid-padding {
    padding: 4px 0;
    font-size: var(--sub-paragraph-font-size) !important;
}

.workshop-mobile[view="Grid"] .scroll-view-content {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* .workshop-mobile:not([view="Grid"]) .records{ 
    display: none !important;
} */
.workshop-mobile .records {
    display: none !important;
}

.workshop-mobile:not([view="Grid"]) .workshop--title br {
    display: none;
}

.workshop-mobile:not([view="Grid"]) .loupe {
    display: none;
}

.workshop-mobile:not([view="Grid"]) .grid-padding {
    padding: 4px 0;
}

.workshop-mobile[view="Grid"] .description {
    display: none !important;
}

.workshop-mobile[view="Grid"] .grid-column {
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: var(--paragraph-font-size) !important;
    line-height: var(--paragraph-line-height) !important;
    width: 0% !important;
    flex-grow: 1;
}

.workshop-mobile[view="Grid"] .grid-wrapper {
    background: #f5f6f6;
    padding: 2px 8px;
    height: auto !important;
    flex-grow: unset !important;
}

.workshop-mobile[view="Grid"] .grid-category {
    display: none !important;
}

.workshop-mobile .workshop-image {
    padding-top: calc(100% / 16 * 9);
    background: url(https://resources.growbp.pl/grow.edu/labels/Workshop.jpg) center center/cover no-repeat;
}

/* placeholder */
.workshop-mobile .workshop-mobile-view.placeholder {
    pointer-events: none;
}

.workshop-mobile .workshop-mobile-view.placeholder .workshop-image {
    opacity: 50%;
    background: url(https://resources.growbp.pl/grow.edu/labels/Workshop.jpg) center center/cover no-repeat !important;
}

.workshop-mobile .workshop-mobile-view.placeholder .workshop--title {
    color: transparent;
}

.workshop-mobile .workshop-mobile-view.placeholder span {
    color: transparent;
    background-color: #d6d6d6;
    border-radius: 8px;
}

.workshop-mobile .workshop-mobile-view.placeholder .icon {
    color: #d6d6d6;
}

.workshop-mobile .workshop-mobile-view.placeholder .loupe {
    background-color: #d6d6d6;
}

.workshop-mobile .workshop-mobile-view.placeholder .loupe .icon {
    color: white;
}

/* Workshops/WorkshopsPanel.css */

.workshops-panel-navigation .in,
.workshops-panel-navigation .st,
.workshops-panel-navigation .bt {
    --font-size: var(--paragraph-font-size) !important;
    --font-line-height: var(--paragraph-line-height) !important;
    font-size: var(--font-size) !important;
    line-height: var(--font-line-height) !important;
    transition: 0.4s font-size, 0.4s line-height;
}

/* Workshops/Workshop/Workshop.css */

.workshop {
    --user-status-color: var(--color-workshop);
}

.workshop[user-status="joined"] {
    --user-status-color: var(--joined-status);
}

.workshop-maximized-preview {
    background-color: rgb(255, 255, 255);
    scroll-snap-type: start;
    width: 100%;
    height: 100%;
}

.workshop-maximized-preview .workshop-section {
    padding: 30px;
    min-height: 100%;
}

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

.workshop-minimized .workshop-info {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    bottom: -100px;
    transition: 0.4s bottom;
}

.workshop-minimized:hover .workshop-info {
    bottom: 0px;
}

.workshop-maximized-preview {
    border: 4px solid var(--color-workshop);
}

/*
    Workshop Minimized
*/

.workshop-minimized .workshop-content {
    border: 4px solid transparent;
}

.workshop-minimized[user-status="joined"] .workshop-content {
    border-color: #B7D399;
}

.workshop-minimized[user-status="waiting"] .workshop-content {
    border-color: #D399B7;
}

form[name="UserWorkshopGroupForm"] {
    -webkit-user-select: none;
    user-select: none;
    max-height: 450px;
}

form[name="UserWorkshopGroupForm"] .workshop-group .workshop-group-content {
    cursor: pointer;
    border: 1px solid transparent;
}

form[name="UserWorkshopGroupForm"] .workshop-group.active .workshop-group-content {
    border: 1px solid #326fa8;
}

form[name="UserWorkshopGroupForm"] .workshop-group:hover .workshop-group-content {
    border: 1px solid #326fa8;
}

form[name="UserWorkshopGroupForm"] .workshop-group.active .workshop-group-content .workshop-group-users {
    background-color: #326fa8;
    color: white;
}

form[name="UserWorkshopGroupForm"]:not([workshop-group]) button {
    pointer-events: none;
    opacity: 0.5;
}

/* Workshops/Workshop/Mobile/Workshop.mobile.css */

/* Popup */
.bottom-bar.popup-workshop {
    --border-color: var(--color-workshop);
}

.mobile-popup.workshop {
    border: 3px solid var(--color-workshop);
}

.mobile-popup.workshop .popup-wrapper .btn--navigation {
    background: hsla(0, 0%, 0%, .75);
    color: hsla(0, 0%, 0%, .75);
}

.mobile-popup.workshop .popup-wrapper .btn--navigation.active {
    background: #ffffffff;
    color: hsla(0, 0%, 0%, 1);
}

.mobile-popup.workshop .rectangle {
    border-radius: 8px;
    background: #D6D6D6;
    color: black;
    padding: 12px;
    margin-bottom: 8px;
    position: relative;
}

.mobile-popup.workshop .rectangle-green {
    border: 2px solid var(--green);
    background: transparent;
}

.mobile-popup.workshop .rectangle-space {
    margin-left: 8px;
}

.mobile-popup.workshop .rectangle .space {
    width: 50px;
    height: 50px;
    background: url(https://resources.growbp.pl/grow.edu/google-maps-logo.png) center/contain no-repeat;
    opacity: .5;
    visibility: hidden;
}

.mobile-popup.workshop .rectangle .space.active {
    visibility: visible;
}

.mobile-popup.workshop .popup-wrapper li.column {
    height: auto;
}

.mobile-popup.workshop .popup-wrapper li:not(:first-child) {
    margin-top: 16px;
}

.mobile-popup.workshop .popup-wrapper .users {
    padding-bottom: 8px;
}

.mobile-popup.workshop .popup-wrapper .margin-bottom {
    margin-bottom: 3px;
}

.mobile-preview-sidebar[view="workshop"] .container .navigator button:not(.active) {
    background-color: white;
}

.mobile-preview-sidebar[view="workshop"] .navigator button {
    border: 1px solid var(--color-workshop);
}

.mobile-preview-sidebar[view="workshop"] .navigator button.active {
    background-color: var(--color-workshop);
    color: white;
}

.workshops-page-mobile .scroll-view .scroll-view-content .workshop-minimized-mobile .workshop-name {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: calc(var(--font-line-height) * 2);
}

body[orientation="landscape"] .workshops-page-mobile .scroll-view .workshop-minimized-mobile .workshop-content-mobile,
body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="Grid"] .workshop-minimized-mobile .workshop-content-mobile {
    background-color: #ebecec;
    border-radius: calc(var(--base-padding) * 2);
    overflow: hidden;
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-name {
    -webkit-line-clamp: 1;
    height: calc(var(--font-line-height) * 1);
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile {
    flex-shrink: 0;
    margin-bottom: 16px;
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-content-mobile  {
    border-left: 4px solid var(--user-status-color) !important;
    border-radius: 0px !important;
    display: flex !important;
    flex-direction: row-reverse !important;
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-content-mobile .workshop-footer {
    flex-grow: 1;
    width: 0%;
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-search-controller {
    display: none !important;
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-info {
    display: flex;
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-footer {
    border-bottom: none;
    position: relative;
    overflow: visible;
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-footer::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

body[orientation="landscape"] .workshops-page-mobile .scroll-view .scroll-view-content .workshop-minimized-home-preview .workshop-category-name,
body .workshops-page-mobile .scroll-view[view="Grid"] .scroll-view-content .workshop-minimized-home-preview .workshop-category-name {
    display: none !important;
}

body:not([orientation="landscape"]) .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-header .workshop-image {
    --height: calc(var(--header-line-height) + var(--title-line-height) + var(--base-padding) * 3);
    --width: calc(var(--height) / 9 * 16);
    padding: 0px !important;
    width: var(--width);
    height: var(--height);
    border-radius: var(--base-padding);
}

body[device="Smartphone"] .workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-header {
    display: none !important;
}

.workshops-page-mobile .scroll-view[view="List"] .scroll-view-content .workshop-minimized-mobile .workshop-user-status {
    display: none !important;
}

.workshop-maximized-preview-mobile .workshop-group-list .accordion .accordion-box {
    border: none;
}

.workshop-maximized-preview-mobile .workshop-group-list .accordion .accordion-box:not(:last-child) {
    border-bottom: calc(var(--base-padding) * 2) solid var(--color-workshop);
}

/* Workshops/Workshop/Panel/Workshop.panel.css */

.workshop-panel-maximized[workshop="0"] .panel-card-page .bt:not(:first-child) {
    pointer-events: none;
    opacity: 0.5;
}
.workshop-panel-maximized:not([workshop="0"]) .form-placeholder {
    display: none;
}
.workshop-panel-maximized[workshop="0"] .form-item {
    display: none;
}

.workshop-panel-maximized[status=""] .workshop-button-form-controller { display: block !important; }
.workshop-panel-maximized[status="trash"] .workshop-button-trash-controller { display: block !important; }
.workshop-panel-maximized[status="sketch"] .workshop-button-sketch-controller { display: block !important; }
.workshop-panel-maximized[status="published"] .workshop-button-published-controller { display: block !important; }

.workshop-panel-maximized .workshop-user-list-filter.bt-group .bt {
    background-color: white !important;
}
.workshop-panel-maximized .workshop-user-list-filter.bt-group .bt.active {
    background-color: #efefef !important;
}

/* Workshops/WorkshopGroup/WorkshopGroup.css */

.workshop-maximized-preview .workshop-group-list-content .workshop-group:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.workshop-group-maximized {
    background-color: white;
}

.workshop-group-panel-maximized {
    background-color: white;
}

.workshop-group-preview[user-status="joined"] .workshop-group-block {
    background-color: var(--joined-status);
    color: #ffffff;
}

.workshop-group-preview[user-status="waiting"] .workshop-group-block {
    background-color: var(--color-workshop);
    color: #ffffff;
}

.workshop-group-preview[user-status="invited"] .workshop-group-block {
    background-color: var(--color-workshop);
    color: #ffffff;
}

.workshop-group-button-interaction {
    background-color: #667a8d;
    color: #ffffff;
}

.workshop-group-label-info {
    border: 1px solid #ccc;
    color: #9b9a9a;
    opacity: 1;
}

/* Workshops/css/style.css */

#workshops {
    text-align: center;
}

.workshop-minimized {
    display: block;
}

.workshop-minimized .workshop-content {
    background-color: var(--primary-color-light);
    overflow: hidden;
    /*height: 300px;*/
    transition: 0.4s transform;
    cursor: pointer;
}

.workshop-minimized .workshop-content .workshop-name {
    text-align: center;
    padding: var(--content-padding);
}

.workshop-minimized .workshop-content .workshop-description {
    text-align: justify;
    padding: var(--content-padding);
}

.workshop-minimized .workshop-content .workshop-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.workshop-minimized .workshop-overlay {
    background-color: rgba(255, 255, 255, 0.85);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.4s opacity;
}

.workshop-minimized:hover .workshop-overlay {
    opacity: 1;
}

.workshop-minimized .workshop-overlay-content {
    text-align: center;
    font-size: 40px;
    padding: 10px;
    color: rgb(148, 77, 191);
    position: absolute;
    left: 15%;
    top: 25%;
    transform: translate(-50%, -50%);
    transition: 0.4s transform;
    cursor: pointer;
}

.workshop-minimized .workshop-overlay-content:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.workshop-minimized .workshop-content .workshop-name {
    text-align: justify;
    align-items: flex-start;
    padding: var(--content-padding);
}

.workshop-minimized .workshop-content .workshop-category {
    text-align: justify;
    font-size: var(--note-size);
    padding: var(--button-padding);
}

.workshop-arrow {
    position: relative;
    border: 2px solid rgb(110, 167, 50);
}

.workshop-arrow::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 100%);
    border-width: 15px;
    border-color: transparent;
    border-style: solid;
    border-top: 25px solid rgb(110, 167, 50);
}

.workshop-maximized {
    margin-top: 20px;
    padding: var(--content-padding);
    height: 70vh;
    max-height: 70vh;
}

.workshop-maximized .workshop-maximized-content {
    background-color: white;
    box-shadow: 0 0 10px gray;
    position: relative;
    text-align: left;
    height: 100%;
}

.workshop-maximized h1 {
    font-size: 40px;
}

.workshop-maximized h2 {
    color: rgb(168, 168, 169);
    font-size: 25px;
}

.workshop-bottom {
    position: absolute;
    bottom: 0px;
    padding-top: 20px;
}

.workshop-term-show {
    color: lightgrey;
    font-size: 10pt;
}

.workshop .button.expand-box-icon {
    font-size: 25pt;
}

.WorkshopSecondMenu {
    font-size: 12px;
    color: rgb(110, 167, 50);
}

.SearchWorkshop {
    border: 1px solid rgb(110, 167, 50);
    border-radius: 5px;
    position: relative;
    height: 30px;
}

.SearchWorkshop i {
    font-size: 10px;
    position: absolute;
    top: 6px;
    left: 5px;
}

.SearchWorkshop input {
    font-size: 12px;
}