* {
    box-sizing: border-box;
    margin: 0;

}

.bigtxt {
    font-size: 1.5rem;
}

section,
footer {
    overflow: hidden;
    white-space: wrap;
    word-break: break-word;
}


#col-save-stuff {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.editorcontainer {
    margin: 0 5% 5% 5%;
    position: relative;
    overflow: hidden;


}

.letter-container {
    display: inline-block;

}

.letter {
    display: flex;
    /* border: 0.1px solid #ccc; */
    z-index: 1000;
    align-items: flex-end;
    font-size: 2.5rem;
    height: 5rem;
    /*
    max-height: 4.5rem;
    min-height: 4.5rem; */
}

.borders-on .letter,
#container,
.borders-on .basics,
.borders-on .added,
.borders-on .cussta {
    border: 1px solid #ccc;

}
.added {
  
margin-bottom: 0.2rem;
}

.borders-off .letter,
#container,
.borders-off .basic,
.borders-off .added,
.borders-off .cussta {
    border: none;
}

.red-on>span {
    color: red;
}

.red-off>span {
    color: black;
}

#container,
span div {
    padding: 0;
    margin: 0;
}

.main-contents {
    margin-top: 4rem;

}

.main-page {
max-width: 100% !important;
    height: 100%;
    margin-top: 7rem;
    display: flex;

    border: 1px solid #ccc;
}

.container-border {
    padding: 1rem;
    /* border: 1px solid #ccc; */
   width: -webkit-fill-available;
    height: 100%;
    margin-bottom: 20%;
    max-width: 100% !important;
}

#milikits-container {
    /* padding: 1rem;
    background-color: white;
    width: 25%; */
    align-self: flex-start;
    top: 0;
    position: sticky;
    padding: 1rem;
    background-color: white;
    width: 32%;
    height: 100%;
    overflow: auto;
    resize: both;

}

#container {
    border: 1px solid #ccc !important;
width: 100%;

    resize: both;
    overflow: auto;
    box-sizing: border-box;
    padding: 2rem !important;
    max-width: 100%;
  max-height: 100%;
}

#milikits-container p small {
    padding: 0;
    margin: 0;
}


.basics {
    font-size: 3rem;
    /* line-height: 1rem; */
    /* border: 1px solid #ccc; */
}

.baseletter {
    line-height: 4.5rem;
    font-size: 5rem;
    user-select: none !important;
    /* Prevent text selection */
    pointer-events: none !important;
    /* Ignore pointer events */
    z-index: 900;
}



.seregela,
.tirikeza,
.ihita,
.others {
    text-decoration-line: underline;
    text-underline-offset: -0.9em;
}



.whitespace {
    visibility: hidden;
}

.stack {
    font-size: 2.5rem;
    margin-top: -1.7rem;
    line-height: 0.6rem;
}

.milikitstack {
    font-size: 1.5rem;

    margin-top: -1rem;
    line-height: 1rem;

    margin-top: -1rem;

}

#displayArea,
.displayArea {
    margin-bottom: -0.7rem;
    writing-mode: vertical-lr;
    text-orientation: upright;

}

.basicmilkit,
.ihita,
.seregela,
.tirikeza,
.others {
    /* line-height: 1rem; */
    /* margin-right: 0.4rem; */
}

.milikit {
    font-size: 1rem;
}

.basicmilkit {
    font-size: 1.5rem;
}

.milikititem,
#stacks-container>button {
    padding: 0.3rem;
    margin: 0.2rem;
    border: 1px solid #ccccccd6;

    /* min-width: 3rem; */
}

.milikit-title {
    /* display: inline; */
    font-size: 1.1rem !important;
}

#stacks-container {
    font-size: 1rem;
}

.highlight {
    /* background-color: rgb(251, 255, 212); */
    border: 0.1rem solid #00b8cc !important;
    z-index: 20000000 !important;
}


.cussta {
    cursor: pointer;

    font-size: 2.5rem !important;
    display: inline-flex;
}

#keysList>ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 10rem;
    /* Set the desired height for the scrollable area */
    width: 20rem;
    max-width: 20rem;
    overflow-y: auto;
    /* Enable vertical scrollbar if needed */

}

/* Style for list items (optional) */
#keysList>ul>li {
    padding: 8px;
    border-bottom: 1px solid #eee;
    display: flex;
    /* Optional border between list items */
    justify-content: space-between;
}

.delete-button {
    color: white;
    background-color: rgb(150, 30, 30);
    border: 1px solid white;
    border-radius: 0.3rem;
}

li>h5 {
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 1rem 0 1rem;
}

.list-title {
    max-width: 20rem;
    display: flex;
    justify-content: space-between;
}

.x-btn {
    width: 1.5rem !important;
    height: 1.5rem !important;
    color: red;
    cursor: pointer;
}

footer {
    margin-top: 20rem;
}

#keyslist {
    padding: 1rem !important;
}

.file-form {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
  width: 100%;
  border-bottom: 1px solid #ccc;
}


#errorMessage {
    color: red;
}

:root {
    --tile-size: 12rem;
    /* Tile size */
    --icon-size: 3rem;
    /* Icon size */
    --tile-border-width: 0.1rem;
    /* Border width */
    --tile-margin: 1rem;
    /* Margin between tiles */
}

hr.style-eight {
    overflow: visible;
    /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #c00404;
    color: #be0000;
    text-align: center;
    opacity: 100%;
} 

hr.style-eight:after {
    content: "፠፠፠";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 3em;
    padding: 0 0.25em;
    background: white;
} 

@page {
    size: auto;
}

.widestack .basics {
    line-height: 1rem !important;
}

.red {
    color: rgb(216, 15, 15);
}

.center-images {
    text-align: center;
    /* Centers inline images */
}
.input-error {
  border-color: #dc3545;
  color: #dc3545;
}