:root {
    --content-container-w: ;
    --content-container-h: ;
    --content-container-top: ;
    --content-container-left: ;
    --text-toolbar-w: ;
    --text-toolbar-h: ;
    --text-toolbar-top: ;
    --text-toolbar-left: ;
    --bold: url('/img/competitions/svg/bold-font-style-svgrepo-com.svg');
    --ordinary-font: url('/img/competitions/svg/font-svgrepo-com.svg');
    --italic: url('/img/competitions/svg/italic-svgrepo-com.svg');
    --underscored: url('/img/competitions/svg/underline-svgrepo-com.svg');
    --text-left: url('/img/competitions/svg/align-left-svgrepo-com.svg');
    --text-center: url('/img/competitions/svg/center-align-svgrepo-com.svg');
    --text-right: url('/img/competitions/svg/right-align-svgrepo-com.svg');
    --copy: url('/img/competitions/svg/copy-svgrepo-com.svg');
    --past: url('/img/competitions/svg/past-edit-editor-format-text-tool-svgrepo-com.svg');
    --image: url('/img/competitions/svg/image-plus-svgrepo-com.svg');
    --hed1: url('/img/competitions/svg/h1-header-heading-header-1-format-editor-svgrepo-com.svg');
    --hed2: url('/img/competitions/svg/h2-header-heading-header-2-format-editor-svgrepo-com.svg');
    --hed3: url('/img/competitions/svg/h3-header-heading-header-3-format-editor-svgrepo-com.svg');
    --create-chapter: url('/img/competitions/svg/plus-square-svgrepo-com.svg');
    --remove-chapter: url('/img/competitions/svg/delete-svgrepo-com.svg');
    --next-chapter: url('/img/competitions/svg/chapter-next-svgrepo-com.svg');
    --prev-chapter: url('/img/competitions/svg/chapter-previous-svgrepo-com.svg');
    --q: url('/img/competitions/svg/question-svgrepo-com.svg');
    --download: url('/img/competitions/svg/download-square-svgrepo-com.svg');
    --export: url('/img/competitions/svg/upload-svgrepo-com.svg');
    --share: url('/img/competitions/svg/share-svgrepo-com.svg');
    --submit: url('/img/competitions/svg/submit-success-check-mark-svgrepo-com.svg');
    --email: url('/img/competitions/svg/email-svgrepo-com.svg');


}

.descr-tools {
    position: absolute;
    background-color: wheat;
    border: green 1px solid;
    border-radius: 10px;
    text-align: center;
    width: 130px;
    height: auto;
    color: blue;
    cursor: pointer;
    padding: 5px;
}

.invisible {
    display: none;
}

.pouptoolbar {
    position: absolute;
    background-color: rgb(225, 222, 205);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    max-width: 100px;
    height: auto;
    padding: 5px;
    row-gap: 5px;
    border-radius: 7px;
}

.pouptoolbar button {
    border-radius: 7px;
    background-color: rgb(255, 234, 234);
    cursor: pointer;
}

.q {
    background-image: var(--q);
}

.download {
    background-image: var(--download);
}

.export {
    background-image: var(--export);
}

.share {
    background-image: var(--share);
}

.submit {
    background-image: var(--submit);
}

.email {
    background-image: var(--email);
}

.vertical-toolbar {
    display: flex;
    flex-direction: column;
}

.vertical-toolbar>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    padding: 4px;
}

.create-chapter {
    background-image: var(--create-chapter);
}

.remove-chapter {
    background-image: var(--remove-chapter);
}

.next-chapter {
    background-image: var(--next-chapter);
}

.prev-chapter {
    background-image: var(--prev-chapter);
}

.hed1 {
    background-image: var(--hed1);
}

.hed2 {
    background-image: var(--hed2);
}

.hed3 {
    background-image: var(--hed3);
}

.copy {
    background-image: var(--copy);
}

.past {
    background-image: var(--past);
}

.image {
    background-image: var(--image);
}

.ordinar-standardfont {
    background: var(--ordinary-font);
    width: 40px;
    height: 40px;
}

.heads,
.incertion-tools,
.text-align,
.fontstyles-toolbar-hor {
    background-color: burlywood;
    padding: 1.5px;
    width: fit-content;
    padding-right: 7px;
    border-radius: 5px;
    border: solid 1px black;
    margin-right: 10px;
}

.text-align {
    background-color: rgb(188, 244, 209);
}

.incertion-tools {
    background-color: rgb(200, 243, 243);
}

.heads {
    background-color: ivory;
}

.bold {
    background: var(--bold);

}

.italic {
    background-image: var(--italic);

}

.underscored {
    background-image: var(--underscored);

}

.text-left {
    background-image: var(--text-left);

}

.text-center {
    background-image: var(--text-center);

}

.text-right {
    background-image: var(--text-right);

}

.q,
.download,
.export,
.share,
.submit,
.email,
.create-chapter,
.remove-chapter,
.next-chapter,
.prev-chapter,
.hed1,
.hed2,
.hed3,
.copy,
.past,
.image,
.text-left,
.text-center,
.text-right,
.underscored,
.italic,
.bold,
.ordinar-standardfont {
    width: 40px;
    height: 40px;
    /* 2. Center it perfectly (horizontal & vertical) */
    background-position: center;

    /* 3. Stop it from tiling/repeating */
    background-repeat: no-repeat;

    /* 4. Make sure it fits inside the button without getting cut off */
    background-size: contain;
    background-size: 25px 25px;
    border-radius: 3px;
    border: 1px rgb(92, 86, 86) solid;
    cursor: pointer;
    margin-left: 5px;
    background-color: rgba(255, 255, 255, 0.527);
}

.active-btn {
    background-color: lightskyblue;
}

.content-container {
    position: absolute;
    top: var(--content-container-top);
    left: var(--content-container-left);
    width: var(--content-container-w);
    height: var(--content-container-h);
}

.horizon-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 5px);
    height: 42px;
    display: flex;
}

.vertical-toolbar {
    position: absolute;
    top: 42px;
    left: calc(100% - 46px);
    width: 43px;
    height: calc(100% - 42px);
}

.light-mode {
    background-color: rgba(241, 233, 224, 0.656);
    color: rgb(35, 37, 34);
    border: solid blue 1px;
}

.light-horizon-toolbar {
    background-color: rgb(247, 241, 250);
    border: gray solid 1px;

    border-radius: 3px;
    margin: 2px;
}

.light-vertical-toolbar {
    background-color: rgb(247, 241, 250);
    border: green solid 1px;
    border-top: none;
    border-radius: 3px;

}

.dark-mode {
    background-color: rgb(32, 33, 39);
    color: blanchedalmond;
}

.content-holder {
    position: absolute;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    top: 46px;
    left: 1px;
    border: 1px solid green;
}

.light-content-holder {
    color: black;
    background-color: rgba(236, 242, 236, 0.864);
}

.vertical-toolbar {
    display: flex;

}

.download,
.export,
.share,
.submit,
.email,
.create-chapter,
.remove-chapter,
.next-chapter,
.prev-chapter {
    margin-left: 0;
    margin-top: 2px;
    margin-bottom: 2px;
}

.chapters {
    margin-bottom: 10px;
    margin-top: 5px;
    background-color: rgb(235, 175, 175);
}

.activity {
    background-color: rgb(210, 255, 205);
    border: lightgreen solid 1px;
}

/* button {
    transition: ease-in-out 0.2s;
}

button:hover {
    transform: scale(1.2);
    background-color: lightslategray;
} */

nav {
    position: absolute;
    width: 300px;
    height: fit-content;
    top: 0;
    left: calc(50vw - 150px);
    z-index: +1;

}
.expand{
    position:absolute;
    top: 5px;
    left: -30px;
    font-size: large;
    cursor: pointer;
    text-align: center;
    background-color: black;
    border-radius: 7px;
    color: wheat;
}
.invisible{
    display: none;
}
.sflex{
    display: flex;
}
.crumbs ol {
    list-style-type: none;
    flex-direction: column;
    /* Default behavior */
    flex-wrap: wrap;
    /* Allows items to wrap to next line */
    gap: 10px;
    /* Spacing between items */
    padding-left: 0;
    align-items: center;
    
}

.crumbs ol li {
    border: solid 2px lightslategray;
    padding: 7px;
    cursor: pointer;
    background: linear-gradient(#fed8d8, #cdd1ff);
    width: 200px;
    margin-bottom: 5px;
}

.crumb {
    display: inline-block;
}

a {
    text-decoration: none;
}

.crumb a::after {
    display: inline-block;
    color: black;

    font-size: 80%;
    font-weight: bold;
    padding: 0 3px;
}

.user-data {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100%-15px);
}

.is-disabled {
    background-color: rgba(251, 18, 57, 0.952);
}