.page-content-root {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: var(--GLOBAL-default-padding-small);
    gap: var(--GLOBAL-default-gap-small);
    border-radius: var(--GLOBAL-default-border-radius-small);
    background: #ffffff0a;
	backdrop-filter: blur(var(--THEME-default-background-blur));
}

.background-blur {
    background: #ffffff0a;
	backdrop-filter: blur(var(--THEME-default-background-blur));
}

.cloud-pane-el {
    display: flex;
    border-radius: var(--GLOBAL-default-border-radius-small);
    padding: var(--GLOBAL-default-padding-small);
    gap: var(--GLOBAL-default-gap-small);
    background: #ffffff0a;
	backdrop-filter: blur(var(--THEME-default-background-blur));
}

.cloud-pane-el.clickable:hover,
.cloud-pane-el.clickable:focus,
.cloud-pane-el.clickable:active,
.cloud-pane-el.link:hover,
.cloud-pane-el.link:focus,
.cloud-pane-el.link:active
 {
    transform: scale(102%);
    background: #ffffff40;
}

.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: var(--GLOBAL-default-icon-size);
    aspect-ratio: 1;
}

.icon-wrapper > img {
    width: 100%;
    max-width:100%;
    height: 100%;
    max-height:100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

.icon-wrapper:hover,
.icon-wrapper:focus,
.icon-wrapper:active {
    cursor: pointer;
    transform: scale(115%);
}

.image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-height: 100%;
}

.image-wrapper > img {
    width: 100%;
    max-width:100%;
    height: 100%;
    max-height:100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

.image-wrapper:hover,
.image-wrapper:focus,
.image-wrapper:active {
}

.form-content-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: var(--GLOBAL-default-padding-small);
    gap: var(--GLOBAL-default-gap-small);
    border-radius: var(--GLOBAL-default-border-radius-small);
    background: #ffffff0a;
	backdrop-filter: blur(var(--THEME-default-background-blur));
    min-width: 18em;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-family: 'AtkinsonMono';
}

.form-content-container::-webkit-scrollbar {
  display: none;
}

.form-row-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: var( --GLOBAL-default-gap );
    flex-shrink: 0;
    /* overflow: hidden; */
}

.form-input-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.form-input-container input,
.form-input-container textarea,
.form-input-container select {
    width: 100%;
    resize: vertical;
}

.form-content-container button[type='submit'] {
    flex-shrink: 0;
}

.list-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    padding: var(--GLOBAL-default-padding-small);
    gap: var(--GLOBAL-default-gap-small);
    border-radius: var(--GLOBAL-default-border-radius-small);
    background: #ffffff0a;
	backdrop-filter: blur(var(--THEME-default-background-blur));
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: scroll;
    font-family: 'AtkinsonMono';
}

.list-container::-webkit-scrollbar {
    display: none;
}

.list-item-container {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    padding: var(--GLOBAL-default-padding-small);
    gap: calc(var(--GLOBAL-default-gap-small) * 4);
    border-radius: var(--GLOBAL-default-border-radius-small);
    background: #ffffff0a;
	backdrop-filter: blur(var(--THEME-default-background-blur));
    font-family: 'AtkinsonMono';
    white-space: nowrap;
}

.list-item-container p {
    white-space: nowrap;
}

.link-style-1 {
    position: relative
}

.link-style-1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var( --GLOBAL-default-background-color-dark );
    transform: scaleX(0%);
    transition: all 133ms ease;
}

.link-style-1.accent-2::after {
    background-color: var( --GLOBAL-default-accent-color-2 );
}

.link-style-1:hover::after {
    transform: scaleX(100%);
}

.underline-hover-animation {
    position: relative
}

.underline-hover-animation::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var( --GLOBAL-default-background-color-dark );
    transform: scaleX(0%);
    transition: all 133ms ease;
}

.underline-hover-animation:hover::after {
    transform: scaleX(100%);
}