/* Manage load */
#load-page {
    height: 15em;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    padding: 1em;
}

/* Text scroller */
.text-contain {
    background-color: rgba(124, 124, 124, 0.781);
    padding: 15px;
    max-height: 30em;
    overflow: scroll;
}

/* Page selector */
#panels-container {
    width: 100%;
    overflow: hidden;

    display: flex;
    gap: 10px;

    @media screen and (max-width: 768px) {
        display: block;
    }
}
#panels-container div {
    transition: all .20s ease-in-out;
}
#panels-header {
    border-width: 4px;
    border-style: solid;
    border-radius: inherit;
    border-color: rgba(140, 145, 146, 0.5);
    background-color: var(--container-color);
    margin-bottom: .5em;

    display: flex;
    align-items: center;
    justify-content:left;
}
#panels-header-icon {
    font-size: 2em;
    margin-right: 10px;
    margin-left: 10px;
}
#panels-header-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
}

#fillpage {
    padding: 1.5em;
}

#panels-page,
.panels-page-color {
    background-color: var(--container-color-active);
}

#panels-page {
    flex-grow: 75;
    flex-basis: 0;
    border-radius: 10px;
    overflow: hidden;
}

#panels-options {
    flex-grow: 25;
    flex-basis: 0;
    border-radius: 10px;
    
    padding: .5em;
    border-width: 4px;
    border-style: solid;
    border-color: rgba(140, 145, 146, 0.5);

    overflow: hidden !important;
    transition: max-height 0.3s ease-in-out !important;
    max-height: 150em;

    @media screen and (max-width: 768px) {
        margin-bottom: 1em;
    }
}
#panels-options h3 {
    margin: 0;
    margin-left: .8em;
}
#panels-options button {
    border: none;
    border-radius: inherit;
    background-color: rgba(140, 145, 146, 0.2);
    margin-bottom: .2em;
    font-size: 1.2em;
    padding: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-align: start;
    
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content:left;
    flex-direction: row;
    width: 100%;

    user-select: none;
    color: inherit;

    transition: all .10s ease-in-out;
}
#panels-options button:hover {
    background-color: rgba(120, 39, 196, 0.7);
}

#panels-options button:active {
    background-color: rgba(191, 39, 196, 1);
    color: white;
}
#panels-options button:disabled {
    background-color: rgb(127, 27, 131);
    color: white;
}
#panels-options i {
    font-size: 1.5em;
    margin-top: .25em;
}


#panels-options button[id="#menu-expantion"] {
    margin-bottom: 16px;
    @media screen and (min-width: 768px) {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .hidden-menu {
        border-radius: 2em !important;
        padding: 0px !important;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;

        max-height: 5em !important;
    }
    .hidden-menu button {
        margin-bottom: 0px !important;
    }
    .hidden-menu button:not([id="#menu-expantion"]) {
        display: none !important;
    }
    .hidden-menu b,
    .hidden-menu br {
        display: none !important;
    }
}

/* Home page */
#viewlist-container {
    margin-top: 3em;
    width: 100%;
    overflow: hidden;
}
#viewlist-container div {
    transition: all .20s ease-in-out;
}
#viewlist-header {
    border-width: 4px;
    border-style: solid;
    border-radius: 25px;
    border-color: rgba(140, 145, 146, 0.5);
    background-color: rgba(140, 145, 146, 0.5);

    margin-bottom: .5em;

    display: flex;
    align-items: center;
    justify-content:left;
}
#viewlist-header-back {
    transition: width .20s ease-in-out;
    white-space: nowrap;
}
.viewlist-fillpage {
    padding: 1.5em;
    border-width: 6px;
    border-style: solid;
    border-radius: 25px;
    border-color: rgba(39, 40, 41, 0.7);
    background-color: rgba(140, 145, 146, 0.5);
}
#viewlist-header-icon {
    font-size: 2em;
    margin-right: 10px;
}
#viewlist-header-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#viewlist-header h2 {
    padding: 10px;
}
#viewlist-header p {
    font-size: 1.25em;
    padding-right: 1em;
    padding-left: 1em;
    margin-left: .5em;
    max-width: max-content;
}
#viewlist-options {
    display: block;

    display: flex;
    align-items:baseline;
    justify-content:stretch;

    flex-direction:row;
    flex-wrap: wrap;
}

#viewlist-options div {
    border-width: 6px;
    border-style: solid;
    border-radius: 25px;
    border-color: rgba(39, 40, 41, 0.7);
    background-color: rgba(140, 145, 146, 0.5);
    margin: .2em;
    font-size: 1.25em;
    width: 12em;
    padding: 1em;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content:left;
    flex-direction: column;
    flex-grow: 1;

    user-select: none;

    transition: all .10s ease-in-out;

    @media screen and (max-width: 468px) {
        width: 100%;
        align-items: start;
    }
}

#viewlist-options h3 {
    margin: 0;
    margin-top: .5em;
}

#viewlist-options div:hover {
    border-color: rgba(23, 5, 51, 0.8);
    background-color: rgba(120, 39, 196, 0.7);
}

#viewlist-options div:active {
    border-color: rgba(49, 5, 51, 1);
    background-color: rgba(191, 39, 196, 1);
    color: white;
}
#viewlist-options i {
    font-size: 2em;
    margin-top: .25em;
}

/* User info */
.user-info-lister {
    display: flex;
    align-items: center;

    @media screen and (max-width: 468px) {
        align-items: start;
        flex-direction: column;
    }
}
.user-info-lister img {
    border-radius: 10px;
    margin-right: 20px;
}
.user-info-lister p {
    margin: 0;
    font-weight: 800;
    color: #0058bd;
    filter: drop-shadow(0px 0px 5px rgb(63, 63, 63));
    margin: 0;
}
.user-info-lister h3 {
    font-size: 1.25em;
    margin: 0;
}

/* Generic listing service */
.generic-list {
    font-size: 1.2em;
    list-style-type: none;

    padding: 0;
}

.generic-list p {
    margin: 0;
    margin-top: 10px;
}

.generic-list button {
    margin: 0;
    margin-top: 1em;

    @media screen and (max-width: 468px) {
        min-width: 100% !important;
    }
}

.generic-list a {
    margin-top: 1em;

    @media screen and (max-width: 468px) {
        min-width: 100% !important;
    }
}

.generic-list li {
    background-color: rgba(143, 133, 133, 0.61);
    border-radius: 10px;

    margin: 10px;
    padding: 20px;
    
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.generic-list-title {
    font-size: 1.2em;
    font-weight: 800;
    color: #0058bd;
    filter: drop-shadow(0px 0px 5px rgb(63, 63, 63));
    margin: 0;
}

/* App info */
.app-info-lister {
    display: flex;
    align-items: center;

    @media screen and (max-width: 768px) {
        align-items: start;
        flex-direction: column;
    }
}
.app-info-lister img {
    border-radius: 10px;
    margin-right: 20px;
    width: 160px;

    @media screen and (max-width: 768px) {
        width: 100%;
    }
}
.app-info-lister p {
    margin: 0;
    font-weight: 800;
    color: #0058bd;
    filter: drop-shadow(0px 0px 5px rgb(63, 63, 63));
    margin: 0;
}
.app-info-lister h3 {
    font-size: 1.25em;
    margin: 0;
}

/* Info box extension */
.info-extend {
    height: 0;
    overflow: hidden;
}

/* Edit app  */
.upload-box {
    font-size: 1em;
    font-weight: 800;
    padding-left: 1em;
    padding-bottom: 1em;
    max-width: 20em;
    text-overflow:clip;
}

.upload-box::file-selector-button {
    cursor:pointer;

    background: linear-gradient(-45deg,  rgb(0, 94, 216), rgb(204, 0, 255));
    border-radius: 1em;
    padding: .5em;
    border: none;

    font-size: 1em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.753);

    min-width: 100px;
    margin-top: 1em;

    transition: all .30s ease-in-out;
}

.upload-box::file-selector-button:hover {
    filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
    
    transition: filter .20s ease-in-out;
}

/* Bigger input box */
.bigger-panel-edit {
    width: 90%;
    max-width: 40em;
}

/* Account management */
#status-list-box {
    position: relative;
}

#status-selector-icon {
    color: black;
    padding: none;
    margin: none;
    font-size: 1.5em;

    position: absolute;
    top: 20%;
    left: 20px;
}