.textboard-body {
    background-color:white;
    border-radius:5px;
    padding:5px;
    margin-top:5px;
    border:1px solid darkgray;
    
}
.textboard-series-body {
    padding: 10px;
    border: 1px dotted black;
    border-radius: 15px;
    background-color: #e0effc;
    padding-bottom:30px;
}
.textboard-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50px;
    cursor: pointer;
    margin-top: 3px;
    margin-bottom: 3px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 8px;
    align-items: center;
    background-color: #FFEBE4;
}

    .textboard-row:hover {
        background-color: #ffbba3;
    }

.textboard-title-row {
    width:100%;
    display:flex;
}
.textboard-title-lock {
    font-size:larger;
    margin-left: 8px;
    top: 12px;
    cursor: pointer;
    color: darkgreen;
}
.textboard-title-lock.open {
    color: red;
}
.textboard-title {
    font-size: xx-large;
    font-weight: bold;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
.textboard-caret {
    flex-grow:0;
    margin-right:20px;
}
.textboard-cancel-button{ 
    
    flex-grow:0;
    flex-shrink:0;
    width:40px;
    height:40px;
    font-size:20px;
    align-items:center;
    margin-left:auto;
    display:flex;
    justify-content:center;
    background-color:red;
    color:white;
    border-radius:5px;
    margin-top:-1px;
    
}
.textboard-spacer {
    flex-grow:1;
}
.textboard-HTML{
    border: 1px dotted darkgray;
    border-radius:8px;
    cursor: pointer;
    padding: 5px;
    overflow-x:auto;
}
.textboard-edit{

}
.textboard-prompt-empty{
    display:flex;
    align-content:center;
    justify-content:center;
    line-height:50px;
    margin-left:20px;
}
.textboard-buttons-container{
    display:flex;
    flex-direction:row;
    align-content:center;
}
.textboard-error-message{
    font-weight:bold;
    font-style:italic;
    color:red;
}
.textboard-reorder-dropper {
    height:10px;
    background-color: #e7e7ff;
    width:100%;
    flex-shrink:0;
}
.textboard-reorder-hover {
    height: 10px;
    background-color: #bdbdff;
    width: 100%;
    flex-shrink:0;
}
.textboard-edit-warning {
    color:red;
    font-style:italic;
}
.textboard-series-row {
    display:flex;
    flex-direction:row;
    
}
.textboard-series-row-label{
    flex-grow:0;
    display:flex;
    font-size:x-large;
    font-weight:bold;
    align-self:top;
    margin-left:10px;
    margin-right:10px;
}
.textboard-series-row-unselected{
    background-color: #ff9797

}
.textboard-series-row-selection{
    
}
.textboard-series-row-warning{
    color:red;
    font-weight:bold;
    font-style:italic;
}
.textboard-center {
    display: flex;
    width: 100%;
    flex-grow:1;
    flex-shrink:0;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    /* flex-shrink:0; */
    flex-wrap: wrap;
}
.textboard-center-column {

    align-items:center;
}
.textboard-assignment-periodclass{
    margin-right:10px;
}
.textboard-studentboard-container{

}

.textboard-studentboard-body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border: 1px solid darkgray;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    overflow: hidden;
}
.textboard-studentboard-edit {
    display: flex;
    flex-grow:1;
    height: 30px;
    width: 100%;
}
.textboard-studentboard-titlebar {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50px;
    cursor: pointer;
    margin-top: 3px;
    margin-bottom: 3px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 8px;
    align-items: center;
    background-color: #FFEBE4;
}
.textboard-studentboard-title{
    margin:auto;
    font-size:large;
    font-weight:bold;
    display:flex;
    flex-direction:row;
}
.textboard-studentboard-nav{
    display:flex;
    height:30px;
    width:30px;
    border-radius:7px;
    flex-shrink:0;
    flex-grow:0;
    align-content:center;
    justify-content:center;
    flex-wrap:wrap;
    font-size:large;
}
.textboard-studentboard-nav:hover {
    background-color:#ffbf97 ;
}
.textboard-studentboard-reload-warning {
    color: red;
    font-weight: bold;
    font-style: italic;
    margin-right: 15px;

    overflow:hidden;
    line-height:90%;
    font-size:80%;
}
.textboard-studentboard-reload-icon {

}
.textboard-studentboard-showHTML {
    width:100%;
    height:100%;
    overflow:auto;
}


.backup-thumbnail-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding: 10px;
}

backup-thumbnail-item {
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.thumbnail-number {
    font-size: 1.5em;
    font-weight: bold;
}

.thumbnail.checkmark {
    border: 2px solid green;
    color: green;
    font-size: 2em;
}

.rewind-container {
    height:100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden; /* ensures no overflow from preview */
}
.rewind-thumbnail-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    background-color: #f5f8fb;
    border-radius: 8px;
    border: 1px solid black;
}

.rewind-thumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: #e9ecef;
    border-radius: 6px;
    border: 1px solid #ced4da;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}


.no-rewind-backups {
    padding: 10px;
    color: #555;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 6px;
    text-align: center;
}



    .rewind-thumbnail:hover {
        background-color: #dbe7f8;
        box-shadow: 0 0 6px rgba(0, 123, 255, 0.4);
    }

.rewind-number {
    font-size: 1rem;
    color: #495057;
    font-weight: 600;
}

.rewind-preview {

    padding: 12px;
    background-color: #fff;

    display:flex;
    flex-grow:1;
    flex-shrink:1;
    flex-direction:column;
    overflow:hidden;
}

.preview-content {
    display:flex;
    flex-direction:column;
    flex-grow:1;
    flex-shrink:1;

    overflow-y: auto;
    border: 2px solid black;
    padding: 10px;
    background-color: #f8f9fa;
    margin-bottom: 12px;
}