.window {

    margin: 8px auto 20px;

    background: #c0c0c0;

    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;

    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;

    box-shadow:
        inset -1px -1px #808080,
        inset 1px 1px #dfdfdf,
        3px 3px 6px rgba(0, 0, 0, 0.15);

    max-height: calc(100vh - 16px);

    display: flex;
    flex-direction: column;

    position: relative;
    z-index: 10;
}

.window.explorer {
    width: 900px;
}

.window.document {
    width: 900px;
}

.window-header {
    height: 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 6px;

    background: linear-gradient(
        to right,
        #0a246a,
        #2a6fd4
    );

    color: white;

    font-weight: bold;
}

.window-close {
    width: 26px;
    height: 24px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;
    font-weight: bold;
    line-height: 1;

    background: #c0c0c0;

    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;

    cursor: pointer;
    padding: 0;
}

.window-close:active {

    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    padding-top: 1px;
    padding-left: 1px;

}

.window-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.window-title-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.window-body {
    display: flex;
    min-height: 500px;
    height: calc(100vh - 180px);
}

.window-sidebar {
    width: 220px;
    background: #c0c0c0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #808080;
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
}

.dialog{

    display: flex;
    flex-direction: column;

}

.dialog-body{

    flex: 1;

    padding: 0px 16px 16px;

    background: #fffbe9;

    overflow: auto;

}

.dialog-container{

    display: flex;

    justify-content: center;

    align-items: center;

    height: calc(100vh - 74px);

}

.sidebar-header {
    text-align: center;
    flex:1;
}

.sidebar-header hr {
    margin-top: 18px;
    margin-bottom: 22px;
}

.sidebar-icon {
    margin-bottom: 15px;
}

.sidebar-icon img {
    width: 48px;
    height: 48px;

    display: block;
    margin: 0 auto;
}

.sidebar-header h2 {
    margin: 0 0 10px;
    font-size: 18px;
}

.sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.sidebar-info {
    margin-top: 25px;
    padding-top: 15px;

    border-top: 1px solid #808080;

    font-size: 13px;
}

.sidebar-info div {
    margin-bottom: 8px;
}

.sidebar-footer {
    margin-top:auto;
}

.button {

    display: block;

    width: 100%;
    height: 34px;

    margin-top: 16px;
    margin-bottom: 6px;

    background: #c0c0c0;

    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;

    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;

    cursor: pointer;

    font-weight: bold;
}

.button:active {

    border-top: 2px solid #404040;
    border-left: 2px solid #404040;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.back-button {

    width: 100%;
    height: 34px;

    background: #c0c0c0;

    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;

    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;

    cursor: pointer;

    font-weight: bold;
}

.back-button:active {

    border-top: 2px solid #404040;
    border-left: 2px solid #404040;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.profile-button:disabled{

    color:#808080;

    text-shadow:1px 1px #ffffff;

    cursor:default;

}

.window-content {
    flex: 1;
    padding: 20px;
    background: #fcf8e8;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.window.document .window-content,
.window.video .window-content,
.window.audio .window-content,
.window.image .window-content,
.window.pdf .window-content,
.window.archive .window-content,
.window.text .window-content,
.window.code .window-content,
.window.word .window-content,
.window.spreadsheet .window-content,
.window.presentation .window-content{
    background: #f5f5f5;
    font-size: 18px;
    line-height: 1.5;
}

.window.document document-content img {
    display: block;
    width: 90%;
    height: auto;
    margin: 20px auto;
}

.window.document document-content img.download {
    width: 500px;
    height: auto;
}

.window.document document-content table {
    margin-left: auto;
    margin-right: auto;
}

.detail {
    cursor: pointer;
    transition-duration: 1s;
}

.detail:hover {
    background: #ffadb1 !important;
}

.window-footer {
    height: 26px;

    display: flex;
    align-items: center;

    border-top: 1px solid #808080;
    box-shadow: inset 0 1px 0 #ffffff;

    padding: 0 10px 0 235px;
}

.news-item{

    padding:16px;

    border:1px dashed #808080;

    background:rgba(255,255,255,.45);

    display: block;

    color: inherit;

    text-decoration: none;

    transition: .15s;

    cursor: pointer;

    box-shadow:2px 2px 4px rgba(0,0,0,.12);

}

.news-item:hover {

    background: rgba(255,255,255,.55);
    border-color: #606060;

}

.news-item:hover .news-title {

    color: #003399;

}

.news-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:10px;

    margin-bottom:15px;

    border-bottom:1px solid #a0a0a0;

}

.news-title{

    font-size:20px;

    font-weight:bold;

    display:flex;

    align-items:center;

    gap:10px;

}

.news-title img{

    width:16px;

    height:16px;

    flex-shrink:0;

    display:block;

}

.news-date{

    font-weight:bold;

}

.news-text{

    line-height:1.5;

}

.news-list{

    display:flex;

    flex-direction:column;

    gap:10px;

     padding:0 25px 20px 25px;

}

.news-archive {
    margin-top: 18px;
}

.news-archive ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.news-archive li {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.news-archive a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #000;
    text-decoration: none;
}

.news-archive a:hover {
    text-decoration: none;
}

.archive-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000;
    text-decoration: none;
}

.archive-link.active {
    font-weight: bold;
}

.status-bar {
    flex: 1;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-left {
    white-space: nowrap;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.status-right a {
    color: inherit;
    text-decoration: none;
}

.status-right a:hover {
    text-decoration: none;
}

.login-panel{

    width:200px;

    margin:0 auto;

}

.login-panel label{

    display:block;

    margin-top:12px;
    margin-bottom:4px;

    font-weight:normal;

}

.login-panel input{

    width:100%;

    box-sizing:border-box;

}

.login-panel .back-button{

    display:block;

    margin:20px auto 0;

}

.login-text{

    margin:20px 0 10px;

    text-align:center;

    line-height:1.4;

}

.login-message {

    height: 30px;

    display: flex;

    justify-content: center;
    align-items: center;

}

.login-message hr {

    margin: 4px 0;

    border: none;

    border-top: 1px solid #808080;

}

.login-register {

    margin-top: 20px;

    text-align: center;

    line-height: 1.4;

}

.form-message {

    margin: 0;

    text-align: center;

    font-size: 14px;

    font-weight: normal;

    color: #990000;

}

.profile-panel {

    display: flex;
    flex-direction: column;
    align-items: center;

    height: 100%;

}

.profile-photo {

    width: 150px;
    height: 150px;

    margin-top: 15px;

    border: 2px solid #808080;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-size: 14px;

}

.profile-rating {

    margin-top: 25px;

    color: #808080;

    font-size: 14px;

    text-align: center;

}

.profile-buttons {

    display: flex;

    gap: 10px;

    margin-top: auto;
    margin-bottom: 10px;

}

.profile-button {

    width: 120px;
}

.settings-panel{

    display:flex;

    flex-direction:column;

    padding:15px;

}

.settings-panel label{

    margin-top:10px;
    margin-bottom:5px;

}

.settings-panel input{

    margin-bottom:8px;

}

.settings-panel hr{

    margin:15px 0;

    border:none;

    border-top:1px solid #808080;

}

.forgot-password {

    margin-top: 12px;
    margin-bottom: 18px;

    text-align: center;

}

.forgot-password a {

    color: #000000;

    text-decoration: none;

}

.forgot-password a:hover {

    text-decoration: underline;

}

.forgot-password-recovery {

    margin-top: 50px;

}

.comment {

    margin-bottom: 6px;

    overflow-wrap: anywhere;

    word-break: break-word;

}

.comment-input {

    font-size: 17px;

    padding: 8px;

    resize: vertical;

}

.delete-comment {

    background: none;

    border: none;

    color: #c00000;

    cursor: pointer;

    margin-left: 8px;

    padding: 0;

    font: inherit;

}

.delete-comment:hover {

    text-decoration: underline;

}

.video-player {

    width: 800px;
    max-width: 100%;
    height: auto;

}