.help-reverse {
    width: 30px;
    height: 30px;
    border: 2px solid rgb(120, 120, 120);
    box-sizing: border-box;
    background-size: 24px;
    background-color: rgb(54,54,54);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../pictures/icons/whelp.png");
    cursor: pointer;
}

.help-page {
    border: 2px solid rgba(0, 0, 0, 0);
    transition: border-color 1s , background-color 1s;
    border-radius: var(--box--radius);
    padding: 0px 5px;
    padding-top: 4px;
    cursor: pointer;
}

.help-page img {
    width: 30px;
    filter: drop-shadow(var(--small--shadow));
}


.help-page:hover {
    border-color: rgb(255, 255, 255);
    background-color: var(--hover--dark);
}

.help-standard {
    width: 28px;
    height: 28px;
    border: 2px solid rgb(48, 48, 48);
    box-sizing: border-box;
    border-radius: 2px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: background-color 0.5s;
    box-shadow: var(--tiny--shadow);
    background-image: url("../pictures/icons/help.png");
    cursor: pointer;
}

.help-standard:hover {
    background-color: var(--hover--selected);
}

.help-doc-reverse {
    color:rgb(169, 170, 170);
    margin: 0px 3%;
    max-height: 95vh;
    overflow-y: auto;
    border: 1px solid rgb(208, 209, 209);
    border-radius: 5px;
    background-color: black;
    padding: 0px 5px;
    position: relative;
}

.help-reverse:hover {
    background-color: rgb(80,80,80);
}

.help-doc-reverse::-webkit-scrollbar {
    display: none;
}

.help-title-reverse {
    color:rgb(208, 209, 209);
}

.help-title-standard {
    color:rgb(245, 170, 7);
}

.help-doc-standard {
    margin: 0px 3%;
    max-height: 95vh;
    overflow-y: auto;
    border: 1px solid var(--box--border);
    border-radius: var(--box--radius);
    background-color: var(--box--background);
    padding: 0px 5px;
    position: relative;
}

.help-doc-standard::-webkit-scrollbar {
    display: none;
}

.imgcmd {
    width: 20px;
    height: 20px;
}

.help-full-picture {
    padding: 1px; 
    max-width: 100%; 
    border: 2px solid red;
}

.help-floating-picture {
    padding: 1px;
    max-width: 30%; 
    border: 2px solid red; 
    float: right;
    margin-left: 3px;
}

#help-extract {
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    border: 2px solid var(--box--border);
    background-color: var(--box--background);
    margin-left: 5px;
    background-size: 16px;
    cursor: pointer;
    position: fixed;
    top: 5px;
    right: 5px;
    background-image: url("../pictures/icons/extract.png");
}

#help-extract:hover {
    background-color: var(--hover--selected);
}


@media screen and (min-width: 780px) {
    .help-doc-reverse , .help-doc-standard {
        margin: 0px 10%;
        padding: 0px 10px;
    }
}