:root {
  --photo-height: 280px;
  --photo-height--poster: 500px;
  --col-primary: #82baff;
  --grey-light: hsl(0, 0%, 71%);
}

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

.is-avatar {
    height: 64px;
    width: 64px;
    border-radius: 50%;
    border: 1px solid #bbb;
    background-color: #eee;
    overflow: hidden;
}

.is-photo-thumbnail {
    max-height: var(--photo-height);
    max-width: 100%;
}

.is-photo-thumbnail-container {
    height: var(--photo-height);
}

.has-items-centered {
    align-items: center;
    justify-content: center;
}

.is-poster {
    height: var(--photo-height--poster) !important;
}

.is-poster>.is-photo-thumbnail {
    max-height: var(--photo-height--poster) !important;
}

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


.x-is-hoverable:hover {
    background-color: #eee !important;
}

.x-is-hoverable-primary:hover {
    background-color: var(--col-primary) !important;
    border-radius: 50%;
    box-shadow: 0px 0px 0 0.25rem var(--col-primary);
}

.is-chat-message {
    margin: 0.5rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

a.is-wrapping {
    line-height: 0;
}

.has-no-background {
    box-shadow: none !important;
    background-color: initial !important;
}

.pagination-disabled {
    background-color: white;
    border-color: #dbdbdb;
    color: #b5b5b5;
    cursor: auto;
}

.pagination-disabled:hover {
    background-color: white;
    border-color: #dbdbdb;
    color: #b5b5b5;
}

.has-text-shortenable {
    overflow: hidden;
    text-overflow: ellipsis;
}

.has-border-dashed {
    border-style: dashed;
}

.has-border-grey-light {
    border-color: var(--grey-light);
}

.has-justify-start {
    justify-content: start;
}

/**************
 * selections *
 **************/

.is-not-selectable {
    user-select: none;
}

.selected_for_deletion {
    outline: solid red 0.25rem;
}

/***************
 * misc states *
 ***************/

.state_deleted {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/***********
 * dialogs *
 ***********/

.modal-content {
    transform: scaleY(0);
}

div.state_appended .modal-content {
    transform: scaleY(1);
    transition: transform 0.15s ease-in;
}

.click_to_close {
    cursor: pointer;
}

/**********
 * panels *
 **********/

.panel_wrapper {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    z-index: 150;
}

.comments_side_panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 0;
    max-width: 80%;
    z-index: 200;
    background: white;
    transition: width 0.3s ease-out;
    overflow: auto;
    color: black;
}

.comments_side_panel.open {
    width: 55rem;
    transition: width 0.3s ease-out;
}

/*************
 * slideshow *
 *************/

.slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    color: white;
    z-index: 100;
    overflow: hidden;
}

div.slideshow>button.delete {
    z-index: 100;
    background-color: var(--grey-light);
    position: absolute;
    top: 1rem;
    right: 2rem;
}

div.slideshow>div.click_to_comment {
    z-index: 100;
    position: absolute;
    right: 1.7rem;
    bottom: 2rem;
    cursor: pointer;
}

div.slideshow>div.comments__count {
    z-index: 100;
    position: absolute;
    right: 1.7rem;
    bottom: 0.5rem;
    font-weight: bold;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-container {
    height: 100%;
    width: 100%;
}

.swiper-button-prev {
    left: 2.1rem !important;
    color: #f1f1f1 !important;
}

.swiper-button-next {
    right: 2.1rem !important;
    color: #f1f1f1 !important;
}

.slide_img {
    max-height: 100%;
    max-width: 100%;
}

/***************
 * progression *
 ***************/

.progress_started img {
    filter: grayscale(100%);
}

.progress_finished img {
    filter: grayscale(0%);
    transition: filter 1.5s ease-out;
}

.progress_finished progress {
    height: 0;
    opacity: 0;
    transition: all 1.5s ease-out;
}

.progress {
    transition: width 5s ease;
}


/**********
 * drawer *
 **********/


.panel-drawer {
    /* A panel which is hidden by default but can be
       opened when it's clicked */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s, opacity 0.5s;
}

.panel-drawer.state_clicked {
    opacity: 1;
}

/********
 * code *
 ********/

.highlight {
    overflow: auto;
}

/**********
 * blocks *
 **********/

.block_separator {
    font-size: 1.4em;
    display: flex;
    margin: 1rem 0;
}

.block_separator__label {
    display: inline-block;
    margin: 0 0.2em;
}

.block_separator__line {
    height: 1px;
    background: #ccc;
    flex: 1;
    margin-top: 0.7em;
}

/********
 * tabs *
 *******/

#tab_guests {
    overflow: auto;
}

.tab__page {
    display: None;
}

.tab__page.state_clicked {
    display: block;
}