:root {
    --bgSilver: #fafafa;
    --paleGrey: #f5f6f7;
    --silver: #d6d8da;
    --boldedSilver: #566579;
    --scienceBlue: #0b61d6;

    --blue: #039be5;
    --green: #689f38;
    --orange: #ff6d00;
    --red: #f44336;

    --lightBlue: #03a9f4;
    --lightGreen: #8bc34a;
    --lightOrange: #ff9100;
    --lightRed: #ef5350;
}

@font-face {
    font-family: Luciole;
    src: url("../fonts/Luciole-Regular.ttf") format("truetype"),
         url("../fonts/Luciole-Regular.woff2") format("woff");
    font-style: normal;
    font-display: block;
}

*,:after,:before {
    border: 0 solid var(--colors-background-default);
}

body {
    font-family: Luciole;
    overflow-x: hidden;
    padding: 0 var(--body-vertical-padding);
    margin: 0;
    color: var(--colors-text-title);
    position: relative;
}

h1 {
    text-align: center;
}

.hidden, .app__element.hidden {
    display: none;
}

body.index #top-bar {
    position: fixed;
    width: calc(100vw - 2 *var(--body-vertical-padding));
}

.logout {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: center / cover no-repeat url('/static/assets/sessions/close-session.jpg');
}

.logout .logout-loader {
    color: var(--colors-loader);
    font-size: .7rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    animation: mulShdSpin 1.3s infinite linear;
}

#top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: var(--top-bar-padding) 0;
}

#change-session, #top-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
}

.label--decoration:after {
    content: " :";
}

.session-choice {
    flex-grow: 1;
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--spacing-4x);
}

.session-choice-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
}

.session-choice-card a {
    text-decoration: none;
}

.session-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
}

.session-link--sm {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: var(--button-border-thickness) solid var(--colors-background-default);
}

.button {
    text-decoration: none;
    color: var(--colors-text-inverted);
    border: var(--button-border-thickness) solid transparent;
    border-radius: var(--radius-sm);
    box-sizing: content-box;
    padding: 0;
    background: none;
}

html[data-theme="dark"] .light-switch {
    display: none !important;
}

html[data-theme="light"] .dark-switch {
    display: none !important;
}

.button-label-padding {
    padding: 0 var(--spacing-2x) 0 var(--spacing-1-5x);
}

.button svg path {
    fill: var(--colors-text-inverted-brand);
}

.button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1x);
    height: var(--button-sm-height);
    padding: 0 var(--spacing-2x) 0 var(--spacing-1-5x);
    border: var(--button-border-thickness) solid var(--colors-border-action-high-brand);
    border-radius: var(--radius-sm);
    background-color: var(--colors-background-action-high);
    box-sizing: content-box;
}

.button__icon svg {
    fill: var(--colors-text-action-high-brand);
}

.button:focus, .button.button--tertiary:focus {
    display: block;
    border: var(--button-border-thickness) dashed var(--colors-border-hover-brand);
    outline: none;
}

.button.hidden:focus, .button.hidden.button--tertiary:focus {
    display: none;
}

.button:hover, .button.button--tertiary:hover {
    border: var(--button-border-thickness) solid transparent;
    transition: border var(--widget-animation);
}

.button:hover .button-content {
    background-color: var(--colors-background-hover);
    border-color: var(--colors-background-hover);
    transition: border-color var(--widget-animation);
    transition: background-color var(--widget-animation);
}

.button:active .button-content {
    background-color: var(--colors-background-cliqued);
    border-color: var(--colors-background-cliqued);
}

.button.button--secondary .button-content {
    color: var(--colors-text-action-high-brand);
    background-color: transparent;
}

.button.button--secondary:hover .button-content {
    background-color: var(--colors-background-hover-alt);
    border-color: var(--colors-border-action-high-brand);
    transition: border-color var(--widget-animation);
    transition: background-color var(--widget-animation);
}

.button.button--secondary:active .button-content {
    background-color: var(--colors-background-cliqued-alt);
}

.button.button--secondary svg path {
    fill: var(--colors-text-action-high-brand);
}

.button.button--tertiary {
    border-color: transparent;
}

.button.button--tertiary .button-content {
    border: none;
    color: var(--colors-text-action-high-brand);
    background-color: transparent;
    padding: 0 var(--spacing-1x);
}

.button.button--tertiary:hover .button-content {
    background-color: var(--colors-background-hover-alt);
    border-color: var(--colors-border-action-high-brand);
    transition: border-color var(--widget-animation);
    transition: background-color var(--widget-animation);
}

.button.button--tertiary:active .button-content {
    background-color: var(--colors-background-cliqued-alt);
}

.button.button--tertiary svg path {
    fill: var(--colors-text-action-high-brand);
}

.button.button--alt .button-content {
    background: var(--colors-background-default);
    border-color: var(--colors-border-action-high);
    padding: 0 var(--spacing-1x);
}

.button.button--alt:hover .button-content {
    background-color: var(--colors-background-hover-alt);
    border-color: var(--colors-border-action-high);
    transition: border-color var(--widget-animation);
    transition: background-color var(--widget-animation);
}

.button.button--alt:active .button-content {
    background-color: var(--colors-background-cliqued-alt);
    border-color: var(--colors-border-action-high);
}

.button.button--alt svg path {
    fill: var(--colors-text-action-high);
}

.actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.button .button-label {
    font-size: var(--spacing-2x);
}

.menu__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    width: var(--spacing-7x);
    height: var(--spacing-7x);
    margin-right: var(--spacing-1x);
    background-color: var(--colors-background-alt-brand);
    border-radius: var(--spacing-3x);
    border: var(--spacing-0-5x) solid var(--colors-background-default);
    overflow: hidden;
}

.menu__icon--hug {
    height: 12.5rem;
    width: 12.5rem;
    margin: 0 var(--spacing-4x);
}

.menu__icon--sm {
    height: var(--button-sm-height);
    width: var(--spacing-5x);
    margin: 0;
    border: 0;
    border-radius: var(--radius-sm); 
}

.menu__icon--sm img {
    width: 100%;
}

.menu__icon-label {
    color: var(--colors-text-action-high-brand);
    font-size: var(--spacing-3x);
    padding: var(--spacing-2x) var(--spacing-3x);
}

.menu__icon-label--hug {
    border-radius: 0 0 var(--spacing-4x) var(--spacing-4x);
}

.menu__icon-label--sm {
    font-size: var(--spacing-2x);
    padding: var(--spacing-1x) var(--spacing-1-5x);
    line-height: var(--spacing-3x);
}

.session-link:focus {
    outline: none;
}

.session-link:focus .menu__icon--hug {
    border-color: var(--colors-background-hover);
    border-style: dashed;
}

.session-link:hover .menu__icon--hug {
    border-color: var(--colors-background-hover);
    border-style: solid;
    transition: border-color var(--widget-animation);
}

.session-link:hover .menu__icon-label--hug {
    color: var(--colors-text-inverted-brand);
    background-color: var(--colors-background-hover);
    transition: color var(--widget-animation);
    transition: background-color var(--widget-animation);
}

.session-link--sm:focus {
    border: var(--button-border-thickness) dashed var(--colors-border-hover-brand);
}

.session-link--sm:hover {
    background-color: var(--colors-background-hover-alt);
    border: var(--button-border-thickness) solid var(--colors-background-default);
    transition: border-color var(--widget-animation);
    transition: background-color var(--widget-animation);
}

.session-link:active .menu__icon--hug {
    border-color: var(--colors-background-cliqued);
    border-style: solid;
}

.session-link:active .menu__icon-label--hug {
    background-color: var(--colors-background-cliqued);
}

.session-link--sm:active {
    background-color: var(--colors-background-cliqued-alt);
}

.c-app__container {
    margin: var(--spacing-4x);
}

.c-app__container--poe-paginated {
    margin-bottom: var(--spacing-15x);
}

.apps__container {
    display: flex;
    gap: var(--spacing-8x) var(--spacing-12x);
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: center;
}

.apps {
    position: relative;
    min-height: 60vh;
}

.apps--paginated {
    margin-bottom: var(--spacing-12x);
}

.apps__results {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-4x);
}

.app__element {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--spacing-12x);
    text-decoration: none;
    color: var(--colors-text-default);
}

.app__element:hover {
    cursor: pointer;
}

.app__element:hover .app__img_container {
    border-style: solid;
    border-color: var(--colors-border-hover);
}

.app__element--open .loader {
    animation: fadeInLoader 2.4s ease-out, mulShdSpin 1.3s infinite linear;
}

.app__element--open .app__img_container {
    animation: fadeInApp 2.4s ease-out;
}

.app__element[data-only-distrib="True"] {
    & .app__img_container {
        opacity: 0.3;
        & .app__img_container {
            filter: grayscale(100%);
        }
    }

    & .app__name {
        color: var(--colors-text-disabled);
    }
}

@keyframes fadeInApp {
  0% {
    opacity: 1;
  }
  10%, 90% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

input.app__input[type=checkbox] {
    appearance: none;
    border: none;
    height: auto;
}

.app__name {
    margin-top: var(--spacing-1x);
    width: 10rem; 
    text-align: center;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-details__title {
    margin: .5rem;
    align-items: center;
    display: inline-flex;
    gap: var(--spacing-2x);
}

.app-details__text-title {
    padding: 0 0.5rem;
}

.app__img_container {
    & .app__img {
        width: 100%;
    }
    width: var(--spacing-12x);
    height: var(--spacing-12x);
    background-color: var(--colors-background-alt);
    padding: var(--spacing-2x);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    border: var(--button-border-thickness) solid transparent;
}

.app__input:focus + .app__img_container {
    border-style: dashed;
    border-color: var(--colors-border-active);
}

.app__input:active + .app__img_container {
    border-style: solid;
    border-color: var(--colors-border-active);
}

.app-details__img {
    height: 48px;
    vertical-align: bottom;
}

.app-details__description,
.app-details__license-container,
.app-details__link-container {
    padding: .5rem 0;
}

.app-decoration {
    padding: 2px;
    position: absolute;
    right: 0;
    bottom: 1.6rem;
    background-color: var(--colors-background-contrast);
    border-radius: var(--radius-xs);
}

.app-decoration__is-installed {
    bottom: inherit;
    top: 0;
    height: 16px;
    width: 14px;
    padding-left: 4px;
}

.app-decoration__is-installed:after {
    content: "\2714";
    color: var(--colors-border-active);
}

.app-decoration-url:after {
    display: inline-block;
    content: "";
    background-color: var(--colors-border-active);
    --icon-size: 1rem;
    height: 1.5rem;
    height: var(--icon-size);
    width: 1.5rem;
    width: var(--icon-size);
    mask-size: 100% 100%;
}

.app-decoration-url__only-distrib:after {
    mask-image: url('../assets/sessions/only-distrib.svg');
}

.app-decoration-url__is-externe:after {
    mask-image: url('../assets/sessions/external-link.svg');
}

#back-to-sessions.hidden {
    display: none;
}

#back-to-sessions {
    z-index: 999;
}

#back-to-sessions .modal-background {
    position: absolute;
    top: 0;
    left: calc(-1 * var(--body-vertical-padding));
    width: 100vw;
    height: 100vh;
}

#back-to-sessions .dialog {
    position: absolute;
    top: calc(var(--top-bar-padding) + var(--button-sm-height) + 3 * var(--button-border-thickness));
    left: 0;

    display: flex;
    padding: var(--spacing-3x);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2x);
    width: fit-content;

    color: var(--colors-text-default);
    font-size: var(--spacing-2x);
    border-radius: var(--radius-sm);
    background: var(--colors-background-alt-brand);
    box-shadow: 0 var(--spacing-0-25x) var(--spacing-0-5x) 0 rgba(21, 29, 50, 0.25);
}

#back-to-sessions p {
    margin: 0;
}

.container.center {
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: center;
}