body {
    margin: 0;
    padding: 0;
}

.center {
    text-align: center;
}

.WhiteMode {
    background-color: white;
    border-color: #bbbbbb;
    color: #222222;
}

.BlackMode {
    background-color: #131313;
    border-color: #777777;
    color: #F5F5F5;
}

.panelWhiteMode {
    box-shadow: 0px 12px 12px #444444;
}

.panelBlackMode {
    border-left: 1px solid #555555;
    border-right: 1px solid #555555;
    border-bottom: 1px solid #555555;
    background-color: #131313;
}

.invertImage {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(80%);
}

.noSelect {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
}

#logVid {
    position: fixed;
    z-index: 10;
    font-size: 16pt;
    background-color: aqua;
    color: black;
}

.btnClose {
    display: inline-block;
    width: 38px;
    border-radius: 20px;
    height: 38px;
    position: absolute;
    top: 7px;
    right: 0;
    margin-right: 7px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.btnCloseWhite {
    box-shadow: 0px 1px 2px #777777;
}

.btnCloseBlack {
    border: 1px solid #555555;
}

.btnCloseWhite:hover {
    background-color: #eeeeee;
}

.btnCloseBlack:hover {
    background-color: #444444;
}

.btnClose span {
    font-family: Arial, Helvetica, sans-serif;
    left: 12px;
    top: 8px;
    font-weight: normal;
    position: absolute;
    font-size: 15pt;
    transform: scaleY(0.8);
}

.btnBack {
    display: inline-block;
    width: 38px;
    border-radius: 20px;
    height: 38px;
    position: absolute;
    top: 7px;
    left: 0;
    margin-left: 7px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.btnBackWhite {
    box-shadow: 0px 1px 2px #777777;
}

.btnBackBlack {
    border: 1px solid #555555;
}

.btnBackWhite:hover {
    background-color: #eeeeee;
}

.btnBackBlack:hover {
    background-color: #444444;
}

.btnBack span {
    font-family: Arial, Helvetica, sans-serif;
    left: 12px;
    top: 8px;
    font-weight: bold;
    position: absolute;
    font-size: 16pt;
    transform: scaleX(0.5);
}

.btnNext,
.btnPrev {
    width: 35px;
    border-radius: 50px;
    line-height: 33px;
    text-align: center;
    vertical-align: top;
    margin: 0px 10px;
    cursor: pointer;
}

.btnNextWhite,
.btnPrevWhite {
    box-shadow: 0px 1px 2px #777777;
}

.btnNextBlack,
.btnPrevBlack {
    border: 1px solid #555555;
}

.btnNextWhite:hover,
.btnPrevWhite:hover {
    background-color: #eeeeee;
}

.btnNextBlack:hover,
.btnPrevBlack:hover {
    background-color: #444444;
}

.btnNext span,
.btnPrev span {
    display: inline-block;
    transform: scaleX(0.5);
    vertical-align: top;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16pt;
    font-weight: bold;
}

.f12 {
    font-size: 12pt;
}

.f14 {
    font-size: 14pt;
}

.f15 {
    font-size: 15pt;
}

.f16 {
    font-size: 16pt;
}

.f18 {
    font-size: 18pt;
}

.f20 {
    font-size: 20pt;
}

.f22 {
    font-size: 22pt;
}

.rtl {
    direction: rtl;
}

.font_SystemUI {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.font_Arial {
    font-family: Arial, Helvetica, sans-serif;
}

.font_Tahoma {
    font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif;
}

.font_SegoeUI {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.font_SansSerif {
    font-family: sans-serif;
}

.font_TimesNewRoman {
    font-family: 'Times New Roman', Times, serif;
}

.imgs {
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: 8px 5px;
    display: inline-block;
    cursor: pointer;
    width: 33px;
    height: 33px;
}

.imgSearch {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" /%3E%3C/svg%3E');
}

.imgBookmark {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16"><path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z" /%3E%3C/svg%3E');
}

.imgSetting {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/></svg%3E');
}

.imgbtn {
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
}

.imgToggleOn {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8"/></svg%3E');
    background-position: 0px 5px;
    background-size: 28px 28px;
    width: 40px;
    height: 33px;
}

.imgToggleOff {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg%3E');
    background-position: 0px 5px;
    background-size: 28px 28px;
    width: 40px;
    height: 33px;
}

.imgBook {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAXCAQAAADADIVqAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjBRACHRwsFP9eAAABHUlEQVQ4y8XUvSuFYRgG8N/ro5BRlGKTWMyiWJ1BlLKYSP4BLP4MSilhxy4mGZR/wESm41spH4NzbgOdnHd4lVed697u63qurvt+nh7SKNh1J9za0w8G7LsR7uwak4l598KDdYu2hVAwLYQdyzY8Ck/mqw916TNkxqYQThUqTLOi8OJSa6U37kwIm2YM6dOTCLy6du7ElutUphctmr1X9TrMGdarUxOElYyhLhQz2EVRh8YMSSLJYBupQ/grSl8G5doZlPOO8G1QyjtC7gTl2iXIfQuRN8HHP72D2ho0pHaQaNNtRIcjJ94qX8uIUbeOXbn/oS99bXIB1Ou0Jqpq0IWi0VR3Vbt6MCUISyYdpkS/14EJsyLx/O32FyTiE0uhiWInAUupAAAAAElFTkSuQmCC');
    background-size: 27px;
    background-position: 7px 7px;
    width: 35px;
    height: 33px;
}

.imgList {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/%3E%3C/svg%3E');
    background-size: 28px 28px;
    background-position: 0px 5px;
    width: 28px;
    height: 28px;
}

.imgOptions {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-check" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0"/></svg%3E');
    background-size: 28px 28px;
    background-position: 0px 2px;
    width: 28px;
    height: 28px;
}

.unpin {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16"><path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/></svg%3E');
    background-size: 28px 28px;
    background-position: 0px 2px;
    width: 28px;
    height: 28px;
}

.pin {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle-fill" viewBox="0 0 16 16"><path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146"/></svg%3E');
    background-size: 28px 28px;
    background-position: 0px 2px;
    width: 28px;
    height: 28px;
}